/* ═══════════════════════════════════════════════════════════════════
   Site chrome — header, menus, mobile tab bar, footer.

   Shared by every page, including the ones still built on Tailwind, so
   nothing here depends on the Signal system. The palette is copied from
   signal.css on purpose: the header used to be Tailwind grey-900
   (rgb 17,24,39) sitting above pages painted near-black (rgb 4,7,12),
   which read as two different blacks meeting at the top of the page.

   The material: blur *and* saturation, so it picks up colour from what
   passes behind; a bright hairline on the top edge and a dark one under
   it, which is what reads as a pane of glass rather than a translucent
   rectangle; depth from shadow instead of borders. Every blurred surface
   carries -webkit-backdrop-filter, without which Safari - the platform
   this look comes from - ignores the blur completely.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --ch-ink: #eef7f3;
    --ch-muted: #9db3ac;
    --ch-dim: #5f7772;
    --ch-accent: #34d399;
    --ch-accent-2: #6ee7b7;
    --ch-bg: #04070c;
    --ch-panel: #0a1119;
    --ch-glass: rgba(9, 15, 23, .62);
    --ch-glass-solid: rgba(9, 15, 23, .97);
    --ch-line: rgba(148, 163, 184, .14);
    --ch-line-2: rgba(148, 163, 184, .28);
    --ch-shadow: 0 18px 50px -18px rgba(0, 0, 0, .85);
    --ch-specular: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .45);
    --ch-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ch-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ch-tabbar: 0px;          /* the tab bar publishes its height here */
}

.ch-skip { position: absolute; left: 50%; top: .5rem; transform: translate(-50%, -200%); z-index: 10030; padding: .7rem 1.2rem; border-radius: 999px; background: var(--ch-accent); color: #04110c; font: 600 .85rem/1 var(--ch-body); text-decoration: none; transition: transform .2s; }
.ch-skip:focus { transform: translate(-50%, 0); }

/* The sentinel replaces a scroll listener: when this 1px marker leaves the
   viewport the header has something behind it, and condenses. */
.ch-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ═══ Header ═══════════════════════════════════════════════════════ */
.ch-header { position: sticky; top: 0; z-index: 900; padding: 0 0 0; transition: padding .45s cubic-bezier(.2, .8, .2, 1); font-family: var(--ch-body); }
.ch-header-in { padding-top: env(safe-area-inset-top, 0px); transition: padding .45s cubic-bezier(.2, .8, .2, 1); }

.ch-bar {
    position: relative;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .85rem clamp(1rem, 3vw, 2rem);
    background: var(--ch-glass);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--ch-line);
    box-shadow: var(--ch-specular);
    transition: max-width .45s cubic-bezier(.2, .8, .2, 1), border-radius .45s cubic-bezier(.2, .8, .2, 1),
                padding .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, background .45s ease, border-color .45s ease;
    max-width: none; margin-inline: auto; border-radius: 0;
    border-top: 0; border-left: 0; border-right: 0;
}

/* The condensation. Past the first screenful the bar lifts off the edge and
   becomes a floating capsule - one gesture, and the only animation here. */
.ch-header.is-condensed { padding: .55rem clamp(.75rem, 2.5vw, 1.5rem) 0; }
.ch-header.is-condensed .ch-bar {
    max-width: 1220px;
    border-radius: 999px;
    padding: .6rem .8rem .6rem 1.2rem;
    border: 1px solid var(--ch-line-2);
    background: rgba(9, 15, 23, .74);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    box-shadow: var(--ch-specular), var(--ch-shadow);
}

.ch-brand { flex: none; display: inline-flex; align-items: center; }
.ch-brand img { display: block; height: 44px; width: auto; transition: height .45s cubic-bezier(.2, .8, .2, 1); }
.ch-brand img.ch-mobile-only { display: none; }
.ch-header.is-condensed .ch-brand img { height: 34px; }

.ch-nav { flex: 1; display: flex; align-items: center; gap: .15rem; min-width: 0; }
.ch-actions { flex: none; display: flex; align-items: center; gap: .5rem; }

.ch-link { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ch-muted); font: 500 .92rem/1 var(--ch-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.ch-link:hover, .ch-link:focus-visible { color: var(--ch-ink); background: rgba(255, 255, 255, .06); }
.ch-link[aria-current="page"] { color: var(--ch-ink); background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); }
.ch-link svg { width: .7rem; height: .7rem; transition: transform .25s; }
.ch-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.ch-link[aria-expanded="true"] { color: var(--ch-ink); background: rgba(255, 255, 255, .07); }

.ch-support { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .1); color: #ffd7dd; font: 600 .88rem/1 var(--ch-body); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
.ch-support:hover { background: rgba(251, 113, 133, .2); border-color: rgba(251, 113, 133, .6); transform: translateY(-1px); }
.ch-support i { color: #fb7185; }

.ch-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .58rem 1.05rem; border-radius: 999px; border: 1px solid var(--ch-line-2); background: rgba(255, 255, 255, .04); color: var(--ch-ink); font: 600 .88rem/1 var(--ch-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.ch-btn:hover { background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.ch-btn-primary { background: var(--ch-accent); border-color: var(--ch-accent); color: #04110c; }
.ch-btn-primary:hover { background: var(--ch-accent-2); }
.ch-icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ch-muted); cursor: pointer; transition: color .2s, background .2s; }
.ch-icon-btn:hover { color: var(--ch-ink); background: rgba(255, 255, 255, .07); }
.ch-badge { position: absolute; top: -2px; right: -2px; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: none; place-items: center; border-radius: 999px; background: #fb7185; color: #fff; font: 700 .6rem/1 var(--ch-body); }

.ch-avatar { width: 1.9rem; height: 1.9rem; border-radius: 999px; object-fit: cover; background: linear-gradient(135deg, var(--ch-accent), #0ea5e9); }

/* ═══ Drop-down panels ═════════════════════════════════════════════ */
.ch-pop { position: relative; }
.ch-panel {
    position: absolute; top: calc(100% + .7rem); right: 0; z-index: 20;
    border-radius: 1.25rem; border: 1px solid var(--ch-line-2);
    background: rgba(7, 11, 18, .93);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    backdrop-filter: blur(34px) saturate(180%);
    box-shadow: var(--ch-specular), var(--ch-shadow);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: top right;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility .22s;
}
.ch-pop[data-open="true"] .ch-panel { opacity: 1; visibility: visible; transform: none; }
.ch-pop-wide { position: static; }
.ch-panel-mega { left: 0; right: 0; width: min(880px, calc(100vw - 2rem)); margin-inline: auto; padding: 1.4rem; transform-origin: top center; }
.ch-panel-list { width: 15rem; padding: .5rem; }

.ch-mega-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; color: var(--ch-accent); font: 600 .62rem/1 var(--ch-mono); letter-spacing: .22em; text-transform: uppercase; }
.ch-mega-head:not(:first-child) { margin-top: 1.4rem; }
.ch-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.ch-tool { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: .9rem; border: 1px solid transparent; text-decoration: none; transition: background .2s, border-color .2s; }
.ch-tool:hover { background: rgba(255, 255, 255, .05); border-color: var(--ch-line); }
.ch-tool-icon { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .75rem; border: 1px solid rgba(var(--ch-tone, 52, 211, 153), .35); background: rgba(var(--ch-tone, 52, 211, 153), .12); color: rgb(var(--ch-tone, 52, 211, 153)); }
.ch-tool-name { display: flex; align-items: center; gap: .45rem; color: var(--ch-ink); font: 600 .9rem/1.2 var(--ch-body); }
.ch-tool-desc { margin-top: .2rem; color: var(--ch-dim); font-size: .78rem; line-height: 1.35; }
.ch-flag { padding: .15rem .38rem; border-radius: 999px; border: 1px solid rgba(var(--ch-tone, 52, 211, 153), .4); color: rgb(var(--ch-tone, 52, 211, 153)); font: 700 .54rem/1 var(--ch-mono); letter-spacing: .1em; text-transform: uppercase; }
.ch-tool-soon { opacity: .55; }
.ch-tool-soon .ch-tool-icon { --ch-tone: 95, 119, 114; }
.ch-panel-list a, .ch-panel-list button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .75rem; background: transparent; color: var(--ch-muted); font: 500 .88rem/1 var(--ch-body); text-align: left; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.ch-panel-list a:hover, .ch-panel-list button:hover { background: rgba(255, 255, 255, .06); color: var(--ch-ink); }
.ch-panel-list i { width: 1.1rem; text-align: center; color: var(--ch-dim); }
.ch-panel-list a:hover i { color: var(--ch-accent); }
.ch-panel-sep { height: 1px; margin: .4rem .5rem; background: var(--ch-line); }
.ch-panel-danger { color: #fb7185 !important; }
.ch-panel-danger i { color: #fb7185 !important; }

/* ═══ Mobile: top bar, bottom tab bar, sheet ═══════════════════════ */
.ch-mobile-only { display: none; }
.ch-tabbar { display: none; }

@media (max-width: 900px) {
    .ch-nav, .ch-actions .ch-desktop-only { display: none; }
    .ch-brand img.ch-desktop-only { display: none; }
    .ch-brand img.ch-mobile-only { display: block; }
    .ch-mobile-only { display: inline-flex; }
    .ch-bar { gap: .75rem; justify-content: space-between; padding: .7rem 1rem; }
    .ch-header.is-condensed .ch-bar { padding: .55rem .8rem .55rem 1rem; }
    .ch-brand img, .ch-header.is-condensed .ch-brand img { height: 36px; }

    /* Thumb-reachable navigation, the way the native apps this borrows from
       do it. It sits above the home indicator, never under it. */
    .ch-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 890;
        display: block;
        padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px));
        background: rgba(8, 13, 20, .78);
        -webkit-backdrop-filter: blur(26px) saturate(185%);
        backdrop-filter: blur(26px) saturate(185%);
        border-top: 1px solid var(--ch-line);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -12px 40px -20px rgba(0, 0, 0, .9);
    }
    .ch-tabbar ul { display: flex; margin: 0; padding: 0; list-style: none; }
    .ch-tabbar li { flex: 1; min-width: 0; }
    .ch-tab { display: grid; justify-items: center; gap: .22rem; padding: .45rem .2rem; border: 0; background: transparent; width: 100%; color: var(--ch-dim); font: 500 .62rem/1 var(--ch-body); text-decoration: none; cursor: pointer; border-radius: .9rem; transition: color .2s, background .2s; }
    .ch-tab i { font-size: 1.05rem; }
    .ch-tab:hover { color: var(--ch-muted); }
    .ch-tab[aria-current="page"], .ch-tab[aria-expanded="true"] { color: var(--ch-accent); background: rgba(52, 211, 153, .1); }
    /* Pages end above the bar instead of behind it. */
    body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
    /* Lift the floating support widget clear of the tab bar. The button has an
       id; its message bubble is an unnamed sibling, hence the second selector,
       which is kept narrow so it cannot reach the sheet or the scrim. */
    #bmc-wbtn, .bmc-btn-container,
    #bmc-wbtn ~ div:not([id]):not([class]) { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* The menu arrives as a sheet from the bottom edge, where the thumb is. */
.ch-scrim { position: fixed; inset: 0; z-index: 10010; background: rgba(2, 5, 9, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.ch-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10020;
    max-height: min(86vh, 780px);
    display: flex; flex-direction: column;
    padding: .6rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.75rem 1.75rem 0 0;
    border: 1px solid var(--ch-line-2); border-bottom: 0;
    background: rgba(8, 13, 20, .9);
    -webkit-backdrop-filter: blur(30px) saturate(185%);
    backdrop-filter: blur(30px) saturate(185%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 -24px 60px -20px rgba(0, 0, 0, .9);
    transform: translateY(101%);
    transition: transform .42s cubic-bezier(.22, 1, .3, 1);
    overflow: hidden;
}
body.ch-sheet-open .ch-scrim { opacity: 1; visibility: visible; }
body.ch-sheet-open .ch-sheet { transform: none; }
body.ch-sheet-open { overflow: hidden; }
.ch-grabber { flex: none; width: 2.6rem; height: .3rem; margin: .3rem auto .9rem; border-radius: 999px; background: var(--ch-line-2); }
.ch-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
.ch-sheet-title { margin: 1.2rem 0 .6rem; color: var(--ch-dim); font: 600 .6rem/1 var(--ch-mono); letter-spacing: .22em; text-transform: uppercase; }
.ch-sheet-title:first-child { margin-top: 0; }
.ch-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.ch-sheet-link { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border-radius: 1rem; border: 1px solid var(--ch-line); background: rgba(255, 255, 255, .03); color: var(--ch-ink); font: 500 .92rem/1.2 var(--ch-body); text-decoration: none; }
.ch-sheet-link i { width: 1.2rem; text-align: center; color: var(--ch-accent); }
.ch-sheet-link:active { background: rgba(52, 211, 153, .12); }
.ch-sheet-link span small { display: block; margin-top: .15rem; color: var(--ch-dim); font-size: .72rem; }
.ch-sheet-soon { opacity: .5; }
.ch-sheet-soon i { color: var(--ch-dim); }

/* ═══ Footer ═══════════════════════════════════════════════════════
   Deliberately not blurred: nothing scrolls behind a footer, so a
   backdrop filter there is a compositing layer bought for no effect.
   It carries the same hairline edge so it reads as the same material. */
.ch-footer { position: relative; margin-top: auto; background: linear-gradient(180deg, var(--ch-panel), var(--ch-bg)); border-top: 1px solid var(--ch-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); color: var(--ch-muted); font-family: var(--ch-body); }
.ch-footer-in { width: min(1220px, calc(100% - 3rem)); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.ch-footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.ch-footer-brand img { height: 56px; width: auto; display: block; margin-bottom: 1.1rem; }
.ch-footer-brand p { margin: 0; max-width: 32rem; font-size: .92rem; line-height: 1.65; }
.ch-footer-mail { display: inline-block; margin-top: 1rem; color: var(--ch-accent-2); font-size: .92rem; text-decoration: none; }
.ch-footer-mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.ch-col > summary, .ch-col > h2 { margin: 0 0 1rem; color: var(--ch-ink); font: 600 .64rem/1 var(--ch-mono); letter-spacing: .2em; text-transform: uppercase; list-style: none; }
.ch-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ch-col a { color: var(--ch-muted); font-size: .9rem; text-decoration: none; transition: color .2s; }
.ch-col a:hover { color: var(--ch-accent-2); }
.ch-social { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.ch-social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--ch-line); color: var(--ch-muted); font-size: 1rem; transition: color .2s, border-color .2s, transform .2s; }
.ch-social a:hover { color: var(--ch-accent); border-color: rgba(52, 211, 153, .5); transform: translateY(-2px); }
.ch-apps { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-apps img { width: 132px; height: auto; cursor: pointer; border-radius: .5rem; transition: opacity .2s; }
.ch-apps img:hover { opacity: .8; }
.ch-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.3rem; border-top: 1px solid var(--ch-line); color: var(--ch-dim); font-size: .8rem; }
.ch-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ch-footer-bottom a { color: var(--ch-dim); text-decoration: none; }
.ch-footer-bottom a:hover { color: var(--ch-ink); }
.ch-clocks { display: flex; gap: 1.2rem; color: var(--ch-dim); font: 600 .62rem/1 var(--ch-mono); letter-spacing: .14em; text-transform: uppercase; }
.ch-clocks b { color: var(--ch-accent); font-weight: 600; }

@media (max-width: 900px) {
    .ch-footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ch-footer-brand { margin-bottom: 1.5rem; }
    /* Four stacked columns made the footer 1156px tall on a 390px screen.
       Native disclosure keeps it one screen, with no script. */
    .ch-col { border-top: 1px solid var(--ch-line); }
    .ch-col > summary { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 1.1rem 0; cursor: pointer; }
    .ch-col > summary::after { content: '+'; color: var(--ch-accent); font: 400 1.2rem/1 var(--ch-body); }
    .ch-col[open] > summary::after { content: '\2212'; }
    .ch-col ul, .ch-col .ch-social, .ch-col .ch-apps { padding-bottom: 1.2rem; }
    .ch-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 901px) {
    /* The accordion is a small-screen affordance only. */
    .ch-col > summary { pointer-events: none; }
    .ch-col > summary::after { display: none; }
}

/* ═══ Fallbacks ════════════════════════════════════════════════════ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ch-bar, .ch-panel, .ch-sheet, .ch-tabbar { background: var(--ch-glass-solid); }
    .ch-scrim { background: rgba(2, 5, 9, .8); }
}
@media (prefers-reduced-transparency: reduce) {
    .ch-bar, .ch-panel, .ch-sheet, .ch-tabbar {
        background: var(--ch-glass-solid);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .ch-scrim { background: rgba(2, 5, 9, .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ch-header, .ch-header-in, .ch-bar, .ch-brand img, .ch-panel, .ch-sheet { transition: none !important; }
}