/* ═══════════════════════════════════════════════════════════
   result.css — Result Page Styles
  
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 8-Point Grid */
  --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;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Motion — ms values (variables.css uses unitless 0.xS) */
  --transition-result-fast:   150ms;
  --transition-result-medium: 300ms;
  --transition-result-slow:   500ms;
  --transition-result-bar:    1000ms;  /* width animation on progress bars    */
  --transition-result-bar-lg: 1200ms;  /* width animation on bench/tbc bars   */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadow — page-specific name avoids overriding shared --shadow-sm/md */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Typography */
  --result-font: 'Noto Sans', 'Segoe UI', sans-serif;

  /* ── CSSOM bridge defaults ───────────────────────────────────────────────
     result.js writes these via element.style.setProperty().
     Defining fallbacks here ensures correct rendering before JS executes.  */
  --sec-color:              #1a4a76;
  --fill-color:             #1a4a76;
  --bar-color:              #1a4a76;
  --badge-color:            #1a4a76;
  --bench-empty-td-padding: 0;
  --js-width:               0%;
}

/* ── Page-palette overrides — scoped to body so they only affect result.html ──
   These intentionally shadow variables.css tokens for this page.
   Scoped to `body` (not `:root`) so they cannot bleed if this stylesheet is
   ever loaded alongside another page's CSS in a bundle.                       */
body {
  --gold: var(--gold-700);   /* brighter amber for result dashboard */
  --gold-light:  #fff8e1;
  --green: var(--green-500);
  --green-light: #d4edda;
  --red-light:   #fdecea;
  --blue-dark: var(--navy-700);
  --blue-mid:    #0056b3;
  --blue-light:  #e8f0fb;
  --grey-bg:     #f4f6f9;
  --grey-border: #dee2e6;
  --grey-text:   #6c757d;
  /* Pill semantic colours (dark-bg context, not in variables.css) */
  --pill-correct-color:   #6ee48f;
  --pill-incorrect-color: #ff8080;
  /* Passage/review backgrounds (context-specific) */
  --passage-bg:           #f5f8ff;
  --passage-border:       #c8d8ee;
  --bar-track-bg:         #e2e6ea;  /* track behind progress/topic/bench bars */
  --unattempted-border:   #c8cdd4;
  --unattempted-bg:       #e9ecef;
  --unattempted-color:    #6c757d;
  --body-text-dark:       #1a1a1a;  /* ri-question primary text */
  --body-text-mid:        #333;     /* option/label text */
  --note-bg:              #fffbf0;
  --note-border:          #f0d080;
  --note-color:           #664d03;
  --auth-bg:              #fff8e1;
  --auth-color:           #7d5a00;
  --table-total-bg:       #f0f4f9;
  --explanation-bg:       #fffbf0;
  /* RPSC banner — dark-bg context colours */
  --rpsc-warning-text:    #ffe4e4;
  --rpsc-warning-strong:  #fecaca;
  --rpsc-print-bg:        #1a4a76;
  /* RPSC pill accent borders — on dark gradient bg, these are intentional bright accents */
  --rpsc-pill-correct-border: #6ee77b;
  --rpsc-pill-correct-bg:     rgba(110,231,123,0.15);
  --rpsc-pill-wrong-border:   #f87171;
  --rpsc-pill-wrong-bg:       rgba(248,113,113,0.15);
  --rpsc-pill-blank-border:   #fbbf24;
  --rpsc-pill-blank-bg:       rgba(251,191,36,0.15);
}

/* ── Focus indicator — scoped to result page elements ──────────────────────
   master.css owns the global :focus-visible rule. These overrides apply
   the gold ring specifically to result-page interactive elements without
   stomping the global rule for every element on the page.               */
.result-header :focus-visible,
.result-body   :focus-visible,
.result-tabs   :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.result-header button:focus-visible,
.result-header a:focus-visible,
.result-body   button:focus-visible,
.result-body   a:focus-visible {
  border-radius: 4px;
}
/* ── Page header ─────────────────────────────────────────────────────────── */
.result-header {
  background: var(--blue-dark);
  border-bottom: 3px solid var(--gold);
  padding: 0 var(--space-8);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.ph-left { display: flex; align-items: center; gap: var(--space-3); }

.ph-logo {
  background: var(--gold);
  color: var(--blue-dark);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ph-title    { color: #fff; font-size: 0.9rem; font-weight: 600; }
.ph-subtitle { color: rgba(255,255,255,0.75); font-size: 0.75rem; margin-top: 2px; }

.ph-right { display: flex; gap: var(--space-2); }

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
}

.btn-gold  { background: var(--gold);     color: var(--blue-dark); }
.btn-blue  { background: var(--blue-mid); }
.btn-green { background: var(--green); }
.btn-grey  { background: var(--grey-text); }
.btn-red   { background: var(--red); }

/* ── Page body ───────────────────────────────────────────────────────────── */
.result-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-16);
}

/* ── Score hero ──────────────────────────────────────────────────────────── */
.score-hero {
  background: var(--blue-dark);
  border-radius: 12px;
  padding: var(--space-8) var(--space-9);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26,74,118,0.18);
}
.score-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,0.04); border-radius: 50%;
  pointer-events: none;
}
.score-hero::after {
  content: ''; position: absolute; bottom: -60px; right: 80px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,0.03); border-radius: 50%;
  pointer-events: none;
}

.score-circle {
  flex-shrink: 0; width: 130px; height: 130px; border-radius: 50%;
  border: 4px solid var(--gold); display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); position: relative; z-index: 1;
}
.score-value  { font-size: 2.2rem; font-weight: 800; color: var(--gold); line-height: 1; }
.score-denom  { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 4px; }
.score-info   { flex: 1; position: relative; z-index: 1; }
.score-exam-name  { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: var(--space-1); }
.score-candidate  { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin-bottom: var(--space-5); }
.score-pills  { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.score-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: var(--space-2) var(--space-4); min-width: 80px;
}
.pill-value { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; }
.pill-label { font-size: 0.65rem; color: rgba(255,255,255,0.55); margin-top: 4px; text-align: center; }
.pill-correct   .pill-value { color: var(--pill-correct-color); }
.pill-incorrect .pill-value { color: var(--pill-incorrect-color); }
.pill-accuracy  .pill-value { color: var(--gold); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.result-tabs {
  display: flex; gap: 4px;
  background: var(--white); border: 1px solid var(--grey-border);
  border-radius: 10px; padding: 4px; margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);  /* was --shadow-sm; renamed to avoid shared.css conflict */
}
.r-tab {
  flex: 1; padding: var(--space-2) var(--space-3); border: none; background: transparent;
  border-radius: 6px; font-family: var(--result-font); font-size: 0.82rem;
  font-weight: 600; color: var(--grey-text); cursor: pointer;
  transition: background var(--transition-result-fast), color var(--transition-result-fast);
  white-space: nowrap;
  min-height: 40px;
}
.r-tab[aria-selected="true"]                 { background: var(--blue-dark); color: #fff; }
.r-tab:hover:not([aria-selected="true"])     { background: var(--blue-light); color: var(--blue-dark); }

.tab-panel        { display: none; }
.tab-panel.active { display: block; animation: fadeUp var(--transition-result-medium) var(--ease-out); }

/* fadeUp is defined in shared.css */
@media (prefers-reduced-motion: reduce) {
  .tab-panel.active { animation: none; }
}

/* ── Content cards ────────────────────────────────────────────────────────────
   shared.css also has a `.card` — but that is scoped to `.auth-layout > .card`
   (the auth-form card).  This result-page `.card` is a content panel pattern
   with hover lift and is unrelated to the auth card.
   ─────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--grey-border);
  border-radius: 10px; overflow: hidden; margin-bottom: var(--space-5);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow var(--transition-result-fast), transform var(--transition-result-fast);
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.card-header {
  background: var(--blue-dark); color: #fff;
  padding: var(--space-3) var(--space-5); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: var(--space-2);
}
.card-body { padding: var(--space-5); }

/* ── Section cards ────────────────────────────────────────────────────────── */
.section-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.sec-card {
  background: var(--white); border: 1px solid var(--grey-border);
  border-radius: 10px; overflow: hidden;
  transition: box-shadow var(--transition-result-fast), transform var(--transition-result-fast);
}
.sec-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.sec-card-header {
  padding: var(--space-3) var(--space-4); font-size: 0.8rem; font-weight: 700; color: #fff;
  /* Background colour applied via CSS custom property --sec-color set in JS
     (element.style.setProperty) — CSP-safe, no inline style attribute needed. */
  background: var(--sec-color, var(--blue-dark));
}
.sec-card-body   { padding: var(--space-3) var(--space-4); }
.sec-score-row   { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); }
.sec-score-val   { font-size: 1.8rem; font-weight: 800; color: var(--blue-dark); line-height: 1; }
.sec-score-max   { font-size: 0.8rem; color: var(--grey-text); }
.sec-stats-row   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); margin-bottom: var(--space-3); }
.sec-stat        { text-align: center; background: var(--grey-bg); border-radius: 6px; padding: var(--space-1) 4px; }
.sec-stat-val    { font-size: 1rem; font-weight: 700; line-height: 1; }
.sec-stat-lbl    { font-size: 0.62rem; color: var(--grey-text); margin-top: 2px; }
.progress-wrap   { margin-top: 4px; }
.progress-label  { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--grey-text); margin-bottom: 4px; }
.progress-bar    { height: 6px; background: var(--bar-track-bg); border-radius: 10px; overflow: hidden; }
/* Extends js-bridge.css .progress-fill (sets background+width via CSSOM).
   Different properties only — no cascade conflict. */
.progress-fill   {
  height: 100%; border-radius: 10px; transition: width var(--transition-result-bar) var(--ease-out);
  background: var(--fill-color, var(--blue-dark));  /* --fill-color set by JS */
  width: var(--js-width, 0%); /* Fix: width via CSSOM bridge */
}
.sec-accuracy { font-size: 0.72rem; font-weight: 700; margin-top: 8px; }

/* ── Utility colour helpers (used by result.js DOM builder) ─────────────── */
.color-green  { color: var(--green);     }
.color-red    { color: var(--red);       }
.color-orange { color: var(--orange);    }
.color-grey   { color: var(--grey-text); }
.color-blue   { color: var(--blue-mid);  }
.font-bold    { font-weight: 700;        }

/* ── Diff badges (benchmark table) ─────────────────────────────────────── */
.diff-positive { color: var(--green);  font-weight: 700; }
.diff-negative { color: var(--red);    font-weight: 700; }

/* ── Topic sections ───────────────────────────────────────────────────────── */
.topic-section { margin-bottom: var(--space-6); }
.topic-section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--blue-dark);
  padding: var(--space-3) 0 var(--space-2); border-bottom: 2px solid var(--blue-light);
  margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2);
}
.topic-badge {
  font-size: 0.65rem; padding: 2px var(--space-2); border-radius: 10px;
  color: #fff; font-weight: 700;
  /* background set via --badge-color custom property (JS CSSOM setter) */
  background: var(--badge-color, var(--blue-dark));
}
.topic-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.topic-card     { background: var(--white); border: 1px solid var(--grey-border); border-radius: 8px; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transition: box-shadow var(--transition-result-fast); }
.topic-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.topic-name     { font-size: 0.82rem; font-weight: 600; color: var(--body-text-dark); }
.topic-stats    { display: flex; gap: var(--space-2); font-size: 0.72rem; }
.ts-correct     { color: var(--green);     font-weight: 600; }
.ts-incorrect   { color: var(--red);       font-weight: 600; }
.ts-total       { color: var(--grey-text); }
.topic-bar      { height: 5px; background: var(--bar-track-bg); border-radius: 10px; overflow: hidden; }
.topic-bar-fill {
  height: 100%; border-radius: 10px; transition: width var(--transition-result-bar) var(--ease-out);
  width: var(--js-width, 0%); /* Fix: width via CSSOM bridge */
}
.topic-accuracy { font-size: 0.72rem; font-weight: 700; text-align: right; }

/* ── Time analysis ────────────────────────────────────────────────────────── */
.time-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.time-card       { background: var(--white); border: 1px solid var(--grey-border); border-radius: 10px; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 6px; transition: box-shadow var(--transition-result-fast); }
.time-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.time-card-label { font-size: 0.72rem; color: var(--grey-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.time-card-value { font-size: 1.6rem; font-weight: 800; color: var(--blue-dark); line-height: 1; }
.time-card-sub   { font-size: 0.72rem; color: var(--grey-text); }
.time-bar-chart  { display: flex; flex-direction: column; gap: var(--space-3); }
.tbc-row         { display: flex; align-items: center; gap: var(--space-3); }
.tbc-label       { font-size: 0.78rem; font-weight: 600; min-width: 180px; color: var(--body-text-mid); }
.tbc-bar-wrap    { flex: 1; height: 22px; background: var(--bar-track-bg); border-radius: 6px; overflow: hidden; }
.tbc-bar-fill    {
  height: 100%; border-radius: 6px; display: flex; align-items: center;
  padding-left: var(--space-2); font-size: 0.7rem; font-weight: 700; color: #fff;
  transition: width var(--transition-result-bar-lg) var(--ease-out);
  /* bar colour set via --bar-color custom property (JS CSSOM setter) */
  background: var(--bar-color, var(--blue-dark));
  width: var(--js-width, 0%); /* Fix: width via CSSOM bridge */
}
.tbc-time { font-size: 0.78rem; color: var(--grey-text); min-width: 60px; text-align: right; }

/* ── Benchmark ────────────────────────────────────────────────────────────── */
.bench-hero      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.bench-card      { background: var(--white); border: 1px solid var(--grey-border); border-radius: 10px; padding: var(--space-4); text-align: center; position: relative; overflow: hidden; transition: box-shadow var(--transition-result-fast), transform var(--transition-result-fast); }
.bench-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.bench-card.yours {
  border-color: var(--blue-mid);
  border-width: 2px; /* Fix: yours card border */
}
.bench-card.yours::before {
  content: 'YOUR SCORE'; position: absolute; top: 0; left: 0; right: 0;
  background: var(--blue-mid); color: #fff; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 1px; padding: 4px; text-align: center;
}
.bench-card.yours .bench-val { margin-top: 14px; }
.bench-label     { font-size: 0.72rem; color: var(--grey-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: var(--space-2); }
.bench-val       { font-size: 2rem; font-weight: 800; color: var(--blue-dark); line-height: 1; }
.bench-sub       { font-size: 0.72rem; color: var(--grey-text); margin-top: 4px; }
.bench-val.topper  { color: var(--green); }
.bench-val.average { color: var(--orange); }
.compare-wrap    { margin-top: var(--space-2); }
.compare-row     { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.compare-name    { font-size: 0.75rem; font-weight: 600; min-width: 140px; color: var(--body-text-mid); }
.compare-bar-wrap { flex: 1; height: 18px; background: var(--bar-track-bg); border-radius: 4px; overflow: hidden; }
.compare-bar-fill {
  height: 100%; border-radius: 4px; transition: width var(--transition-result-bar-lg) var(--ease-out);
  width: var(--js-width, 0%); /* Fix: width via CSSOM bridge */
}
.compare-score   { font-size: 0.75rem; font-weight: 700; min-width: 44px; text-align: right; }
.bar-yours       { background: var(--blue-mid); }
.bar-topper      { background: var(--green); }
.bar-average     { background: var(--orange); }

/* ── Review panel ─────────────────────────────────────────────────────────── */
.review-toolbar       { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.review-search-wrap   { position: relative; flex: 1; min-width: 220px; max-width: 400px; }
.review-search {
  width: 100%; padding: var(--space-2) var(--space-4); padding-left: var(--space-8);
  border: 1.5px solid var(--grey-border); border-radius: 20px;
  font-family: var(--result-font); font-size: 0.8rem; color: var(--grey-text);
  background: var(--white); outline: none;
  transition: border-color var(--transition-result-fast), box-shadow var(--transition-result-fast);
}
.review-search:focus          { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(0,86,179,0.12); }
.review-search-icon {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  font-size: 0.9rem; color: var(--grey-text); pointer-events: none;
}
.review-search-clear {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--grey-text); padding: 2px; border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-result-fast), color var(--transition-result-fast);
}
.review-search-clear:hover { background: var(--grey-bg); color: var(--red); }

.filter-btn {
  padding: var(--space-1) var(--space-3); border: 1.5px solid var(--grey-border); border-radius: 20px;
  background: var(--white); font-family: var(--result-font); font-size: 0.76rem;
  font-weight: 600; cursor: pointer; color: var(--grey-text);
  transition: all var(--transition-result-fast);
  min-height: 36px;
}
.filter-btn[aria-pressed="true"]              { border-color: var(--blue-mid); background: var(--blue-light); color: var(--blue-mid); }
.filter-btn:hover:not([aria-pressed="true"])  { border-color: var(--grey-text); color: var(--body-text-mid); }

.review-list       { display: flex; flex-direction: column; gap: var(--space-3); }
.review-item       { background: var(--white); border: 1.5px solid var(--grey-border); border-radius: 10px; overflow: hidden; transition: box-shadow var(--transition-result-fast); }
.review-item:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.review-item.correct     { border-color: var(--green); }
.review-item.incorrect   { border-color: var(--red);   }
.review-item.unattempted { border-color: var(--unattempted-border); }
.review-item.pending-review { border-color: var(--orange); } /* Fix: pending-review border */
.review-item-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--grey-bg); border-bottom: 1px solid var(--grey-border); flex-wrap: wrap; }
.ri-num     { font-size: 0.76rem; font-weight: 700; color: var(--grey-text); }
.ri-outcome { font-size: 0.7rem; font-weight: 700; padding: 2px var(--space-2); border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.ri-outcome.correct     { background: var(--green-light); color: var(--green); }
.ri-outcome.incorrect   { background: var(--red-light);   color: var(--red);   }
.ri-outcome.unattempted { background: var(--unattempted-bg); color: var(--unattempted-color); }
.ri-outcome.pending-review {
  background: rgba(217, 119, 6, 0.12);
  color: var(--orange);
} /* Fix: pending-review outcome */
.ri-topic  { font-size: 0.7rem; color: var(--grey-text); margin-left: auto; background: var(--white); border: 1px solid var(--grey-border); padding: 2px var(--space-2); border-radius: 10px; }
.ri-marks          { font-size: 0.72rem; font-weight: 700; }
.ri-marks.correct  { color: var(--green); }
.ri-marks.incorrect { color: var(--red); }
.review-item-body  { padding: var(--space-3) var(--space-4); }
.ri-question       { font-size: 0.9rem; line-height: 1.65; color: var(--body-text-dark); margin-bottom: var(--space-3); }
.ri-passage        { background: var(--passage-bg); border: 1px solid var(--passage-border); border-radius: 6px; padding: var(--space-2) var(--space-4); font-size: 0.84rem; line-height: 1.7; color: var(--body-text-mid); margin-bottom: var(--space-3); }
.ri-passage-label  { font-size: 0.75rem; color: var(--blue-dark); font-weight: 700; display: block; margin-bottom: 4px; }
.ri-options        { display: flex; flex-direction: column; gap: 7px; }
.ri-option         { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--grey-border); border-radius: 6px; font-size: 0.84rem; color: var(--body-text-mid); transition: background var(--transition-result-fast), border-color var(--transition-result-fast); }
.ri-option.is-correct { background: var(--green-light); border-color: var(--green); color: var(--green); font-weight: 600; }
.ri-option.is-user    { background: var(--red-light);   border-color: var(--red);   color: var(--red);   font-weight: 600; }
.ri-option.is-both    { background: var(--green-light); border-color: var(--green); color: var(--green); font-weight: 600; }
.ri-option.is-pending {
  background: rgba(217, 119, 6, 0.1);
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 600;
} /* Fix: pending-review option */
.ri-option.is-pending .opt-icon {
  color: var(--orange);
  font-weight: bold;
} /* Fix: pending-review option icon */
.opt-icon  { font-size: 0.88rem; flex-shrink: 0; margin-top: 1px; }
.opt-alpha { font-weight: 700; flex-shrink: 0; min-width: 18px; }
.ri-explanation { margin-top: var(--space-3); background: var(--explanation-bg); border-left: 3px solid var(--gold); padding: var(--space-2) var(--space-4); font-size: 0.82rem; line-height: 1.6; color: var(--unattempted-color); border-radius: 0 6px 6px 0; }
.ri-explanation strong { color: var(--body-text-mid); }

/* ── Empty / no-result states ─────────────────────────────────────────────── */
.panel-empty      { text-align: center; padding: var(--space-10) var(--space-4); color: var(--grey-text); }
.panel-empty-icon { font-size: 1.8rem; margin-bottom: var(--space-2); }
.panel-empty-sub  { font-size: 0.82rem; }
.bench-empty      { padding: var(--space-8) var(--space-4); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.result-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.result-table th,
.result-table td { padding: var(--space-2) var(--space-4); text-align: left; border-bottom: 1px solid var(--grey-border); }
#bench-table-body td { padding: var(--bench-empty-td-padding, 0); }
.result-table thead th { background: var(--blue-light); color: var(--blue-dark); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.3px; }
.result-table tbody tr:hover { background: var(--grey-bg); }
.result-table tbody tr:last-child td { border-bottom: none; }
.result-table .total-row td { background: var(--table-total-bg); font-weight: 700; }
.cell-correct   { color: var(--green);     font-weight: 700; }
.cell-incorrect { color: var(--red);       font-weight: 700; }
.cell-score     { color: var(--blue-dark); font-weight: 700; }
.cell-accuracy  { font-weight: 700; }
.td-no-pad      { padding: 0; }

/* ── Auth banner ──────────────────────────────────────────────────────────── */
.auth-banner {
  /* Shown via JS: element.removeAttribute('hidden') — see js-bridge.css */
  background: var(--auth-bg);
  border: 1px solid var(--gold);
  border-radius: 6px; padding: var(--space-2) var(--space-4);
  font-size: 0.8rem; color: var(--auth-color); line-height: 1.5;
  margin-bottom: var(--space-5);
  display: none;
  align-items: center; justify-content: space-between; gap: var(--space-3);
}
.auth-banner:not([hidden]) { display: flex; }
.auth-banner a { color: var(--blue-mid); font-weight: 700; text-decoration: underline; }
.auth-banner-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--auth-color); line-height: 1; padding: 0; flex-shrink: 0; min-height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.auth-banner-close:focus-visible { outline-color: var(--auth-color); }

.result-note { background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 6px; padding: var(--space-3) var(--space-4); font-size: 0.8rem; color: var(--note-color); margin-top: var(--space-6); line-height: 1.5; }

/* ── Empty state (full-page) ───────────────────────────────────────────── */
.empty-state       { text-align: center; padding: var(--space-16) var(--space-5); }
.empty-state-icon  { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state-title { font-size: 1.3rem; font-weight: 700; color: var(--blue-dark); margin-bottom: var(--space-2); }
.empty-state-msg   { color: var(--grey-text); margin-bottom: var(--space-6); line-height: 1.6; }
.empty-state-nav   { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Live search metadata ─────────────────────────────────────────────────── */
.search-meta { font-size: 0.72rem; color: var(--grey-text); margin-bottom: var(--space-2); font-weight: 500; }

/* ── WebSocket status indicator ───────────────────────────────────────────── */
/* ws-status starts with `hidden` attribute in result.html.
   JS calls: statusBar.hidden = false / statusBar.hidden = true.
   [hidden] { display:none !important } in js-bridge.css handles hiding.
   This rule only defines the revealed layout (flex) — no display:none here. */
.ws-status {
  display: flex;           /* layout when revealed — [hidden] overrides to none */
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  margin-left: auto;
  padding: 4px var(--space-3);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
}
.ws-dot             { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-text); transition: background var(--transition-result-fast); }
.ws-dot.online      { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ws-dot.offline     { background: var(--red); }
.ws-dot.connecting  { background: var(--gold); animation: pulse 1s infinite; } /* Fix: connecting state */

/* Local keyframe — not in shared.css */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Toast notification ───────────────────────────────────────────────────── */
/* result.js standalone toast — scoped to #toast ID, not .toast class
   to avoid collision with core-ui.css .toast system.
   HTML: <div id="toast" role="status" aria-live="polite" aria-atomic="true"> */
#toast {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  background: var(--blue-dark); color: #fff;
  padding: var(--space-3) var(--space-5); border-radius: 10px;
  font-size: 0.82rem; font-weight: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex; align-items: center; gap: var(--space-2);
  z-index: 9999; transform: translateY(100px); opacity: 0;
  transition: transform var(--transition-result-medium) var(--ease-out), opacity var(--transition-result-medium);
  border-left: 3px solid var(--gold);
  max-width: 360px;
  pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast-icon { font-size: 1rem; flex-shrink: 0; }

/* ── Action buttons row ───────────────────────────────────────────────────── */
.action-buttons-row {
  display: flex; gap: var(--space-3); justify-content: center;
  margin-top: var(--space-8); flex-wrap: wrap;
}

/* ── High contrast support (WCAG 1.4.11) ─────────────────────────────────── */
@media (prefers-contrast: more) {
  .btn, .r-tab, .filter-btn, .review-search { border-width: 2px !important; }
  .score-hero, .card-header                 { border: 2px solid #fff; }
  .review-item, .sec-card, .card            { border: 2px solid #000; }
  .topic-bar, .progress-bar, .compare-bar-wrap,
  .tbc-bar-wrap                             { border: 1px solid #000; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .score-hero  { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .bench-hero  { grid-template-columns: 1fr; }
  .result-tabs { flex-wrap: wrap; }
  .tbc-label   { min-width: 120px; }
  .compare-name { min-width: 100px; }
  .ph-right    { display: none; }
  .page-body   { padding: var(--space-4) var(--space-3) var(--space-10); }
  /* ws-status hidden on mobile: JS sets element.hidden = true on small screens */
}

/* ── Print / PDF export ───────────────────────────────────────────────────── */
@media print {
  .page-header, .result-tabs, .review-toolbar,
  .action-buttons-row, .ph-right, .ws-status,
  #toast, .skip-link { display: none !important; }

  .tab-panel { display: block !important; animation: none !important; page-break-inside: avoid; }
  .tab-panel + .tab-panel { margin-top: var(--space-6); }

  /* Print headings injected via CSS ::before so the DOM is unchanged */
  #tab-section::before  { content: 'Section-wise Analysis'; }
  #tab-topic::before    { content: 'Topic-wise Analysis';   }
  #tab-time::before     { content: 'Time Analysis';         }
  #tab-benchmark::before{ content: 'Benchmark Comparison';  }
  #tab-review::before   { content: 'Answer Review';         }
  #tab-section::before, #tab-topic::before, #tab-time::before,
  #tab-benchmark::before, #tab-review::before {
    font-size: 1rem; font-weight: 700; color: var(--blue-dark); display: block;
    margin-bottom: var(--space-3); border-bottom: 2px solid var(--blue-light);
    padding-bottom: var(--space-2); page-break-after: avoid;
  }

  .score-hero   { background: var(--blue-dark) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-inside: avoid; }
  .card-header  { background: var(--blue-dark) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sec-card-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbc-bar-fill, .compare-bar-fill,
  .progress-fill, .topic-bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Page-specific print overrides — shared.css print block uses `12pt` and
     `a { text-decoration: underline }`.  Result pages suppress underlines and
     use px for tighter control. These intentionally override shared.css. */
  html, body     { overflow: visible !important; height: auto !important; }
  body           { font-size: 12px; background: #fff; }
  .result-body, #page-body { padding: 0; max-width: 100%; }
  .card          { box-shadow: none; border: 1px solid var(--grey-border); page-break-inside: avoid; }
  .review-item   { page-break-inside: avoid; }
  .result-table  { font-size: 11px; }
  a              { text-decoration: none; color: #000; } 
}

/* ─── RPSC / RSSB Scoring Banner ──────────────────────────────────────────
   Shown only for RPSC / RSSB exam types via result.js plugin.
   Hidden by default via the HTML `hidden` attribute;
   plugin calls element.hidden = false to reveal.
────────────────────────────────────────────────────────────────────────── */
#rpsc-scoring-banner {
  display: none;   /* fallback for browsers without [hidden] support */
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  color: #fff;
  border-radius: 10px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26,74,118,0.18);
}
#rpsc-scoring-banner:not([hidden]) { display: block; }

#rpsc-scoring-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.rpsc-banner-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}
.rpsc-scheme-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-2);
}
.rpsc-category-name {
  font-size: 1rem; font-weight: 700; margin-bottom: var(--space-3); color: #fff;
}
.rpsc-scheme-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rpsc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 99px; font-size: 0.8rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1);
  color: #fff; white-space: nowrap;
}
.rpsc-pill-correct { border-color: var(--rpsc-pill-correct-border); background: var(--rpsc-pill-correct-bg); }
.rpsc-pill-wrong   { border-color: var(--rpsc-pill-wrong-border);   background: var(--rpsc-pill-wrong-bg);   }
.rpsc-pill-blank   { border-color: var(--rpsc-pill-blank-border);   background: var(--rpsc-pill-blank-bg);   }
#rpsc-hindi-note {
  font-size: 0.75rem; color: rgba(255,255,255,0.78); margin-top: var(--space-2);
}
#rpsc-blank-warning {
  background: rgba(248,113,113,0.15); border: 1.5px solid rgba(248,113,113,0.6);
  border-radius: 8px; padding: var(--space-3) var(--space-4);
  font-size: 0.82rem; color: var(--rpsc-warning-text); margin-top: var(--space-3); line-height: 1.55;
}
#rpsc-blank-warning strong { color: var(--rpsc-warning-strong); }
.rpsc-banner-icon {
  font-size: 3rem; opacity: 0.18; align-self: center;
  flex-shrink: 0; user-select: none; pointer-events: none;
}

@media (max-width: 600px) {
  #rpsc-scoring-banner { padding: var(--space-4); }
  .rpsc-pill           { font-size: 0.72rem; padding: 4px 10px; }
  .rpsc-banner-icon    { display: none; }
}

@media print {
  
  #rpsc-scoring-banner:not([hidden]) {
    display: block !important;
    background: var(--rpsc-print-bg) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
  }
  #rpsc-blank-warning:not([hidden]) { display: block !important; }
}