/* Chrome that is shared between base-derived pages and the standalone documents.
 * Note: CSS variables defined in root.css.
 *
 * This sheet exists because main.css is loaded only by base.html, and two pieces of
 * chrome are needed on both sides of that line:
 *
 *   .site-footer      Audit #3753 fixes BUG-2977 — a sitewide footer. base.html had none
 *                     at all, so an anonymous visitor on / or /stories had no path to the
 *                     terms or privacy policy: the only legal links in the whole product
 *                     were the orphaned /welcome page's fineprint and the register form's
 *                     small print, which you have to be signing up to read.
 *
 *   .skip-to-content  Audit #3752 fixes BUG-2972 — the three standalone auth documents
 *                     get no landmark navigation and no skip link because they load
 *                     root.css and auth.css only. The rule is a deliberate mirror of
 *                     main.css:5-24; welcome.css:33-52 already carries the same mirror for
 *                     the same reason, so this is the established shape for a standalone
 *                     document rather than a new one.
 */

/* --- Skip link, for documents that do not load main.css -------------------
   Audit #1787260305232 fixes BUG-8934: use the link's own height at enlarged text. */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -110%);
    max-width: calc(100% - 2rem);
    background: var(--theme-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 10px);
    z-index: 9999;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.skip-to-content:focus {
    top: 1rem;
    transform: translateX(-50%);
    color: white;
    outline: 2px solid var(--amethyst-deep);
    outline-offset: 2px;
}

/* --- Authenticated landing header ----------------------------------------
   IMP-1500 keeps the existing destinations and disclosure owners while making the daily
   landing-page bar one quiet reader surface. A 44px control in 3px block padding produces
   a visibly thinner 51px rail; the safe-area inset is additive rather than stealing from
   the interaction target. The selector is intentionally exact: other shell modes keep
   their established chrome. */
.reader-shell--authenticated[data-page="home"] .header {
    box-sizing: border-box;
    /* Audit #1787260305754 fixes BUG-9500: keep controls beside the fitted identity. */
    flex-wrap: nowrap;
    min-block-size: calc(51px + env(safe-area-inset-top));
    padding-block: 3px;
    padding-block-start: calc(3px + env(safe-area-inset-top));
    padding-inline: max(0.65rem, env(safe-area-inset-left), env(safe-area-inset-right));
    gap: 0.65rem;
    border-block-end: 1px solid var(--rd-rule-soft, var(--border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--rd-surface-raised, var(--bg-card)) 96%, transparent),
            color-mix(in srgb, var(--rd-canvas, var(--theme-canvas)) 90%, transparent)
        );
    box-shadow: 0 8px 28px color-mix(in srgb, var(--ink, var(--ink)) 12%, transparent);
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.reader-shell--authenticated[data-page="home"] .header-left,
.reader-shell--authenticated[data-page="home"] .header-actions {
    min-inline-size: 0;
}

.reader-shell--authenticated[data-page="home"] .header-actions {
    gap: 0.35rem;
}

.reader-shell--authenticated[data-page="home"] .header-btn,
.reader-shell--authenticated[data-page="home"] .user-avatar,
.reader-shell--authenticated[data-page="home"] .mobile-home-btn {
    box-sizing: border-box;
    min-inline-size: 44px;
    min-block-size: 44px;
}

.reader-shell--authenticated[data-page="home"] .header-btn,
.reader-shell--authenticated[data-page="home"] .user-avatar {
    inline-size: 44px;
    block-size: 44px;
    border-color: transparent;
    background: color-mix(in srgb, var(--rd-surface, var(--bg-card)) 76%, transparent);
    box-shadow: inset 0 0 0 1px var(--rd-rule-soft, var(--border));
}

.reader-shell--authenticated[data-page="home"] .user-avatar {
    color: var(--color-ffffff);
    background:
        linear-gradient(145deg, var(--amethyst, var(--theme-primary)), var(--ember, var(--theme-secondary)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rd-canvas, var(--theme-canvas)) 76%, transparent);
}

.reader-shell--authenticated[data-page="home"] .header-btn:hover,
.reader-shell--authenticated[data-page="home"] .header-btn:focus-visible {
    color: var(--rd-text, var(--text));
    background: var(--rd-surface-hover, var(--bg-hover));
    box-shadow: inset 0 0 0 1px var(--rd-rule-strong, var(--border));
    transform: none;
}

.reader-shell--authenticated[data-page="home"] .home-header-title {
    color: var(--rd-text, var(--text));
    font-family: var(--rd-font-display, Fraunces, serif);
    font-size: clamp(0.96rem, 1.2dvw, 1.12rem);
    font-weight: var(--rd-weight-semi, 600);
    line-height: 1.1;
}

/* --- Sitewide footer ------------------------------------------------------ */
.site-footer {
    margin-block-start: clamp(2rem, 4dvw, 3rem);
    padding-block: 2rem;
    padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    /* The mobile nav is fixed to the bottom of the viewport on narrow widths; without
       this the last row of footer links sits underneath it and cannot be tapped. */
    padding-block-end: calc(2rem + 64px + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--rd-rule-soft, var(--border));
    color: var(--rd-text-muted, var(--text-muted));
    background: var(--rd-surface, var(--bg-card));
}

@media (min-width: 993px) {
    .site-footer {
        padding-block-end: 2rem;
    }
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4dvw, 4rem);
    inline-size: 100%;
    margin-inline: auto;
}

.site-footer__brand {
    min-inline-size: 0;
}

.site-footer__wordmark {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    gap: 0.7rem;
    color: var(--rd-text, var(--text));
    font: var(--rd-weight-semi, 600) clamp(1.2rem, 2dvw, 1.55rem)/1 var(--rd-font-display, Fraunces, serif);
    letter-spacing: var(--rd-tracking-display, -0.01em);
    text-decoration: none;
}

.site-footer__sigil {
    background: linear-gradient(145deg, var(--theme-primary), var(--theme-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.75rem;
}

.site-footer__wordmark:hover,
.site-footer__wordmark:focus-visible {
    color: var(--amethyst, var(--theme-primary));
}

.site-footer__destinations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    min-inline-size: 0;
}

.site-footer__group {
    min-inline-size: 0;
}

.site-footer__heading {
    margin: 0 0 0.5rem;
    color: var(--rd-text, var(--text));
    font: var(--rd-weight-semi, 600) var(--rd-text-sm, 0.86rem)/1.4 var(--rd-font-ui, Inter, sans-serif);
}

.site-footer-links {
    display: grid;
    gap: 0;
    margin: 0;
}

.site-footer-links a {
    box-sizing: border-box;
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    min-inline-size: 0;
    padding: 0.6rem 0;
    color: var(--rd-text-muted, var(--text-muted));
    font: var(--rd-weight-medium, 500) var(--rd-text-sm, 0.86rem)/1.25 var(--rd-font-ui, Inter, sans-serif);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--amethyst, var(--theme-primary));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
}

.site-footer-legal {
    max-inline-size: 32rem;
    margin: 0.55rem 0 0;
    color: var(--rd-text-faint, var(--text-muted));
    font: var(--rd-weight-regular, 400) var(--rd-text-xs, 0.76rem)/1.5 var(--rd-font-ui, Inter, sans-serif);
}

@media (max-width: 720px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 360px) {
    .site-footer {
        padding-inline: max(0.75rem, env(safe-area-inset-left), env(safe-area-inset-right));
    }

    .site-footer__destinations {
        gap: 1rem;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .site-footer {
        margin-block-start: 1.5rem;
        padding-block-start: 1.1rem;
    }

}

/* --- Screen-reader-only utility -------------------------------------------
   Same visually-hidden-but-accessible recipe discovery.css already carries;
   this copy is here because base.html (every base-derived page, not just the
   ones that load discovery.css) needs it for the header locale label below. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Anonymous header auth affordances (IMP-0725) --------------------------
   base.html's account menu carries login/register/locale-switch links for a
   logged-out visitor, but all three were reachable only by opening the '?'
   avatar menu first. These are visible without that click; the menu itself is
   untouched, and still there for narrow viewports where this row is hidden. */
.header-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-locale-picker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.header-locale-picker select {
    min-width: 3.5rem;
    max-width: 7rem;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.3rem 0.25rem;
    font-size: 0.85rem;
}

/* Audit #1787260300042 fixes BUG-4053: anonymous desktop chrome already exposes the
   direct header picker. Keep the account-menu copy for the narrow breakpoint where that
   direct control is hidden, but do not expose both controls at once. */
@media (min-width: 601px) {
    .user-dropdown .locale-picker--anonymous {
        display: none;
    }
}

@media (max-width: 600px) {
    .header-auth {
        gap: 0.35rem;
    }
    .header-locale-picker {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-auth #header-login-link {
        display: none;
    }
}