/* ============================================================
   EXAM V2: the exam-prep study hub redesign (owner approved the
   mock-up, 8 Nov 2026). Drawn by hubV2() in webapp/exam.js only when
   <html> has the app-v2 preview class; every rule is scoped under
   html.app-v2 so nothing changes without it. Uses the role tokens from
   styles.css. Strength colours always travel with a text label, and
   gold (proof) is not used here.
   ============================================================ */

/* ---- frame ---- */
html.app-v2 .exv { color: var(--ink-navy); }
html.app-v2 .exv :focus-visible { outline: 3px solid var(--action-green); outline-offset: 3px; }

/* ---- hero ---- */
html.app-v2 .exv-hero { background: var(--naija-deep-green); color: #F2F7F2; border-radius: 28px; padding: 28px 32px 32px; display: flex; flex-wrap: wrap; gap: 24px 28px; justify-content: space-between; align-items: flex-end; position: relative; overflow: hidden; }
html.app-v2 .exv-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px); }
html.app-v2 .exv-hero > * { position: relative; z-index: 1; }
html.app-v2 .exv-hero-copy { flex: 1 1 480px; min-width: 0; }
html.app-v2 .exv-crumbs { font-size: 14px; color: #C9DED1; margin: 0 0 14px; }
html.app-v2 .exv-crumb { background: none; border: 0; padding: 0; font: inherit; color: var(--mint-50); cursor: pointer; text-decoration: none; min-height: 32px; }
html.app-v2 .exv-crumb:hover { text-decoration: underline; }
html.app-v2 .exv-hero h1 { font: 800 clamp(28px, 4vw, 40px)/1.08 Poppins, sans-serif; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; overflow-wrap: anywhere; }
html.app-v2 .exv-when { margin: 0; font-size: 16px; color: #C9DED1; }
html.app-v2 .exv-ready { flex: 0 1 420px; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 18px 20px; }
html.app-v2 .exv-ready-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; margin: 0 0 10px; }
html.app-v2 .exv-ready-top b { font-size: 20px; color: #fff; margin-left: 4px; }
html.app-v2 .exv-ready-line { color: #C9DED1; white-space: nowrap; }
html.app-v2 .exv-bar { position: relative; height: 12px; background: rgba(255,255,255,.14); border-radius: 9px; }
html.app-v2 .exv-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--soft-mint); border-radius: 9px; }
html.app-v2 .exv-bar-line { position: absolute; top: -5px; width: 3px; height: 22px; margin-left: -1px; background: #fff; border-radius: 2px; }
html.app-v2 .exv-ready p { margin: 10px 0 0; font-size: 13px; color: #C9DED1; line-height: 1.5; }

/* ---- tabs ---- */
html.app-v2 .exv-tabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 1px solid var(--slate-200); overflow-x: auto; scrollbar-width: none; }
html.app-v2 .exv-tabs::-webkit-scrollbar { display: none; }
html.app-v2 .exv-tab { flex: none; min-height: 52px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font: 500 15px Inter, sans-serif; color: var(--slate-700); white-space: nowrap; }
html.app-v2 .exv-tab:hover { color: var(--naija-deep-green); }
html.app-v2 .exv-tab.on { border-bottom-color: var(--action-green); color: var(--naija-deep-green); font-weight: 700; }

/* ---- layout ---- */
html.app-v2 .exv-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-top: 24px; }
html.app-v2 .exv-col { flex: 999 1 600px; min-width: 0; }
html.app-v2 .exv-aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
html.app-v2 .exv-solo { padding-top: 24px; max-width: 820px; }
html.app-v2 .exv .card { border-radius: 18px; border: 1px solid var(--slate-200); box-shadow: none; }
html.app-v2 .exv-lede { margin: 0 0 14px; color: #475569; font-size: 15px; }
html.app-v2 .exv .ex-disclaimer { font-size: 13px; color: #475569; }

/* ---- Study: one card per chapter ---- */
html.app-v2 .exv-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; margin: 0 0 14px; }
html.app-v2 .exv-ch-n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--slate-100); display: flex; align-items: center; justify-content: center; font: 700 15px Poppins, sans-serif; color: var(--naija-deep-green); }
html.app-v2 .exv-ch-main { flex: 1 1 200px; min-width: 0; }
html.app-v2 .exv-ch-main h3 { font: 600 17px/1.35 Poppins, sans-serif; margin: 0; color: var(--ink-navy); }
html.app-v2 .exv-ch-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
html.app-v2 .exv-ch-link:hover { color: var(--action-green); text-decoration: underline; }
html.app-v2 .exv-ch-meta { font-size: 13px; color: #475569; margin: 3px 0 0; }
html.app-v2 .exv-ch-lessons { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
html.app-v2 .exv-ch-note { font-size: 13px; color: #475569; }
html.app-v2 .exv-meter { flex: 0 0 150px; }
html.app-v2 .exv-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0 0 5px; }
html.app-v2 .exv-segs span { height: 8px; border-radius: 4px; background: var(--slate-200); }
html.app-v2 .exv-strong .exv-segs .lit { background: var(--action-green); }
html.app-v2 .exv-mid .exv-segs .lit { background: var(--soft-mint); }
html.app-v2 .exv-weak .exv-segs .lit { background: #EA580C; }
html.app-v2 .exv-meter-label { font-size: 13px; font-weight: 600; color: var(--slate-700); }
html.app-v2 .exv-practise { min-height: 44px; padding: 0 16px; border: 1px solid var(--action-green); background: #fff; color: var(--action-green); }
html.app-v2 .exv-practise:hover { background: var(--mint-50); }

/* ---- aside: today's plan + the key ---- */
html.app-v2 .exv-side { padding: 20px; margin: 0; }
html.app-v2 .exv-side h2 { font: 700 18px Poppins, sans-serif; margin: 0 0 12px; }
html.app-v2 .exv-plan { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
html.app-v2 .exv-plan li { display: flex; gap: 10px; align-items: flex-start; }
html.app-v2 .exv-step { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 8px; background: var(--naija-deep-green); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 12px Poppins, sans-serif; }
html.app-v2 .exv-plan-go { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--ink-navy); min-height: 44px; }
html.app-v2 button.exv-plan-go { cursor: pointer; }
html.app-v2 button.exv-plan-go:hover b { color: var(--action-green); text-decoration: underline; }
html.app-v2 .exv-plan-go span { color: #475569; }
html.app-v2 .exv-key-h { display: block; font-size: 15px; margin: 0 0 10px; }
html.app-v2 .exv-key { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
html.app-v2 .exv-key li { display: flex; align-items: center; gap: 10px; }
html.app-v2 .exv-swatch { flex: none; width: 28px; height: 8px; border-radius: 4px; }
html.app-v2 .exv-swatch.exv-strong { background: var(--action-green); }
html.app-v2 .exv-swatch.exv-mid { background: var(--soft-mint); }
html.app-v2 .exv-swatch.exv-weak { background: #EA580C; }
html.app-v2 .exv-swatch.exv-none { background: var(--slate-200); }
html.app-v2 .exv-key-note { margin: 10px 0 0; font-size: 13px; color: #475569; }

/* ---- the other tabs: the same code, restyled ---- */
html.app-v2 .exv .ex-box { padding: 22px; margin: 0 0 14px; }
html.app-v2 .exv .ex-box h3 { font: 700 18px Poppins, sans-serif; }
html.app-v2 .exv .ex-q { padding: 26px; margin: 0 0 14px; border-radius: 20px; }
html.app-v2 .exv .ex-stem { font-size: 18px; line-height: 1.55; font-weight: 600; }
html.app-v2 .exv .ex-opt { align-items: center; min-height: 48px; padding: 10px 14px; border: 2px solid var(--slate-200); border-radius: 14px; font-size: 16px; }
html.app-v2 .exv .ex-opt input { width: 18px; height: 18px; accent-color: var(--action-green); flex: none; }
html.app-v2 .exv .ex-opt:has(input:checked) { border-color: var(--action-green); background: #F0FDF4; }
html.app-v2 .exv .ex-actions .btn { min-height: 48px; padding: 0 20px; }
html.app-v2 .exv .ex-practice-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
html.app-v2 .exv .ex-practice-bar label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; flex: 1 1 240px; justify-content: flex-end; }
html.app-v2 .exv .ex-picker { min-height: 44px; border-radius: 12px; max-width: 100%; min-width: 0; flex: 0 1 320px; }
html.app-v2 .exv .ex-modes { display: inline-flex; gap: 6px; margin: 0; background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 4px; }
html.app-v2 .exv .ex-modes .pill { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--slate-700); font: 600 14px Inter, sans-serif; }
html.app-v2 .exv .ex-modes .pill.active { background: var(--naija-deep-green); color: #fff; }
html.app-v2 .exv .ex-flash { padding: 28px; border-radius: 24px; box-shadow: 0 24px 48px -32px rgba(15,23,42,.35); }
html.app-v2 .exv .ex-grades .btn { flex: 1 1 0; min-height: 52px; }
html.app-v2 .exv .ex-mock-bar { border-radius: 14px; background: var(--naija-deep-green); }
html.app-v2 .exv .ex-trend td { padding: 6px 14px 6px 0; }

/* strength chips and the progress heatmap: the key's colours, with text */
html.app-v2 .exv .ex-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 3px 10px; }
html.app-v2 .exv .ex-chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--slate-300); }
html.app-v2 .exv .ex-chip-strong { background: var(--mint-50); color: #14532D; }
html.app-v2 .exv .ex-chip-strong::before { background: var(--action-green); }
html.app-v2 .exv .ex-chip-mid { background: #F0FDF4; color: #14532D; }
html.app-v2 .exv .ex-chip-mid::before { background: var(--soft-mint); box-shadow: 0 0 0 1px #4ADE80; }
html.app-v2 .exv .ex-chip-weak { background: #FFF7ED; color: #7C2D12; }
html.app-v2 .exv .ex-chip-weak::before { background: #EA580C; }
html.app-v2 .exv .ex-cell { border-radius: 8px; border: 0; border-bottom: 3px solid var(--slate-300); }
html.app-v2 .exv .ex-c0 { background: var(--slate-100); color: var(--slate-700); }
html.app-v2 .exv .ex-c1 { background: #FFF7ED; color: #7C2D12; border-bottom-color: #EA580C; }
html.app-v2 .exv .ex-c2 { background: #F0FDF4; color: #14532D; border-bottom-color: var(--soft-mint); }
html.app-v2 .exv .ex-c3 { background: var(--action-green); color: #fff; border-bottom-color: var(--naija-deep-green); }

@media (max-width: 640px) {
  html.app-v2 .exv-hero { padding: 22px 18px 24px; border-radius: 22px; }
  html.app-v2 .exv-ready { flex: 1 1 100%; }
  html.app-v2 .exv-tab { padding: 0 12px; font-size: 14px; }
  html.app-v2 .exv-ch { padding: 16px; gap: 12px 14px; }
  html.app-v2 .exv-ch-main { flex: 1 1 calc(100% - 54px); }
  html.app-v2 .exv-meter { flex: 1 1 100%; }
  html.app-v2 .exv-practise { flex: 1 1 100%; }
  html.app-v2 .exv .ex-q { padding: 18px; }
  html.app-v2 .exv .ex-practice-bar label { justify-content: flex-start; }
  html.app-v2 .exv .ex-modes { display: flex; flex-wrap: wrap; }
}