/*
 * MyRI brand stylesheet — Review Innovations colors and type, in a light
 * theme (the default) and a dark theme.
 *
 * How the two themes work: <html data-bs-theme="light|dark"> is the one
 * switch. templates/_theme_head.html sets it before the page paints
 * (light unless the visitor picked dark), static/js/theme.js flips it
 * when the navbar's theme button is clicked. Bootstrap reads the same
 * attribute for its own components; this file then pins Bootstrap's
 * variables and the site's own tokens to the RI palette for each theme.
 *
 * Rule for every other stylesheet and template: never write a color
 * directly — use a token from this file, so both themes stay correct.
 *
 * Loaded AFTER Bootstrap (see templates/base.html), so these rules win
 * on equal specificity. Text/background pairings hold WCAG AA contrast
 * (4.5:1 for body text) in both themes.
 */

/* ======================================================================
   1. RI palette — the fixed brand colors, the same in both themes.
   ====================================================================== */
:root {
  --ri-primary: #1c7100; /* Primary green */
  --ri-secondary: #fcfc00; /* Secondary yellow */
  --ri-deep-green: #003800; /* Deep green text */
  --ri-accent: #169b00; /* Accent green */
  --ri-bg-green: #e7f2e7; /* BG green element */
  --ri-bg-light-green: #f9fdf9; /* BG light green */
  --ri-white: #ffffff; /* White element */
  --ri-transparent: #02010100; /* Transparent */
  --ri-bg-yellow: #f8f8f3; /* BG yellow element */
  --ri-overlay: #000000cc; /* Overlay BG */
  --ri-dark: #001c01; /* Dark green from the brand sheet (not used as a surface) */

  /* Type — Poppins everywhere. */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fw-body: 300; /* Body: Light */
  --fw-accent: 500; /* Accent text: Medium */
  --fw-heading: 600; /* Headings: Semi Bold */

  --radius: 0.5rem; /* cards, panels */
  --radius-sm: 0.375rem; /* buttons, inputs */
}

/* ======================================================================
   2. Theme tokens — what each role maps to in light and in dark.
   ====================================================================== */

/* ---- Light theme (default) ------------------------------------------ */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg-canvas: var(--ri-bg-light-green); /* page background */
  --bg-surface: var(--ri-white); /* navbar */
  --bg-card: var(--ri-white); /* cards, panels, inputs */
  --bg-tint: var(--ri-bg-green); /* hover, stat tiles, hero, table stripes */
  --bg-tint-yellow: var(--ri-bg-yellow);
  --bg-footer: var(--ri-deep-green);
  --border: #d3e4d3; /* card and table lines */
  --border-strong: #729972; /* input outlines, 3.2:1 against the card */
  --shadow: 0 8px 24px rgba(0, 56, 0, 0.05);

  /* Text */
  --text-primary: var(--ri-deep-green); /* 13.4:1 on the canvas */
  --text-secondary: #2f5a2f; /* 7.9:1 */
  --text-faint: #4f734f; /* 5.3:1 — the AA floor; nothing dimmer */
  --text-on-footer: #ffffff;
  --footer-accent: var(--ri-secondary);

  /* Headings */
  --heading: var(--ri-deep-green); /* h1, h2 */
  --brand-mark: var(--ri-deep-green); /* "My RI" in the navbar */
  --heading-sub: var(--ri-primary); /* h3–h6 */
  --eyebrow: #147d00; /* small uppercase labels; accent green darkened to 5:1 */

  /* Interactive */
  --primary: var(--ri-primary); /* filled buttons */
  --primary-hover: #155600;
  --on-primary: #ffffff; /* text on a primary fill, 6.2:1 */
  --on-cta: var(--ri-secondary); /* yellow text on the one CTA per page, 5.7:1 */
  --link: var(--ri-primary); /* 6:1 on the canvas */
  --link-hover: var(--ri-deep-green);
  --focus-ring: rgba(22, 155, 0, 0.3);
  --nav-link: var(--ri-primary);
  --nav-link-hover: var(--ri-deep-green);
  --navbar-rule: var(--ri-secondary); /* yellow lines above and below the navbar */

  /* Status */
  --success: var(--ri-primary);
  --success-hover: #155600;
  --danger: #c62828; /* 5.6:1 on white; white text on it 5.6:1 */
  --danger-hover: #a31f1f;
  --on-danger: #ffffff;
  --warning: #8a6d00; /* warning TEXT on light surfaces, 4.9:1 */
  --warning-fill: var(--ri-secondary); /* warning FILL; pair with --on-warning */
  --on-warning: var(--ri-deep-green);
  --info: var(--ri-primary);
  --neutral: #5f6f5f; /* "skipped" and other neither-good-nor-bad states */
  --on-neutral: #ffffff;

  /* Inline code */
  --code-bg: var(--ri-bg-yellow);
  --code-fg: var(--ri-deep-green);
  --code-border: #dcdccb;

  /* Exam timer: calm in light, neon in dark (see exam_attempt.css) */
  --timer-ok: var(--ri-primary);
  --timer-alert: var(--danger);
  --timer-glow: 0;
}

/* ---- Dark theme -------------------------------------------------------
   A charcoal theme: neutral dark gray surfaces in three visible steps
   (page, card, raised), off-white text, and the brand green and yellow
   kept for accents only. Yellow appears in two places: the "My RI"
   wordmark and the text of the one CTA button per page. Green is the
   colour of links, small labels, badges and filled buttons; the filled
   buttons darken to the brand's deep green on hover. Every text colour
   is at least 4.5:1 on the surface it sits on; outlines at least 3:1. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg-canvas: #15191e; /* page background */
  --bg-surface: #1c2228; /* navbar */
  --bg-card: #1c2228; /* cards, panels, inputs */
  --bg-tint: #242b33; /* hover, stat tiles, hero, table stripes, card footers */
  --bg-tint-yellow: #262820; /* alerts: a faint warm tint */
  --bg-footer: #0f1216;
  --border: #2c353e; /* card and table lines */
  --border-strong: #5e6d7c; /* input outlines, 3:1 against the card */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Text — off-white, brightest to dimmest */
  --text-primary: #e6e9ed; /* 13.2:1 on the card */
  --text-secondary: #b4bcc5; /* 8.4:1 */
  --text-faint: #8f9aa8; /* 5.0:1 on the raised tint — the AA floor */
  --text-on-footer: #e6e9ed;
  --footer-accent: #f4e96a;

  /* Headings */
  --heading: #edeff2; /* h1, h2 */
  --heading-sub: #e6e9ed; /* h3–h6 */
  --brand-mark: #f4e96a; /* "My RI": the brand yellow, softened */
  --eyebrow: #7fcb6e; /* small uppercase labels, 8.2:1 */

  /* Interactive */
  --primary: #1a5e12; /* filled buttons: the brand green, deepened */
  --primary-hover: var(--ri-deep-green); /* #003800 on hover and press */
  --on-primary: #f3f6ef; /* 7.3:1 on the fill */
  --on-cta: #f4e96a; /* softened brand yellow, 6.3:1 on the fill */
  --link: #7ed46a; /* 9.7:1 on the page */
  --link-hover: #9fe38f;
  --focus-ring: rgba(126, 212, 106, 0.35);
  --nav-link: #b4bcc5;
  --nav-link-hover: #e6e9ed;
  --navbar-rule: var(--border); /* no yellow stripes in the dark theme */

  /* Status */
  --success: #1a5e12;
  --success-hover: var(--ri-deep-green);
  --danger: #c73d31;
  --danger-hover: #a9301f;
  --on-danger: #fff4f2; /* 4.7:1 */
  --warning: #f2d35c; /* warning TEXT, 10.9:1 on the card */
  --warning-fill: #f4e96a; /* warning FILL; pair with --on-warning */
  --on-warning: var(--ri-deep-green);
  --info: #7ed46a;
  --neutral: #5c6670;
  --on-neutral: #f3f6ef;

  /* Inline code */
  --code-bg: #11151a;
  --code-fg: #e6e9ed;
  --code-border: #2c353e;

  /* Exam timer */
  --timer-ok: #39ff14;
  --timer-alert: #ff5a6e;
  --timer-glow: 1;
}

/* ======================================================================
   3. Bootstrap variables — point Bootstrap's own components at the
      tokens above, so anything not restyled below still matches.
   ====================================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-weight: var(--fw-body);
  --bs-body-bg: var(--bg-canvas);
  --bs-body-color: var(--text-primary);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-faint);
  --bs-heading-color: var(--heading);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-secondary-bg: var(--bg-tint);
  --bs-tertiary-bg: var(--bg-tint);
  --bs-focus-ring-color: var(--focus-ring);
}
/* The *-rgb variables feed Bootstrap utilities such as .text-primary,
   .border-danger, .bg-body-tertiary and .text-bg-primary. They must be
   plain "r, g, b" numbers, so each theme spells them out. */
:root,
[data-bs-theme="light"] {
  --bs-body-bg-rgb: 249, 253, 249;
  --bs-body-color-rgb: 0, 56, 0;
  --bs-tertiary-bg-rgb: 231, 242, 231;
  --bs-secondary-bg-rgb: 231, 242, 231;
  --bs-primary-rgb: 28, 113, 0;
  --bs-secondary-rgb: 47, 90, 47;
  --bs-success-rgb: 28, 113, 0;
  --bs-danger-rgb: 198, 40, 40;
  --bs-warning-rgb: 138, 109, 0;
  --bs-info-rgb: 28, 113, 0;
  --bs-link-color-rgb: 28, 113, 0;
  --bs-link-hover-color-rgb: 0, 56, 0;
}
[data-bs-theme="dark"] {
  --bs-body-bg-rgb: 21, 25, 30;
  --bs-body-color-rgb: 230, 233, 237;
  --bs-tertiary-bg-rgb: 36, 43, 51;
  --bs-secondary-bg-rgb: 36, 43, 51;
  --bs-primary-rgb: 126, 212, 106;
  --bs-secondary-rgb: 180, 188, 197;
  --bs-success-rgb: 126, 212, 106;
  --bs-danger-rgb: 255, 122, 107;
  --bs-warning-rgb: 242, 211, 92;
  --bs-info-rgb: 126, 212, 106;
  --bs-link-color-rgb: 126, 212, 106;
  --bs-link-hover-color-rgb: 159, 227, 143;
}

/* ======================================================================
   4. Foundation and type
   ====================================================================== */
body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: 1rem; /* Body: 16px Light */
  /* Sticky footer: short pages still push the footer to the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}

/* Light (300) is the body weight, so "bold" steps to Semi Bold — Bootstrap's
   default "bolder" would land on 400, too faint to read as emphasis. */
b,
strong,
th,
dt {
  font-weight: var(--fw-heading);
}

/* ---- Headings -----------------------------------------------------------
   Primary heading (h1): 65px Semi Bold. Secondary heading (h2): 36px
   Semi Bold. Both shrink smoothly on narrow screens and reach their
   full size on a desktop-width window.

   Plain tag selectors on purpose: a Bootstrap size class on a heading
   (<h1 class="h3">, .display-5 …) still wins, so compact page titles
   stay compact where a template asks for that.

   Headings appear as page titles, as the auto-generated "Situation:" /
   "Solution:" headings of the question templates, and as whatever h2–h5
   an author types into a rich-text field. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-heading);
  line-height: 1.2;
}
h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.0625rem); /* up to 65px */
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); /* up to 36px */
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.375rem; /* 22px */
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}
h1,
h2,
.h1,
.h2 {
  color: var(--heading);
}
h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  color: var(--heading-sub);
}
/* A heading sized down with a Bootstrap class keeps the main heading
   color when it is the page's h1/h2. */
h1.h3,
h1.h4,
h1.h5,
h2.h4,
h2.h5 {
  color: var(--heading);
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: var(--fw-heading);
}

/* ---- Named type styles ---------------------------------------------------
   The rest of the RI type set, as classes for templates and rich text. */
.ri-accent-text {
  font-size: 1rem;
  font-weight: var(--fw-accent); /* 16px Medium */
}
.ri-box-title {
  font-size: 1.375rem; /* 22px Semi Bold, capitalized */
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}
.ri-subtitle {
  font-size: 1.375rem; /* 22px Light */
  font-weight: 300;
  line-height: 1.5;
}
.ri-special-title {
  font-size: 1rem; /* 16px Light, wide-spaced capitals */
  font-weight: 300;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.625em;
}
.ri-accent-underline {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  text-decoration: underline;
  text-transform: capitalize;
}
.ri-hero-headline {
  font-size: clamp(2.75rem, 1.5rem + 6vw, 5.3125rem); /* up to 85px */
  font-weight: 600;
  line-height: 1;
}
.ri-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--eyebrow);
}

a {
  color: var(--link);
  font-weight: var(--fw-accent);
}
a:hover,
a:focus {
  color: var(--link-hover);
}

/* Bootstrap's .text-muted / .text-secondary carry !important from its
   own stylesheet; pin them to this file's secondary text tone. */
.text-muted,
.text-secondary,
.text-body-secondary {
  color: var(--text-secondary) !important;
}
.text-success {
  color: rgb(var(--bs-success-rgb)) !important;
}
.text-danger {
  color: rgb(var(--bs-danger-rgb)) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.link-secondary {
  color: var(--text-secondary) !important;
  text-decoration-color: currentColor !important;
}
.link-secondary:hover {
  color: var(--link-hover) !important;
}
hr {
  border-color: var(--border-strong);
  opacity: 0.6;
}

/* Keyboard focus: one visible ring everywhere. */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ======================================================================
   5. Navbar and footer
   ====================================================================== */
.site-navbar {
  background-color: var(--bg-surface);
  border-top: 4px solid var(--navbar-rule);
  border-bottom: 1px solid var(--navbar-rule);
  box-shadow: 0 4px 15px rgba(0, 56, 0, 0.05);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--brand-mark);
}
.site-navbar .navbar-brand:hover,
.site-navbar .navbar-brand:focus {
  color: var(--brand-mark);
}
/* Dark theme: the 4px brand-yellow stripes become 1px hairlines. */
[data-bs-theme="dark"] .site-navbar,
[data-bs-theme="dark"] .site-footer {
  border-top-width: 1px;
}
.site-navbar .navbar-brand img {
  border-radius: 4px;
}
.site-navbar .navbar-nav .nav-link {
  color: var(--nav-link);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link:focus,
.site-navbar .navbar-nav .nav-link.active {
  color: var(--nav-link-hover);
}
/* A menu label never breaks over two lines. Between the width where the
   menu opens out and a wide screen, the links are a little smaller and
   closer together so that all of them, and the person's name, fit on
   one row. */
.site-navbar .navbar-nav .nav-link {
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-navbar .navbar-nav .nav-link {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.8125rem;
  }
  .site-navbar .navbar-brand {
    margin-right: 0.5rem;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-navbar .navbar-nav .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}
.site-navbar .navbar-toggler {
  border-color: var(--border-strong);
}

/* Theme button: moon while the light theme is on (click for dark), sun
   while the dark theme is on. static/js/theme.js does the switching. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--nav-link);
  cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--bg-tint);
  color: var(--nav-link-hover);
}
.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.theme-toggle .icon-sun {
  display: none;
}
[data-bs-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
[data-bs-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.site-footer {
  background-color: var(--bg-footer);
  color: var(--text-on-footer);
  border-top: 4px solid var(--navbar-rule);
  flex-shrink: 0;
}
.site-footer a {
  color: var(--text-on-footer);
  font-weight: 400;
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--footer-accent);
}
.footer-copyright {
  color: var(--text-on-footer);
  opacity: 0.85;
}
.footer-copyright .footer-brand {
  color: var(--footer-accent);
  font-weight: 600;
}

/* The Privacy Policy and Terms of Use (templates/core/privacy_policy.html,
   terms_of_use.html): long text, read top to bottom, so section headings
   are smaller than page titles and get room above them. */
.legal-page h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}
.legal-page p,
.legal-page li {
  line-height: 1.6;
}

/* The homepage hero (and anything else using Bootstrap's .bg-light):
   a tinted panel from the theme, not a fixed white box. */
.bg-light {
  background-color: var(--bg-tint) !important;
  color: var(--text-primary);
}

/* ======================================================================
   6. Buttons
   Ordinary "primary" actions use the green fill with light text. .btn-cta
   is the single most important action on a page (the homepage's "Take a
   Practice Exam", exam Submit, sign-in): same green, brand-yellow text,
   heavier weight — use it once per page so it keeps its meaning.
   ====================================================================== */
.btn {
  font-weight: 600;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-focus-shadow-rgb: 22, 155, 0;
}
.btn-primary {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}
.btn-cta {
  --bs-btn-color: var(--on-cta);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-cta);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-cta);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-cta);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  font-weight: 800;
}
.btn-outline-primary,
.btn-outline-info {
  --bs-btn-color: var(--link);
  --bs-btn-border-color: var(--link);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--text-faint);
  --bs-btn-disabled-border-color: var(--border-strong);
}
.btn-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: var(--bg-tint);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--bg-card);
  --bs-btn-hover-border-color: var(--text-secondary);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--bg-card);
  --bs-btn-active-border-color: var(--text-secondary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--bg-tint);
  --bs-btn-hover-border-color: var(--text-secondary);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--bg-tint);
  --bs-btn-active-border-color: var(--text-secondary);
  --bs-btn-disabled-color: var(--text-faint);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-danger {
  --bs-btn-color: var(--on-danger);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--on-danger);
  --bs-btn-hover-bg: var(--danger-hover);
  --bs-btn-hover-border-color: var(--danger-hover);
  --bs-btn-active-color: var(--on-danger);
  --bs-btn-active-bg: var(--danger-hover);
  --bs-btn-active-border-color: var(--danger-hover);
}
.btn-outline-danger {
  --bs-btn-color: rgb(var(--bs-danger-rgb));
  --bs-btn-border-color: rgb(var(--bs-danger-rgb));
  --bs-btn-hover-color: var(--on-danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--on-danger);
  --bs-btn-active-bg: var(--danger);
  --bs-btn-active-border-color: var(--danger);
}

/* ======================================================================
   7. Cards, alerts, tables, forms, dropdowns, lists, and the rest
   ====================================================================== */
.card {
  --bs-card-bg: var(--bg-card);
  --bs-card-border-color: var(--border);
  --bs-card-color: var(--text-primary);
  --bs-card-cap-bg: transparent;
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  box-shadow: var(--shadow);
}
/* Stat tiles and other tinted cards sit flat — a shadow under a tinted
   tile reads as clutter. */
.card.bg-body-tertiary {
  box-shadow: none;
}
.card-title {
  color: var(--heading);
}

/* Team cards — the front page of a signed-in person
   (templates/accounts/my_teams.html): one card per My RI Team, laid out
   three to a row by Bootstrap's grid. A green bar across the top marks
   the card as a Team; the footer names the special groups it is in. */
.team-card {
  border-top: 4px solid var(--primary);
}
.team-card .card-body {
  padding: 1.5rem;
}
.team-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--bg-tint);
  color: var(--link);
}
.team-card-eyebrow {
  margin-bottom: 0.25rem;
  color: var(--eyebrow);
  font-size: 0.75rem;
  font-weight: var(--fw-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-card-name {
  margin-bottom: 0.5rem;
  /* A Team name is one long label ("CE NOV 2026 REV - MNL"); let it
     wrap anywhere rather than push the card wider than its column. */
  overflow-wrap: anywhere;
}
/* The Team name on a card is the link that opens the Team (it is
   stretched over the whole card), but it should read as a heading, not
   as an underlined link. The card lifts a little under the pointer and
   shows the focus ring when reached with the keyboard. */
.team-card-name a {
  color: inherit;
  text-decoration: none;
}
.team-card:has(.stretched-link) {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.team-card:has(.stretched-link):hover {
  border-color: var(--border-strong);
  border-top-color: var(--primary);
  box-shadow: 0 12px 28px rgba(0, 56, 0, 0.12);
  transform: translateY(-2px);
}
.team-card:has(.stretched-link:focus-visible) {
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}
.team-card .stretched-link:focus-visible {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .team-card:has(.stretched-link),
  .team-card:has(.stretched-link):hover {
    transition: none;
    transform: none;
  }
}

/* A Team's own page (templates/accounts/team_detail.html): the header
   card, the five tabs, and the lists of people inside them. */
.team-header .card-body {
  padding: 1.5rem;
}
.team-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) transparent;
  --bs-nav-tabs-link-active-color: var(--heading);
  --bs-nav-tabs-link-active-bg: var(--bg-card);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg-card);
  --bs-nav-link-color: var(--link);
  --bs-nav-link-hover-color: var(--link-hover);
  --bs-nav-link-font-weight: var(--fw-accent);
  border-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.team-tabs .nav-link {
  white-space: nowrap;
}
/* The tabs of "From your instructors" on the front page: the look of a
   Team's page tabs (.team-tabs), the rows running edge to edge in the panel,
   the closed exams folded under a line of their own. */
.team-tab-content.instructor-panes > .tab-pane {
  padding: 0;
}
.closed-exams > summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--link);
  font-weight: var(--fw-accent);
}
.team-tab-count {
  background-color: var(--on-primary);
  color: var(--primary);
}
.closed-exams > summary {
  cursor: pointer;
  color: var(--link);
  font-weight: var(--fw-accent);
}
.team-tab-count {
  display: inline-block;
  min-width: 1.5rem;
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background-color: var(--bg-tint);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-align: center;
}
.team-tab-content {
  border-top-left-radius: 0;
}
.team-tab-content > .tab-pane {
  padding: 1.5rem;
}
/* The Exams tab: one row per exam, the whole row a link to the exam.
   On the right, for a student, their own grade. */
.team-exams {
  margin: -1.5rem; /* rows run edge to edge inside the padded tab pane */
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  overflow: hidden;
}
.team-exam {
  --bs-list-group-bg: transparent;
  padding: 1rem 1.5rem;
  transition: background-color 0.15s ease;
}
.team-exam:hover,
.team-exam:focus-within {
  background-color: var(--bg-tint);
}
.team-exam-title {
  color: var(--heading);
  font-weight: var(--fw-heading);
  text-decoration: none;
}
.team-exam-title:hover {
  color: var(--link-hover);
}
.team-exam-meta {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.team-exam-grade {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 7rem;
  line-height: 1.25;
}
.team-exam-grade-label,
.team-exam-grade-attempts {
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.team-exam-grade-value {
  color: var(--heading);
  font-size: 1.25rem;
  font-weight: var(--fw-heading);
}
.team-exam-grade-none {
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* High-stake exams at the top of the front page: a card with a green
   header, so they stand out from the ordinary lists below. A row that is
   about to close gets a red bar on its left edge. */
.highstake-card {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.highstake-head {
  background-color: var(--primary);
  color: var(--on-primary);
  padding: 0.6rem 1.5rem;
}
.highstake-head h3 {
  color: inherit;
}
.highstake-batch {
  font-weight: var(--fw-accent);
}
.highstake-kind {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.team-exam-urgent {
  box-shadow: inset 5px 0 0 var(--danger);
}

/* The exam lists on the front page: on a phone the result sits under the
   title, left-aligned, instead of hanging in from the right. */
@media (max-width: 575.98px) {
  .front-exams .team-exam-grade {
    align-items: flex-start;
    min-width: 0;
  }
}

.team-people {
  columns: 3 16rem;
  column-gap: 2rem;
}
.team-people li {
  padding: 0.3rem 0;
  break-inside: avoid;
}
.team-people-email {
  display: block;
  color: var(--text-faint);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.team-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
  background-color: var(--bg-tint);
  font-size: 0.875rem;
}
.team-card-footer-label {
  color: var(--text-secondary);
}
.team-card-group {
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-weight: var(--fw-accent);
}

/* The Question Bank pages (templates/bank/). */

/* A bank's categories, as an indented list beside its problems. */
.bank-tree-item {
  --bs-list-group-active-bg: var(--bg-tint);
  --bs-list-group-active-color: var(--text-primary);
  --bs-list-group-active-border-color: var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: calc(1rem + var(--bank-level, 0) * 1rem);
}
.bank-tree-link {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bank-tree-item.active .bank-tree-link {
  font-weight: var(--fw-heading);
}
.bank-tree-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.bank-tree-count {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.bank-tree-out {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-style: italic;
}
.bank-tree-edit {
  font-size: 0.8125rem;
}
.bank-problem-title {
  font-weight: var(--fw-accent);
  text-decoration: none;
}
.bank-problem-title:hover {
  text-decoration: underline;
}

/* A tag on a problem: a small pill. On the problem list it is a link
   that narrows the list to that tag. */
.bank-tag {
  display: inline-block;
  margin: 0.125rem 0.25rem 0.125rem 0;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--bg-tint);
  color: var(--text-primary);
  font-size: 0.75rem;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
a.bank-tag:hover {
  border-color: var(--link-hover);
  color: var(--link-hover);
}
.bank-tags {
  margin-top: 0.25rem;
}

/* The "with the ticked problems" bar above the problem list, and the
   narrow column of tick-boxes. */
.bank-bulk {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-tint);
}
.bank-tick {
  width: 2.25rem;
}
/* The tag list beside the search box: never wider than the box needs. */
@media (min-width: 576px) {
  .bank-filter-tag {
    max-width: 14rem;
  }
}

/* A list of tick-boxes in a form (Teams, categories, tags). Long lists
   scroll inside their own box instead of stretching the page. */
.bank-checks {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
}
.bank-checks .form-check-label {
  font-weight: var(--fw-body, 400);
}
.bank-checks-columns {
  columns: 2 12rem;
}
.bank-checks-columns .form-check {
  break-inside: avoid;
}

/* The report after an import: category paths with their counts. */
.bank-report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 22rem;
  column-gap: 2rem;
}
.bank-report-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}

/* The problem forms: one row per choice -- its letter and "Correct"
   radio, the text box, and Remove. */
.bank-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.bank-choice[hidden],
.bank-item[hidden] {
  display: none;
}
.bank-choice-mark {
  flex: 0 0 4.5rem;
  padding-top: 0.25rem;
}
.bank-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background-color: var(--bg-tint);
  color: var(--heading);
  font-weight: var(--fw-heading);
}
.bank-choice-text {
  flex: 1 1 auto;
  min-width: 0;
}
.bank-slot-remove {
  flex: 0 0 auto;
}
.bank-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 -0.75rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background-color: var(--bg-canvas);
}
@media (max-width: 575.98px) {
  .bank-choice {
    flex-wrap: wrap;
  }
  .bank-choice-mark {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .bank-choice-text {
    flex-basis: 100%;
  }
}

/* A problem's own page: the choices as a student sees them, the correct
   one marked. */
.bank-preview-choices {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bank-preview-choices li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.bank-preview-choices li.is-correct {
  border-color: var(--success);
  background-color: var(--bg-tint);
}
.bank-preview-choices .rtf-content > :last-child {
  margin-bottom: 0;
}
.bank-preview-letter {
  flex: 0 0 auto;
  font-weight: var(--fw-heading);
  color: var(--heading);
}
.bank-preview-item + .bank-preview-item {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.alert {
  --bs-alert-color: var(--text-primary);
  --bs-alert-link-color: var(--link);
  font-weight: 400;
}
.alert-info,
.alert-success {
  --bs-alert-bg: var(--bg-tint);
  --bs-alert-border-color: var(--success);
}
.alert-secondary {
  --bs-alert-bg: var(--bg-tint-yellow);
  --bs-alert-border-color: var(--border-strong);
}
.alert-warning {
  --bs-alert-bg: color-mix(in srgb, var(--warning-fill) 22%, var(--bg-card));
  --bs-alert-border-color: color-mix(in srgb, var(--warning-fill) 70%, var(--text-primary));
}
.alert-danger {
  --bs-alert-bg: color-mix(in srgb, var(--danger) 12%, var(--bg-card));
  --bs-alert-border-color: var(--danger);
}

table {
  color: var(--text-primary);
  border-color: var(--border);
}
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bg-tint);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-tint);
  --bs-table-hover-color: var(--text-primary);
}
.table thead th {
  color: var(--heading);
  border-bottom-color: var(--border-strong);
}
.table-success {
  --bs-table-bg: color-mix(in srgb, var(--success) 18%, var(--bg-card));
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
}

label,
.form-label {
  font-weight: var(--fw-accent);
}
.form-control,
.form-select {
  background-color: var(--bg-card);
  border-color: var(--border-strong);
  color: var(--text-primary);
  font-weight: 400;
}
.form-control::placeholder {
  color: var(--text-faint);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-card);
  border-color: var(--link);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--bg-tint);
  color: var(--text-faint);
}
.form-text {
  color: var(--text-secondary);
}
.form-check-input {
  background-color: var(--bg-card);
  border-color: var(--border-strong);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bg-card);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--bg-tint);
  --bs-dropdown-link-active-color: var(--on-primary);
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-divider-bg: var(--border);
  box-shadow: var(--shadow);
}
.dropdown-item {
  font-weight: 400;
}

.list-group {
  --bs-list-group-bg: var(--bg-card);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-action-color: var(--text-primary);
  --bs-list-group-action-hover-color: var(--text-primary);
  --bs-list-group-action-hover-bg: var(--bg-tint);
  --bs-list-group-action-active-color: var(--text-primary);
  --bs-list-group-action-active-bg: var(--bg-tint);
  --bs-list-group-active-color: var(--on-primary);
  --bs-list-group-active-bg: var(--primary);
  --bs-list-group-active-border-color: var(--primary);
}
/* Links and <label>s are Medium by default; as list rows (article
   lists, answer choices) they read better at regular weight. */
a.list-group-item,
label.list-group-item {
  font-weight: 400;
}
a.list-group-item:hover,
a.list-group-item:focus,
label.list-group-item:hover {
  background-color: var(--bg-tint);
  color: var(--text-primary);
}

.badge {
  font-weight: 600;
}
.text-bg-primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
.text-bg-success {
  background-color: var(--success) !important;
  color: var(--on-primary) !important;
}
/* Dark theme: a quiet pill — deep green tint, green text, green edge —
   instead of a solid fill, so a badge does not compete with buttons. */
[data-bs-theme="dark"] .text-bg-success {
  background-color: var(--ri-deep-green) !important;
  color: var(--link) !important;
  border: 1px solid var(--primary);
}
.text-bg-secondary {
  background-color: var(--bg-tint) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong);
}
/* "Opens later", "Not open yet", "Used in an exam": Bootstrap puts black
   text on the green info colour, unreadable on the dark green. A soft tint
   with the body text and a green outline reads in both themes. */
.text-bg-info {
  background-color: var(--bg-tint) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--primary);
}
/* "In progress": the brand yellow with deep green text, in both themes. */
.text-bg-warning {
  background-color: var(--warning-fill) !important;
  color: var(--on-warning) !important;
}
/* "Closing soon" on an Evaluation Exam a student has not started. */
.badge-closing-soon {
  background-color: var(--danger);
  color: var(--on-danger);
}

.pagination {
  --bs-pagination-bg: var(--bg-card);
  --bs-pagination-color: var(--link);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--bg-tint);
  --bs-pagination-hover-color: var(--link-hover);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-focus-bg: var(--bg-tint);
  --bs-pagination-focus-color: var(--link-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-color: var(--on-primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-disabled-bg: var(--bg-card);
  --bs-pagination-disabled-color: var(--text-faint);
  --bs-pagination-disabled-border-color: var(--border);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--text-faint);
  --bs-breadcrumb-item-active-color: var(--text-secondary);
}

.progress {
  --bs-progress-bg: var(--bg-tint);
  --bs-progress-bar-bg: var(--primary);
  --bs-progress-bar-color: var(--on-primary);
}

.modal {
  --bs-modal-bg: var(--bg-card);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
}
.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.8; /* the RI overlay tone */
}

/* core.editor_widget.BUHtmlWidget (static/css/admin/bu_editor.css) is
   used outside the admin by accounts.forms.ProfileForm's Bio field. That
   stylesheet reads Django-admin CSS variables (--border-color,
   --darkened-bg, --body-bg, --body-fg, --selected-bg), which are absent
   on the front end — remapping them to this file's tokens here (rather
   than editing the shared admin stylesheet) keeps the toolbar readable
   in both themes. */
.bu-editor {
  --border-color: var(--border-strong);
  --darkened-bg: var(--bg-tint);
  --body-bg: var(--bg-card);
  --body-fg: var(--text-primary);
  --selected-bg: var(--bg-tint);
}

/* Plain checkboxes, radios and the navbar's menu button take the brand
   green instead of the browser's default blue/gray. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* "Create Your Exam": the category picker (templates/exams/generate_exam.html,
   static/js/generate_exam_picker.js). One fold-out section per category;
   the open one is outlined, and a section with picks in it shows a count. */
.cat-picker {
  max-width: 40rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-card);
  overflow: hidden;
}
.cat-group + .cat-group,
.cat-whole-bank + .cat-group {
  border-top: 1px solid var(--border);
}
.cat-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cat-group-head:hover,
.cat-group-open > .cat-group-head {
  background: var(--bg-tint);
}
.cat-group-head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.cat-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.cat-group-head[aria-expanded="true"] .cat-chevron {
  transform: rotate(45deg);
}
.cat-group-name {
  flex: 1;
}
.cat-group-count {
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.cat-group-panel {
  padding: 0.4rem 0.9rem 0.8rem 2rem;
}
.cat-node {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.cat-node .form-check-input {
  flex: none;
  margin-top: 0;
  position: relative;
  top: 0.15em;
}
.cat-node-all {
  font-weight: 500;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.cat-whole-bank,
.cat-group-leaf {
  padding: 0.7rem 0.9rem;
  font-weight: 600;
}
.cat-node-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cat-picked {
  color: var(--text-secondary);
}

/* An exam's page, "Exam Stat": the three number boxes, the Top 10, and
   the Item Analysis cards (templates/exams/exam_detail.html,
   _item_analysis.html). */
.stat-box-label {
  color: var(--text-secondary);
}
.stat-box-number {
  color: var(--heading-sub);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.stat-box-note {
  color: var(--text-faint);
  font-size: 0.875rem;
  min-height: 1.3em;
}
.top-ten {
  max-width: 40rem;
}
.item-analysis-lead {
  color: var(--link);
}
.item-analysis-question summary {
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
}
.item-analysis-table th,
.item-analysis-table td {
  padding: 0.3rem 0.9rem 0.3rem 0;
  vertical-align: baseline;
}
.item-analysis-table th {
  font-weight: 500;
  white-space: nowrap;
}
.item-analysis-table .ia-text .rtf-content > :last-child {
  margin-bottom: 0;
}
.item-analysis-table .ia-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.item-analysis-table .ia-tick {
  color: var(--text-secondary);
}
/* A choice's color goes by its place among the choices, the same on
   every item; "Skipped" (slot 0) is the neutral gray. The six hues are
   a set checked for telling apart by people with color-blindness, in
   this order, against both the light and the dark card. */
.ia-slot-0 { --ia-color: var(--neutral); }
.ia-slot-1 { --ia-color: #2a78d6; }
.ia-slot-2 { --ia-color: #eb6834; }
.ia-slot-3 { --ia-color: #1baf7a; }
.ia-slot-4 { --ia-color: #eda100; }
.ia-slot-5 { --ia-color: #e87ba4; }
.ia-slot-6 { --ia-color: #008300; }
[data-bs-theme="dark"] .ia-slot-1 { --ia-color: #3987e5; }
[data-bs-theme="dark"] .ia-slot-2 { --ia-color: #d95926; }
[data-bs-theme="dark"] .ia-slot-3 { --ia-color: #199e70; }
[data-bs-theme="dark"] .ia-slot-4 { --ia-color: #c98500; }
[data-bs-theme="dark"] .ia-slot-5 { --ia-color: #d55181; }
.ia-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--ia-color);
}
.ia-ring {
  width: 100%;
  max-width: 15rem;
  overflow: visible;
}
.ia-ring circle {
  fill: none;
  stroke: var(--ia-color);
  stroke-width: 11;
}
.ia-ring text {
  fill: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.item-responses td:first-child,
.item-responses th:first-child {
  width: 4rem;
}


/* An exam's Exam Stat, Percentile tab (templates/exams/_exam_percentile.html):
   the viewer's own place on a 0-100 track, and the band table. */
.percentile-you {
  border-color: var(--link);
  background-color: var(--bg-tint);
}
.percentile-you-note {
  color: var(--text-secondary);
}
.percentile-track {
  position: relative;
  height: 0.75rem;
  border-radius: 999px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
}
.percentile-fill {
  height: 100%;
  border-radius: 999px;
  background-color: var(--link);
  opacity: 0.35;
}
.percentile-marker {
  position: absolute;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--link);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--link);
}
.percentile-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  color: var(--text-faint);
  font-size: 0.75rem;
}
.percentile-table {
  max-width: 40rem;
}
.percentile-people {
  max-width: 52rem;
}
.percentile-table tr.percentile-mine > *,
.percentile-people tr.percentile-mine > * {
  background-color: var(--bg-tint);
  font-weight: var(--fw-accent);
}
.percentile-bar-col {
  width: 35%;
}
.percentile-bar {
  height: 0.75rem;
  min-width: 1px;
  border-radius: 3px;
  background-color: var(--link);
}
.percentile-table tr:not(.percentile-mine) .percentile-bar {
  opacity: 0.55;
}