/* ============================================================
   SoftLOGiX — My-Rx Check
   This is the My Income Model stylesheet, kept whole so every
   shared component (top bar, side menu, cards, account band,
   tier pills, tables, tooltips, buttons) looks and behaves the
   same. The prescription theme is applied at the END of this
   file ("My-Rx Check theme"): it re-points the colour tokens
   (the --navy slot becomes pharmacy green, --gold becomes
   pill-bottle amber) and adds the Rx-specific pieces — the
   prescription pad, medication labels and warning stickers.
   ============================================================ */

:root {
    /* Brand */
    --navy: #1f3864;
    --navy2: #2e4a7a;
    --navy-deep: #16294a;
    --gold: #d1a23c;
    --gold-soft: #e7c987;

    /* Interactive accent (slightly brighter than brand navy for links/focus) */
    --accent: #2f5aa8;
    --accent-soft: #eaf0fb;

    /* Neutrals */
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e6e9f0;
    --line-strong: #d5dae4;

    /* Surfaces */
    --bg: #eef1f6;
    --bg-2: #f6f8fb;
    --card: #ffffff;

    /* Status */
    --good: #1e7d32;
    --good-soft: #e8f4ea;
    --bad: #c0261f;
    --bad-soft: #fbeceb;
    --warn-bg: #fff8e6;
    --warn-line: #f0e0a8;
    --warn-ink: #6b5a12;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
    --shadow-topbar: 0 2px 10px rgba(16, 24, 40, .12);

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* Layout */
    --topbar-h: 60px;
    --sidenav-w: 220px;

    /* Added 2026 — heading text color (lets dark mode lighten headings
       independently of the navy fills) plus tokens for surfaces that were
       previously hard-coded. Light values equal the originals. */
    --heading: var(--navy);
    --ink-2: #374151;
    --total-bg: #eef2f8;
    --disabled-bg: #f1f3f7;
    --disabled-ink: #9aa1ac;
    --policy-1: #fbfcfe;
    --policy-2: #f5f8fc;
    --tooltip-bg: #1f2937;
    --amber-row: #fff4d6;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page { display: flex; flex-direction: column; min-height: 100vh; }

/* ============================================================
   Top bar — stationary (sticky) title + menu icon panel
   ============================================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Fixed floor, NOT var(--topbar-h): the script in App.razor writes the bar's measured
       height back into --topbar-h (it wraps to two or three lines on phones), and a
       min-height tied to that value could never shrink again after a rotation. */
    min-height: 60px;
    background: linear-gradient(180deg, var(--navy2) 0%, var(--navy) 62%, var(--navy-deep) 100%);
    color: #fff;
    padding: 8px 20px;
    box-shadow: var(--shadow-topbar);
}

/* Menu icon button that lives in the top bar. Hidden on desktop (the side
   menu is always visible); shown on small screens where it opens the drawer. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .20); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* Product name leads; the company wordmark sits beneath it as a "by" credit. */
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; flex: 0 0 auto; }
.brand-name {
    color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.3px;
}
.brand-by {
    color: #c3cde0; font-weight: 500; font-size: 11.5px; letter-spacing: .4px; margin-top: 3px;
}
.wordmark { font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: .3px; }
.wm-soft { color: var(--gold); }
.wm-logix { color: #fff; }

/* Push the account block to the right edge. */
.who {
    margin-left: auto;
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; color: #e7ecf5;
}
.who .email { margin-right: 8px; color: #eef2f8; }
.who .muted { color: #aab6cd; }

.muted { color: var(--muted); }

/* ============================================================
   Body: desktop = sticky side menu + content; mobile = stacked
   ============================================================ */
.body { display: flex; flex: 1; align-items: flex-start; }

.sidenav {
    width: var(--sidenav-w);
    flex: 0 0 var(--sidenav-w);
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    /* Pinned under the top bar while the content scrolls. It must NOT be stretched to the
       body's full height: a sticky element only moves within the slack its container leaves
       it, and a panel as tall as the page has none - it just scrolls away with the content.
       So it is exactly one viewport tall (minus the top bar) and scrolls its own links if
       the window is shorter than the list. */
    position: sticky;
    top: var(--topbar-h);
    align-self: flex-start;
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
}

.navlinks { display: flex; flex-direction: column; gap: 2px; }

.navitem {
    display: flex; align-items: center;
    padding: 9px 14px;
    margin: 0;
    color: var(--heading);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--r-sm);
    transition: background .14s ease, color .14s ease;
}
.navitem:hover { background: var(--accent-soft); color: var(--navy-deep); }
.navitem.active {
    background: var(--navy);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.navitem.active:hover { background: var(--navy2); color: #fff; }

/* The in-topbar menu button (mobile) reuses .nav-toggle; the sidebar no longer
   carries its own toggle. Kept for backward compatibility if referenced. */
.navtoggle { display: none; }

.content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 26px 32px 40px;
    max-width: 1200px;
    width: 100%;
}

/* ============================================================
   Typography
   ============================================================ */
h1 {
    color: var(--heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0 0 16px;
}
h3 {
    color: var(--heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.1px;
    margin: 0 0 12px;
}

.lead { color: var(--ink-2); max-width: 860px; line-height: 1.65; margin: 0 0 12px; }
/* Home tagline: bigger and in heading colour so the top of the page lands harder.
   Scoped to .hero so every other .lead paragraph is unchanged. */
.lead.hero { font-size: 18px; line-height: 1.5; color: var(--heading); margin: 0 0 16px; }
.fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 16px; }
.hint { color: var(--good); font-size: 13px; margin-left: 8px; }

/* ------------------------------------------------------------
   Home page — lead benefits as three numbered pillars.
   Replaces the plain bulleted list under the tagline. Every colour
   flows through an existing token (--card, --line, --gold, --heading,
   --ink-2), so dark mode needs NO new overrides: the ghost numeral is
   --gold at low alpha and brightens automatically when --gold flips.
   The container keeps the original .lead-points class and stays a <ul>
   (list semantics preserved; markers removed).
   ------------------------------------------------------------ */
.lead-points {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    max-width: 860px;          /* aligns with .lead above it */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.lead-points .pillar {
    position: relative;
    overflow: hidden;          /* clips the oversized numeral */
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);   /* echoes .card.section / metric tiles */
    border-radius: var(--r-md);
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.lead-points .pillar:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-soft);
    border-top-color: var(--gold);       /* shorthand above would recolour the top rule */
}

/* Featured pillar (the AI optimizer). A warm gold wash mixed from the existing
   --gold token, so it re-mixes itself in dark mode with no override block.
   Browsers without color-mix() simply fall back to the plain --card background. */
.lead-points .pillar.featured {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--gold) 13%, var(--card)) 0%,
                var(--card) 62%);
    border-color: var(--gold-soft);
    border-top-color: var(--gold);
    box-shadow: var(--shadow-md);
}
.lead-points .pillar.featured .pillar-num { opacity: .2; }

/* Small uppercase pill beside the featured heading. Inline inside the <h3> so
   all three headings stay on the same baseline. */
.lead-points .pillar-badge {
    display: inline-block;
    vertical-align: 2px;
    margin: 0 0 0 8px;
    padding: 1px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 24%, var(--card));
    border: 1px solid var(--gold-soft);
    color: var(--heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.7;
}

.lead-points .pillar-num {
    position: absolute;
    right: 8px;
    top: -10px;
    font-size: 66px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--gold);
    opacity: .14;
    pointer-events: none;
    user-select: none;
}

/* position:relative keeps the text painted above the ghost numeral. */
.lead-points .pillar h3 {
    position: relative;
    margin: 0 0 7px;
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.lead-points .pillar p {
    position: relative;
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .lead-points .pillar { transition: none; }
    .lead-points .pillar:hover { transform: none; }
}

@media (max-width: 820px) {
    .lead-points { grid-template-columns: 1fr; gap: 10px; }
    .lead-points .pillar-num { font-size: 54px; }
    .lead.hero { font-size: 16.5px; }
}


.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 22px;
    margin: 16px 0;
    box-shadow: var(--shadow-sm);
}

.foot {
    padding: 18px 32px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
    border-top: 1px solid var(--line);
    background: var(--card);
}
.foot a { color: var(--accent); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.footsep { color: var(--line-strong); }

/* ============================================================
   Forms
   ============================================================ */
.txt, .num, select.txt {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--card);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.num { width: 140px; }
.txt { width: 260px; }
.txt:focus, .num:focus, select.txt:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 90, 168, .16);
}
.num:disabled, select:disabled, .num.disabled, .txt:disabled {
    background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed;
}
.note-inline {
    grid-column: 1 / -1;
    background: var(--warn-bg); border: 1px solid var(--warn-line);
    color: var(--warn-ink); padding: 9px 12px; border-radius: var(--r-sm);
    font-size: 12.5px; margin-bottom: 6px;
}
.note-inline a { color: var(--heading); font-weight: 600; }
/* The "Demo data loaded" walkthrough on Inputs is a step-by-step instruction, so it reads
   at body size rather than the small note size. */
.note-inline.demo-loaded { font-size: 15px; line-height: 1.55; padding: 12px 16px; margin: 6px 0 14px; }
/* In-page "cancel your subscription?" confirmation (Subscribe page) — replaces the browser
   confirm() dialog so it matches the site. */
.note-inline.cancel-confirm { font-size: 14.5px; line-height: 1.55; padding: 14px 16px; margin: 12px 0; }
.note-inline.cancel-confirm .toolbar { margin: 12px 0 0; }
/* In-page acknowledgement shown once after the cancellation goes through. */
.note-inline.cancel-done { font-size: 14.5px; line-height: 1.55; padding: 14px 16px; margin: 12px 0; }
/* Routes.razor's <FocusOnNavigate Selector="h1"> moves focus to the page title after every
   navigation (so assistive tech announces the new page). The heading isn't interactive, so
   hide the browser's default focus ring that this leaves around it until the first click. */
h1:focus, h1:focus-visible { outline: none; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > label { font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.field > .num, .field > .txt { margin-top: auto; }
.form-grid > label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.form-grid > label > .txt, .form-grid > label > .num { margin-top: auto; }
.field .check { flex-direction: row; align-items: center; gap: 6px; display: flex; }

.info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--navy); color: #fff; font-size: 10px; font-style: italic;
    font-weight: 700; line-height: 1; cursor: pointer; user-select: none;
    font-family: Georgia, "Times New Roman", serif;
    /* Works as either a decorative <span> or an interactive <button> (InfoTip). */
    border: 0; padding: 0; margin: 0; appearance: none; -webkit-appearance: none;
    vertical-align: middle;
}
.info:hover, .info:focus { background: var(--navy2); outline: none; }
.info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Info tooltip (InfoTip.razor) — works with touch and mouse.
   Desktop: hover the ⓘ reveals the note. Touch/keyboard: tapping (or
   Enter/Space) toggles the `open` class; a transparent full-screen
   backdrop catches the outside tap to dismiss. No reliance on the
   native title attribute, which never shows on touch devices.
   ============================================================ */
.infotip { position: relative; display: inline-flex; vertical-align: middle; }

.infotip-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    display: none;
    width: max-content;
    max-width: min(280px, 86vw);
    padding: 9px 11px;
    background: var(--tooltip-bg);
    color: #fff;
    font: 400 12.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .24);
    overflow-wrap: anywhere;
    white-space: normal;
    cursor: auto;
    user-select: text;
}
/* small caret pointing up at the marker */
.infotip-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 9px;
    border: 6px solid transparent;
    border-bottom-color: var(--tooltip-bg);
}

/* Tap/keyboard reveal (all devices). */
.infotip.open .infotip-bubble { display: block; }

/* Hover reveal only where a real pointer can hover (desktop), so a tap doesn't
   get "stuck" open via :hover on touch screens. */
@media (hover: hover) and (pointer: fine) {
    .infotip:hover .infotip-bubble { display: block; }
}

/* Dismiss catcher. It is rendered as a SIBLING of .infotip in InfoTip.razor —
   never a child. :hover matches every ancestor of the hovered element, so a
   full-screen backdrop nested inside .infotip would hold `.infotip:hover` true
   across the whole viewport and the hover rule above would pin the bubble open
   permanently. Keep it outside .infotip's ancestor chain. z-index 55 sits below
   the bubble (60) so the bubble stays readable and selectable above it. */
.infotip-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }

/* On small screens the marker can sit anywhere on a line, so an anchored bubble
   would overflow the edge. Instead show the note as a full-width card pinned near
   the bottom of the viewport — it never overflows, and the dimmed backdrop makes
   the outside-tap-to-close target obvious. */
@media (max-width: 640px) {
    .infotip-bubble {
        position: fixed;
        left: 12px; right: 12px; bottom: 12px; top: auto;
        width: auto; max-width: none;
        font-size: 13.5px;
        padding: 12px 14px;
    }
    .infotip-bubble::before { display: none; }
    .infotip-backdrop { background: rgba(16, 24, 40, .28); }
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 28px; }

/* Field banding (2026-09). A field's note must sit under ITS OWN input: written as a
   sibling of <Num> it became a separate grid cell and pushed the following fields out of
   place. Every direct child now occupies a three-row band — label / control / note — and
   .field maps its own rows onto those tracks with subgrid, so labels, inputs and notes each
   line up across a row however long a note is. Children that are not .field (a bare <label>
   wrapping a <select>, .derived, .strategy) simply span the band without subgridding.
   Browsers without subgrid fall back to a plain auto-row grid: the note stays inside its
   field (the point of the change); only the cross-field alignment is lost. */
.form-grid > * { grid-row: span 3; }
.form-grid > .field {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 4px;
    align-content: start;
}

/* Visible note under an input — for a statement a user should not have to hover to find.
   Quieter than .fineprint and scoped to the field. */
.field-note {
    margin: 1px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 400;
}
/* A Num field that just corrected or rejected an entry: the note turns warning-colored and the
   input gets a warning border, so the correction is noticed without a modal. */
.field-note .adjusted { display: block; color: var(--warn-ink); font-weight: 600; }
.num.adjusted { border-color: var(--warn-line); box-shadow: 0 0 0 2px var(--warn-bg); }

/* Cross-field validation strip on the Inputs page (MedProfile.Validate). Errors block Save;
   warnings only explain what the model will do with an odd entry. */
.note-inline.issues ul { margin: 6px 0 0 18px; padding: 0; }
.note-inline.issues li { margin: 2px 0; }
.note-inline.issues li.bad { font-weight: 600; }
.section h3 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
/* Collapsible module sections (Inputs 10-13, Section.razor). The header is a plain button
   plus a state pill; folded, the card shrinks to its header with no rule under it. */
.section.collapsible h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section.collapsed h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.section-toggle {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    font: inherit; color: inherit; border-radius: 4px;
}
.section-toggle:hover { color: var(--accent); }
.section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.section-toggle .chev { width: 1em; font-size: .85em; color: var(--muted); }
.section-status.off { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.section-status.on  { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.section-summary { font-weight: 400; font-size: 13px; color: var(--muted); }

/* Section 5 by-account entry (AccountsTable.razor). The wrapper spans the whole form grid;
   each bucket is a normal .tablewrap table whose cells hold inputs. The footer row is what
   the engine actually uses (total, weighted stock %, derived gain fraction). */
/* min-width: 0 on the grid item and its children: otherwise the table's intrinsic width
   becomes the cell's minimum and the whole card grows past the phone screen instead of the
   .tablewrap scrolling sideways. */
.accounts-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin: 4px 0 10px; min-width: 0; max-width: 100%; }
.accounts { min-width: 0; max-width: 100%; }
.accounts .tablewrap { max-width: 100%; }
.accounts-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.accounts-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--heading); }
.accounts-empty { margin: 0 0 4px; }
.accounts-grid td, .accounts-grid th { vertical-align: middle; white-space: nowrap; }
.accounts-grid td.r, .accounts-grid th.r { text-align: right; }
.accounts-grid .txt { width: 100%; min-width: 120px; }
.accounts-grid select.txt.owner { min-width: 84px; }
.accounts-grid .num { width: 108px; text-align: right; }
.accounts-grid .num.pct { width: 72px; }
.accounts-grid tfoot td { border-top: 2px solid var(--line-strong); background: var(--bg-2); }
.accounts-grid td.acct-actions { text-align: right; }
.accounts-grid td.acct-actions .pill { padding: 4px 10px; font-size: 12px; }
.accounts-actions { margin: 6px 0 0; }

.toolbar { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.derived {
    grid-column: 1 / -1; color: var(--heading);
    background: var(--warn-bg); border: 1px solid var(--warn-line);
    padding: 9px 12px; border-radius: var(--r-sm); margin-top: 6px;
}

/* strategy selector block */
.strategy { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.strategy .wide { width: 420px; max-width: 100%; }
.strategy-desc { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* ============================================================
   Buttons & links
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--heading);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .04s ease;
}
.btn:hover { background: var(--accent-soft); border-color: #c4d1ea; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn.primary {
    background: var(--navy); color: #fff; border-color: var(--heading);
}
.btn.primary:hover { background: var(--navy2); border-color: var(--navy2); }

.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.link {
    background: none; border: none; color: var(--accent); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px; padding: 0;
    font-size: inherit; font-family: inherit; font-weight: 600;
}
.link:hover { color: var(--navy-deep); }
.link.danger { color: var(--bad); }
.btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.danger:hover { background: #9e1e18; border-color: #9e1e18; }

/* ============================================================
   Membership pages
   ============================================================ */
/* Side-menu divider between the app pages and the account pages. A 2px amber-tinted
   rule (echoing the gold accent rules on cards) so it reads clearly against --bg-2
   in both light and dark themes; --line alone was nearly invisible there. */
.navgap {
    height: 0;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--gold) 55%, var(--line-strong));
    border-radius: 2px;
    margin: 14px 8px;
}
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.reg-single { max-width: 640px; }
@media (max-width: 820px) { .reg-grid { grid-template-columns: 1fr; } }
ol.tiers { margin: 4px 0 0; padding-left: 18px; }
ol.tiers li { margin-bottom: 10px; }
.you { color: var(--good); font-weight: 700; }
.statusline {
    margin-top: 10px; padding: 8px 14px; border-radius: 999px;
    background: var(--accent-soft); color: var(--heading); font-weight: 600;
    display: inline-block;
}
.statusline .demo-tag { margin-left: 10px; vertical-align: middle; }
.devcode {
    background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
    padding: 10px 12px; border-radius: var(--r-sm); margin: 8px 0; font-size: 13px;
}
.devcode .code {
    font-family: "Courier New", monospace; font-weight: 700; font-size: 15px;
    letter-spacing: 2px; color: var(--heading);
}
.tierline { margin: 2px 0 10px; color: var(--heading); font-size: 13px; }
.sub-notes { color: var(--ink-2); line-height: 1.6; margin: 8px 0 0 18px; }
.sub-notes li { margin: 4px 0; }
.paypal-wrap { margin-top: 10px; }
.disclaimer { color: var(--muted); font-size: 12.5px; }
.rowactions { display: flex; gap: 12px; justify-content: flex-end; }

.signin { max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
.emaillist { list-style: none; padding: 0; margin: 0; }
.emaillist li { padding: 3px 0; }
.notes ul { line-height: 1.65; }

.remember { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.remember input { margin: 0; width: auto; }

.small { font-size: 12.5px; }

/* ============================================================
   Dashboard: sequencing-policy panel
   ============================================================ */
.policy {
    border-left: 4px solid var(--navy);
    background: linear-gradient(180deg, var(--policy-1) 0%, var(--policy-2) 100%);
}
.policy-summary { margin: 2px 0; }
.policy .small { font-size: 12.5px; }
ol.waterfall { margin: 8px 0 6px; padding-left: 22px; }
ol.waterfall li { margin-bottom: 6px; line-height: 1.55; }

/* ============================================================
   Dashboard metrics — elevated tiles with a gold accent rule
   ============================================================ */
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.metric {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 18px 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .16s ease, transform .16s ease;
}
.metric::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
}
.metric:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.metric-title { font-weight: 700; color: var(--heading); font-size: 14.5px; }
.metric-sub { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.metric .big { font-size: 26px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.metric .mid { font-size: 16px; font-weight: 700; color: var(--ink); }
.metric .good { color: var(--good); }
.metric .bad { color: var(--bad); }

/* Headline verdict tile: first in the grid and spans the whole row. The side rule and a
   faint wash take the verdict's colour (good / bad tokens, so dark mode needs no override). */
.metric.verdict { grid-column: 1 / -1; padding: 20px 24px 20px; }
.metric.verdict.is-funded { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 9%, var(--card)) 0%, var(--card) 70%); }
.metric.verdict.is-short  { border-color: color-mix(in srgb, var(--bad) 35%, var(--line));  background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 9%, var(--card)) 0%, var(--card) 70%); }
.metric.verdict::before { width: 6px; }
.metric.verdict.is-funded::before { background: var(--good); }
.metric.verdict.is-short::before  { background: var(--bad); }
.metric.verdict .metric-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.verdict-line { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.verdict-badge { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.metric.verdict.is-funded .verdict-badge { color: var(--good); }
.metric.verdict.is-short .verdict-badge  { color: var(--bad); }
.verdict-amt { font-weight: 800; color: var(--heading); white-space: nowrap; }
.verdict-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }
.verdict-detail { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 3px; }
@media (max-width: 560px) {
    .metric.verdict { padding: 16px 16px 16px 20px; }
    .verdict-line { font-size: 19px; }
}

/* "How we got here" heading above the sequencing-policy card. */
.section-title { font-size: 20px; font-weight: 800; color: var(--heading); margin: 26px 0 2px; }
.section-lead { margin: 0 0 12px; font-size: 13.5px; }

/* ============================================================
   Tables
   ============================================================ */
.tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    background: var(--card);
}
/* Every standalone data table scrolls horizontally when it is wider than its container
   (e.g. on a phone) instead of forcing the whole page wide. display:block turns the table
   itself into the scroll box; fit-content keeps narrow tables compact rather than stretched. */
table.grid {
    border-collapse: collapse;
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12.5px;
    background: var(--card);
}
table.grid.narrow { width: -webkit-fit-content; width: fit-content; }
/* Inside a .tablewrap the wrapper already handles scrolling, so keep the table a normal
   full-width table and let the wrapper scroll (Projection page). */
.tablewrap table.grid {
    display: table;
    width: 100%;
    max-width: none;
    overflow: visible;
}
table.grid th, table.grid td {
    border-bottom: 1px solid var(--line);
    padding: 8px 12px; text-align: right; white-space: nowrap;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid thead th {
    background: var(--navy); color: #fff; font-weight: 600;
    position: relative; border-bottom: none;
    white-space: nowrap;
}
table.grid thead th:first-child { border-top-left-radius: var(--r-md); }
table.grid thead th:last-child { border-top-right-radius: var(--r-md); }
table.grid tbody tr { transition: background .1s ease; }
table.grid tbody tr:nth-child(even) { background: var(--bg-2); }
table.grid tbody tr:hover { background: var(--accent-soft); }
table.grid tfoot td { background: var(--total-bg); font-weight: 700; border-top: 2px solid var(--line-strong); }
td.bad, .bad { color: var(--bad); font-weight: 600; }
td.good, .good { color: var(--good); font-weight: 600; }

table.grid.compare tbody td:nth-child(2) { background: rgba(30, 125, 50, 0.10); }
table.grid.compare tbody tr:hover td:nth-child(2) { background: rgba(30, 125, 50, 0.16); }

/* ============================================================
   Chart
   ============================================================ */
.chart { width: 100%; height: 300px; background: var(--card); }
.chart .axis { stroke: #9aa1ac; stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2.25; }
.chart .line.nominal { stroke: var(--navy); }
.chart .line.real { stroke: #c55a11; }
.chart .lbl { fill: var(--muted); font-size: 11px; }
.chart .lbl.end { text-anchor: end; }
.chart .gridline { stroke: #cfd5e0; stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; }
.chart .gridlbl { fill: #9aa1ac; font-size: 13px; }
.chart .gridlbl.end { text-anchor: end; }
.chart .gridlbl.mid { text-anchor: middle; }
.legend { margin-top: 8px; font-size: 12.5px; }
.legend .key { margin-right: 16px; }
.legend .key.nominal::before { content: "\2014 "; color: var(--heading); font-weight: 700; }
.legend .key.real::before { content: "\2014 "; color: #c55a11; font-weight: 700; }

/* ============================================================
   Responsive / mobile support
   ------------------------------------------------------------
   Desktop uses a sticky side menu. Below 820px the side menu
   collapses into a drawer that drops down from the sticky top
   bar; the menu icon in the top bar toggles it. Grids stack to
   a single column and fixed-width inputs shrink to fit. Wide
   data tables already scroll inside .tablewrap.
   ============================================================ */

@media (max-width: 820px) {
    .lead, .strategy-desc, .fineprint, .disclaimer, .sub-notes,
    .metric, .card, .foot { overflow-wrap: anywhere; }
}

@media (max-width: 820px) {
    /* Show the menu icon in the top bar. */
    .nav-toggle { display: inline-flex; }

    /* Keep the brand/title from being squeezed off the bar by a long account
       block (badge + email + plan name): the account block yields space and its
       email truncates with an ellipsis, so "My Income Model" always stays visible. */
    .who { min-width: 0; }
    .who .email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Stack the drawer below the top bar. */
    .body { flex-direction: column; align-items: stretch; }

    .sidenav {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        align-self: stretch;
        position: sticky;
        top: var(--topbar-h);
        z-index: 40;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 10px 12px;
        box-shadow: var(--shadow-md);
        /* Collapsed by default; expands when .open is set from the top bar. */
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
        transition: max-height .22s ease, padding .22s ease, border-bottom-width .22s ease;
    }
    .sidenav.open {
        max-height: 80vh;
        overflow-y: auto;
        padding-top: 10px;
        padding-bottom: 12px;
        border-bottom-width: 1px;
    }
    .navlinks { gap: 3px; }
    .navitem { padding: 12px 14px; font-size: 15px; }

    .content { padding: 18px 16px 28px; max-width: 100%; }
    .foot { padding: 16px; }

    .form-grid { grid-template-columns: 1fr; }
    .metrics   { grid-template-columns: 1fr; }

    .txt, .num, select.txt { width: 100%; max-width: 100%; }
    .strategy .wide { width: 100%; }
    .signin { max-width: 100%; }

    h1 { font-size: 22px; }

    /* Frozen page title (narrow screens only). On desktop the sticky side menu with its
       highlighted item already says which page this is; here the menu is a closed drawer,
       so the title itself stays pinned under the top bar while the content scrolls. It
       spans .content's full width (negative margins undo the 16px gutters) on an opaque page
       background with a hairline beneath, and sits below the drawer (z 40) and tooltips (60). */
    .content > h1 {
        position: sticky;
        top: var(--topbar-h);
        z-index: 30;
        margin: -18px -16px 14px;
        padding: 14px 16px 10px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
    }
}

/* Phones: tighten the top bar and let controls fill the width. */
@media (max-width: 560px) {
    /* Not enough width for the brand and the account details on one line, so let
       the top bar wrap: the menu icon + brand stay on line 1, and the account
       block (email / plan name + sign out) drops to a right-aligned second line. */
    .topbar { padding: 8px 14px; gap: 4px 10px; flex-wrap: wrap; }
    .who {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        flex-direction: column;   /* stack the account details on the second line */
        align-items: flex-end;    /* right-align the block */
        gap: 2px;
        font-size: 12px;
    }
    /* Full-width line so a long address / plan name wraps and stays right-aligned
       instead of overflowing off the right edge; "sign out" sits right-aligned below. */
    .who .email {
        width: 100%;
        margin-right: 0;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .toolbar { gap: 8px; }
    .toolbar .btn { flex: 1 1 auto; text-align: center; }

    /* Frozen header + first column stay active in the bounded scroll box on phones. */
    .tablewrap { max-height: 72vh; }

    .rowactions { flex-wrap: wrap; justify-content: flex-start; }

    .brand-name { font-size: 19px; }
    .brand-by { font-size: 10.5px; }
    .wordmark { font-size: 12px; }
    .content { padding: 16px 13px 22px; }
}


/* ============================================================
   REFRESH ADD-ONS (2026) — pills, tonal buttons, status chips,
   table polish, and dark theme. All additive; the rules above
   are unchanged and light mode renders identically.
   ============================================================ */

/* Row-action pills (Home saved-models list) -------------------- */
.rowactions { gap: 8px; }
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid transparent; border-radius: 999px;
    padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
    line-height: 1; cursor: pointer; text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill.blue  { background: var(--accent-soft); color: var(--heading); }
.pill.blue:hover  { background: color-mix(in srgb, var(--accent) 20%, var(--accent-soft)); }
.pill.quiet { background: transparent; color: var(--muted); }
.pill.quiet:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink); }
.pill.red   { background: var(--bad-soft); color: var(--bad); }
.pill.red:hover   { background: var(--bad); color: #fff; }

/* Tonal button tier -------------------------------------------- */
.btn.tonal {
    background: var(--accent-soft); color: var(--heading);
    border-color: transparent; box-shadow: none;
}
.btn.tonal:hover { background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft)); border-color: transparent; }
.btn.gold { background: var(--gold); color: #3a2c08; border-color: var(--gold); }
.btn.gold:hover { filter: brightness(.96); background: var(--gold); border-color: var(--gold); }
.btn.ghost-danger {
    background: var(--bad-soft); color: var(--bad);
    border-color: transparent; box-shadow: none;
}
.btn.ghost-danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

/* Status chips (driven off the existing status tokens) --------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 4px 11px;
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.bad  { background: var(--bad-soft);  color: var(--bad); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); }

/* Table polish ------------------------------------------------- */
table.grid { font-variant-numeric: tabular-nums; }
/* Long data tables scroll inside the wrapper with a sticky header. Tables
   shorter than the cap don't scroll, so short tables look unchanged. */
.tablewrap { max-height: 78vh; overflow: auto; }
.tablewrap table.grid thead th { position: sticky; top: 0; z-index: 3; }
.tablewrap table.grid tbody td:first-child { font-weight: 600; color: var(--heading); }

/* Top-bar theme toggle ----------------------------------------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; margin-left: auto;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-sm); color: #fff; cursor: pointer;
    font-size: 16px; line-height: 1; transition: background .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.20); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.theme-toggle .ico-sun, .theme-toggle .ico-moon { display: none; }
.theme-toggle .ico-moon { display: inline; }         /* light / OS-light: offer the moon */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .ico-sun  { display: inline; }
}
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .ico-sun  { display: none; }
:root[data-theme="dark"]  .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .ico-sun  { display: inline; }

/* ============================================================
   Dark theme — token overrides only. Applies on the visitor's OS
   setting unless they've explicitly chosen light; an explicit
   dark choice (toggle) wins the other way.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --navy: #2f4a7a; --navy2: #3a5892; --navy-deep: #223a63;
        --gold: #e3b968; --gold-soft: #f0d59a;
        --accent: #6f9bea; --accent-soft: #22304a;
        --ink: #e7ebf3; --muted: #94a1b6; --line: #2a3342; --line-strong: #3a4556;
        --bg: #0e131d; --bg-2: #151b27; --card: #1b2230;
        --good: #5fce87; --good-soft: #17321f; --bad: #f0837c; --bad-soft: #3a1f1e;
        --warn-bg: #3a3316; --warn-line: #5c4f1f; --warn-ink: #e7cf7a;
        --heading: #a9c2f0; --ink-2: #c2cad8; --total-bg: #223049;
        --disabled-bg: #10151f; --disabled-ink: #667082;
        --policy-1: #1a2233; --policy-2: #141b28; --tooltip-bg: #0b0f16; --amber-row: #3a2f10;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
        --shadow-topbar: 0 2px 10px rgba(0,0,0,.55);
    }
}
:root[data-theme="dark"] {
    --navy: #2f4a7a; --navy2: #3a5892; --navy-deep: #223a63;
    --gold: #e3b968; --gold-soft: #f0d59a;
    --accent: #6f9bea; --accent-soft: #22304a;
    --ink: #e7ebf3; --muted: #94a1b6; --line: #2a3342; --line-strong: #3a4556;
    --bg: #0e131d; --bg-2: #151b27; --card: #1b2230;
    --good: #5fce87; --good-soft: #17321f; --bad: #f0837c; --bad-soft: #3a1f1e;
    --warn-bg: #3a3316; --warn-line: #5c4f1f; --warn-ink: #e7cf7a;
    --heading: #a9c2f0; --ink-2: #c2cad8; --total-bg: #223049;
    --disabled-bg: #10151f; --disabled-ink: #667082;
    --policy-1: #1a2233; --policy-2: #141b28; --tooltip-bg: #0b0f16; --amber-row: #3a2f10;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    --shadow-topbar: 0 2px 10px rgba(0,0,0,.55);
}

/* Optimize A/B: the row matching the chosen objective (themed, legible in dark). */
table.grid tr.objrow > td { background: var(--amber-row); }

/* Inputs page: gold accent stripe on each section card, echoing the Dashboard
   metric tiles. Solid left border (not a ::before) so overflow stays visible and
   InfoTip popovers inside a section are never clipped. */
.card.section { border-left: 3px solid var(--gold); }

/* Projection: freeze the first column (Year) during horizontal scroll. Header +
   body only, so the footer's colspan layout is untouched (its one total-row label
   just scrolls with the row). Backgrounds stay opaque and keep the zebra/hover/
   header colors so the frozen column reads as part of the table. */
.tablewrap table.grid thead th:first-child,
.tablewrap table.grid tbody td:first-child {
    position: sticky;
    left: 0;
    /* box-shadow divider (not border-right): a collapsed-table border can drop out
       on a sticky cell in mobile Safari; a shadow travels with the cell reliably. */
    box-shadow: 1px 0 0 0 var(--line-strong), 4px 0 6px -4px rgba(16, 24, 40, .10);
}
.tablewrap table.grid tbody td:first-child { z-index: 2; background: var(--card); }
.tablewrap table.grid tbody tr:nth-child(even) td:first-child { background: var(--bg-2); }
.tablewrap table.grid tbody tr:hover td:first-child { background: var(--accent-soft); }
.tablewrap table.grid thead th:first-child { z-index: 5; }  /* corner: sticky top (already) + left */



/* ============================================================
   Home page — title, then the full-width ACCOUNT BAND (get started /
   welcome back), a labelled divider, then the pitch (intro, live sample
   projection, stat tiles) at full width. Every colour is a token, so dark
   mode needs no overrides.
   ============================================================ */
.hero { margin-bottom: 22px; }
.hero-copy { min-width: 0; }   /* lets the chart SVG shrink */

/* Account band: one row on desktop — who you are | your numbers | what to do next —
   with any membership note running full width underneath. A 4px gold LEFT rule and a
   left-to-right warm wash set it apart from the marketing cards below, which all wear
   gold TOP rules. Grid areas let the two states (signin / welcome) share one layout. */
.account-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "head stats actions"
        "note note  note";
    align-items: center;
    gap: 14px 28px;
    margin: 0;
    padding: 18px 22px;
    border: 1px solid var(--gold-soft);
    border-left: 4px solid var(--gold);
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--gold) 13%, var(--card)) 0%,
                var(--card) 60%);
    box-shadow: var(--shadow-md);
}
.account-band.signin {
    max-width: none;   /* beats the site-wide .signin 460px column */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head actions"
        "note note";
}
.account-band .welcome-head { grid-area: head; min-width: 0; }
.account-band .welcome-head h3 { margin: 0 0 2px; }
.account-band .welcome-head h3 .demo-tag.tier { margin-left: 8px; vertical-align: 2px; }
.account-band .welcome-stats li.model { max-width: 240px; }
.account-band .welcome-stats,
.account-band .band-status { grid-area: stats; margin: 0; }
.account-band .band-actions {
    grid-area: actions;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
}
.account-band .welcome-note,
.account-band .band-note { grid-area: note; margin: 0; }
.account-band .band-note { padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.5; }
.account-band .band-note a { color: var(--heading); font-weight: 600; }
/* Mid widths: the welcome band's stat tiles drop to their own row under the head. */
@media (max-width: 1100px) {
    .account-band.welcome {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head  actions"
            "stats stats"
            "note  note";
    }
}
/* Narrow: everything stacks, buttons left-aligned under the text, wash runs top-down. */
@media (max-width: 700px) {
    .account-band,
    .account-band.signin,
    .account-band.welcome {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "stats" "actions" "note";
        gap: 12px;
        padding: 16px 16px 14px;
        background: linear-gradient(180deg,
                    color-mix(in srgb, var(--gold) 13%, var(--card)) 0%,
                    var(--card) 62%);
    }
    .account-band .band-actions { justify-content: flex-start; }
}

/* Labelled rule separating "your account" from the pitch below it. */
.home-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 28px 0 18px;
    color: var(--muted);
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.home-divider::before,
.home-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.home-divider span { white-space: nowrap; }
@media (max-width: 560px) { .home-divider { margin: 22px 0 14px; letter-spacing: .08em; } }
/* Home introduction: a gold rule on the left (echoing the section cards), then kicker /
   headline / sub-line in descending weight. */
.hero-intro {
    border-left: 3px solid var(--gold);
    padding: 2px 0 2px 16px;
    margin: 4px 0 20px;
    max-width: 680px;
}
.hero-kicker {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.hero-headline {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--heading);
}
.hero-sub {
    color: var(--ink-2);
    max-width: 640px;
    font-size: 16.5px;
    line-height: 1.55;
    margin: 0;
}
/* Avatar head row + stat tiles + membership note: shared by the Home account band
   and the Registration page's .card.account. */
.welcome-head { display: flex; align-items: center; gap: 12px; }
.welcome-head .welcome-text { min-width: 0; flex: 1 1 auto; }
.welcome-head h3 { margin: 0 0 2px; }
.welcome-head .who-line { margin: 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.welcome-head .demo-tag.tier { align-self: flex-start; white-space: nowrap; }
/* Home welcome cards: the tier pill sits on its own line under "Signed in as ...". */
.welcome-head .tier-line { margin-top: 6px; }
.welcome-head .avatar {
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--navy); color: #fff;
    font-size: 19px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 40%, var(--card));
}
/* Two small stat tiles, echoing the sample-model tiles under the chart. */
.welcome-stats {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
}
.welcome-stats li {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 14px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.welcome-stats .stat-big {
    font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1;
    color: var(--heading);
}
.welcome-stats .stat-name {
    font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--heading);
    overflow-wrap: anywhere;
}
.welcome-stats .stat-name.muted { color: var(--muted); font-weight: 600; }
.welcome-stats .stat-lbl {
    color: var(--muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
/* Membership note under the tiles: neutral for "register to save", amber for a lapsed
   registration / ended subscription (the same warn tokens the form notes use). */
.welcome-note {
    margin: 12px 0 0; padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--ink-2);
    font-size: 12.5px; line-height: 1.5;
}
.welcome-note a { color: var(--heading); font-weight: 600; }
.welcome-note.lapsed {
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    color: var(--warn-ink);
}
.welcome-note.lapsed a { color: var(--warn-ink); text-decoration: underline; }
/* Registration page account card: gold top rule, warm wash, avatar head row. */
.card.account {
    padding: 18px 20px 16px;
    border-top: 3px solid var(--gold);
    border-color: var(--gold-soft);
    border-top-color: var(--gold);
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--gold) 13%, var(--card)) 0%,
                var(--card) 62%);
    box-shadow: var(--shadow-md);
}
.card.account .welcome-head { margin-bottom: 12px; }
.card.account .field > label { font-weight: 600; color: var(--heading); font-size: 13px; }
.card.account .field > .txt { width: 100%; max-width: 100%; }
.card.account { margin: 0; }
.card.account .welcome-head .who-line b { overflow-wrap: anywhere; }

/* ============================================================
   Inputs page model panel (ModelPanel.razor) — the model chooser bar, and the
   expandable list + create row beneath it. Tokens only, so dark mode needs no overrides.
   ============================================================ */
.model-panel { padding: 14px 18px; margin: 0 0 14px; border-left: 3px solid var(--gold); }
.model-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-bar .model-title { margin: 0; }
.model-bar .tiercount { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.model-pick { display: inline-flex; align-items: center; gap: 8px; }
.model-pick > span { color: var(--heading); font-weight: 600; font-size: 13px; }
.model-pick .txt { width: 260px; max-width: 100%; }
.model-manage { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.model-manage .create-row { margin: 12px 0 0; }
/* The list is a normal full-width table whose cells may wrap, instead of the site-wide
   fit-content scroll box. Row actions take their natural width on one line; the name wraps.
   The cell must stay a real table cell (the site-wide .rowactions is display:flex, which
   breaks table layout once the table is display:table), so the pills are spaced inline. */
.model-panel table.grid { display: table; width: 100%; max-width: 100%; overflow: visible; margin: 0; }
.model-panel table.grid th,
.model-panel table.grid td { white-space: normal; padding: 7px 8px; overflow-wrap: anywhere; }
.model-panel table.grid td:nth-child(2) { white-space: nowrap; color: var(--muted); }
.model-panel table.grid td.rowactions { display: table-cell; width: 1%; white-space: nowrap; text-align: right; }
.model-panel table.grid td.rowactions .pill { margin-left: 6px; padding: 4px 10px; }
.model-panel table.grid td:first-child .link { text-align: left; }
.model-panel table.grid tr.current td:first-child .link { font-weight: 700; color: var(--heading); }
.model-panel .pill.ro { margin-left: 8px; padding: 2px 8px; font-size: 11px; cursor: help; border: 1px solid var(--line-strong); }

/* Live sample card: a thin gold rule like the pillars, chart kept short. */
.card.demo {
    padding: 14px 16px 12px;
    border-top: 3px solid var(--gold);
}
.demo-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.demo-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 24%, var(--card));
    border: 1px solid var(--gold-soft);
    color: var(--heading);
    font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    line-height: 1.7;
}
.demo-title { font-weight: 700; color: var(--heading); font-size: 14px; }

/* Sample-household chips (role=tablist). The active one is a filled gold pill. */
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.demo-chips .chip {
    appearance: none;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
    color: var(--ink-2);
    font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.demo-chips .chip::before { display: none; }   /* no status dot: these are tabs, not status chips */
.demo-chips .chip:hover { border-color: var(--gold); color: var(--heading); }
.demo-chips .chip.on {
    background: color-mix(in srgb, var(--gold) 26%, var(--card));
    border-color: var(--gold);
    color: var(--heading);
}
.demo-chips .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-body { animation: demo-in .35s ease; }
@keyframes demo-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demo-body { animation: none; } }
.demo-lesson { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }
.card.demo .chart { height: 240px; }
.card.demo .legend { font-size: 12px; }
.demo-caption { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 8px 0 0; }
.demo-loading {
    height: 240px; display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 14px;
    background: repeating-linear-gradient(90deg, var(--bg-2) 0 12px, var(--card) 12px 24px);
    border-radius: var(--r-sm);
}

/* Headline outcomes from the sample plan. */
.demo-stats {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.demo-stats li {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 2px;
}
.demo-stats .stat-big {
    font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1;
    color: var(--heading);
}
.demo-stats .stat-big.good { color: var(--good); }
.demo-stats .stat-lbl { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.demo-fine { margin-top: 8px; }

/* How it works: three numbered steps with small line icons. */
.how-title { font-size: 20px; font-weight: 800; color: var(--heading); margin: 6px 0 10px; }
.how-steps {
    list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.how-steps li {
    counter-increment: step;
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
}
.how-steps li::before {
    content: counter(step);
    position: absolute; top: 14px; right: 16px;
    font-size: 12px; font-weight: 800; color: var(--muted);
    letter-spacing: .06em;
}
.how-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    margin-bottom: 10px;
}
.how-steps h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.how-steps p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.learn-more summary { cursor: pointer; }

/* Four stat tiles become a 2x2 grid before the single-column phone layout. */
@media (max-width: 1180px) {
    .demo-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .how-steps { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
    /* Phones: let the model-table action pills wrap rather than widen the table. */
    .model-panel table.grid td.rowactions { width: auto; white-space: normal; line-height: 2.2; }
    .demo-stats { grid-template-columns: 1fr; gap: 8px; }
    .demo-stats li { flex-direction: row; align-items: baseline; gap: 10px; }
    .demo-stats .stat-big { font-size: 22px; min-width: 64px; }
    .card.demo .chart, .demo-loading { height: 200px; }
    .card.demo .legend .key { display: block; margin: 2px 0; }
    .hero-sub { font-size: 15px; }
    .hero-headline { font-size: 22px; }
}
/* The pillars sit under the full-width pitch, so let them span it too. */
.lead-points { max-width: none; }


/* ============================================================
   My-Rx Check theme
   ------------------------------------------------------------
   1. Colour tokens. The variable NAMES are My Income Model's
      (every rule above uses them); only the values change.
        --navy  -> pharmacy green     --gold -> pill-bottle amber
   ============================================================ */
:root {
    --navy: #0f5c56;
    --navy2: #1b7a70;
    --navy-deep: #0a403c;
    --gold: #e08a1e;
    --gold-soft: #f3c98a;

    --accent: #0d7a6f;
    --accent-soft: #e2f3f0;

    --ink: #1c2a29;
    --muted: #63736f;
    --line: #dfe8e5;
    --line-strong: #c9d6d2;

    --bg: #edf3f1;
    --bg-2: #f5f9f8;
    --card: #ffffff;

    --total-bg: #e8f1ee;
    --policy-1: #fbfdfc;
    --policy-2: #f3f8f6;
    --tooltip-bg: #17302d;

    /* Rx-specific tokens */
    --paper: #fffdf7;                 /* prescription-pad paper */
    --paper-line: #d8e6f0;            /* ruled lines on the pad */
    --bottle: #e08a1e;                /* amber bottle */
    --label-ink: #1c2a29;
    --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", "Liberation Mono", Menlo, monospace;

    /* Warning stickers (pharmacy auxiliary labels) */
    --stk-avoid-bg: #c62828;    --stk-avoid-ink: #ffffff;
    --stk-caution-bg: #ef7d00;  --stk-caution-ink: #231300;
    --stk-monitor-bg: #ffd43b;  --stk-monitor-ink: #3a2e00;
    --stk-info-bg: #1f6fb5;     --stk-info-ink: #ffffff;
    --stk-ok-bg: #2e7d32;       --stk-ok-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --navy: #14524d; --navy2: #1c6a63; --navy-deep: #0c3532;
        --gold: #f0a64a; --gold-soft: #f6cf9a;
        --accent: #5fc9bb; --accent-soft: #173330;
        --ink: #e6efed; --muted: #93a6a2; --line: #26342f; --line-strong: #364640;
        --bg: #0c1413; --bg-2: #121c1a; --card: #18231f;
        --heading: #9fdcd2; --ink-2: #c3d0cc; --total-bg: #1c2e2a;
        --disabled-bg: #0f1716; --disabled-ink: #62736f;
        --policy-1: #17231f; --policy-2: #121c19; --tooltip-bg: #081110;
        --paper: #1d2622; --paper-line: #2c3a37; --label-ink: #e6efed;
    }
}
:root[data-theme="dark"] {
    --navy: #14524d; --navy2: #1c6a63; --navy-deep: #0c3532;
    --gold: #f0a64a; --gold-soft: #f6cf9a;
    --accent: #5fc9bb; --accent-soft: #173330;
    --ink: #e6efed; --muted: #93a6a2; --line: #26342f; --line-strong: #364640;
    --bg: #0c1413; --bg-2: #121c1a; --card: #18231f;
    --heading: #9fdcd2; --ink-2: #c3d0cc; --total-bg: #1c2e2a;
    --disabled-bg: #0f1716; --disabled-ink: #62736f;
    --policy-1: #17231f; --policy-2: #121c19; --tooltip-bg: #081110;
    --paper: #1d2622; --paper-line: #2c3a37; --label-ink: #e6efed;
}

/* The "Soft" half of the wordmark and the brand glyph sit on the green bar. */
.brand-by { color: #cfe6e1; }
.rx-mark {
    display: inline-block;
    margin-right: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-soft);
    transform: translateY(2px);
}

/* A faint cross-hatch on the page background, like the safety pattern on a prescription blank. */
body {
    background-color: var(--bg);
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--navy) 4%, transparent) 25%, transparent 25%),
        linear-gradient(225deg, color-mix(in srgb, var(--navy) 4%, transparent) 25%, transparent 25%);
    background-size: 22px 22px;
}

/* ------------------------------------------------------------
   2. Prescription pad (Home hero, and the "nothing yet" states)
   ------------------------------------------------------------ */
.rx-pad {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 6px 6px var(--r-md) var(--r-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
/* Gummed binding strip across the top of the pad. */
.rx-pad::before {
    content: "";
    display: block;
    height: 12px;
    background: repeating-linear-gradient(90deg, var(--navy) 0 14px, var(--navy2) 14px 28px);
}
.rx-pad-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 14px 22px 10px;
    border-bottom: 2px solid var(--navy);
}
.rx-pad-head .clinic { font-weight: 800; font-size: 17px; color: var(--heading); letter-spacing: .2px; }
.rx-pad-head .clinic small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: 0; }
.rx-pad-head .padmeta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.5; }
.rx-pad-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 18px;
    padding: 16px 22px 20px;
    /* ruled paper */
    background-image: linear-gradient(var(--paper-line) 1px, transparent 1px);
    background-size: 100% 34px;
    background-position: 0 14px;
}
.rx-symbol {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    font-weight: 700;
    line-height: .9;
    color: var(--navy);
    user-select: none;
}
:root[data-theme="dark"] .rx-symbol { color: var(--heading); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx-symbol { color: var(--heading); } }
.rx-lines { list-style: none; margin: 0; padding: 0; min-width: 0; }
.rx-lines li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-height: 34px;
    line-height: 34px;
    font-size: 15.5px;
}
.rx-lines .drug { font-weight: 700; color: var(--label-ink); }
.rx-lines .sig { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.rx-lines .sticker { line-height: 1.2; }
.rx-pad-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
    padding: 10px 22px 14px;
    border-top: 1px dashed var(--line-strong);
    font-size: 12.5px;
    color: var(--muted);
}
.rx-pad-foot .sig-line { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 17px; color: var(--heading); }

/* ------------------------------------------------------------
   3. Medication labels (the label on a prescription bottle)
   ------------------------------------------------------------ */
.rx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    grid-column: 1 / -1;
}
.rx-label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 10px 12px 12px 22px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
/* The amber of the bottle showing at the label's edge. */
.rx-label::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 10px;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bottle) 80%, #fff) 0%, var(--bottle) 45%, color-mix(in srgb, var(--bottle) 75%, #000) 100%);
}
.rx-label.supp::before { background: linear-gradient(180deg, #8bc34a, #558b2f); }
.rx-label-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    border-bottom: 1px dashed var(--line-strong);
    padding-bottom: 4px;
}
.rx-label-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--label-ink);
    overflow-wrap: anywhere;
}
.rx-label-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.rx-label-sub b { color: var(--ink-2); font-weight: 600; }
.rx-label .txt { width: 100%; font-family: var(--mono); font-size: 12.5px; }
.rx-label-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.rx-label-actions a { font-size: 12px; }

/* ------------------------------------------------------------
   4. Warning stickers and findings
   ------------------------------------------------------------ */
.sticker {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.sticker.avoid   { background: var(--stk-avoid-bg);   color: var(--stk-avoid-ink); }
.sticker.caution { background: var(--stk-caution-bg); color: var(--stk-caution-ink); }
.sticker.monitor { background: var(--stk-monitor-bg); color: var(--stk-monitor-ink); }
.sticker.noted    { background: var(--stk-info-bg);    color: var(--stk-info-ink); }
.sticker.ok      { background: var(--stk-ok-bg);      color: var(--stk-ok-ink); }
.sticker.quiet   { background: var(--bg-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }

.findings { display: grid; gap: 12px; margin: 10px 0 4px; }
.finding {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 6px solid var(--stk-info-bg);
    border-radius: var(--r-sm);
    padding: 12px 16px 12px 14px;
    box-shadow: var(--shadow-sm);
    break-inside: avoid;
}
.finding.avoid   { border-left-color: var(--stk-avoid-bg); }
.finding.caution { border-left-color: var(--stk-caution-bg); }
.finding.monitor { border-left-color: var(--stk-monitor-bg); }
.finding.noted    { border-left-color: var(--stk-info-bg); }
.finding-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.finding-title { font-size: 16px; font-weight: 800; color: var(--heading); overflow-wrap: anywhere; }
.finding-title .plus { color: var(--gold); padding: 0 4px; }
.finding-summary { margin: 6px 0 8px; }
.evidence { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.evidence li {
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 13.5px;
}
.evidence q { quotes: "\201C" "\201D"; color: var(--ink-2); }
.evidence .src { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.evidence .src .cls { margin-left: 6px; }

/* Summary tiles: one per sticker colour. */
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.tally-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--stk-info-bg);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.tally-tile.avoid   { border-top-color: var(--stk-avoid-bg); }
.tally-tile.caution { border-top-color: var(--stk-caution-bg); }
.tally-tile.monitor { border-top-color: var(--stk-monitor-bg); }
.tally-tile.noted    { border-top-color: var(--stk-info-bg); }
.tally-num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--heading); }
.tally-lbl { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* Important-information banner shown with every result. */
.rx-caution {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-left: 6px solid var(--stk-caution-bg);
    color: var(--warn-ink);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
}
.rx-caution .ico { font-size: 22px; line-height: 1.1; }
.rx-caution b { color: inherit; }

/* Subscriber-only section shown locked to other tiers. */
.card.locked { border: 1px dashed var(--line-strong); background: var(--bg-2); box-shadow: none; }
.card.locked h3::before { content: "\1F512\00A0"; }

/* Section headings on the check page. */
.check-section { margin-top: 22px; }
.check-section > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 4px; }
.check-section .count { font-size: 12px; font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------
   5. Search boxes and pick lists on the My list page
   ------------------------------------------------------------ */
.search-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.search-row .txt { flex: 1 1 260px; min-width: 0; }
.search-results {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--card);
}
.search-results li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
}
.search-results li:first-child { border-top: 0; }
.search-results li:hover { background: var(--accent-soft); }
.search-results .res-name { flex: 1 1 220px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.search-results .res-sub { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }
.search-results select.txt { flex: 0 1 200px; }
.wide { grid-column: 1 / -1; }
.quick-add { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.quick-add .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); }
.quick-add .chip:hover { background: var(--accent-soft); }
.quick-add .chip:disabled { opacity: .45; cursor: default; }
.code-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
}
.save-state { font-size: 12.5px; color: var(--muted); }
.save-state.ok::before { content: "\2713\00A0"; color: var(--good); font-weight: 800; }
td.num-in { width: 130px; }
td.num-in .txt { width: 110px; text-align: right; }

/* ------------------------------------------------------------
   6. Printing the report (subscriber feature): the report only,
      on white, with link addresses written out.
   ------------------------------------------------------------ */
.print-only { display: none; }
@media print {
    :root, :root[data-theme="dark"] {
        --bg: #fff; --bg-2: #f6f6f6; --card: #fff; --ink: #000; --ink-2: #222; --muted: #444;
        --heading: #000; --line: #bbb; --line-strong: #888; --paper: #fff;
        --warn-bg: #fff; --warn-ink: #000; --warn-line: #888;
    }
    body { background: #fff !important; font-size: 11.5pt; }
    .topbar, .sidenav, .foot, .toolbar, .no-print, .theme-toggle, .nav-toggle, .model-panel { display: none !important; }
    .content { padding: 0 !important; max-width: none !important; }
    .print-only { display: block; }
    .card, .finding, .tally-tile { box-shadow: none !important; }
    .sticker { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .finding { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .evidence a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

@media (max-width: 640px) {
    .rx-pad-body { grid-template-columns: minmax(0, 1fr); }
    .rx-symbol { font-size: 44px; }
    .rx-pad-head .padmeta { text-align: left; }
}

/* Small fixes for the Rx pages. */
.rx-label a, .evidence .src a, .form-grid a, .finding a { color: var(--accent); }
.quick-add .chip::before { display: none; }
.form-grid .tablewrap.wide { max-height: none; }
.tally-lbl .sticker { white-space: normal; }
/* Data sources table: three text columns that wrap instead of running off the card. */
table.grid.sources { table-layout: fixed; width: 100%; }
table.grid.sources th, table.grid.sources td { white-space: normal; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.grid.sources th:nth-child(1) { width: 24%; }
table.grid.sources th:nth-child(3) { width: 30%; }

/* Admin › Evaluate: test set, history and the add-pair form. */
.btn.small { padding: 4px 10px; font-size: 12.5px; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: 4px; }
tr.retired td { opacity: .55; }
tr.selected td { background: var(--accent-soft); }
table.grid.test-set th:nth-child(1) { width: 22%; }
table.grid.test-set th:nth-child(2) { width: 12%; }
table.grid.test-set th:nth-child(4) { width: 18%; }
table.grid.test-set th:nth-child(5) { width: 190px; }
.test-pair-form { border: 1px solid var(--line-strong); margin: 12px 0; }
.test-pair-form .form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.test-pair-form .form-grid > * { grid-row: auto; }
.test-pair-form .form-grid > label.wide { grid-column: 1 / -1; align-items: stretch; }
.test-pair-form .txt { width: 100%; box-sizing: border-box; }
.test-pair-form textarea.txt { font: inherit; resize: vertical; }
/* Three-way findings: the list of medications and the group each counts in. */
.combo-members { margin: 4px 0 8px 18px; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.combo-members li { margin: 1px 0; }
table.grid.sources.rules th:nth-child(1) { width: 22%; }
table.grid.sources.rules th:nth-child(2) { width: 22%; }
table.grid.sources.rules th:nth-child(3) { width: 150px; }

/* ---------- Home: feature showcase ---------- */
.features { margin: 26px 0 22px; }
.features-kicker {
    margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold);
}
.features-title { margin: 0 0 14px; font-size: 24px; font-weight: 800; color: var(--heading); letter-spacing: -.3px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.08)); }
.feature h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--heading); }
.feature p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 10px;
    background: var(--accent-soft); color: var(--accent);
}
.feature-link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.feature-tier {
    display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; background: var(--gold-soft); color: #3a2c08;
}
.source-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.source-chips li {
    padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 1px solid var(--line-strong); color: var(--heading); background: var(--bg-2);
}

/* The featured card: three-way combinations, two columns wide, with a small diagram. */
.feature-3way {
    grid-column: span 2;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: center;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy2) 100%);
    border-color: transparent;
    color: #eaf6f4;
    padding: 22px 22px 18px;
}
.feature-3way h3 { color: #ffffff; font-size: 20px; }
.feature-3way p { color: #d5ebe7; font-size: 14.5px; }
.feature-badge {
    display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px;
    background: var(--gold); color: #2b1d00; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.rule-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rule-chips li {
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: help;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #ffffff;
}
.feature-3way-art { margin: 0; text-align: center; }
.feature-3way-art svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.feature-3way-art figcaption { margin-top: 6px; font-size: 12.5px; color: #cfe6e1; line-height: 1.45; }
.feature-3way-art figcaption b { color: #ffffff; }
.tw-links line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.tw-links line.tw-pair { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tw-node rect { fill: #ffffff; stroke: rgba(0,0,0,.08); }
.tw-node text { fill: #0f3d39; font: 700 13px system-ui, "Segoe UI", sans-serif; text-anchor: middle; }
.tw-core circle { fill: var(--stk-caution-bg); stroke: #ffffff; stroke-width: 3; }
.tw-core text { fill: #231300; font: 900 24px system-ui, "Segoe UI", sans-serif; text-anchor: middle; }
.tw-core text.tw-core-sub { font: 800 9.5px system-ui, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: uppercase; }

/* The three-way line on the sample prescription pad. */
.rx-lines li.three-way { background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 8px; padding: 0 8px; margin: 0 -8px 2px; }
.tag-3way {
    display: inline-block; align-self: center; line-height: 1.4; padding: 1px 7px; border-radius: 6px;
    background: var(--navy); color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: .04em;
}

@media (max-width: 1000px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-3way { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .feature-3way { grid-template-columns: minmax(0, 1fr); }
    .features-title { font-size: 21px; }
}
@media print { .features { display: none; } }

/* Subscribe: "or pay by card" divider between the PayPal and card buttons, and the card logos. */
.paypal-wrap #paypal-button-container { max-width: 420px; }
.pp-or {
    display: flex; align-items: center; gap: 10px; margin: 4px 0 8px;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.pp-or::before, .pp-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.pp-or span { white-space: nowrap; }
.pp-or[hidden] { display: none; }
.card-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; max-width: 520px; }
.card-logos img { display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.card-logos-lbl { font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) { .pp-or span { white-space: normal; text-align: center; } }

/* Subscribe page: the three membership tiers, styled like the Home "How it works" panels.
   The visitor's own tier gets the gold rule used by the featured account cards. */
.tier-panels {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.tier-panels li {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.tier-panels li.current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow-sm); }
.tier-panels .tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-panels h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--heading); text-transform: uppercase; letter-spacing: .04em; }
.tier-panels .tier-price { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.tier-panels p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.tier-panels .you-tag {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--good); background: var(--good-soft);
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
@media (max-width: 820px) {
    .tier-panels { grid-template-columns: 1fr; gap: 10px; }
}

/* Tier checklists: green check = included, empty ring = not included (muted). */
.tier-panels .tier-sum { margin: 0 0 10px; font-size: 13.5px; }
.tier-checks { list-style: none; margin: 0; padding: 0; }
.tier-checks li {
    position: relative; padding-left: 26px; margin: 0 0 8px;
    font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.tier-checks li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
}
.tier-checks li.yes::before {
    background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.tier-checks li.no { color: var(--muted); }
.tier-checks li.no::before { border: 2px solid var(--line-strong); background: transparent; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tier-checks .tc-label { display: block; font-weight: 600; color: var(--heading); }
.tier-checks .tc-detail { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.tier-checks li.no .tc-label { color: var(--muted); font-weight: 500; }

/* Subscribe: PayPal email differs from the My-Rx account email */
.sub-notes .pp-email-help ul { margin: 4px 0 4px 18px; padding: 0; }
.sub-notes .pp-email-help li { margin: 2px 0; }
.note-inline.pp-email-diff { font-size: 14.5px; line-height: 1.55; padding: 12px 16px; margin: 10px 0; border-left: 4px solid var(--gold); }
.note-inline.pp-email-diff ul { margin: 6px 0 6px 18px; padding: 0; }


/* ============================================================
   Page banner (Components/PageBanner.razor)
   A decorative illustrated band under each page's <h1>: the
   pharmacy-green of the top bar with amber and prescription-paper
   shapes drawn in inline SVG. All colours route through the theme
   tokens below, so dark mode needs only the paper override.
   ============================================================ */
.page-banner {
    --pb-paper: #fffdf7;
    --pb-amber: var(--gold);
    --pb-deep: var(--navy-deep);
    --pb-mid: color-mix(in srgb, #ffffff 22%, var(--navy2));
    --pb-rule: #b8cdc7;

    position: relative;
    height: 132px;
    margin: -4px 0 20px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 85% 50%, color-mix(in srgb, var(--navy2) 85%, #ffffff) 0%, transparent 55%),
        linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy2) 100%);
    border-bottom: 3px solid var(--gold);
    box-shadow: var(--shadow-sm);
}
.page-banner svg { display: block; position: absolute; top: 0; height: 100%; }
.page-banner .pb-back  { left: 0; width: 100%; }
.page-banner .pb-front { right: 8px; width: min(100%, 360px); }

.page-banner .pb-p   { fill: var(--pb-paper); }
.page-banner .pb-a   { fill: var(--pb-amber); }
.page-banner .pb-d   { fill: var(--pb-deep); }
.page-banner .pb-m   { fill: var(--pb-mid); }
.page-banner .pb-r   { fill: none; stroke: var(--pb-rule); stroke-width: 3; stroke-linecap: round; }
.page-banner .pb-sd  { fill: none; stroke: var(--pb-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.page-banner .pb-sp  { fill: none; stroke: var(--pb-paper); stroke-linecap: round; stroke-linejoin: round; }
.page-banner .pb-sa  { fill: none; stroke: var(--pb-amber); stroke-linecap: round; stroke-linejoin: round; }
.page-banner .pb-lens { fill: #ffffff; opacity: .16; }
.page-banner .pb-rxt { fill: var(--pb-deep); font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.page-banner .pb-glow  { fill: #ffffff; opacity: .05; }
.page-banner .pb-decor { opacity: .17; }
.page-banner .pb-wave  { fill: none; stroke: var(--pb-amber); stroke-width: 2; opacity: .45; }
.page-banner .pb-wave.thin { stroke-width: 1.2; opacity: .25; }

/* A slow, gentle drift on the motif; off for anyone who prefers reduced motion. */
.page-banner .pb-motif { animation: pb-float 7s ease-in-out infinite; }
@keyframes pb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .page-banner .pb-motif { animation: none; }
}

/* Dark mode: soften the paper so it doesn't glare against the dark page. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .page-banner { --pb-paper: #e2ebe8; --pb-rule: #9fb6b0; }
}
:root[data-theme="dark"] .page-banner { --pb-paper: #e2ebe8; --pb-rule: #9fb6b0; }

@media (max-width: 820px) {
    .page-banner { height: 96px; margin-bottom: 16px; border-radius: var(--r-md); }
}
@media (max-width: 560px) {
    .page-banner { height: 78px; }
}
@media print {
    .page-banner { display: none; }
}