/* Shared toast, footer, button, form reset, and header.
   Linked after planner.css on the homepage and pair pages, and after site.css on content pages
   (the slot assets/site-header.css used). planner.css, site.css, pair.css, and site-header.css
   do not define these again. pair.css had none of them.

   Where the two copies were not the same declaration, the selector keeps the page that had it:
   body.planner is the homepage, html[data-built-offset] is a pair page, and the :not() pair is
   every other page. Those selectors are not :has(). */

button, input, select, textarea { font: inherit; }

/* .btn: planner.css did not set text-decoration. site.css set text-decoration:none.
   Planner anchors with .btn already had text-decoration:none from the calendar and share rules. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--slate-800);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: var(--btn-size);
    font-weight: var(--btn-weight);
    text-decoration: none;
    min-block-size: 44px;
    min-inline-size: 44px;
}
html.light .btn { background: var(--white); }
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.btn.primary,
html.light .btn.primary { background: var(--btn-primary); color: var(--white); }
.btn.primary:hover { background: var(--btn-primary-hover); }
/* Homepage and pair pages: no border. Content pages: the 1px border in the primary colour. */
body.planner .btn.primary,
html[data-built-offset] .btn.primary { border: none; }
html:not([data-built-offset]) body:not(.planner) .btn.primary,
html.light:not([data-built-offset]) body:not(.planner) .btn.primary { border-color: var(--btn-primary); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.hot, html.light .btn.hot {
    background: linear-gradient(135deg, var(--cyan-200) 0%, var(--cyan-300) 55%, var(--neon) 100%);
    color: var(--hot-ink); border: 1px solid var(--cyan-600);
    box-shadow: 0 0 0 1px var(--neon-25), 0 4px 18px var(--neon-32);
    font-weight: 700;
}
html.light .btn.hot { box-shadow: 0 4px 14px var(--hot-line-35); }
.btn.hot:hover { filter: brightness(1.06); }
.btn.hot svg { stroke-width: 2; }
.btn.lift,
.seg--hot > *,
.add {
    transition: box-shadow 0.2s ease, filter 0.2s ease;
    @media (prefers-reduced-motion: no-preference) {
        transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
    }
}
.btn.lift > * { pointer-events: none; }
.btn.lift:hover:not(:disabled):not([aria-disabled="true"]),
html.light .btn.lift:hover:not(:disabled):not([aria-disabled="true"]),
.seg--hot > *:hover,
html.light .seg--hot > *:hover,
.add:hover,
html.light .add:hover {
    box-shadow: 0 0 0 1px var(--neon-45), 0 6px 24px var(--neon-50);
}
.btn.lift:hover:not(:disabled):not([aria-disabled="true"]):not(.now-seg-snap) {
    @media (prefers-reduced-motion: no-preference) {
        transform: translateY(-1px);
    }
}
.btn.lift:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (forced-colors: active) {
    .btn.hot, html.light .btn.hot {
        background: Highlight;
        color: HighlightText;
        border: 1px solid Highlight;
        box-shadow: none;
    }
    .btn.lift:hover:not(:disabled):not([aria-disabled="true"]),
    .seg--hot > *:hover,
    .add:hover { filter: none; box-shadow: none; }
    .btn.lift:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
}

.toast {
    position: fixed; inset: auto; right: 20px; bottom: 20px; width: max-content; height: auto; margin: 0;
    background: var(--slate-900); color: var(--white);
    border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
    border-radius: 12px; padding: 12px 16px; opacity: 0; transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
    pointer-events: none; z-index: 100;
    max-width: calc(100vw - 16px); box-sizing: border-box; overflow: visible;
}
.toast:is(:popover-open, .\:popover-open) { display: block; }
.toast.show { opacity: 1; transform: none; }
/* Planner anchored toasts do not wrap. Content pages do. The repeated max-width on the
   content copy was the same calc already set on .toast. */
.toast.anchored {
    right: auto; bottom: auto; padding: 8px 12px; font-size: 0.85rem; border-radius: 10px;
    white-space: nowrap; transform: translateY(-4px); box-shadow: 0 6px 20px var(--black-35);
}
html:not([data-built-offset]) body:not(.planner) .toast.anchored { white-space: normal; }
.toast.anchored.above { transform: translateY(4px); }
.toast.anchored.show { transform: none; }
.toast.anchored::before {
    content: ""; position: absolute; top: -6px; left: var(--arrow-x, 50%); width: 10px; height: 10px;
    background: inherit; border: inherit; border-width: 1px 0 0 1px; border-radius: 2px 0 0 0;
    transform: translateX(-50%) rotate(45deg);
}
.toast.anchored.above::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; border-radius: 0 0 2px 0; }
.toast-line { display: block; }
body.planner .toast-review,
html[data-built-offset] .toast-review { display: block; margin-top: 2px; }
body.planner .toast a,
html[data-built-offset] .toast a { color: inherit; text-underline-offset: 3px; pointer-events: auto; }
/* The toast stays --slate-900 in both themes. Light --text is that same colour, so this ring follows the toast text. */
body.planner .toast a:focus-visible,
html[data-built-offset] .toast a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
@media (forced-colors: active) {
    html:not([data-built-offset]) body:not(.planner) .toast {
        background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html:not([data-built-offset]) body:not(.planner) .toast { transition: none; }
}

/* Footer. Every child is flex: 1 0 100%, so justify-content does not move a row.
   The homepage used space-between and content pages used center. Both stay.
   Link rules use nav:not(.popular), which is the homepage rule. Content pages have
   no .popular nav, so the same links match. The 44px padding matches the values
   feedback.css and consent.css also set on those controls. */
.site-footer {
    border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; font-weight: 400;
    padding: 22px 28px 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; align-items: center;
}
body.planner .site-footer,
html[data-built-offset] .site-footer { justify-content: space-between; }
.site-footer nav:not(.popular) { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; flex: 1 0 100%; }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer nav:not(.popular) a { color: var(--text); text-decoration: none; font-weight: 600; }
.site-footer nav:not(.popular) a:hover { text-decoration: underline; }
.site-footer nav:not(.popular) a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.site-footer nav:not(.popular) a,
.site-footer nav:not(.popular) .fb-footer,
.site-footer nav:not(.popular) .consent-settings {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 8px;
}
.site-footer a:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 3px; }
.site-footer .popular { flex: 1 0 100%; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.site-footer nav.popular a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.site-footer nav.popular a:hover { color: var(--text); }
.site-footer .site-attrib { flex: 1 0 100%; margin: 0; text-align: center; }
.site-footer .site-credit { flex: 1 0 100%; margin: 0; margin-top: 8px; text-align: center; white-space: nowrap; }
html.light .site-attrib,
html.light .site-credit { color: var(--slate-700); }
@media (max-width: 700px) {
    body.planner .site-footer,
    html[data-built-offset] .site-footer { padding: 20px 16px 24px; }
}
@media (max-width: 600px) {
    html:not([data-built-offset]) body:not(.planner) .site-footer { padding: 20px 18px 24px; }
}
@media (max-width: 480px) {
    body.planner .site-footer,
    html[data-built-offset] .site-footer { margin-top: 0; padding-top: 16px; }
}

/* Header. Moved here from assets/site-header.css in the same order.
   Same-context rules that set different properties (.header, .logo, .seg--hot, .top-ai__sub, .ai-slot, .intro)
   are one rule each. Media queries that set a different value stay. The 1400–1479 patch is gone:
   the later 1024px menu rule paints those properties, so it moved no box.
   overflow: visible was the only header declaration in planner.css. It is the initial value. */
        header {
            position: sticky;
            top: 0;
            z-index: 20;
            backdrop-filter: blur(12px);
            overflow: visible;
            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 { line-height: 0; margin-left: -6px; grid-area: logo; min-inline-size: 0; }
        .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 var(--black-40);
            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;
        }
        /* ===== 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}
        .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-edge);background:var(--hot-fill);grid-area:act}
        .seg--hot>*{position:relative;z-index:1;background:var(--hot-fill);color:var(--hot-ink);font-weight:700}
        .seg--hot>*+*{border-inline-start-color:var(--hot-line)}
        .seg--hot>*:hover{z-index:0;background:var(--hot-fill)}
        .seg--hot>*:focus-visible{z-index:2;outline-color:var(--text)}
        .ai-link{display:inline-flex;align-items:center;gap:7px;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}
        .top-ai__sub{color:var(--muted);font-size:.92rem;line-height:1.45;margin-top:2px;white-space:normal;display:block}
        .ai-slot{grid-area:ai;display:flex;flex-direction:column;align-items:flex-start;margin-inline-end:12px;justify-self:end}
        .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}
        .seg--nav{grid-area:nav;justify-self:start;margin-inline-start:28px}
        /* Wide ≥1400. Logo height and the 44px header cells. The old 1400px grid
           (act before the AI link) and the 1400–1479 gap patch are not painted:
           the 1024px menu rule below sets those properties. */
        @media (min-width:1400px){.logo img{height:72px} header .seg > a, header .seg > button { min-height:44px }}
        .seg--display{grid-area:disp}.intro{grid-area:sub;min-inline-size:0;max-width:1400px;margin:0 auto;padding:16px 28px 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;backdrop-filter:none;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}
         /* 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;
         }
         .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;
             }
         }
         .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 (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. */
.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}