/* ============================================================
   result-insights.css — SHARED "Your weakest areas" + "How you missed them"
   Used identically by the diagnostic, drill (session), and mock result
   screens via window.ResultInsights (result-insights.js), so the weakness
   chart and the mistake-type chart look the same everywhere. Ported from the
   diagnostic's approved result screen. Do NOT fork these styles per page.
   (The diagnostic also defines these inline for historical reasons — the
   rules are identical, so loading this file alongside is harmless.)
   ============================================================ */

/* Weakness / mistake bar chart (".weak-diagram") */
.weak-diagram { border: 1px solid #e5e8ec; border-radius: 12px; padding: 18px 18px 8px; margin: 20px 0; background: #fff; }
.weak-diagram-title { font-size: 16px; font-weight: 700; margin: 0; }
.weak-diagram-sub { font-size: 13px; color: #777; margin: 2px 0 14px; }
.weak-row { display: grid; grid-template-columns: 1fr 2.2fr auto; align-items: center; gap: 12px; padding: 7px 0; }
.weak-name { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.weak-track { height: 12px; background: #eef0f3; border-radius: 8px; overflow: hidden; }
.weak-fill { height: 100%; border-radius: 8px; transition: width 0.6s ease; }
.weak-fill.sev-low { background: #ef4444; }
.weak-fill.sev-mid { background: #f59e0b; }
.weak-val { font-size: 13px; font-weight: 700; color: #555; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.weak-strong { background: #f0fdf4; border-color: #bbf7d0; }

/* Score → goal progress bar (matches the dashboard score card) */
.dg-goal-wrap { max-width: 420px; margin: 6px auto 0; }
.dg-goal-track { height: 8px; background: #e5e8ec; border-radius: 6px; overflow: hidden; }
.dg-goal-fill { height: 100%; background: #1a1a1a; border-radius: 6px; }
.dg-goal-cap { font-size: 13px; color: #475569; margin-top: 7px; }
.dg-goal-cap b { color: #1a1a1a; }