/* VioVerse Mockup — All responsive breakpoints */

@media (max-width: 900px) {
  .results-layout { grid-template-columns: 1fr; }
  .zone-c { position: static; overflow-y: auto; max-height: 70vh; }
  .zone-c-inner { position: static; overflow-y: auto; max-height: calc(70vh - 32px); }
}

@media (max-width: 480px) {
  /* Nav — single row, matches desktop space-between layout.
     Phase 43.5's deferred mobile-nav redesign shipped here:
     logo left, controls right, at mobile-tuned spacing. */
  .nav { gap: 8px; padding: 14px; border-radius: 0; }
  .nav-controls { gap: 6px; }
  /* 12-reports vault on mobile. TODO(O3): the mobile vault is not designed
     yet (bottom-sheet vs full-width drop is the open question). This is a
     placeholder: shrink the pill a touch and re-anchor the panel to the
     viewport (position: fixed) with 14px gutters so the 340px desktop width
     can't overflow a 375px screen. Replace when O3 is resolved. */
  .vault-pill { padding: 6px 12px; font-size: 13px; }
  .vault-panel { position: fixed; top: 64px; left: 14px; right: 14px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }

  /* ZA6.2: nav logo pinned to ~100px at 375px viewport.
     Current base.css clamp(19px,2.125vw,31px) floors to 19px → ~95px.
     20px renders at ~100px. Bundled global (all mobile screens). */
  .nav-logo { font-size: 20px; }

  /* Landing — ZA6.2: locked to InDesign comp at 375×812 */
  .landing { padding: 16px 24px 24px; }
  .landing h1 {
    font-size: 38px;
    line-height: 44px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .landing-subtitle {
    font-size: 19px;
    line-height: 24px;
    font-weight: 500;
    margin: 0 auto 15px;
    max-width: 340px;
  }
  /* ZA4.19: swap the headline/subhead breaks for mobile. Three-line
     headline (See what's / really on your / credit report.) and a
     sentence-per-line subhead. */
  .br-mobile { display: inline; }
  .br-desktop { display: none; }
  /* Personalization (Scene 2): the personalized <h1> ("David, see what's
     really...") wraps naturally on mobile. The br-mobile breaks were tuned for
     the non-personalized headline and land awkwardly once "David, " is prepended,
     so re-hide br-mobile for the Scene 2 [data-personalize] <h1> (Scene 8's
     h3[data-personalize] is suppressed the same way in the paywall block below,
     reversing the April "Scene 8 keeps its break" note as of 2026-05-20). br-desktop is already display:none in
     this block, so the headline ends up with no hard breaks and flows to the
     container width. Markup + JS untouched (firstChild-only discipline); the
     <span>really</span> coral keyword is preserved. CSS can't distinguish the
     personalized vs empty-name-fallback text on the same element, so the rare
     fallback headline also wraps break-free here, which is acceptable. */
  #screen-landing h1[data-personalize] .br-mobile { display: none; }
  .how-it-works { margin: 0 auto 26px; max-width: 330px; }
  /* Item 4 redesign (2026-05-24): scan-hunts section mobile sizing. */
  .scan-hunts { max-width: 330px; }
  .scan-hunts-heading { font-size: 15px; }
  .scan-hunts-item { font-size: 13px; align-items: flex-start; }
  .scan-hunts-icon { width: 22px; height: 22px; margin-top: 1px; }
  .scan-hunts-note { font-size: 11px; margin-bottom: 16px; }
  .landing-logotype { margin-top: 28px; }
  .landing-logotype-mark, .landing-logotype-slogan { font-size: 13px; }
  /* ZA6.2: fixed 330×160 per comp. padding:0 + flex-center because
     fixed height leaves no room for desktop's 32px padding.
     max-width:100% guards viewports below 378px.
     ZA6.3: flex `gap` removed because icon→h3 and h3→p needed
     asymmetric reductions (50% vs 35%). Per-child margin-bottom
     on .upload-icon and .upload-zone h3 replaces the uniform gap. */
  .upload-zone {
    width: 330px;
    max-width: 100%;
    padding: 25px 20px 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  /* Mobile equivalent of the desktop Match.png proportions (box ~0.57x desktop). */
  .upload-zone h3 { font-size: 18px; margin: 0 0 10px; }
  .upload-zone-drag { display: none; }
  .upload-zone-btn { font-size: 14px; padding: 11px 28px; margin: 0 0 10px; }
  .upload-zone-sub { font-size: 12px; }
  .upload-icon { width: 36px; height: 36px; margin: 0 auto 12px; }
  .upload-icon svg { width: 100%; height: 100%; display: block; }
  /* ZA6.2: 10/12 Plus Jakarta Light, 16px below upload box.
     Overrides desktop margin:24px 0 0 from landing.css. */
  .trust-line {
    font-size: 10px;
    line-height: 12px;
    font-weight: 300;
    margin: 16px 0 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* ZA6.2: 43px explicit — desktop's calc(16px + 2vh) resolves to
     ~32px on 812px viewport, wrong per comp.
     ZA6.8: retargeted from .report-pill to .report-pill-lead because
     the pill group now starts with the lead-in <p>. Pill's own
     margin-top is 0 (adjacent-sibling rule in landing.css), so the
     43px has to anchor on whatever is the top of the group. */
  .report-pill-lead { margin-top: 43px; }

  /* ZA6.1: mobile reorder removed — ZA5.9 compacted HIW to a
     3-column row (~60px tall) so it no longer pushes upload
     below the fold. Mobile now inherits desktop's DOM order:
     h1 → subtitle → HIW → upload → trust → pill → closer. */

  /* Onboarding (the AnnualCreditReport Guide screen) */
  .onboarding { padding: 24px 16px; }
  .onboarding h2 { font-size: 48px; line-height: 1.045; letter-spacing: -0.04em; }
  .ob-actions { flex-direction: column; }
  .ob-actions button { width: 100%; text-align: center; }

  /* Identity Anchor setup (Session 3 Deliverable 1) */
  /* 7-impl-F cleanup (2026-05-18): the .id-setup { padding: 32px 16px 56px }
     rule formerly here was cascade-shadowed by id-setup.css:7 which loads
     later in the cascade (equal specificity, source order wins). This
     completes the same cascade-shadow class that SD#2 resolved for the
     children (see SD#2 forensic comment block immediately below for the
     .id-dob-pills / .id-row siblings). Replacement rule with
     #screen-id-setup ID prefix sits at the end of this @media block. */
  .id-setup h2 { font-size: 40px; line-height: 1.045; letter-spacing: -0.04em; }
  .id-setup-subhead { font-size: 14px; margin-bottom: 28px; }
  .id-dob-pills { gap: 6px; }
  /* SD#2 cleanup (2026-05-17): the two .id-dob-pills/.id-row overrides
     formerly here were cascade-shadowed by id-setup.css which loads
     later (equal specificity, source order wins). Empirical: the SD#2
     diagnostic showed focused fs15px (id-setup.css's desktop value),
     not fs14px. Replacement rules with #screen-id-setup ID prefix sit
     at the end of this @media block. Padding values from the dead
     rules were dropped to keep the iPhone test scoped to font-size
     only; restoring the tighter mobile padding is a separate polish
     item if wanted. */

  /* Scanning */
  .scanning { padding: 24px 16px; }
  .scan-doc { width: 220px; height: 280px; }
  .scan-counter { font-size: 22px; }

  /* Questions */
  .questions { padding: 24px 16px; }
  .q-context-bar { font-size: 30px; line-height: 1.1; }
  .q-container { max-width: 100%; }
  .q-card { padding: 20px 16px; border-radius: 18px; }
  .q-card h3 { font-size: 18px; }

  /* Results */
  .results-layout { padding: 12px; gap: 12px; }
  .zone-a { padding: 24px 14px 0; }
  /* ZA4.21: disclaimer matches Zone A's 14px horizontal padding on mobile
     so its left edge lines up with "Not legal advice..." and the headline
     above, instead of hugging the results-layout padding edge 14px left
     of Zone A content. */
  .disclaimer { padding: 0 14px; }
  .zone-a-header { margin-bottom: 22px; }
  .zone-a h2 { font-size: 48px; }
  .za-headline-line1, .za-headline-line2 { display: block; }
  .za-subtitle { font-size: 14px; }
  .za-grid { gap: 10px; }
  .za-card { padding: 16px; min-height: 100px; }
  .verdict-number { font-size: 44px; }
  .verdict-type { font-size: 14px; }

  /* Document viewer */
  .zone-b { padding: 12px; border-radius: 18px; }
  .page-nav { flex-wrap: wrap; gap: 3px; }
  .page-dot { width: 24px; height: 24px; font-size: 10px; }
  .doc-viewer { min-height: 300px; padding: 16px; }

  /* Flag cards */
  .zone-c { border-radius: 18px; }
  .zone-c-inner { padding: 12px; }
  .flag-card { padding: 14px; }
  .flag-card-header { gap: 4px; }
  .flag-actions { flex-direction: column; }
  .flag-btn { width: 100%; text-align: center; }

  /* Roadmap */
  .zone-d { padding: 16px; border-radius: 18px; }
  .roadmap-step { gap: 10px; }
  .step-content h4 { font-size: 14px; }
  .step-content p { font-size: 13px; }

  /* Zero flags */
  .zero-flags { padding: 24px 16px; }
  .zero-flags h2 { font-size: 48px; line-height: 1.045; letter-spacing: -0.04em; }
  .zf-actions { flex-direction: column; width: 100%; }
  .zf-btn-primary, .zf-btn-secondary { width: 100%; text-align: center; }

  /* Broad scan banner */
  .broad-scan-banner { font-size: 14px; padding: 0; }

  /* T14: Sort pills — wrap on narrow screens */
  .sort-control { flex-wrap: wrap; }
  .sort-pill { font-size: 10px; padding: 4px 8px; }

  /* T14: Preview facts — stack to single column */
  .preview-facts { grid-template-columns: 1fr; }

  /* T14: Analysis badge — compact on mobile */
  .analysis-badge { font-size: 10px; padding: 1px 6px; margin-left: 4px; }

  /* T14: Paywall banner. Mobile paywall LEFT-aligned (2026-05-20) to match the
     desktop paywall (results.css .paywall-banner is text-align:left) and the
     diagnostic block above it. Supersedes the April mobile-center decision.
     David's on-device review (iPhone Air) found the centered block read wrong
     once Scene 8 personalization lengthened the headline (the "David, " prepend).
     Headline, body, AND the $24.99 pill all flush left: text-align:left cascades
     to the inline-block .paywall-btn so the pill follows the text left, and the
     formerly-centering `auto` side margins are dropped so the banner box itself
     sits left in its grid cell (verified flush with the diagnostic block at the
     shared zone-a 14px inset). The Scene 8 personalized headline's br-mobile hard
     break is suppressed below (mirrors the Scene 2 <h1> rule near the top of this
     file) so "David, see what each violation means..." wraps naturally instead of
     breaking at the point tuned for the shorter non-personalized line. The
     .paywall-body break is left intact; it is not personalized. */
  .paywall-banner { max-width: 100%; margin: 24px 0 0; text-align: left; }
  .paywall-btn { width: auto; display: inline-block; padding: 14px 32px; max-width: 100%; }
  #screen-results h3[data-personalize] .br-mobile { display: none; }

  /* T14: Creditor group headers */
  .creditor-group-header { font-size: 11px; }

  /* T14: Toast notification */
  .roadmap-toast { font-size: 13px; padding: 8px 16px; max-width: calc(100vw - 32px); }

  /* Task 1 redesign: the mobile 3-column grid was the tab-bar shape that read
     as tappable. Collapse to the same inline process strip as desktop (display
     flex inherited from landing.css); just tune sizes/gaps smaller for phones. */
  .hiw-steps { gap: 0; }
  .hiw-arrow { font-size: 14px; }
  .hiw-icon-slot { width: auto; height: auto; margin: 0 6px 0 0; }
  .hiw-icon { width: 15px; height: 15px; }
  .hiw-copy { display: none; }
  .hiw-copy-mobile {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: rgba(30,42,53,0.55);
    margin: 0;
    letter-spacing: -0.005em;
  }
  /* ZA6.2: 16px above closer (was 40px). Comp stacks "No AI guesswork"
     tight under the CTA pill as its reassurance caption. */
  .hiw-closer { font-size: 14px; margin-top: 16px; }

  /* Scan doc — scale down slightly for small screens */
  .scan-doc { width: 260px; height: 340px; }

  /* Question nav: stacked full-width, primary on top */
  .q-nav { flex-direction: column-reverse; gap: 8px; }
  .q-next { width: 100%; min-height: 44px; min-width: 0; }
  .q-back { width: 100%; min-height: 44px; }

  /* q12a counter rides above the full-width Continue rather than beside it.
     .q-nav is column-reverse, so this wrapper (the second child) lands on top
     and Back below, giving counter / Continue / Back down the screen. */
  .q12a-nav-right { flex-direction: column; align-items: stretch; gap: 8px; }
  .q12a-counter { text-align: center; }

  /* Mobile q12a rows are taller than desktop (measured 251px vs 212px), so
     three of them need more room: 3*251 + 2*20 gap = 793. Sibling of the
     .q6-scroll.q12a-scroll rule in questions.css -- same two-class specificity,
     and mobile.css loads after questions.css so this wins on source order. */
  .q6-scroll.q12a-scroll { max-height: 800px; }

  /* Footer */
  .vv-footer { padding: 16px; }

  /* Mobile fit-one-viewport pass (2026-05-19): site-footer mobile pad
     trimmed from desktop 24/32 to 12/16 — 28px vertical reclaim. Only
     surviving trim from the original 5-rule Package 4: a Chrome MCP
     empirical pass found .landing { min-height: calc(100vh - 57px) }
     in landing.css:6 absorbs all internal trims into dead space, so
     the 4 inside-.landing trims (landing padding, pc-h1 mb, report-
     pill-lead margin, pc-trust mt) were reverted as dead-letter.
     Residual overflow at David's 420x750 viewport: ~60px (was 88).
     Full closure deferred — see follow-up BACKLOG entry "Mobile fit-
     one-viewport — residual 60px after Item 2 footer trim". Desktop
     value stays 24/16/32 via base.css:290-296. */
  .site-footer { padding: 12px 16px 16px; }

  /* Phase 7a: Bureau/date tabs — horizontal scroll on narrow screens */
  .bureau-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .bureau-tabs::-webkit-scrollbar { display: none; }
  .bureau-tab { white-space: nowrap; flex-shrink: 0; padding: 6px 12px; font-size: 12px; }

  /* Phase 7a/7b: Callout cards — stack vertically */
  .cb-callout-inner { flex-wrap: wrap; gap: 8px; }
  .cb-callout-btn { width: 100%; text-align: center; }
  .temporal-callout-inner { flex-wrap: wrap; gap: 8px; }

  /* Phase 7e: Detection Strength badge */
  .ds-badge { font-size: 12px; padding: 2px 8px; }

  /* Wait-UX interstitial overlay */
  .wait-interstitial { padding: 14px; }
  .wait-interstitial-card { padding: 22px 18px 18px; border-radius: 22px; }
  .wait-interstitial-headline { font-size: clamp(20px, 6vw, 26px); margin-bottom: 14px; }
  .wait-interstitial-subcopy { font-size: 14px; margin-bottom: 18px; }
  .wait-interstitial-visual { min-height: 72px; margin-bottom: 14px; }
  .wait-interstitial-actions { flex-direction: column-reverse; gap: 8px; }
  .wait-interstitial-continue { width: 100%; min-height: 44px; padding: 14px 24px; min-width: 0; margin-left: 0; }
  .wait-interstitial-back { width: 100%; min-height: 44px; }

  /* ====================================================================
     PATH (c) v10 FIRST-VISIT LANDING — mobile breakpoint (Session 7-impl-B).
     Replaces v6 mobile (which deferred to sticky CTA + hid the inline pill).
     v10 mobile: the inline pill INSIDE .pc-card is the only entry point;
     mobile sticky CTA is fully removed. Step bullets scale 16px desktop →
     13px mobile (12px at <360px viewport via the sibling @media block
     below this one) with white-space: nowrap as belt-and-suspenders against
     wrap. Scoped under #screen-landing.needs-id-setup so the anchor-present
     landing's mobile layout (locked at ZA6.2) is untouched.
     ==================================================================== */

  /* Override .landing wrapper padding for first-visit only.
     v6 set bottom: 120px to clear the sticky CTA — sticky is gone, drop. */
  #screen-landing.needs-id-setup .landing {
    padding: 16px 24px 32px;
    text-align: left;
    align-items: stretch;
    min-height: auto;
  }

  /* Hero ramp scales down for narrow viewports */
  #screen-landing.needs-id-setup .pc-h1 {
    font-size: clamp(36px, 9vw, 44px);
    line-height: 1.05;
    margin-bottom: 14px;
  }
  #screen-landing.needs-id-setup .pc-hero { padding: 6px 0 4px; }

  /* Card tightens horizontally on mobile to give step text more width */
  #screen-landing.needs-id-setup .pc-card { padding: 22px 18px 22px; }
  #screen-landing.needs-id-setup .pc-card .pc-subhead {
    font-size: 20px;
    margin-bottom: 18px;
  }

  /* Step list — scaled down, single-line guarantee on mobile */
  #screen-landing.needs-id-setup .pc-steps { gap: 14px; margin-bottom: 22px; }
  #screen-landing.needs-id-setup .pc-step {
    font-size: 13px;
    gap: 12px;
    white-space: nowrap;
  }
  #screen-landing.needs-id-setup .pc-step-icon { width: 22px; height: 22px; }

  /* CTA pill — slightly smaller padding inside the tighter card */
  #screen-landing.needs-id-setup .pc-card .get-started-zone .gs-primary {
    padding: 16px 48px;
    font-size: 16px;
  }

  /* Footnote tightens + uses full card width on mobile */
  #screen-landing.needs-id-setup .pc-footnote {
    font-size: 11px;
    line-height: 1.45;
    max-width: 100%;
  }

  /* The legacy .report-pill-lead has a mobile-only margin-top: 43px from
     landing.css that was tuned for the pre-Path-c stack. In v10 it sits
     between the card and the trust block — tighten so the trust block
     doesn't get pushed down. */
  #screen-landing.needs-id-setup .report-pill-lead { margin-top: 12px; }

  /* Outside-card trust line — tight under the AnnualCreditReport pill */
  #screen-landing.needs-id-setup .pc-trust { margin-top: 12px; text-align: center; }
  #screen-landing.needs-id-setup .pc-trust-primary { font-size: 14px; }

  /* Nav auth controls — smaller on mobile */
  .nav-signin { font-size: 13px; padding: 7px 15px; }
  .nav-signout { font-size: 13px; }
  .nav-tips { font-size: 13px; }
  .nav-divider { height: 12px; }

  /* Payoff line — tighter on mobile */
  #screen-landing.needs-id-setup .pc-payoff { font-size: 17px; line-height: 1.4; }

  /* "What vioverse does" boxless block — mobile sizing */
  #screen-landing.needs-id-setup .pc-whats-inside { margin-top: 14px; margin-bottom: 20px; padding-left: 18px; }
  #screen-landing.needs-id-setup .pc-demo-list { gap: 14px; }
  #screen-landing.needs-id-setup .pc-demo-item { font-size: 13px; gap: 12px; }
  #screen-landing.needs-id-setup .pc-demo-item-icon { width: 22px; height: 22px; }
  #screen-landing.needs-id-setup .pc-demo-invite { font-size: 15px; gap: 8px; margin-top: 18px; }
  #screen-landing.needs-id-setup .pc-demo-invite svg { width: 18px; height: 18px; }
  /* Swap Click/Tap labels */
  .pc-demo-invite-desktop { display: none !important; }
  .pc-demo-invite-mobile { display: inline !important; }

  /* Step numbers — scale down alongside step text on mobile */
  #screen-landing.needs-id-setup .pc-step-num { font-size: 11px; }

  /* iOS auto-zoom-prevent — SD#2 closure (2026-05-17).
     Empirical: on iPhone, focusing a sub-16px input or select made the
     SD#2 diagnostic report b=420 while v (visualViewport) shrank to
     ~394 at scale 1.07. The state persisted across showScreen and
     nextQuestion transitions until a full page reload — a permanent
     26px horizontal slip per pageload. The diagnostic that established
     this is at vioverse_app/mockup/js/iphone-diag.js (retired with
     this fix). The rules below set font-size to 16px on the affected
     focusable elements; iOS Safari does not auto-zoom on focus when
     the input's computed font-size is >=16px (the threshold the
     dev-harness fix at dev-harness.css:609-617 also targets).
     #screen-id-setup prefix on the id-setup rules adds ID specificity
     so the rules win over id-setup.css's desktop rule which loads
     later in the cascade. */
  #screen-id-setup .id-dob-pills select { font-size: 16px; }
  #screen-id-setup .id-row input[type="text"],
  #screen-id-setup .id-row input[type="password"],
  #screen-id-setup .id-row input[type="email"] { font-size: 16px; }
  /* 7-impl-F polish (2026-05-18): mobile top-padding tighten on the
     id-setup container. Replaces the inert .id-setup padding rule
     formerly near line 104 of this file (see forensic comment there
     for the cascade-shadow class explanation). Sides + bottom
     preserved from id-setup.css:7's desktop values; only top tightens
     56px → 16px so the form sits closer to the top on mobile. */
  #screen-id-setup .id-setup { padding: 16px 24px 80px; }
  .q-date-pill { font-size: 16px; }

  /* Quick Check modal: full-height sheet so buttons are always reachable */
  #modal-bureau-confirm {
    align-items: flex-start;
    padding: 0;
  }
  #modal-bureau-confirm .bureau-confirm-card {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 24px 20px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #modal-bureau-confirm .bc-buttons {
    position: sticky;
    bottom: 0;
    background: var(--bone-0);
    margin: 14px -20px 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 rgba(31,24,19,0.08);
  }
}

/* ====================================================================
   PATH (c) v10 — narrow-viewport (<360px) edge case (Session 7-impl-B).
   Lives as a SIBLING @media block — CSS doesn't allow @media nesting
   in vanilla syntax, so this can't sit inside @media (max-width: 480px).
   Scales the step font + icon down a touch on phones at the narrow end
   of the spectrum (older iPhone SE, narrow Android) so the single-line
   bullet guarantee survives even at the tightest viewport.
   ==================================================================== */
@media (max-width: 360px) {
  #screen-landing.needs-id-setup .pc-step { font-size: 12px; gap: 10px; }
  #screen-landing.needs-id-setup .pc-step-icon { width: 20px; height: 20px; }
  #screen-landing.needs-id-setup .pc-step-num { font-size: 10px; }
}


/* ====================================================================
   MOBILE REPORT-VIEW (v10 design-locked reference, 2026-06-11).
   Canvas children: page (PDF + overlays + scrim), header pill, drawer,
   detail sheet. Scrim lives INSIDE .rv-m-page per settled fact 17.
   Shell handles .topbar (.nav) and bottom tabs (.sidebar).
   ==================================================================== */

/* Desktop: hide mobile surface */
.rv-m { display: none; }

@media (max-width: 768px) {
  /* Hide desktop layout, show mobile surface */
  .rv-layout { display: none !important; }
  .rv-m { display: block; position: relative; width: 100%; height: calc(100dvh - var(--shell-nav-h, 60px) - var(--shell-tab-bar-h, 56px) - env(safe-area-inset-bottom)); overflow: hidden; }

  /* === CANVAS === */
  .rv-m-canvas { position: absolute; inset: 0; background: #fff; overflow: hidden; }
  .rv-m-canvas.peek { background: #fff; }

  /* === PAGE (PDF + scrim + callout layer + ghost layer, single transform unit) === */
  .rv-m-page {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: auto;
    background: #fff;
    transition: transform .42s cubic-bezier(.22,.61,.36,1);
  }
  .rv-m-page.panning { transition: none; }

  /* Scrim: white 65%, always visible (no cutout spotlight).
     Washes page content so VioBox callouts pop. Retires the v11 navy-15% tint. */
  .rv-m-scrim {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.65);
    z-index: 5;
    pointer-events: none;
  }

  /* v11 callout layer: stadium pills above the scrim */
  .rv-m-callouts {
    position: absolute; inset: 0;
    z-index: 6;
    pointer-events: none;
  }
  .rv-m-callout {
    position: absolute;
    max-width: 88%;
    pointer-events: auto;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    padding: 5px 15px 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    width: max-content;
  }
  /* Expanded invisible hit area (3D.4): date-only callouts under 44px wide.
     The pseudo-element gives a minimum 44px-wide tap zone centered on the
     pill without changing the visible box or affecting collision spacing.
     No min-height: vertical expansion would overlap adjacent callouts
     packed at the solver's 8px minimum gap. */
  .rv-m-callout::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 44px;
    width: 100%;
  }
  .rv-m-callout .rv-m-co-lbl {
    font-size: 7px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--coral); line-height: 1.3;
  }
  .rv-m-callout .rv-m-co-val {
    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 star. Border-width computed by JS as ~12% of pill
     height (v11 contract item 1: ratios, not absolute px). CSS sets color/style. */
  .rv-m-callout.live {
    border-style: solid;
    border-color: var(--coral);
    box-shadow: 0 0 18px rgba(242,100,25,.5), 0 3px 8px rgba(30,42,53,.2);
    z-index: 9;
  }
  .rv-m-callout.live .rv-m-co-val { font-size: 11px; }
  /* Dim callout: ring ~(1.5/4) of live ratio. Border-width computed by JS. */
  .rv-m-callout.dim {
    border-style: solid;
    border-color: rgba(242,100,25,.6);
    box-shadow: 0 1px 3px rgba(30,42,53,.12);
    z-index: 7;
  }
  .rv-m-callout.dim .rv-m-co-lbl { color: rgba(242,100,25,.7); font-size: 6.5px; }
  .rv-m-callout.dim .rv-m-co-val { font-size: 9px; color: rgba(30,42,53,.85); }

  /* Anchor tick: marks the source row when callout is on-row */
  .rv-m-vtick {
    position: absolute; width: 8px; height: 2px; border-radius: 1px;
    background: var(--coral); z-index: 8; pointer-events: none;
  }
  .rv-m-vtick.dimt { background: rgba(242,100,25,.55); }
  /* Tether: thin line from displaced callout back to its true row */
  .rv-m-vtether {
    position: absolute; width: 1.5px;
    background: rgba(242,100,25,.55);
    z-index: 6; pointer-events: none;
  }
  /* Dot: marks the true anchor on the page for displaced callouts */
  .rv-m-vdot {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: var(--coral); z-index: 8; pointer-events: none;
  }

  /* Ghost outlines for hold-to-peek document view */
  .rv-m-ghosts {
    position: absolute; inset: 0;
    z-index: 6; pointer-events: none;
  }
  .rv-m-vghost {
    position: absolute; border-radius: 6px; display: none;
  }
  .rv-m-vghost.g-live { border: 1.5px solid var(--coral); }
  .rv-m-vghost.g-dim { border: 1px solid rgba(242,100,25,.5); }

  /* Peek mode: hide ALL report overlays (callouts, scrim, pill, drawer,
     detail sheet), show ghosts. Fully unobstructed page with only literal
     ghost outlines visible. Eye button stays visible (coral active state).
     Transient: on release, everything restores to its prior state with no
     layout jump. Peek never mutates _rvMDetailOpen, lit box, snap position,
     or pan -- it is purely visual. */
  .rv-m-canvas.peek .rv-m-callouts { display: none; }
  .rv-m-canvas.peek .rv-m-scrim { display: none; }
  .rv-m-canvas.peek .rv-m-vghost { display: block; }
  .rv-m-canvas.peek .rv-m-hpill { display: none; }
  .rv-m-canvas.peek .rv-m-drawer { display: none; }
  .rv-m-canvas.peek .rv-m-dsheet { display: none; }
  .rv-m-canvas.peek:not(.peek-locked) .rv-m-pgnav { display: none; }

  /* Hold-to-peek eye button */
  .rv-m-eye {
    position: absolute; bottom: 160px; right: 10px;
    width: 34px; height: 34px; 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: 22; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    touch-action: none;
    transition: background .12s ease;
  }
  .rv-m-eye svg {
    width: 17px; height: 17px;
    fill: none; stroke: var(--text);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
    transition: stroke .12s ease;
  }
  .rv-m-eye:active,
  .rv-m-canvas.peek .rv-m-eye { background: var(--coral); border-color: var(--coral); }
  .rv-m-eye:active svg,
  .rv-m-canvas.peek .rv-m-eye svg { stroke: #fff; }
  .rv-m-eye.peek-locked {
    background: var(--coral); border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(242,100,25,0.3), 0 3px 10px rgba(30,42,53,0.20);
  }
  .rv-m-eye.peek-locked svg { stroke: #fff; }

  /* Clean-report state: no scrim, centered banner.
     Triggered when a paid user's report has zero scored_flags. */
  .rv-m-canvas.clean .rv-m-scrim { display: none; }

  .rv-m-clean-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: var(--bone-0);
    border-radius: var(--radius);
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(30,42,53,0.12);
    max-width: 280px;
    width: 80%;
  }
  .rv-m-clean-banner svg {
    width: 40px;
    height: 40px;
    color: var(--coral);
    margin-bottom: 12px;
  }
  .rv-m-clean-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
  }
  .rv-m-clean-msg {
    font-size: 14px;
    color: rgba(30,42,53,0.6);
    line-height: 1.5;
  }
  .rv-m-clean-hint {
    font-size: 12px;
    color: rgba(30,42,53,0.4);
    margin-top: 14px;
  }

  /* === PAGE-NAVIGATION CONTROLLER (transient floating pill) === */
  .rv-m-pgnav {
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 4px 16px rgba(30,42,53,0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    pointer-events: none;
  }
  .rv-m-pgnav.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .rv-m-pgnav-btn {
    border: none;
    background: transparent;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
  }
  .rv-m-pgnav-btn:active { background: rgba(30,42,53,0.06); }
  .rv-m-pgnav-btn.dis {
    opacity: 0.25;
    pointer-events: none;
  }
  .rv-m-pgnav-btn svg { width: 18px; height: 18px; }
  .rv-m-pgnav-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 0 4px;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
  }
  .rv-m-pgnav-cur {
    cursor: pointer;
    border-bottom: 1.5px dashed rgba(30,42,53,0.25);
    padding-bottom: 1px;
  }
  .rv-m-pgnav-input {
    width: 2.5em;
    border: none;
    border-bottom: 2px solid var(--coral);
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
  }
  .rv-m-pgnav-input::-webkit-outer-spin-button,
  .rv-m-pgnav-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* PDF canvas */
  #rv-m-pdf-canvas {
    display: block;
    width: 100%;
    background: #fff;
  }

  /* === HEADER PILL (floating identity + page position) === */
  /* v11: white fill (was bone), line-height 1.25 (fixes clipped descenders) */
  .rv-m-hpill {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 94%;
    height: 44px;
    background: var(--ink-0);
    border: none;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(30,42,53,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    z-index: 12;
    cursor: default;
  }
  .rv-m-hpill-text {
    font-size: 17px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
    color: #fff; letter-spacing: -0.01em;
    line-height: 1.25; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* === DRAWER (page navigation, three snap points) === */
  .rv-m-drawer {
    position: absolute; left: 0; width: 100%; bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 14px rgba(30,42,53,0.22);
    height: 140px;
    transition: height .26s cubic-bezier(.22,.61,.36,1);
    overflow: hidden; z-index: 14;
    display: flex; flex-direction: column;
  }
  .rv-m-drawer.dragging { transition: none; }
  .rv-m-dr-head {
    flex: 0 0 auto;
    cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none;
  }
  .rv-m-dr-head:active { cursor: grabbing; }
  .rv-m-grab {
    width: 30px; height: 3px;
    border-radius: 999px;
    background: rgba(30,42,53,0.25);
    margin: 8px auto 8px;
  }
  .rv-m-dr-label {
    text-align: center;
    font-size: 12px; font-weight: 500;
    color: rgba(30,42,53,0.65);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
  }
  .rv-m-dr-body {
    flex: 1; min-height: 0;
    overflow: hidden;
    padding: 0 20px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .rv-m-dr-body::-webkit-scrollbar { display: none; }
  .rv-m-drawer.open .rv-m-dr-body { overflow-y: auto; }

  /* Drawer chips */
  .rv-m-dr-chips { display: flex; gap: 11px; flex-wrap: wrap; }
  .rv-m-chip {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(30,42,53,0.22);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600;
    color: var(--text); cursor: pointer;
  }
  .rv-m-chip.sel { border: 2px solid var(--coral); color: var(--coral); }

  /* Drawer list items */
  .rv-m-dr-cur { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin: 2px 0 11px; }
  /* Walk fixes 2/4: question-state bands inside the mobile drawer. Same
     builder as desktop; only the compression differs. The link goes
     full-width with a 44px tap target rather than sitting inline. */
  .rv-qbar { padding: 11px 12px; margin: 0 0 11px; gap: 8px; flex-direction: column; align-items: stretch; }
  .rv-qbar-text { font-size: 12.5px; }
  .rv-qbar-link { min-height: 44px; display: flex; align-items: center; }
  .rv-qbar-sofar { font-size: 15px; margin: 0 0 10px; }
  .rv-m-dr-sechead { font-size: 12px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
  .rv-m-dr-sechead span { color: rgba(30,42,53,0.45); font-weight: 600; }
  .rv-m-dr-bureau { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
  .rv-m-dr-bdiv { height: 1px; background: rgba(30,42,53,0.10); margin: 8px 0 10px; }
  .rv-m-dr-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; margin: 0 0 3px;
    border-radius: 12px;
    font-size: 13px; font-weight: 500;
    color: var(--text); cursor: pointer;
  }
  .rv-m-dr-row:active { background: rgba(30,42,53,0.04); }
  .rv-m-dr-row.viewing { font-weight: 700; }
  .rv-m-dr-row .rv-m-vcheck { width: 15px; height: 15px; fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .rv-m-dr-sep { height: 1px; background: rgba(30,42,53,0.12); margin: 14px 0 10px; }

  /* === DETAIL SHEET (binary: open at max height or gone) === */
  .rv-m-dsheet {
    position: absolute; left: 0; width: 100%; bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 18px rgba(30,42,53,0.28);
    z-index: 16;
    display: flex; flex-direction: column;
    /* Exit: gentle start, gathers speed (settled fact 2) */
    transform: translateY(105%);
    transition: transform .42s cubic-bezier(.4,0,1,1), height .26s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
  }
  /* Entrance: quick off the line, feather landing */
  .rv-m-dsheet.up {
    transform: translateY(0);
    transition: transform .38s cubic-bezier(.16,1,.3,1), height .26s cubic-bezier(.22,.61,.36,1);
  }
  .rv-m-dsheet.dragging { transition: none; }

  /* Sheet head: grab handle + stepper */
  .rv-m-ds-head {
    flex: 0 0 auto;
    cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none;
    padding: 7px 20px 0;
  }
  .rv-m-ds-head:active { cursor: grabbing; }
  .rv-m-ds-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0 8px;
  }
  .rv-m-ds-btn {
    display: flex; align-items: center;
    font-size: 13px; font-weight: 600;
    border: none; background: none;
    padding: 2px 4px;
    font-family: inherit; cursor: pointer;
  }
  .rv-m-ds-prev { color: rgba(30,42,53,0.55); }
  .rv-m-ds-next { color: var(--coral); }
  .rv-m-ds-btn.off { opacity: 0.3; pointer-events: none; }
  .rv-m-ds-count {
    font-size: 12px; font-weight: 500;
    color: rgba(30,42,53,0.55);
  }

  /* Sheet body */
  .rv-m-ds-body {
    flex: 1; min-height: 0;
    padding: 2px 20px 14px;
    border-top: 0.5px solid rgba(30,42,53,0.08);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .rv-m-ds-body::-webkit-scrollbar { display: none; }

  /* Sheet content anatomy */
  /* F4: the row now carries two chips (confidence + impact). Wrap rather
     than overflow on a narrow phone with a long creditor name; type size
     is deliberately NOT reduced to make room. */
  .rv-m-ds-identrow { display: flex; justify-content: space-between; align-items: center; margin: 9px 0 0; flex-wrap: wrap; gap: 6px; }
  .rv-m-ds-ident { font-size: 12px; font-weight: 500; color: rgba(30,42,53,0.65); }
  /* Relay 28 C: the account-facts sub-line, mobile parity with the desktop
     .rv-detail-facts. Same tokens; the sheet is where an iPhone reader
     actually meets two identically-worded findings. */
  .rv-m-ds-facts { font-size: 11.5px; font-weight: 600; color: rgba(30,42,53,0.55); margin: 7px 0 0; line-height: 1.35; }
  /* F4: keeps the two chips together as one right-hand unit, wrapping as a pair. */
  .rv-m-ds-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  /* F4: quieter than the coral confidence ladder -- impact is the
     secondary axis and must not compete with the badge beside it. */
  .rv-m-ds-impact {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 999px; white-space: nowrap;
    padding: 3px 9px;
    border: 1.5px solid rgba(30,42,53,0.18);
    color: rgba(30,42,53,0.62);
  }
  .rv-m-ds-tier {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 999px; white-space: nowrap;
  }
  /* Tier badges: settled fact 18 */
  /* v11 four-tier badge ladder (3B.7): one axis of fading conviction */
  .rv-m-ds-tier.strong { background: var(--coral); color: #fff; padding: 4px 9px; }
  .rv-m-ds-tier.likely { background: transparent; border: 1.5px solid var(--coral); color: var(--coral); padding: 2.5px 7.5px; }
  .rv-m-ds-tier.possible { background: transparent; border: 1.5px dashed var(--coral); color: rgba(242,100,25,0.85); padding: 2.5px 7.5px; }
  .rv-m-ds-tier.weak { background: transparent; border: 1.5px dashed rgba(30,42,53,0.45); color: rgba(30,42,53,0.60); padding: 2.5px 7.5px; }

  .rv-m-kick { font-size: 12px; font-weight: 700; color: rgba(30,42,53,0.75); margin: 13px 0 5px; }
  .rv-m-ds-claim { margin: 0; color: var(--coral); font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
  .rv-m-ds-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(30,42,53,0.85); }

  /* CTA */
  .rv-m-ds-cta { margin: 14px 0 5px; background: #1D2430; color: #fff; font-size: 14px; font-weight: 600; border-radius: 999px; border: none; padding: 12px; text-align: center; width: 100%; cursor: pointer; }
  .rv-m-ds-scope { margin: 0 0 4px; text-align: center; font-size: 11px; font-weight: 500; color: rgba(30,42,53,0.65); }

  /* Law section (collapsible) */
  .rv-m-ds-law { border-top: 1px solid rgba(30,42,53,0.1); margin-top: 9px; }
  .rv-m-ds-law-toggle {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0;
    font-size: 13px; font-weight: 700;
    color: rgba(30,42,53,0.75); cursor: pointer;
  }
  .rv-m-ds-law-toggle svg {
    width: 14px; height: 14px; flex: 0 0 auto;
    fill: none; stroke: rgba(30,42,53,0.5);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .28s;
  }
  .rv-m-ds-law.open .rv-m-ds-law-toggle svg { transform: rotate(180deg); }
  .rv-m-ds-law-body { max-height: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.22,.61,.36,1); }
  /* v11: dynamic sizing replaces the fixed 420px cap that clipped long legal_authority
     (BK-T11 at 745 chars, BK-T12 at 692 chars). 2000px is an unreachable ceiling;
     the transition animates to the content's natural height. */
  .rv-m-ds-law.open .rv-m-ds-law-body { max-height: 2000px; }
  .rv-m-ds-gloss { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: rgba(30,42,53,0.62); }
  .rv-m-ds-gloss b { color: rgba(30,42,53,0.8); }

  /* Attorney panel (conditional: renders only when legal_authority exists) */
  .rv-m-ds-atty { background: rgba(30,42,53,0.035); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
  .rv-m-ds-atty-cap { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: rgba(30,42,53,0.75); }
  .rv-m-ds-atty-text { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(30,42,53,0.72); }

  /* Loading overlay */
  .rv-m-loading {
    display: none;
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.85);
    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: 30;
  }
  .rv-m-loading.visible { display: flex; }

  /* Non-violation mobile states: locked / clean / under-threshold */
  .rv-m-state-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--radius, 28px);
    padding: 32px 24px;
    text-align: center;
    width: calc(100% - 48px);
    max-width: 320px;
    box-shadow: 0 14px 40px rgba(28,20,14,0.10);
    z-index: 10;
  }
  .rv-m-state-icon {
    width: 48px; height: 48px;
    color: var(--coral);
    margin: 0 auto 16px;
    display: block;
  }
  .rv-m-state-title {
    font-size: 20px; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
  }
  .rv-m-state-value {
    font-size: 13.5px;
    color: rgba(30,42,53,0.55);
    line-height: 1.5; margin-bottom: 20px;
  }
  .rv-m-state-msg {
    font-size: 14px;
    color: rgba(30,42,53,0.62);
    line-height: 1.55; margin-bottom: 20px;
  }
  .rv-m-state-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;
  }

  /* --- Identity findings in drawer + detail sheet (mobile) --- */

  /* Band header */
  .rv-m-id-band {
    background: #F3EFE7;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .rv-m-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-m-id-band-icon svg {
    width: 18px; height: 18px;
    stroke: var(--coral); stroke-width: 2;
    fill: none;
  }
  .rv-m-id-band-title {
    font-size: 13px; font-weight: 700;
    color: var(--text); line-height: 1.3;
  }
  .rv-m-id-band-sub {
    font-size: 12px; font-weight: 400;
    color: rgba(30,42,53,0.55); margin-top: 2px;
  }

  /* Finding cards in drawer */
  .rv-m-id-card {
    background: #fff;
    border: 1px solid rgba(31,24,19,0.12);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    min-height: 44px;
    cursor: pointer;
  }
  .rv-m-id-card.locked { cursor: default; }
  .rv-m-id-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .rv-m-id-card-label {
    font-size: 13px; font-weight: 700;
    color: var(--text);
  }

  /* Provenance chip (navy on gray, not a tier) */
  .rv-m-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px; font-weight: 700;
    border: 1px solid rgba(31,24,19,0.14);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
    color: var(--text);
    background: rgba(30,42,53,0.06);
  }
  .rv-m-id-chip svg {
    width: 12px; height: 12px;
    stroke: currentColor; stroke-width: 2;
    fill: none;
  }

  /* Wrong-to-right row */
  .rv-m-id-wrong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .rv-m-id-wrong-old {
    font-size: 13px; font-weight: 500;
    color: rgba(30,42,53,0.5);
    text-decoration: line-through;
  }
  .rv-m-id-wrong-arrow svg {
    width: 14px; height: 14px;
    stroke: var(--coral); stroke-width: 2;
    fill: none;
  }
  .rv-m-id-wrong-new {
    font-size: 13px; font-weight: 700;
    color: var(--coral);
  }

  /* Lock row (unpaid teaser) */
  .rv-m-id-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(30,42,53,0.4);
  }
  .rv-m-id-lock svg {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2;
    fill: none;
  }

  /* Separator below identity section */
  .rv-m-id-sep {
    height: 1px;
    background: rgba(31,24,19,0.10);
    margin: 6px 0 10px;
  }

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

  /* Show me on page 1 button */
  .rv-m-id-page-btn {
    display: block;
    width: 100%;
    border: 1px solid rgba(31,24,19,0.15);
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 13px; font-weight: 600;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    min-height: 44px;
    margin-bottom: 4px;
  }
  .rv-m-id-page-sub {
    text-align: center;
    font-size: 11px;
    color: rgba(30,42,53,0.45);
    margin-bottom: 14px;
  }
}