/* report-view.css -- Zone B/C report-open surface (design-lock v5).
   Parallel screen reading from Postgres scored_flags JSONB.
   Does NOT share selectors with the legacy #screen-results flow.
   Panel has three modes: bureau-grouped list (default), detail (in-panel),
   and locked (unpaid). Detail renders IN the panel via mode swap.
   The old #rv-scrim and floating #rv-detail elements are retired (AG-5). */

/* === SCREEN-LEVEL FONT === */
/* FS-D5 (2026-08-03): smoothing normalized ON app-wide. `.home` has had
   `antialiased` for as long as anyone has looked at it and is the app's
   reference surface, so the six roots that were still `auto` after FS-2
   were brought to match rather than moving Home. Smoothing renders text
   lighter; if the app ever reads too thin, the honest fix is to flip the
   whole app OFF, not to return to a mix. */
#screen-report-view {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* FS-2 (2026-08-02): the screen-level declaration above has always been
   correct, and these controls still rendered in Arial -- form controls do
   not inherit font-family; the UA stylesheet hard-sets Arial on them.
   Selected by class rather than as `#screen-report-view button` on
   purpose: .rv-dup-* belongs to #modal-duplicate-upload, which mounts
   OUTSIDE this screen (body > .app > .container), so a descendant-scoped
   rule would miss it. Class-based selectors are mount-independent. */
.rv-eye,
.rv-m-ds-btn,
.rv-dup-cancel,
.rv-dup-confirm { font-family: inherit; }

/* === LAYOUT === */
.rv-layout {
  position: relative;
  display: flex;
  width: 100%;
  min-height: calc(100vh - 60px); /* below navbar */
  background: var(--bone-0);
}

/* === PANEL (left side -- navigator / detail / locked modes) === */
.rv-panel {
  --rv-panel-w: 344px;
  width: var(--rv-panel-w);
  min-width: var(--rv-panel-w);
  background: #fff;
  border-radius: 0 var(--radius) var(--radius) 0; /* flush left, rounded right */
  box-shadow: 14px 18px 40px rgba(28,20,14,0.10);
  padding: 22px 22px 20px;
  overflow-y: auto;
  z-index: 25;
  position: relative;
  align-self: flex-start;
  margin-top: calc(var(--rv-panel-top, 158px) - var(--shell-nav-h, 60px) - var(--shell-top-gap, 10px));
  transition: width 0.2s ease, min-width 0.2s ease;
}

/* Panel scrollbar: ~2px pill, widens on hover (AG-8: no scrollbar-width
   alongside webkit rules -- Firefox fallback in @supports block below).
   Thumb #E0E3E7 (solid soft cool gray) / hover #D5D8DC (one step darker). */
.rv-panel::-webkit-scrollbar { width: 12px; }
.rv-panel::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.rv-panel::-webkit-scrollbar-button { display: none; }
.rv-panel::-webkit-scrollbar-thumb {
  background: #E0E3E7;
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 99px;
}
.rv-panel::-webkit-scrollbar-thumb:hover,
.rv-panel::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background-color: #D5D8DC;
}
@supports not selector(::-webkit-scrollbar) {
  .rv-panel {
    scrollbar-width: thin;
    scrollbar-color: #E0E3E7 transparent;
  }
}

/* Max-height: derived from the Reports nav square's DOM position.
   JS sets --rv-panel-top at bootstrap time (viewport-relative y of the
   nav square's top edge). Fallback 158px is a safe static guess.
   Formula: viewport height - panel-top - page-nav (56px) - clearance (20px). */
.rv-panel {
  max-height: calc(100vh - var(--rv-panel-top, 158px) - 76px);
}

/* === PANEL: NAVIGATOR MODE (redesign 2026-06-16) === */

/* Report header: "Equifax . Apr 26, 2024" */
.rv-nav-header {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* Section labels */
.rv-nav-label {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(30,42,53,0.5);
  letter-spacing: 0.03em;
  margin-bottom: 11px;
}
.rv-nav-label-bold {
  color: var(--text);
}
.rv-nav-muted {
  color: rgba(30,42,53,0.38);
  font-weight: 600;
}

/* Violation + page chips (circular, 40px, coral family) */
.rv-nav-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Violation chips: VBO-style pills (white fill, coral stroke, stadium shape).
   Mirror the on-page callout .live / .dim vocabulary at chip scale. */
.rv-vio-chip {
  min-width: 46px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid rgba(242,100,25,0.5);
  color: var(--coral);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(30,42,53,0.08);
  transition: border-color 0.15s, border-width 0.15s, box-shadow 0.15s;
}
.rv-vio-chip:hover {
  border-color: var(--coral);
  box-shadow: 0 0 8px rgba(242,100,25,0.22), 0 2px 6px rgba(30,42,53,0.1);
}
.rv-vio-chip.live {
  border: 2.5px solid var(--coral);
  box-shadow: 0 0 12px rgba(242,100,25,0.38), 0 2px 8px rgba(30,42,53,0.14);
}

/* Page chips: circles (unchanged shape). */
.rv-page-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid rgba(242,100,25,0.4);
  color: var(--coral);
  background: none;
  cursor: pointer;
  transition: border-color 0.15s, border-width 0.15s, color 0.15s, box-shadow 0.15s;
}
.rv-page-chip:hover {
  border-color: var(--coral);
}
.rv-page-chip.active {
  border: 3px solid var(--coral);
  color: var(--coral);
  box-shadow: 0 0 0 4px rgba(242,100,25,0.12), 0 4px 12px rgba(242,100,25,0.18);
}

/* Navigator divider */
.rv-nav-div {
  border: none;
  border-top: 1px solid var(--line);
  margin: 6px 0 18px;
}

/* All-reports section */
.rv-nav-group {
  margin-bottom: 14px;
}
.rv-nav-bureau {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.rv-nav-report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 6px 4px 6px 14px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.rv-nav-report:hover {
  background: rgba(242,100,25,0.04);
}
.rv-nav-report.active {
  font-weight: 700;
}
.rv-nav-check {
  width: 17px;
  height: 17px;
  stroke: var(--text);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Upload affordance */
.rv-nav-upload {
  width: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1.5px dashed rgba(30,42,53,0.3);
  border-radius: 14px;
  color: rgba(30,42,53,0.45);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rv-nav-upload:hover {
  background: rgba(30,42,53,0.03);
  color: var(--text);
  border-color: rgba(30,42,53,0.5);
}

/* Legacy styles kept for backward compat until full cleanup */
.rv-bureau-section + .rv-bureau-section { padding-top: 16px; border-top: 1px solid var(--line); }
.rv-bureau-name { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.rv-bureau-date { font-size: 14.5px; font-weight: 600; color: var(--coral); margin-top: 2px; }
.rv-open-divider {
  border-bottom: 1px dashed var(--line-strong);
  margin: 14px 6px 4px;
}


/* DA5.3c: .rv-other-row / .rv-other-hide rules deleted with
   _rvBuildBureauSection (zero JS/HTML users, grep-confirmed). */

/* "Show hidden (n)" affordance at panel bottom */
.rv-show-hidden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: rgba(30,42,53,0.45);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
}
.rv-show-hidden:hover {
  color: var(--coral);
}
.rv-hidden-list {
  margin-top: 8px;
}
.rv-hidden-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(30,42,53,0.5);
}
.rv-hidden-restore {
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 8px;
}
.rv-hidden-restore:hover {
  text-decoration: underline;
}

/* Date-missing fallback */
.rv-date-missing {
  font-weight: 500;
  color: rgba(30,42,53,0.5);
}
.rv-date-uploaded {
  font-style: italic;
  font-size: 11.5px;
  color: rgba(30,42,53,0.4);
  display: block;
  margin-top: 1px;
}

/* Add-report affordance (missing bureau) */
.rv-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 17px;
  border-radius: 14px;
  margin-top: 10px;
  border: 1.5px dashed var(--coral);
  background: rgba(242,100,25,0.03);
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  transition: background 0.15s;
}
.rv-add-row:hover {
  background: rgba(242,100,25,0.08);
}
.rv-add-row svg {
  width: 16px;
  height: 16px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === PANEL: DETAIL MODE (in-panel, not floating) === */
.rv-detail-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(30,42,53,0.55);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  transition: color 0.15s;
}
.rv-detail-back:hover {
  color: var(--coral);
}
.rv-detail-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v11 detail head: category label + four-tier badge */
.rv-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  /* F4: the head now carries two chips (confidence + impact) alongside the
     creditor name. Wrap rather than overflow when the combined width does
     not fit -- narrow iPhone with a long creditor name. Type size is
     deliberately NOT reduced to make room (David's ruling: report the
     constraint, don't shrink type). gap applies on both axes, so the
     wrapped row keeps its spacing. */
  flex-wrap: wrap;
  gap: 8px;
}
/* F4: keeps the confidence badge and the impact chip together as one
   right-hand unit under space-between, and wrapping as a pair. */
.rv-detail-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* F4: impact chip. Deliberately quieter than the coral confidence ladder
   -- impact is the secondary axis here, and a second coral chip would
   compete with the badge it sits beside. */
.rv-detail-impact {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  padding: 3.5px 11.5px;
  border: 1.5px solid rgba(30,42,53,0.18);
  color: rgba(30,42,53,0.62);
}
.rv-detail-cat {
  font-size: 12px;
  font-weight: 500;
  color: rgba(30,42,53,0.65);
}

/* ============================================================
   RELAY 28 C: THE ACCOUNT FACTS SUB-LINE
   ============================================================
   Which account this finding fired on, under the head. A trigger that
   fires once per account writes identical panel copy every time -- these
   are the extracted facts that tell the twins apart. */
.rv-detail-facts {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(30,42,53,0.55);
  margin-top: 7px;
  line-height: 1.35;
}
/* The head's own 18px would win the sibling-margin collapse and push the
   sub-line away from the name it qualifies. Zeroed only when the sub-line
   is actually there, so every panel without one is unchanged. */
.rv-detail-head:has(+ .rv-detail-facts) {
  margin-bottom: 0;
}

/* ============================================================
   RELAY 28 A5: THE FLIP BAR
   ============================================================
   One pill now covers a field carrying several claims, so the pill can no
   longer say which claim is open. This bar names them and flips between
   them. Renders only for a group of 2+. */
.rv-flip-bar {
  background: rgba(242,100,25,0.06);
  border: 1px solid rgba(242,100,25,0.18);
  border-radius: 14px;
  padding: 11px 14px 12px;
  margin: 12px 0 16px;
}
.rv-flip-bar-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--coral);
  line-height: 1.3;
  margin-bottom: 9px;
}
.rv-flip-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-flip-chip {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rv-flip-chip.is-active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.rv-flip-chip:not(.is-active):hover {
  background: rgba(242,100,25,0.08);
}
.rv-detail-tier {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
/* Four-tier coral-axis badge ladder (matching mobile, ratified 2026-06-16) */
.rv-tier-strong {
  background: var(--coral);
  color: #fff;
  padding: 5px 13px;
}
.rv-tier-likely {
  background: transparent;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  padding: 3.5px 11.5px;
}
.rv-tier-possible {
  background: transparent;
  border: 1.5px dashed var(--coral);
  color: rgba(242,100,25,0.85);
  padding: 3.5px 11.5px;
}
.rv-tier-weak {
  background: transparent;
  border: 1.5px dashed rgba(30,42,53,0.45);
  color: rgba(30,42,53,0.60);
  padding: 3.5px 11.5px;
}

/* Dispute scope line (matching mobile: no italic) */
.rv-detail-scope {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(30,42,53,0.65);
  margin: 0 0 4px;
}

/* Segments: "The problem" / "Why it hurts you" */
.rv-seg {
  margin-bottom: 16px;
}
.rv-seg-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(30,42,53,0.75);
  margin: 13px 0 5px;
}
.rv-seg-headline {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--coral);
  line-height: 1.3;
}
.rv-seg-body {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(30,42,53,0.85);
}

/* Quote section: "What your report says" (above "The problem") */
.rv-quote {
  margin-bottom: 16px;
}
.rv-quote-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(30,42,53,0.6);
  margin-bottom: 5px;
}
.rv-quote-body {
  font-size: 13.5px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: rgba(30,42,53,0.85);
}

/* CTA: File a dispute (matching mobile: full-width centered pill, no icon) */
.rv-detail-cta {
  display: block;
  background: #1D2430;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin: 14px 0 5px;
  transition: transform 0.15s, filter 0.15s;
}
.rv-detail-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.rv-detail-cta svg {
  display: none;
}

/* Collapsible law section */
.rv-law {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}
.rv-law-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: rgba(30,42,53,0.6);
}
.rv-law-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s ease;
}
.rv-law.open .rv-law-toggle svg {
  transform: rotate(180deg);
}
.rv-law-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.rv-law.open .rv-law-body {
  max-height: 220px;
  margin-top: 10px;
}
.rv-law-body p {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(30,42,53,0.62);
  margin: 0;
}
.rv-law-body strong {
  font-weight: 700;
  color: rgba(30,42,53,0.75);
}
/* Legal basis panel inside law section (matching mobile rv-m-ds-atty) */
.rv-atty {
  margin-top: 12px;
}
.rv-atty-cap {
  font-size: 12px;
  font-weight: 700;
  color: rgba(30,42,53,0.75);
  margin: 0 0 5px;
}
.rv-atty-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(30,42,53,0.62);
  margin: 0;
}

/* Detail stepper (footer) */
.rv-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rv-stepper-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.rv-stepper-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-stepper-prev {
  color: rgba(30,42,53,0.45);
}
.rv-stepper-prev:hover { color: var(--text); }
.rv-stepper-next {
  color: var(--coral);
}
.rv-stepper-next:hover { filter: brightness(0.9); }
.rv-stepper-info {
  font-size: 12px;
  font-weight: 500;
  color: rgba(30,42,53,0.45);
}
.rv-stepper-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* === IDENTITY FINDINGS SECTION (pinned above creditor violations) === */

/* Band header */
.rv-id-band {
  background: #F3EFE7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rv-id-band-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-id-band-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-id-band-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.rv-id-band-sub {
  font-size: 12px;
  font-weight: 400;
  color: rgba(30,42,53,0.55);
  margin-top: 2px;
}

/* C9: pre-answer q12 card ("one more question could matter"). Reuses the
   cream-band + coral-icon vocabulary of .rv-id-band and the .rv-locked-cta
   pill, with its own classes so the two surfaces stay independent. */
/* Walk fixes 2/4 (2026-08-08): the question-state bands. Own class family,
   clone of the .rv-q12-card shape values -- same C9 precedent, so a change to
   one surface cannot silently move the other. One builder serves desktop and
   mobile; the mobile compression lives in mobile.css at the same 768px
   breakpoint _rvMIsMobile tests. */
.rv-qbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  background: #F3EFE7;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.rv-qbar-text { font-size: 13px; line-height: 1.45; color: var(--text); }
/* Warn variant: the left-early state is a stronger claim about the same scan,
   so it gets the coral edge. Colour is reinforcement; the sentence carries it. */
.rv-qbar-warn { border-color: var(--coral); }
.rv-qbar-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  text-align: left;
}
.rv-qbar-link:hover { text-decoration: underline; }
.rv-qbar-sofar {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}

.rv-q12-card {
  background: #F3EFE7;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}
.rv-q12-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.rv-q12-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-q12-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-q12-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.rv-q12-body {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(30,42,53,0.7);
  line-height: 1.45;
  margin-bottom: 12px;
}
.rv-q12-cta {
  display: inline-block;
  padding: 9px 22px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-q12-cta:hover {
  background: #d8550f;
}

/* === DISPUTE GATE BAND (fix 1) ==========================================
   Replaces the "File a dispute" CTA on a review-only (gated) finding, so a
   button that silently fails is never rendered. Clones the .rv-q12-card
   shape values -- cream band, coral icon disc, 10px radius -- under its own
   classes so the two surfaces stay independent (C9 precedent).
   One rule set serves the desktop detail panel and the mobile sheet; the
   compression below 768px lives in the RESPONSIVE block at the bottom. */
.rv-gate-band {
  background: #F3EFE7;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 5px;
}
.rv-gate-band-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.rv-gate-band-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-gate-band-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-gate-band-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.rv-gate-band-body {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(30,42,53,0.7);
  line-height: 1.45;
}
/* Rendered only in the door state (1a). The no-door state (1b) ends at the
   body, so the gap below it belongs to the pill, not the body -- 1b must
   not carry trailing space where a button would have been. */
.rv-gate-band-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 22px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-gate-band-cta:hover {
  background: #d8550f;
}

/* Relay 28 E2: the confirm gate's two-action row. The primary reuses
   .rv-gate-band-cta verbatim, so the include button is the same pill the
   door bands already use; only the row wrapper and the secondary are new.
   The CTA's own 12px top margin moves to the row, or the two buttons sit
   on different baselines. */
.rv-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.rv-confirm-actions .rv-gate-band-cta {
  margin-top: 0;
}
.rv-gate-band-ghost {
  font-family: inherit;
  display: inline-block;
  padding: 9px 22px;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(31,24,19,0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.rv-gate-band-ghost:hover {
  background: rgba(30,42,53,0.04);
  border-color: rgba(31,24,19,0.3);
}

/* ============================================================
   QUESTION-FLOW SLICE 1: THE IN-PANEL DOOR
   ============================================================
   The open door lives INSIDE the gate band, so the band keeps its cream
   card and simply grows. Nothing above it moves: the question unfolds
   downward from a divider under the band head. */
.rv-door-band.is-open {
  padding-bottom: 16px;
}
.rv-door-divider {
  height: 1px;
  background: rgba(31,24,19,0.12);
  margin: 12px 0;
}
/* Dimmed, not hidden, while the answer is in flight: what was answered
   stays readable while it is being acted on. */
.rv-door-body.is-dim {
  opacity: 0.45;
  pointer-events: none;
}
.rv-door-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
}
.rv-door-q {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
}
.rv-door-q2 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 7px;
}
.rv-door-why,
.rv-door-note {
  font-size: 12px;
  font-weight: 400;
  color: rgba(30,42,53,0.62);
  line-height: 1.45;
  margin-bottom: 10px;
}
.rv-door-note {
  margin: 10px 0 0;
}
.rv-door-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* Selectable answer token. White on the cream band so an unselected option
   still reads as tappable; coral fill is reserved for the chosen one. */
.rv-door-chip,
.rv-door-none {
  background: #fff;
  border: 1px solid rgba(31,24,19,0.18);
  border-radius: 999px;
  padding: 9px 15px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rv-door-chip:hover,
.rv-door-none:hover {
  border-color: var(--coral);
}
.rv-door-chip.is-on,
.rv-door-none.is-on {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  font-weight: 600;
}
.rv-door-none {
  display: block;
  width: 100%;
  margin-top: 9px;
  text-align: center;
}
.rv-door-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.18);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s;
}
.rv-door-radio:hover {
  border-color: var(--coral);
}
.rv-door-radio.is-on {
  border-color: var(--coral);
  border-width: 1.5px;
}
.rv-door-dot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(31,24,19,0.28);
  background: #fff;
}
.rv-door-radio.is-on .rv-door-dot {
  border: 5px solid var(--coral);
}
.rv-door-sub {
  margin-top: 4px;
}
.rv-door-reassure {
  font-size: 12px;
  font-weight: 400;
  color: rgba(30,42,53,0.62);
  line-height: 1.45;
  margin: 14px 0 12px;
}
.rv-door-error {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--severe);
  line-height: 1.45;
  margin-bottom: 10px;
}
/* Dark, full-width, and the only primary action in the band. */
.rv-door-submit {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: var(--ink-0);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.rv-door-submit:hover {
  background: #2a3442;
}
.rv-door-submit.is-off {
  opacity: 0.35;
  cursor: default;
}
.rv-door-submit.is-off:hover {
  background: var(--ink-0);
}
.rv-door-back,
.rv-door-nevermind {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(30,42,53,0.62);
  text-align: center;
  cursor: pointer;
}
.rv-door-back:hover,
.rv-door-nevermind:hover {
  color: var(--text);
}
.rv-door-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.rv-door-progress-sub {
  font-size: 12px;
  font-weight: 400;
  color: rgba(30,42,53,0.55);
  margin-top: 5px;
}
.rv-door-spinner {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  border: 2px solid rgba(31,24,19,0.15);
  border-top-color: var(--coral);
  animation: rvDoorSpin 0.7s linear infinite;
}
@keyframes rvDoorSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-door-spinner { animation: none; }
}

/* 2f: the quiet upgrade. A tinted pill, not a banner -- the tier badge and
   the now-live CTA are already saying the loud part. */
.rv-door-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(242,100,25,0.10);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--coral);
  margin-bottom: 12px;
}
.rv-door-confirmed svg {
  width: 14px;
  height: 14px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-door-ripple {
  font-size: 12px;
  font-weight: 400;
  color: rgba(30,42,53,0.62);
  line-height: 1.45;
  margin: -6px 0 12px;
}

/* Already queued or sent: the CTA slot keeps its shape but states the truth
   from the disputes store and refuses further taps. Two classes (0-2-0)
   outrank the .rv-m-ds-cta base in mobile.css regardless of file order. */
.rv-detail-cta.is-queued,
.rv-m-ds-cta.is-queued {
  background: rgba(30,42,53,0.10);
  color: rgba(30,42,53,0.6);
  cursor: default;
}
.rv-detail-cta.is-queued:hover,
.rv-m-ds-cta.is-queued:hover {
  transform: none;
  filter: none;
}

/* Finding cards */
.rv-id-card {
  background: #fff;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rv-id-card:hover {
  border-color: rgba(31,24,19,0.22);
  box-shadow: 0 2px 8px rgba(28,20,14,0.06);
}
.rv-id-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rv-id-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
/* "You reported this" provenance chip */
.rv-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(30,42,53,0.55);
  background: rgba(30,42,53,0.06);
  border: 1px solid rgba(31,24,19,0.14);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.rv-id-chip svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Wrong-to-right value row */
.rv-id-wrong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.rv-id-wrong-old {
  font-size: 13px;
  font-weight: 500;
  color: rgba(30,42,53,0.5);
  text-decoration: line-through;
}
.rv-id-wrong-arrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-id-wrong-new {
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
}
/* Lock icon for free/unpaid findings */
.rv-id-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(30,42,53,0.4);
}
.rv-id-lock svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-id-teaser {
  font-size: 12px;
  color: rgba(30,42,53,0.45);
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Identity detail: two-box comparison row */
.rv-id-boxes {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.rv-id-box {
  flex: 1;
  border-radius: 10px;
  padding: 12px 14px;
}
.rv-id-box-report {
  background: #F3EFE7;
}
.rv-id-box-you {
  background: rgba(242,100,25,0.08);
  border: 1px solid rgba(242,100,25,0.25);
}
.rv-id-box-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(30,42,53,0.55);
  margin-bottom: 6px;
}
.rv-id-box-val {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}
.rv-id-box-you .rv-id-box-val {
  color: var(--coral);
}

/* "Show me on page 1" secondary button */
.rv-id-page-btn {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid rgba(31,24,19,0.15);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  margin-bottom: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.rv-id-page-btn:hover {
  border-color: rgba(31,24,19,0.3);
  background: rgba(30,42,53,0.03);
}
.rv-id-page-sub {
  text-align: center;
  font-size: 11px;
  color: rgba(30,42,53,0.45);
  margin-bottom: 14px;
}

/* Identity detail CTA: coral dispute button */
.rv-id-cta {
  display: block;
  background: #1D2430;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin: 14px 0 5px;
  transition: transform 0.15s, filter 0.15s;
}
.rv-id-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* === VIEWER (right side) === */
.rv-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px 56px;  /* no top gap; bottom clears the fixed page-nav */
  position: relative;
  min-width: 0;
}

.rv-doc-viewer {
  position: relative;
  z-index: 1; /* LT-1 fix: creates stacking context so scrim z-index:29
     stays contained inside the doc card. Without this, the scrim's z-index
     competes globally and paints over the page-nav (z-index:20) wherever
     the doc card and page-nav overlap at the viewport bottom. */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(28,20,14,0.07);
  padding: 24px;
  max-width: 100%;
  min-height: 400px; /* pre-render placeholder before JS sets explicit size */
  overflow: hidden;
  /* Center-align with the page controller: the controller spans sidebar-edge
     to viewport-edge, but the viewer starts after the panel. Shift left by
     half the panel width so both centers match. Linked to --rv-panel-w so
     retuning the panel width auto-corrects the offset. */
  transform: translateX(calc(var(--rv-panel-w, 344px) / -2));
}

#rv-pdf-canvas {
  display: block;
  max-width: 100%;
  border-radius: 2px;
  background: #fff;
}

.rv-overlay-layer {
  position: absolute;
  top: 24px;
  left: 24px;
  pointer-events: none;
}
.rv-overlay-layer .rv-viobox {
  pointer-events: auto;
}

/* === CALLOUT PILLS (content-bearing, matching mobile vocabulary) === */
/* Mobile source of truth: mobile.css lines 478-530 (.rv-m-callout).
   Desktop keeps its own font sizes (larger viewport) but ports the
   treatment: stadium shape, opaque fills, border/shadow distinction. */
.rv-callout {
  position: absolute;
  background: #fff;
  border-radius: 999px;
  padding: 8px 15px 9px;
  max-width: 520px;
  width: max-content;
  cursor: pointer;
  z-index: 30;
  transition: box-shadow 0.2s;
  pointer-events: auto;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.rv-co-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 2px;
  line-height: 1.3;
}
.rv-co-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Live callout: the selected violation.
   Thick solid coral border + pronounced glow (mobile: ~12% of pill height,
   desktop approx 3px). Fully opaque white fill. */
.rv-callout.live {
  border: 3.5px solid var(--coral);
  box-shadow: 0 0 18px rgba(242,100,25,0.5), 0 3px 8px rgba(30,42,53,0.2);
  z-index: 31;
}

/* Dim callout: other violations on the page.
   Fully OPAQUE white fill. Reads secondary via lighter/thinner border +
   smaller text, NOT via transparency (matching mobile). */
.rv-callout.dim {
  border: 2px solid rgba(242,100,25,0.6);
  box-shadow: 0 1px 3px rgba(30,42,53,0.12);
  z-index: 30;
}
.rv-callout.dim .rv-co-lbl {
  color: rgba(242,100,25,0.7);
  font-size: 9px;
}
.rv-callout.dim .rv-co-val {
  font-size: 11px;
  color: rgba(30,42,53,0.85);
}

/* Relay 28 A3: the count chip on a grouped pill. One ring over a field
   carrying two claims is only honest if it SAYS two. Declared after the
   .dim overrides above so the chip keeps solid coral and white text in
   both the live and the dim state -- a chip that faded with the pill
   would be least readable exactly when the reader is scanning for it. */
.rv-co-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.3;
  vertical-align: middle;
}
/* Hover signal on dim callouts: coral border + subtle glow teaches "I'm tappable"
   on every cursor pass (durable legibility fix, coach-layer companion). */
.rv-callout.dim:hover {
  border-color: var(--coral);
  box-shadow: 0 0 10px rgba(242,100,25,0.3), 0 2px 6px rgba(30,42,53,0.15);
}

/* Uniform scrim: single white 65% wash over the canvas (matching mobile).
   Replaces the D2 four-rect spotlight cutout. Callout pills sit above
   the wash as the evidence signal. */
.rv-dim-scrim {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.65);
  z-index: 29;
}
/* Legacy: keep selector for cleanup of any old scrim pieces */
.rv-dim-scrim-piece {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.65);
  z-index: 29;
}

/* === GHOST OUTLINE LAYER (peek mode: thin outlines at true coords) === */
.rv-ghost-layer {
  position: absolute;
  top: 24px;
  left: 24px;
  pointer-events: none;
  z-index: 28;
}
.rv-ghost {
  position: absolute;
  border-radius: 999px;
  display: none;
}
.rv-ghost.g-live { border: 1.5px solid var(--coral); }
.rv-ghost.g-dim { border: 1px solid rgba(242,100,25,0.5); }

/* === HOLD-TO-PEEK EYE BUTTON === */
.rv-eye {
  position: absolute;
  bottom: 80px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(30,42,53,0.22);
  box-shadow: 0 3px 10px rgba(30,42,53,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 35;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s ease;
}
.rv-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.12s ease;
}
.rv-eye:hover {
  background: rgba(242,100,25,0.06);
}
.rv-eye:hover svg {
  stroke: var(--coral);
}

/* Peek mode: class on .rv-doc-viewer strips callouts + scrim, shows ghosts */
.rv-doc-viewer.peek .rv-overlay-layer { display: none; }
.rv-doc-viewer.peek .rv-dim-scrim { display: none; }
.rv-doc-viewer.peek .rv-dim-scrim-piece { display: none; }
.rv-doc-viewer.peek .rv-ghost { display: block; }

/* Eye button active state during peek */
.rv-viewer:has(.rv-doc-viewer.peek) .rv-eye {
  background: var(--coral);
}
.rv-viewer:has(.rv-doc-viewer.peek) .rv-eye svg {
  stroke: #fff;
}

/* Peek-locked indicator: coral ring around the eye button when double-tap locked */
.rv-eye.peek-locked {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(242,100,25,0.3), 0 3px 10px rgba(30,42,53,0.20);
}
.rv-eye.peek-locked svg { stroke: #fff; }

/* Clean-report banner (matching mobile rv-m-clean-banner) */
.rv-clean-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  background: var(--bone-0);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(30,42,53,0.12);
  max-width: 320px;
  width: 70%;
}
.rv-clean-banner svg {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
}
.rv-clean-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.rv-clean-msg {
  font-size: 14px;
  color: rgba(30,42,53,0.6);
  line-height: 1.5;
}
.rv-clean-hint {
  font-size: 12px;
  color: rgba(30,42,53,0.4);
  margin-top: 14px;
}

/* PDF loading spinner */
.rv-pdf-loading {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.55);
  z-index: 5;
}
.rv-pdf-loading.visible {
  display: flex;
}
.rv-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--line);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: rv-spin 0.8s linear infinite;
}
@keyframes rv-spin {
  to { transform: rotate(360deg); }
}

/* === PAGE NAV (docked at bottom of viewport, starts at rail's right edge) === */
.rv-page-nav {
  position: fixed;
  bottom: 0;
  left: var(--shell-sidebar-w, 63px); /* starts at rail's right edge */
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bone-0);
  border-top: 1px solid var(--line);
  z-index: 20;
  flex-wrap: wrap;
}
.rv-page-nav button {
  border: none;
  background: rgba(30,42,53,0.06);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.rv-page-nav button:hover {
  background: #f4d3c2;
  color: var(--coral);
}
.rv-page-nav button.active {
  background: var(--coral);
  color: #fff;
}
.rv-page-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.rv-page-nav button.rv-pnav-arrow {
  background: none;
  border-radius: 0;
  color: rgba(30,42,53,0.5);
}
.rv-page-nav button.rv-pnav-arrow:hover {
  background: none;
  color: var(--coral);
}
.rv-page-nav button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-page-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 0 6px;
}
.rv-page-sep {
  color: rgba(30,42,53,0.2);
  font-size: 14px;
  padding: 0 2px;
}

/* Empty state message in panel */
.rv-empty-msg {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.55);
  text-align: center;
  padding: 32px 16px;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}
.rv-empty-reupload {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 28px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-empty-reupload:hover {
  background: #d8550f;
}

/* === LOCKED PLACEHOLDER (unpaid gate) === */
.rv-locked-card {
  padding: 32px 24px;
  text-align: center;
}
.rv-locked-icon {
  margin: 0 auto 16px;
  width: 48px;
  height: 48px;
  color: rgba(30, 42, 53, 0.35);
}
.rv-locked-icon svg {
  width: 100%;
  height: 100%;
}
.rv-locked-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.rv-locked-msg {
  font-size: 14px;
  color: rgba(30, 42, 53, 0.62);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.rv-locked-cta {
  display: inline-block;
  padding: 12px 32px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-locked-cta:hover {
  background: #d8550f;
}
.rv-locked-value {
  font-size: 13.5px;
  color: rgba(30, 42, 53, 0.55);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Locked report rows (same card chrome as paid, date-only content -- AG-6) */
.rv-locked-bureau {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(30, 42, 53, 0.5);
  margin-top: 20px;
  margin-bottom: 6px;
}
.rv-locked-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 17px;
  border-radius: 14px;
  margin-top: 6px;
  border: 1.5px dashed var(--line-strong);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.rv-locked-row:hover {
  border-color: var(--coral);
  border-style: solid;
}
.rv-locked-row.active {
  background: var(--coral);
  border-color: var(--coral);
  border-style: solid;
  color: #fff;
}
.rv-locked-viewing {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* === DUPLICATE-UPLOAD MODAL (Bone family) === */
.rv-dup-modal {
  z-index: 100;
}
/* FS-2: this modal mounts outside #screen-report-view, so it never saw the
   screen-level declaration at the top of this file -- title and body copy
   both rendered in Inter. Declared on the card, which is this modal's own
   root. */
.rv-dup-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 28px 26px;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 14px 40px rgba(28,20,14,0.14);
  text-align: center;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.rv-dup-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.rv-dup-body {
  font-size: 14px;
  color: rgba(30,42,53,0.65);
  line-height: 1.5;
  margin-bottom: 24px;
}
.rv-dup-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.rv-dup-cancel {
  padding: 10px 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.rv-dup-cancel:hover { border-color: var(--text); }
.rv-dup-confirm {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-dup-confirm:hover { background: #d8550f; }

/* === RESPONSIVE (mobile <= 768px) === */
@media (max-width: 768px) {
  .rv-layout {
    flex-direction: column;
  }
  .rv-panel {
    width: 100%;
    min-width: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(28,20,14,0.08);
    margin-top: 0; /* no rail alignment on mobile */
  }
  .rv-viobox {
    border-width: 1.5px;
  }
  .rv-viobox:hover,
  .rv-viobox.active {
    border-width: 2px;
  }
  .rv-viewer {
    padding: 16px;
  }
  /* Page-nav: full-width on mobile, sits above the mobile tab bar */
  .rv-page-nav {
    left: 0;
    bottom: calc(var(--shell-tab-bar-h, 56px) + env(safe-area-inset-bottom));
  }
  /* Dispute gate band, compressed (mockup 1f). Same breakpoint
     _rvMIsMobile() tests, so this is exactly the range in which the mobile
     sheet's copy of the band is the one on screen. The pill goes full-width
     with a 44px minimum tap target. */
  .rv-gate-band {
    padding: 12px 13px;
    margin: 12px 0 4px;
  }
  .rv-gate-band-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 7px;
  }
  .rv-gate-band-icon svg {
    width: 14px;
    height: 14px;
  }
  .rv-gate-band-title {
    font-size: 12.5px;
  }
  .rv-gate-band-body {
    font-size: 12px;
    line-height: 1.5;
  }
  .rv-gate-band-cta {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 13.5px;
  }
  /* Slice 1 door, mobile (2i). The sheet is the whole surface here, so the
     band loses its own card treatment and every control takes a 44px
     minimum tap target. */
  .rv-door-band.is-open {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .rv-door-band.is-open .rv-gate-band-head {
    display: none;
  }
  .rv-door-divider {
    display: none;
  }
  .rv-door-q {
    font-size: 16px;
  }
  .rv-door-chip,
  .rv-door-none {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13.5px;
  }
  .rv-door-radio {
    min-height: 44px;
    padding: 13px 14px;
    font-size: 14px;
  }
  .rv-door-submit {
    min-height: 44px;
    font-size: 14.5px;
  }
  .rv-door-back,
  .rv-door-nevermind {
    min-height: 44px;
    font-size: 13.5px;
  }
  /* Back arrow that restores the finding sheet. */
  .rv-m-door-back {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    margin-bottom: 4px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--coral);
    cursor: pointer;
  }
  .rv-m-door-back svg {
    width: 16px;
    height: 16px;
    stroke: var(--coral);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}