/*
 * Ascently Stack Audit — main.css
 *
 * Dark theme is CANONICAL. This sheet is the T43.1 dark system (2026-05-28)
 * restored and extended on 2026-08-28: commit 67b9c47 replaced it wholesale
 * with a light "evidence readout" sheet inside an unrelated graph-data commit,
 * which un-styled the medication accordion, the scorecard chip row, the
 * picked-card widgets, the HTMX busy indicator and the entire two-surface
 * safety readout. Design work layered on top of the restore:
 *
 *   - Token layer widened: the dark canonical tokens (--bg / --surface /
 *     --ink / --accent-* / --ok / --critical) now carry a semantic ALIAS
 *     layer (--ground / --hair / --muted / --proven-* / --cond-* / --held-* /
 *     --crit-* / --warn-ink ...) so the surfaces written against the newer
 *     vocabulary — the Science Core section, the recommend pages' own
 *     <style> blocks — render dark instead of falling back to unstyled.
 *   - Severity is encoded by colour AND shape AND glyph, never colour alone.
 *   - Tier-3 framing reads as a footnote, not as a premium badge.
 *   - Keyboard focus is never suppressed (`outline: none` on :focus removed).
 *   - --ink-soft / --ink-muted raised to meet WCAG AA on both surfaces.
 *
 * T43.1 emergency-redesign diagnosis (2026-05-28), still load-bearing:
 *
 * Stanislav 2026-05-28 screenshot diagnostic findings:
 *   1) Browser cache served pre-dark stylesheet → cache-busting via
 *      ?v=N query string on the <link> + meta color-scheme="dark" lock.
 *   2) Autocomplete dropdown rendered as inline full-width grey cards
 *      → .ascently-typeahead-results is now position:absolute floating.
 *   3) Section legend used 11px uppercase tiny tag, no h2 hierarchy
 *      → new .ascently-section + .ascently-section-title at 28px.
 *   4) Nav rendered as underlined text → .ascently-nav-link pill styles.
 *   5) Manual entry competed for attention → progressive disclosure
 *      via <details> with compact summary.
 *   6) Remove button rendered as wide pale rectangle on narrow viewport
 *      → forced small inline 12px button right-aligned.
 *   7) Form fields lacked dark surface + cyan focus glow → strengthened
 *      input/select/textarea base + focus styles.
 *
 * Compliance contracts (do not remove — covered by existing tests):
 *   - Legacy palette vars `--ascently-teal/cream/charcoal/warn/concern`
 *     still defined (mapped к dark-theme aliases) per
 *     test_static_main_css_contains_brand_palette_variables.
 *   - System font stack includes -apple-system / Segoe UI / Roboto
 *     per test_static_main_css_uses_system_fonts.
 *   - No web-font network round-trip; zero-build deploy preserved.
 *   - Severity card classes (.ascently-issue--info / --warning /
 *     --high-concern) and badge classes preserved per
 *     test_main_css_defines_rule_card_severity_classes.
 *   - Medication accordion classes preserved per
 *     test_main_css_defines_medication_accordion_classes.
 *   - .ascently-typeahead-picked* preserved per
 *     test_main_css_defines_typeahead_picked_chip.
 *   - @media (max-width: 900px) breakpoint preserved per
 *     test_main_css_defines_responsive_breakpoint.
 *
 * No web fonts. No build step. No frameworks.
 */

/* -------------------------------------------------------------------------- */
/* Color-scheme lock: defeat browser auto-light fallback.                     */
/* This is the #1 root cause of the 2026-05-28 cream-background bug —         */
/* a browser respecting prefers-color-scheme: light would override            */
/* CSS-variable defaults if the page failed к declare its scheme.             */
/* -------------------------------------------------------------------------- */

:root {
    color-scheme: dark;
}

html {
    color-scheme: dark;
    background: #0d1117;
}

:root {
    /* Dark theme canonical palette (per Stanislav brief, matching the
       cowork-data-acquisition-state.html aesthetic). */
    --bg: #0d1117;
    --surface: #161b22;
    --surface-elev: #1c222b;
    --surface-deep: #0a0e14;
    --ink: #e6edf3;
    /* --ink-soft / --ink-muted were #9da5b4 / #6e7681. #6e7681 measures
       3.8:1 on --surface, which fails WCAG AA 1.4.3 for the 12px form
       labels, the citation line and the footer that use it. Both are
       raised so every text token in the sheet clears 4.5:1 on --bg AND
       on --surface, while keeping a legible three-step ink hierarchy:
       --ink 14.6:1 / --ink-soft 8.5:1 / --ink-muted 5.6:1. */
    --ink-soft: #adb7c4;
    --ink-muted: #8b949e;
    --line: #30363d;
    --line-strong: #444c56;

    --accent-cyan: #22d3ee;
    --accent-cyan-soft: #0c4a5e;
    --accent-cyan-bg: rgba(34, 211, 238, 0.10);

    --accent-amber: #fbbf24;
    --accent-amber-soft: #4a3410;
    --accent-amber-bg: rgba(251, 191, 36, 0.10);

    --accent-purple: #a78bfa;
    --accent-purple-soft: #2d2554;
    --accent-purple-bg: rgba(167, 139, 250, 0.10);

    --ok: #4ade80;
    --ok-soft: #14532d;
    --ok-bg: rgba(74, 222, 128, 0.10);

    --pending: #f59e0b;
    --pending-bg: rgba(245, 158, 11, 0.10);

    --critical: #ef4444;
    --critical-bg: rgba(239, 68, 68, 0.10);

    --warn: #f472b6;
    --warn-bg: rgba(244, 114, 182, 0.10);

    --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
            Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;

    /* Legacy brand-palette aliases preserved for contract tests
       (test_static_main_css_contains_brand_palette_variables expects
       these exact hex values to be tokens in this file). The aliases
       are not referenced anywhere in the dark theme; new rules use the
       semantic vars above. */
    --ascently-teal: #1f4b5c;
    --ascently-teal-hover: #163844;
    --ascently-cream: #faf8f3;
    --ascently-cream-soft: #f4f1e8;
    --ascently-charcoal: #2a2a2a;
    --ascently-charcoal-soft: #555555;
    --ascently-charcoal-muted: #888888;
    --ascently-rule: #d8d4c8;
    --ascently-info: #4a6c7c;
    --ascently-warn: #c97818;
    --ascently-concern: #a83232;

    /* Spacing scale. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Legacy font-family aliases for tests. */
    --ascently-font-system: var(--sans);
    --ascently-font-mono: var(--mono);

    /* ---------------------------------------------------------------- */
    /* Semantic alias layer.                                            */
    /*                                                                  */
    /* The Science Core section (science_core_section_en-US.j2) and the */
    /* recommend pages carry rules written against a second token       */
    /* vocabulary. Rather than fork the palette, that vocabulary is     */
    /* aliased onto the dark canonical tokens above, so there is        */
    /* exactly ONE palette and a surface written against either naming  */
    /* renders the same dark theme.                                     */
    /*                                                                  */
    /* Contrast on --surface (#161b22): --muted 8.5:1, --faint 5.6:1,   */
    /* every *-ink token >= 7:1. --accent is deliberately DARKER than   */
    /* --accent-cyan because the recommend chips use it as a fill under */
    /* #fff label text (5.4:1); --accent-ink is the on-dark text tone.  */
    /* ---------------------------------------------------------------- */
    --ground: var(--bg);
    --surface-2: var(--surface-elev);
    --hair: var(--line);
    --muted: var(--ink-soft);
    --faint: var(--ink-muted);
    --accent: #0e7490;
    --accent-ink: var(--accent-cyan);

    /* Evidence-strength trio: proven / conditional (studied in patients) /
       withheld. The same three signals the Science Core section renders. */
    --proven: var(--ok);
    --proven-bg: rgba(74, 222, 128, 0.12);
    --proven-ink: #86efac;
    --cond: var(--accent-amber);
    --cond-bg: rgba(251, 191, 36, 0.12);
    --cond-ink: #fcd34d;
    --held: var(--ink-muted);
    --held-bg: rgba(139, 148, 158, 0.14);
    --held-ink: #c9d1d9;

    /* Safety severities. --warn (rose) is the "remove" step of the
       ladder: one below --critical ("consult a clinician"), one above
       --accent-amber ("switch"). */
    --crit: var(--critical);
    --crit-bg: var(--critical-bg);
    --crit-ink: #fca5a5;
    --warn-ink: #f9a8d4;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, serif;
    --radius: var(--radius-lg);
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------------------------------- */
/* prefers-color-scheme: light — HARD LOCK к dark.                            */
/* A user-agent default light-scheme should NOT override our dark theme.       */
/* This block re-asserts the canonical dark palette so a system-light          */
/* preference cannot recolor the surface to cream / paper.                     */
/* -------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
    :root, html, body {
        color-scheme: dark;
        background: #0d1117 !important;
        color: #e6edf3 !important;
    }
}

* { box-sizing: border-box; }

/* The dose-after-pick card, the row-level warning slots and the medication
   chip tray are all revealed by TOGGLING THE `hidden` ATTRIBUTE from
   main.js. The UA rule behind that attribute is `[hidden] { display: none }`
   at specificity (0,1,0) -- weaker than the layout rules in this sheet,
   several of which set `display` on the very same elements. The result was
   an empty picked-supplement card ("[pack] --", an empty dose field and the
   catalog-gap hint) sitting under the search box before the user had picked
   anything. Re-assert the attribute so a hidden element stays hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-cyan-soft); color: var(--ink); }

/* -------------------------------------------------------------------------- */
/* Shell + Header                                                             */
/* -------------------------------------------------------------------------- */

.ascently-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

.ascently-header {
    background:
        radial-gradient(circle at 15% 30%, rgba(34, 211, 238, 0.12), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(167, 139, 250, 0.10), transparent 50%),
        linear-gradient(180deg, var(--surface-deep) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    padding: 56px 32px 36px;
}

/* The h1 carries a full counter-positioning sentence, not a wordmark.
   The T43 gradient-fill treatment was built for the two-word "Ascently
   Stack Audit" wordmark; across a three-line sentence it costs contrast
   and swallows the inline <em> accent the copy uses for emphasis
   (-webkit-text-fill-color inherits, so the em's colour never lands).
   Solid ink, one accent word. */
.ascently-brand {
    font-size: 36px;
    margin: 0 0 14px;
    max-width: 900px;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.18;
    text-wrap: balance;
}

.ascently-tagline {
    margin: 0 0 8px;
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 760px;
    line-height: 1.55;
}

.ascently-tagline strong {
    color: var(--accent-cyan);
    font-weight: 600;
}

.ascently-meta {
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------- */
/* Sticky navigation (pills)                                                  */
/* -------------------------------------------------------------------------- */

.ascently-nav {
    position: sticky;
    top: 0;
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    z-index: 10;
    padding: 12px 32px;
}

.ascently-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.ascently-nav a,
.ascently-nav-link {
    display: inline-block;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 140ms, background-color 140ms, border-color 140ms;
}

.ascently-nav a:hover,
.ascently-nav a:focus-visible,
.ascently-nav-link:hover,
.ascently-nav-link:focus-visible {
    color: var(--accent-cyan);
    background: var(--accent-cyan-bg);
    border-color: var(--accent-cyan-soft);
}

main { padding: 40px 32px 96px; }

/* -------------------------------------------------------------------------- */
/* Lede + Section hierarchy                                                   */
/* -------------------------------------------------------------------------- */

.ascently-intro {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--radius-lg);
    padding: 22px 28px;
    margin: 0 0 24px 0;
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 820px;
}

/* D2.4 — "Try an example stack" affordance.
   Compact horizontal row with a cyan-accent secondary button so the
   user can reach real results in seconds without filling the form. */
.ascently-example-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 32px 0;
    padding: 0;
}

.ascently-example-button {
    background: transparent;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 140ms, color 140ms, transform 120ms;
    white-space: nowrap;
}

.ascently-example-button:hover,
.ascently-example-button:focus-visible {
    background: var(--accent-cyan-bg);
    transform: translateY(-1px);
}

.ascently-example-button:active { transform: translateY(0); }

.ascently-example-hint {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
    flex: 1 1 18rem;
}

.ascently-intro strong {
    color: var(--ink);
    font-weight: 600;
}

.ascently-sep {
    border: none;
    height: 1px;
    background: var(--line);
    margin: 40px 0;
}

.ascently-section {
    margin: 0 0 8px;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ascently-section-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* "(optional)" and similar qualifiers riding inside a section h2. */
.ascently-section-title-aux {
    font-weight: 400;
    font-size: 0.64em;
    color: var(--ink-muted);
    letter-spacing: 0;
}

.ascently-section-lede {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 0 8px 0;
    max-width: 760px;
    line-height: 1.6;
}

.ascently-section-lede strong {
    color: var(--ink);
    font-weight: 600;
}

/* Legend kept for backward-compat (some tests still inspect the legacy
   class). Visually rendered as an invisible heading — the new
   .ascently-section-title carries the visible H2 weight. */
.ascently-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: contents;
}

.ascently-fieldset-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ascently-fieldset-help {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 0 8px 0;
    max-width: 760px;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* Form fields                                                                */
/* -------------------------------------------------------------------------- */

.ascently-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ascently-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ascently-field--full { grid-column: 1 / -1; }

.ascently-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ascently-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.ascently-input,
.ascently-select,
.ascently-textarea {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    width: 100%;
    transition: border-color 140ms, background-color 140ms, box-shadow 140ms;
}

.ascently-input::placeholder,
.ascently-textarea::placeholder {
    color: var(--ink-muted);
}

.ascently-input:hover,
.ascently-select:hover,
.ascently-textarea:hover {
    border-color: var(--line-strong);
}

.ascently-input:focus,
.ascently-select:focus,
.ascently-textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.ascently-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23adb7c4' stroke-width='1.5'%3e%3cpath d='M1 1.5L6 6.5L11 1.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px;
    cursor: pointer;
}

.ascently-select option {
    background: var(--surface);
    color: var(--ink);
}

.ascently-textarea {
    min-height: 5rem;
    resize: vertical;
    line-height: 1.55;
    font-family: var(--sans);
}

/* -------------------------------------------------------------------------- */
/* Stack rows (card per supplement)                                           */
/* -------------------------------------------------------------------------- */

.ascently-stack-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ascently-stack-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 14px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    position: relative;
}

.ascently-stack-row > .ascently-field--full {
    grid-column: 1 / 2;
    position: relative;
}

.ascently-stack-row > .ascently-manual-entry {
    grid-column: 1 / -1;
}

.ascently-stack-row > .ascently-row-remove {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    align-self: start;
}

.ascently-stack-row-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-muted);
    margin: 0 0 4px;
}

/* -------------------------------------------------------------------------- */
/* Progressive disclosure (manual entry)                                       */
/* -------------------------------------------------------------------------- */

.ascently-manual-entry {
    margin-top: 4px;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}

.ascently-manual-entry > summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 6px 0;
    list-style: none;
    user-select: none;
    transition: color 140ms;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ascently-manual-entry > summary::-webkit-details-marker { display: none; }

.ascently-manual-entry > summary::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    color: var(--accent-cyan);
    font-size: 12px;
    transition: transform 140ms;
}

.ascently-manual-entry[open] > summary::before {
    transform: rotate(90deg);
}

.ascently-manual-entry > summary:hover,
.ascently-manual-entry > summary:focus-visible {
    color: var(--ink);
}

.ascently-manual-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 0.9fr 0.7fr;
    gap: 14px;
    margin-top: 14px;
}

/* -------------------------------------------------------------------------- */
/* Inline buttons (Remove + Add)                                              */
/* -------------------------------------------------------------------------- */

.ascently-row-remove {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 140ms, border-color 140ms, background-color 140ms;
    height: fit-content;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.ascently-row-remove:hover,
.ascently-row-remove:focus-visible {
    color: var(--warn);
    border-color: var(--warn);
    background: var(--warn-bg);
}

.ascently-row-add {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 20px;
    border-radius: 10px;
    transition: border-color 140ms, color 140ms, background-color 140ms,
                border-style 140ms;
    margin-top: 8px;
}

.ascently-row-add:hover,
.ascently-row-add:focus-visible {
    border-color: var(--accent-cyan);
    border-style: solid;
    color: var(--accent-cyan);
    background: var(--accent-cyan-bg);
}

/* -------------------------------------------------------------------------- */
/* Typeahead — FLOATING dropdown (critical fix vs. 2026-05-28 screenshot)     */
/* -------------------------------------------------------------------------- */

.ascently-typeahead-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    z-index: 100;
    background: transparent;
}

.ascently-typeahead-results:empty {
    display: none;
}

/* The medication search container also needs relative positioning so its
   floating dropdown anchors to the input rather than the page body. */
.ascently-typeahead-anchor {
    position: relative;
}

.ascently-typeahead-empty {
    padding: 12px 16px;
    color: var(--ink-muted);
    font-size: 13.5px;
    background: var(--surface-elev);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-style: italic;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ascently-typeahead-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-elev);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ascently-typeahead-item { margin: 0; padding: 0; }

.ascently-typeahead-item + .ascently-typeahead-item {
    border-top: 1px solid var(--line);
}

.ascently-typeahead-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--ink);
    text-align: left;
    padding: 10px 14px;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color 120ms;
    font-family: var(--sans);
}

/* The arrow-key handler moves focus onto the option row, so the active
   row must read as active on plain :focus, not only :focus-visible. A 10%
   cyan wash is far too weak to carry that on its own: the active row also
   takes an inset cyan rule down its leading edge. */
.ascently-typeahead-button:hover {
    background: var(--accent-cyan-bg);
}

.ascently-typeahead-button:focus,
.ascently-typeahead-button[aria-selected="true"] {
    background: var(--accent-cyan-bg);
    box-shadow: inset 3px 0 0 0 var(--accent-cyan);
    outline: none;
}

.ascently-typeahead-button:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
}

.ascently-typeahead-button--warn { border-left: 3px solid var(--warn); }

.ascently-typeahead-brand {
    color: var(--ink);
    font-weight: 600;
}

.ascently-typeahead-product {
    color: var(--ink-soft);
    font-size: 13px;
}

.ascently-typeahead-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--mono);
    margin-left: auto;
}

.ascently-typeahead-badge--top {
    background: var(--accent-cyan-bg);
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-soft);
}

.ascently-typeahead-badge--cert {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-soft);
}

.ascently-typeahead-badge--warn {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn);
}

/* A multi-ingredient label where the picked row screens one substance.
   Neutral, not alarming: the check is partial, not absent. */
.ascently-typeahead-badge--partial {
    background: transparent;
    color: var(--text-dim, #8a8f98);
    border: 1px solid var(--border, #2a2e35);
}

/* A product we cannot resolve к any substance-graph node. Deliberately
   reads as a refusal, not a warning: the row is not screenable at all. */
.ascently-typeahead-badge--unchecked {
    background: transparent;
    color: var(--text-dim, #8a8f98);
    border: 1px dashed var(--text-dim, #8a8f98);
}

/* Picked chip (after the user selects a catalog row). Replaces the
   floating dropdown content in-place. */
.ascently-typeahead-picked {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-cyan-bg);
    border: 1px solid var(--accent-cyan-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin-top: 8px;
}

.ascently-typeahead-picked-brand { color: var(--accent-cyan); font-weight: 600; }
.ascently-typeahead-picked-product { color: var(--ink-soft); flex: 1; }

.ascently-typeahead-picked-clear {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
}

.ascently-typeahead-picked-clear:hover,
.ascently-typeahead-picked-clear:focus-visible {
    color: var(--critical);
    border-color: var(--critical);
}

/* When the typeahead-results contains a picked chip (no list), we want
   it to sit in-flow rather than absolutely positioned, so the floating
   dropdown styling doesn't strand the chip off-screen on narrow viewports.
   The picked chip is .ascently-typeahead-picked; we de-float the parent
   in that case via :has() (supported in evergreen browsers since 2023).
*/
.ascently-typeahead-results:has(.ascently-typeahead-picked) {
    position: static;
    top: auto;
}

/* -------------------------------------------------------------------------- */
/* Dose-after-pick picked-card block (T43.3)                                  */
/*                                                                            */
/* The picked-card block is hidden by default (HTML hidden attribute) and     */
/* revealed by JS on catalog pick. Layout:                                    */
/*   - row-level container .ascently-stack-row-picked (grid-column full)     */
/*   - dark-surface card .ascently-picked-card (brand / product / entity +   */
/*     Change-selection button right-aligned)                                  */
/*   - dose grid .ascently-picked-dose-grid (number input + unit dropdown)   */
/*   - honest hint .ascently-picked-card-hint                                 */
/* -------------------------------------------------------------------------- */

.ascently-stack-row > .ascently-stack-row-picked {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.ascently-picked-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface-deep);
    border: 1px solid var(--accent-cyan-soft);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 10px;
    padding: 14px 18px;
}

.ascently-picked-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ascently-picked-card-icon {
    color: var(--accent-cyan);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 2px;
    flex: 0 0 auto;
}

.ascently-picked-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ascently-picked-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.ascently-picked-card-brand {
    color: var(--accent-cyan);
    font-weight: 700;
}

.ascently-picked-card-dash {
    color: var(--ink-muted);
    margin: 0 6px;
}

.ascently-picked-card-product {
    color: var(--ink);
}

.ascently-picked-card-entity {
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.ascently-picked-card-clear {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 140ms, border-color 140ms;
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: flex-start;
}

.ascently-picked-card-clear:hover,
.ascently-picked-card-clear:focus-visible {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.ascently-picked-dose-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 14px;
}

.ascently-label-required {
    color: var(--accent-cyan);
    margin-left: 2px;
}

.ascently-picked-card-hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--accent-amber-bg);
    border-left: 2px solid var(--accent-amber);
    padding: 8px 12px;
    border-radius: 4px;
    line-height: 1.45;
}

/* D1.2 — prefilled state. When the catalog SKU has structured per-
   serving doses (T44 re-ingest, 68% of catalog), we DO know the
   serving dose; the hint pivots from amber "we don't know" к cyan
   "label dose pre-filled" — still inviting edit. */
.ascently-picked-card-hint--prefilled {
    background: var(--accent-cyan-bg);
    border-left-color: var(--accent-cyan);
    color: var(--ink);
}

/* D1.5 — brand-trust badges. Recommended brands get a positive cyan
   tone; info-flag-only brands a neutral muted tone. De-listed
   brands are filtered out at the autocomplete layer so they never
   render. */
.ascently-typeahead-badge--brand-recommended {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-soft);
}

.ascently-typeahead-badge--brand-info {
    background: var(--accent-amber-bg);
    color: var(--accent-amber);
    border: 1px solid var(--accent-amber);
}

/* Narrow viewport: stack the dose grid vertically. */
@media (max-width: 600px) {
    .ascently-picked-dose-grid {
        grid-template-columns: 1fr;
    }
    .ascently-picked-card {
        flex-direction: column;
        align-items: stretch;
    }
    .ascently-picked-card-clear {
        align-self: flex-end;
    }
}

.ascently-alert-detail {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

/* -------------------------------------------------------------------------- */
/* Medication chips                                                            */
/* -------------------------------------------------------------------------- */

.ascently-medication-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    min-height: 4px;
}

.ascently-medication-tag,
.ascently-medication-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-elev);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px 10px 6px 14px;
    font-size: 13px;
    color: var(--ink);
}

.ascently-medication-tag-label,
.ascently-medication-chip-label {
    font-weight: 600;
    color: var(--accent-purple);
}

.ascently-medication-tag-class,
.ascently-medication-chip-class {
    color: var(--ink-muted);
    font-size: 12px;
    font-family: var(--mono);
}

.ascently-medication-tag-warn,
.ascently-medication-chip-warn {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--pending);
    border-radius: 4px;
    margin-left: 6px;
    font-family: var(--mono);
}

.ascently-medication-tag-remove,
.ascently-medication-chip-remove {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: rgba(167, 139, 250, 0.18);
    color: var(--accent-purple);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms, color 120ms;
}

.ascently-medication-tag-remove:hover,
.ascently-medication-tag-remove:focus-visible,
.ascently-medication-chip-remove:hover,
.ascently-medication-chip-remove:focus-visible {
    background: var(--critical-bg);
    color: var(--critical);
}

/* -------------------------------------------------------------------------- */
/* Radio group (life stage)                                                   */
/* -------------------------------------------------------------------------- */

.ascently-radio-group {
    border: 0;
    margin: 18px 0 0;
    padding: 0;
}

.ascently-radio {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    cursor: pointer;
}

.ascently-radio input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent-cyan);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Consent + Submit                                                           */
/* -------------------------------------------------------------------------- */

.ascently-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-purple);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.ascently-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--accent-cyan);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ascently-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ascently-submit {
    background: linear-gradient(120deg, var(--accent-cyan) 0%, #14b8d1 100%);
    color: #0a0e14;
    border: none;
    border-radius: 12px;
    padding: 16px 28px;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms, box-shadow 140ms;
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.25);
}

.ascently-submit:hover,
.ascently-submit:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35);
}

.ascently-submit:active { transform: translateY(0); }

.ascently-submit:disabled {
    background: var(--surface-elev);
    color: var(--ink-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.htmx-indicator {
    display: none;
    color: var(--accent-cyan);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    align-items: center;
    gap: 8px;
}

.htmx-indicator::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-cyan-soft);
    border-top-color: var(--accent-cyan);
    border-radius: 999px;
    animation: ascently-spin 0.8s linear infinite;
}

@keyframes ascently-spin {
    to { transform: rotate(360deg); }
}

.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.ascently-submit { filter: brightness(0.7); }

@media (prefers-reduced-motion: reduce) {
    .htmx-indicator::before {
        animation: none;
        border-color: var(--accent-cyan);
    }
}

/* -------------------------------------------------------------------------- */
/* Results                                                                    */
/* -------------------------------------------------------------------------- */

.ascently-results {
    margin-top: 48px;
    display: block;
}

.ascently-results:empty { display: none; }

.ascently-results-empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: 10px;
    padding: 22px 26px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

.ascently-results-empty-headline {
    margin: 0 0 8px 0;
    color: var(--ok);
    font-size: 17px;
}

.ascently-results-empty-headline strong {
    color: var(--ok);
}

/* -------------------------------------------------------------------------- */
/* D2.1 — Scorecard hero (shareable summary card at top of results)           */
/*                                                                            */
/* Screenshot-worthy hero card: counts, severity chip row, top-finding        */
/* callout, attribution footer. Sits at the top of the results area so a      */
/* user-shared screenshot is the scorecard, not the wall of cards.            */
/* -------------------------------------------------------------------------- */

.ascently-scorecard {
    background:
        radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.10), transparent 55%),
        radial-gradient(circle at 85% 100%, rgba(167, 139, 250, 0.08), transparent 55%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-elev) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.ascently-scorecard-headline {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ascently-scorecard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.ascently-scorecard-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.02em;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

.ascently-scorecard-chip-dot {
    font-size: 11px;
    line-height: 1;
}

/* -------------------------------------------------------------------- */
/* The four chips are four different OUTCOMES, so they are separated on  */
/* three axes at once: colour, shape/weight, and glyph. Under any of the */
/* colour-vision deficiencies -- and in a black-and-white print of the   */
/* page -- "consult a clinician" must still not read like "info".        */
/*                                                                       */
/*   consult  red      2px solid, square, 700, triangle                  */
/*   remove   rose     2px solid, square, 700, cross                     */
/*   switch   amber    1px solid, pill,   600, swap arrows               */
/*   info     cyan     1px dashed, pill,  500, circled i (from markup)   */
/*                                                                       */
/* The template ships the same filled dot for the first three buckets,   */
/* so the glyph is substituted here rather than in the markup; it is     */
/* aria-hidden decoration either way and the chip's own text ("3 consult */
/* clinician") remains the accessible name.                              */
/* -------------------------------------------------------------------- */
.ascently-scorecard-chip--consult {
    color: var(--critical);
    border: 2px solid var(--critical);
    background: var(--critical-bg);
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ascently-scorecard-chip--remove {
    color: var(--warn);
    border: 2px solid var(--warn);
    background: var(--warn-bg);
    border-radius: 6px;
    font-weight: 700;
}

.ascently-scorecard-chip--switch {
    color: var(--accent-amber);
    border: 1px solid var(--accent-amber);
    background: var(--accent-amber-bg);
    font-weight: 600;
}

.ascently-scorecard-chip--info {
    color: var(--accent-cyan);
    border: 1px dashed var(--accent-cyan-soft);
    background: var(--accent-cyan-bg);
    font-weight: 500;
}

.ascently-scorecard-chip--consult .ascently-scorecard-chip-dot,
.ascently-scorecard-chip--remove .ascently-scorecard-chip-dot,
.ascently-scorecard-chip--switch .ascently-scorecard-chip-dot {
    font-size: 0;
}

.ascently-scorecard-chip--consult .ascently-scorecard-chip-dot::before,
.ascently-scorecard-chip--remove .ascently-scorecard-chip-dot::before,
.ascently-scorecard-chip--switch .ascently-scorecard-chip-dot::before {
    font-size: 12px;
    line-height: 1;
}

.ascently-scorecard-chip--consult .ascently-scorecard-chip-dot::before {
    content: "\25B2";
}

.ascently-scorecard-chip--remove .ascently-scorecard-chip-dot::before {
    content: "\2715";
}

.ascently-scorecard-chip--switch .ascently-scorecard-chip-dot::before {
    content: "\21C4";
}

.ascently-scorecard-top-finding {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0 0;
    padding: 14px 18px;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 8px;
}

.ascently-scorecard-top-finding-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--accent-cyan);
    font-family: var(--mono);
}

.ascently-scorecard-top-finding-text {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.55;
}

.ascently-scorecard-footer {
    margin: 4px 0 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-muted);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ascently-scorecard-footer-brand {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Decorative, but still painted text: --line-strong measured 2.2:1. */
.ascently-scorecard-footer-sep {
    color: var(--ink-muted);
}

.ascently-scorecard-footer-url {
    color: var(--ink-soft);
}

/* -------------------------------------------------------------------------- */
/* D2.2 — Severity bucket sections                                            */
/*                                                                            */
/* Group issue cards by severity priority. Each section carries a heading     */
/* с count badge so a scan reveals the structure at a glance. The 10-card     */
/* cap surfaces an overflow <details> per section.                            */
/* -------------------------------------------------------------------------- */

.ascently-issues-section {
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ascently-issues-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    font-family: var(--mono);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.ascently-issues-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface-elev);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.ascently-issues-section--consult .ascently-issues-section-heading {
    color: var(--critical);
}

.ascently-issues-section--consult .ascently-issues-section-count {
    background: var(--critical-bg);
    border-color: var(--critical);
    color: var(--critical);
}

.ascently-issues-section--remove .ascently-issues-section-heading {
    color: var(--warn);
}

.ascently-issues-section--remove .ascently-issues-section-count {
    background: var(--warn-bg);
    border-color: var(--warn);
    color: var(--warn);
}

.ascently-issues-section--switch .ascently-issues-section-heading {
    color: var(--accent-amber);
}

.ascently-issues-section--switch .ascently-issues-section-count {
    background: var(--accent-amber-bg);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

.ascently-issues-section--info .ascently-issues-section-heading {
    color: var(--accent-cyan);
}

.ascently-issues-section--info .ascently-issues-section-count {
    background: var(--accent-cyan-bg);
    border-color: var(--accent-cyan-soft);
    color: var(--accent-cyan);
}

.ascently-issues-overflow {
    margin: 4px 0 0 0;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 8px 12px;
}

.ascently-issues-overflow > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 4px 0;
    list-style: none;
    user-select: none;
    transition: color 140ms;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ascently-issues-overflow > summary::-webkit-details-marker { display: none; }

.ascently-issues-overflow > summary::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    color: var(--accent-cyan);
    font-size: 11px;
    transition: transform 140ms;
}

.ascently-issues-overflow[open] > summary::before {
    transform: rotate(90deg);
}

.ascently-issues-overflow > summary:hover,
.ascently-issues-overflow > summary:focus-visible {
    color: var(--ink);
}

.ascently-issues-overflow > ul {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------- */
/* D2.3 — "Most people don't know this" eyebrow                               */
/*                                                                            */
/* Subtle insight label on absorption / timing / antagonism cards so they     */
/* read as discoveries rather than warnings. One subtle treatment — small     */
/* font, muted color, light-bulb glyph aria-hidden.                           */
/* -------------------------------------------------------------------------- */

.ascently-issue-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--accent-purple);
    font-family: var(--mono);
    align-self: flex-start;
}

.ascently-issue-eyebrow-icon {
    font-size: 13px;
}

.ascently-issue--surprising {
    border-left-color: var(--accent-purple);
}

.ascently-results-heading {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.ascently-results-subheading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-muted);
    margin: 40px 0 16px 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.ascently-results-summary {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0 0 24px 0;
    max-width: 760px;
}

/* -------------------------------------------------------------------------- */
/* Issue / Rule cards (severity-coded)                                        */
/* -------------------------------------------------------------------------- */

.ascently-issues {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ascently-issue {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent-cyan);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ascently-issue--info {
    border-left-color: var(--accent-cyan);
}

.ascently-issue--switch {
    border-left-color: var(--accent-amber);
}

.ascently-issue--remove {
    border-left-color: var(--warn);
}

.ascently-issue--consult-clinician {
    border-left-color: var(--critical);
}

.ascently-issue--warning {
    border-left-color: var(--accent-amber);
}

.ascently-issue--high-concern {
    border-left-color: var(--critical);
}

.ascently-issue-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ascently-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    line-height: 1.4;
    font-family: var(--mono);
}

.ascently-badge--info {
    background: var(--accent-cyan-bg);
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-soft);
}

.ascently-badge--warning,
.ascently-badge--switch {
    background: var(--accent-amber-bg);
    color: var(--accent-amber);
    border: 1px solid var(--accent-amber-soft);
}

.ascently-badge--remove {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn);
}

/* --critical as TEXT on --critical-bg over --surface measures 4.2:1 --
   under the AA floor for a 10.5px badge. The fill and the border keep the
   saturated red (they are UI, 3:1); the label steps up to the lighter red
   text tone, which is how the rest of the *-ink pairs work. */
.ascently-badge--high-concern,
.ascently-badge--consult-clinician {
    background: var(--critical-bg);
    color: var(--crit-ink);
    border: 1px solid var(--critical);
}

.ascently-issue-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.ascently-issue-affected {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.55;
}

.ascently-issue-affected code,
.ascently-issue-rationale code,
.ascently-pmid-citation {
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ink);
    /* Rule ids run long (RULE_ABSORPTION_COMPETITION_V13_033_ZINC_MAGNESIUM)
       and a monospace token with no break opportunity pushed the whole
       document 21px wider than a 375px viewport. The identifier wraps
       inside its card rather than the page scrolling sideways. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* D1.6 — Tier-3 honest-framing card. Surfaces the explicit
   "insufficient RCT evidence; information not recommendation" banner
   inside every Tier-3 issue card. Sits visually distinct from the
   rule's own rationale text below it so the user reads the framing
   first. Neutral cyan tone — not amber/red — because Tier-3 is not
   a "danger" signal; it is an "evidence ceiling" signal. */
/* Tier 3 is an admission that the evidence is thin. Rendered in the brand
   cyan it read as a feature badge -- an award for being under-evidenced.
   It now reads as a footnote: the card keeps its SEVERITY colour on the
   left rail and only switches that rail to a DASHED line, an orthogonal
   "the evidence behind this is broken" signal that survives greyscale.
   The badge and the framing note drop to plain ink on no fill.
   Still >= 13px at 8.5:1 -- quiet is not the same as unreadable. */
.ascently-issue--tier3 {
    border-left-style: dashed;
}

.ascently-badge--tier3 {
    background: transparent;
    color: var(--ink-soft);
    border: 1px dashed var(--ink-muted);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.ascently-tier3-framing {
    background: transparent;
    border-left: 2px dashed var(--ink-muted);
    border-radius: 0;
    padding: 4px 0 4px 14px;
    margin: 6px 0;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

.ascently-tier3-framing strong {
    color: var(--ink);
    font-weight: 600;
}

/* D1.3 — per-item UL warning surface. Empty по default; HTMX swaps
   in the populated card on dose change. The card carries an explicit
   threshold + rationale + PMIDs (clickable per D1.4); the colour-
   coding distinguishes approaching (amber) from exceeded (red). */
.ascently-item-ul-warning {
    margin: 10px 0 0 0;
}

.ascently-item-ul-warning[data-state="safe"] {
    display: none;
}

.ascently-item-ul-warning--approaching,
.ascently-item-ul-warning--exceeded {
    display: block;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
}

.ascently-item-ul-warning--approaching {
    background: var(--accent-amber-bg);
    border-left: 4px solid var(--accent-amber);
    color: var(--ink);
}

.ascently-item-ul-warning--exceeded {
    background: var(--warn-bg);
    border-left: 4px solid var(--warn);
    color: var(--ink);
}

.ascently-item-ul-warning-header {
    margin: 0 0 6px 0;
    color: var(--ink);
}

.ascently-item-ul-warning-why {
    margin: 0 0 6px 0;
    color: var(--ink-soft);
}

.ascently-item-ul-warning-rule-id {
    margin: 6px 0 0 0;
    font-size: 12.5px;
    color: var(--ink-muted);
}

/* D1.4 — clickable PubMed links. Distinguishable from inert <code>
   pmid citations: cyan accent + underline на hover. The visited
   state is preserved (no -*::visited override) so the user can see
   which citations they've already opened. */
a.ascently-pmid-link {
    text-decoration: none;
    color: var(--accent-cyan);
    border-color: var(--accent-cyan-soft);
    cursor: pointer;
    display: inline-block;
}

a.ascently-pmid-link:hover,
a.ascently-pmid-link:focus-visible {
    background: var(--accent-cyan-bg);
    text-decoration: underline;
}

a.ascently-pmid-link:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-cyan);
}

.ascently-issue-evidence {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 6px 0 0 0;
    line-height: 1.55;
}

/* D1.4 — explicit "no citation" honest gap. Muted tone so it reads
   as an acknowledged absence rather than a warning; brand voice says
   we don't bury the gap, we name it. */
.ascently-issue-evidence--missing {
    color: var(--ink-muted);
}

.ascently-pmid-missing {
    font-style: italic;
    color: var(--ink-muted);
}

.ascently-issue-rationale {
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
    font-size: 15px;
}

.ascently-issue-action {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.55;
}

.ascently-issue-action strong {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* ADR 0014 §A.3 — the action on an UNREVIEWED rule is our routing sentence,
   not the rule's signed imperative. It keeps the same box so the card's shape
   does not change with review state (a reader must not learn to read "thin
   card = unreviewed"), but the label loses the cyan accent: this is a handoff,
   not an instruction we stand behind. */
.ascently-issue-action--unreviewed strong {
    color: var(--ink-soft);
}

/* -------------------------------------------------------------------------- */
/* ADR 0015 / ADR 0012 D6+D8 / ADR 0014 §A — evidence + review metadata        */
/*                                                                            */
/* Two visual registers, deliberately unlike each other:                      */
/*                                                                            */
/*   .ev-chip  — a CHIP. Pill, mono, uppercase, tinted. It carries one of the */
/*               four ADR 0015 labels and nothing else. A chip is a claim      */
/*               about what kind of evidence exists, so D8(b) forbids one on   */
/*               an edge with no corpus record — the template omits it there,  */
/*               there is no "unverified" chip variant to fall back to.        */
/*                                                                            */
/*   .ev-meta  — QUIET METADATA. 13px, muted ink, no fill, no border-radius,   */
/*               no uppercase. The review-status line and the certainty line   */
/*               live here. They must never read as badges: a "not yet         */
/*               reviewed" badge would compete with the severity badge on the  */
/*               same card and turn a disclosure into an alarm.                */
/*                                                                            */
/* Contrast on --surface (#161b22): --ink-muted 5.6:1 at 13px — clears WCAG   */
/* AA 1.4.3 for normal text. Dark theme is the only theme here; every token    */
/* below is from the canonical palette, and no new font is introduced.         */
/* -------------------------------------------------------------------------- */

.ev-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--held-bg);
    color: var(--held-ink);
}

.ev-chip--t1 {
    background: var(--proven-bg);
    color: var(--proven-ink);
    border-color: rgba(74, 222, 128, 0.26);
}

.ev-chip--t2 {
    background: var(--cond-bg);
    color: var(--cond-ink);
    border-color: rgba(251, 191, 36, 0.26);
}

/* tier_3 is not a warning and not an award — it is a stated absence. Held grey,
   dashed edge, the same "the evidence behind this is thin" signal the Tier-3
   card rail uses, and it survives greyscale. */
.ev-chip--t3 {
    background: transparent;
    color: var(--ink-soft);
    border: 1px dashed var(--ink-muted);
    font-weight: 500;
}

/* proven-null keeps the reserved red: "tested and found nothing" is the
   loudest thing the Negative Recommender says. */
.ev-chip--proven-null {
    background: var(--crit-bg);
    color: var(--crit-ink);
    border-color: rgba(239, 68, 68, 0.32);
}

.ev-meta {
    display: block;
    margin: 6px 0 0 0;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    background: none;
    border: 0;
    padding: 0;
}

/* The reviewer's verbatim sentence is a qualification of the card above it, so
   it gets a rail to attach it visually — dashed, muted, never a coloured fill. */
.ev-meta--caveat {
    border-left: 2px dashed var(--line-strong);
    padding-left: 11px;
    color: var(--ink-soft);
}

/* ADR 0015 / ADR 0014 §A: certainty and review-status are quiet metadata.
   Same voice as .ev-meta; the review line gets a hairline rail so it reads as a
   provenance note, never as a badge. */
.ev-meta--certainty {
    color: var(--ink-muted);
    font-style: normal;
}
.ev-meta--review {
    border-left: 2px solid var(--line-strong);
    padding-left: 11px;
    color: var(--ink-soft);
}
.ev-meta--caveat .ev-meta-label {
    color: var(--ink-soft);
    font-weight: 600;
}

/* --------------------------------------------------------------- */
/* Science Core section: the same four labels, that surface's chip.  */
/* --------------------------------------------------------------- */
.sc-badge-t--t2 {
    background: var(--cond-bg);
    color: var(--cond-ink);
}

.sc-badge-t--t3 {
    background: transparent;
    color: var(--ink-soft);
    border: 1px dashed var(--ink-muted);
}

.sc-badge-t--proven-null {
    background: var(--crit-bg);
    color: var(--crit-ink);
}

/* -------------------------------------------------------------------------- */
/* Medication panel accordion                                                 */
/* -------------------------------------------------------------------------- */

.ascently-med-panels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ascently-med-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-purple);
    border-radius: 10px;
    overflow: hidden;
}

.ascently-med-panel-accordion { background: transparent; }

.ascently-med-panel-accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    transition: background-color 140ms;
    user-select: none;
}

.ascently-med-panel-accordion > summary::-webkit-details-marker { display: none; }

/* The disclosure marker is drawn as a control -- a bordered, filled
   chevron button -- so a collapsed panel reads as openable rather than as
   a heading that happens to have an arrow next to it. */
.ascently-med-panel-accordion > summary::before {
    content: "▸";
    color: var(--accent-purple);
    margin-right: 4px;
    transition: transform 140ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--accent-purple-soft);
    border-radius: 6px;
    background: var(--accent-purple-bg);
    font-size: 11px;
    line-height: 1;
}

/* The summary itself is the interactive element, so its keyboard ring is
   drawn inset on the panel edge (the panel clips overflow). */
.ascently-med-panel-accordion > summary:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -3px;
    background: var(--accent-purple-bg);
}

/* The summary carries .ascently-med-panel-header in the markup; the class
   holds the layout so the rule survives a change of element. */
.ascently-med-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ascently-med-panel-accordion[open] > summary::before {
    transform: rotate(90deg);
}

.ascently-med-panel-accordion > summary:hover,
.ascently-med-panel-accordion > summary:focus-visible {
    background: var(--accent-purple-bg);
}

.ascently-med-panel-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.ascently-med-panel-class {
    font-size: 12.5px;
    font-family: var(--mono);
    color: var(--ink-muted);
}

.ascently-med-panel-count {
    margin-left: auto;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--accent-purple);
    background: var(--accent-purple-bg);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--accent-purple-soft);
}

.ascently-med-panel-body {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ascently-med-panel-intersection {
    background: var(--warn-bg);
    border-left: 2px solid var(--warn);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 12px 0;
}

.ascently-med-panel-intersection strong { color: var(--warn); }

.ascently-med-panel-all { margin: 0; }
.ascently-med-panel-all strong { color: var(--ink); }

.ascently-med-panel-body code {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ink);
    margin: 0 2px;
    display: inline-block;
}

/* -------------------------------------------------------------------------- */
/* Decision Acceptance                                                        */
/* -------------------------------------------------------------------------- */

.ascently-decision {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ascently-decision-prompt {
    margin: 0 0 14px 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.ascently-decision-options {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ascently-decision-option {
    flex: 1 1 14rem;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 14px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms, color 140ms, border-color 140ms;
    font-family: var(--sans);
    display: inline-block;
}

.ascently-decision-option:hover,
.ascently-decision-option:focus-visible {
    background: var(--accent-cyan-bg);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

/* The footer carries the DSHEA disclaimer and the data-handling lines.
   That is legally load-bearing text, not fine print: 13px at 8.5:1. */
.ascently-footer {
    margin-top: 80px;
    padding: 32px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
    background: var(--surface-deep);
}

.ascently-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ascently-footer p {
    margin: 0 0 8px 0;
}

.ascently-footer a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: border-bottom-color 140ms;
    border-bottom: 1px solid transparent;
}

.ascently-footer a:hover,
.ascently-footer a:focus-visible {
    border-bottom-color: var(--accent-cyan);
}

/* A12b — the legal link row. Same 13px as the paragraphs above it: these are
   the documents a reader is entitled to find, not a colophon. */
.ascently-footer-legal {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.ascently-footer-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.ascently-footer-legal-item + .ascently-footer-legal-item {
    position: relative;
}

.ascently-footer-legal-item + .ascently-footer-legal-item::before {
    content: "\00b7";
    position: absolute;
    left: -11px;
    color: var(--ink-muted);
}

/* -------------------------------------------------------------------------- */
/* A12b — published legal documents (/privacy, /terms, /disclaimer,           */
/* /privacy/washington)                                                       */
/*                                                                            */
/* One measure-constrained prose column. The type is DELIBERATELY the body    */
/* size, not the small size the rest of the app uses for metadata: a privacy  */
/* policy set in 13px is a privacy policy nobody reads, and "nobody read it"  */
/* is the failure mode these pages exist to avoid.                            */
/* -------------------------------------------------------------------------- */

.ascently-header--compact {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.ascently-doc-eyebrow {
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.ascently-doc-eyebrow a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.ascently-legal-doc {
    max-width: 74ch;
    margin: 32px auto 64px auto;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.7;
}

.ascently-legal-doc h1 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ascently-legal-doc h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 36px 0 12px 0;
}

.ascently-legal-doc h3 {
    font-size: 17px;
    margin: 28px 0 10px 0;
}

.ascently-legal-doc p,
.ascently-legal-doc li {
    margin: 0 0 14px 0;
}

.ascently-legal-doc ul,
.ascently-legal-doc ol {
    margin: 0 0 16px 0;
    padding-left: 22px;
}

.ascently-legal-doc a {
    color: var(--accent-cyan);
}

.ascently-legal-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}

.ascently-legal-doc pre {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
    overflow-x: auto;
}

.ascently-legal-doc pre code {
    background: none;
    border: 0;
    padding: 0;
}

.ascently-legal-doc blockquote {
    margin: 0 0 16px 0;
    padding-left: 16px;
    border-left: 3px solid var(--line);
    color: var(--ink-soft);
}

.ascently-legal-doc hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 28px 0;
}

/* An unresolved {{PLACEHOLDER}}. Dev-only by construction — the app refuses to
   start outside dev with either value unset — so it is styled to be impossible
   to skim past rather than to look presentable. */
.ascently-legal-doc .legal-unset,
mark.legal-unset {
    background: #7f1d1d;
    color: #fee2e2;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

/* -------------------------------------------------------------------------- */
/* Accessibility helpers + alerts                                             */
/* -------------------------------------------------------------------------- */

.ascently-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ascently-alert {
    background: var(--critical-bg);
    border: 1px solid var(--critical);
    border-left: 4px solid var(--critical);
    color: var(--ink);
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
}

.ascently-alert code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--surface-deep);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Focus ring (keyboard navigation discipline) for buttons + links lacking
   an explicit focus style above. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ascently-header { padding: 36px 20px 28px; }
    .ascently-nav { padding: 10px 16px; }
    main { padding: 28px 20px 64px; }
    .ascently-footer { padding: 24px 20px; }

    .ascently-brand { font-size: 30px; }
    .ascently-tagline { font-size: 15.5px; }
    .ascently-section-title { font-size: 22px; }
    .ascently-results-heading { font-size: 20px; }
    .ascently-section-lede,
    .ascently-fieldset-help,
    .ascently-intro { font-size: 15px; }

    .ascently-manual-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ascently-stack-row {
        grid-template-columns: 1fr;
        padding: 18px 18px;
    }
    .ascently-stack-row > .ascently-row-remove {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: end;
        align-self: flex-start;
        width: auto;
    }

    .ascently-field-row {
        grid-template-columns: 1fr;
    }

    .ascently-decision-options { flex-direction: column; }
}

@media (max-width: 480px) {
    .ascently-manual-grid { grid-template-columns: 1fr; }
    .ascently-med-panel-count {
        margin-left: 0;
    }
}

/* D2.6 — 375px (iPhone SE) mobile baseline.
   The 900px breakpoint above handles tablet ←→ mobile. This block
   tightens spacing AND ensures the scorecard chips wrap, cards are
   full-width, the typeahead dropdown stays usable, и nav pills are
   tappable on a 375px viewport. */
@media (max-width: 480px) {
    .ascently-header { padding: 28px 16px 22px; }
    .ascently-nav { padding: 8px 12px; }
    main { padding: 22px 16px 56px; }
    .ascently-footer { padding: 22px 16px; }

    .ascently-brand { font-size: 26px; line-height: 1.2; }
    .ascently-tagline { font-size: 14.5px; }
    .ascently-meta { font-size: 11.5px; }
    .ascently-section-title { font-size: 20px; }
    .ascently-results-heading { font-size: 18px; }

    /* Scorecard packs tighter on a phone. */
    .ascently-scorecard {
        padding: 20px 18px;
        gap: 12px;
        border-radius: 12px;
    }
    .ascently-scorecard-headline {
        font-size: 19px;
        line-height: 1.3;
    }
    .ascently-scorecard-chips {
        gap: 6px;
    }
    .ascently-scorecard-chip {
        font-size: 12px;
        padding: 5px 10px;
    }
    .ascently-scorecard-top-finding {
        padding: 12px 14px;
    }
    .ascently-scorecard-top-finding-text {
        font-size: 14px;
    }
    .ascently-scorecard-footer {
        font-size: 11px;
    }

    /* Section heading wraps gracefully under the count badge. */
    .ascently-issues-section-heading {
        font-size: 12.5px;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Issue card padding tightens. */
    .ascently-issue {
        padding: 16px 18px;
        border-radius: 8px;
    }
    .ascently-issue-rationale {
        font-size: 14px;
    }
    .ascently-issue-action {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Form field row stacks vertically. */
    .ascently-field-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Stack row consumes the full width with tighter padding. */
    .ascently-stack-row {
        padding: 16px 14px;
        border-radius: 10px;
    }

    /* Submit button + indicator stack vertically on phone. */
    .ascently-submit-row {
        gap: 10px;
    }
    .ascently-submit {
        width: 100%;
        padding: 14px 22px;
        font-size: 16px;
    }
    .htmx-indicator {
        align-self: flex-start;
    }

    /* Example button stays compact but full-width on phone for a
       prominent tap target. */
    .ascently-example-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ascently-example-button {
        width: 100%;
    }
    .ascently-example-hint {
        font-size: 12.5px;
    }

    /* Typeahead dropdown caps к viewport-relative height so it fits
       inside a 667px-tall iPhone SE screen without scrolling the page. */
    .ascently-typeahead-list {
        max-height: 220px;
    }

    /* Sticky nav pills compress; horizontal scroll fallback keeps all
       five links reachable on a narrow phone. */
    .ascently-nav-inner {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ascently-nav-inner::-webkit-scrollbar {
        display: none;
    }
    .ascently-nav-link {
        font-size: 12px;
        padding: 5px 10px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Decision options keep stacked layout from the 900px block; bump
       padding slightly so they remain tappable. */
    .ascently-decision { padding: 18px 16px; }
    .ascently-decision-option { padding: 12px 16px; }
}

/* ------------------------------------------------------------------ */
/* Absurd-dose client-side validation (T43.2, 2026-05-28).            */
/*                                                                    */
/* Inline per-row warning shown when a user enters a dose that, after */
/* unit normalization, exceeds 10 g (warn) or 100 g (block submit).   */
/* The server-side cowork_engine.detect_absurd_dose check is the      */
/* authoritative gate; this surface gives immediate UI feedback.      */
/* ------------------------------------------------------------------ */

.ascently-input-warning {
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--pending);
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    font-family: var(--mono);
}

.ascently-input-warning--block {
    color: var(--critical);
    background: var(--critical-bg);
    border-color: var(--critical);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* SUPP.AI pending-clinical-review section (Session α — 2026-05-29)
   Visually distinct from the curated voice-verified rule cards so the
   user understands the provenance / review-status difference. Reuses
   the existing ascently-issue dark-theme card pattern (T43.1
   preservation) и augments с a "pending sign-off" heading + notice. */
/* ------------------------------------------------------------------ */

.ascently-suppai-pending-heading {
    margin-top: 32px;
    padding: 10px 14px;
    border-left: 3px solid var(--pending, #f59e0b);
    background: rgba(245, 158, 11, 0.06);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ascently-suppai-pending-notice {
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px dashed rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.04);
    color: var(--muted, #94a3b8);
    font-size: 13px;
    line-height: 1.5;
    border-radius: 6px;
}

.ascently-suppai-pending-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ascently-suppai-pending-card {
    border-left-style: dashed;
}

.ascently-issue--high {
    border-left-color: var(--critical);
}

.ascently-issue--moderate {
    border-left-color: var(--accent-amber, #f59e0b);
}

.ascently-issue--low {
    border-left-color: var(--accent-cyan);
}

.ascently-badge--high {
    background: var(--critical-bg);
    color: var(--critical);
    border: 1px solid var(--critical);
}

.ascently-badge--moderate {
    background: rgba(245, 158, 11, 0.10);
    color: var(--pending, #f59e0b);
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.ascently-badge--low {
    background: var(--accent-cyan-bg);
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-soft);
}


/* ========================================================================== */
/* TWO-SURFACE RESULTS  (ASCENTLY_STACK_AUDIT_ENGINE=graph)                   */
/*                                                                            */
/* audit_results_two_surface.html renders two deliberately unlike surfaces:   */
/*                                                                            */
/*   1. SAFETY / INTERACTION  — graph-engine fires, verified citations,       */
/*      severity-bucketed. Reuses the .ascently-issue card system above, so   */
/*      it inherits the severity rails and badges unchanged.                  */
/*   2. OPTIMIZATION TIPS     — the citation-free legacy (O) rules. These     */
/*      are NOT safety findings, and the styling has to say so before the     */
/*      user reads a word: no severity rail, no evidence chrome, a flatter    */
/*      card and a dotted rather than solid leading edge.                     */
/*                                                                            */
/* Nothing in this block may make surface 2 look like surface 1.              */
/* ========================================================================== */

.ascently-safety-surface {
    display: block;
    margin: 0 0 40px 0;
}

/* --------------------------------------------------------------------------
   Unresolved input.

   These are the medications / supplements the engine could not resolve to a
   graph node, so they were never screened. That is OUR coverage gap, not a
   user error: the tone is a calm disclosure — neutral grey rail, no amber,
   no red, no alert iconography — but it is a full-size, full-contrast
   paragraph, because a gap the user cannot read is a gap we hid.
   -------------------------------------------------------------------------- */

.ascently-medications-unresolved,
.ascently-supplements-unresolved {
    margin: 20px 0 0 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-muted);
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ascently-medications-unresolved strong,
.ascently-supplements-unresolved strong {
    color: var(--ink);
    font-weight: 600;
}

.ascently-medications-unresolved code,
.ascently-supplements-unresolved code {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ink);
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Surface 2 — optimization tips.
   -------------------------------------------------------------------------- */

.ascently-optimization-tips {
    display: block;
    margin: 0 0 40px 0;
}

.ascently-optimization-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The separation notice is the contract with the reader: these are not
   safety warnings and they are not personalised. Dashed border = "aside". */
.ascently-optimization-notice {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--surface-deep);
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
}

.ascently-optimization-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Flatter than .ascently-issue on purpose: dotted leading edge, no severity
   colour, no shadow. A tip must never be mistaken for a safety flag. */
.ascently-optimization-tip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px dotted var(--line-strong);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Condition disclaimers + the unconditional scope footer.

   Legally load-bearing text. Neither is "the small print": both sit at 14px
   with --ink-soft (8.5:1 on --surface, 9.0:1 on --surface-deep), i.e. above
   the WCAG AA floor rather than at it. The list markers are drawn rules
   rather than generated characters so a screen reader is not made to read
   punctuation between items.
   -------------------------------------------------------------------------- */

.ascently-condition-disclaimers {
    display: block;
    margin: 0 0 32px 0;
}

.ascently-condition-disclaimer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ascently-condition-disclaimer {
    position: relative;
    padding-left: 22px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ascently-condition-disclaimer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 12px;
    height: 1px;
    background: var(--ink-muted);
}

.ascently-scope-footer {
    display: block;
    margin: 0 0 32px 0;
    padding: 20px 24px;
    background: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ascently-scope-footer-heading {
    margin: 0 0 12px 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.ascently-scope-footer-heading strong {
    font-weight: 700;
    color: var(--ink);
}

.ascently-scope-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ascently-scope-footer-item {
    position: relative;
    padding-left: 22px;
}

.ascently-scope-footer-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 12px;
    height: 1px;
    background: var(--ink-muted);
}

.ascently-scope-footer-closer {
    margin: 14px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Tier-labelled citations (safety surface only).

   The adapter labels every citation by tier — gov / society / regulatory /
   info-surface — and a society or regulatory source must NEVER be styled to
   look like a gov PubMed link. So this is deliberately the visual opposite
   of a.ascently-pmid-link: no cyan, no underline, no pointer cursor, and a
   dashed chip border that reads as a stamp rather than a destination.
   -------------------------------------------------------------------------- */

.ascently-citation-tier {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--surface-deep);
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    padding: 1px 7px;
    text-decoration: none;
    cursor: default;
}

@media (max-width: 480px) {
    .ascently-scope-footer {
        padding: 16px 16px;
        border-radius: 10px;
    }

    .ascently-optimization-tip {
        padding: 14px 16px;
    }

    .ascently-medications-unresolved,
    .ascently-supplements-unresolved {
        padding: 12px 14px;
    }
}

/* ========================================================================== */
/* SCIENCE CORE — "Does it actually work?" (sc-*)                             */
/*                                                                            */
/* Ported from the sheet commit 67b9c47 introduced, re-pointed at the dark    */
/* palette through the alias layer at the top of this file. One deliberate    */
/* change: headings use --sans rather than --serif, because the Stack Audit   */
/* surface is set in one face and a serif display face here read as a         */
/* different product bolted onto the page. Semantics are untouched — the      */
/* proven / doesn't-work / conditional / withheld distinction, and the        */
/* ADR 0012 D6(b) certainty-not-rated disclosure, render exactly as before.   */
/* ========================================================================== */

.sc-section {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sc-lead {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin: 20px 0 2px;
}

.sc-lead h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.sc-ct {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.sc-card {
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 19px 22px;
}

.sc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--hair);
}

.sc-card-head h3 {
    margin: 0;
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: var(--ink);
}

.sc-tallies {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sc-tal {
    font-size: 11px;
    font-family: var(--mono);
    padding: 3px 9px;
    border-radius: 100px;
    font-weight: 600;
    white-space: nowrap;
}

.sc-tal.p { background: var(--proven-bg); color: var(--proven-ink); }
.sc-tal.c { background: var(--cond-bg); color: var(--cond-ink); }
.sc-tal.h { background: var(--held-bg); color: var(--held-ink); }

.sc-grp { padding: 15px 0 3px; }
.sc-grp + .sc-grp { border-top: 1px solid var(--hair); }

.sc-grp-h {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sc-grp-lead {
    font-weight: 600;
    font-size: 13px;
}

.sc-sq {
    width: 9px;
    height: 9px;
    border-radius: 2.5px;
}

.sc-grp.p .sc-sq { background: var(--proven); }
.sc-grp.c .sc-sq { background: var(--cond); }
.sc-grp.h .sc-sq { background: var(--held); }

.sc-cap {
    font-size: 12px;
    color: var(--muted);
}

.sc-eff {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px dotted var(--hair);
}

.sc-eff:last-child { border-bottom: none; }

.sc-o {
    text-transform: capitalize;
    font-size: 14.5px;
}

.sc-o .sc-g {
    display: block;
    font-size: 11px;
    color: var(--faint);
    font-family: var(--mono);
    margin-top: 1px;
}

/* ADR 0012 D6(b) — the certainty line states that no source rated it; it is
   a disclosure, not a grade, so it must not read as a confidence badge. */
.sc-o .sc-unrated {
    cursor: help;
    border-bottom: 1px dotted var(--faint);
}

/* The estimate is the payload of the row, so it is allowed to wrap rather
   than to overflow: a full "-1.65 days (mean difference) (95% CI -2.5 to
   -0.81) Tier 2" is wider than the 44% column it is given on a tablet, and
   `white-space: nowrap` pushed it past the viewport edge. */
.sc-v {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--proven-ink);
    text-align: right;
    white-space: normal;
    font-variant-numeric: tabular-nums;
    flex: 0 1 auto;
    max-width: 56%;
}

/* ADR 0015 labels are sentences, not one-word grades, so the chip grew from
   9.5px/nowrap to 10px with room to sit on its own line on a narrow card. The
   default fill stays green because tier_1 is the default case; the
   `--t2 / --t3 / --proven-null` modifiers override it. */
.sc-badge-t {
    display: inline-block;
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--proven-bg);
    color: var(--proven-ink);
    margin-left: 6px;
    vertical-align: 1px;
    white-space: nowrap;
}

.sc-eff.sc-cond .sc-o small {
    color: var(--cond-ink);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: none;
}

.sc-held-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sc-held-item {
    font-size: 13px;
    text-transform: capitalize;
    color: var(--held-ink);
    background: var(--held-bg);
    border-radius: 7px;
    padding: 5px 10px;
}

.sc-none {
    background: var(--held-bg);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--held);
    border-radius: 12px;
    padding: 15px 18px;
}

.sc-none h3 {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--ink);
}

.sc-none p {
    margin: 0;
    color: var(--held-ink);
    font-size: 14px;
}

/* "Doesn't work" — evidence OF absence. Deliberately the loudest thing on
   the evidence surface: it is the counter-positioning ("we tell you when to
   stop"), and it must never read like the grey "withheld / we don't know"
   group. Sits inside the evidence section, not the safety section. */
.sc-tal.n { background: var(--crit-bg); color: var(--crit-ink); }
.sc-grp.n .sc-sq { background: var(--crit); }

.sc-eff.sc-null .sc-o {
    color: var(--ink);
    text-decoration: line-through;
    text-decoration-color: var(--crit);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.sc-nullv {
    color: var(--crit-ink);
    font-weight: 700;
}

.sc-eff.sc-null .sc-v {
    color: var(--crit-ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: flex-end;
}

.sc-eff.sc-null .sc-v .sc-g {
    display: inline;
    font-size: 11px;
    color: var(--faint);
    font-family: var(--mono);
    margin-top: 0;
}

.sc-null-note {
    margin: 9px 0 2px;
    font-size: 12.5px;
    color: var(--crit-ink);
    font-weight: 600;
}

/* The effect row is a two-column ledger (outcome | number) held on one line
   by `white-space: nowrap` on the value. A full estimate -- "-1.65 days
   (mean difference) (95% CI -2.5 to -0.81) Tier 2" -- is wider than a phone,
   so below 600px the row becomes two stacked lines instead of pushing the
   document 220px wide of the viewport. Measured on the 375px baseline. */
@media (max-width: 600px) {
    .sc-eff {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .sc-v,
    .sc-eff.sc-null .sc-v {
        max-width: 100%;
        text-align: left;
        white-space: normal;
        justify-content: flex-start;
    }

    .sc-card {
        padding: 16px 16px;
        border-radius: 12px;
    }

    .sc-lead h2 { font-size: 20px; }
    .sc-card-head h3 { font-size: 19px; }
}

/* ========================================================================== */
/* PDF export bar (rendered from routers/ui.py, top of the results area)      */
/* ========================================================================== */

.sa-pdf-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.sa-pdf-note {
    font-size: 13px;
    color: var(--ink-soft);
    margin-right: auto;
    letter-spacing: 0.01em;
}

/* Matches .ascently-submit: cyan fill, near-black label (10.4:1). The
   previous --ground-on---accent pairing measured 3.5:1 and failed AA. */
.sa-pdf-btn {
    appearance: none;
    cursor: pointer;
    font: 600 14px/1 var(--sans);
    color: #0a0e14;
    background: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    border-radius: 8px;
    padding: 11px 18px;
    transition: transform 60ms ease, filter 120ms ease;
}

.sa-pdf-btn:hover { filter: brightness(1.08); }
.sa-pdf-btn:active { transform: translateY(1px); }

.sa-pdf-btn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .sa-pdf-bar { flex-wrap: wrap; }
    .sa-pdf-note { margin-right: 0; width: 100%; }
    .sa-pdf-btn { width: 100%; }
}

/* ========================================================================== */
/* Print                                                                      */
/*                                                                            */
/* A printed or PDF-exported audit is the artefact a user takes to a          */
/* pharmacist, so it has to survive the trip: ink on paper, every severity    */
/* still separable without colour (the chips keep their border weight and     */
/* their glyph), and every citation link resolved to its URL. Tokens are      */
/* re-pointed for print rather than every rule being re-declared.             */
/* ========================================================================== */

@media print {
    :root {
        color-scheme: light;

        --bg: #ffffff;
        --surface: #ffffff;
        --surface-elev: #ffffff;
        --surface-deep: #f6f7f9;
        --ink: #101418;
        --ink-soft: #333b44;
        --ink-muted: #4d5763;
        --line: #c3cad2;
        --line-strong: #98a1ab;

        --accent-cyan: #0b6070;
        --accent-cyan-soft: #0b6070;
        --accent-cyan-bg: transparent;
        --accent-amber: #7a5610;
        --accent-amber-soft: #7a5610;
        --accent-amber-bg: transparent;
        --accent-purple: #453398;
        --accent-purple-soft: #453398;
        --accent-purple-bg: transparent;
        --ok: #1c5836;
        --ok-soft: #1c5836;
        --ok-bg: transparent;
        --pending: #7a5610;
        --critical: #99201f;
        --critical-bg: transparent;
        --warn: #98165f;
        --warn-bg: transparent;
        --shadow: none;
    }

    html,
    body {
        background: #ffffff;
        color: #101418;
    }

    .ascently-header {
        background: none;
        border-bottom: 1px solid #c3cad2;
    }

    /* Interactive chrome carries no meaning on paper. */
    .ascently-nav,
    .ascently-example-row,
    .ascently-submit-row,
    .ascently-decision,
    .sa-pdf-bar {
        display: none;
    }

    /* A collapsed <details> still prints collapsed — no CSS can reliably
       force the UA to paint the closed content across engines. The
       medication panels ship open, and the authoritative take-away
       artefact is the server-rendered report (pdf_report.py), not a
       browser print of this page. */

    .ascently-issue,
    .ascently-optimization-tip,
    .ascently-med-panel,
    .ascently-scorecard,
    .ascently-scope-footer,
    .sc-card {
        break-inside: avoid;
        box-shadow: none;
    }

    a.ascently-pmid-link::after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #4d5763;
    }
}

/* ========================================================================== */
/* Reduced motion                                                             */
/*                                                                            */
/* Nothing in this UI animates to convey meaning — transitions are affordance */
/* polish and the spinner has a static fallback above — so a user who asks    */
/* for less motion can have all of it, globally.                              */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Base page + waitlist + Turnstile (A12b / A4 / A5). Quiet, same voice as   */
/* the audit form; the waitlist is a secondary ask, never a modal.          */
/* ---------------------------------------------------------------------- */
.ascently-main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 20px 48px;
}
.ascently-waitlist {
    margin: 40px 0 0;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface, transparent);
}
.ascently-waitlist-heading {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
}
.ascently-waitlist-lede {
    margin: 0 0 14px;
    color: var(--ink-soft);
    max-width: 60ch;
}
.ascently-waitlist-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
}
.ascently-waitlist-form input[type="email"] {
    flex: 1 1 260px;
    min-width: 0;
}
.ascently-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-soft);
    max-width: 60ch;
}
.ascently-submit-secondary {
    font: inherit;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.ascently-submit-secondary:hover,
.ascently-submit-secondary:focus-visible {
    border-color: var(--ink-soft);
}
.ascently-waitlist-fineprint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ink-muted);
    max-width: 68ch;
}
.ascently-waitlist-status {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--ink-soft);
}
.ascently-turnstile {
    margin: 10px 0 0;
    min-height: 65px; /* reserve the widget's height so the form does not jump */
}
.cf-turnstile {
    display: block;
}

/* ========================================================================== */
/*  A13 — the one qualitative question, below the audit results.              */
/*                                                                            */
/*  Quiet by design. It sits under a safety surface, so it must not compete    */
/*  with a warning card for attention: no fill, no accent, one hairline rule   */
/*  above it. Three equal buttons, because a visually dominant "Yes" would be  */
/*  a leading question and the answer is the metric.                          */
/* ========================================================================== */

.sa-stopq {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--hair);
}
.sa-stopq-heading {
    font-family: var(--serif);
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--ink);
}
.sa-stopq-lede {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 12px;
    max-width: 62ch;
}
.sa-stopq-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sa-stopq-btn {
    font: inherit;
    font-size: 14px;
    padding: 8px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    min-width: 92px;
}
.sa-stopq-btn:hover,
.sa-stopq-btn:focus-visible {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
.sa-stopq--done {
    border-top-color: var(--hair);
}
.sa-stopq-status {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 0;
}

/* ========================================================================== */
/*  A10 — the public evidence pages (/evidence and /evidence/{goal}).          */
/*                                                                            */
/*  Rendered inside `_base_page.html`, so the shell, the footer and the legal  */
/*  links are shared with the legal pages; only the article body is new.       */
/*                                                                            */
/*  Visual contract, and it is a content decision as much as a design one:     */
/*  the REFUSAL bands and the STOOD-UP band carry the same weight. A page that */
/*  styles its findings as cards and its refusals as small grey print says     */
/*  with layout the opposite of what it says in words. The one band that       */
/*  breaks parity is proven-null, which is louder than both — it is the answer */
/*  nobody else publishes.                                                     */
/*                                                                            */
/*  Chips are `.ev-chip--*` from the ADR 0015 block above. No second palette.  */
/* ========================================================================== */

.ev-page {
    max-width: 72ch;
    margin: 0 auto;
}
.ev-goal {
    max-width: 78ch;
}
.ev-page-head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 4px;
}
.ev-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 10px;
}
.ev-eyebrow a {
    color: var(--faint);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
}
.ev-eyebrow a:hover,
.ev-eyebrow a:focus-visible {
    color: var(--accent-ink);
}
.ev-page-head h1 {
    font-family: var(--serif);
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}
.ev-lede {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 14px 0 0;
}
.ev-lede a {
    color: var(--accent-ink);
}
.ev-note {
    color: var(--faint);
    font-size: 13px;
    line-height: 1.6;
    margin: 12px 0 0;
}

/* --- index totals --------------------------------------------------------- */
.ev-totals {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 18px 0 0;
}
.ev-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-md);
    background: var(--surface);
    min-width: 128px;
}
.ev-total b {
    font-family: var(--mono);
    font-size: 21px;
    color: var(--ink);
    line-height: 1;
}
.ev-total span {
    font-size: 12px;
    color: var(--faint);
}
.ev-total--refused b {
    color: var(--accent-ink);
}

/* --- index table ---------------------------------------------------------- */
.ev-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 0;
    font-size: 14.5px;
}
.ev-table-caption {
    caption-side: top;
    text-align: left;
    color: var(--faint);
    font-size: 12.5px;
    line-height: 1.55;
    padding: 0 0 12px;
}
.ev-table th,
.ev-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--hair);
    vertical-align: baseline;
}
.ev-table thead th {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
}
.ev-goal-cell {
    font-weight: 600;
    color: var(--ink);
}
.ev-goal-cell a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
}
.ev-goal-cell a:hover,
.ev-goal-cell a:focus-visible {
    color: var(--accent-ink);
    border-bottom-color: var(--accent-ink);
}
.ev-num {
    font-family: var(--mono);
    text-align: right;
    color: var(--muted);
    white-space: nowrap;
}
.ev-num--refused {
    color: var(--ink);
}
/* "+n unlabelled" — figures that reach a goal page from work with no corpus
   record, so they sit OUTSIDE the row's arithmetic (ADR 0012 D8(b)). Rendered
   in the stood-up cell but visually detached, because attaching it to the
   number would make the row look as though it balanced differently. */
.ev-unlabelled {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--faint);
    cursor: help;
    margin-top: 2px;
    white-space: nowrap;
}
.ev-null-flag {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--crit-bg);
    color: var(--crit-ink);
    cursor: help;
    font-weight: 400;
}
.ev-foot {
    color: var(--faint);
    font-size: 13px;
    line-height: 1.6;
    margin: 22px 0 0;
}

/* --- goal page ------------------------------------------------------------ */
.ev-ledger {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 16px 0 0;
}
.ev-ledger b {
    color: var(--ink);
}
.ev-band {
    padding: 18px 0 4px;
    border-top: 1px solid var(--hair);
    margin-top: 14px;
}
.ev-band-h {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
    margin: 0 0 8px;
}
.ev-band-n {
    color: var(--ink);
    margin-left: 4px;
}
.ev-band-why {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 10px;
    max-width: 68ch;
}
.ev-band-why--tail {
    margin-top: 14px;
    color: var(--faint);
    font-size: 13px;
}
.ev-band-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ev-row {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}
.ev-row b {
    color: var(--ink);
    font-weight: 600;
    text-transform: capitalize;
}
.ev-axis {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--faint);
    margin-left: 6px;
}
.ev-band--null .ev-band-h,
.ev-row--null b {
    color: var(--crit-ink);
}
.ev-band--null {
    border-top-color: var(--crit);
}
/* The findings band. Same type scale and the same spacing as every refusal
   band above it -- see the visual contract at the head of this section. The
   only difference is a stronger hairline, which marks the transition from
   "what we refused" to "what stood up" without ranking one above the other. */
.ev-band--stood {
    border-top-color: var(--line-strong);
}

/* --- one shipping edge ---------------------------------------------------- */
.ev-edge {
    padding: 12px 0;
    border-top: 1px solid var(--hair);
}
.ev-edge:first-of-type {
    border-top: 0;
}
.ev-edge-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}
.ev-sub {
    font-weight: 650;
    font-size: 15.5px;
    color: var(--ink);
    text-transform: capitalize;
}
.ev-nochip {
    font-size: 12.5px;
    color: var(--faint);
    cursor: help;
    border-bottom: 1px dotted var(--hair);
}
.ev-headline {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink);
    opacity: 0.93;
    margin: 7px 0 0;
}
.ev-prov {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--faint);
    margin: 6px 0 0;
}
.ev-edge--withheld .ev-sub {
    color: var(--muted);
}
.ev-withheld-why {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    border-left: 2px solid var(--held);
    padding-left: 11px;
    margin: 7px 0 0;
    max-width: 66ch;
}
.ev-statutory {
    font-size: 12px;
    line-height: 1.6;
    color: var(--faint);
    border-top: 1px solid var(--hair);
    margin: 26px 0 0;
    padding-top: 14px;
}

@media (max-width: 640px) {
    .ev-total {
        min-width: 104px;
        flex: 1 1 40%;
    }
    .ev-table {
        font-size: 13.5px;
    }
    .ev-table th,
    .ev-table td {
        padding: 8px 6px;
    }
}