/* ==========================================================================
   Enju Ya — "Warm Archive" design system (dashboard + frontend).
   Heritage editorial: deep-teal + cream two-tone, a bookish serif display
   (Fraunces) paired with a humanist body (Source Sans 3). Fonts are SELF-HOSTED
   (offline-first, DEC-026) and the SAME faces feed the print/PDF pipeline.
   Owner-approved typography, 2026-07 (teal identity kept from the 07-14 refresh).
   ========================================================================== */

/* --- self-hosted variable fonts (subset woff2, latin + latin-ext) --------- */
@font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 340 720; font-display: swap;
    src: url('/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 340 720; font-display: swap;
    src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Sans 3'; font-style: normal; font-weight: 340 720; font-display: swap;
    src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Sans 3'; font-style: normal; font-weight: 340 720; font-display: swap;
    src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Sans 3'; font-style: italic; font-weight: 340 720; font-display: swap;
    src: url('/fonts/source-sans-3-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Sans 3'; font-style: italic; font-weight: 340 720; font-display: swap;
    src: url('/fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* 60/30/10 (owner direction 2026-08-25): white carries the surfaces, green the structure,
       orange the accents. The parchment/cream family is retired — page and card are white, with a
       faint green cast in the neutrals so nothing reads as clinical grey. */
    --surface: #f7f9f8;        /* page — reads white */
    --surface-raised: #ffffff; /* cards sit a shade above the page */
    --surface-sunk: #eef2f0;   /* subtle sunken band */
    --ink: #17504b;            /* deep teal */
    --ink-soft: #3f665f;       /* soft teal */
    --ink-faint: #8a968d;      /* muted */
    --accent: #17504b;         /* teal — buttons / links */
    --accent-dark: #0e3733;    /* teal hover */
    --sage: #7d938f;           /* mid teal secondary */
    --gold: #b55a38;           /* THE orange — the 10%. Accents and premium moments only. */
    --line: #e2e8e3;           /* neutral hairline, faint green cast */
    --line-strong: #cfd8d1;    /* firmer hairline */
    --danger: #a63a2a;
    /* Radius scale. The three in use are unchanged — naming them xs…lg only adds
       the steps that were missing (chips/badges below, dialogs above), so nothing
       already drawn shifts by a pixel. */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    /* Border weights. Previously every rule hard-coded 1px/2px; these name the
       three the design actually uses so a "firmer" edge is a token, not a guess. */
    --border-thin: 1px;
    --border-regular: 2px;
    --border-thick: 4px;
    /* Elevation ladder — soft, warm-tinted shadows (paper, not plastic).
       Levels 1–5 are aliases over the three that already existed, so raising a
       component is a choice on a scale rather than a hand-picked shadow. */
    --shadow-sm: 0 1px 2px rgba(20, 55, 50, .05);
    --shadow: 0 1px 2px rgba(20, 55, 50, .05), 0 8px 22px -8px rgba(20, 55, 50, .12);
    --shadow-lg: 0 4px 10px -4px rgba(20, 55, 50, .10), 0 24px 48px -18px rgba(20, 55, 50, .22);
    --elev-1: none;                  /* flat — sits on the page */
    --elev-2: var(--shadow-sm);      /* hover / hairline lift */
    --elev-3: var(--shadow);         /* raised: cards, panels */
    --elev-4: var(--shadow-lg);      /* modal */
    --elev-5: var(--shadow-lg);      /* popover / drawer */
    /* Spacing steps, so padding stops being ad-hoc decimals. */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --ease: cubic-bezier(.32, .72, 0, 1);
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --space: 1rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-optical-sizing: auto;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* A whisper of paper grain over the parchment — atmosphere, not noise. */
    background-image:
        radial-gradient(circle at 18% 12%, rgba(125, 143, 105, .05), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(181, 90, 56, .045), transparent 38%);
    background-attachment: fixed;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.005em;
    margin: 0 0 .5em;
}
h1, .display { font-weight: 600; letter-spacing: -.015em; }

@keyframes wa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .wa-rise { animation: wa-rise .5s var(--ease) both; }
    .wa-rise-2 { animation: wa-rise .5s var(--ease) .06s both; }
    .wa-rise-3 { animation: wa-rise .5s var(--ease) .12s both; }
}

a { color: var(--accent-dark); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.muted { color: var(--ink-faint); }
.small { font-size: .875rem; }

/* --- layout ------------------------------------------------------------- */
.wa-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
/* The page column. Wide enough to use a desktop screen (the old 1040px cap made
   every page — including the tree canvas — a narrow strip), while prose keeps its
   own comfortable measure via .wa-prose / .wa-hero. */
.wa-shell { max-width: 1320px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
/* Canvas surfaces (the tree atlas) go edge-to-edge — no centred column. */
.wa-shell--bleed { max-width: none; padding: 1rem 1rem 1.25rem; }
@media (max-width: 700px) {
    .wa-shell { padding: 1.1rem 1rem 2.5rem; }
    .wa-shell--bleed { padding: .6rem .6rem 1rem; }
}

/* --- card --------------------------------------------------------------- */
.wa-card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}
.wa-card--auth { width: 100%; max-width: 420px; }
.wa-brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
/* Enju Ya logo mark (app-icon tile) shown before the wordmark. Works inline in
   both the sign-in cards and the dashboard header; the SVG carries its own
   rounded teal background and cream house-and-tree mark. */
.wa-brand::before { content: ''; display: inline-block; width: 34px; height: 34px; background: url('/branding/enju-ya-app-icon.svg') center / contain no-repeat; margin-right: .55rem; vertical-align: middle; }
.wa-brand small { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--ink-faint); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* --- forms -------------------------------------------------------------- */
.wa-field { margin-bottom: 1.1rem; }
.wa-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.form-control, .wa-input {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .wa-input:focus {
    outline: none;
    border-color: var(--accent);
    /* Ring matches the border it draws. It was terracotta against a teal border —
       the one place the two identity colours contradicted each other. Same
       palette, same tokens; only the pairing is corrected. */
    box-shadow: 0 0 0 3px rgba(23, 80, 75, .15);
}
.help-block, .invalid-feedback { color: var(--danger); font-size: .85rem; margin-top: .3rem; }
.has-error .form-control { border-color: var(--danger); }

/* --- buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    font: inherit; font-weight: 600; cursor: pointer;
    padding: .62rem 1.1rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; text-decoration: none;
    transition: transform .08s, background .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-block { width: 100%; justify-content: center; }

/* --- header / app bar --------------------------------------------------- */
.wa-header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.25rem;
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px);
    border-bottom: 1px solid var(--line);
}
.wa-header .wa-brand {
    font-size: 1.12rem; display: inline-flex; align-items: center;
    white-space: nowrap; flex-shrink: 0;
}
.wa-header .wa-brand::before { width: 30px; height: 30px; margin-right: .5rem; }

/* Primary nav — a quiet inline row that scrolls rather than wraps, with a
   hairline "ink underline" on the active/hovered item (editorial, not pills). */
/* NB: no overflow here — an overflow container would CLIP the dropdown popovers.
   The bar is short enough now (7 items + menus) that it never needs to scroll;
   below 900px it becomes the sheet instead. */
.wa-nav {
    display: flex; align-items: center; gap: .15rem;
    margin-left: auto; min-width: 0; flex-wrap: nowrap;
}
.wa-nav a, .wa-nav button {
    position: relative; flex-shrink: 0;
    font: inherit; font-weight: 600; font-size: .92rem;
    color: var(--ink-soft); background: none; border: 0; cursor: pointer;
    padding: .5rem .7rem; border-radius: var(--radius-sm); text-decoration: none;
    transition: color .15s, background .15s;
}
.wa-nav a::after {
    content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .32rem; height: 2px;
    background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .2s var(--ease);
}
.wa-nav a:hover { color: var(--ink); }
.wa-nav a:hover::after, .wa-nav a.is-active::after { transform: scaleX(1); }
.wa-nav a.is-active { color: var(--ink); }
.wa-nav .wa-nav-sep { width: 1px; height: 20px; background: var(--line); margin: 0 .35rem; flex-shrink: 0; }
/* Belongs to the phone/tablet sheet only — the inline bar has the app bar's own
   brand and burger, so it has nothing to close and nothing to re-label. */
.wa-nav-sheet-head { display: none; }

/* THE way out of any drawer that covers the control which opened it — the app-bar
   nav sheet and the tree rail both do. One class so the two read as the same
   control; each drawer decides only WHEN to show it (their breakpoints differ).
   The second selector outruns `.wa-nav button` inside the sheet. */
.wa-sheet-close, .wa-nav .wa-sheet-close {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;            /* thumb-sized, per mobile-web first */
    font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
    color: var(--ink-soft); background: none; border: 0; border-radius: 50%;
}
.wa-sheet-close:hover, .wa-nav .wa-sheet-close:hover { background: var(--surface-sunk); color: var(--ink); }
.wa-sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-nav-lang { font-size: .82rem; color: var(--ink-faint); white-space: nowrap; }
.wa-nav-lang a { padding: .2rem .3rem; }

/* Sign-out sits in the nav as a quiet form button. */
.wa-header form { margin: 0; display: inline; }

/* Dropdown menus (Manage / account) — <details> so they work without JS. */
.wa-menu { position: relative; flex-shrink: 0; }
.wa-menu > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: .92rem; color: var(--ink-soft);
    padding: .5rem .7rem; border-radius: var(--radius-sm); white-space: nowrap;
    transition: color .15s, background .15s;
}
.wa-menu > summary::-webkit-details-marker { display: none; }
.wa-menu > summary::marker { content: ''; }
.wa-menu > summary:hover, .wa-menu[open] > summary { color: var(--ink); background: var(--surface-sunk); }
.wa-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-menu.is-active > summary { color: var(--ink); }
/* caret rotates open — a small, deliberate motion */
.wa-menu > summary > span[aria-hidden]:last-child { font-size: .7em; transition: transform .2s var(--ease); }
.wa-menu[open] > summary > span[aria-hidden]:last-child { transform: rotate(180deg); }
.wa-menu-pop {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 70; min-width: 232px;
    display: flex; flex-direction: column; gap: .1rem; padding: .4rem;
    background: var(--surface-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
    .wa-menu[open] > .wa-menu-pop { animation: wa-pop .18s var(--ease) both; }
}
@keyframes wa-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-menu--end .wa-menu-pop { left: auto; right: 0; }
.wa-menu-pop a, .wa-menu-pop button {
    display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--ink-soft); background: none; border: 0; cursor: pointer;
    padding: .55rem .65rem; border-radius: var(--radius-sm); text-decoration: none;
    transition: background .14s, color .14s, padding-left .14s var(--ease);
}
.wa-menu-pop a:hover, .wa-menu-pop button:hover { background: var(--surface-sunk); color: var(--ink); padding-left: .85rem; }
.wa-menu-pop a.is-active { color: var(--ink); background: var(--surface-sunk); }
.wa-menu-signout { color: var(--danger) !important; border-top: 1px solid var(--line); margin-top: .2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* Language switcher — its own menu; options render in their own script. */
.wa-lang > summary { gap: .3rem; }
.wa-lang .wa-menu-pop { min-width: 180px; }
.wa-lang .wa-menu-pop a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wa-lang-current { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .wa-lang-current { display: none; } }
@media (max-width: 900px) { .wa-lang-current { display: inline; max-width: none; } }

/* Account chip in the bar */
.wa-account > summary { padding-left: .35rem; }
.wa-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700;
    font-family: var(--font-body); text-transform: uppercase;
}
.wa-account-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .wa-account-name { display: none; } }

/* Hamburger — hidden on desktop, toggles the nav into a sheet on small screens. */
.wa-nav-burger { display: none; margin-left: auto; }

@media (max-width: 900px) {
    /* A `backdrop-filter` makes an element the containing block for its
       position:fixed descendants — and the sheet and its backdrop are both
       inside this header. With the blur on, `inset: 0` resolved to the header's
       ~60px box: the menu opened as a clipped strip and the backdrop dimmed
       nothing. The blur is a desktop nicety (and costly on phones); drop it at
       sheet sizes and make the bar opaque, since without it a translucent bar
       would let the page show through. */
    .wa-header {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: var(--surface-raised);
    }
    .wa-nav-burger { display: inline-flex; }
    .wa-nav {
        position: fixed; inset: 0 0 0 auto; z-index: 60; margin: 0;
        width: min(320px, 84vw); flex-direction: column; align-items: stretch; gap: .1rem;
        overflow-y: auto; padding: .55rem .85rem 1.5rem;
        background: var(--surface-raised); border-left: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        /* Off-screen means gone, not merely invisible: without this the closed
           sheet still takes keyboard focus, tabbing the reader somewhere they
           cannot see. `visibility` steps at the right end of each direction. */
        visibility: hidden;
        transform: translateX(100%); transition: transform .26s var(--ease), visibility .26s var(--ease);
    }
    .wa-nav.is-open { transform: translateX(0); visibility: visible; }

    /* The sheet's own top row. It carries the way out, because the sheet covers
       the burger that opened it. */
    .wa-nav-sheet-head {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        margin: 0 -.25rem .45rem; padding-bottom: .5rem;
        border-bottom: 1px solid var(--line);
    }
    .wa-nav-sheet-title {
        font-family: var(--font-display); font-size: 1rem; font-weight: 600;
        color: var(--ink); padding-left: .25rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wa-nav a, .wa-nav button { font-size: 1rem; padding: .7rem .8rem; }
    .wa-nav a::after { display: none; }
    .wa-nav a.is-active, .wa-nav a:hover { background: var(--surface-sunk); color: var(--ink); }
    .wa-nav .wa-nav-sep { width: auto; height: 1px; margin: .4rem .2rem; }
    /* In the sheet the dropdowns expand inline rather than pop over. */
    .wa-menu { width: 100%; }
    .wa-menu > summary { width: 100%; font-size: 1rem; padding: .7rem .8rem; }
    .wa-menu-pop {
        position: static; min-width: 0; padding: .1rem 0 .3rem .8rem;
        background: none; border: 0; box-shadow: none;
    }
    .wa-account-name { display: inline; max-width: none; }
    .wa-nav-backdrop {
        position: fixed; inset: 0; z-index: 55; background: rgba(20, 55, 50, .28);
        opacity: 0; visibility: hidden; transition: opacity .2s ease;
    }
    .wa-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (max-width: 560px) {
    .wa-header { padding: .55rem .85rem; gap: .5rem; }
    .wa-header .wa-brand { font-size: 1rem; }
    .wa-header .wa-brand::before { width: 26px; height: 26px; margin-right: .4rem; }
}

/* --- overview board (panel grid) ---------------------------------------- */
.wa-dash-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.4rem;
}
.wa-dash-head h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.wa-panels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.wa-panel {
    grid-column: span var(--span, 6);
    background: var(--surface-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.25rem 1.35rem 1.35rem; min-width: 0;
}
.wa-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.wa-panel-head h2 { font-size: 1.02rem; margin: 0; }
.wa-panel-link { font-size: .82rem; font-weight: 600; color: var(--ink-faint); text-decoration: none; white-space: nowrap; }
.wa-panel-link:hover { color: var(--accent-dark); }

/* stat tiles — big number, quiet label */
.wa-stat { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; min-width: 0; }
a.wa-stat:hover .wa-stat-n { color: var(--gold); }
.wa-stat-n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--ink); }
.wa-stat-n--hero { font-size: clamp(2.8rem, 5vw, 3.8rem); }
.wa-stat-l { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.wa-stat-row { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.wa-stat-row--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1rem 1.2rem; }
.wa-glance { display: flex; flex-direction: column; gap: 1.2rem; }
.wa-glance-hero { display: flex; flex-direction: column; gap: .15rem; }

/* needs-attention list */
.wa-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wa-attn a {
    display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem;
    border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
    transition: background .15s;
}
.wa-attn a:hover { background: var(--surface-sunk); }
.wa-attn-n {
    min-width: 2rem; text-align: center; font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 600; color: var(--ink);
}
.wa-attn-n.is-gold { color: var(--gold); }
.wa-attn-n.is-danger { color: var(--danger); }
.wa-attn-go { margin-left: auto; color: var(--ink-faint); }

/* feed (revisions / timeline) */
.wa-feed { list-style: none; margin: 0; padding: 0; }
.wa-feed li {
    display: flex; align-items: center; gap: .6rem; padding: .55rem 0;
    border-bottom: 1px solid var(--line); font-size: .9rem;
}
.wa-feed li:last-child { border-bottom: none; }
.wa-feed-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wa-feed-when { margin-left: auto; white-space: nowrap; }

@media (max-width: 900px) {
    .wa-panels { grid-template-columns: 1fr; }
    .wa-panel { grid-column: 1 / -1; }
}

/* --- workspace cards ---------------------------------------------------- */
.wa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wa-ws {
    position: relative; cursor: pointer;
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1.25rem; background: var(--surface-raised);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .15s;
}
.wa-ws:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Make the whole family card clickable: the Open control's overlay covers the
   card, so a click anywhere opens (or switches into) that family. */
.wa-ws-go::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
/* The card's action row. MUST wrap: the open family carries three items (Open, the
   "Currently open" chip, GEDCOM) and the cards are only 240px at their narrowest,
   so without this the last control is pushed straight out through the card edge. */
.wa-ws-actions {
    margin-top: auto; padding-top: .75rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
}
/* Per-family actions (GEDCOM) sit ON TOP of the Open overlay — without the stacking
   context they are covered by it and every click opens the family instead. Quieter
   and smaller than Open: taking a copy is the secondary act on this card. The auto
   margin trails it to the right, and gives up rather than overflow once it wraps. */
.wa-ws-act { position: relative; z-index: 2; margin-left: auto; }
.wa-ws-act .btn { padding: .38rem .7rem; font-size: .82rem; }
/* Status chips are short phrases — let them wrap to the next line whole rather
   than break across one ("CURRENTLY / OPEN"). Sage, to match the is-current ring. */
.wa-ws .wa-chip { white-space: nowrap; }
.wa-chip--open { background: rgba(125, 143, 105, .3); color: #4a5a38; }
.wa-ws.is-current { border-color: var(--sage); box-shadow: 0 0 0 2px rgba(125, 143, 105, .25); }
.wa-ws h3 { margin: 0; }
.wa-chip {
    display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
    background: rgba(125, 143, 105, .16); color: var(--sage);
}
.wa-chip--gold { background: rgba(194, 160, 76, .18); color: #8a6f22; }

/* --- flashes ------------------------------------------------------------ */
.wa-flash { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; border: 1px solid transparent; }
.wa-flash--success { background: rgba(125, 143, 105, .14); border-color: rgba(125, 143, 105, .4); color: #3f4a33; }
.wa-flash--error { background: rgba(166, 58, 42, .1); border-color: rgba(166, 58, 42, .35); color: var(--danger); }
/* A plan ceiling, not a failure — muted gold is the premium moment in the palette, and the flash
   carries its own action, so it lays out as message + button rather than a line of text. */
.wa-flash--upgrade {
    background: rgba(194, 160, 76, .14); border-color: rgba(194, 160, 76, .45); color: #6f5813;
    display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.wa-flash--upgrade .btn { flex: none; }

/* --- empty state -------------------------------------------------------- */
.wa-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.wa-empty h2 { color: var(--ink); }

.wa-stack > * + * { margin-top: 1rem; }
.text-center { text-align: center; }
.mt-3 { margin-top: 1.5rem; }

/* --- tree (nested-list, pre-SVG) ---------------------------------------- */
.wa-tree, .wa-tree ul { list-style: none; margin: 0; padding-left: 1.25rem; }
.wa-tree > li { padding-left: 0; }
.wa-tree li { position: relative; padding: .25rem 0 .25rem 1rem; }
.wa-tree li::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    border-left: 2px solid var(--line);
}
.wa-tree > li::before { border-left: none; }
.wa-tree-node {
    display: inline-block; padding: .25rem .6rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.wa-tree-node a { font-weight: 600; text-decoration: none; }
.wa-tree-spouse { color: var(--sage); font-size: .9rem; }

/* --- landing / marketing ------------------------------------------------ */
.wa-hero { text-align: center; padding: 2.5rem 1rem 1rem; max-width: 760px; margin: 0 auto; }
.wa-display {
    font-family: var(--font-display); font-weight: 600; line-height: 1.05;
    font-size: clamp(2.4rem, 6vw, 4rem); color: var(--ink); margin: 0;
}
.wa-lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }
.wa-lead em { font-style: italic; color: var(--ink); }
.wa-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.wa-reassure { font-size: .9rem; color: var(--ink-faint); }
.wa-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* eyebrow — a text label above a heading (chip's quieter sibling) */
.wa-eyebrow {
    display: inline-block; font-size: .75rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark);
    margin: 0 0 .6rem;
}

/* marketing section rhythm — generous whitespace, contained width */
.wa-section { padding: 2.75rem 0; }
.wa-section + .wa-section { border-top: 1px solid var(--line); }
.wa-section-head { max-width: 640px; margin: 0 auto 1.75rem; text-align: center; }
.wa-section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0; }

/* narrative column — the Why / Problem / Answer prose */
.wa-prose { max-width: 620px; margin: 0 auto; }
.wa-prose p { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 1.1rem; }
.wa-prose p:last-child { margin-bottom: 0; }
.wa-prose em { font-style: italic; color: var(--ink); }
.wa-prose .wa-kicker { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); font-weight: 500; }

/* feature cards — icon-free, heading + body */
.wa-feature { text-align: left; }
.wa-feature h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.wa-feature p { margin: 0; }

/* benefits — a clean list, not bullets-as-afterthought */
.wa-benefits { max-width: 680px; margin: 0 auto; list-style: none; padding: 0; }
.wa-benefits li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.wa-benefits li:last-child { border-bottom: none; }
.wa-benefits strong { display: block; font-family: var(--font-display); font-weight: 500; color: var(--ink); margin-bottom: .15rem; }
.wa-benefits span { color: var(--ink-soft); }

/* how it works — numbered steps */
.wa-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.wa-step { position: relative; padding-top: .5rem; }
.wa-step::before {
    counter-increment: step; content: counter(step);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-bottom: .6rem;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
    color: var(--accent-dark); background: rgba(181, 90, 56, .12);
    border-radius: 999px;
}
.wa-step h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.wa-step p { margin: 0; color: var(--ink-soft); }

/* objections / FAQ — accordion via <details> */
.wa-qa { max-width: 720px; margin: 0 auto; }
.wa-qa details {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-raised); padding: .1rem 1.1rem; margin-bottom: .6rem;
}
.wa-qa summary {
    cursor: pointer; font-weight: 600; padding: .85rem 0; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.wa-qa summary::-webkit-details-marker { display: none; }
.wa-qa summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.wa-qa details[open] summary::after { content: '\2013'; }
.wa-qa details[open] summary { border-bottom: 1px solid var(--line); }
.wa-qa .wa-answer { padding: .85rem 0; color: var(--ink-soft); }
.wa-qa .wa-answer em { font-style: italic; color: var(--ink); }

/* testimonials */
.wa-quotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wa-quote { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.wa-quote blockquote { margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
.wa-quote cite { font-style: normal; font-size: .9rem; color: var(--ink-faint); }

/* closing CTA band — sunk parchment, centered */
.wa-cta-band { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; }
.wa-cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .5rem; }
.wa-cta-band p { color: var(--ink-soft); max-width: 520px; margin: 0 auto 1.5rem; }

/* footer */
.wa-footer { text-align: center; padding: 2.5rem 1rem 1rem; color: var(--ink-faint); font-size: .92rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.wa-footer .wa-brand { font-size: 1.15rem; color: var(--ink); }
.wa-footer em { font-style: italic; }

/* --- tables -------------------------------------------------------------- */
/* The app layout deliberately does NOT load Bootstrap, so every <table> in the
   product was rendering at browser defaults — which is why views had grown
   inline `width:100%;border-collapse:collapse` patches one at a time. Styling
   the element itself inside the page column fixes all of them at once and
   touches no markup, so no behaviour, filter or action can be disturbed.
   Inline styles still win where they exist; they set the same values. */
.wa-shell table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.wa-shell th {
    text-align: left; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
    padding: .5rem .6rem; border-bottom: var(--border-thin) solid var(--line-strong);
    white-space: nowrap;
}
.wa-shell td { padding: .62rem .6rem; vertical-align: middle; border-top: var(--border-thin) solid var(--line); }
.wa-shell tbody tr:hover td, .wa-shell tr:hover > td { background: rgba(235, 225, 200, .38); }
/* First and last cells align with the card's own padding rather than floating. */
.wa-shell th:first-child, .wa-shell td:first-child { padding-left: 0; }
.wa-shell th:last-child, .wa-shell td:last-child { padding-right: 0; }
/* Only an ACTION cell moves to the right edge. Most tables here end in a data
   column (Status, Provider, Date, Period), and right-aligning those would be
   wrong, so this keys on the cell actually holding a control rather than on
   its position. Browsers without :has() simply leave it left-aligned. */
.wa-shell td:last-child:has(.btn),
.wa-shell td:last-child:has(form) { text-align: right; }
.wa-shell td:last-child:has(.btn) form { display: inline-block; }
.wa-shell td .btn { padding: .34rem .7rem; font-size: .84rem; }

/* Phone: a wide table must scroll inside ITSELF. Without this the page body
   scrolls sideways, which the tree work established as never acceptable. */
@media (max-width: 700px) {
    .wa-shell table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wa-shell th, .wa-shell td { padding: .55rem .5rem; }
}
/* Print takes the plain table box back — the PDF pipeline must be untouched. */
@media print { .wa-shell table { display: table; overflow: visible; } }

/* --- control states ------------------------------------------------------ */
/* The three states the design system asks for (primary / pressed / disabled)
   plus a visible keyboard focus, which nothing had. Purely presentational:
   :disabled styles what the markup ALREADY declares, it never disables a
   control itself, so no action becomes unavailable that was not already. */
.btn:focus-visible,
a:focus-visible,
summary:focus-visible { outline: var(--border-regular) solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.btn-primary:active { background: var(--accent-dark); box-shadow: inset 0 2px 4px rgba(20, 55, 50, .28); }
.btn-ghost:active { background: var(--surface-sunk); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
    background: var(--surface-sunk); color: var(--ink-faint); border-color: transparent;
    cursor: not-allowed; box-shadow: none; opacity: .8;
}
.btn:disabled:hover, .btn[disabled]:hover, .btn.is-disabled:hover {
    background: var(--surface-sunk); color: var(--ink-faint); border-color: transparent;
}
.btn:disabled:active, .btn[disabled]:active { transform: none; }

/* Native controls inherit the palette instead of shipping the browser's blue.
   One declaration, no markup, and every checkbox, radio and slider in the
   product — including the tree panel's — matches the identity. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { width: 1.05em; height: 1.05em; }

/* --- form controls ------------------------------------------------------- */
select.form-control {
    /* A select that looks chosen rather than defaulted. The chevron is inline
       SVG in --ink-soft, so it needs no asset and no extra request. */
    appearance: none; -webkit-appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233f665f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: .7rem;
}
textarea.form-control { min-height: 5.5rem; resize: vertical; }
.form-control:disabled, .form-control[readonly] {
    background: var(--surface-sunk); color: var(--ink-faint); cursor: not-allowed;
}
.form-control::placeholder { color: var(--ink-faint); opacity: 1; }
/* Error state reads on the field as well as under it. */
.has-error .form-control, .form-control[aria-invalid="true"] { border-color: var(--danger); }
.has-error .form-control:focus, .form-control[aria-invalid="true"]:focus {
    border-color: var(--danger); box-shadow: 0 0 0 3px rgba(166, 58, 42, .14);
}
/* The quiet hint under a field, distinct from the red error line. */
.wa-field .hint, .form-hint { display: block; color: var(--ink-faint); font-size: .82rem; margin-top: .3rem; }

/* Phone: thumb-sized fields, matching the 44px target the app bar and tree
   panel already use. Desktop density is untouched. */
@media (max-width: 700px) {
    .form-control, .wa-input { min-height: 44px; font-size: 1rem; }
    .btn { min-height: 44px; }
}

/* --- empty state --------------------------------------------------------- */
/* A defined resting place that teaches the next action, per the design set's
   empty-state pattern. Every use in the product is `wa-card wa-empty`, so the
   dashed treatment is for the standalone case ONLY — on a card the card's own
   solid border and shadow already do that job, and drawing both would give the
   panel two competing edges. */
.wa-empty {
    text-align: center; padding: 3rem 1.5rem; color: var(--ink-soft);
}
.wa-empty:not(.wa-card) {
    border: var(--border-regular) dashed var(--line-strong);
    border-radius: var(--radius); background: rgba(253, 250, 241, .5);
}
.wa-empty h2 { color: var(--ink); margin-bottom: .35rem; }
.wa-empty p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.wa-empty .btn { margin-top: .35rem; }

/* --- loading ------------------------------------------------------------- */
/* A shape of the content to come reads as progress; the word "Loading…" reads
   as a stall. Used where a panel fetches its own body. */
.wa-skeleton { display: block; height: .85rem; border-radius: var(--radius-xs);
    background: linear-gradient(90deg, var(--surface-sunk) 25%, rgba(253,250,241,.85) 50%, var(--surface-sunk) 75%);
    background-size: 200% 100%; }
.wa-skeleton + .wa-skeleton { margin-top: .55rem; }
.wa-skeleton--wide { width: 100%; }
.wa-skeleton--half { width: 55%; }
.wa-skeleton--short { width: 32%; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes wa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    .wa-skeleton { animation: wa-shimmer 1.4s linear infinite; }
}

/* --- voice recordings (US-056) ------------------------------------------ */
/* A recording of an elder should carry the weight of a photograph, not look like a file
   attachment. The strip is portrait + play + waveform + running time on one line. */
.wa-voice { margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); text-align: left; }
.wa-voice__head { display: flex; align-items: center; gap: .75rem; }
.wa-voice__portrait { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(31, 42, 31, .12); }
.wa-voice__portrait--none { display: inline-flex; align-items: center; justify-content: center;
    background: rgba(125, 143, 105, .16); color: var(--sage); }
.wa-voice__portrait--none svg { width: 22px; height: 22px; }
.wa-voice__play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--ink); color: var(--surface); display: inline-flex; align-items: center;
    justify-content: center; transition: transform .12s ease, background .12s ease; }
.wa-voice__play:hover { transform: scale(1.06); }
.wa-voice__play svg { width: 20px; height: 20px; }
.wa-voice__icon-pause { display: none; }
.wa-voice.is-playing .wa-voice__icon-play { display: none; }
.wa-voice.is-playing .wa-voice__icon-pause { display: block; }

/* The strip holds its height before the bars arrive, so nothing jumps when decoding finishes. */
.wa-voice__wave { flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center;
    gap: 2px; cursor: pointer; }
.wa-voice__bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: rgba(31, 42, 31, .22);
    transition: background .12s ease; }
.wa-voice__bar.is-played { background: var(--accent); }
.wa-voice__time { flex: none; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wa-voice__caption { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.wa-voice__caption strong { color: var(--ink); }

/* The native element is the playback engine AND the fallback: it only steps aside once a real
   waveform has been measured, so a decode failure leaves the visitor a working player. */
.wa-voice__audio { width: 100%; margin-top: .6rem; }
.wa-voice.has-wave .wa-voice__audio { display: none; }

/* ============================================================================
   Upgrade — payment method first
   ----------------------------------------------------------------------------
   The method is the FIRST choice, not a button beside a form that assumed one
   provider. Stacked rows; the selected one expands to show only its own fields,
   so a payer is never looking at inputs belonging to a method they did not pick.

   Driven by radios and sibling selectors, with no JavaScript: a family on a slow
   phone (DEC-026) gets a working chooser from the HTML alone, and a script that
   never loads cannot strand them on a form they cannot use.
   ========================================================================== */
.wa-plan {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: calc(var(--space) * 2);
    align-items: start;
}
@media (max-width: 820px) { .wa-plan { grid-template-columns: minmax(0, 1fr); } }

.wa-plan__price { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.wa-plan__per { color: var(--ink-faint); font-size: .95rem; }
.wa-plan__feats { list-style: none; margin: var(--space) 0 0; padding: 0; }
.wa-plan__feats li { display: flex; gap: .55rem; padding: .3rem 0; color: var(--ink-soft); }
.wa-plan__feats li::before { content: '✓'; color: var(--gold); font-weight: 700; }

/* Summary — what is owed, stated before anyone is asked to pay it. */
.wa-plan__summary {
    background: var(--surface-sunk);
    border: var(--border-thin) solid var(--line);
    border-radius: var(--radius);
    padding: calc(var(--space) * 1.15);
}
.wa-plan__summary h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.wa-plan__row { display: flex; justify-content: space-between; gap: var(--space); padding: .34rem 0; color: var(--ink-soft); }
.wa-plan__row--total {
    border-top: var(--border-thin) solid var(--line-strong);
    margin-top: .5rem; padding-top: .65rem; font-weight: 700; color: var(--ink); font-size: 1.05rem;
}

/* --- the method rows --- */
.wa-pm { display: grid; gap: .65rem; margin-top: .4rem; }
.wa-pm__option {
    border: var(--border-thin) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    overflow: hidden;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.wa-pm__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.wa-pm__head {
    display: flex; align-items: center; gap: .65rem;
    padding: .8rem .95rem; cursor: pointer;
}
.wa-pm__head b { color: var(--ink); font-weight: 700; display: block; }
.wa-pm__head .wa-pm__hint { color: var(--ink-faint); font-size: .85rem; display: block; }
/* The amount each method actually charges, in ITS OWN currency — the one number that
   differs between the rows, so it belongs on the row rather than in the summary. */
.wa-pm__amt {
    margin-left: auto; text-align: right; flex: none;
    font-weight: 700; color: var(--ink); white-space: nowrap;
}
.wa-pm__amt small { display: block; font-weight: 400; color: var(--ink-faint); font-size: .78rem; }

/* The radio dot, drawn rather than native so it matches the rest of the page. */
.wa-pm__head::before {
    content: ''; flex: none;
    width: 1.05rem; height: 1.05rem;
    border: var(--border-regular) solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-pm__radio:checked + .wa-pm__head::before {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 3px var(--surface-raised), inset 0 0 0 1rem var(--accent);
}

/* Selected row lifts to card white; unselected stay sunken. */
.wa-pm__radio:checked + .wa-pm__head { background: var(--surface-raised); }
.wa-pm__option:has(.wa-pm__radio:checked) {
    border-color: var(--accent);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}
/* The radio is off-screen but still focusable, so the ring is drawn on the head
   or the chooser cannot be used from the keyboard at all. */
.wa-pm__radio:focus-visible + .wa-pm__head { outline: 2px solid var(--gold); outline-offset: -2px; }

.wa-pm__body { display: none; padding: 0 .95rem 1rem; background: var(--surface-raised); }
.wa-pm__radio:checked ~ .wa-pm__body { display: block; }
.wa-pm__fields { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.wa-pm__note { color: var(--ink-faint); font-size: .85rem; margin: .6rem 0 0; }

/* The promo badge — tokens only, so a repaint stays a token change (§6). */
.wa-promo {
    display: inline-block;
    background: var(--surface-sunk);
    color: var(--ink);
    border: var(--border-thin) dashed var(--gold);
    border-radius: var(--radius-xs);
    padding: .2rem .6rem;
    font-weight: 700;
}