/* Shared analysis-card chassis used by Daily Driver and Deep Research.
 * Deep Think retrofit to this chassis is a future CR (spec §12 Phase 2).
 * Originally extracted from app/templates/deep_research.html lines 127-139
 * during DD P1 #2 (2026-04-17). */

/* iter8: DR's outer container adopts the V2 outlined-container style so the
 * purple box wraps the writer report + Scope Definition Q&A + analysis footer
 * as one coherent block (matching the user's design intent). Old 1px gray
 * border + 16px radius + drop shadow swapped for 1.5px purple + 10px radius +
 * 22-24px V2 padding. The nested #panel-writer rule below suppresses its
 * inner border so we don't double-box. */
.dr-card{background:#fff;border:1.5px solid var(--vl-accent,#6b5df0);border-radius:10px;padding:22px 24px 24px;margin-top:14px;margin-bottom:20px}
.dr-card .report-panel.active{border:none;border-radius:0;padding:0;margin-top:0;background:transparent}
.dr-card-header{padding:20px 24px;border-bottom:1px solid var(--border-light);background:linear-gradient(135deg,#fafbfc,#f7f7f9)}
.dr-card-header h1{font-size:22px;font-weight:700;color:var(--text-primary,#1f2933);margin:0}
/* iter8: drop border-bottom on .scorecard-row — V2 design has no divider
 * between badges and the tab panel; the 14px margin-top on .report-panel.active
 * provides the visual separation. The duplicate empty `<div class="scorecard-row"
 * id="scorecard">` inside dr_report_container.html was also drawing this rule
 * as a phantom line; removing it cleans up DR specifically. */
.scorecard-row{display:flex;gap:var(--vl-space-5);padding:var(--vl-space-7) var(--vl-space-11);flex-wrap:wrap}
/* Iter 3: V2 brand-card colors. Expert tiles share one warm cream surface
   (#f6f0e4 / #dcd7c9). VeriLM tile uses the V2 greenish + brand-purple
   treatment with an inner 1px white inset (the design's primary-tile cue).
   Per strategy doc §6A: brand backgrounds are intentionally NOT tokenized
   (per-brand subtle cream variants land with the wire-truth display helper). */
.scorecard-item{flex:1;min-width:140px;padding:var(--vl-space-5) var(--vl-space-7);border-radius:var(--vl-radius-section);border:2px solid #dcd7c9;background:#f6f0e4;text-align:center;cursor:pointer;transition:all 150ms ease;opacity:0.55;display:flex;flex-direction:column;align-items:center}
.scorecard-item:hover{opacity:0.8}
.scorecard-item.active{opacity:1;border-color:var(--text-primary,#1f2933);box-shadow:0 3px 12px rgba(0,0,0,0.12);transform:translateY(-1px)}
.scorecard-item.verilm{background:#e9f2eb;border-color:var(--accent-primary,#6b5df0);box-shadow:inset 0 0 0 1px #fff}
.scorecard-item.verilm.active{opacity:1;border-color:var(--accent-primary,#6b5df0);background:#e9f2eb;box-shadow:inset 0 0 0 1px #fff,0 3px 12px rgba(107,93,240,0.2);transform:translateY(-1px)}
.report-panel{display:none}
/* iter8: V2 outlined-container style for active model-output panels —
 * matches the Follow-up block treatment so the two sibling boxes read as a
 * coherent pair. 1.5px purple border + 10px radius + white bg + V2 padding,
 * with the same 14px top margin V2 design specifies between badge row and
 * tab panel. Same all modes (DD/DT/DR/SM). */
.report-panel.active{display:block;border:1.5px solid var(--vl-accent,#6b5df0);border-radius:10px;background:#fff;padding:22px 24px 24px;margin-top:14px}
/* iter8: V2 design typography — brand reads as the prominent identifier
 * (13px Inter weight 700 dark, normal-case e.g. "ChatGPT" not "CHATGPT");
 * variant subtitle reads as a small uppercase letter-spaced category label.
 * Inherits body Inter via the iter-2 base; removing the explicit font-mono
 * declaration drops mono on these labels per V2 spec. */
.scorecard-provider{display:block;font-size:20px;font-weight:700;letter-spacing:0.2px;color:#2a2a2a;line-height:1.1;margin-bottom:4px}
/* iter8: VeriLM logo — sized to balance with brand-text height on expert tiles
 * (~28px for logomark vs 11px+11px text stack); mix-blend-mode:multiply makes
 * the white PNG bg disappear into whatever tile color is behind it (green for
 * VeriLM, cream for experts), so we keep the existing logo asset without
 * needing a transparent variant. */
.scorecard-logo{display:block;height:28px;width:auto;margin:0 auto 6px;mix-blend-mode:multiply}
/* iter8: vertical alignment — push accuracy badge to the bottom of every tile
 * so percentages sit on a common baseline across the row regardless of how
 * many lines of brand+variant text appear above. */
.scorecard-accuracy{display:block;font-size:35px;font-weight:700;margin-top:auto}
/* iter8: V2 .vl-card__subtext — small muted "X of Y verified" line beneath
 * the accuracy %. Bold on the numerals via inline <b>. DR-only (gated in
 * templates by scorecard_entry / writer_entry presence). */
.scorecard-subtext{display:block;font-size:17px;color:#8f887f;margin-top:4px;line-height:1.3}
.scorecard-subtext b{color:#5a5349;font-weight:600}
.scorecard-detail{display:block;font-size:11px;color:var(--text-muted,#6b7280);font-family:var(--font-mono);margin-top:2px}
/* CR8: per-mode badge under model label (DT-only in this CR; DD/SM in their CRs) */
.scorecard-mode-badge{display:inline-block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-secondary,#94a3b8);font-family:var(--font-mono);padding:1px 4px;border:1px solid var(--border-color,#334155);border-radius:3px;background:transparent}
.scorecard-item.verilm .scorecard-mode-badge{color:var(--accent-primary,#6b5df0);border-color:var(--accent-primary,#6b5df0)}

/* CR-β: scorecard tile pulse + populated/failed states.
 * Pulse fires once when an expert completes (Step 5 toggles `.pulse` on the tile
 * for ~700ms). `populated` is the persistent "content has arrived" state;
 * `failed` shadows it for failed experts with a muted color + warning border. */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,93,240,0.5)}70%{box-shadow:0 0 0 8px rgba(107,93,240,0)}100%{box-shadow:0 0 0 0 rgba(107,93,240,0)}}
.scorecard-item.pulse{animation:pulse 0.6s ease-out}
.scorecard-item.populated{opacity:1}
.scorecard-item.failed{opacity:0.85;border-color:var(--color-warning,#d97706)}

/* CR wire-truth-display-fields (P3 step 17): SM tile shape parity. SM
 * renders one card in the row; the default flex:1 above stretches it full
 * width. Override for data-mode="single_model" rows so the lone tile keeps
 * the same narrow rectangular shape DD/DT expert tiles use (their natural
 * flex:1-of-4 share is ~200px in the typical 960px container). flex:0 1 auto
 * with max-width matches that visually without forcing a hard min-width.
 * Selector tightened to `.scorecard-row[data-mode] > .scorecard-item` so it
 * only fires inside the row chassis (not for any reused .scorecard-item
 * elsewhere). */
.scorecard-row[data-mode="single_model"] > .scorecard-item{flex:0 1 auto;max-width:200px;min-width:140px}

/* CR wire-truth-display-fields (P3 step 15/16): Line 2 styling for the
 * .scorecard-variant element introduced by expert_card.html and card_row.html.
 * Mirrors the .scorecard-provider type scale so the two lines read as a
 * coherent stack. Slightly heavier weight for hierarchy (brand reads as the
 * primary identifier; variant + thinking is the qualifier). */
.scorecard-variant{display:block;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:#6a6460;line-height:1.1;margin-top:2px}

/* ============================================================
   Dark theme overrides — vera-dark-mode-app-surface (V3.2.x)
   ============================================================
   This stylesheet was not part of the original bucket-migration recon
   (Buckets 1-7 covered app.css and _tokens.css only). User-reported
   issue during Step 14 visual sweep: .report-panel.active rendered
   #fff on dark page bg, producing a bright white box around Executive
   Summary. Scorecard tiles (.scorecard-item) have the same problem
   class — cream background literal #f6f0e4 reads bright on dark bg.
   This block adds dark-mode overrides for every color-bearing rule
   in this file. WHY-comments are condensed because each line is its
   own light/dark pair.
   ============================================================ */
[data-theme="dark"] .dr-card{background:var(--vl-paper);border-color:var(--vl-accent)}
[data-theme="dark"] .dr-card-header{background:linear-gradient(135deg,#2a2620,#22201c);border-bottom-color:var(--border-light)}
[data-theme="dark"] .scorecard-item{background:#2d2a23;border-color:#4a4338;color:var(--text-primary)}
[data-theme="dark"] .scorecard-item.verilm{background:#243028;border-color:var(--accent-primary)}
[data-theme="dark"] .scorecard-item.verilm.active{background:#243028;border-color:var(--accent-primary)}
[data-theme="dark"] .scorecard-provider{color:var(--text-primary)}
[data-theme="dark"] .scorecard-subtext{color:var(--text-muted)}
[data-theme="dark"] .scorecard-subtext b{color:var(--text-secondary)}
[data-theme="dark"] .scorecard-variant{color:var(--text-muted)}
[data-theme="dark"] .report-panel.active{background:var(--vl-paper);border-color:var(--vl-accent)}
[data-theme="dark"] .scorecard-item.active{border-color:var(--text-primary);box-shadow:0 3px 12px rgba(0,0,0,0.5)}
/* Drop mix-blend-mode:multiply on the dark logo variant — multiply would
   darken the cream RGB against the tile bg and muddy the recolored glyph.
   The light variant retains multiply so its white background continues to
   disappear into the tile color in light mode. */
[data-theme="dark"] .scorecard-logo.logo-dark{mix-blend-mode:normal}

/* ============================================================
   CR connected-scorecard-tabs — Checkpoint 1 (Steps 1 & 2)
   ============================================================
   Desktop-only restyle of the multi-tile scorecard so the tabs read
   as rounded-top tabs and the ACTIVE tab flares into the report panel
   as one shape (prototype option "A — active-tab-only flare"; the
   concave CSS-mask feet apply to the active tab only — no baseline
   strip). The whole block is gated behind @media (min-width:769px) to
   align with the app's existing 768px mobile boundary (app.css:3323).
   Below 769px the base rules above are untouched — today's
   flex-wrap:wrap stack stands, so mobile is visually identical.

   Every rule is scoped to
     .scorecard-row[data-mode]:not([data-mode="single_model"])
   The [data-mode] requirement is LOAD-BEARING: the empty phantom DR
   row `<div class="scorecard-row" id="scorecard">` in
   dr_report_container.html has NO data-mode attribute, so it is
   excluded and never picks up any of this styling. single_model is
   handled in Step 3 (out of this checkpoint).

   --sc-tile / --sc-tile-hover / --sc-verilm-accent are component-local
   (declared inside this block, NOT in _tokens.css) — the inactive
   tile greys are the only new color values this design introduces.
   (CHANGE 1: dropped the former --sc-strip baseline-bar fill.)
   ============================================================ */
@media (min-width: 769px) {
  /* CHANGE 1+2 (canvas-grey card): the analysis card body becomes the
     subtle canvas grey so grey is the surface and white is reserved for
     the active tab + panel content. .turn-body is the common ancestor of
     the stepper, the PROMPT block, the scorecard tab row and the panel
     (project.html:553 active / :121 history). It is mode-agnostic
     (DD/DT/DR/SM, current + history) — intended: grey card everywhere.
     CHANGE 2 (outline): no new border needed — .turn-block already has
     `border:1px solid var(--border-color); border-radius:8px;
     overflow:hidden` (app.css:3878-3883); that existing edge now defines
     the grey card against the page. We do NOT add a second border. */
  .turn-body {
    background: #f1f0f6;
  }

  /* Blend the PROMPT block + progress stepper INTO the grey card so
     white is reserved for the active tab + panel only. transparent
     (not a hardcoded grey) auto-matches the card in BOTH themes — and
     fixes the earlier dark flag where these were #22201c boxes slightly
     darker than the #2a2620 card. Only the box background goes:
     - .turn-prompt keeps its left accent stripe (border-left) + the
       PROMPT pill (.prompt-pill has its own bg) — both are separate
       declarations, untouched. It has no full border / box-shadow.
     - .progress-stepper keeps the green check circles, step labels and
       progress bars (all child elements) — only its own card bg goes;
       it also has no border / box-shadow, just background + radius. */
  .turn-prompt {
    background: transparent;
  }
  .progress-stepper {
    background: transparent;
  }

  /* ---- Step 1: light (DD / DT / DR multi-tile) ---- */
  /* CHANGE 3: row no longer paints its own strip (the card grey shows
     through behind the tabs — avoids a double-grey box). --sc-strip is
     kept DEFINED for the inactive-tile contrast math, but the row paints
     transparent. Bottom-aligned no-wrap bar geometry retained. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) {
    --sc-strip: #f1f0f6;        /* card/canvas grey — kept for tile contrast math */
    --sc-tile: #e4e2ec;         /* inactive tile — a shade off the card grey so feet read */
    --sc-tile-hover: #dad8e4;
    --sc-verilm-accent: #3a9d6b;/* VeriLM active top-border green */
    background: transparent;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: var(--vl-space-5);
    padding: var(--vl-space-7) var(--vl-space-11) 0;
    position: relative;
    z-index: 2;
  }

  /* Inactive tile: rounded-top tab with a subtle fill + bold dark
     text; flares into the strip via the shared feet rule below.
     Neutralize the legacy opacity/transform/box-shadow/border. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item {
    opacity: 1;
    background: var(--sc-tile);
    border: none;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    transform: none;
    position: relative;
    padding-bottom: var(--vl-space-5);
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item:hover {
    opacity: 1;
    background: var(--sc-tile-hover);
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-provider {
    color: #2a2a2a;
    font-weight: 700;
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-variant {
    color: #5a564f;
  }

  /* CHANGE B: filled ("closed") disclosure triangle, top-right of every
     tile. Classic CSS border-triangle (width:0;height:0 + transparent
     top/bottom borders + solid left border) — a solid right-pointing
     triangle, crisp at any size, no font dependency. Hosted on
     .scorecard-variant — present on EVERY tile (VeriLM line-2
     "DAILY DRIVER" + experts "GPT-5.5 · MEDIUM"), whereas
     .scorecard-provider is ABSENT on the VeriLM tile (it renders
     <img class="scorecard-logo"> instead). Positioned absolute against
     the tile (position:relative) so it pins to the top-right corner;
     kebab is bottom-right → collision-free.
     INACTIVE → points right (base). ACTIVE → the higher-specificity
     .active-compound rule rotates it 90deg to point down; 150ms
     transition so it visibly flips. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-variant::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--text-muted, #6b7280);
    transform: rotate(0deg);     /* right-pointing solid triangle */
    transform-origin: center;
    transition: transform 150ms ease;
    pointer-events: none;
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active .scorecard-variant::before {
    transform: rotate(90deg);    /* down-pointing solid triangle */
  }

  /* Flared feet — EVERY TAB (CHANGE A, option B restored). Tab-coloured
     ears carved into a concave foot by a radial-gradient mask. With
     background:inherit each foot takes its own tile's current fill —
     inactive tiles flare into the strip (grey foot on the lighter
     strip), the active tile's feet inherit the paper fill and merge
     into the joined panel below. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item::before,
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: inherit;
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item::before {
    left: -14px;
    -webkit-mask: radial-gradient(14px at 0 0, #0000 98%, #000 100%);
            mask: radial-gradient(14px at 0 0, #0000 98%, #000 100%);
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item::after {
    right: -14px;
    -webkit-mask: radial-gradient(14px at 100% 0, #0000 98%, #000 100%);
            mask: radial-gradient(14px at 100% 0, #0000 98%, #000 100%);
  }

  /* Active tile: WHITE/paper — punches through the grey strip into the
     white panel so it clearly reads as the selected tab; its feet
     inherit the paper fill and merge into the panel below. The colored
     top-border accent (purple default, green for VeriLM) + the down-
     chevron are the "selected" cues. Legacy lift/border/shadow
     neutralized. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active {
    background: var(--vl-paper);
    border: none;
    border-top: 3px solid var(--vl-accent);
    box-shadow: none;
    transform: none;
    margin-bottom: 0;
    z-index: 3;
    padding-bottom: var(--vl-space-5);
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.verilm.active {
    background: var(--vl-paper);
    border: none;
    border-top: 3px solid var(--sc-verilm-accent);
    box-shadow: none;
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active .scorecard-provider {
    color: var(--text-primary, #1f2933);
  }
  .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active .scorecard-variant {
    color: #6a6460;
  }

  /* Report panel joins the active tab. WHITE/paper surface (the white
     analysis card is preserved); the active white tab punches through
     the grey strip into this white panel. border:none — the inherited
     1.5px var(--vl-accent) purple border ("odd blue line") stays
     REMOVED; edge definition comes from the outer card container.
     Joined geometry kept (margin-top:0, bottom radius). Scoped via the
     sibling .report-panel-container so only styled multi-tile rows
     join — the phantom DR row (no data-mode) is excluded. */
  .scorecard-row[data-mode]:not([data-mode="single_model"]) + .report-panel-container .report-panel.active {
    background: var(--vl-paper);
    border: none;
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 1;
  }

  /* ---- Step 2: dark mode (basic; fine-tuning is Step 6) ---- */
  /* CHANGE 1 (dark): canvas-grey card body. */
  [data-theme="dark"] .turn-body {
    background: #2a2620;
  }
  /* CHANGE 3 (dark): row transparent; --sc-strip kept for tile math. */
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) {
    --sc-strip: #2a2620;        /* card/canvas grey — kept for tile contrast math */
    --sc-tile: #35312a;         /* inactive tile — a shade off the card grey so feet read */
    --sc-tile-hover: #403a30;
    --sc-verilm-accent: #4fb585;
    background: transparent;
  }
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-provider {
    color: var(--text-primary);
  }
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-variant {
    color: var(--text-muted);
  }
  /* Chevron border colour already uses var(--text-muted) → resolves
     per-theme automatically; no dark override needed. */
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active {
    background: var(--vl-paper);
    border-top: 3px solid var(--vl-accent);
  }
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.verilm.active {
    background: var(--vl-paper);
    border-top: 3px solid var(--sc-verilm-accent);
  }
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) .scorecard-item.active .scorecard-provider {
    color: var(--text-primary);
  }
  /* Dark panel: paper/dark surface + no border. Active white-equivalent
     (var(--vl-paper)) tab punches through the dark strip into this
     panel; the purple border stays REMOVED. */
  [data-theme="dark"] .scorecard-row[data-mode]:not([data-mode="single_model"]) + .report-panel-container .report-panel.active {
    background: var(--vl-paper);
    border: none;
  }

  /* ---- DR seam fix: join the writer narrative box to the active tab ----
     Deep Research is the one mode whose answer does NOT live in the row's
     sibling .report-panel-container — its writer renders in .dr-card, in a
     DIFFERENT parent (project.html includes dr_report_container.html after
     card_row; .dr-card#main-card sits in a separate max-width wrapper). So
     the `+ .report-panel-container` join rule above physically cannot reach
     it, and .dr-card's own margin-top:14px + 1.5px purple border + full
     10px rounding (line 12, base) leave it floating below the tabs with a
     visible gap. Full-join it like DD/DT: white paper surface, no border,
     no top gap, square top corners — so the active VeriLM tab's white feet
     merge into the narrative box as one shape. The outer .turn-block edge
     frames the surrounding grey card, same as DD/DT. Desktop-only (this
     media block); mobile keeps the framed .dr-card from line 12. */
  .turn-body .dr-card {
    margin-top: 0;
    border: none;
    border-radius: 0 0 10px 10px;
    background: var(--vl-paper);
  }
  [data-theme="dark"] .turn-body .dr-card {
    margin-top: 0;
    border: none;
    background: var(--vl-paper);
  }
  /* The inert empty `<div class="scorecard-row" id="scorecard">` inside
     .dr-card (dr_report_container.html — dead scaffold, never populated;
     see §E) still draws base .scorecard-row vertical padding, adding dead
     space at the top of the narrative box. Hide it so the box top sits
     flush under the tabs. (Markup removal is deferred to the DR-converge
     CR; hiding is the CSS-only equivalent for this visual change.) */
  .turn-body .dr-card > #scorecard {
    display: none;
  }

  /* Nit: VeriLM is the leftmost tab and the joined .dr-card left-aligns
     with it, so the active VeriLM tab's LEFT foot (::before, -14px) has no
     panel to flare into on that side — it overhangs the box's left edge
     (~10px) as a white ear over the grey card. Suppress just that foot in
     DR. DD/DT keep it: their panel (.report-panel-container) extends LEFT
     of the active tab, so the left foot flares correctly there. The right
     foot (::after) stays — it merges into the box that extends rightward. */
  .scorecard-row[data-mode="deep_research"] .scorecard-item.verilm.active::before {
    display: none;
  }

  /* ---- Step 3: Single Model lone tile ----
     SM was deferred out of Checkpoint 1. Its structure is identical to
     DD/DT — `.scorecard-row[data-mode="single_model"]` followed by the
     sibling `.report-panel-container` — and its single tile is always
     `.active`. So give it the same connected active-tab treatment: a
     transparent row, a white/paper tab with the accent top-border + feet,
     joined to its panel below. There are no inactive tiles (one model), so
     no grey-tab styling is needed, and no disclosure chevron is added (a
     lone tab has nothing to switch to). The base line-83 rule keeps the
     tile ~200px wide; the panel extends LEFT of it, so the left foot flares
     into the panel cleanly (no DR-style overhang). */
  .scorecard-row[data-mode="single_model"] {
    background: transparent;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: var(--vl-space-5);
    padding: var(--vl-space-7) var(--vl-space-11) 0;
    position: relative;
    z-index: 2;
  }
  .scorecard-row[data-mode="single_model"] .scorecard-item {
    opacity: 1;
    background: var(--vl-paper);
    border: none;
    border-top: 3px solid var(--vl-accent);
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    transform: none;
    position: relative;
    padding-bottom: var(--vl-space-5);
  }
  .scorecard-row[data-mode="single_model"] .scorecard-item::before,
  .scorecard-row[data-mode="single_model"] .scorecard-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: inherit;
  }
  .scorecard-row[data-mode="single_model"] .scorecard-item::before {
    left: -14px;
    -webkit-mask: radial-gradient(14px at 0 0, #0000 98%, #000 100%);
            mask: radial-gradient(14px at 0 0, #0000 98%, #000 100%);
  }
  .scorecard-row[data-mode="single_model"] .scorecard-item::after {
    right: -14px;
    -webkit-mask: radial-gradient(14px at 100% 0, #0000 98%, #000 100%);
            mask: radial-gradient(14px at 100% 0, #0000 98%, #000 100%);
  }
  .scorecard-row[data-mode="single_model"] .scorecard-provider {
    color: var(--text-primary, #1f2933);
    font-weight: 700;
  }
  .scorecard-row[data-mode="single_model"] .scorecard-variant {
    color: #6a6460;
  }
  .scorecard-row[data-mode="single_model"] + .report-panel-container .report-panel.active {
    background: var(--vl-paper);
    border: none;
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 1;
  }

  /* ---- Step 3 dark mode ---- */
  [data-theme="dark"] .scorecard-row[data-mode="single_model"] .scorecard-item {
    background: var(--vl-paper);
    border-top: 3px solid var(--vl-accent);
  }
  [data-theme="dark"] .scorecard-row[data-mode="single_model"] .scorecard-provider {
    color: var(--text-primary);
  }
  [data-theme="dark"] .scorecard-row[data-mode="single_model"] .scorecard-variant {
    color: var(--text-muted);
  }
  [data-theme="dark"] .scorecard-row[data-mode="single_model"] + .report-panel-container .report-panel.active {
    background: var(--vl-paper);
    border: none;
  }

  /* Follow-up block: drop the 1.5px purple outline (app.css:4067) on desktop
     so it matches the now-borderless connected answer panel. Its background
     is var(--bg-card), which equals var(--vl-paper) in both themes (#fff /
     #22201c), so the block reads as the same white/dark content surface as
     the panel — no background change needed. Scoped `.turn-body
     .followup-block` (specificity 0,2,0 > app.css's 0,1,0) so it wins by
     SPECIFICITY, not load order — robust if stylesheet order ever changes.
     Mobile (<769px) keeps the framed block, consistent with mobile panels
     that also keep their border. */
  .turn-body .followup-block {
    border: none;
  }
}