/* Shared by the product landing, journal and field guide. Canonical TAIL tokens. */
.tail-skip{position:fixed;top:-100px;left:20px;padding:12px 18px;background:#0b2a8f;color:#fff;box-shadow:0 0 0 3px #fff;border-radius:7px;z-index:200;font:13px var(--tail-font);text-decoration:none}.tail-skip:focus{top:12px}
.tail-shell{position:sticky;top:0;z-index:60;height:72px;background:var(--tail-paper,#fff);border-bottom:1px solid var(--tail-line,#d4e1ff);font-family:var(--tail-font,Geist,sans-serif)}
.tail-shell *,.tail-search *{box-sizing:border-box}.tail-shell a{text-decoration:none;color:inherit}.tail-shell button{font:inherit;cursor:pointer}
.tail-shell-inner{height:100%;max-width:1600px;margin:auto;padding:0 32px;display:flex;align-items:center;gap:32px}
.tail-logo{display:flex;gap:7px;align-items:center;color:var(--tail-wordmark,var(--tail-blue))!important;font-size:30px;font-weight:700;font-style:italic;letter-spacing:-1.8px;line-height:1;flex-shrink:0}.tail-logo img{width:34px;height:30px;display:block}
.tail-global-nav{display:flex;align-items:center;gap:5px;height:100%;font-size:13px;font-weight:500}.tail-global-nav>a{padding:9px 14px;border-radius:8px}.tail-global-nav>a:hover,.tail-global-nav>a[aria-current=page]{background:var(--tail-blue-light);color:var(--tail-blue-text)}
.tail-product-menu{position:relative}.tail-product-menu summary{list-style:none;cursor:pointer;padding:9px 10px;color:var(--tail-muted);font-size:12px}.tail-product-menu summary::-webkit-details-marker{display:none}.tail-product-menu summary:after{content:'⌄';margin-left:7px}.tail-product-links{position:absolute;top:42px;left:0;min-width:180px;display:grid;padding:8px;background:var(--tail-paper);border:1px solid var(--tail-line);border-radius:12px;box-shadow:0 12px 32px #12326918}.tail-product-links a{padding:10px;border-radius:6px}.tail-product-links a:hover{background:var(--tail-surface)}
.tail-shell-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.tail-shell-search{display:flex;align-items:center;gap:9px;border:1px solid var(--tail-line);background:var(--tail-surface);color:var(--tail-muted);border-radius:8px;padding:9px 12px;min-height:38px;font-size:12px!important}.tail-shell-search svg,.tail-theme svg{width:17px;height:17px;flex:none}.tail-shell-search kbd{font:10px var(--tail-font);border:1px solid var(--tail-line);padding:1px 4px;border-radius:4px;margin-left:25px}.tail-theme{display:grid;place-items:center;min-width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--tail-ink)}.tail-theme:hover{background:var(--tail-surface)}
.tail-open{display:flex;align-items:center;gap:15px;padding:10px 16px;border-radius:9px;background:var(--tail-blue-fill);color:white!important;font-size:12px;font-weight:600;white-space:nowrap}.tail-shell :focus-visible,.tail-search :focus-visible{outline:3px solid var(--tail-focus,var(--tail-blue));outline-offset:3px}
.tail-search{width:min(660px,calc(100% - 28px));padding:0;border:1px solid var(--tail-line);border-radius:16px;background:var(--tail-paper);color:var(--tail-ink);max-height:80dvh;box-shadow:0 24px 90px #06133640;font-family:var(--tail-font,Geist,sans-serif)}.tail-search::backdrop{background:#09163366;backdrop-filter:blur(5px)}.tail-search-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--tail-line)}.tail-search-head svg{width:20px;flex:none}.tail-search-head input{width:100%;min-width:0;font:16px var(--tail-font);border:0;background:transparent;color:var(--tail-ink);outline:0}.tail-search-close{font:11px var(--tail-font);padding:6px 9px;border:1px solid var(--tail-line);border-radius:5px;background:transparent;color:var(--tail-muted);cursor:pointer}.tail-search-results{list-style:none;margin:0;padding:8px;max-height:54dvh;overflow:auto}.tail-search-results a{display:flex;align-items:center;gap:15px;padding:13px 14px;border-radius:9px;text-decoration:none;color:var(--tail-ink)}.tail-search-results a:hover,.tail-search-results a:focus{background:var(--tail-blue-light)}.tail-result-kind{font-size:10px;min-width:40px;color:var(--tail-blue-text)}.tail-result-copy{min-width:0}.tail-result-copy strong{font-size:14px;display:block}.tail-result-copy small{display:block;font-size:12px;line-height:1.5;color:var(--tail-muted);margin-top:3px}.tail-search-status{font-size:11px;color:var(--tail-muted);padding:13px 22px;margin:0;border-top:1px solid var(--tail-line)}
.tail-shell [hidden],.tail-search [hidden]{display:none!important}
@media(max-width:1050px){.tail-shell-inner{gap:20px;padding-inline:24px}.tail-product-menu{display:none}.tail-shell-search kbd{margin-left:8px}}
@media(max-width:720px){.tail-shell{height:64px}.tail-shell-inner{gap:12px;padding:0 16px}.tail-logo{font-size:26px}.tail-logo img{width:28px;height:25px}.tail-global-nav{gap:0;font-size:12px}.tail-global-nav>a{padding:8px 10px}.tail-global-nav>a:first-child{display:none}.tail-shell-actions{gap:1px}.tail-shell-search{padding:9px;border:0;background:transparent}.tail-shell-search span,.tail-shell-search kbd,.tail-open{display:none}.tail-theme{min-width:40px;width:40px}.tail-search-head{padding:16px}.tail-search-head input{font-size:16px}}
@media(max-width:370px){.tail-shell-inner{padding-inline:12px;gap:8px}.tail-global-nav>a{padding-inline:8px}.tail-logo{font-size:24px}.tail-logo img{width:25px;height:23px}}

/* Five destinations in one header.

   Token joined Product, Blog, Docs and Invite on 2026-09-22, and a fifth link does not fit
   at either end of the range. Measured on the built pages, with the link removed from the
   rendered document as the control:

     320px  342 with it, 320 without  -> caused by the fifth link
     768px  789 with it, 788 without  -> already overflowing before it, on every page
              using this shell

   So the 320 case is the new link's and the 768 case is older than it, and both live here
   because all three surfaces render this header. Invite gives way first: on the landing it
   is an in-page anchor and the section is still reachable by scrolling, which is not true
   of Token, Blog or Docs. At 768 the search control keeps its icon and loses its label and
   shortcut hint, which are the two things a narrow tablet can most afford to lose. */
@media (max-width: 820px) {
  .tail-shell-search span, .tail-shell-search kbd { display: none; }
  .tail-shell-search { padding: 9px; }
}
@media (max-width: 370px) {
  .tail-global-nav > .tail-nav-x { display: none; }
}

/* The X link that replaced Invite (David, 2026-09-23: "in the header replace invite with
   the x"). An icon among words, so it is centred on the row rather than sitting on the text
   baseline, and it carries its own accessible name because a glyph has none.

   The `display` here and the 370px rule that hides it have the SAME specificity, so the one
   written later wins. This block went in at the end of the file first and quietly re-showed
   the link at 320, where it pushed the header 10px past the viewport -- the gate caught it
   as horizontal scroll, which is what that check is for. The hide is restated after. */
.tail-global-nav > .tail-nav-x { display: inline-grid; place-items: center; padding: 2px 4px; }
.tail-global-nav > .tail-nav-x svg { display: block; }
@media (max-width: 370px) { .tail-global-nav > .tail-nav-x { display: none; } }

/* The header sits on the blue stage on every page, so its focus ring cannot be the brand
   blue -- that was #1557ff on #1557ff, an invisible ring. White reads on the blue and is
   the only ring the shell ever needs, because the shell's ground is always the stage.
   A skip link and a focus ring are the two things a keyboard visitor meets first, and both
   were invisible; neither is reachable by a mouse, which is why neither was ever seen. */
body.stage-page .tail-shell, body.stage-page .tail-search { --tail-focus: #ffffff; }