/* Shared site header: homepage, pair pages and every content page (blog, holidays, about, contact,
   privacy, terms, docs, 404, MCP docs). Linked right after planner.css (or site.css on content pages),
   so the logo, nav and AI link have the same size and position on every page.
   Moved here from planner.css in the same order, so the homepage cascade is unchanged. */
        header {
            position: sticky;
            top: 0;
            z-index: 20;
            backdrop-filter: blur(12px);
        }
        .logo { line-height: 0; margin-left: -6px; }
        .logo img { height: 88px; width: auto; max-width: 100%; display: block; }
        /* Time conversion menu. Popover API + CSS anchor positioning.
           Do not set top: 100% (or top: calc(100% + …)). A top-layer popover
           resolves that percentage against the viewport, which places the panel
           off-screen. Anchor the panel to the button; browsers without anchor
           positioning keep the fixed fallback, and planner.js measures the button. */
        .nav-menu-btn { anchor-name: --time-conv-anchor; }
        .nav-chevron { width: 14px; height: 14px; transition: transform 0.2s ease; }
        .nav-menu-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

        .nav-dropdown {
            position: fixed;
            top: 72px;
            left: 28px;
            margin: 0;
            background: var(--card);
            color: var(--text);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
            width: min(520px, calc(100vw - 32px));
            max-height: calc(100dvh - 120px);
            overflow-y: auto;
            overscroll-behavior: contain;
            z-index: 50;
        }
        @supports (top: anchor(bottom)) {
            .nav-dropdown {
                inset: auto;
                position: fixed;
                position-anchor: --time-conv-anchor;
                top: anchor(bottom);
                left: anchor(left);
                margin: 8px 0 0 0;
                position-try-fallbacks: flip-block, flip-inline;
            }
        }
        .nav-dropdown:not(:popover-open):not(.\:popover-open) { display: none; }
        .nav-dropdown:is(:popover-open, .\:popover-open) { display: grid; gap: 16px; }
        .nav-dropdown__heading {
            display: block;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 8px;
        }
        @media (max-width: 600px) {
            /* A fixed 64px box reserves the wordmark before the file loads.
               object-fit keeps the drawing in proportion when the row is narrower
               than the art. Beats pair.css .logo-home img. */
            .logo img.logo-dark,
            .logo img.logo-light {
                height: 52px;
                width: auto;
                max-inline-size: 100%;
                object-fit: contain;
                object-position: left center;
            }
            header { position: relative; backdrop-filter: none; }
            .nav-dropdown {
                /* Fallback when anchor positioning is missing. 16 + 64 + 12 + 44 + 8. */
                top: 144px;
                left: 12px;
                right: 12px;
                width: auto;
                max-inline-size: none;
                max-width: none;
                max-height: calc(100dvh - 160px);
                margin-left: 0;
                margin-right: 0;
                position-try-fallbacks: none;
            }
            @supports (top: anchor(bottom)) {
                .nav-dropdown {
                    top: anchor(bottom);
                    left: 12px;
                    right: 12px;
                    width: auto;
                    margin-top: 8px;
                    max-height: calc(100dvh - 160px);
                    position-try-fallbacks: none;
                }
            }
        }
        /* ===== Header (Lea's final spec, look/tom-header/spec-final.md) =====
           Desktop: one row, logo · nav · AI link · actions · display. Mobile (<=600px): two tiers.
           Segments share one border with an inner divider, like .now-seg. */
        .seg{display:inline-flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--seg-line);border-radius:10px;background:var(--seg-bg)}
        .seg>*,.seg>.theme-switch>.theme-switch__btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-block-size:40px;padding:0 14px;
         font:inherit;font-size:var(--btn-size);font-weight:var(--btn-weight);color:var(--text);background:transparent;border:0;border-radius:0;text-decoration:none;white-space:nowrap;cursor:default}
        .seg>*+*{border-inline-start:1px solid var(--seg-line)}
        .seg>:first-child{border-start-start-radius:9px;border-end-start-radius:9px}
        .seg>:last-child,.seg>.theme-switch:last-child>.theme-switch__btn{border-start-end-radius:9px;border-end-end-radius:9px}
        .seg>*:hover,.seg>.theme-switch>.theme-switch__btn:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
        .seg>*:focus-visible,.seg>.theme-switch>.theme-switch__btn:focus-visible{outline:3px solid var(--text);outline-offset:2px;position:relative;z-index:1}
        /* The theme switch wraps its button and menu. The wrapper is the segment cell; the button fills it. */
        .seg>.theme-switch{padding:0;gap:0;align-items:stretch}
        .seg>.theme-switch:hover{background:transparent}
        .seg>.theme-switch>.theme-switch__btn{min-block-size:inherit}
        .seg svg,.ai-link svg{width:16px;height:16px;flex:0 0 auto}
        .seg--hot{border-color:var(--hot-line);background:linear-gradient(135deg,#67e8f9 0%,#22d3ee 55%,#00f0ff 100%);box-shadow:rgba(0,240,255,.25) 0 0 0 1px,rgba(0,240,255,.32) 0 4px 18px}
        .seg--hot>*{color:#04222b;font-weight:700}
        .seg--hot>*+*{border-inline-start-color:var(--hot-line)}
        .seg--hot>*:hover{background:rgba(255,255,255,.18)}
        .seg--hot>*:focus-visible{outline-color:var(--text)}
        .ai-link{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;color:var(--link);font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
        .ai-link:focus-visible{outline:3px solid var(--text);outline-offset:2px;border-radius:4px}
        @media (max-width:600px){ .seg>*,.seg>.theme-switch>.theme-switch__btn{min-block-size:44px;padding:0 12px} .seg>.theme-switch{padding:0} .seg .icon-only{min-inline-size:44px} .lbl-long{display:none} .lbl-short{display:inline} }
        @media (min-width:1400px){ header .seg > a, header .seg > button { min-height:44px } }

        .top-ai__sub{color:var(--muted);font-size:.92rem;line-height:1.45;margin-top:2px;white-space:normal}
        .top-ai__sub{display:block}
        .ai-slot{grid-area:ai;display:flex;flex-direction:column;align-items:flex-start}
        .ai-slot .top-ai__sub{display:none}   /* >=1400: the link sits in the row; its sub line goes under the tagline */
        .intro .top-ai__sub{display:block}
        header{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"logo nav ai act disp" "sub sub sub sub sub";
         align-items:center;column-gap:12px;padding:22px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent)}
        .logo{grid-area:logo;min-inline-size:0}
        .seg--nav{grid-area:nav;justify-self:start;margin-inline-start:28px}
        .ai-slot{margin-inline-end:12px;justify-self:end}
        @media (min-width:1400px){.logo img{height:72px}}
        @media (min-width:1400px) and (max-width:1479px){.seg--nav{margin-inline-start:0}.ai-slot{margin-inline-end:0}header{column-gap:10px}}
        /* desktop >=1400: the share group (act) sits before the AI link. Mobile and compact tiers keep their own areas. */
        @media (min-width:1400px){header{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"logo nav act ai disp" "sub sub sub sub sub"}
         .seg--hot{justify-self:end}.ai-slot{justify-self:start;margin-inline:12px 0}}
        .seg--hot{grid-area:act}.seg--display{grid-area:disp}.intro{grid-area:sub;min-inline-size:0}
        /* Bug fix 1 (pills overlapping at 1024px): segments and their cells never shrink below their content. */
        .seg,.seg>*{flex-shrink:0}
        /* Not in the spec mock: the logo file is 479x88 but its drawing ends at about 60% of
           its width (measured 286/479); the rest is transparent. At 601px and up, crop that
           empty right edge (aspect-ratio + object-fit, so the drawing is unchanged) so each tier
           fits at its lower bound: without it the nav overlaps the AI link at 1400-1410px and
           the actions at 901-944px. */
        @media (min-width:601px){.logo img.logo-dark,.logo img.logo-light{width:auto;aspect-ratio:359/88;object-fit:cover;object-position:left center}}
        /* compact 601-1399: the AI link leaves the row and sits with its sub line under the tagline */
        @media (max-width:1399px) and (min-width:601px){
         header{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo nav act disp" "sub sub sub sub" "ai ai ai ai";row-gap:4px}
         .ai-slot{margin:0;justify-self:start;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.25em}
         .ai-slot .top-ai__sub{display:inline}  .intro .top-ai__sub{display:none}
         .ai-slot .ai-link{min-block-size:44px}
         .logo img{height:72px}
         .seg--display .lbl-long{display:none}.seg--display .icon-only{min-inline-size:44px;padding:0 12px}
         .seg>*,.seg>.theme-switch>.theme-switch__btn{min-block-size:44px}
         .seg>.theme-switch{padding:0}
        }
        @media (max-width:1199px) and (min-width:601px){
         .logo img{height:64px}
         .seg--nav{margin-inline-start:16px}
         .seg--hot .lbl-c{display:none}.seg--hot .icon-c{min-inline-size:44px;padding:0 12px}
        }
        /* 601-900: the nav drops to its own row so nothing collides */
        @media (max-width:900px) and (min-width:601px){
         header{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"logo act disp" "nav nav nav" "sub sub sub" "ai ai ai";row-gap:8px}
         .seg--nav{margin:0}
        }
        /* mobile <=600: two tiers (utility tier = rows 1-2). The DOM stays desktop-first;
           reading-flow makes Tab follow the grid rows where supported (Chromium 137+). */
        @media (max-width:600px){
         header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ai disp" "aisub aisub" "logo act" "nav nav" "sub sub";row-gap:8px;column-gap:8px;padding:4px 16px 16px;position:relative;reading-flow:grid-rows}
         .ai-slot{display:contents}
         .ai-link{grid-area:ai;justify-self:start}
         .ai-slot .top-ai__sub{display:inline;grid-area:aisub;font-size:.8rem;margin:-6px -16px 6px;padding:0 16px 8px;border-bottom:1px solid var(--line)}
         @media (max-width:340px){.ai-link{white-space:normal;line-height:1.2}}
         .intro .top-ai__sub{display:none}
         .seg--display{justify-self:end}
         .logo img{height:52px}.seg--nav{margin:0}
        }
        @media (forced-colors: active) {
            .seg { border-color: CanvasText; }
            .seg>*+*, .seg--hot>*+* { border-inline-start-color: CanvasText; }
        }

        /* Desktop >=1024 (header v3): the header is a menu only. Phones and 601-1023 keep their layout.
           Header: logo, nav centred in the free space, then AI link, 24H and theme.
           Add to Calendar + Share sit in the Now row, right-aligned (moved in the DOM by the inline script, so Tab follows).
           The drag hint sits in the first card's jump row, vertically centred on the jump buttons. */
        .jump-hint{display:none}
        @media (min-width:1024px){
         header{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto auto;grid-template-areas:"logo . nav . ai disp" "sub sub sub sub sub sub";row-gap:0;column-gap:12px}
         .seg--nav{grid-area:nav;justify-self:center;margin:0}
         .ai-slot{grid-area:ai;justify-self:end;margin:0;flex-direction:column;align-items:flex-start}
         .ai-slot .top-ai__sub{display:none}.intro .top-ai__sub{display:block}
         .hint-row .corner{display:none}
                 .hint-row .seg--hot .lbl-c.lbl-long{display:inline}.hint-row .seg--hot .lbl-c.lbl-short{display:none}
         .jump-row{align-items:center}
 .jump-row > div:last-child > .jump{align-self:center;flex:none;white-space:nowrap}
 .jump-row > div:last-child{justify-self:stretch;align-items:center;min-inline-size:0}
         .jump-hint{display:block;margin-inline-start:auto;padding-inline-start:16px;min-inline-size:0;text-align:end;text-wrap:balance;color:var(--muted);font-size:.95rem;line-height:1.3}
         .card-reserve .jump-hint{visibility:hidden}
        }

        /* The current page in the Site nav, in the footer's active style. */
        .seg--nav>[aria-current="page"],.ai-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
        /* Content pages carry a third nav item (Planner). Below 361px the three need slimmer cells to fit. */
        @media (max-width:360px){.seg--nav:has(>.nav-planner)>*{padding:0 8px}}

/* Header v3, stable menu: the header is the same menu on every page. On home and pair pages the
   intro (h1, tagline) sits under it and Add to Calendar + Share sit in the Now row at every width. */
.intro{max-width:1400px;margin:0 auto;padding:16px 28px 0}
.hint-row .seg--hot{grid-area:auto;justify-self:auto;flex:none}
.hint-row .seg--hot>*{min-block-size:44px}
@media (max-width:600px){.intro{padding:12px 12px 0}}
/* Every header control is a 44px target on every page, including the theme button inside its wrapper. */
.theme-switch__btn{min-height:44px}
.nav-dropdown__list a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}