/* ============================================================
   Cue glass pill header - sitewide.
   Extracted from the homepage build so every page shares one
   header. Loaded after styles.css; overrides nothing outside
   .pill-* / .burger scope.
   ============================================================ */
:root {
    /* One UI face sitewide: Instrument Sans. Matches the articles,
       /learn/ and /challenges/, and is the designed sibling of
       Instrument Serif. Was Inter, which left the homepage and
       about/contact on a different face from everything else. */
    --font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* frosted glass: low alpha so the page reads through, heavy blur
       so it still reads as white glass. Alpha up = more solid. */
    --pill-bg:     rgba(255,255,255,0.30);
    --pill-blur:   blur(34px) saturate(1.8) brightness(1.08);
    --pill-ink:    #0d0d0d;
    --pill-radius: 6px;
    --pill-shadow: 0 0 10px rgba(0,0,0,0.25);
    --pill-inset:  20px;
    --pill-pad-y:  12px;
    --pill-pad-x:  16px;
    --pill-max:    420px;
    --pill-rule:   rgba(0,0,0,0.09);
    /* Cue wordmark is ~11.8:1 - size by WIDTH, never height */
    --logo-w:      150px;
    --logo-w-open: 78%;
    --pill-accent: #00ADEE;
    --pill-ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* With viewport-fit=cover the page paints under the status bar, so the
   pill gets pushed back below it. max() keeps the normal inset on
   devices with no safe area (desktop, older phones). */
.pill-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: var(--pill-inset);
    padding-top: max(var(--pill-inset), env(safe-area-inset-top, 0px));
    padding-left: max(var(--pill-inset), env(safe-area-inset-left, 0px));
    padding-right: max(var(--pill-inset), env(safe-area-inset-right, 0px));
    pointer-events: none;          /* only the pill itself is clickable */
}

.pill {
    pointer-events: auto;
    width: 100%;
    max-width: var(--pill-max);
    margin: 0 auto;
    background: var(--pill-bg);
    -webkit-backdrop-filter: var(--pill-blur);
    backdrop-filter: var(--pill-blur);
    border-radius: var(--pill-radius);
    box-shadow: var(--pill-shadow);
    overflow: hidden;
    transition: box-shadow 0.45s var(--pill-ease);
}

.pill.open { box-shadow: 0 16px 44px rgba(0,0,0,0.45); }

.pill-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--pill-pad-y) var(--pill-pad-x);
    transition: padding 0.45s var(--pill-ease);
}

.pill.open .pill-bar { padding-top: 18px; padding-bottom: 14px; }

.pill-left { flex: 1; min-width: 0; }
.pill-left a { display: block; }

/* logo asset is white-on-transparent; invert makes it black on glass */
.pill-logo {
    width: var(--logo-w);
    max-width: 100%;
    height: auto;
    display: block;
    filter: invert(1);
    transition: width 0.45s var(--pill-ease);
}

.pill.open .pill-logo { width: var(--logo-w-open); }

.burger {
    pointer-events: auto;
    position: relative;
    width: 30px; height: 22px;
    border: 0; padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.burger span {
    position: absolute;
    left: 0;
    height: 2px; width: 100%;
    background: var(--pill-ink);
    border-radius: 2px;
    transition: transform 0.35s var(--pill-ease), opacity 0.2s var(--pill-ease), top 0.35s var(--pill-ease);
}

.burger span:nth-child(1) { top: 3px; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 17px; }
.burger.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* menu lives INSIDE the pill: same width, same surface */
.pill-menu { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--pill-ease); }
.pill.open .pill-menu { max-height: 460px; }

.pill-menu-inner { padding: 2px var(--pill-pad-x) 12px; }

/* DM Mono, to match the app. Mono is wider per character, so the size
   comes down and the tracking opens slightly to stay readable at caps. */
.pill-menu a {
    display: block;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 1.18rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: #000;
    text-decoration: none;
    padding: 5px 2px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s var(--pill-ease), transform 0.3s var(--pill-ease);
}

.pill.open .pill-menu a { transform: none; }
.pill.open .pill-menu a:nth-of-type(1) { transition-delay: 0.06s; }
.pill.open .pill-menu a:nth-of-type(2) { transition-delay: 0.10s; }
.pill.open .pill-menu a:nth-of-type(3) { transition-delay: 0.14s; }
.pill.open .pill-menu a:nth-of-type(4) { transition-delay: 0.18s; }
.pill.open .pill-menu a:nth-of-type(5) { transition-delay: 0.22s; }
/* hover: no indent, no underline. Links sit at full black and DIM on
   hover - the pointed-at item recedes rather than lighting up. */
.pill-menu a {
    position: relative;
    width: fit-content;
}

.pill.open .pill-menu a { opacity: 1; }
.pill.open .pill-menu a:hover,
.pill.open .pill-menu a:focus-visible { opacity: 0.45; }

.pill-menu a:focus-visible { outline: 2px solid var(--pill-accent); outline-offset: 3px; }

/* Contextual microcopy. Reserves its own line height so swapping text
   never reflows the pill, and gets a short fade on change. */
/* DM Mono here on purpose: this line is app-voice data/label type, and
   matching the app is the point. The menu labels above are the UI face. */
.pill-menu-foot {
    margin-top: 10px;
    min-height: 1.05em;
    /* right-aligned so it sits in the pill's bottom-right corner,
       opposite the left-aligned links */
    text-align: right;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(2px);
    /* barely any delay - it should read as part of the menu opening,
       not as an afterthought that arrives late */
    transition: opacity 0.22s var(--pill-ease) 0.06s,
                transform 0.22s var(--pill-ease) 0.06s;
}

.pill.open .pill-menu-foot { opacity: 1; transform: none; }

/* mid-swap state: quick dip, no delay at all */
.pill.open .pill-menu-foot.swap {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.08s var(--pill-ease), transform 0.08s var(--pill-ease);
}

@media (prefers-reduced-motion: reduce) {
    .pill-menu-foot,
    .pill.open .pill-menu-foot.swap { transition: none; transform: none; }
}

/* pages whose h1 used to live in the old header keep it for SEO,
   invisibly - the pill design has no visible title slot */
.pill-page-title {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 400px) {
    :root { --logo-w: 130px; }
}