/* Crophalo: the report screen's look: the loading screen, the sticky bar, the seven tabs, the priorities panel, Overview and Options, the "i" card.
   Only the tokens and classes of css/app.css; no value is restated here. */
#view-report { padding: 0; }
.rv-wrap { max-width: var(--nav-w); margin: 0 auto; padding: 0 var(--gutter) 72px; }
.rv-sec { margin-top: var(--space-24); }
.rv-sec h2 { font-size: var(--fs-title2); }
.rv-notread { padding: var(--space-16); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
/* the sticky bar */
.reportbar { position: sticky; top: var(--navh); z-index: var(--z-bar); background: var(--bar); box-shadow: 0 .5px 0 var(--sep); }
.rb-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); max-width: var(--nav-w); margin: 0 auto; padding: 8px 20px 4px; }
.rb-title { min-width: 0; } .rb-title h1 { font-size: 20px; }
.rb-meta { font-size: var(--fs-caption); color: var(--ink2); }
.rb-key { white-space: nowrap; }
.rb-note { max-width: var(--nav-w); margin: 0 auto; padding: 0 20px 6px; }
.rb-note:empty { display: none; }
.rb-act { display: flex; gap: var(--space-8); }
.rb-act .btn { min-height: var(--touch); }
@media (max-width: 700px) { .rb-in { grid-template-columns: minmax(0, 1fr) auto; } .rb-title { grid-column: 1 / -1; grid-row: 2; } .rb-title h1 { font-size: 17px; } }
@media (max-width: 860px) { .rb-back span, .rb-act span { font-size: var(--fs-small); } }
@media (max-width: 420px) { html:is([data-text=large], [data-text=xlarge]) .reportbar { position: static; } }
/* the tab strip */
.chaps { display: flex; gap: 4px; margin-top: var(--space-12); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chaps::-webkit-scrollbar { display: none; }
.chap { flex: 0 0 auto; min-height: 42px; padding: 6px 14px; background: var(--fill2); }
.chap .ic { width: 18px; height: 18px; }
.chap[aria-selected=true] { background: var(--card); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (max-width: 640px) { .chap { flex-direction: column; gap: 2px; font-size: 12.5px; min-height: 52px; padding: 6px 10px; } }
/* the grid: priorities on the left, the panel on the right */
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-16); align-items: start; }
.rv-grid.has-prio { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
.rv-main { min-width: 0; }
@media (max-width: 860px) { .rv-grid.has-prio { grid-template-columns: minmax(0, 1fr); } }
.rv-panel:focus-visible { outline-offset: 4px; }
.rv-nextrow { margin-top: var(--space-24); text-align: center; }
.rv-nextrow .btn { white-space: normal; max-width: 100%; }
.rv-prio { border-radius: var(--r1); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
@media (min-width: 861px) { .rv-prio { position: sticky; top: calc(var(--navh) + 72px); max-height: calc(100vh / var(--tz) - var(--navh) - 88px); overflow: auto; } }
.rv-prio-h { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: none; font-size: var(--fs-headline); font-weight: var(--fw-semi); cursor: pointer; }
.rv-prio-h[aria-expanded=true] .chev { transform: rotate(180deg); }
.rv-prio-b { padding: 0 14px 14px; display: grid; gap: var(--space-8); }
.rv-prio-b h2 { margin-top: var(--space-8); font-size: var(--fs-headline); }
.rv-slider { display: grid; gap: 2px; }
.rv-slider > span { font-size: var(--fs-small); font-weight: var(--fw-semi); } .rv-slider small { color: var(--ink2); font-size: var(--fs-caption); }
/* the loading screen */
.rv-loading { max-width: 720px; margin: var(--space-24) auto 0; }
.rv-meter progress { width: 100%; height: 10px; accent-color: var(--accent); }
.rv-sources { margin: var(--space-12) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.rv-src { display: flex; align-items: center; gap: var(--space-12); min-height: var(--touch); padding: var(--space-8) var(--space-12); border-radius: var(--r2); background: var(--card); box-shadow: var(--shadow); }
.rv-src > span:nth-child(2) { flex: 1 1 auto; min-width: 0; } .rv-src small { color: var(--ink2); }
/* Overview */
.rv-answer { margin-top: var(--space-16); padding: 26px 28px; border-radius: 18px; display: grid; gap: var(--space-16); }
.rv-answer-main { position: relative; }
.rv-headline { font-size: 28px; font-weight: var(--fw-bold); letter-spacing: var(--ls-title); line-height: var(--lh-title); }
.rv-reason { margin-top: var(--space-8); font-size: var(--fs-body); max-width: 60ch; }
.rv-score { display: inline-flex; align-items: center; gap: var(--space-8); max-width: 100%; }
.rv-ring { flex: none; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--good-soft), inset 0 0 0 6px var(--good); line-height: 1; }
.rv-ring b { font-size: 22px; font-variant-numeric: tabular-nums; }
.rv-word { font-size: var(--fs-row); font-weight: var(--fw-semi); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }   /* the word sits beside the ring, never inside it */
.rv-headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-16); }
.rv-headrow .rv-headline { flex: 1 1 18rem; min-width: 0; margin: 0; }
.rv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
@media (max-width: 700px) { .rv-compare { grid-template-columns: minmax(0, 1fr); } .rv-answer { padding: 18px 16px; } .rv-headline { font-size: 24px; } }
.rv-col { padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.rv-col.is-rec { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.rv-col h4 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); margin-bottom: var(--space-8); }
.rv-crops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rv-crop { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semi); }
.rv-crop .pic { width: 28px; height: 28px; } .rv-next { color: var(--ink2); }
.rv-cover { margin: var(--space-8) 0 0; padding-left: 1.1em; font-size: var(--fs-small); color: var(--ink2); }
.rv-caveat { font-size: var(--fs-row); }
.rv-sure-line { font-size: var(--fs-row); margin-bottom: var(--space-8); }
.rv-assume { margin-top: var(--space-16); } .rv-assume h3 { font-size: var(--fs-headline); } .rv-assume ul { color: var(--ink2); font-size: var(--fs-row); }
.rv-evidence { padding-left: 1.2em; } .rv-evidence li { margin-bottom: var(--space-4); }
#ovEvidence { margin-top: var(--space-12); }
/* Options: calm cards of one rhythm, a score at the top right, the crops on one wrapping row, one line for what changes */
.grid.opts { --min: 260px; --gap: var(--space-12); align-items: stretch; }
.card.act.ocard { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-8); padding: var(--space-16); min-height: 0; text-align: left; }
.ocard.is-rec { box-shadow: 0 0 0 2px var(--accent); } .ocard.on { background: var(--accent-soft); }
.oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); width: 100%; }
.ocard-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; } .ocard-tag.rec { background: var(--accent); color: var(--accent-ink); } .ocard-tag .ic { width: 14px; height: 14px; }
.oc-score .rv-ring { width: 48px; height: 48px; box-shadow: inset 0 0 0 4px var(--good-soft), inset 0 0 0 5px var(--good); } .oc-score .rv-ring b { font-size: 17px; } .oc-score .rv-score { flex-direction: column; align-items: center; gap: 2px; text-align: center; } .oc-score .rv-word { font-size: var(--fs-caption); }
.ocard h3 { font-size: var(--fs-headline); line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.oc-rep { font-size: var(--fs-caption); color: var(--ink2); }
.ocard .rv-crops { gap: var(--space-4) var(--space-8); } .ocard .rv-crop { padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); font-weight: var(--fw-regular); font-size: var(--fs-row); } .ocard .rv-crop .pic { width: 24px; height: 24px; } .ocard .rv-next { display: none; }
.oc-change { font-size: var(--fs-row); color: var(--ink); } .ocard .cap { margin: 0; }
.rv-compare-sec { margin-top: var(--space-24); } .rv-compare-sec h3 { margin-bottom: var(--space-4); }
.rv-cmp { width: 100%; border-collapse: collapse; } .rv-cmp th, .rv-cmp td { padding: var(--space-8) var(--space-12); text-align: left; vertical-align: top; border-bottom: .5px solid var(--sep2); }
.rv-cmp thead th { min-width: 9rem; font-weight: var(--fw-semi); } .rv-cmp tbody th { font-weight: var(--fw-semi); white-space: nowrap; } .rv-cmp .cmp-kind { display: block; font-size: var(--fs-caption); color: var(--ink2); font-weight: var(--fw-regular); }
.rv-cmp td.diff.up { background: var(--good-soft); font-weight: var(--fw-semi); } .rv-cmp td.diff.down { background: var(--bad-soft); font-weight: var(--fw-semi); }
.sdetail { margin-top: var(--space-16); }
.rv-bars { margin: var(--space-12) 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.rv-bars li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 2px var(--space-12); align-items: center; }
.rv-bar { display: block; height: 8px; border-radius: 4px; background: var(--fill); } .rv-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rv-bar-ends { grid-column: 2; display: flex; justify-content: space-between; color: var(--ink2); }
.folds { margin-top: var(--space-12); }
#howScores { margin-top: var(--space-16); }
/* the "i" card */
.srcpop { position: fixed; z-index: var(--z-pop); padding: var(--space-12) 14px; border-radius: var(--r1); background: var(--card); box-shadow: var(--shadow-lg); max-height: 70vh; overflow: auto; }
.srcpop[hidden] { display: none; }
.srcpop-top { display: flex; align-items: center; gap: 6px; } .srcpop-x { margin-left: auto; }
.srcpop-for { margin-top: var(--space-8); font-size: var(--fs-small); }
.srcpop-note { margin-top: var(--space-12); } .srcpop-note h4 { font-size: var(--fs-body); }
@media (forced-colors: active) { .rv-answer, .rv-col, .srcpop, .rv-prio, .rv-src { border: 1px solid CanvasText; } .rv-col.is-rec, .chap[aria-selected=true] { outline: 2px solid Highlight; } }
@media print { .reportbar, .rv-prio, .chaps, .rv-nextrow { display: none !important; } }
.rv-bars li, .rv-bar-name { min-width: 0; }
@media (max-width: 520px) { .rv-bars li { grid-template-columns: minmax(0, 1fr); } .rv-bar-ends { grid-column: 1; } }
.srcpop-note a { display: inline-flex; align-items: center; min-height: var(--touch); }
.srcpop-note p { margin-top: 0; }
.btn.chosen { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }   /* the plan chosen to try: a ring and tint, so the one blue button stays Add to My Farm */
.rv-worth { margin-top: var(--space-16); } .rv-worth h3 { font-size: var(--fs-headline); }
.rv-worth-list { margin: var(--space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.rv-worth-list .btn { margin-top: var(--space-8); }

/* the rhythm of a report section: the heading, a line under it, then the blocks with room between them */
.rv-sec > h2 + p, .rv-sec > h2 + .lead { margin-top: var(--space-8); }
.rv-sec > .lead + .grid, .rv-sec > p + .btnrow, .rv-sec > p + .grid { margin-top: var(--space-16); }

/* the rough money line under an option and its sheet */
.money-line { display: block; margin-top: var(--space-4); color: var(--ink2); text-align: left; }
.sdetail .money-line { margin: var(--space-8) 0; }
.money-assume { display: grid; gap: var(--space-8); margin: var(--space-12) 0; padding-left: var(--space-16); }
#dlgMoney .sheet-body { display: grid; gap: var(--space-8); }
#dlgMoney .btn { min-height: var(--touch); }

.rv-sec > h1, .rv-loading > h1 { font-size: var(--fs-title2); }

/* Compare strategies and the Overview's added parts */
.rv-support { margin: 0 0 var(--space-12); color: var(--ink2); } .sdetail .rv-support { margin: var(--space-4) 0 var(--space-12); }
.rv-few { margin: var(--space-8) 0 0; } .rv-sec > h3.sub { margin: var(--space-24) 0 var(--space-8); }
.sd-sec { margin-top: var(--space-16); } .sd-sec h3 { font-size: var(--fs-row); font-weight: var(--fw-semi); margin: 0 0 var(--space-4); } .sd-sec ul { margin: 0; padding-left: var(--space-16); display: grid; gap: var(--space-4); } .sd-sec p { margin: 0; }
.rv-dataset { display: block; } .rv-adviser { margin-top: var(--space-8) !important; }
.rv-bare, .rv-exposure { margin-top: var(--space-16); } .rv-bare ul, .rv-exposure ul { margin: var(--space-4) 0 0; padding-left: var(--space-16); display: grid; gap: var(--space-4); } .rv-bareline { margin: var(--space-8) 0 0; font-size: var(--fs-row); }
.rv-cmp td b { font-variant-numeric: tabular-nums; } .rv-cmp td .cap { font-weight: var(--fw-regular); }

/* ---- the one-page report */
.rv-letter { display: grid; gap: var(--space-32); padding-top: var(--space-16); }
.rv-block > h2 { margin: 0 0 var(--space-12); }
.rv-chiprow { margin: var(--space-8) 0; }
.chip.score { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-body); min-height: 36px; padding: 4px 14px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--fill2); }
.rv-chiprow .chip.score { font-size: 20px; min-height: 48px; }
.rv-guide { margin: var(--space-8) 0; font-weight: 600; }
.rv-actions { margin: var(--space-12) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.srows { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); }
.srow { border: 1px solid var(--sep); border-radius: var(--r2); background: var(--card); }   /* no coloured edge line: each card says what it is with a label */
.srow.is-rec { border-color: var(--sep); }
.srow > summary { list-style: none; display: grid; gap: 6px; padding: var(--space-12) var(--space-16); min-height: 44px; cursor: pointer; }
.srow > summary::-webkit-details-marker { display: none; }
.srow-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.srow-tag { font-size: var(--fs-small); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-chip); background: var(--fill); color: var(--ink); }
.srow.is-rec .srow-tag { background: var(--accent-soft); color: var(--accent-text); }
.srow-name { font-weight: 600; }
.srow-more { justify-self: end; font-size: var(--fs-small); color: var(--ink2); }
.srow .when-open, .srow[open] .when-shut { display: none; } .srow[open] .when-open { display: inline; }
.srow-body { padding: 0 var(--space-16) var(--space-16); display: grid; gap: var(--space-8); }
.sd-sec h3 { margin: 0 0 4px; }
.sd-sec ul { margin: 0; padding-left: 18px; }
@media (min-width: 1000px) { .rv-letter { gap: var(--space-48); } .srows { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .rv-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-24); } .rv-answer > * { grid-column: 1; } .rv-answer .rv-actions { grid-column: 2; grid-row: 2 / span 4; align-self: center; } }
.rb-back { min-width: 44px; min-height: 44px; }   /* a finger needs 44 px wide as well as high, also when only the arrow shows */
.srow > summary, .rv-block .btn, .rv-block summary { min-height: 44px; }
/* ---- Your hardest year */
.hy-card { display: grid; gap: var(--space-12); margin: var(--space-16) 0; }
.hy-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.hy-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; padding: 8px 14px; border: 1px solid var(--fill2); background: var(--card); cursor: pointer; font: inherit; }
.hy-chip.is-on { background: var(--ink); color: var(--card); font-weight: 700; border-color: var(--ink); }
.hy-pick select { min-height: 44px; }
.hy-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }
.hy-row { display: grid; gap: 6px; }
.hy-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.hy-c { height: 18px; border-radius: 3px; background: var(--fill2); }
.hy-c.is-crop { background: var(--good); } .hy-c.is-cover { background: var(--good-soft); } .hy-c.is-residue { background: var(--ink3); opacity: .55; } .hy-c.is-bare { background: var(--warn, var(--ink2)); }
.hy-res { margin: 0; }
@media (min-width: 1000px) { .hy-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hy-card .hy-chip.chip { min-height: 44px; }

/* ---- one calm page: the same gaps everywhere (the house steps), one stack in a card, the three cards on one top line */
.rv-block { display: grid; gap: var(--space-12); align-content: start; }
.rv-block > h2, .rv-block > p, .rv-block > .lead { margin: 0; }
.rv-answer { display: grid; gap: var(--space-8); padding: var(--space-24); }
.rv-answer > * { margin: 0; }
.rv-answer .rv-headline { font-size: 26px; line-height: 1.2; }
.rv-answer .rv-actions { margin-top: var(--space-8); }
@media (min-width: 1000px) { .rv-answer { display: grid; grid-template-columns: minmax(0, 1fr); } .rv-answer > * { grid-column: auto; } .rv-answer .rv-actions { grid-column: auto; grid-row: auto; align-self: start; } .srows { align-items: stretch; } }
.srow > summary { gap: var(--space-8); }
.srow-body { gap: var(--space-12); }
.sd-sec { display: grid; gap: 4px; }
.sd-sec h3, .sd-sec ul, .sd-sec p { margin: 0; }
.rv-adviser { margin: 0; }
.hy-card { margin: 0; }
.rb-title h1 { margin: 0; line-height: 1.25; }
.rb-meta { margin: 2px 0 0; line-height: 1.4; }

/* ---- the loading list: the words and the source on the left, the state in its own column on the right, the consequence under them */
.rv-src { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.rv-src-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-16); row-gap: 2px; align-items: baseline; }
.rv-src-text { min-width: 0; } .rv-src-name { color: var(--ink2); margin-left: 4px; }
.rv-src-state { text-align: right; white-space: nowrap; color: var(--ink2); }
.rv-lose { grid-column: 1 / -1; color: var(--ink2); }
@media (max-width: 420px) { .rv-src-main { grid-template-columns: minmax(0, 1fr); } .rv-src-state { text-align: left; } }

/* ---- the two-way choice in the answer card: what you grow now, or our suggestion */
.rv-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin: var(--space-4) 0; }
.rv-pickcard { display: grid; gap: var(--space-8); align-content: start; padding: var(--space-12) var(--space-16); border-radius: var(--r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--fill2); cursor: pointer; min-height: 44px; }
.rv-pickcard.is-on, .rv-pickcard:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.rv-pickcard:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.rv-pick-tag { font-size: var(--fs-small); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) { .rv-pick { grid-template-columns: minmax(0, 1fr); } }

/* ---- the row of the page's parts: part of the fixed bar, solid, one line, scrolling sideways inside itself on a phone */
.rv-parts { border-top: 1px solid var(--fill2); background: var(--bar); }
.rv-parts-in { margin: 0 auto; padding: 6px 20px; max-width: var(--nav-w); display: flex; align-items: center; gap: var(--space-12); }
.rv-parts ul { list-style: none; margin: 0; padding: 3px; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: var(--fill); min-width: 0; }   /* the house's switch look: a grey track, the current part filled blue */
.rv-parts li { flex: none; }
.rv-parts a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-16); color: var(--ink2); text-decoration: none; font-size: var(--fs-body); font-weight: var(--fw-medium); border-radius: 9px; white-space: nowrap; }
.rv-parts a[aria-current=true] { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-semi); }
.rv-parts-acts { margin-left: auto; display: flex; gap: var(--space-8); flex: none; }
.rv-parts-acts .btn { min-height: 44px; }
@media (max-width: 760px) { .rv-parts-in { flex-wrap: wrap; } .rv-parts-acts { margin-left: 0; width: 100%; } .rv-parts-acts .btn { flex: 1; } }
html:has(.rv-parts) { scroll-padding-top: calc(var(--navh) + var(--rbh) + 8px); }   /* a part opened by its link, or a focused control, stays clear of the top bar and the report's bar with its row of parts */

.hy-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; font-size: 12px; color: var(--ink2); text-align: center; line-height: 1.2; }

/* "Change and see": a narrow column at the left of the one-page report on a wide screen (sticky under the bars, always open), a fold at the top on a phone */
.rv-filter { margin-top: var(--space-16); border-radius: var(--r2); background: var(--fill); }
.rv-filter > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-16); font-weight: var(--fw-semi); }
.rv-filter > summary::-webkit-details-marker { display: none; }
.rv-filter > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.rv-filter[open] > summary::after { transform: rotate(225deg); }
.rv-filter-body { display: grid; gap: var(--space-16); padding: 0 var(--space-16) var(--space-16); }
.rv-ff { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-8); }
.rv-ff > legend { padding: 0; font-size: var(--fs-small); font-weight: var(--fw-semi); margin-bottom: var(--space-8); }
.rv-ff-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rv-ff-tiles .choice { min-height: 44px; padding: 8px 10px; font-size: var(--fs-small); text-align: center; background: var(--bg, #fff); }
.rv-ff-tiles .choice small { font-size: var(--fs-caption); color: var(--ink2); }
.rv-ff-actions { margin: 0; } .rv-ff-actions .btn { width: 100%; min-height: 44px; }
.rv-filter .rv-slider + .rv-slider { margin-top: var(--space-12); } .rv-filter input[type=range] { width: 100%; }
@media (min-width: 1000px) {
  .rv-wrap.rv-has-filter { display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: var(--space-32); align-items: start; }
  .rv-has-filter > .rv-filter { position: sticky; top: calc(var(--navh, 56px) + var(--rbh, 96px) + 16px); max-height: calc(100vh - var(--navh, 56px) - var(--rbh, 96px) - 32px); overflow-y: auto; margin-top: var(--space-16); }
  .rv-has-filter > .rv-filter > summary { pointer-events: none; cursor: default; padding-top: var(--space-8); } .rv-has-filter > .rv-filter > summary::after { display: none; }
  .rv-has-filter > .rv-letter { grid-column: 2; }
}

/* The Change and see panel, calm and modern (the owner's order of 15 November): a white card, each answer one slim row with a round mark, the chosen row tinted blue. */
.rv-filter { background: var(--card); border: 1px solid var(--sep); border-radius: var(--r1); box-shadow: var(--shadow); }
.rv-filter > summary { font-size: var(--fs-headline); min-height: 52px; }
.rv-filter-body { gap: 18px; padding: 0 var(--space-16) var(--space-16); }
.rv-filter-body > .cap { margin: 0; }
.rv-filter .rv-ff { gap: 0; }
.rv-filter .rv-ff > legend { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); font-weight: var(--fw-semi); margin-bottom: 6px; }
.rv-filter .rv-ff-tiles { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--sep); border-radius: 10px; overflow: hidden; background: var(--card); }
.rv-filter .rv-ff-tiles .choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 38px; padding: 7px 12px 7px 38px; text-align: left; font-size: var(--fs-row); font-weight: var(--fw-medium); color: var(--ink); background: var(--card); border: 0; border-radius: 0; box-shadow: none; outline-offset: -2px; }
.rv-filter .rv-ff-tiles .choice + .choice { border-top: 1px solid var(--sep2); }
.rv-filter .rv-ff-tiles .choice::before { content: ''; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--ctl); background: var(--card); box-sizing: border-box; }
.rv-filter .rv-ff-tiles .choice small { display: none; }
.rv-filter .rv-ff-tiles .choice.is-on { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semi); box-shadow: none; border-color: var(--sep2); }
.rv-filter .rv-ff-tiles .choice.is-on::before { border: 5px solid var(--accent); }
@media (hover: hover) { .rv-filter .rv-ff-tiles .choice:not(.is-on):hover { background: var(--fill2); } }
@media (pointer: coarse) { .rv-filter .rv-ff-tiles .choice { min-height: 44px; } }
.rv-filter .rv-slider > span { font-size: var(--fs-row); font-weight: var(--fw-medium); }
.rv-filter input[type=range] { accent-color: var(--accent); }
.rv-filter .rv-ff-actions .btn { border-radius: 10px; }

/* The report's parts are tabs: with a part chosen only that part's block shows. On paper every part prints. */
.rv-letter[data-part] .rv-block { display: none; }
.rv-letter[data-part="blkAnswer"] #blkAnswer, .rv-letter[data-part="blkCompare"] #blkCompare, .rv-letter[data-part="blkWrong"] #blkWrong,
.rv-letter[data-part="blkWhen"] #blkWhen, .rv-letter[data-part="blkMore"] #blkMore, .rv-letter[data-part="blkShare"] #blkShare { display: block; }
.rv-letter[data-part] #blkAsk, .rv-letter[data-part] #blkFail { display: block; }
@media print { .rv-letter[data-part] .rv-block { display: block !important; } }
html.print-doc .rv-letter[data-part] .rv-block { display: block !important; }

/* A press on a strategy card chooses it: the chosen card has a blue frame. */
.srow:hover { border-color: var(--accent); }
.srow.is-chosen { border: 2px solid var(--accent); background: var(--accent-soft); }
/* Refreshing the report: every block is a grey skeleton for a moment. */
.rv-letter.is-refreshing .rv-block > *:not(h2) { visibility: visible; color: transparent !important; border-radius: var(--r2); min-height: 56px; background: linear-gradient(90deg, var(--fill) 25%, var(--sep) 50%, var(--fill) 75%) 0 0 / 200% 100%; animation: shimmer 1.1s linear infinite; border-color: transparent; box-shadow: none; }
.rv-letter.is-refreshing .rv-block > *:not(h2) * { visibility: hidden; }
.rv-letter.is-refreshing #rvFresh { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rv-letter.is-refreshing .rv-block > *:not(h2) { animation: none; } }