/* ============================================================
   Traverse: catalog navigation
   Self-contained so it sits above whatever theme is active.
   ============================================================ */

.tvsn-wrapper{
  --ink:#0F1626; --ink-2:#1A2438;
  --paper:#F4F5F7; --amber:#E9A13B; --amber-dim:#A9721F;
  --slate:#5C6779; --slate-2:#8A93A3; --rule:#DCE0E7;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  position:sticky;top:0;z-index:9999;
  font-family:var(--body);line-height:1.5;
}
.tvsn-wrapper *{box-sizing:border-box}
.tvsn{position:relative;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}

.tvsn-bar{max-width:1220px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:26px}

.tvsn-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex-shrink:0}
.tvsn-logo svg{width:26px;height:26px;flex-shrink:0}
.tvsn-logo span{font-family:var(--display);font-variation-settings:'wdth' 105;font-weight:800;font-size:17px;letter-spacing:-.03em;line-height:1.1}
.tvsn-logo em{display:block;font-family:var(--mono);font-style:normal;font-size:9px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2)}

.tvsn-links{display:flex;align-items:center;gap:2px;height:100%}
.tvsn-links > a,.tvsn-trigger{
  display:flex;align-items:center;gap:6px;height:64px;padding:0 13px;
  font:inherit;font-size:14.5px;font-weight:600;color:#DBE0E8;text-decoration:none;
  background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;
}
.tvsn-links > a:hover,.tvsn-trigger:hover{color:#fff}
.tvsn-trigger[aria-expanded="true"]{color:var(--amber);border-bottom-color:var(--amber)}
.tvsn-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.tvsn-trigger[aria-expanded="true"] .tvsn-caret{transform:rotate(-135deg) translateY(-1px)}

.tvsn-search{margin-left:auto;display:flex;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:2px 2px 2px 12px;max-width:290px;flex:1}
.tvsn-search input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;font-size:14px;color:#fff;padding:8px 0}
.tvsn-search input::placeholder{color:var(--slate-2)}
.tvsn-search:focus-within{border-color:var(--amber)}
.tvsn-search button{background:none;border:0;cursor:pointer;color:var(--slate-2);padding:6px 9px;display:flex}
.tvsn-search button:hover{color:var(--amber)}
.tvsn-search svg{width:17px;height:17px}

.tvsn-cta{flex-shrink:0;background:var(--amber);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:9px 17px;border-radius:4px;white-space:nowrap}
.tvsn-cta:hover{background:#F5B052;color:var(--ink)}

/* mega */
.tvsn-mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-bottom:1px solid var(--rule);box-shadow:0 26px 50px -20px rgba(15,22,38,.35)}
.tvsn-mega[hidden]{display:none}
.tvsn-mega-inner{max-width:1220px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:210px 1fr;min-height:330px}

.tvsn-tabs{border-right:1px solid var(--rule);padding:24px 0;background:var(--paper);margin-left:-22px;padding-left:22px}
.tvsn-tabs button{display:block;width:100%;text-align:left;padding:10px 22px 10px 4px;font:inherit;font-size:14px;font-weight:600;color:var(--slate);background:none;border:0;border-left:3px solid transparent;cursor:pointer;margin-left:-4px;padding-left:18px}
.tvsn-tabs button:hover{color:var(--ink)}
.tvsn-tabs button[aria-selected="true"]{color:var(--ink);border-left-color:var(--amber);background:#fff}

.tvsn-panel{display:none;padding:26px 0 26px 30px}
.tvsn-panel.is-open{display:block}
.tvsn-panel h3{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:800;font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
.tvsn-lede{color:var(--slate);font-size:13.5px;margin:0 0 18px;max-width:66ch}

.tvsn-list{columns:3;column-gap:30px;font-size:14px;max-height:230px}
.tvsn-list-tight{columns:4;column-gap:24px;font-size:13.5px}
.tvsn-list a{display:flex;justify-content:space-between;gap:10px;break-inside:avoid;padding:5px 0;color:var(--ink);text-decoration:none}
.tvsn-list a:hover{color:var(--amber-dim)}
.tvsn-code{font-family:var(--mono);font-size:12px;color:var(--slate-2);margin-right:7px}
.tvsn-n{font-family:var(--mono);font-size:11px;color:var(--slate-2);flex-shrink:0}

.tvsn-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.tvsn-all{font-weight:700;font-size:14px;color:var(--amber-dim);text-decoration:none}
.tvsn-all:hover{text-decoration:underline}

/* The wordmark is a link, so the theme's own a:hover colour lands on it and the
   text disappears against the dark bar. Every colour is stated rather than
   inherited, because which theme is active should not change the brand. */
.tvsn-logo:hover,.tvsn-logo:focus,
.tvsn-logo:hover .name,.tvsn-logo:focus .name,
.tvsn-logo:hover span,.tvsn-logo:focus span{color:#fff!important}
.tvsn-logo:hover em,.tvsn-logo:focus em{color:var(--amber)!important}
.tvsn-logo:hover svg,.tvsn-logo:focus svg{color:#fff!important}
.tvsn-logo:hover svg path,.tvsn-logo:hover svg circle{stroke:#fff;fill:#fff}
.tvsn-logo:hover svg circle:nth-of-type(2){fill:var(--amber)}

.tvsn a:focus-visible,.tvsn button:focus-visible,.tvsn input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

@media (max-width:1080px){
  .tvsn-search{max-width:200px}
  .tvsn-list{columns:2}
  .tvsn-list-tight{columns:3}
}
@media (max-width:820px){
  /* Two rows, not three. A sticky header that eats a third of a phone screen
     is worse than one that hides a link, so search collapses to an icon and
     the links scroll under the wordmark. */
  .tvsn-bar{height:auto;flex-wrap:wrap;padding:10px 14px;gap:8px 10px}

  .tvsn-logo{order:1;flex:1 1 auto;min-width:0}
  .tvsn-logo svg{width:22px;height:22px}
  .tvsn-logo .name{font-size:16px}
  .tvsn-logo .name span,.tvsn-logo em{font-size:8.5px;letter-spacing:.09em}

  /* Search becomes a tap target that expands, rather than a full-width field
     pushing everything down. */
  .tvsn-search{order:2;flex:0 0 auto;width:38px;max-width:38px;padding:0;
    background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;
    transition:width .18s ease,max-width .18s ease}
  .tvsn-search input{width:0;padding:0;opacity:0;transition:opacity .12s}
  .tvsn-search button{padding:9px 10px}
  .tvsn-search:focus-within{width:100%;max-width:none;flex:1 1 100%;order:3;padding-left:12px}
  .tvsn-search:focus-within input{width:auto;flex:1;padding:9px 0;opacity:1}

  .tvsn-cta{order:2;flex:0 0 auto;font-size:13px;padding:8px 13px}

  .tvsn-links{order:4;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-top:1px solid rgba(255,255,255,.09);padding-top:2px}
  .tvsn-links::-webkit-scrollbar{display:none}
  .tvsn-links > a,.tvsn-trigger{height:38px;padding:0 10px;font-size:13.5px;white-space:nowrap}

  .tvsn-mega-inner{grid-template-columns:1fr;min-height:0}
  .tvsn-tabs{border-right:0;border-bottom:1px solid var(--rule);display:flex;overflow-x:auto;padding:0;margin:0;scrollbar-width:none}
  .tvsn-tabs::-webkit-scrollbar{display:none}
  .tvsn-tabs button{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:12px 14px;margin:0}
  .tvsn-tabs button[aria-selected="true"]{border-left:0;border-bottom-color:var(--amber)}
  .tvsn-panel{padding:18px 0}
  .tvsn-list,.tvsn-list-tight{columns:1;max-height:52vh;overflow-y:auto}
}

@media (max-width:400px){
  /* At the narrowest, the strapline is the first thing that can go. */
  .tvsn-logo .name span,.tvsn-logo em{display:none}
  .tvsn-cta{font-size:12.5px;padding:8px 11px}
}
}