/* Credit Dispute Center — page styling for member-credit-dispute.html.
 *
 * Everything here is scoped to `body.cd-page`. Twenty-three member pages load
 * vv-member-dashboard.css, and this page overrides a few of its defaults
 * (type scale, wrap width) that must not travel; the scoping class is what
 * keeps them local. Same precedent as body.member-dashboard-v-social.
 *
 * Portal rules apply (HANDOFF §8d): separation comes from a hairline border,
 * never elevation; exactly two radii (--radius for surfaces, --radius-sm for
 * controls and chips); emphasis comes from stroke COLOUR, not stroke weight.
 * Every colour goes through a token so the dark-mode swap reaches it.
 *
 * The page also loads the Tailwind CDN (see the comment in the page head).
 * That is deliberate and deferred repo-wide — the rules below deliberately
 * override a few Tailwind utilities rather than editing 90-odd call sites.
 */

/* ------------------------------------------------------------------ *
 * 0. Accent-as-text
 *
 * --teal (#C1440E) is the brand accent and is correct on a light ground, but
 * it only reaches 3.2:1 on the dark surface — below AA for body-sized text.
 * The repo already hit this exact wall on the dashboard donut and resolved it
 * with a lighter vermilion in dark mode (HANDOFF §8b, "Contrast exception").
 * Same resolution here, as a token, so the choice is made once.
 *
 * Use --accent-text for accent TEXT and ICONS. Borders, backgrounds and
 * accent-color keep --teal: they carry no contrast requirement, and changing
 * them would shift the brand colour rather than fix a legibility problem.
 * ------------------------------------------------------------------ */

body.cd-page { --accent-text: var(--teal); }
:root[data-theme="dark"] body.cd-page { --accent-text: #E87A2E; }

/* ------------------------------------------------------------------ *
 * 1. Readable measure
 * ------------------------------------------------------------------ */

/* .dash-wrap-wide is 1600px, which is right for a dashboard of tiles and
   badly wrong for a single-column guided form — prose ran to ~1550px. */
body.cd-page .cd-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ------------------------------------------------------------------ *
 * 2. Type floor
 *
 * The page had 92 `text-xs` (12px) and 11 hardcoded .75/.8rem rules, so
 * nearly all of its instructional copy sat at 12px. This page has to work
 * for people reading it anxiously on a phone, so 12px is not available.
 * Overriding the utilities here rather than at each call site keeps the
 * diff small and stops the floor from drifting back down later.
 * ------------------------------------------------------------------ */

body.cd-page { font-size: 1rem; }

body.cd-page .text-xs { font-size: .8125rem; line-height: 1.55; }
body.cd-page .text-sm { font-size: .9375rem; line-height: 1.6; }

body.cd-page .panel p,
body.cd-page .panel li { font-size: .9375rem; line-height: 1.6; }

body.cd-page .cd-help {
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.6;
    margin: .25rem 0 1rem;
}

body.cd-page label.block,
body.cd-page .panel label.block { font-size: .8125rem; }

/* Controls: 44px minimum target, everywhere, no exceptions. */
body.cd-page .btn,
body.cd-page .btn-ghost,
body.cd-page button.btn-ghost,
body.cd-page .input-field,
body.cd-page select.input-field {
    min-height: 44px;
}
body.cd-page textarea.input-field { min-height: 3.5rem; }
/* .btn-ghost in the shared admin sheet hardcodes `background: #fff` and
   `color: var(--navy)`, neither of which swaps for dark mode — on a dark card
   it renders as a white pill with near-black text. The card layout put a lot
   more of these on dark surfaces than the old tables did, so re-token it here.
   Scoped to this page rather than fixed in the shared sheet: that sheet is
   loaded by the admin console too and flattening it is deferred work. */
body.cd-page .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: var(--stroke) solid var(--border);
    color: var(--text);
}
body.cd-page .btn-ghost:hover {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--accent-text);
}
body.cd-page .cd-card-danger,
body.cd-page .btn-ghost.cd-card-danger { color: #dc2626; }
body.cd-page .btn-ghost.cd-card-danger:hover {
    background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.4); color: #dc2626;
}
:root[data-theme="dark"] body.cd-page .cd-card-danger,
:root[data-theme="dark"] body.cd-page .btn-ghost.cd-card-danger { color: #f87171; }
:root[data-theme="dark"] body.cd-page .btn-ghost.cd-card-danger:hover { color: #f87171; }

/* ------------------------------------------------------------------ *
 * 3. Carried over from the page's old inline <style> block
 * Each of these has a real reason; the reasons travel with them.
 * ------------------------------------------------------------------ */

/* The shared header renders its nav as a collapsible panel by default; this
   page shows it inline. */
body.cd-page .dash-header .dash-nav {
    display: flex; flex-direction: row; position: static; top: auto;
    padding: 0; background: none; border: none; border-radius: 0;
    box-shadow: none; overflow: visible;
}

body.cd-page .biz-card {
    background: var(--bg); border: var(--stroke) solid var(--border);
    border-radius: var(--radius-sm); padding: 1.1rem 1.25rem;
}
body.cd-page .biz-card h3 { color: var(--heading); }

:root[data-theme="dark"] body.cd-page .input-field {
    background: var(--bg); border-color: var(--border); color: var(--text);
}
:root[data-theme="dark"] body.cd-page .input-field::placeholder { color: var(--muted); }

/* Modals follow the page theme instead of hardcoding a white card — in night
   mode a white card with tokened (light) label text was unreadable. */
body.cd-page .cd-modal-card {
    background: var(--surface, #fff);
    border: var(--stroke) solid var(--border, #e2e8f0);
    color: var(--text, #0f1c2e);
}
body.cd-page .cd-modal-card h3 { color: var(--heading, #0A2540); }

/* iOS Safari zoom-jumps on focus for inputs under 16px — this page is
   form-heavy, so on phones every field gets bumped. */
@media (max-width: 640px) {
    body.cd-page .input-field { font-size: 16px; }
}

/* ------------------------------------------------------------------ *
 * 4. Confidence chips (report analyzer)
 * ------------------------------------------------------------------ */

body.cd-page .cd-tag {
    display: inline-block; font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: var(--radius-sm);
    border: var(--stroke) solid transparent;
}
body.cd-page .cd-conf-high { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
body.cd-page .cd-conf-medium { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* "low" was --bg on --muted with no border — on the dark ground the chip had
   no edge and effectively disappeared. The hairline is what makes it read. */
body.cd-page .cd-conf-low { background: var(--bg); color: var(--muted); border-color: var(--border); }
:root[data-theme="dark"] body.cd-page .cd-conf-high { background: rgba(16,185,129,.15); color: #34d399; border-color: rgba(16,185,129,.35); }
:root[data-theme="dark"] body.cd-page .cd-conf-medium { background: rgba(156,122,60,.18); color: #d9b876; border-color: rgba(156,122,60,.4); }

/* ------------------------------------------------------------------ *
 * 5. Status pills
 *
 * These replace raw database enums (`draft`, `overdue`, `no_response`) that
 * used to print straight to the page. Four states, by what the member should
 * feel: neutral = nothing to do, accent = your move, wait = their move,
 * win = resolved.
 * ------------------------------------------------------------------ */

body.cd-page .cd-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 700; line-height: 1.3;
    padding: .25rem .6rem; border-radius: var(--radius-sm);
    border: var(--stroke) solid var(--border);
    background: var(--bg); color: var(--muted);
    white-space: nowrap;
}
body.cd-page .cd-pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
body.cd-page .cd-pill-act { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-line); }
body.cd-page .cd-pill-wait { background: #fffbeb; color: #b45309; border-color: #fde68a; }
body.cd-page .cd-pill-win { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
:root[data-theme="dark"] body.cd-page .cd-pill-wait { background: rgba(156,122,60,.18); color: #d9b876; border-color: rgba(156,122,60,.4); }
:root[data-theme="dark"] body.cd-page .cd-pill-win { background: rgba(16,185,129,.15); color: #34d399; border-color: rgba(16,185,129,.35); }

/* ------------------------------------------------------------------ *
 * 6. "Where You Stand" strip
 * ------------------------------------------------------------------ */

body.cd-page .cd-status-strip { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
body.cd-page .cd-stat {
    flex: 1 1 9rem; background: var(--surface); border: var(--stroke) solid var(--border);
    border-radius: var(--radius); padding: .9rem 1.1rem;
}
body.cd-page .cd-stat .n {
    font-size: 1.6rem; font-weight: 800; color: var(--heading);
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
body.cd-page .cd-stat .l {
    font-size: .75rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700; margin-top: .15rem;
}
body.cd-page .cd-stat.win .n { color: #047857; }
:root[data-theme="dark"] body.cd-page .cd-stat.win .n { color: #34d399; }
body.cd-page .cd-next-action {
    flex: 2 1 18rem; background: var(--surface); border: var(--stroke) solid var(--border);
    border-left: 1px solid var(--teal);
    border-radius: var(--radius); padding: .9rem 1.1rem;
}
body.cd-page .cd-next-action .l {
    font-size: .75rem; color: var(--accent-text); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700;
}
body.cd-page .cd-next-action p { font-size: .9375rem; line-height: 1.55; margin: .3rem 0 0; color: var(--text); }

body.cd-page .cd-celebrate {
    background: #ecfdf5; border: var(--stroke) solid #a7f3d0; border-radius: var(--radius);
    padding: .9rem 1.1rem; margin-bottom: 1rem; color: #047857;
    font-weight: 600; font-size: .9375rem;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
body.cd-page .cd-celebrate .btn-ghost { margin-left: auto; color: #047857; }
:root[data-theme="dark"] body.cd-page .cd-celebrate { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #34d399; }
:root[data-theme="dark"] body.cd-page .cd-celebrate .btn-ghost { color: #34d399; }

/* ------------------------------------------------------------------ *
 * 7. Case cards — items and letters
 *
 * These replace two 7-column tables. The tables were only readable below
 * 640px, where a card fallback took over; the cards are now the layout at
 * every width, because nobody reads a 7-column grid to decide whether to
 * challenge a debt.
 * ------------------------------------------------------------------ */

body.cd-page .cd-cards { display: flex; flex-direction: column; gap: .75rem; }

body.cd-page .cd-card {
    background: var(--surface); border: var(--stroke) solid var(--border);
    border-radius: var(--radius); padding: .95rem 1.1rem;
}
body.cd-page .cd-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
}
body.cd-page .cd-card-name {
    font-weight: 700; font-size: 1rem; color: var(--heading); line-height: 1.35;
}
body.cd-page .cd-card-sub { font-size: .8125rem; color: var(--muted); margin-top: .1rem; }
body.cd-page .cd-card-issue { font-size: .9375rem; color: var(--text); margin-top: .5rem; line-height: 1.5; }
body.cd-page .cd-card-detail { font-size: .875rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }

/* Facts that are true but secondary — round, suggested next document, dates. */
body.cd-page .cd-card-meta {
    display: flex; flex-wrap: wrap; gap: .3rem .85rem;
    font-size: .8125rem; color: var(--muted); margin-top: .55rem;
}
body.cd-page .cd-card-meta b { color: var(--text); font-weight: 600; }

body.cd-page .cd-card-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-top: .7rem; padding-top: .7rem;
    border-top: var(--stroke) solid var(--border);
}
body.cd-page .cd-card-include {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .875rem; font-weight: 600; color: var(--text);
    padding: .5rem .7rem; margin-right: auto;
    border: var(--stroke) solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; min-height: 44px;
}
body.cd-page .cd-card-include:hover { border-color: var(--accent-line); background: var(--accent-tint); }
body.cd-page .cd-card-include input { accent-color: var(--teal); width: 1rem; height: 1rem; }
/* Ticked reads as "selected", not just "a checked box" — this checkbox is the
   one that decides what goes into a legal document. */
body.cd-page .cd-card-include:has(input:checked) {
    border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-text);
}
body.cd-page .cd-card-danger { color: #dc2626; }
body.cd-page .cd-card-danger:hover { background: rgba(220,38,38,.08); }
body.cd-page .cd-card-next { color: var(--accent-text); font-weight: 700; }

/* Round headings between card groups. */
body.cd-page .cd-round-head {
    font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); margin: 1rem 0 .1rem; display: flex; align-items: center; gap: .6rem;
}
body.cd-page .cd-round-head::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}
body.cd-page .cd-cards > .cd-round-head:first-child { margin-top: 0; }

/* Deadline line inside a letter card. Colour is the whole signal here, so it
   also carries an icon — colour alone is not an accessible status. */
body.cd-page .cd-due-late { color: #dc2626; font-weight: 600; }
body.cd-page .cd-due-soon { color: #b45309; font-weight: 600; }
:root[data-theme="dark"] body.cd-page .cd-due-late { color: #f87171; }
:root[data-theme="dark"] body.cd-page .cd-due-soon { color: #d9b876; }

/* ------------------------------------------------------------------ *
 * 8. Empty states
 * ------------------------------------------------------------------ */

body.cd-page .cd-empty {
    border: var(--stroke) dashed var(--border); border-radius: var(--radius);
    padding: 1.5rem 1.25rem; text-align: center; color: var(--muted);
    font-size: .9375rem; line-height: 1.6;
}
body.cd-page .cd-empty i { font-size: 1.5rem; color: var(--border); display: block; margin-bottom: .5rem; }
body.cd-page .cd-empty b { color: var(--text); }

/* ------------------------------------------------------------------ *
 * 9. Report upload + the "don't have one yet" partner card
 * ------------------------------------------------------------------ */

body.cd-page .cd-filerow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* A bare <input type=file> is the least accessible control on the page: no
   usable label, no consistent size, unstyleable across browsers. Hide it and
   drive it from a real label instead. */
body.cd-page .cd-file-input {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.cd-page .cd-file-label {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem; min-height: 44px;
    border: var(--stroke) solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font-size: .9375rem; font-weight: 600; cursor: pointer;
}
body.cd-page .cd-file-label:hover { border-color: var(--teal); color: var(--accent-text); }
body.cd-page .cd-file-input:focus-visible + .cd-file-label { box-shadow: 0 0 0 3px rgba(193,68,14,.25); }
body.cd-page .cd-file-name { font-size: .875rem; color: var(--muted); }

body.cd-page .cd-partner {
    margin-top: 1.25rem; padding: 1rem 1.15rem;
    background: var(--bg); border: var(--stroke) solid var(--border);
    border-radius: var(--radius);
}
body.cd-page .cd-partner h3 {
    font-size: .9375rem; font-weight: 700; color: var(--heading); margin: 0 0 .35rem;
}
body.cd-page .cd-partner .cd-disclosure {
    font-size: .8125rem; color: var(--muted); line-height: 1.55; margin-top: .85rem;
}

/* ------------------------------------------------------------------ *
 * 10. Jargon definitions
 *
 * <details> rather than a tooltip: it works on touch, it works with a screen
 * reader, and it survives printing. Every term on this page is one somebody
 * could reasonably not know.
 * ------------------------------------------------------------------ */

body.cd-page .cd-def {
    display: inline-block; margin: .35rem 0;
    font-size: .875rem;
}
body.cd-page .cd-def > summary {
    cursor: pointer; color: var(--accent-text); font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem 0;
}
body.cd-page .cd-def > summary::-webkit-details-marker { display: none; }
body.cd-page .cd-def > p {
    margin: .35rem 0 0; padding: .6rem .8rem;
    background: var(--accent-tint); border-left: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    color: var(--text); font-size: .875rem; line-height: 1.6; max-width: 62ch;
}

/* ------------------------------------------------------------------ *
 * 11. Result callouts (letter generated, affidavit built)
 * ------------------------------------------------------------------ */

body.cd-page .cd-result {
    padding: .9rem 1.1rem; border-radius: var(--radius);
    background: #ecfdf5; border: var(--stroke) solid #a7f3d0;
}
body.cd-page .cd-result p { color: #047857; }
body.cd-page .cd-result a { color: #047857; font-weight: 700; text-decoration: underline; }
:root[data-theme="dark"] body.cd-page .cd-result { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
:root[data-theme="dark"] body.cd-page .cd-result p,
:root[data-theme="dark"] body.cd-page .cd-result a { color: #34d399; }

body.cd-page .cd-error { color: #dc2626; font-size: .9375rem; line-height: 1.6; }
:root[data-theme="dark"] body.cd-page .cd-error { color: #f87171; }

body.cd-page .cd-warn {
    color: #b45309; font-size: .875rem; line-height: 1.55; margin-top: .35rem;
}
:root[data-theme="dark"] body.cd-page .cd-warn { color: #d9b876; }

/* ------------------------------------------------------------------ *
 * 12. Legal fine print
 * Wording is frozen for compliance; only its presentation is ours.
 * ------------------------------------------------------------------ */

body.cd-page .cd-legal {
    color: var(--muted); font-size: .8125rem; line-height: 1.6;
    margin-bottom: 1.25rem; max-width: 78ch;
}
body.cd-page .cd-legal a { color: var(--accent-text); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 13. Step progress indicator & walkthrough button
 * ------------------------------------------------------------------ */

body.cd-page .cd-progress-bar {
    margin-bottom: 1.5rem; padding: 1rem 0;
    border-bottom: var(--stroke) solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
body.cd-page .cd-progress-bar .cd-progress-inner {
    flex: 1;
}
body.cd-page .cd-progress-track {
    height: 2px; background: var(--bg); border-radius: 2px;
    overflow: hidden; margin-bottom: .75rem;
}
body.cd-page .cd-progress-fill {
    height: 100%; background: var(--teal); width: 100%;
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
body.cd-page .cd-progress-steps {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: space-between;
}
body.cd-page #cd-replay-guide {
    flex-shrink: 0; white-space: nowrap; padding: .5rem .8rem;
    font-size: .8125rem; font-weight: 600;
    min-height: 40px;
}
body.cd-page #cd-replay-guide i {
    margin-right: .35rem;
}
body.cd-page .cd-progress-step {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    color: var(--muted); padding: .35rem .5rem;
    opacity: .6; transition: all .2s;
}
body.cd-page .cd-progress-step.active {
    color: var(--accent-text); opacity: 1; font-size: .8125rem;
}
body.cd-page .cd-progress-step.completed {
    color: #047857; opacity: .8;
}
:root[data-theme="dark"] body.cd-page .cd-progress-step.completed { color: #34d399; }
body.cd-page .cd-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--bg); border: var(--stroke) solid var(--border);
    font-weight: 700; font-size: .65rem;
}
body.cd-page .cd-progress-step.active .cd-step-num {
    background: var(--teal); color: #fff; border-color: var(--teal);
}
body.cd-page .cd-progress-step.completed .cd-step-num {
    background: #047857; color: #fff; border-color: #047857;
}
:root[data-theme="dark"] body.cd-page .cd-progress-step.completed .cd-step-num {
    background: #34d399; border-color: #34d399; color: #0f1c2e;
}

/* ------------------------------------------------------------------ *
 * 14. Step styling improvements
 * ------------------------------------------------------------------ */

body.cd-page .panel {
    background: var(--surface);
    border: var(--stroke) solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
}
body.cd-page .panel-head {
    margin-bottom: 1rem; padding-bottom: 1rem;
    border-bottom: var(--stroke) solid var(--border);
}
body.cd-page .panel-title {
    font-size: 1.125rem; font-weight: 700; color: var(--heading);
    display: flex; align-items: center; gap: .5rem; margin: 0;
}
body.cd-page .panel-title i { color: var(--accent-text); }

/* ------------------------------------------------------------------ *
 * 14b. Form section grouping
 * ------------------------------------------------------------------ */

body.cd-page .cd-form-section {
    margin-bottom: 1.5rem; padding-bottom: 1.5rem;
    border-bottom: var(--stroke) dashed var(--border);
}
body.cd-page .cd-form-section:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
body.cd-page .cd-form-section h3 {
    font-size: .9375rem; font-weight: 700; color: var(--heading);
    margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem;
}
body.cd-page .cd-form-section h3 i {
    font-size: .875rem; color: var(--muted);
}
body.cd-page .cd-form-section p:first-of-type { margin-top: 0; }

body.cd-page .cd-form-advanced {
    background: var(--bg); border: var(--stroke) solid var(--border);
    border-radius: var(--radius-sm); padding: 1rem;
    margin-top: 1.5rem;
}
body.cd-page .cd-form-advanced summary {
    cursor: pointer; font-weight: 600; color: var(--text);
    user-select: none; padding: .35rem 0;
    display: flex; align-items: center; gap: .4rem;
    list-style: none;
}
body.cd-page .cd-form-advanced summary::-webkit-details-marker { display: none; }
body.cd-page .cd-form-advanced summary i {
    font-size: .75rem; color: var(--muted); transition: transform .2s;
}
body.cd-page .cd-form-advanced[open] summary i {
    transform: rotate(90deg);
}
body.cd-page .cd-form-advanced > div { margin-top: 1rem; padding-top: 1rem; border-top: var(--stroke) solid var(--border); }

/* ------------------------------------------------------------------ *
 * 14c. Step 5 item selection cards
 * ------------------------------------------------------------------ */

body.cd-page .cd-gen-item-row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .85rem 1rem; margin-bottom: .5rem;
    border: var(--stroke) solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); cursor: pointer; transition: all .15s;
    min-height: 56px;
}
body.cd-page .cd-gen-item-row:hover {
    background: var(--accent-tint); border-color: var(--accent-line);
}
body.cd-page .cd-gen-item-row input[type="checkbox"] {
    width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex-shrink: 0;
    cursor: pointer; accent-color: var(--teal);
}
body.cd-page .cd-gen-item-row span {
    display: flex; flex-direction: column; gap: .25rem; flex: 1;
}
body.cd-page .cd-gen-item-row .font-medium {
    color: var(--heading); font-size: .9375rem; line-height: 1.3;
}
body.cd-page .cd-gen-item-row .cd-item-issue {
    font-size: .8125rem; color: var(--text); font-weight: 500;
    display: inline-block; padding: .2rem .5rem;
    background: var(--accent-tint); border-radius: var(--radius-sm);
    width: fit-content;
}
body.cd-page .cd-gen-item-row:has(input:checked) {
    background: var(--accent-tint); border-color: var(--accent-line);
}

/* ------------------------------------------------------------------ *
 * 15. Accessibility and output
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body.cd-page *,
    body.cd-page *::before,
    body.cd-page *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* The walkthrough hides every panel but the current step's via an inline
   display:none. On paper there are no steps — a member printing their case
   needs the whole thing, so force every panel back. */
@media print {
    body.cd-page #vv-cr-guide,
    body.cd-page .dash-header,
    body.cd-page .dash-footer,
    body.cd-page #cd-toast-container,
    body.cd-page .cd-card-actions,
    body.cd-page .theme-toggle { display: none !important; }
    body.cd-page .panel,
    body.cd-page [id^="cd-step-"] { display: block !important; break-inside: avoid; border-color: #ccc; }
    body.cd-page .cd-wrap { max-width: none; }
}