/* 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}