/*
 * BY Prep Platform — Design System
 * theme.css  v1.0  (extracted from sat-experience.html prototype)
 *
 * Framework-agnostic drop-in. Link this file and use the classes below.
 * No framework dependencies — works with plain HTML, React, Vue, anything.
 * Google Font: Playfair Display + Source Sans 3 (loaded via the <link> below)
 * <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap" rel="stylesheet">
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-cream:        #f7f3eb;   /* page / body background */
  --color-surface:      #fdfbf6;   /* card / panel background */
  --color-paper:        #fffefb;   /* test / reading surface (most sacred white) */
  --color-border:       #e9e2d3;   /* dividers, card outlines, form borders */
  /* ── BRAND PRIMARY — the ONLY palette knob that changes per exam.
        Override these 4 in your app to re-brand; everything else stays shared.
        SAT = green (below) · Math Kangaroo = kangaroo blue:
          --color-primary:#1a3d7c; --color-primary-dark:#122d5c; --color-primary-tint:#eef1f9;
          --gradient-hero: radial-gradient(130% 120% at 80% -10%, #2a52a0, #1a3d7c, #122d5c); */
  --color-primary:      #1f5b3a;   /* primary action, correct, mastered */
  --color-primary-dark: #14401f;   /* hover / pressed */
  --color-primary-tint: #eef3ee;   /* light primary fill (badges, backgrounds) */
  --gradient-hero: radial-gradient(130% 120% at 80% -10%, #226040, #1a4e33, #123a1d); /* dark hero band — SAT green */

  /* green* aliases follow primary so existing component classes need zero edits */
  --color-green:        var(--color-primary);
  --color-green-dark:   var(--color-primary-dark);
  --color-green-tint:   var(--color-primary-tint);
  --color-gold:         #c89c3d;   /* accent, target, locked/paywall, upcoming */
  --color-gold-tint:    #f6eed9;   /* light gold fill */
  --color-terra:        #c45c3a;   /* incorrect, urgency, time over-run */
  --color-ink:          #1a1a17;   /* body text */
  --color-ink-muted:    #8a8a82;   /* secondary / caption text */

  /* Verdict / band system */
  --color-verdict-bad:       #c0392b;   /* needs-improvement text */
  --color-verdict-bad-bg:    #fde8e8;   /* needs-improvement background */
  --color-verdict-mid:       #d4860a;   /* almost-there text */
  --color-verdict-mid-bg:    #fef3dd;   /* almost-there background */
  /* verdict-good uses --color-green / --color-green-tint */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Border radius scale */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows (warm green undertone) */
  --shadow-warm:    0 4px 14px rgba(31, 91, 58, 0.10);
  --shadow-warm-lg: 0 8px 28px rgba(31, 91, 58, 0.12);

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE RESET & BODY
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. LAYOUT HELPERS
   ───────────────────────────────────────────────────────────────────────────── */

/* Max-width page container */
.bp-page-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-8);
}

/* Two-column: main content + narrow sidebar (320px) */
.bp-two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

/* Sidebar + main content (sidebar left, 240px) */
.bp-sidebar-col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}

/* Score-report two-column (main + 300px sidebar) */
.bp-report-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. TOP NAVIGATION BAR
   ───────────────────────────────────────────────────────────────────────────── */
.bp-topnav {
  background: var(--gradient-hero);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Brand wordmark inside the nav — swap the text per exam */
.bp-nav-logo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-right: 40px;
  flex-shrink: 0;
}
.bp-nav-logo span { color: var(--color-gold); }

/* Tab strip */
.bp-nav-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.bp-nav-tab {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  letter-spacing: 0.01em;
}
.bp-nav-tab:hover  { color: #fff; background: rgba(255, 255, 255, 0.10); }
.bp-nav-tab.active { color: #fff; background: rgba(255, 255, 255, 0.15); }
.bp-nav-tab.active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
  margin-top: 4px;
}

/* Right side: avatar + name */
.bp-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-nav-name { color: rgba(255, 255, 255, 0.85); font-size: 13px; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. PAGE HEADINGS
   ───────────────────────────────────────────────────────────────────────────── */
.bp-page-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.bp-page-sub {
  color: var(--color-ink-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

/* Section label: uppercase overline (e.g. "Next Step", "Timeline") */
.bp-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 14px;
}

/* Zone divider: label + horizontal rule */
.bp-zone-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-zone-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. CONTENT CARD
   ───────────────────────────────────────────────────────────────────────────── */
.bp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: var(--space-6);
}

.bp-card-sm {
  padding: 18px 20px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. HERO BAND (dark green gradient header inside a screen)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-hero-band {
  background: var(--gradient-hero);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.bp-hero-band h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.bp-hero-band p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

/* Score hero variant: composite score */
.bp-score-hero {
  background: var(--gradient-hero);
  border-radius: var(--radius-md);
  padding: 36px 40px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.bp-score-composite {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bp-score-out-of {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.55);
  vertical-align: super;
  margin-left: 2px;
}
.bp-score-hero-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Delta strip inside the score hero */
.bp-score-delta-strip {
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-score-delta-num   { font-size: 20px; font-weight: 700; color: #5bdb8a; }
.bp-score-delta-label { font-size: 12px; color: rgba(255, 255, 255, 0.70); }

/* Sub-score blocks inside the hero (e.g. per-section) */
.bp-score-sections-wrap  { display: flex; gap: 32px; flex: 1; }
.bp-score-section-block  { flex: 1; }
.bp-score-section-name   { font-size: 12px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.bp-score-section-num    { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.bp-score-section-out    { font-size: 16px; color: rgba(255,255,255,0.50); }
.bp-score-section-band   { margin-top: 10px; }


/* ─────────────────────────────────────────────────────────────────────────────
   8. SCORE PROGRESS ARC (SVG widget)
   Used in Dashboard sidebar — rendered as inline <svg>.
   The arc values are computed by the host app; these classes handle the wrapper.
   ───────────────────────────────────────────────────────────────────────────── */
.bp-progress-rail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: var(--space-6);
}

.bp-progress-rail h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* The SVG fills the container width */
.bp-score-arc-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Row of score labels under the arc */
.bp-score-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.bp-score-label         { text-align: center; }
.bp-score-label .val    { font-size: 22px; font-weight: 700; font-family: var(--font-display); }
.bp-score-label .lbl    { font-size: 11px; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bp-score-label.delta .val { color: var(--color-green); }

/* Timeline below the arc */
.bp-progress-timeline {
  margin-top: 22px;
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
}
.bp-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}
.bp-timeline-item::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px;
  width: 1px; height: calc(100% + 8px);
  background: var(--color-border);
}
.bp-timeline-item:last-child::before { display: none; }
.bp-timeline-dot {
  position: absolute;
  left: 0; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}
.bp-timeline-dot.active { background: var(--color-green); border-color: var(--color-green); }
.bp-timeline-label { font-size: 11px; font-weight: 600; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bp-timeline-name  { font-size: 13px; font-weight: 600; color: var(--color-green); }
.bp-timeline-sub   { font-size: 12px; color: var(--color-ink-muted); }


/* ─────────────────────────────────────────────────────────────────────────────
   9. STAT TILES (difficulty breakdown 3-up grid)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-diff-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.bp-diff-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: 20px 18px;
}

.bp-diff-tile-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-diff-tile-label.easy   { color: var(--color-green); }
.bp-diff-tile-label.medium { color: var(--color-verdict-mid); }
.bp-diff-tile-label.hard   { color: var(--color-verdict-bad); }


/* ─────────────────────────────────────────────────────────────────────────────
   10. DIFFICULTY DONUTS (CSS SVG donut chart)
   Donut is an inline <svg>; these classes handle the wrapper + legend.
   ───────────────────────────────────────────────────────────────────────────── */
.bp-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bp-donut {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

/* Rotate SVG so arc starts at top */
.bp-donut svg { transform: rotate(-90deg); }

.bp-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.bp-donut-center-pct { font-size: 18px; font-weight: 700; color: var(--color-ink); }
.bp-donut-center-lbl { font-size: 9px; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.bp-donut-legend      { flex: 1; }
.bp-donut-legend-item { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; }
.bp-donut-swatch      { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   11. HORIZONTAL SKILL BARS (stacked correct / unanswered / incorrect)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-skill-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bp-skill-bar-label {
  width: 200px;
  font-size: 12px;
  color: var(--color-ink);
  text-align: right;
  flex-shrink: 0;
}
.bp-skill-bar-track {
  flex: 1;
  height: 20px;
  border-radius: 4px;
  background: var(--color-cream);
  overflow: hidden;
  display: flex;
}
/* Segment fills — set width via inline style */
.bp-bar-correct { background: var(--color-green);  height: 100%; }
.bp-bar-unans   { background: var(--color-border); height: 100%; }
.bp-bar-wrong   { background: var(--color-terra);  height: 100%; }

.bp-skill-bar-nums { font-size: 11px; color: var(--color-ink-muted); white-space: nowrap; }

/* Thin time-allocation bars (height 16px, single fill) */
.bp-time-strip-row  { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bp-time-strip-label { width: 160px; font-size: 12px; text-align: right; flex-shrink: 0; color: var(--color-ink); }
.bp-time-strip-bar  { flex: 1; height: 16px; border-radius: 4px; background: var(--color-green-tint); position: relative; }
.bp-time-strip-fill { height: 100%; border-radius: 4px; background: var(--color-green); position: relative; }
.bp-time-strip-fill.warn { background: var(--color-gold); }
.bp-time-strip-fill.over { background: var(--color-terra); }
.bp-time-target-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-ink); opacity: 0.25; }
.bp-time-strip-val  { font-size: 11px; color: var(--color-ink-muted); white-space: nowrap; }


/* ─────────────────────────────────────────────────────────────────────────────
   12. VERDICT / BAND PILLS
   Three-state verdict system: needs-improvement / almost-there / looking-good
   ───────────────────────────────────────────────────────────────────────────── */
.bp-band {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.bp-band-red   { background: var(--color-verdict-bad-bg); color: var(--color-verdict-bad); }
.bp-band-amber { background: var(--color-verdict-mid-bg); color: var(--color-verdict-mid); }
.bp-band-green { background: var(--color-green-tint);    color: var(--color-green); }

/* Band legend row (left-colored-border + pill + description) */
.bp-band-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-cream);
  border-radius: var(--radius);
  border-left: 4px solid;
}
.bp-band-legend-item.red   { border-left-color: var(--color-verdict-bad); }
.bp-band-legend-item.amber { border-left-color: var(--color-verdict-mid); }
.bp-band-legend-item.green { border-left-color: var(--color-green); }


/* ─────────────────────────────────────────────────────────────────────────────
   13. DIFFICULTY BADGES (inline tag on skill cards)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-diff-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bp-diff-easy   { background: var(--color-green-tint);     color: var(--color-green); }
.bp-diff-medium { background: var(--color-gold-tint);      color: var(--color-gold); }
.bp-diff-hard   { background: var(--color-verdict-bad-bg); color: var(--color-verdict-bad); }

/* Due / urgency badges */
.bp-due-badge    { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.bp-due-today    { background: var(--color-verdict-bad-bg); color: var(--color-verdict-bad); }
.bp-due-tomorrow { background: var(--color-gold-tint);      color: var(--color-verdict-mid); }
.bp-due-upcoming { background: var(--color-cream); color: var(--color-ink-muted); border: 1px solid var(--color-border); }


/* ─────────────────────────────────────────────────────────────────────────────
   14. PREP PLAN ITEM CARDS (gold left-border + mark-complete)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-next-step-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: 18px 22px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.bp-next-step-icon    { font-size: 20px; flex-shrink: 0; }
.bp-next-step-info    { flex: 1; }
.bp-next-step-skill   { font-weight: 700; font-size: 15px; color: var(--color-ink); }
.bp-next-step-meta    { font-size: 13px; color: var(--color-ink-muted); margin-top: 3px; display: flex; align-items: center; gap: 10px; }
.bp-next-step-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Mark-complete circular button */
.bp-mark-complete-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted);
  font-size: 15px;
  transition: all 0.15s;
}
.bp-mark-complete-btn:hover { border-color: var(--color-green); color: var(--color-green); background: var(--color-green-tint); }
.bp-mark-complete-btn.done  { background: var(--color-green); border-color: var(--color-green); color: #fff; }

/* Upcoming list (stacked rows with dividers) */
.bp-upcoming-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-warm); overflow: hidden; }
.bp-upcoming-item { display: flex; align-items: center; padding: 14px 20px; gap: 14px; border-bottom: 1px solid var(--color-border); }
.bp-upcoming-item:last-child { border-bottom: none; }
.bp-upcoming-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; }
.bp-upcoming-skill  { font-size: 14px; font-weight: 600; flex: 1; }
.bp-upcoming-domain { font-size: 12px; color: var(--color-ink-muted); margin-top: 2px; }
.bp-upcoming-meta   { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-ink-muted); }


/* ─────────────────────────────────────────────────────────────────────────────
   15. GAMIFIED HEADER ELEMENTS (badges, chips)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-gamify-badge {
  background: rgba(200, 156, 61, 0.25);
  border: 1px solid rgba(200, 156, 61, 0.50);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bp-camp-chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. SKILL CARDS (practice grid)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.bp-skill-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.1s;
}
.bp-skill-card:hover { box-shadow: var(--shadow-warm-lg); transform: translateY(-1px); }

.bp-skill-card-tag    { display: flex; align-items: center; justify-content: flex-end; padding: 6px 10px 0; }
.bp-skill-card-body   { padding: 12px 16px 16px; }
.bp-skill-card-domain { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 4px; }
.bp-skill-card-name   { font-size: 14px; font-weight: 700; color: var(--color-ink); line-height: 1.35; margin-bottom: 10px; }
.bp-skill-card-count  { font-size: 12px; color: var(--color-ink-muted); display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.bp-skill-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Mastery state dot */
.bp-mastery-row  { display: flex; align-items: center; gap: 5px; }
.bp-mastery-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bp-mastery-dot.not-started { background: var(--color-border); }
.bp-mastery-dot.in-progress { background: var(--color-gold); }
.bp-mastery-dot.mastered    { background: var(--color-green); }
.bp-mastery-label { font-size: 11px; color: var(--color-ink-muted); }


/* ─────────────────────────────────────────────────────────────────────────────
   17. TEST / EXAM CARDS (dashboard accordion cards)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-test-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.bp-test-card:hover { box-shadow: var(--shadow-warm-lg); }

.bp-test-card-header { display: flex; align-items: center; padding: 18px 22px; gap: 14px; cursor: pointer; }
.bp-test-card-header.completed   { background: var(--color-green); }
.bp-test-card-header.in-progress { background: var(--color-gold-tint); border-bottom: 2px solid var(--color-gold); }
.bp-test-card-header.locked      { background: var(--color-surface); }

.bp-test-badge                 { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bp-test-badge.completed       { color: rgba(255,255,255,0.85); }
.bp-test-badge.in-progress     { color: var(--color-gold); }
.bp-test-badge.locked          { color: var(--color-ink-muted); }

.bp-test-name                  { font-size: 17px; font-weight: 600; }
.bp-test-name.completed        { color: #fff; }
.bp-test-name.in-progress      { color: var(--color-ink); }
.bp-test-name.locked           { color: var(--color-ink-muted); }

.bp-test-status-pill           { margin-left: 10px; font-size: 12px; font-style: italic; font-weight: 400; }
.bp-test-status-pill.completed { color: rgba(255,255,255,0.80); }
.bp-test-status-pill.in-progress { color: var(--color-gold); }

.bp-test-card-body             { padding: 18px 22px; border-top: 1px solid var(--color-border); display: none; }
.bp-test-card-body.open        { display: block; }

/* Section rows inside the expanded card */
.bp-test-sections    { display: flex; flex-direction: column; gap: 10px; }
.bp-test-section-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--color-cream); border-radius: var(--radius); }

/* Time badge circle (pending sections) */
.bp-section-time-badge {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-green-tint);
  border: 2px solid var(--color-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--color-green);
  flex-shrink: 0;
}
.bp-section-time-badge span { font-size: 9px; font-weight: 500; color: var(--color-ink-muted); margin-top: -2px; }

/* Check circle (completed sections) */
.bp-section-check {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. FILTER SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.bp-filter-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: 20px;
  position: sticky;
  top: 80px;
}
.bp-filter-title       { font-size: 13px; font-weight: 700; color: var(--color-ink); margin-bottom: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.bp-filter-group       { margin-bottom: 20px; }
.bp-filter-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 10px; }
.bp-filter-radio       { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--color-ink); }
.bp-filter-radio input { accent-color: var(--color-green); }
.bp-filter-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-size: 13px;
  color: var(--color-ink);
  font-family: inherit;
  cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  text-decoration: none;
  font-family: inherit;
}

/* Primary: solid green */
.bp-btn-primary { background: var(--color-green); color: #fff; }
.bp-btn-primary:hover { background: var(--color-green-dark); }

/* Outline: green border, transparent fill */
.bp-btn-outline { background: transparent; color: var(--color-green); border: 1.5px solid var(--color-green); }
.bp-btn-outline:hover { background: var(--color-green-tint); }

/* Ghost: neutral, low-emphasis */
.bp-btn-ghost { background: transparent; color: var(--color-ink-muted); border: 1px solid var(--color-border); }
.bp-btn-ghost:hover { background: var(--color-cream); }

/* Small size modifier */
.bp-btn-sm { padding: 6px 14px; font-size: 13px; }


/* ─────────────────────────────────────────────────────────────────────────────
   20. SECTION-BREAK OVERLAY (mid-exam modal)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-break-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 23, 0.65);
  backdrop-filter: blur(4px);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.bp-break-overlay.open { display: flex; }

.bp-break-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  padding: 48px 56px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  border: 1px solid var(--color-border);
}
.bp-break-icon  { font-size: 48px; margin-bottom: 16px; }
.bp-break-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--color-ink); margin-bottom: 10px; }
.bp-break-sub   { color: var(--color-ink-muted); font-size: 15px; line-height: 1.6; margin-bottom: 28px; }
.bp-break-timer { font-size: 36px; font-weight: 700; font-family: var(--font-display); color: var(--color-green); margin-bottom: 24px; }


/* ─────────────────────────────────────────────────────────────────────────────
   21. SCORE REPORT TABLE
   ───────────────────────────────────────────────────────────────────────────── */
.bp-section-table { width: 100%; border-collapse: collapse; }
.bp-section-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-muted); padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--color-border); }
.bp-section-table td { padding: 14px; font-size: 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.bp-section-table tr:last-child td { border-bottom: none; }
.bp-section-table tr:hover td { background: var(--color-cream); }


/* ─────────────────────────────────────────────────────────────────────────────
   22. PROTOTYPE / SAMPLE-DATA RIBBON (optional — remove in production)
   ───────────────────────────────────────────────────────────────────────────── */
.bp-ribbon {
  position: fixed;
  top: 14px;
  right: -30px;
  background: var(--color-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 40px;
  transform: rotate(45deg);
  z-index: 1000;
  pointer-events: none;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────────────────────
   23. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */
.bp-mt-1  { margin-top: var(--space-1); }
.bp-mt-2  { margin-top: var(--space-2); }
.bp-mt-4  { margin-top: var(--space-4); }
.bp-mt-6  { margin-top: var(--space-6); }
.bp-mb-2  { margin-bottom: var(--space-2); }
.bp-mb-4  { margin-bottom: var(--space-4); }
.bp-mb-6  { margin-bottom: var(--space-6); }
.bp-flex         { display: flex; }
.bp-items-center { align-items: center; }
.bp-gap-2  { gap: var(--space-2); }
.bp-gap-3  { gap: var(--space-3); }
.bp-flex-1 { flex: 1; }
.bp-text-muted { color: var(--color-ink-muted); }
.bp-text-sm    { font-size: 13px; }
.bp-text-xs    { font-size: 11px; }
.bp-font-bold  { font-weight: 700; }
.bp-font-600   { font-weight: 600; }