/* Global site header (R4/B1-6). Loaded once per page from plate-html.ts and
   cached across the corpus, so the 17K pages carry the markup only.
   Markup contract (src/lib/site-header.ts):
     header.cbh > div.cbh-bar > [a.cbh-logo, nav.cbh-nav, span.cbh-loc, a.cbh-sign, a.cbh-cta]
     nav.cbh-nav > div            = one section (.r hangs its panel off the right)
     nav.cbh-nav > div > a        = its top-level link (.on when active)
     div.cbh-pan                  = the dropdown, full width of the bar
     div.cbh-cols > div > p       = column heading
     div.cbh-cols > div > a       = link, optional <span> = mono meta
     div.cbh-cols > div > a > img = 18px logo tile   (a.p = two, overlapped)
     div.cbh-cols > div > a > i   = glyph tile (i > svg), or i.f = country flag
     div.cbh-quick > a            = the row of section-wide chips (a.a = "All …");
                                    the other chips lead with the same art
   Dropdowns are CSS only: :hover for the mouse, :focus-within for the keyboard.
   Below 901px (and on any pointer without hover) they stay closed and the bar
   is a scrollable row of section links. */
.cbh{position:relative;z-index:60;background:#070706;border-bottom:1px solid #1B1B22;font-family:'Plus Jakarta Sans',sans-serif}
.cbh-bar{position:relative;max-width:1200px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:16px}
.cbh-logo{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.cbh-logo img{height:26px;width:auto;display:block}
.cbh-nav{display:flex;align-items:stretch;align-self:stretch;flex:1;min-width:0}
.cbh-nav>div{display:flex;align-items:stretch}
.cbh-nav>div>a{display:inline-flex;align-items:center;padding:0 10px;font-size:13px;font-weight:500;color:#8A8A99;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.cbh-nav>div>a::after{content:"\25BE";margin-left:4px;font-size:8px;opacity:.7}
.cbh-nav>div>a:hover{color:#FFFFFF}
.cbh-nav>div>a.on{color:#E89D3C;font-weight:600;border-bottom-color:#E89D3C}
/* The panel is measured against the VIEWPORT, never against its 80px menu
   item: max-width:100% used to clamp it to the item and squeeze the grid.
   It also caps its height and scrolls, so a long section cannot run off a
   short screen. */
.cbh-pan{display:none;position:absolute;left:0;top:100%;width:max-content;max-width:min(1136px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;margin-top:1px;padding:22px 32px 18px;background:#18181B;border:1px solid #2A2A35;border-top:0;border-radius:0 0 16px 16px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.cbh-nav>div.r>.cbh-pan{left:auto;right:0}
/* Sections past the middle of the bar hang their panel off the right edge
   of the header, which keeps the whole grid on screen at 1280 and below. */
.cbh-nav>div:nth-last-child(-n+4)>.cbh-pan{left:auto;right:0}
/* tracks size to their own content and only then hit the cap; the cap is
   wide enough that a tile plus a label plus its mono meta stay on one line */
.cbh-cols{display:grid;grid-template-columns:repeat(var(--n,4),minmax(180px,268px));gap:4px 28px}
.cbh-cols p{margin:0 0 8px 8px;font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#5A5A66}
.cbh-cols a{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:13px;line-height:1.35;color:#C9C9D1;text-decoration:none}
.cbh-cols a:hover{background:#1F1F24;color:#FFFFFF}
.cbh-cols a[aria-current]{color:#E89D3C}
.cbh-cols a span{margin-left:auto;flex:none;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.04em;color:#5A5A66}
/* The identity tile (G3-26/27): a real logo file in its own colours, a flag,
   or a mono-line glyph — one 18px round chip for all of them, the same dark
   ground and hairline, so a logo and a glyph sit in the same row as equals.
   The logo is CONTAINED (never cropped) and shown in full colour at rest:
   the visitor finds Bitcoin by its orange, and the letter fallback is only
   the last resort of a hand-edited payload. */
.cbh-pan a>img,.cbh-pan a>i{width:18px;height:18px;border-radius:50%;flex:none;box-sizing:border-box}
.cbh-pan a>img{object-fit:contain;padding:2px;background:#0B0B0E;border:1px solid #2A2A35}
.cbh-pan a>i{display:inline-flex;align-items:center;justify-content:center;background:#0B0B0E;border:1px solid #2A2A35;font-style:normal;font-size:9px;font-weight:600;letter-spacing:0;color:#C9C9D1;transition:color .12s}
/* the glyph fills the tile the way a logo does, in the label's own colour so
   a glyph row and a logo row carry the same weight; the stroke is set here,
   not in the markup, so one path body reads at every tile size */
.cbh-pan a>i>svg{width:13px;height:13px;stroke-width:1.9;display:block}
.cbh-pan a:hover>i,.cbh-pan a:focus-visible>i,.cbh-pan a[aria-current]>i{color:#FFFFFF}
.cbh-pan a>i.f{background:none;border:0;font-size:15px;line-height:1}
/* pair links carry both sides; the second tile laps the first */
.cbh-pan a.p>:nth-child(2){margin-left:-15px;box-shadow:0 0 0 2px #18181B}
.cbh-pan a.p:hover>:nth-child(2){box-shadow:0 0 0 2px #1F1F24}
.cbh-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #2A2A3580}
.cbh-quick a{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 7px;border:1px solid #2A2A35;border-radius:8px;font-size:12px;font-weight:500;color:#C9C9D1;text-decoration:none;white-space:nowrap}
.cbh-quick a::after{content:"\203A";margin-left:-1px;font-size:13px;line-height:1;opacity:.6}
.cbh-quick a:hover{border-color:#E89D3C55;background:#1F1F24;color:#FFFFFF}
.cbh-quick a:first-child{color:#E89D3C;border-color:#E89D3C40}
/* A chip is its own frame, so the role glyph sits bare in it (a disc inside
   a chip would frame a 10px mark twice) and takes the chip's colour — amber
   on the lead chip, white under the pointer; a logo keeps its disc, one step
   smaller than the panel tile, and a flag its emoji. */
.cbh-quick a>img{width:16px;height:16px}
.cbh-quick a>i{width:auto;height:auto;background:none;border:0;border-radius:0;color:inherit}
.cbh-quick a>i>svg{width:14px;height:14px;stroke-width:1.75}
.cbh-quick a>i.f{font-size:13px}
.cbh-quick a.p>:nth-child(2){margin-left:-13px}
/* "All 86 markets" and the rest of the whole-section chips point onward */
.cbh-quick a.a{padding-left:11px}
.cbh-quick a.a::before{content:"\2192";margin-right:-1px;font-size:13px;line-height:1;opacity:.85}
.cbh-quick a.a::after{content:none}
.cbh-loc{display:inline-flex;align-items:center;gap:6px;flex:none;color:#8A8A99;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.04em}
.cbh-sign{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:600;color:#FFFFFF;text-decoration:none;flex:none}
.cbh-cta{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:#E89D3C;border-radius:8px;color:#181000;font-size:14px;font-weight:600;text-decoration:none;flex:none;white-space:nowrap}
.cbh-cta::after{content:"\203A";font-size:16px;line-height:1}
.cbh-cta:hover{background:#F2AC52;color:#181000}
.cbh a:focus-visible{outline:2px solid #E89D3C;outline-offset:2px;border-radius:6px}
@media (hover:hover) and (min-width:901px){
.cbh-nav>div:hover>.cbh-pan,.cbh-nav>div:focus-within>.cbh-pan{display:block}
.cbh-nav>div:hover>a{color:#FFFFFF}
.cbh-nav>div:hover>a.on{color:#E89D3C}
}
@media (max-width:1140px){.cbh-sign{display:none}.cbh-bar{gap:12px}.cbh-nav>div>a{padding:0 8px}}
@media (max-width:1020px){.cbh-loc{display:none}}
/* phones: the bar wraps, the section strip gets its own full-width scroll row
   and every section link still goes straight to its hub */
@media (max-width:900px){
.cbh-bar{flex-wrap:wrap;height:auto;padding:12px 16px 0;gap:10px}
.cbh-logo{margin-right:auto}
.cbh-nav{order:3;flex:0 0 100%;height:42px;align-self:auto;margin-top:10px;border-top:1px solid #1B1B22;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.cbh-nav::-webkit-scrollbar{display:none}
.cbh-nav>div>a{padding:0 12px;margin-bottom:0}
.cbh-nav>div>a::after{content:none}
.cbh-cta{height:32px;padding:0 12px;font-size:13px}
}