/* =============================================================================
   The app bar — ONE source for every site that draws one.
   =============================================================================

   Written by hand HERE, and copied everywhere else by `web/scripts/sync-header.mjs`.
   Do not edit the copies:

     Branding/Website/shared/header.css   ──▶  Branding/Website/public/assets/header.css
                                          └─▶  web/src/theme/header.css

   ── Why this file exists ───────────────────────────────────────────────────
   There were three app bars and no two agreed. The planner's signed-in bar sat
   at 44px with 22/18 gutters, a 22×30 mark and an 18px/750 wordmark; the
   planner's signed-out bar and all three marketing pages used 64px, a 24px
   gutter, a 24×32 mark and a 22px/700 wordmark. Signing in visibly moved the
   logo, and crossing from letsdriveapp.com to plan.letsdriveapp.com moved it
   again. Exactly the drift `sync-footer.mjs` was written to stop for the
   footer, one element up the page.

   The workspace bar's numbers won (James, 2026-08-16) and everything else
   adopted them.

   ── What is shared, and what deliberately is not ───────────────────────────
   SHARED: the bar's box (height, gutters, surface, blur) and the brand lockup
   (mark size, gap, two-tone wordmark). These are what make the logo appear to
   sit still as you move between sites.

   NOT SHARED: everything each bar carries INSIDE that box. The marketing
   header has section links, a Login pill and a hamburger; the planner's has
   workspace nav, an account menu, or nothing at all. A single HTML fragment
   (the approach `footer.html` can take, because every footer really is the
   same) would be wrong here — so this file ships CSS only, and each site keeps
   its own markup.
   ========================================================================= */

:root {
    /* What the signed-in workspace bar already measured: its tallest cell is
       the account trigger at 5px + a 34px avatar + 5px. Recorded rather than
       imposed — applied as `min-height`, so that bar still grows if the
       control does, and every other bar (which has no such content) simply
       resolves to this. */
    --topbar-h: 44px;
    /* Below each site's own breakpoint. The BREAKPOINTS are deliberately not
       unified — the workspace collapses at 680px, the public bar at 720, the
       marketing pages at Tailwind's `md` (768) — because they serve different
       layouts. Only the height has to agree. */
    --topbar-h-compact: 58px;
    /* Asymmetric: the lockup's gutter at the start, a slightly tighter one at
       the end where the trailing control's own padding makes up the
       difference. */
    --topbar-pad-start: 22px;
    --topbar-pad-end: 18px;
    /* The page colour this bar frosts over.
       NAMED, with a fallback chain, because the two sites disagree on what
       the page colour is called: the planner defines `--bg`, the marketing
       pages define `--background` (Tailwind's). `color-mix()` with an
       undefined custom property is INVALID, and an invalid background is not
       ignored — it computes to transparent, so the first sync of this file
       shipped a see-through marketing header until it was caught in the
       browser. A literal last resort keeps that failure impossible rather
       than merely unlikely. */
    --topbar-base: var(--bg, var(--background, #ffffff));
    --topbar-surface: color-mix(in srgb, var(--topbar-base) 78%, transparent);
    --topbar-blur: blur(24px) saturate(150%);

    /* The brand lockup. */
    --brand-mark-w: 22px;
    --brand-mark-h: 30px;
    --brand-gap: 10px;
    --brand-wordmark-size: 20px;
    --brand-wordmark-weight: 750;
    --brand-wordmark-tracking: -0.035em;
    --brand-wordmark-light-weight: 430;
    --brand-wordmark-light-opacity: 0.82;

    /* The bar's CURRENT height, so anything anchored beneath it (a mobile
       drawer, a sticky offset) can follow without hard-coding a number that
       then has to be remembered twice. Overridden per breakpoint below. */
    --topbar-h-now: var(--topbar-h);
}

/* -----------------------------------------------------------------------------
   Classes below are for the MARKETING pages, which are plain HTML.

   The planner builds the same bar from CSS modules reading the tokens above —
   it cannot use these class names, because its markup is components. The
   tokens are the contract; these classes are one consumer of it.
   -------------------------------------------------------------------------- */

.ldh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--topbar-surface);
    /* Same name-disagreement as the surface above: `--border` on the
       marketing pages, `--line` in the planner. */
    border-bottom: 1px solid var(--border, var(--line, rgba(0, 0, 0, 0.08)));
    -webkit-backdrop-filter: var(--topbar-blur);
    backdrop-filter: var(--topbar-blur);

    /* The bar states its own typography and inherits none of it, for the
       same reason `.ldf` does (see the long note in footer.css). The footer
       got this treatment when the "pixel identical" brief was first
       measured; the bar did not, and it drifted exactly as predicted.

       Measured 2026-08-27 at 1280px, same string, same declared font:
       the nav link "Features" rendered 55.375px on the one-pager and
       58.156px on /privacy/ and /terms/. Nothing in the bar's own rules
       differed. Three INHERITED properties did:

         font-size-adjust        0.52 vs none   (this one moves metrics)
         -webkit-font-smoothing  auto vs antialiased
         font-synthesis          none vs the default

       A shared component that silently re-tunes itself to whatever page it
       lands on is not a shared component. Values match footer.css so the
       two agree with each other as well as across sites. */
    font-family: Inter, -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: normal;
    /* Inter runs larger than SF Pro at the same px; 0.52 pins the x-height
       to SF Pro Display's aspect. Same value the footer uses. */
    font-size-adjust: 0.52;
    /* Every weight the bar asks for is a real Inter cut, so synthesis has
       nothing legitimate to do here and turning it off removes a way for
       a missed font load to change the metrics silently. */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ldh-in {
    width: 100%;
    min-height: var(--topbar-h-now);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--topbar-pad-end) 0 var(--topbar-pad-start);
}

.ldh-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-gap);
    flex: 0 0 auto;
    text-decoration: none;
}

.ldh-mark {
    width: var(--brand-mark-w);
    height: var(--brand-mark-h);
    display: block;
    flex: 0 0 auto;
}

.ldh-word {
    display: inline-flex;
    align-items: baseline;
    font-family: Inter, -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--brand-wordmark-size);
    font-weight: var(--brand-wordmark-weight);
    letter-spacing: var(--brand-wordmark-tracking);
    line-height: 1;
    white-space: nowrap;
    color: var(--foreground, var(--text, currentColor));
}

/* `<i>` carries "Drive" — the footer's `.ldf-word` uses the same shape, so the
   two lockups stay one lockup. Not italic; the tag is structural. */
.ldh-word i {
    font-style: normal;
    font-weight: var(--brand-wordmark-light-weight);
    opacity: var(--brand-wordmark-light-opacity);
}

/* Anything that hangs off the bottom of the bar (the mobile drawer) reads the
   live height rather than repeating a number. */
.ldh-below { top: var(--topbar-h-now); }

/* Tailwind's `md` — the width at which the marketing pages swap to the
   hamburger. See the note on `--topbar-h-compact` about why this breakpoint
   is not shared. */
@media (max-width: 767px) {
    :root { --topbar-h-now: var(--topbar-h-compact); }
}

/* ── Theme switcher ───────────────────────────────────────────────────
   Copied from the planner's `ThemeToggle` (James, 2026-08-16), which is the
   canonical one: `.segmented segmented--compact` in web/src/theme/global.css.
   Measured off it rather than eyeballed — track 2px padding / 2px gap, a 28px
   segment at 12px/600, 14px icons.

   Three things changed on the way in, all of them the marketing side being
   different for no reason:

     * `text-transform: uppercase` is GONE. It rendered "AUTO"; the markup has
       always said "Auto", and the planner shows it that way. Sentence case is
       the intent — the CSS was shouting it.
     * `letter-spacing: .18em` → `-0.01em`. Wide tracking is for the uppercase
       eyebrow labels elsewhere on the page; on a 12px control it just made the
       word wider than its pill.
     * 11px → 12px with an explicit 28px segment height, so the control has a
       height it states rather than one it inherits from its text.

   ── And it replaces THREE drifted copies ─────────────────────────────
   These rules were inline `<style>` in each marketing page and all three had
   diverged: index used a 2px track, 11px uppercase segments and 14px icons;
   privacy and terms used a 4px track, 12px segments with an explicit height,
   and 16px icons. Same switcher, three sizes, on one site. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--foreground, var(--text)) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--border, var(--line));
}

.theme-toggle button {
    min-height: 28px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-foreground, var(--muted));
    font-family: Inter, -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.theme-toggle button svg { width: 14px; height: 14px; }
.theme-toggle button:hover { color: var(--foreground, var(--text)); }

.theme-toggle button[aria-pressed="true"],
.theme-toggle button[aria-pressed="true"]:hover {
    background: var(--accent-gradient, linear-gradient(90deg, #fe8d2a, #f73b41));
    color: #fff;
}

.theme-toggle button:focus-visible {
    outline: 2px solid var(--theme-display-top, #fe8d2a);
    outline-offset: 1px;
}

/* The Login pill sits beside the switcher, so it takes the switcher's OUTER
   height — 28px of segment inside 2px of track, top and bottom. Its own rule
   gives it `padding: 8px 16px` and no height, which came out at 32.5px: half a
   pixel taller than its neighbour, which is the kind of difference you can see
   but not name.

   SCOPED TO `.ldh`, and not `!important`, for two reasons. The pill's own rule
   lives in a later `<style>` block, so at equal specificity it would win — one
   extra class outranks it honestly. And the same pill appears in the mobile
   drawer and further down the page, where it is not standing next to the
   switcher and has no reason to be 32px. */
.ldh .ld-pill-primary {
    height: calc(28px + 4px);
    padding-block: 0;
}