/* ============================================================
   APUSH Skills Lab — page styles.

   This layers on top of assets/css/main.css and deliberately owns
   NO palette of its own. Every colour below resolves to a main.css
   token (--cyan, --green, --heading, --body, --hair, --glass …), so
   the Lab inherits the site's dark navy + electric cyan identity and
   changes with it. It shipped originally with a parallel light-mode
   system — #f8fafb page, #2563eb blue, Georgia body text, 18px radii
   — which read as a different website bolted onto the same nav.

   Two rules if you edit this file:
   1. Reach for a main.css token. Do not introduce a hex value unless
      it is a one-off wash you can justify.
   2. Radii come from --r / --r-lg (4px / 6px). The near-square corner
      is a deliberate brand choice, not an oversight.

   The pages load circuit.js like every other page. That canvas is
   TRANSPARENT — it only draws nodes — so the body still has to carry
   --bg. Setting it transparent "to let the wallpaper through" drops
   the page to browser white; see the note on body.hl-shell below.
   ============================================================ */

:root {
  /* Semantic aliases → main.css tokens. Kept as --hl-* so the rules
     below read the same as before, but there is one source of truth. */
  --hl-primary: var(--cyan);
  --hl-primary-dark: var(--cyan-2);
  --hl-accent: var(--green);
  --hl-accent-text: var(--green);
  --hl-text: var(--heading);
  --hl-muted: var(--body);
  --hl-error: #F2776B;          /* matches the form-error red used on the homepage */
  --hl-border: var(--hair);
  --hl-surface: var(--glass);
  --hl-surface-2: var(--glass-2);

  /* The primary-source "document" surface. Warm enough to read as an
     artifact next to the cool UI, dark enough not to glare. */
  --hl-paper: #14161a;
  --hl-paper-ink: #DED6C6;
  --hl-paper-edge: rgba(222, 214, 198, 0.16);
  --hl-paper-rule: rgba(222, 214, 198, 0.07);

  --hl-blue-wash: rgba(34, 184, 230, 0.09);
  --hl-green-wash: rgba(111, 224, 123, 0.09);
  --hl-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
  --hl-radius: var(--r-lg);
  --hl-serif: Georgia, "Times New Roman", serif;
  --hl-sans: var(--f-body);
  --hl-head: var(--f-head);
}

* {
  box-sizing: border-box;
}

/* The body MUST carry --bg. circuit.js does not paint a backdrop — it draws
   nodes onto a transparent canvas pinned at z-index:-4, and negative-z children
   paint above their parent's background, so the dark navy has to come from
   here. Setting this to transparent drops the whole page through to browser
   white and every section turns into light-grey text on white. */
body.hl-shell {
  background: var(--bg);
  color: var(--hl-muted);
  font-family: var(--hl-sans);
}

.hl-skip {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--r);
  color: #04222b;
  background: var(--grad);
  font-family: var(--hl-head);
  font-weight: 600;
  transform: translateY(-150%);
}

.hl-skip:focus {
  transform: translateY(0);
}

.hl-shell .nav__toggle {
  min-width: 44px;
  min-height: 44px;
}

.hl-shell main {
  position: relative;
  z-index: 1;
  min-height: 70vh;
}

.hl-wrap {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
}

.hl-reading {
  width: min(780px, calc(100% - 40px));
  margin-inline: auto;
}

.hl-section {
  padding: clamp(56px, 8vw, 104px) 0;
}

.hl-section--tight {
  padding: clamp(36px, 5vw, 64px) 0;
}

/* Was a navy slab punched into a white page. On a dark site the same
   job — "this band is different" — is done by lifting it, not darkening. */
.hl-section--ink {
  position: relative;
  border-block: 1px solid var(--hair);
  color: var(--heading);
  background:
    radial-gradient(circle at 8% 20%, rgba(34, 184, 230, 0.10), transparent 26rem),
    radial-gradient(circle at 90% 80%, rgba(111, 224, 123, 0.08), transparent 24rem),
    var(--panel);
}

.hl-shell .hl-section--ink h1,
.hl-shell .hl-section--ink h2,
.hl-shell .hl-section--ink h3 {
  color: var(--heading);
}

.hl-kicker,
.hl-overline {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--cyan);
  font-family: var(--hl-head);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* The eyebrow rule from main.css, so kickers read as the same element. */
.hl-kicker::before,
.hl-overline::before {
  width: 26px;
  height: 1px;
  background: var(--cyan);
  opacity: .6;
  content: "";
}

.hl-section--ink .hl-kicker,
.hl-section--ink .hl-overline {
  color: var(--cyan-2);
}

.hl-shell h1,
.hl-shell h2,
.hl-shell h3 {
  color: var(--hl-text);
  font-family: var(--hl-head);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hl-shell h1 {
  max-width: 17ch;
  margin: 16px 0 20px;
  font-size: clamp(2.35rem, 7vw, 5.6rem);
  line-height: 0.98;
}

.hl-shell h2 {
  font-size: clamp(1.85rem, 4vw, 3.15rem);
  line-height: 1.08;
}

.hl-shell h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
}

.hl-lede {
  max-width: 64ch;
  color: var(--hl-muted);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.72;
}

.hl-section--ink .hl-lede {
  color: var(--body);
}

.hl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Same visual language as main.css .btn, scoped so the Lab's buttons
   and the nav CTAs are recognisably the same control. */
.hl-button,
.hl-shell a.hl-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .55em;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r);
  padding: 12px 18px;
  color: var(--heading);
  background: var(--glass);
  backdrop-filter: blur(6px);
  cursor: pointer;
  font: 600 0.94rem/1.2 var(--hl-head);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease);
}

.hl-button:hover {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 22px -6px var(--glow-cyan);
  transform: translateY(-2px);
}

/* main.css already defines a high-contrast focus ring; don't fight it. */
.hl-button:focus-visible,
.hl-text-button:focus-visible,
.hl-reason:focus-visible,
.hl-shell a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan), 0 0 16px var(--glow-cyan);
}

.hl-button--primary,
.hl-shell a.hl-button--primary {
  color: #04222b;
  border-color: transparent;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(34, 184, 230, .4), 0 6px 26px -8px var(--glow-cyan);
}

.hl-button--primary:hover {
  color: #04222b;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(111, 224, 123, .6), 0 10px 40px -8px var(--glow-green);
}

.hl-button--secondary,
.hl-shell a.hl-button--secondary {
  border-color: var(--hair-strong);
  background: var(--glass);
}

.hl-section--ink .hl-button--secondary {
  border-color: var(--hair-strong);
  color: var(--heading);
  background: var(--glass-2);
}

.hl-breadcrumbs {
  padding: 20px 0;
  color: var(--body);
  font-family: var(--hl-head);
  font-size: 0.8rem;
}

.hl-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-breadcrumbs li:not(:last-child)::after {
  margin-left: 7px;
  color: var(--muted);
  content: "/";
}

.hl-breadcrumbs a {
  color: var(--cyan-2);
}

.hl-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 10vw, 130px) 0;
}

.hl-hero::after {
  position: absolute;
  inset: auto -10% -55% 42%;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(34, 184, 230, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(34, 184, 230, 0.035),
    0 0 0 150px rgba(111, 224, 123, 0.02);
  content: "";
  pointer-events: none;
}

.hl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(36px, 8vw, 96px);
  align-items: center;
}

.hl-proof-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--glass);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(10px);
}

.hl-proof-card::before {
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: var(--grad);
  content: "";
}

.hl-proof-card p {
  color: var(--body);
  line-height: 1.65;
}

.hl-proof-card strong {
  display: block;
  margin-top: 20px;
  color: var(--heading);
  font-family: var(--hl-head);
  font-size: 1.9rem;
  letter-spacing: -.02em;
}

.hl-grid {
  display: grid;
  gap: 20px;
}

.hl-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hl-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Route cards. auto-fit rather than a fixed 3, so a fourth card fills the row
   instead of orphaning on its own line. */
.hl-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

.hl-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--hl-radius);
  padding: clamp(22px, 4vw, 34px);
  background: var(--glass);
  backdrop-filter: blur(10px);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}

a.hl-card {
  color: inherit;
  text-decoration: none;
}

a.hl-card:hover {
  border-color: var(--hair-strong);
  background: var(--glass-2);
  transform: translateY(-3px);
}

.hl-card p {
  color: var(--hl-muted);
  line-height: 1.65;
}

/* Carries either a numeral ("01") or a word ("Guide"), so it has to be a chip
   that grows, not a fixed 38px box — the words were spilling out of the square. */
.hl-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 30px;
  margin-bottom: 22px;
  padding: 5px 11px;
  border: 1px solid rgba(34, 184, 230, .28);
  border-radius: var(--r);
  color: var(--cyan-2);
  background: var(--hl-blue-wash);
  font-family: var(--hl-head);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.hl-card__link {
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-weight: 600;
}

.hl-skill-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.hl-skill-map span,
.hl-skill-map__item {
  min-height: 82px;
  padding: 14px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  color: var(--body);
  background: var(--glass);
  font-family: var(--hl-head);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
}

.hl-skill-map__item {
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.hl-skill-map__item:hover {
  border-color: var(--hair-strong);
  background: var(--glass-2);
  transform: translateY(-2px);
}

.hl-skill-map__item[aria-expanded="true"] {
  border-color: rgba(34, 184, 230, .5);
  background: var(--hl-blue-wash);
  box-shadow: 0 0 22px -10px var(--glow-cyan);
}

.hl-skill-map b {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan-2);
  font-size: 1rem;
}

/* No JS: every panel is visible, so the content still reads as a list.
   skill-map.js sets data-enhanced and takes over from there. */
.hl-skill-detail {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.hl-skill-detail[data-enhanced] {
  display: block;
  margin-top: 14px;
}

.hl-skill-detail[data-enhanced] .hl-skill-panel {
  display: none;
}

.hl-skill-detail[data-enhanced] .hl-skill-panel.is-active {
  display: block;
  animation: hlSkillIn .28s var(--ease) both;
}

@keyframes hlSkillIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.hl-skill-panel {
  border: 1px solid var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(18px, 3vw, 26px);
  background: var(--glass);
}

.hl-shell .hl-skill-panel h3 {
  margin-bottom: 10px;
  color: var(--heading);
  font-size: 1.1rem;
}

.hl-skill-panel p {
  color: var(--body);
  font-size: .96rem;
  line-height: 1.65;
}

.hl-skill-panel p + p {
  margin-top: 12px;
}

.hl-skill-panel__miss {
  color: var(--muted);
}

.hl-skill-panel__miss b {
  color: var(--hl-error);
}

@media (prefers-reduced-motion: reduce) {
  .hl-skill-detail[data-enhanced] .hl-skill-panel.is-active { animation: none; }
}

.hl-article {
  padding: 42px 0 88px;
}

.hl-article__header {
  margin-bottom: 42px;
}

.hl-article__header h1 {
  max-width: 18ch;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
}

.hl-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  color: var(--body);
  font-family: var(--hl-head);
  font-size: 0.8rem;
}

.hl-prose {
  color: var(--body);
  font-family: var(--hl-sans);
  font-size: 1.04rem;
  line-height: 1.8;
}

/* main.css zeroes p margins globally, so long-form paragraphs butt together
   and read as one block. Restore the gap here rather than site-wide. */
.hl-prose p + p,
.hl-prose ul,
.hl-prose ol {
  margin-top: 1.15em;
}

.hl-prose h2,
.hl-prose h3 {
  margin: 2.2em 0 0.7em;
  font-family: var(--hl-head);
}

.hl-prose strong {
  color: var(--heading);
}

.hl-prose a {
  color: var(--cyan-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hl-prose ul,
.hl-prose ol {
  padding-left: 1.4em;
}

.hl-note,
.hl-callout {
  margin: 24px 0;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 20px;
  color: var(--body);
  background: var(--hl-blue-wash);
  font: 0.95rem/1.6 var(--hl-sans);
}

.hl-note strong {
  color: var(--heading);
}

/* The primary-source document. Deliberately the one place with its own
   surface and a serif face — students should feel they are reading an
   artifact, not more interface. */
.hl-paper {
  position: relative;
  margin: 30px 0;
  border: 1px solid var(--hl-paper-edge);
  border-radius: var(--r) var(--r-lg) var(--r-lg) var(--r);
  padding: clamp(24px, 5vw, 42px);
  color: var(--hl-paper-ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, var(--hl-paper-rule) 28px),
    var(--hl-paper);
  box-shadow: var(--hl-shadow);
  font-family: var(--hl-serif);
}

.hl-paper::before {
  position: absolute;
  inset: 0 auto 0 20px;
  border-left: 1px solid rgba(242, 119, 107, 0.22);
  content: "";
}

.hl-paper blockquote {
  margin: 0;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.72;
}

.hl-paper blockquote p + p {
  margin-top: 1em;
}

.hl-paper b {
  color: #fff;
  font-family: var(--hl-head);
  font-size: .82em;
  letter-spacing: .04em;
}

.hl-paper cite {
  display: block;
  margin-top: 18px;
  color: rgba(222, 214, 198, 0.62);
  font: 0.78rem/1.5 var(--hl-sans);
}

.hl-paper cite a {
  color: var(--cyan-2);
}

.hl-topic-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 38px;
  align-items: center;
}

.hl-product-card {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--hl-radius);
  background: var(--glass);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(10px);
}

.hl-product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2);
}

.hl-product-card__body {
  padding: 22px;
}

.hl-product-card__body p {
  color: var(--hl-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.hl-product-card__price {
  display: block;
  margin: 14px 0;
  color: var(--heading);
  font-family: var(--hl-head);
  font-size: 1.5rem;
  font-weight: 700;
}

.hl-inline-practice {
  display: grid;
  gap: 16px;
}

.hl-mini-case {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--glass);
}

.hl-mini-case summary {
  cursor: pointer;
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-weight: 600;
}

.hl-mini-case blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 3px solid var(--hair-strong);
  color: var(--body);
  font-family: var(--hl-serif);
}

.hl-mini-case p strong {
  color: var(--heading);
}

.hl-decoder {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100% - 32px));
  margin: 44px auto 90px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(18px, 4vw, 38px);
  background: rgba(13, 22, 32, 0.72);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(14px);
}

.hl-decoder__top,
.hl-rail__heading {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.hl-decoder__top h2 {
  margin: 6px 0 0;
  font-size: clamp(1.45rem, 4vw, 2.35rem);
}

.hl-text-button {
  border: 0;
  padding: 8px;
  color: var(--body);
  background: transparent;
  cursor: pointer;
  font-family: var(--hl-head);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hl-text-button:hover {
  color: var(--cyan-2);
}

.hl-rail {
  margin: 28px 0;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 18px;
  background: var(--glass);
}

.hl-rail__heading strong {
  display: block;
  margin-top: 3px;
  color: var(--hl-text);
  font-family: var(--hl-head);
}

.hl-rail__legend {
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--glass-2);
  font-family: var(--hl-head);
  font-size: 0.7rem;
  font-weight: 500;
}

.hl-rail__cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.hl-rail__cell {
  min-width: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 10px;
  background: var(--glass);
}

.hl-rail__mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--glass-2);
  font-family: var(--hl-head);
  font-weight: 700;
}

.hl-rail__label,
.hl-rail__status {
  display: block;
  overflow-wrap: anywhere;
}

.hl-rail__label {
  color: var(--hl-text);
  font-family: var(--hl-head);
  font-size: 0.75rem;
  font-weight: 600;
}

.hl-rail__status {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
}

.hl-rail__cell--practiced {
  border-color: rgba(34, 184, 230, 0.4);
  background: var(--hl-blue-wash);
}

.hl-rail__cell--practiced .hl-rail__mark {
  color: #04222b;
  background: var(--cyan);
}

.hl-rail__cell--confirmed {
  border-color: rgba(111, 224, 123, 0.45);
  background: var(--hl-green-wash);
}

.hl-rail__cell--confirmed .hl-rail__mark {
  color: #04222b;
  background: var(--green);
}

.hl-decoder__stage {
  min-height: 410px;
}

.hl-briefing,
.hl-case,
.hl-diagnosis {
  outline: none;
}

.hl-briefing {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px) 0;
  text-align: center;
}

/* The kicker's leading rule looks wrong centred, so drop it here. */
.hl-briefing .hl-overline::before,
.hl-diagnosis .hl-overline::before {
  display: none;
}

.hl-briefing p,
.hl-diagnosis > p {
  color: var(--hl-muted);
  line-height: 1.65;
}

.hl-briefing__rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0;
}

.hl-briefing__rules div {
  padding: 16px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--glass);
}

.hl-briefing__rules strong,
.hl-briefing__rules span {
  display: block;
}

.hl-briefing__rules strong {
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-size: 1.7rem;
}

.hl-briefing__rules span {
  color: var(--muted);
  font-size: 0.72rem;
}

.hl-case {
  max-width: 820px;
  margin: 0 auto;
}

.hl-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
  color: var(--muted);
  font-family: var(--hl-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Student writing under examination — same document surface as a source. */
.hl-case blockquote {
  margin: 0 0 24px;
  border: 1px solid var(--hl-paper-edge);
  border-radius: var(--r) var(--r-lg) var(--r-lg) var(--r);
  padding: clamp(24px, 5vw, 42px);
  color: var(--hl-paper-ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 29px, var(--hl-paper-rule) 30px),
    var(--hl-paper);
  box-shadow: var(--hl-shadow);
  font: clamp(1.02rem, 2vw, 1.2rem)/1.72 var(--hl-serif);
}

.hl-verdict,
.hl-reasons {
  margin: 0;
  border: 0;
  padding: 0;
}

.hl-verdict legend,
.hl-reasons legend {
  margin-bottom: 14px;
  color: var(--hl-text);
  font-family: var(--hl-head);
  font-weight: 600;
}

.hl-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hl-button--judge {
  border-color: var(--hair-strong);
  background: var(--glass);
}

.hl-button--judge:hover {
  border-color: var(--cyan);
  background: var(--hl-blue-wash);
}

.hl-reason-list {
  display: grid;
  gap: 10px;
}

.hl-reason {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 15px 17px;
  color: var(--heading);
  background: var(--glass);
  cursor: pointer;
  font: 400 0.93rem/1.5 var(--hl-sans);
  text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.hl-reason:hover {
  border-color: var(--cyan);
  background: var(--hl-blue-wash);
}

.hl-correct {
  color: var(--green);
}

.hl-incorrect {
  color: var(--hl-error);
}

.hl-explanation {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 42px);
  background: var(--glass);
}

.hl-explanation p {
  color: var(--hl-muted);
  line-height: 1.65;
}

.hl-explanation strong {
  color: var(--heading);
}

.hl-stamp {
  display: inline-block;
  margin-bottom: 14px;
  border: 2px solid currentColor;
  border-radius: var(--r);
  padding: 5px 9px;
  font-family: var(--hl-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.hl-stamp--confirmed {
  color: var(--green);
}

.hl-stamp--revise {
  color: var(--hl-error);
}

.hl-explanation__actions {
  margin-top: 22px;
}

.hl-diagnosis {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(6px, 1vw, 12px);
}

.hl-diagnosis__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.hl-diagnosis__grid div {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 14px;
  background: var(--glass);
}

.hl-diagnosis__grid span,
.hl-diagnosis__grid strong,
.hl-diagnosis__grid small {
  display: block;
}

.hl-diagnosis__grid span {
  min-height: 2.6em;
  color: var(--body);
  font-family: var(--hl-head);
  font-size: 0.76rem;
  font-weight: 500;
}

.hl-diagnosis__grid strong {
  margin: 6px 0;
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-size: 1.4rem;
}

.hl-diagnosis__grid small {
  color: var(--muted);
}

.hl-conversion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 34px);
  color: var(--body);
  background:
    radial-gradient(circle at 12% 20%, rgba(34, 184, 230, 0.12), transparent 20rem),
    var(--panel-2);
}

.hl-conversion h3 {
  margin: 6px 0;
  color: var(--heading);
}

.hl-conversion p {
  margin: 0;
  color: var(--body);
}

.hl-conversion__actions {
  display: flex;
  max-width: 260px;
  flex-direction: column;
  gap: 10px;
}

/* Sits directly above the email capture. The DBQ is the frictionless,
   on-topic next step; the email offer is the slower, broader one. Order
   matters more than styling here. */
.hl-next-dbq {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 38px);
  background:
    radial-gradient(circle at 92% 30%, rgba(111, 224, 123, 0.10), transparent 18rem),
    var(--glass);
}

@media (max-width: 880px) {
  .hl-next-dbq { grid-template-columns: 1fr; }
}

.hl-offer {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(26px, 5vw, 46px);
  background: var(--glass);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(10px);
}

.hl-offer__form {
  display: grid;
  gap: 12px;
}

.hl-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--hl-text);
  font-family: var(--hl-head);
  font-size: 0.78rem;
  font-weight: 600;
}

.hl-field input,
.hl-field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r);
  padding: 10px 12px;
  color: var(--heading);
  background: var(--bg-2);
  font: inherit;
}

.hl-field input::placeholder {
  color: var(--muted);
}

.hl-field input:focus,
.hl-field select:focus {
  border-color: var(--cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 184, 230, 0.22);
}

.hl-fine-print {
  /* carries the byline and the College Board disclaimer — must clear AA, and
     --muted lands at 3.85:1 at this size. */
  color: var(--body);
  font-size: 0.74rem;
  line-height: 1.5;
}

.hl-fine-print a {
  color: var(--cyan-2);
}

.hl-lead-success {
  outline: none;
}

.hl-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 880px) {
  .hl-hero__grid,
  .hl-topic-hero,
  .hl-offer {
    grid-template-columns: 1fr;
  }

  .hl-grid--3 {
    grid-template-columns: 1fr;
  }

  .hl-skill-map,
  .hl-rail__cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hl-product-card {
    max-width: 460px;
  }

  .hl-conversion {
    grid-template-columns: 1fr;
  }

  .hl-conversion__actions {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .hl-wrap,
  .hl-reading {
    width: min(100% - 28px, 1160px);
  }

  .hl-grid--2,
  .hl-choice-row,
  .hl-diagnosis__grid {
    grid-template-columns: 1fr;
  }

  .hl-skill-map,
  .hl-rail__cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hl-decoder {
    width: calc(100% - 20px);
    padding: 14px;
  }

  .hl-decoder__top,
  .hl-rail__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .hl-briefing__rules {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-button,
  .hl-card,
  .hl-shell *,
  .hl-shell *::before,
  .hl-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition: none;
  }

  .hl-button:hover,
  a.hl-card:hover {
    transform: none;
  }
}

/* ============================================================
   DBQ DRILLS
   Shares the Lab's tokens; adds the HUD, the live requirement
   chips and the two celebration overlays. Every animation is a
   self-terminating CSS keyframe — no libraries, no loops.
   ============================================================ */

.hl-drills {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100% - 32px));
  margin: 34px auto 80px;
}

.hl-drills__shell {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 30px);
  background: rgba(13, 22, 32, 0.72);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(14px);
}

/* HUD ---------------------------------------------------------------- */
.hl-drills__hud {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}

.hl-hud__spacer { flex: 1 1 auto; }

.hl-hud__stat { display: flex; flex-direction: column; line-height: 1.1; }

.hl-hud__stat span {
  color: var(--muted);
  font-family: var(--hl-head);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hl-hud__stat strong {
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-size: 1.35rem;
  font-weight: 700;
}

.hl-hud__streak.is-hot strong { color: var(--green); }
.hl-hud__streak.is-hot span::after { content: " 🔥"; }

/* Chips — the core mechanic ------------------------------------------ */
.hl-chips__wrap { margin-top: 14px; }

.hl-chips__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--hl-head);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hl-chips__head strong { color: var(--cyan-2); font-size: .95rem; letter-spacing: 0; }

.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.hl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  color: var(--muted);
  background: var(--glass);
  font-family: var(--hl-head);
  font-size: .8rem;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.hl-chip__mark { font-weight: 700; opacity: .55; }

.hl-chip.is-met {
  color: var(--heading);
  border-color: rgba(111, 224, 123, .45);
  background: var(--hl-green-wash);
  animation: hlChipPop .32s var(--ease) both;
}

.hl-chip.is-met .hl-chip__mark { color: var(--green); opacity: 1; }

@keyframes hlChipPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Drill body --------------------------------------------------------- */
.hl-drill { max-width: 820px; margin: 0 auto; }

.hl-drill__doc { margin: 18px 0; }
.hl-drill__doc blockquote { font-size: clamp(.98rem, 1.6vw, 1.08rem); }

.hl-drill__doclabel {
  margin-bottom: 10px;
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hl-drill__input {
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r);
  color: var(--heading);
  background: var(--bg-2);
  font: 1rem/1.65 var(--hl-sans);
  resize: vertical;
}

.hl-drill__input:focus {
  border-color: var(--cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 184, 230, .22);
}

.hl-drill__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }

.hl-drill__prompt-quote {
  margin: 18px auto;
  max-width: 60ch;
  padding: 14px 18px;
  border-left: 3px solid var(--cyan);
  color: var(--heading);
  background: var(--hl-blue-wash);
  font-family: var(--hl-serif);
  font-size: 1.02rem;
  text-align: left;
}

.hl-drill__honesty {
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--hl-head);
  font-size: .82rem;
}

.hl-drill__outof { color: var(--muted); font-size: .42em; }
.hl-drill__missed { margin: 10px 0 0; padding-left: 1.2em; color: var(--body); }
.hl-drill__missed li { margin-bottom: 5px; }
.hl-drill--coach h2 { font-family: var(--hl-head); font-size: clamp(2.4rem, 7vw, 3.6rem); }
.hl-drill__new { margin-top: 14px; color: var(--green); font-family: var(--hl-head); font-weight: 600; }

/* Badge case --------------------------------------------------------- */
.hl-badges { margin: 26px 0; }

.hl-badges__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--hl-head);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hl-badges__head strong { color: var(--cyan-2); font-size: .95rem; letter-spacing: 0; }

.hl-badges__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.hl-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--glass);
  text-align: center;
}

.hl-badge__pt { font-family: var(--hl-head); font-size: 1.15rem; font-weight: 700; color: var(--muted); }
.hl-badge__nm { color: var(--muted); font-size: .62rem; line-height: 1.25; }

.hl-badge.is-earned {
  border-color: rgba(111, 224, 123, .45);
  background: var(--hl-green-wash);
}

.hl-badge.is-earned .hl-badge__pt { color: var(--green); }
.hl-badge.is-earned .hl-badge__nm { color: var(--body); }

/* Overlays ----------------------------------------------------------- */
.hl-pop, .hl-levelup {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hl-pop.is-on, .hl-levelup.is-on { display: flex; }

.hl-pop__inner, .hl-levelup > div {
  padding: 26px 44px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  background: rgba(10, 20, 16, .9);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  text-align: center;
  animation: hlPopIn .42s cubic-bezier(.2, 1.4, .4, 1) both;
}

.hl-pop__tier { font-family: var(--hl-head); font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.hl-pop__num { font-family: var(--hl-head); font-size: 64px; font-weight: 700; color: var(--green); line-height: 1.1; }
.hl-pop__sub { color: var(--muted); font-size: .82rem; }
.hl-pop__tier.t-bull, .hl-pop__tier.t-great { color: var(--green); }
.hl-pop__tier.t-far { color: var(--muted); }

.hl-levelup > div span {
  display: block;
  color: var(--cyan-2);
  font-family: var(--hl-head);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hl-levelup > div strong { font-family: var(--hl-head); font-size: 76px; font-weight: 700; color: var(--heading); }

@keyframes hlPopIn {
  0% { transform: scale(.6) translateY(14px); opacity: 0; }
  55% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@media (max-width: 720px) {
  .hl-badges__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hl-pop__num { font-size: 48px; }
  .hl-levelup > div strong { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-chip.is-met, .hl-pop__inner, .hl-levelup > div { animation: none; }
}