/* VioVerse Mockup — Results: zones A-D, flag cards, overlays, disclaimer */

/* RESULTS LAYOUT
   ZA4: indented content column anchored at 1440px. `clamp(24px, 14vw, 200px)`
   resolves to 200px at 1440+ viewports (content column = 1040px wide), scales
   down fluidly on narrower widths, and bottoms out at 24px. max-width bumped
   from 1400 to 1440 so the comp proportions hit at exactly 1440px viewport. */
.results-layout {
  display: grid; grid-template-columns: 1fr 420px; grid-template-rows: auto 1fr;
  gap: 16px; padding: 16px clamp(24px, 3vw, 48px); min-height: calc(100dvh - var(--shell-top-gap, 10px) - var(--shell-nav-h, 60px)); max-width: 1440px; margin: 0 auto;
}

/* ZA4.8/ZA4.12: Free-state vertical positioning — optical center. In free
   state Zones B/C/D carry .paywall-hidden (display: none) so only Zone A
   and the disclaimer participate in layout. ZA4.8 used a single auto row
   plus align-content: center for mathematical centering. ZA4.12 shifts
   to asymmetric fr-rows (30fr before content, 70fr after) which places
   the content block at roughly 30% from the top — ~12% higher than
   mathematical center. This matches the design-world convention of
   "optical centering": geometric center often reads as slightly low
   because the eye weights visual mass from top-down. 30/70 lands inside
   David's 10-15% shift range.

   Explicit grid-row assignments on .zone-a and .disclaimer place them in
   the auto rows between the fr spacers. Paid state reverts automatically
   because :has() stops matching — the default `auto 1fr` template resumes
   and Zones B/C/D return to flow below Zone A. */
.results-layout:has(.zone-a.tier-free) {
  grid-template-rows: 30fr auto auto 70fr;
}
.results-layout:has(.zone-a.tier-free) .zone-a {
  grid-row: 2;
}
.results-layout:has(.zone-a.tier-free) .disclaimer {
  grid-row: 3;
}

/* ZONE A — Monzo-style card grid.
   ZA4: typography anchored at 1440px via clamp() calibrated so InDesign point
   sizes (headline 84, descriptive 24, bar label 24, paywall kicker 36) hit at
   exactly 1440px viewport. Below 1440 the values scale down fluidly; above
   1440 they cap. Descriptive line weight 400 → 300 (Plus Jakarta Sans Light)
   with SemiBold (600) on "strong matches" and bureau name. max-width caps
   dropped on descriptive + confidence bar so they stretch with the column. */
.zone-a { grid-column: 1 / -1; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; }
.zone-a-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.zone-a h2 { font-size: clamp(58px, 7vw, 110px); font-weight: 700; margin: 0; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
.za-headline-line1, .za-headline-line2 { display: inline; }
.za-headline-line2 { color: var(--coral); }

/* ZA4.13/ZA4.15: Zone A headline reveal. ZA4.13 split the animation
   across "We found", the number, and "issues" — which read as
   disjointed because the reader's eye closes the sentence at
   "We found N" before "issues" arrives. ZA4.15 fades the entire
   headline in as one unit (400ms), then the count-up plays on the
   already-visible text. The number starts at "0" so the fade-in
   shows "We found 0 issues" as a complete sentence, then climbs to
   the final value. JS handles the count-up delay (400ms wait for
   fade to complete, then 700ms ease-out count-up). */
.za-headline.animate-in {
  opacity: 0;
  transform: translateY(8px);
  animation: zaHeadlineFadeIn 400ms ease-out forwards;
}
@keyframes zaHeadlineFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .za-headline.animate-in {
    opacity: 1; transform: none; animation: none;
  }
}
.za-descriptive { font-size: clamp(15px, 1.67vw, 26px); line-height: 1.4; font-weight: 300; color: var(--text); margin: 0 0 clamp(6px, 0.83vw, 12px); max-width: clamp(480px, 56vw, 820px); }
.za-descriptive strong { font-weight: 600; }
.za-confidence-bar-wrap { display: flex; align-items: center; gap: clamp(8px, 0.83vw, 14px); margin: 0 0 clamp(24px, 3.33vw, 48px); max-width: none; }
.za-confidence-track { flex: 1; height: clamp(8px, 0.7vw, 12px); background: rgba(30,42,53,0.10); border-radius: 999px; overflow: hidden; }
.za-confidence-fill { position: relative; height: 100%; background: var(--text); border-radius: 999px; transition: width 1800ms cubic-bezier(0.22, 1, 0.36, 1); }
.za-confidence-fill::after { content: ''; position: absolute; top: 50%; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); transform: translateY(-50%); }
.za-confidence-label { font-size: clamp(15px, 1.67vw, 26px); font-weight: 700; color: var(--coral); white-space: nowrap; letter-spacing: 0.02em; opacity: 0; transition: opacity 300ms ease 1500ms; }
.za-confidence-bar-wrap.animate .za-confidence-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .za-confidence-fill, .za-confidence-label { transition: none; }
  .za-confidence-label { opacity: 1; }
}
.zone-a.tier-free .preview-facts { display: none; }
.zone-a.tier-free .zone-a-toggle { display: none; }
.za-subtitle { display: none; }
.za-subtitle { font-size: 16px; font-weight: 300; color: var(--text-secondary); line-height: 1.4; margin: 0; }
.za-subtitle span { font-weight: 400; }
#zone-a-report-date { color: var(--text-secondary); }
#zone-a-bureau { color: var(--text); font-weight: 500; }
/* Zone A message containers: unified system.
   .qc-info (gold, auto-derived), .qc-warning (amber, mismatch),
   .qc-conflict (amber, answer-vs-analysis conflict),
   .qc-note (blue-gray, informational suppression note),
   .cb-callout-inner (ink, cross-bureau CTA). Same base, left border varies. */
.qc-info, .qc-warning, .qc-conflict, .qc-note { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; font-size: 11px; line-height: 1.5; background: rgba(255,255,255,0.5); color: var(--text-secondary); border: none; }
.qc-info strong, .qc-warning strong, .qc-conflict strong, .qc-note strong { font-weight: 600; color: var(--text); }
.qc-detail { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary); font-style: italic; }
#qc-alerts:empty { display: none; }
#qc-alerts { margin-bottom: 12px; }
/* Interstitial cards (attorney referral etc.) */
.interstitial-card { display: flex; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border-radius: var(--radius-sm); background: #F3EFE7; border: 1px solid rgba(31,24,19,0.08); border-left: 3px solid rgba(30,42,53,0.15); }
.interstitial-icon { font-size: 16px; color: var(--text-secondary); flex-shrink: 0; line-height: 1.55; }
.interstitial-body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.interstitial-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
/* Phase 11a: Extraction health check warning */
#extraction-warning:empty { display: none; }
#extraction-warning { margin-bottom: 12px; }
.extraction-warning { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.55; background: #F3EFE7; color: var(--text); border: 1px solid rgba(31,24,19,0.08); border-left: 3px solid #D4A017; }
.extraction-warning-icon { flex-shrink: 0; font-size: 16px; line-height: 1.3; }
.extraction-warning-text { flex: 1; }
/* Phase 38 Task 5: no_text_layer is a blocking condition — elevate prominence */
.extraction-warning-no_text_layer { background: rgba(214,88,76,0.08); border-color: rgba(214,88,76,0.18); border-left: 3px solid var(--red); }
.extraction-warning-no_text_layer .extraction-warning-icon { color: var(--coral); }
/* Early warning (on questions screen) sits above the question card; give it breathing room */
.extraction-warning-early { margin-bottom: 18px; }
/* ZA4.25: chrome stripped, lucide chevron SVG replaces ▲ glyph */
.zone-a-toggle { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zone-a-toggle:hover .za-toggle-chevron { color: var(--coral); }
.za-toggle-chevron { width: 29px; height: 29px; color: var(--text); display: block; transition: transform 240ms ease, color 180ms ease; }
.zone-a.collapsed .zone-a-body { display: none; }
.zone-a.collapsed .za-toggle-chevron { transform: rotate(180deg); }
.zone-a.collapsed h2 { margin-bottom: 0; }

/* Card grid — single column stack (cards expand independently on click) */
.za-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
.za-card { padding: 20px; border-radius: 16px; cursor: pointer; transition: box-shadow 0.2s, transform 0.1s; position: relative; overflow: hidden; min-height: 120px; }
.za-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); transform: translateY(-1px); }
.za-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.za-card-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.za-card-arrow { font-size: 16px; color: var(--coral); opacity: 0.6; transition: transform 0.2s, opacity 0.2s; }
.za-card:hover .za-card-arrow { opacity: 1; }
.za-card.open .za-card-arrow { transform: rotate(90deg); }
.za-card-note-count { font-size: 10px; font-weight: 700; background: rgba(0,0,0,0.08); color: var(--text); padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.za-card-placeholder { font-size: 13px; font-weight: 300; color: var(--text); margin: 0; }

/* Card tints */
.za-card-verdict { background: rgba(242,100,25,0.06); }
.za-card-notes { background: rgba(93,111,156,0.07); }
.za-card-tracking { background: rgba(74,140,92,0.06); }
.za-card-actions { background: rgba(31,24,19,0.04); cursor: default; }
.za-card-actions:hover { box-shadow: none; transform: none; }

/* Verdict inside card */
.summary-row { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 0; border: none; }
.verdict-number { font-size: 56px; font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; min-width: 40px; }
.verdict-body { padding-top: 2px; }
.verdict-label { font-size: 10px; font-weight: 600; color: var(--text); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2px; }
.verdict-type { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 6px; }
.verdict-strength { display: flex; align-items: center; gap: 8px; }
.verdict-strength-text { font-size: 12px; font-weight: 600; }
.verdict-bar { width: 80px; height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; }
.verdict-bar-fill { height: 100%; border-radius: 2px; }
.category-bar { display: none; }
.scope-line { display: none; }
.cat-segment { border-radius: 4px; }
.preview-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding: 0; background: none; border: none; border-radius: 0; font-size: 13px; font-weight: 300; color: var(--text-secondary); }
.meta-dot { color: var(--text-secondary); opacity: 0.4; }
.meta-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.meta-tag-green { background: rgba(74,140,92,0.12); color: #3a7a4e; }
.meta-tag-gold { background: rgba(30,42,53,0.04); color: var(--coral); }
.meta-tag-gray { background: rgba(31,24,19,0.06); color: var(--text-secondary); }
.meta-tag.badge-targeted { background: rgba(93,111,156,0.10); color: #4a6fa5; }
.meta-tag.badge-broad { background: rgba(242,100,25,0.10); color: var(--coral); }
.meta-tag.badge-demo { background: rgba(31,24,19,0.06); color: var(--text-secondary); }
/* Phase 7e: Detection Strength badge in preview-facts */
.ds-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.ds-strong { background: rgba(74,140,92,0.12); color: #3a7a4e; }
.ds-good { background: rgba(30,42,53,0.04); color: var(--coral); }
.ds-moderate { background: rgba(31,24,19,0.06); color: var(--text-secondary); cursor: help; }
.scope-line { margin-top: 4px; font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
/* T13: ANALYSIS MODE BADGE */
.analysis-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.badge-demo { background: rgba(31,24,19,0.06); color: var(--text-secondary); }
.badge-broad { background: rgba(242,100,25,0.12); color: var(--coral); }
.badge-targeted { background: rgba(30,42,53,0.04); color: var(--coral); }
/* T13: Confidence average (paid-only detail) */
.conf-avg { color: var(--text-secondary); font-weight: 400; }

/* SECONDARY ACTION LINKS */
.change-answers { display: flex; gap: 8px; flex-wrap: wrap; }
.secondary-action { padding: 8px 12px; border: none; border-radius: 8px; background: rgba(255,255,255,0.6); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.secondary-action:hover { background: rgba(255,255,255,0.9); color: var(--text); }

/* PAYWALL — card-less, plain content on page background.
   ZA4 desktop: left-aligned per InDesign comp. Mobile @480px
   in mobile.css re-centers and widens — that rule stays (comp
   is desktop-only). Typography scales with clamp() anchored at
   1440px (kicker 36, body 24, CTA 24). ZA4.1: margin-top
   removed — .za-confidence-bar-wrap margin-bottom owns the
   vertical gap to the paywall so the two don't stack. */
.paywall-banner {
  display: none; margin: 0; padding: 0;
  background: transparent; border: none; border-radius: 0;
  text-align: left; max-width: none;
}
.paywall-banner.visible { display: block; }
.paywall-headline { font-size: clamp(22px, 2.5vw, 40px); font-weight: 700; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; color: var(--text); margin: 0 0 clamp(8px, 0.83vw, 12px); letter-spacing: -0.02em; line-height: 1.15; }
.paywall-body { font-size: clamp(15px, 1.67vw, 26px); font-weight: 300; line-height: 1.4; color: var(--text); margin: 0 0 clamp(16px, 1.67vw, 24px); max-width: clamp(480px, 56vw, 820px); }
.paywall-btn {
  width: auto; display: inline-block; padding: clamp(14px, 1.4vw, 20px) clamp(32px, 4vw, 56px); border: none; border-radius: 999px;
  background: var(--coral, #f26419); color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(15px, 1.67vw, 26px); font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.paywall-btn:hover { filter: brightness(1.1); }

/* ZONE B */
.zone-b { background: var(--ink-0); border: 1px solid rgba(29,36,48,0.9); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); overflow: visible; }
.zone-b-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 8px; font-size: 19px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.04em; line-height: 1.05; color: rgba(220,230,245,0.85); }
.page-nav { display: flex; gap: 4px; }
.page-dot {
  width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid rgba(160,180,220,0.5); background: transparent; color: var(--bone-0); transition: border-color 0.15s, background 0.15s;
}
.page-dot.has-flags { background: transparent; border-color: rgba(160,180,220,0.5); color: var(--bone-0); }
.page-dot.active { background: #F3EFE7; border-color: rgba(31,24,19,0.09); color: var(--ink-0); }
.doc-viewer { background: linear-gradient(180deg, rgba(245,239,228,0.6), rgba(232,222,203,0.6)); border-radius: var(--radius-sm); position: relative; min-height: 500px; padding: 24px; overflow: visible; }
.fake-doc-line { height: 5px; background: rgba(31,24,19,0.1); border-radius: 3px; margin-bottom: 7px; }
.fake-doc-line:nth-child(3n) { width: 85%; }
.fake-doc-line:nth-child(3n+1) { width: 92%; }
.fake-doc-line:nth-child(3n+2) { width: 78%; }

/* PDF canvas */
#pdf-canvas { display: block; max-width: 100%; border-radius: 2px; background: white; }

/* Phase 38.1 P1: PDF loading indicator shown during tab-swap fetch/parse.
   Absolute so it overlays the cleared canvas without shifting layout.
   Phase 38.1c: inset:0 (covers the full .doc-viewer padding box so the
   canvas is fully hidden on any breakpoint) + fully opaque gradient
   matching the .doc-viewer background so no ghost of the old PDF bleeds
   through during the switch. */
#pdf-loading {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 12px; z-index: 2;
  background: linear-gradient(180deg, #F5EFE4, #E8DECB);
  border-radius: var(--radius-sm);
  color: var(--ink-0); font-size: 14px; font-weight: 500;
}
#pdf-loading .pdf-loading-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(31,24,19,0.18); border-top-color: var(--ink-0);
  animation: pdf-loading-spin 0.8s linear infinite;
}
@keyframes pdf-loading-spin { to { transform: rotate(360deg); } }

/* Overlay layer sits on top of canvas */
.overlay-layer { position: absolute; top: 24px; left: 24px; pointer-events: none; }
.overlay-layer .overlay-box { pointer-events: auto; }

.overlay-box { position: absolute; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.overlay-box:hover { filter: brightness(0.95); }
.overlay-box.red { background: rgba(214,88,76,0.14); border: 1.5px solid rgba(214,88,76,0.7); }
.overlay-box.orange { background: rgba(182,91,47,0.10); border: 1.5px solid rgba(182,91,47,0.6); }
.overlay-box.yellow { background: rgba(180,140,40,0.12); border: 1.5px solid rgba(180,140,40,0.6); }
.overlay-box.green { background: rgba(60,140,80,0.10); border: 1.5px solid rgba(60,140,80,0.55); }
.overlay-box.blue { background: rgba(29,36,48,0.08); border: 1.5px solid rgba(29,36,48,0.4); }
.overlay-box.gray { background: rgba(93,79,66,0.06); border: 1.5px solid rgba(93,79,66,0.35); }

/* Large account-level overlays: lighter fill */
.overlay-box.overlay-large { border-width: 1px; }
.overlay-box.overlay-large.red { background: rgba(214,88,76,0.07); }
.overlay-box.overlay-large.orange { background: rgba(182,91,47,0.04); }
.overlay-box.overlay-large.yellow { background: rgba(180,140,40,0.05); }
.overlay-box.overlay-large.green { background: rgba(60,140,80,0.04); }
.overlay-box.overlay-large.blue { background: rgba(29,36,48,0.04); }

.overlay-tooltip { display: none; }
.overlay-box.overlay-hover { box-shadow: 0 0 0 3px rgba(214,88,76,0.5); z-index: 5; }

/* Compact page nav (prev/next + flagged page buttons) */
.page-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-right: 8px; }
.page-nav-arrow {
  width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; cursor: pointer; border: 1px solid rgba(160,180,220,0.5); background: transparent;
  color: var(--bone-0); transition: border-color 0.15s, background 0.15s; padding: 0; line-height: 1;
}
.page-nav-arrow:hover { background: rgba(255,255,255,0.06); border-color: rgba(160,180,220,0.7); }
.page-nav-info { font-size: 12px; color: rgba(220,230,245,0.85); font-weight: 700; padding: 0 4px; white-space: nowrap; }
.page-nav-sep { font-size: 12px; color: rgba(255,255,255,0.15); padding: 0 2px; }

/* ZONE C — positioned container, inner div scrolls */
.zone-c { background: var(--ink-0); border: 1px solid rgba(29,36,48,0.9); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.zone-c-inner {
  position: absolute; inset: 0; padding: 16px; overflow-y: auto;
}
/* Pill scrollbar (dark-panel variant: keeps light-blue thumb --
   NOT the D/#D0D3D8 cool gray used on light backgrounds, because
   the dark ink-0 panel needs a light-on-dark thumb to be visible) */
.zone-c-inner::-webkit-scrollbar { width: 12px; }
.zone-c-inner::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.zone-c-inner::-webkit-scrollbar-button { display: none; }
.zone-c-inner::-webkit-scrollbar-thumb {
  background: rgba(220,230,245,0.25);
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 99px;
}
.zone-c-inner::-webkit-scrollbar-thumb:hover,
.zone-c-inner::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background-color: rgba(220,230,245,0.4);
}
@supports not selector(::-webkit-scrollbar) {
  .zone-c-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(220,230,245,0.25) transparent;
  }
}
.zone-c-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.zone-c-header h3 { font-size: 19px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.04em; line-height: 1.05; color: rgba(220,230,245,0.85); }
.zone-c-subtle { color: var(--ink-3); font-size: 13px; }
.filter-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-left: 8px; }
.pill { padding: 10px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; border: 1px solid rgba(160,180,220,0.5); background: transparent; color: var(--bone-0); transition: border-color 0.15s, background 0.15s; }
.pill:hover { border-color: rgba(160,180,220,0.7); background: rgba(255,255,255,0.06); }
.pill.active { background: #F3EFE7; color: var(--ink-0); border-color: rgba(31,24,19,0.09); }
.pill.red-pill.active { background: var(--severe); border-color: var(--severe); color: var(--bone-0); }
.pill.orange-pill.active { background: var(--coral); border-color: var(--coral); color: var(--bone-0); }
.pill.blue-pill.active { background: var(--ink-3); border-color: var(--ink-3); color: var(--bone-0); }

/* FLAG CARDS */
.flag-card {
  background: #F3EFE7; border: 1px solid rgba(31,24,19,0.09); border-radius: 18px;
  padding: 16px; margin-bottom: 14px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s;
}
.flag-card:hover { box-shadow: var(--shadow); border-color: rgba(31,24,19,0.18); }
.flag-card-header { display: flex; gap: 8px; align-items: start; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; }
.flag-page-ref { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; }
.flag-page-ref strong { color: var(--text); font-weight: 700; }
.flag-contrast { margin-bottom: 12px; display: grid; gap: 6px; }
.flag-contrast .report-says, .flag-contrast .user-says { font-size: 14px; line-height: 1.55; padding: 14px; margin-bottom: 0; }
/* Phase 43 Task 3: Per-flag cross-bureau comparison row. Blue-gray
   info tone matches the Zone A cross-bureau callout so the summary +
   detail read as one visual thread. Sits between .flag-contrast and
   .flag-summary; silent (no DOM node) when cb_context is null. */
.cb-comparison { margin-bottom: 12px; padding: 12px 14px; background: rgba(78,103,142,0.06); border-left: 3px solid rgba(78,103,142,0.45); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cb-comparison-item + .cb-comparison-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(78,103,142,0.14); }
.cb-comparison-creditor { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 4px; }
.cb-comparison-line { font-size: 14px; line-height: 1.55; color: var(--text); }
.cb-comparison-bureau { font-weight: 700; color: var(--ink-0); }
.flag-summary { font-size: 17px; color: var(--ink-0); font-weight: 600; margin-bottom: 16px; letter-spacing: -0.02em; line-height: 1.2; padding-left: 14px; }
.flag-actions { display: flex; gap: 8px; padding-left: 14px; }
.flag-btn { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--coral); transition: all 0.15s; }
.flag-btn:hover { background: rgba(30,42,53,0.04); }
.flag-card.expanded .flag-btn.paid-only { display: none; }

/* B5.1: not-mine voice coherence preface on BK finding cards */
.not-mine-preface {
  font-size: 13px;
  color: rgba(30,42,53,0.62);
  margin: 0 14px 8px;
  padding: 8px 12px;
  background: rgba(30,42,53,0.04);
  border-radius: 8px;
  line-height: 1.45;
}

/* B3: per-card BK exclusion affordance */
.bk-exclude-row { padding: 6px 14px 2px; }
.bk-exclude-link { font-size: 12px; font-weight: 400; color: rgba(30,42,53,0.55); text-decoration: none; cursor: pointer; }
.bk-exclude-link:hover { color: var(--coral); text-decoration: underline; }
.bk-excluded-card { background: rgba(30,42,53,0.03); border: 1px dashed rgba(31,24,19,0.12); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; cursor: default; }
.bk-excluded-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-excluded-label { font-size: 14px; font-weight: 500; color: rgba(30,42,53,0.45); }
.bk-undo-link { font-size: 13px; font-weight: 600; color: var(--coral); text-decoration: none; cursor: pointer; }
.bk-undo-link:hover { text-decoration: underline; }

/* EXPANDED (PAID) — T12: max-height transition replaces display toggle */
.flag-expand { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding-top 0.3s ease, margin-top 0.3s ease, border-color 0.3s ease; padding-top: 0; margin-top: 0; border-top: 1px solid transparent; }
.flag-card.expanded .flag-expand { max-height: 600px; padding-top: 12px; margin-top: 12px; border-top-color: var(--border); }
.flag-expand h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; margin-top: 12px; padding-left: 14px; }
.flag-expand h4:first-child { margin-top: 0; }
.flag-expand p { font-size: 14px; color: var(--text); margin-bottom: 4px; line-height: 1.6; padding-left: 14px; }
.flag-expand .legal-ref { font-size: 13px; color: var(--coral); font-style: italic; }
.flag-expand .legal-gloss { font-size: 12px; color: var(--text-secondary); padding-left: 14px; margin-top: 2px; }
.next-steps-panel { margin-top: 12px; padding: 14px; background: rgba(30,42,53,0.04); border-left: 3px solid rgba(30,42,53,0.15); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.next-steps-panel h4 { padding-left: 0; margin-top: 0; }
.next-steps-panel .next-steps { padding-left: 0; }
.flag-meta { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; padding-left: 14px; }
.flag-meta-primary { display: flex; align-items: baseline; gap: 6px; }
.flag-meta-primary .meta-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.flag-meta-primary .meta-value { font-size: 24px; font-weight: 700; color: var(--ink-0); letter-spacing: -0.04em; }
.flag-meta-secondary { display: flex; gap: 8px; }
.flag-meta-secondary .badge { font-size: 11px; }

/* LOCKED OVERLAY (FREE) — T12: repositioned as absolute overlay */
.locked-overlay { display: none; border-radius: 6px; padding: 12px; text-align: center; }
.locked-overlay .lock-icon { font-size: 18px; margin-bottom: 4px; }
.locked-overlay p { font-size: 13px; color: var(--text-secondary); }
.locked-overlay .unlock-btn { margin-top: 8px; padding: 8px 16px; border: none; border-radius: 999px; background: var(--ink-0); color: var(--bone-0); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* T12: EXPAND WRAPPER */
.flag-expand-wrap { position: relative; }

/* T12: FREE TIER PEEK — partial expand content visible behind gradient overlay */
.flag-card.free-preview .flag-expand { max-height: 80px; padding-top: 12px; margin-top: 12px; border-top-color: var(--border); }
.flag-card.free-preview .locked-overlay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(243,239,231,0.3) 0%, rgba(243,239,231,0.95) 50%);
  backdrop-filter: blur(2px); margin: 0;
}

/* T12: HIGHLIGHTED CARD (overlay click focus) */
.flag-card.highlighted { border-color: var(--coral); animation: highlight-pulse 0.6s ease; }
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242,100,25,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(242,100,25,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(242,100,25,0); }
}

/* CONFIDENCE BADGE DIFFERENTIATION (four-tier coral-axis ladder, ratified 2026-06-16) */
.flag-confidence.conf-strong { background: var(--coral); color: white; border-color: var(--coral); }
.flag-confidence.conf-likely { background: transparent; color: var(--coral); border: 1.5px solid var(--coral); }
.flag-confidence.conf-possible { background: transparent; color: rgba(242,100,25,0.85); border: 1.5px dashed var(--coral); }
.flag-confidence.conf-weak { background: transparent; color: rgba(30,42,53,0.60); border: 1.5px dashed rgba(30,42,53,0.45); }

/* FLAG CARD HOVER — DOCUMENT CONNECTION */
.flag-card:hover .flag-page-ref { color: var(--coral); }

/* PAGE FILTER — hide non-matching cards when a page dot is clicked */
.flag-card.page-hidden { display: none; }
.creditor-group-header.page-hidden { display: none; }

/* T12: CREDITOR GROUP HEADER */
.creditor-group-header { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 0 6px; margin-top: 8px; border-bottom: 1px solid var(--border); }
.creditor-group-header:first-child { margin-top: 0; }


/* ZONE D (nested inside Zone B) */
.zone-d { margin-top: 16px; padding: 20px; background: #F3EFE7; border-radius: 18px; border: 1px solid rgba(31,24,19,0.09); }
.zone-d h3 { font-size: 15px; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-0); }
.roadmap-step { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.roadmap-step:last-child { margin-bottom: 0; }
.zone-d .step-num { background: var(--ink-0); color: var(--bone-0); width: 28px; height: 28px; font-size: 13px; }
.step-content h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.02em; color: var(--ink-0); }
.step-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.step-content .step-btn { margin-top: 6px; padding: 7px 14px; border: none; border-radius: 999px; background: var(--ink-0); color: var(--bone-0); font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: background 0.15s, color 0.15s; }
.step-content .step-btn:hover { background: var(--red); }
.step-content .step-btn-attorney { padding: 9px 18px; font-size: 13px; }

/* PAYWALL HIDDEN STATE */
.paywall-hidden { display: none !important; }

/* T14: TOAST NOTIFICATION */
.roadmap-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--ink-0); color: var(--bone-0); padding: 10px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; opacity: 0; transition: opacity 0.3s, transform 0.3s;
  z-index: 1000; pointer-events: none;
}
.roadmap-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-retry-btn {
  margin-left: 12px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: var(--bone-0); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.toast-retry-btn:hover { background: rgba(255,255,255,0.1); }

/* T20 unlock-confirmation rules removed in Phase 45 — superseded by the
   locked-design VioVerse confirmation card in css/payment-confirmation.css.
   The old simple green-check overlay HTML at #unlock-confirmation has been
   replaced with the SVG file+checkmark structure that the new CSS expects. */

/* Phase 7a: CROSS-BUREAU CALLOUT */
.cross-bureau-callout { margin-top: 8px; }
.cb-callout-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 0; border-radius: 0;
  background: none; border: none;
  font-size: 12px;
}
.cb-callout-icon { flex-shrink: 0; color: var(--text-secondary); display: flex; align-items: center; }
.cb-callout-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-callout-text { flex: 1; font-size: 13px; line-height: 1.55; color: var(--text); }
.cb-callout-text strong { font-weight: 700; display: block; margin-bottom: 2px; }
.cb-callout-btn {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px;
  background: var(--ink-0); color: var(--bone-0); border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.cb-callout-btn:hover { opacity: 0.85; }

/* Phase 7b: TEMPORAL CALLOUT */
.temporal-callout {
  margin-top: 14px;
}
.temporal-callout-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(182,91,47,0.06);
  border: 1px solid rgba(182,91,47,0.18);
}
.temporal-callout-icon { font-size: 22px; flex-shrink: 0; }
.temporal-callout-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); }
.temporal-callout-text strong { font-weight: 700; display: block; margin-bottom: 2px; }

/* Phase 42 Task 2: CROSS-BUREAU COMPARISON CALLOUT.
   Blue-gray info tone — bureau disagreements are informational, not
   alarming, so visually distinct from the amber temporal callout. */
.cross-bureau-comparison-callout {
  margin-top: 14px;
}
.cb-comp-callout-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(78,103,142,0.06);
  border: 1px solid rgba(78,103,142,0.22);
}
.cb-comp-callout-icon {
  font-size: 22px; flex-shrink: 0;
  color: rgba(78,103,142,0.9);
}
.cb-comp-callout-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); }
.cb-comp-callout-text strong { font-weight: 700; display: block; margin-bottom: 2px; }

/* Phase 7a: BUREAU TABS */
.bureau-tabs {
  display: flex; gap: 2px; padding: 8px 12px 0;
  border-bottom: 1px solid rgba(220,230,245,0.15);
}
.bureau-tab {
  padding: 7px 16px; border-radius: 8px 8px 0 0;
  background: transparent; border: none;
  color: rgba(220,230,245,0.5); font-size: 13px;
  font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; transition: all 0.15s;
}
.bureau-tab:hover { color: rgba(220,230,245,0.75); }
.bureau-tab.active {
  background: rgba(220,230,245,0.1);
  color: rgba(220,230,245,0.9);
  border-bottom: 2px solid var(--coral);
}

/* FOOTER DISCLAIMER */
.disclaimer { grid-column: 1 / -1; text-align: left; font-size: 12px; color: var(--text-secondary); padding: 0; margin-top: clamp(24px, 3vw, 40px); }

/* Phase 38 Task 4: Zone A scorecard — one verdict line per report
   ZA4.24: chrome stripped (no bg, border, radius, shadow, border-left accents),
   row gets a navy file-text icon prepended as first child. */
#scorecard-container { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
#scorecard-container:empty { display: none; }
.scorecard-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.45;
}
.scorecard-label { font-weight: 700; color: var(--text); letter-spacing: -0.01em; flex-shrink: 0; }
.scorecard-sep { color: var(--text-secondary); opacity: 0.5; }
.scorecard-verdict { color: var(--text); }
.scorecard-hit .scorecard-verdict { color: var(--coral); font-weight: 600; }
.scorecard-pending .scorecard-verdict { color: var(--text-secondary); font-style: italic; }

.report-row-icon {
  width: 22px;
  height: 22px;
  color: var(--text);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.report-row-icon svg { width: 100%; height: 100%; display: block; }

/* ========================================================================
   Relay 22.1: recognition core results rendering
   ======================================================================== */

/* D7: evidence chip on scored flag cards */
.r22-chip-confirmed {
  background: var(--coral) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700; letter-spacing: 0.03em;
}
.r22-chip-onreport {
  background: var(--ink-0) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700; letter-spacing: 0.03em;
}

/* D3: candidate section headers */
.r22-section-title {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 700; color: rgba(220,230,245,0.85);
  margin: 24px 0 12px; letter-spacing: -0.01em;
}

/* D3: how-to-check body and actions row */
.r22-howto {
  font-size: 13px; line-height: 1.55; color: rgba(30,42,53,0.62);
  margin: 8px 0 12px; padding: 10px 14px;
  background: rgba(30,42,53,0.03); border-radius: 10px;
}
.r22-actions {
  display: flex; align-items: center; gap: 16px; margin-top: 8px;
}
.r22-answer-now {
  display: inline-flex; align-items: center;
  padding: 10px 22px; border-radius: 999px; border: none;
  background: var(--coral); color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(242,100,25,0.4);
}
.r22-answer-now:hover { filter: brightness(1.06); }
.r22-keep {
  font-size: 13px; font-weight: 600; color: rgba(30,42,53,0.5);
  text-decoration: none;
}
.r22-keep:hover { color: var(--coral); }

/* Ruling 3: breakdown + needs-you lines below the headline */
.za-r22-breakdown {
  font-size: 14px; font-weight: 500; color: rgba(30,42,53,0.6);
  margin: 4px 0 0; text-align: center;
}
.za-r22-needsyou {
  font-size: 15px; font-weight: 600; color: var(--coral);
  margin: 8px 0 0; text-align: center;
}

/* F4: dismissed candidate card */
.r22-dismissed { opacity: 0.7; }
.r22-reopen {
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--coral);
  text-decoration: none;
}
.r22-reopen:hover { text-decoration: underline; }

/* D8: home needs-you count */
.home-sev-needs {
  font-size: 13px; font-weight: 500; color: var(--coral);
  margin-top: 8px;
}

/* ========================================================================
   Relay 22.4: hide the old confidence model until relay 23 rescoring.
   Flag cards keep ONLY the impact chip (High/Medium) and the evidence chip
   (On the report / Confirmed by you). Hidden here:
   - .flag-confidence : the confidence_label chip ("Weak signal" /
     "Possible match" / etc.) in the flag-card header.
   - .flag-meta : the paid expand row (Confidence %, "Possible"/"Actionable"
     action label) -- all old-model.
   - .za-confidence-bar-wrap : the Zone A headline confidence bar, which
     labels by dominant backend tier and prints "Weak" on an all-weak report.
   ======================================================================== */
.flag-confidence { display: none !important; }
.flag-meta { display: none !important; }
.za-confidence-bar-wrap { display: none !important; }