/* econos v14 — Brand Manual v1.0 migration. Fraunces + Inter, new colour system. */
/* ============================================================
   ECONOS DESIGN SYSTEM
   Learn it. Link it. Land it.
   See STYLE_GUIDE.md and brand_manual.html for the canonical reference.
   ============================================================ */

:root {
  /* === COLOURS — Brand Manual v1.0 === */

  /* INK — primary text, structure, dark surfaces */
  --econ-ink:         #0B1426;
  --econ-ink-soft:    #2A3650;   /* body text — softer than full ink */

  /* GREEN — "Learn" stage · success · progress */
  --econ-green:       #1FB574;
  --econ-green-50:    #E8F8F0;
  --econ-green-100:   #D1F2E1;
  --econ-green-600:   #168A57;
  --econ-green-700:   #0E633F;
  --econ-green-800:   #094128;

  /* YELLOW — "Link" stage · current state · attention
     (Token name kept as --econ-amber for backwards compatibility with all
      existing class names like .branch-cal--amber. Value is the new yellow.) */
  --econ-amber:       #F5B800;
  --econ-amber-50:    #FEF8E0;
  --econ-amber-100:   #FDF0C2;
  --econ-amber-600:   #C99500;
  --econ-amber-700:   #8C6800;

  /* PINK — "Land" stage · destination · climax
     (Token name kept as --econ-rose for backwards compatibility.) */
  --econ-rose:        #EC2D68;
  --econ-rose-50:     #FCE7EE;
  --econ-rose-100:    #F9D0DD;
  --econ-rose-600:    #C71C50;
  --econ-rose-700:    #95163C;

  /* PURPLE — extended · exam practice · synthesis · advanced */
  --econ-purple:      #7C3AED;
  --econ-purple-50:   #F2EBFD;
  --econ-purple-100:  #E4D7FB;
  --econ-purple-600:  #6427C2;
  --econ-purple-700:  #4E1E97;
  --econ-purple-800:  #381569;

  /* BLUE — extended · data · examples · external links
     Demoted from primary brand to "use when functionally needed". */
  --econ-blue:        #2563EB;
  --econ-blue-dark:   #1E40AF;
  --econ-blue-50:     #EFF6FF;
  --econ-blue-100:    #DBEAFE;
  --econ-blue-600:    #2563EB;
  --econ-blue-700:    #1D4ED8;

  /* Neutrals — softer warm-grey scale to harmonise with cream background */
  --econ-cream:       #FAF8F4;   /* page background — the brand warmth */
  --econ-white:       #FFFFFF;   /* cards · content surfaces */
  --econ-gray-50:     #F5F3EE;   /* very subtle warm surface */
  --econ-gray-100:    #F0EEE8;   /* subtle warm surface */
  --econ-gray-200:    #E7E7EA;   /* default borders */
  --econ-border:      #E7E7EA;   /* alias for default border colour */
  --econ-border-strong: #C4C4CA; /* stronger border for emphasis */
  --econ-gray-300:    #D1D1D6;
  --econ-gray-400:    #9CA3AF;   /* muted text · captions */
  --econ-gray-500:    #6B7280;   /* secondary text */
  --econ-gray-600:    #4B5563;
  --econ-gray-700:    #374151;
  --econ-gray-800:    #1F2937;
  --econ-gray-900:    #0B1426;   /* aliases to --econ-ink */

  /* === TYPOGRAPHY === */
  /* Display: Fraunces (variable serif with opsz, SOFT, WONK axes).
     "Earned warmth" — serif voice for headings, sans for body. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Fraunces variation presets per type scale */
  --fraunces-display: "opsz" 144, "SOFT" 50, "WONK" 1;  /* H1 hero */
  --fraunces-section: "opsz" 48,  "SOFT" 50, "WONK" 1;  /* H2 section */

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;     /* bumped up — new body size per brand manual */
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;
  --fs-5xl:  44px;

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* === SPACING === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* === RADII === */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;   /* card radius — brand manual standard */
  --r-xl:   18px;   /* hero radius */
  --r-2xl:  20px;
  --r-full: 999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.04);
  --shadow-md: 0 1px 3px rgba(11, 20, 38, 0.06), 0 1px 2px rgba(11, 20, 38, 0.04);
  --shadow-lg: 0 4px 12px rgba(11, 20, 38, 0.06), 0 2px 4px rgba(11, 20, 38, 0.04);

  /* === LAYOUT === */
  --sidebar-w: 240px;
  --rightbar-w: 240px;
  --header-h: 64px;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--econ-ink);
  background: var(--econ-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   APP SHELL
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ----- Sidebar ----- */
.sidebar {
  background: var(--econ-white);
  border-right: 1px solid var(--econ-gray-200);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  padding: 0 var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.sidebar__logo {
  display: block;
  margin-bottom: 4px;
}
.sidebar__logo svg,
.sidebar__logo img {
  display: block;
  width: 140px;
  height: auto;
}

.sidebar__wordmark {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--econ-ink);
  display: block;
}

.sidebar__tagline {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "SOFT" 30, "WONK" 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--econ-ink);
  margin-top: 9px;
  display: block;
}
.sidebar__tagline .ec-stop-green  { color: var(--econ-green);  font-weight: 800; }
.sidebar__tagline .ec-stop-yellow { color: var(--econ-amber);  font-weight: 800; }
.sidebar__tagline .ec-stop-pink   { color: var(--econ-rose);   font-weight: 800; }

.sidebar__nav {
  padding: var(--sp-4) var(--sp-3);
  flex: 1;
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--econ-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background 0.15s, color 0.15s;
}
.sidebar__nav a:hover { background: var(--econ-gray-100); }
.sidebar__nav a.is-active {
  background: var(--econ-blue-50);
  color: var(--econ-blue-700);
}
.sidebar__nav svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar__streak {
  margin: var(--sp-4) var(--sp-4) var(--sp-3);
  padding: var(--sp-4);
  background: var(--econ-green-50);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}
.sidebar__streak-row { display: flex; align-items: center; gap: var(--sp-2); }
.sidebar__streak-flame { font-size: 22px; line-height: 1; }
.sidebar__streak-num { font-size: 26px; font-weight: var(--fw-bold); color: var(--econ-ink); line-height: 1; }
.sidebar__streak-label { font-size: var(--fs-xs); color: var(--econ-ink); font-weight: var(--fw-medium); }
.sidebar__streak-sub { font-size: var(--fs-xs); color: var(--econ-ink); }

.sidebar__user {
  padding: var(--sp-4);
  border-top: 1px solid var(--econ-gray-200);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sidebar__user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-blue-100);
  color: var(--econ-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--econ-ink); }
.sidebar__user-role { font-size: var(--fs-xs); color: var(--econ-ink); }
.sidebar__user-chev { color: var(--econ-ink); }

/* ----- Main area ----- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--header-h);
  background: var(--econ-white);
  border-bottom: 1px solid var(--econ-gray-200);
  padding: 0 var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.topbar__back {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--econ-ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background 0.15s;
  white-space: nowrap;
}
.topbar__back:hover { background: var(--econ-gray-100); }

.topbar__crumbs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  margin-left: var(--sp-2);
}
.topbar__session-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.topbar__topic-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.topbar__streak {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-weight: var(--fw-medium);
}
.topbar__streak-icon { color: var(--econ-amber); }

.topbar__avatar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.topbar__avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-blue-100);
  color: var(--econ-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.topbar__avatar-chev { color: var(--econ-ink); }

/* ----- Page body (3-col within main) ----- */
.page {
  display: grid;
  grid-template-columns: 1fr var(--rightbar-w);
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8) var(--sp-12);
  align-items: start;
}

.page--single { grid-template-columns: 1fr; }

/* progress bar bar */
.progress {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.progress__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--econ-ink);
  white-space: nowrap;
}
.progress__bar {
  flex: 1;
  height: 8px;
  background: var(--econ-gray-200);
  border-radius: var(--r-full);
  position: relative;
  overflow: visible;
}
.progress__fill {
  height: 100%;
  background: var(--econ-green);
  border-radius: var(--r-full);
  position: relative;
  transition: width 0.4s ease;
}
.progress__fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: var(--econ-green);
  box-shadow: 0 0 0 3px var(--econ-white), 0 0 0 4px var(--econ-green);
}
.progress__pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  min-width: 36px;
  text-align: right;
}
.progress__exit {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--econ-ink);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  background: var(--econ-white);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.progress__exit:hover { background: var(--econ-gray-50); }

/* ============================================================
   CARDS & CONTENT
   ============================================================ */

.card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-sm);
}

.card__step-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  margin-bottom: var(--sp-3);
}

.card__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--econ-ink);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.025em;
}

.card__title--lg {
  font-size: var(--fs-5xl);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.03em;
}

.card__lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
  max-width: 620px;
}

/* Two-column layout inside a card */
.row { display: flex; gap: var(--sp-6); align-items: flex-start; }
.row > * { min-width: 0; }
.row--center { align-items: center; }
.row--top { align-items: flex-start; }

/* ============================================================
   CALLOUT BOXES (the soft tinted boxes)
   ============================================================ */

.callout {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.callout__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  background: var(--econ-white);
}

.callout__body { flex: 1; }

.callout__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-1);
}

.callout__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--econ-ink);
}

.callout--success { background: var(--econ-green-50); }
.callout--success .callout__title { color: var(--econ-green-700); }
.callout--success .callout__icon { color: var(--econ-green-600); }

.callout--info { background: var(--econ-blue-50); }
.callout--info .callout__title { color: var(--econ-blue-700); }
.callout--info .callout__icon { color: var(--econ-blue-600); }

.callout--warn { background: var(--econ-amber-100); }
.callout--warn .callout__title { color: var(--econ-amber-700); }
.callout--warn .callout__icon { color: var(--econ-amber-600); }

.callout--purple { background: var(--econ-purple-100); }
.callout--purple .callout__title { color: var(--econ-purple-700); }
.callout--purple .callout__icon { color: var(--econ-purple-600); }

.callout--rose { background: var(--econ-rose-100); }
.callout--rose .callout__title { color: var(--econ-rose-600); }
.callout--rose .callout__icon { color: var(--econ-rose-600); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  border-radius: var(--r-md);
  transition: background 0.15s, transform 0.05s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--econ-blue);
  color: var(--econ-white);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-md);
  border-radius: var(--r-md);
}
.btn--primary:hover { background: var(--econ-blue-700); }

.btn--ghost {
  background: var(--econ-white);
  color: var(--econ-ink);
  border: 1px solid var(--econ-gray-200);
}
.btn--ghost:hover { background: var(--econ-gray-50); }

.btn--lg {
  padding: var(--sp-4) var(--sp-7);
  font-size: var(--fs-lg);
}

/* ============================================================
   STAGE PROGRESSION (Learn / Master / Review)
   ============================================================ */

.stages {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.stages__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
  display: none;
}

.stage {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  position: relative;
}
.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 50px;
  bottom: -10px;
  width: 1px;
  background: var(--econ-gray-200);
}

.stage__num {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  border: 2px solid var(--econ-gray-300);
  color: var(--econ-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  z-index: 1;
}
.stage__body { padding-top: var(--sp-1); flex: 1; }
.stage__name { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--econ-ink); }
.stage__sub { font-size: var(--fs-xs); color: var(--econ-ink); margin-top: 2px; line-height: var(--lh-snug); }
.stage__lock { color: var(--econ-ink); }

.stage.is-current .stage__num {
  background: var(--econ-white);
  border-color: var(--econ-green);
  color: var(--econ-green-700);
}
.stage.is-current .stage__name { color: var(--econ-green-700); }

.stage__chip {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  background: var(--econ-green-100);
  color: var(--econ-green-700);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}

/* ============================================================
   CARDS RAIL (right side - "Cards" list)
   ============================================================ */

.right-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-6);
}

.rail-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.rail-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-2);
}

.rail-card__sub {
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  margin-bottom: var(--sp-4);
}

/* Session progress dots */
.session-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.session-dot {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  border-radius: var(--r-full);
  background: var(--econ-white);
  border: 2px solid var(--econ-gray-200);
  color: var(--econ-ink);
  width: 28px;
  flex: 0 0 28px;
}
.session-dot.is-done {
  background: var(--econ-green);
  border-color: var(--econ-green);
  color: var(--econ-white);
}
.session-dot.is-current {
  background: var(--econ-green);
  border-color: var(--econ-green);
  color: var(--econ-white);
}
.session-line {
  flex: 1;
  height: 2px;
  background: var(--econ-gray-200);
}
.session-line.is-done { background: var(--econ-green); }

/* Cards list */
.cards-list { display: flex; flex-direction: column; gap: var(--sp-1); }

.cards-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.cards-list__item:hover { background: var(--econ-gray-50); }
.cards-list__item--quiz { border-top: 1px solid var(--econ-gray-200); margin-top: var(--sp-2); padding-top: var(--sp-3); cursor: pointer; }
.cards-list__item--quiz .cards-list__num { background: var(--econ-blue-50); border-color: var(--econ-blue-100); color: var(--econ-blue-700); font-size: 11px; }
.cards-list__item--quiz .cards-list__name { color: var(--econ-blue-700); font-weight: var(--fw-semi); }
.cards-list__item.is-current { background: var(--econ-green-50); }

.cards-list__num {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-300);
  color: var(--econ-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  flex-shrink: 0;
}
.cards-list__item.is-current .cards-list__num {
  border-color: var(--econ-green);
  color: var(--econ-green-700);
}
.cards-list__item.is-done .cards-list__num {
  background: var(--econ-green);
  border-color: var(--econ-green);
  color: var(--econ-white);
}

.cards-list__body { flex: 1; }
.cards-list__name {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.cards-list__item.is-current .cards-list__name { color: var(--econ-green-700); font-weight: var(--fw-semi); }
.cards-list__chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  margin-top: 2px;
}

/* ============================================================
   "WHAT YOU'LL DO" + footer cards (intro page)
   ============================================================ */

.session-meta {
  display: flex;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-5) var(--sp-7);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  margin-top: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.session-meta__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.session-meta__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--econ-green-50);
  color: var(--econ-green-600);
  font-size: 18px;
  flex-shrink: 0;
}
.session-meta__item:nth-child(2) .session-meta__icon { background: var(--econ-purple-50); color: var(--econ-purple-600); }
.session-meta__label { font-size: var(--fs-xs); color: var(--econ-ink); }
.session-meta__val { font-size: var(--fs-sm); color: var(--econ-ink); font-weight: var(--fw-semi); }

.session-meta__cta { margin-left: auto; }

/* "What you'll do in this session" success box */
.do-box {
  background: var(--econ-green-50);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.do-box__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  color: var(--econ-green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.do-box__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  margin-bottom: 2px;
}
.do-box__sub {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}
.do-box__checks { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-end; }
.do-box__check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  white-space: nowrap;
}
.do-box__check .check-icon {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--econ-green);
  color: var(--econ-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
}

/* ============================================================
   ILLUSTRATIONS
   ============================================================ */

.illust-bars {
  width: 240px;
  height: 180px;
  position: relative;
  flex-shrink: 0;
}

/* ============================================================
   IMPACT GRID (slide 4 - Consumers / Firms / Economy)
   ============================================================ */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.impact-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.impact-card--green-tint { background: var(--econ-green-50); border-color: var(--econ-green-100); }
.impact-card--amber-tint { background: var(--econ-amber-50); border-color: var(--econ-amber-100); }
.impact-card--blue-tint { background: var(--econ-blue-50); border-color: var(--econ-blue-100); }

.impact-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.impact-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.impact-card--green-tint .impact-card__icon { color: var(--econ-green-600); }
.impact-card--amber-tint .impact-card__icon { color: var(--econ-amber-600); }
.impact-card--blue-tint  .impact-card__icon { color: var(--econ-blue-600); }
.impact-card__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--econ-ink); }
.impact-card--green-tint .impact-card__title { color: var(--econ-green-700); }
.impact-card--amber-tint .impact-card__title { color: var(--econ-amber-700); }
.impact-card--blue-tint  .impact-card__title { color: var(--econ-blue-700); }

.impact-card ul { padding-left: 0; }
.impact-card li {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  padding-left: var(--sp-4);
  position: relative;
  margin-bottom: var(--sp-2);
}
.impact-card li::before {
  content: '•';
  position: absolute;
  left: var(--sp-2);
  color: var(--econ-ink);
}

/* Winners / Losers row */
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: var(--sp-5); border-radius: var(--r-lg); overflow: hidden; }
.wl-side { padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start; }
.wl-side--green { background: var(--econ-green-50); }
.wl-side--rose  { background: var(--econ-rose-50); }
.wl-side__icon { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--econ-white); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.wl-side--green .wl-side__icon { color: var(--econ-green-600); }
.wl-side--rose  .wl-side__icon { color: var(--econ-rose-600); }
.wl-side__title { font-size: var(--fs-md); font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.wl-side--green .wl-side__title { color: var(--econ-green-700); }
.wl-side--rose  .wl-side__title { color: var(--econ-rose-600); }
.wl-side__list { font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-relaxed); }
.wl-side__list strong { color: var(--econ-ink); }

/* ============================================================
   TYPES OF INFLATION (slide 3) — two-column comparison
   ============================================================ */

.types-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.type-col { padding: var(--sp-5) var(--sp-6); background: var(--econ-gray-50); }
.type-col--demand { background: var(--econ-green-50); }
.type-col--cost   { background: var(--econ-blue-50); }

.type-col__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.type-col__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.type-col--demand .type-col__icon { color: var(--econ-green-600); }
.type-col--cost   .type-col__icon { color: var(--econ-blue-600); }
.type-col__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.type-col--demand .type-col__title { color: var(--econ-green-700); }
.type-col--cost   .type-col__title { color: var(--econ-blue-700); }

.type-col__row { margin-bottom: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--econ-ink); }
.type-col__row strong {
  color: var(--econ-ink);
  font-weight: var(--fw-semi);
  display: inline;
}
.type-col--demand .type-col__row strong:first-child { color: var(--econ-green-700); }
.type-col--cost   .type-col__row strong:first-child { color: var(--econ-blue-700); }

.type-col__example {
  margin-top: var(--sp-4);
  background: var(--econ-white);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.type-col__example-icon {
  color: var(--econ-ink);
  flex-shrink: 0;
  margin-top: 2px;
}
.type-col__example-text { font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-relaxed); }
.type-col__example-text strong { color: var(--econ-ink); font-weight: var(--fw-semi); }

/* ============================================================
   "HOW INFLATION HAPPENS" flow (slide 5 mini-chain)
   ============================================================ */

.flow {
  background: var(--econ-amber-50);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.flow__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-5);
}
.flow__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.flow__node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}
.flow__circle {
  width: 88px;
  height: 88px;
  border-radius: var(--r-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  line-height: 1.25;
  padding: var(--sp-2);
}
.flow__circle-icon { font-size: 22px; margin-bottom: 2px; }
.flow__node:nth-child(1) .flow__circle { background: #DBEAFE; color: var(--econ-blue-700); }
.flow__node:nth-child(3) .flow__circle { background: #FED7AA; color: var(--econ-amber-700); }
.flow__node:nth-child(5) .flow__circle { background: #FECACA; color: var(--econ-rose-600); }
.flow__node:nth-child(7) .flow__circle { background: var(--econ-green-100); color: var(--econ-green-700); }
.flow__sub {
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  font-style: italic;
}
.flow__arrow {
  color: var(--econ-ink);
  font-size: 20px;
  flex-shrink: 0;
}

/* Summary grid (slide 5) */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.summary-tile {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.summary-tile--green-tint { background: var(--econ-green-50); border-color: var(--econ-green-100); }
.summary-tile--blue-tint { background: var(--econ-blue-50); border-color: var(--econ-blue-100); }
.summary-tile--amber-tint { background: var(--econ-amber-50); border-color: var(--econ-amber-100); }
.summary-tile__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.summary-tile__num {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--econ-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.summary-tile--green-tint .summary-tile__num { color: var(--econ-green-700); }
.summary-tile--blue-tint  .summary-tile__num { color: var(--econ-blue-700); }
.summary-tile--amber-tint .summary-tile__num { color: var(--econ-amber-700); }
.summary-tile__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--econ-ink); }
.summary-tile ul { padding-left: 0; }
.summary-tile li {
  font-size: var(--fs-sm); color: var(--econ-ink);
  line-height: var(--lh-relaxed); padding-left: var(--sp-4); position: relative;
  margin-bottom: var(--sp-2);
}
.summary-tile li::before { content: '•'; position: absolute; left: var(--sp-2); color: var(--econ-ink); }
.summary-tile p { font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-relaxed); margin-bottom: var(--sp-2); }

/* Two-col mini comparison inside summary tile */
.mini-comp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }
.mini-comp__col { font-size: var(--fs-sm); }
.mini-comp__name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
  color: var(--econ-ink);
}
.mini-comp__col--demand .mini-comp__name { color: var(--econ-green-700); }
.mini-comp__col--cost .mini-comp__name { color: var(--econ-blue-700); }
.mini-comp__text {
  font-size: var(--fs-sm); color: var(--econ-ink);
  line-height: var(--lh-snug); padding-left: var(--sp-3);
  position: relative;
}
.mini-comp__text::before { content: '•'; position: absolute; left: 0; color: var(--econ-ink); }

/* Impacts mini list (in summary) */
.impacts-mini { display: flex; flex-direction: column; gap: var(--sp-2); }
.impacts-mini__row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-snug);
}
.impacts-mini__icon {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--econ-white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--econ-amber-700);
}
.impacts-mini__row strong { color: var(--econ-ink); font-weight: var(--fw-semi); }

/* Final wrap row (slide 5 bottom) */
.wrap-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wrap-tile {
  background: var(--econ-green-50);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.wrap-tile--blue-tint { background: var(--econ-blue-50); }
.wrap-tile__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.wrap-tile__icon {
  font-size: 18px;
  color: var(--econ-green-600);
}
.wrap-tile--blue-tint .wrap-tile__icon { color: var(--econ-amber-600); }
.wrap-tile__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--econ-green-700); }
.wrap-tile--blue-tint .wrap-tile__title { color: var(--econ-blue-700); }
.wrap-tile__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wrap-tile__col-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--sp-2); color: var(--econ-ink); }
.wrap-tile__col-text { font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-relaxed); }
.wrap-tile__col--win .wrap-tile__col-name { color: var(--econ-green-700); }
.wrap-tile__col--lose .wrap-tile__col-name { color: var(--econ-rose-600); }
.wrap-tile p { font-size: var(--fs-sm); color: var(--econ-ink); line-height: var(--lh-relaxed); }

/* ============================================================
   FOOTER (Previous / Next)
   ============================================================ */

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--econ-gray-200);
}
.card-foot__counter {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
}

/* ============================================================
   STAGE 1 INTRO PAGE
   ============================================================ */

.intro-card { padding: var(--sp-8) var(--sp-10); }
.intro-card .row { gap: var(--sp-8); }
.intro-card__text { flex: 1; max-width: 540px; }

/* "Tip" callout in intro */
.intro-card .callout { margin-top: var(--sp-2); }

/* ============================================================
   UTILITIES
   ============================================================ */

.flex { display: flex; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

/* ============================================================
   EXAM EDGE CALLOUT — distinctive purple-bordered "gem" box
   ============================================================ */

.exam-edge {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
  border: 1.5px solid var(--econ-purple-100);
  border-left: 4px solid var(--econ-purple-600);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: relative;
}

.exam-edge__star {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--econ-purple-600);
  color: var(--econ-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.exam-edge__body { flex: 1; }
.exam-edge__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--econ-purple-700);
  margin-bottom: 2px;
}
.exam-edge__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-2);
}
.exam-edge__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--econ-ink);
}

/* ============================================================
   FRAMING CARD — Card 1 layout
   ============================================================ */

.framing-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  margin-bottom: var(--sp-6);
}

.framing-diagram {
  display: flex;
  justify-content: center;
}

.branch-callouts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.branch-cal {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border-left: 4px solid;
}
.branch-cal--green { background: var(--econ-green-50);  border-left-color: var(--econ-green); }
.branch-cal--amber { background: var(--econ-amber-50);  border-left-color: var(--econ-amber); }
.branch-cal--blue  { background: var(--econ-blue-50);   border-left-color: var(--econ-blue); }

.branch-cal__dot {
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  margin-top: 4px;
}
.branch-cal--green .branch-cal__dot { background: var(--econ-green); }
.branch-cal--amber .branch-cal__dot { background: var(--econ-amber); }
.branch-cal--blue  .branch-cal__dot { background: var(--econ-blue); }

.branch-cal__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  margin-bottom: 2px;
}
.branch-cal--green .branch-cal__label { color: var(--econ-green-700); }
.branch-cal--amber .branch-cal__label { color: var(--econ-amber-700); }
.branch-cal--blue  .branch-cal__label { color: var(--econ-blue-700); }

.branch-cal__sub {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   CAUSE CARD — Cards 2 & 3 (mechanism + causes/hallmarks 2-col)
   ============================================================ */

.mech-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  align-items: center;
}

.mech-diagram {
  background: var(--econ-gray-50);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--econ-gray-200);
}
.mech-diagram__caption {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  text-align: center;
  line-height: var(--lh-snug);
}

.cause-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.cause-col {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.cause-col__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.cause-col ul { padding-left: 0; }
.cause-col li {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  padding: 6px 0 6px var(--sp-5);
  position: relative;
}
.cause-col li::before {
  content: '';
  position: absolute;
  left: var(--sp-2);
  top: 14px;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--econ-gray-400);
}
.cause-col--causes li::before          { background: var(--econ-blue); }
.cause-col--hallmark li::before        { background: var(--econ-green); }
.cause-col--hallmark-green li::before  { background: var(--econ-green); }
.cause-col--hallmark-amber li::before  { background: var(--econ-amber); }
.cause-col--hallmark-blue li::before   { background: var(--econ-blue); }
.cause-col--hallmark-purple li::before { background: var(--econ-purple-700); }
.cause-col--hallmark-rose li::before   { background: var(--econ-rose); }

/* "UK examples" callout — same as info but with flag */
.uk-examples {
  background: var(--econ-blue-50);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.uk-examples__flag {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.uk-examples__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.uk-examples__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* Policy row (cards 2 & 3) */
.policy-box {
  background: var(--econ-amber-50);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--econ-amber);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-4);
}
.policy-box__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.policy-box__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-amber-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.policy-box__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* Dilemma box (card 3) — rose-tinted, prominent */
.dilemma {
  background: var(--econ-rose-50);
  border: 1.5px solid var(--econ-rose-100);
  border-left: 4px solid var(--econ-rose);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}
.dilemma__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.dilemma__icon {
  font-size: 18px;
  color: var(--econ-rose-600);
}
.dilemma__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-rose-600);
}
.dilemma__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dilemma__line {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   DIAGNOSE CARD — Card 4
   ============================================================ */

.diag-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--sp-5);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.diag-table thead th {
  background: var(--econ-gray-50);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  color: var(--econ-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--econ-gray-200);
}
.diag-table thead th:nth-child(2) { color: var(--econ-green-700); }
.diag-table thead th:nth-child(3) { color: var(--econ-amber-700); }

.diag-table tbody td {
  font-size: var(--fs-sm);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--econ-gray-100);
  color: var(--econ-ink);
}
.diag-table tbody tr:last-child td { border-bottom: none; }
.diag-table tbody td:first-child {
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--econ-gray-50);
  width: 28%;
}
.diag-table tbody td:nth-child(2) {
  font-weight: var(--fw-medium);
  color: var(--econ-green-700);
  background: rgba(236, 253, 245, 0.4);
}
.diag-table tbody td:nth-child(3) {
  font-weight: var(--fw-medium);
  color: var(--econ-amber-700);
  background: rgba(255, 251, 235, 0.6);
}

/* Scenarios grid */
.scenarios {
  margin-bottom: var(--sp-5);
}
.scenarios__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.scenarios__title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: var(--econ-amber);
  border-radius: 2px;
}

.scenarios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.scenario {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.scenario__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.scenario__label {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  background: var(--econ-gray-100);
  color: var(--econ-ink);
}
.scenario__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--econ-ink);
  flex: 1;
}
.scenario__answer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.scenario__arrow { opacity: 0.7; }

.scenario--green .scenario__label { background: var(--econ-green); color: white; }
.scenario--green .scenario__answer { background: var(--econ-green-50); color: var(--econ-green-700); }
.scenario--amber .scenario__label { background: var(--econ-amber); color: white; }
.scenario--amber .scenario__answer { background: var(--econ-amber-50); color: var(--econ-amber-700); }
.scenario--purple .scenario__label { background: var(--econ-purple-600); color: white; }
.scenario--purple .scenario__answer { background: var(--econ-purple-50); color: var(--econ-purple-700); }

/* ============================================================
   PUZZLE CARD — Card 5
   ============================================================ */

.classical-box {
  background: transparent;
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  border-left: 4px solid var(--econ-blue);
}
.classical-box__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.classical-box__icon { font-size: 18px; }
.classical-box__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.classical-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.classical-formula__main {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue-dark);
  letter-spacing: 0;
  white-space: nowrap;
  font-family: var(--font-display) !important;
  font-variation-settings: var(--fraunces-section);
}
.classical-formula__sub {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-style: italic;
}

.classical-quote {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-style: italic;
  line-height: var(--lh-relaxed);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--econ-blue-100);
  margin-bottom: var(--sp-3);
}

.classical-examples {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* The puzzle visual */
.puzzle-visual {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.puzzle-visual__chart {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.puzzle-visual__caption {
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  text-align: center;
  font-style: italic;
}

.puzzle-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.puzzle-bullet {
  font-size: var(--fs-base);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  padding-left: var(--sp-5);
  position: relative;
}
.puzzle-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--econ-blue);
}

.cliffhanger {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: 36px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue-dark);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* ============================================================
   MECHANISMS CARD — Card 6 (2x2 grid)
   ============================================================ */

.mech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.mech-tile {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border: 1px solid;
  position: relative;
}
.mech-tile--blue  { background: var(--econ-blue-50);   border-color: var(--econ-blue-100); }
.mech-tile--green { background: var(--econ-green-50);  border-color: var(--econ-green-100); }
.mech-tile--amber { background: var(--econ-amber-50);  border-color: var(--econ-amber-100); }
.mech-tile--rose  { background: var(--econ-rose-50);   border-color: var(--econ-rose-100); }

.mech-tile__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.mech-tile__num {
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--econ-white);
  flex-shrink: 0;
}
.mech-tile--blue  .mech-tile__num { background: var(--econ-blue); }
.mech-tile--green .mech-tile__num { background: var(--econ-green); }
.mech-tile--amber .mech-tile__num { background: var(--econ-amber); }
.mech-tile--rose  .mech-tile__num { background: var(--econ-rose); }

.mech-tile__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.mech-tile--blue  .mech-tile__title { color: var(--econ-blue-700); }
.mech-tile--green .mech-tile__title { color: var(--econ-green-700); }
.mech-tile--amber .mech-tile__title { color: var(--econ-amber-700); }
.mech-tile--rose  .mech-tile__title { color: var(--econ-rose-600); }

.mech-tile__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* Connection box (Card 6 closer) */
.connection-box {
  background: var(--econ-green-50);
  border-left: 4px solid var(--econ-green);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.connection-box__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.connection-box__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.connection-box__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   DEFLATION CARD — Card 7
   ============================================================ */

.def-mechs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.def-mech-row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-left: 4px solid var(--econ-rose);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

.def-mech-row__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--econ-rose-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.def-mech-row__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: 2px;
}
.def-mech-row__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* Examples to know — compact horizontal */
.def-examples {
  background: var(--econ-blue-50);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.def-examples__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.def-examples__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.def-examples__item {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}
.def-examples__period {
  font-weight: var(--fw-semi);
  color: var(--econ-blue-dark);
}

/* Bridge to Land it */
.bridge {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1.5px solid var(--econ-green-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}
.bridge__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--econ-green);
  color: var(--econ-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.bridge__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  margin-bottom: 2px;
}
.bridge__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   DOWNLOAD DECK CARD — right rail addition
   ============================================================ */

.deck-download {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.deck-download__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.deck-download__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--econ-purple-50);
  color: var(--econ-purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.deck-download__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.deck-download__sub {
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}
.deck-download__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--econ-gray-50);
  color: var(--econ-ink);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid var(--econ-gray-200);
  transition: background 0.15s;
  width: 100%;
}
.deck-download__btn:hover {
  background: var(--econ-purple-50);
  border-color: var(--econ-purple-100);
  color: var(--econ-purple-700);
}

/* Hide on small (basic responsive) */
@media (max-width: 1100px) {
  :root { --sidebar-w: 200px; --rightbar-w: 210px; }
  .page { padding: var(--sp-4); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .page { grid-template-columns: 1fr; }
  .right-rail { display: none; }
  .framing-row, .mech-row, .cause-grid, .mech-grid { grid-template-columns: 1fr; }
  .scenarios__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page { padding: var(--sp-3); }
}


/* ============================================================
   ============================================================
   V2 ENHANCEMENTS — pop-up book interactions, layout fixes,
   consistent shadows, mathematically-correct diagrams support
   ============================================================
   ============================================================ */


/* ============================================================
   1. ANIMATION KEYFRAMES — the pop-up book vocabulary
   ============================================================ */

@keyframes econ-rise-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0);    }
}

@keyframes econ-flap-open {
  0%   { opacity: 0; transform: rotateX(-78deg) translateY(-6px); transform-origin: top center; }
  100% { opacity: 1; transform: rotateX(0)      translateY(0);    transform-origin: top center; }
}

@keyframes econ-slide-reveal {
  0%   { opacity: 0; transform: translateY(-6px); max-height: 0;     padding-top: 0; padding-bottom: 0; margin-top: 0; }
  100% { opacity: 1; transform: translateY(0);    max-height: 600px; }
}

@keyframes econ-pulse-attention {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0     rgba(37, 99, 235, 0.45); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 14px  rgba(37, 99, 235, 0); }
}

@keyframes econ-tease-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg);   }
  50%      { transform: translateY(-3px) rotate(-1.2deg);}
}

@keyframes econ-ad-shift {
  0%   { transform: translateX(-12px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}

@keyframes econ-shimmer {
  0%   { background-position: -180px 0; }
  100% { background-position: 180px 0;  }
}


/* ============================================================
   2. UTILITY: consistent card shadow, hover lift
   ============================================================ */

/* The shared "paper" feel — every content box gets a subtle lift. */
.exam-edge,
.callout,
.cause-col,
.uk-examples,
.policy-box,
.dilemma,
.classical-box,
.puzzle-visual,
.scenario,
.mech-tile,
.def-mech-row,
.def-examples,
.connection-box,
.bridge,
.session-meta,
.rail-card,
.deck-download {
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Hover-lift on interactive surfaces only (cards, scenarios) */
.scenario,
.mech-tile,
.branch-cal,
.cards-list__item {
  cursor: pointer;
}
.scenario:hover,
.mech-tile:hover,
.branch-cal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   3. INTRO CARD LAYOUT FIXES
   - Hero fills the right column properly
   - Green ticks left-aligned, even spacing
   - Bottom session-meta evenly distributed
   ============================================================ */

/* Hero now takes a real slice of the card */
.intro-card .row { gap: var(--sp-7); align-items: center; }
.intro-card__text { flex: 1 1 0; min-width: 0; max-width: none; }

.illust-bars {
  width: 260px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illust-bars svg {
  width: 100%;
  height: auto;
  max-width: 260px;
  display: block;
}

/* Tablet / smaller laptop — stack hero below text rather than crush it */
@media (max-width: 1100px) {
  .intro-card .row { flex-direction: column; align-items: stretch; }
  .illust-bars { width: 100%; max-width: 320px; align-self: flex-start; }
}

/* Re-stack the do-box: title+sub up top, checks left-aligned below in a row */
.do-box {
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  row-gap: var(--sp-3);
  column-gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5) var(--sp-6);
}
.do-box > .do-box__icon { grid-row: 1; grid-column: 1; }
.do-box > div:nth-child(2) { grid-row: 1; grid-column: 2; }
.do-box__checks {
  grid-row: 2;
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: var(--sp-2);
  border-top: 1px dashed rgba(16, 185, 129, 0.25);
}
.do-box__check {
  white-space: normal;
  font-weight: var(--fw-medium);
  color: var(--econ-green-700);
}

/* Session meta — three columns of equal weight */
.session-meta {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-7);
}
.session-meta__cta { margin-left: 0; }
.session-meta__item { gap: var(--sp-4); }


/* ============================================================
   4. CARDS 2 & 3 — coloured topic banner + accent treatment
   These are added by app.js as a wrapper around the cause cards.
   ============================================================ */

.cause-banner {
  margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)) var(--sp-6);
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  position: relative;
  overflow: hidden;
}
.cause-banner::after {
  content: '';
  position: absolute;
  right: -40px; top: -20px;
  width: 180px; height: 180px;
  border-radius: 50%;
  opacity: 0.12;
}
.cause-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}
.cause-banner__pill-dot {
  width: 10px; height: 10px; border-radius: var(--r-full);
}
.cause-banner__main {
  flex: 1;
  position: relative;
  z-index: 1;
}
.cause-banner__line {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}

.cause-banner--green        { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.cause-banner--green::after { background: var(--econ-green); }
.cause-banner--green .cause-banner__pill { color: var(--econ-green-700); }
.cause-banner--green .cause-banner__pill-dot { background: var(--econ-green); }
.cause-banner--green .cause-banner__line { color: var(--econ-green-700); }

.cause-banner--amber        { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); }
.cause-banner--amber::after { background: var(--econ-amber); }
.cause-banner--amber .cause-banner__pill { color: var(--econ-amber-700); }
.cause-banner--amber .cause-banner__pill-dot { background: var(--econ-amber); }
.cause-banner--amber .cause-banner__line { color: var(--econ-amber-700); }

/* Two-up layout for "Causes" and "Hallmarks" on cards 2-3 */
.cause-twoup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) {
  .cause-twoup { grid-template-columns: 1fr; }
}

/* Accent strips on the cause-col blocks */
.cause-col { position: relative; overflow: hidden; }
.cause-col::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--econ-gray-300);
}
.cause-col--causes::before    { background: var(--econ-blue); }
.cause-col--hallmark::before  { background: var(--econ-green); }
.cause-col--hallmark-amber::before { background: var(--econ-amber); }

/* Diagram now centres in its own panel with a soft frame */
.mech-row {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.mech-diagram {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-md);
}
.mech-diagram svg {
  width: 100%;
  height: auto;
  max-width: 340px;
  display: block;
  margin: 0 auto;
}
.mech-diagram__caption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  text-align: center;
  font-style: italic;
}

@media (max-width: 900px) {
  .mech-row { grid-template-columns: 1fr; }
}


/* ============================================================
   5. POP-UP BOOK INTERACTIONS
   ============================================================ */

/* --- Card 1 framing: branches as tappable flaps --- */
.branch-cal {
  position: relative;
  user-select: none;
}
.branch-cal__sub.is-hidden {
  display: none;
}
.branch-cal[data-flap] .branch-cal__sub {
  animation: econ-flap-open 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.branch-cal__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.branch-cal__hint::after {
  content: '+';
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: var(--r-full);
  background: var(--econ-gray-200);
  color: var(--econ-ink);
  text-align: center;
  line-height: 14px;
  font-weight: 800;
  transition: transform 0.22s ease, background 0.22s ease;
}
.branch-cal.is-open .branch-cal__hint::after {
  transform: rotate(45deg);
  background: var(--econ-gray-300);
}

/* --- Card 4 diagnose: tap-to-reveal answer --- */
.scenario__reveal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  background: var(--econ-white);
  color: var(--econ-ink);
  border: 1.5px solid var(--econ-gray-300);
  cursor: pointer;
  transition: all 0.18s ease;
}
.scenario__reveal:hover {
  background: var(--econ-gray-50);
  border-color: var(--econ-ink);
  transform: translateY(-1px);
}
.scenario__reveal-icon {
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scenario__answer.is-hidden {
  display: none;
}
.scenario__answer:not(.is-hidden) {
  animation: econ-slide-reveal 0.36s ease both;
}
.scenario__reveal.is-used {
  display: none;
}
.scenario--green   .scenario__reveal:hover { border-color: var(--econ-green);  color: var(--econ-green-700);  }
.scenario--amber   .scenario__reveal:hover { border-color: var(--econ-amber);  color: var(--econ-amber-700);  }
.scenario--purple  .scenario__reveal:hover { border-color: var(--econ-purple); color: var(--econ-purple-700); }

/* --- Card 5 cliffhanger: clickable "Why?" --- */
.cliffhanger {
  display: block;
  margin: var(--sp-6) auto var(--sp-3);
  padding: var(--sp-5) var(--sp-8);
  border: none;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-display) !important;
  font-variation-settings: var(--fraunces-display);
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue-dark);
  text-align: center;
  position: relative;
  letter-spacing: -0.02em;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.22s ease;
  animation: econ-tease-bob 2.4s ease-in-out infinite;
}
.cliffhanger:hover {
  transform: scale(1.06) rotate(-1deg);
  color: var(--econ-blue);
}
.cliffhanger::before,
.cliffhanger::after {
  position: absolute;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  color: var(--econ-blue);
  opacity: 0.55;
  text-transform: uppercase;
}
.cliffhanger::before {
  content: '↓ tap to find out';
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.cliffhanger.is-revealed {
  animation: none;
  transform: scale(0.85);
  color: var(--econ-ink);
  pointer-events: none;
}
.cliffhanger.is-revealed::before { display: none; }

.cliffhanger-reveal {
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid var(--econ-blue);
  box-shadow: var(--shadow-md);
  display: none;
}
.cliffhanger-reveal.is-revealed {
  display: block;
  animation: econ-slide-reveal 0.5s ease both;
}
.cliffhanger-reveal__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--econ-blue-dark);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.cliffhanger-reveal__title::before {
  content: '🎯';
  font-size: 18px;
}
.cliffhanger-reveal__text {
  font-size: var(--fs-base);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}
.cliffhanger-reveal__hints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.cliffhanger-reveal__hint {
  background: var(--econ-white);
  border: 1px solid var(--econ-blue-100);
  padding: 6px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-blue-dark);
}
.cliffhanger-reveal__cta {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--econ-blue-dark);
  font-weight: var(--fw-semi);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.cliffhanger-reveal__cta::before {
  content: '→';
  font-size: 18px;
  font-weight: 800;
}

/* When cliffhanger is revealed, the "Next card" button starts pulsing */
.btn--pulse {
  animation: econ-pulse-attention 1.6s ease-in-out infinite;
}

/* --- Card 6 mechanisms: staggered reveal on card load --- */
.mech-tile {
  opacity: 0;
  animation: econ-rise-in 0.5s ease both;
}
.mech-tile:nth-child(1) { animation-delay: 0.05s; }
.mech-tile:nth-child(2) { animation-delay: 0.18s; }
.mech-tile:nth-child(3) { animation-delay: 0.31s; }
.mech-tile:nth-child(4) { animation-delay: 0.44s; }

/* --- Card 7 deflation: tap-to-reveal flaps --- */
.def-mech-row {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
.def-mech-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.def-mech-row__hint {
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  font-weight: var(--fw-semi);
  letter-spacing: 0.3px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.def-mech-row__hint::before {
  content: '+';
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--econ-gray-200);
  color: var(--econ-ink);
  font-weight: 800;
  text-align: center;
  line-height: 12px;
  font-size: 11px;
  transition: transform 0.22s ease, background 0.22s ease;
}
.def-mech-row.is-open .def-mech-row__hint { display: none; }
.def-mech-row__text.is-hidden { display: none; }
.def-mech-row__text:not(.is-hidden) {
  animation: econ-slide-reveal 0.36s ease both;
}


/* ============================================================
   6. EXAM EDGE — slightly punchier
   ============================================================ */

.exam-edge {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}
.exam-edge::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--econ-amber) 0%, var(--econ-amber-600) 100%);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}


/* ============================================================
   7. CLIFFHANGER container — sits inside puzzle-visual
   make it a button instead of a div in the markup
   ============================================================ */
.puzzle-visual { padding-bottom: var(--sp-4); }


/* ============================================================
   8. Reduced motion — respect user setting
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   ============================================================
   V3 DESIGN LANGUAGE — single left accent, themed titles
   ----------------------------------------------------------------
   Rule: each content box has ONE coloured left accent (single
   stripe, never doubled). The box's title takes that same colour.
   No grey headers on themed boxes.
   ============================================================
   ============================================================ */

/* Suppress the v2 ::before accents that doubled with original border-lefts */
.exam-edge::before,
.cause-col::before {
  display: none;
}

/* --- Exam-edge: amber gem, single stripe --- */
.exam-edge {
  border-left: 4px solid var(--econ-amber);
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: var(--econ-amber-100);
}
.exam-edge__title { color: var(--econ-amber-700); }

/* --- Cause-col: convert v2 ::before stripe to a real border-left --- */
.cause-col { border-left: 4px solid var(--econ-gray-300); }
.cause-col--causes              { border-left-color: var(--econ-blue);  }
.cause-col--causes .cause-col__title       { color: var(--econ-blue-700);  }
.cause-col--hallmark            { border-left-color: var(--econ-green); }
.cause-col--hallmark .cause-col__title     { color: var(--econ-green-700); }
.cause-col--hallmark-amber      { border-left-color: var(--econ-amber); }
.cause-col--hallmark-amber .cause-col__title { color: var(--econ-amber-700); }

/* --- UK examples: blue accent, themed title --- */
.uk-examples {
  border-left: 4px solid var(--econ-blue);
  background: var(--econ-blue-50);
}
.uk-examples__title { color: var(--econ-blue-700); }

/* --- Policy box: already amber border-left, just colour the title --- */
.policy-box__title { color: var(--econ-amber-700); }

/* --- Dilemma: rose accent, ensure title is themed --- */
.dilemma__title { color: var(--econ-rose-600); }

/* --- Classical box: blue accent, themed title --- */
.classical-box__title { color: var(--econ-blue-700); }

/* --- Connection box: green accent, themed title --- */
.connection-box__title { color: var(--econ-green-700); }

/* --- Bridge: purple (forward-looking next step) --- */
.bridge {
  border-left: 4px solid var(--econ-purple);
  background: var(--econ-purple-50);
}
.bridge__title { color: var(--econ-purple-700); }

/* --- Deflation mechanism row: rose (warning) --- */
.def-mech-row__title { color: var(--econ-rose-600); }

/* --- Deflation examples list: blue (knowledge) --- */
.def-examples {
  border-left: 4px solid var(--econ-blue);
  background: var(--econ-blue-50);
}
.def-examples__title { color: var(--econ-blue-700); }

/* --- Do-box (intro green checklist): green accent --- */
.do-box { border-left: 4px solid var(--econ-green); }

/* --- Mech-tiles (card 6): each tone gets its accent + title colour --- */
.mech-tile--blue   { border-left: 4px solid var(--econ-blue);  }
.mech-tile--green  { border-left: 4px solid var(--econ-green); }
.mech-tile--amber  { border-left: 4px solid var(--econ-amber); }
.mech-tile--rose   { border-left: 4px solid var(--econ-rose);  }
.mech-tile--blue  .mech-tile__title { color: var(--econ-blue-700);  }
.mech-tile--green .mech-tile__title { color: var(--econ-green-700); }
.mech-tile--amber .mech-tile__title { color: var(--econ-amber-700); }
.mech-tile--rose  .mech-tile__title { color: var(--econ-rose-600);  }

/* --- Scenario tiles (card 4 diagnose): tone-coloured accent --- */
.scenario--green   { border-left: 4px solid var(--econ-green);  }
.scenario--amber   { border-left: 4px solid var(--econ-amber);  }
.scenario--purple  { border-left: 4px solid var(--econ-purple); }

/* --- Cliffhanger reveal panel: blue --- */
.cliffhanger-reveal { border-left: 4px solid var(--econ-blue); }

/* --- Callouts: ensure each variant has a left accent --- */
.callout--success { border-left: 4px solid var(--econ-green); }
.callout--info    { border-left: 4px solid var(--econ-blue);  }
.callout--warn    { border-left: 4px solid var(--econ-amber); }
.callout--purple  { border-left: 4px solid var(--econ-purple);}
.callout--rose    { border-left: 4px solid var(--econ-rose);  }


/* ============================================================
   ============================================================
   V4 LAYOUT + ICON SYSTEM
   - Full-width diagram modifier for cause cards
   - Cause-twoup (Causes + Hallmarks side-by-side)
   - Standardised icon badge: 32px circle, themed bg, white icon
   ============================================================
   ============================================================ */

/* Wide diagram fills the card width — used on cause cards */
.mech-diagram--wide {
  margin-bottom: var(--sp-5);
}
.mech-diagram--wide svg {
  max-width: 100%;
}

/* Cause-twoup: causes + hallmarks side-by-side, equal columns */
.cause-twoup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) {
  .cause-twoup { grid-template-columns: 1fr; }
}


/* ============================================================
   STANDARDISED ICON BADGE — every box icon follows this pattern.
   Reference: .exam-edge__star (purple -> now amber).
   Pattern: 32px circle, theme-coloured background, white icon.
   ============================================================ */

/* Fix exam-edge star to match its (new) amber accent */
.exam-edge__star {
  background: var(--econ-amber);
  width: 32px;
  height: 32px;
  font-size: 16px;
}

/* Common badge shape for all other box icons */
.uk-examples__flag,
.policy-box__icon,
.dilemma__icon,
.classical-box__icon,
.connection-box__icon,
.bridge__icon,
.def-mech-row__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #FFFFFF;
  line-height: 1;
}

/* Theme colour per box */
.uk-examples__flag    { background: var(--econ-blue); font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }
.policy-box__icon     { background: var(--econ-amber);  }
.dilemma__icon        { background: var(--econ-rose);   }
.classical-box__icon  { background: var(--econ-blue);   }
.connection-box__icon { background: var(--econ-green);  }
.bridge__icon         { background: var(--econ-purple); font-weight: 800; }
.def-mech-row__icon   { background: var(--econ-rose);   }

/* Callout icons too — circular themed badges */
.callout__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
}
.callout--success .callout__icon { background: var(--econ-green);  color: #FFFFFF; }
.callout--info    .callout__icon { background: var(--econ-blue);   color: #FFFFFF; }
.callout--warn    .callout__icon { background: var(--econ-amber);  color: #FFFFFF; }
.callout--purple  .callout__icon { background: var(--econ-purple); color: #FFFFFF; }
.callout--rose    .callout__icon { background: var(--econ-rose);   color: #FFFFFF; }
.callout__icon svg { width: 16px; height: 16px; }


/* ============================================================
   ============================================================
   V5 FINE-TUNES
   - Exam-edge reverts to purple (the gem character, theme-independent)
   - Intro icons unified to 36px so titles align across boxes
   - "Your goal" column gets more space so text stays on 2 lines
   ============================================================
   ============================================================ */

/* --- Exam-edge: ALWAYS purple (the gem stays purple) ---
   Pattern matches other coloured boxes (.callout--success uses
   green-50, .dilemma uses rose-50 etc — solid *-50 tint).
   Tailwind's purple-50 is too light/ambiguous (reads pink); using
   violet-100 instead — same pattern, more saturation, unambiguous. */
.exam-edge {
  border-left: 4px solid #6B21A8;
  background: #EDE9FE;             /* violet-100 — clearly purple, not pink */
  border-color: #6b21a8;           /* violet-200 */
}
.exam-edge__title { color: #6B21A8; }
.exam-edge__star  { background: #6B21A8; }


/* --- Intro page: unify all icon badges to 36px so titles line up --- */
.callout__icon {
  width: 36px;
  height: 36px;
}
.callout__icon svg { width: 18px; height: 18px; }

.do-box__icon {
  width: 36px;
  height: 36px;
}
.session-meta__icon {
  width: 36px;
  height: 36px;
}

/* All three intro boxes now use the same 36px badge + sp-5 padding + sp-4 gap,
   so their title baselines align vertically. */


/* --- Session-meta: give "Your goal" more space, force 2-line text --- */
.session-meta {
  grid-template-columns: auto 1fr auto;
}


/* ============================================================
   ============================================================
   V6 DESIGN RULE — RESERVED ICON COLUMN
   ----------------------------------------------------------------
   Every box has two regions:
     1. ICON COLUMN (fixed 36px on the left): ONLY the badge lives here.
     2. CONTENT COLUMN (everything to the right of the icon + gap):
        all titles, body text, lists, checks, ratings — every row of
        content aligns starting from this column's left edge.

   No content row may bleed back into the icon column.

   This is enforced naturally by flex-based boxes (which use a single
   content child). For grid-based boxes (do-box), it must be set
   explicitly via grid-column.
   ============================================================
   ============================================================ */

/* Do-box: bottom check row stays in the content column,
   not spanning back across the icon column. */
.do-box__checks {
  grid-column: 2;
}

/* The dashed separator between top content and the checks row should
   also start at the content-column edge, so it visually connects to the
   title above it. Using a left-margin trick rather than border-left
   so it integrates with existing border-top styling. */
.do-box__checks {
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
  margin-left: 0;
}


/* ============================================================
   ============================================================
   V7 ENFORCING ICON-COLUMN RULE on the last two boxes
   - Dilemma: restructure to [icon][body] flex; title + lines both
     align in the body column
   - Def-examples: add a proper icon badge; title + list both align
     in the body column
   ============================================================
   ============================================================ */

/* --- Dilemma: icon | body layout --- */
.dilemma {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
}
.dilemma__body {
  flex: 1;
  min-width: 0;
}
.dilemma__icon {
  /* picked up by v4 icon system: 32px circle, rose bg, white glyph
     — bump to 36px to match the other primary box icons */
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
}
.dilemma__title {
  display: block;
  margin-bottom: var(--sp-2);
  /* colour already set to rose by v3 */
}
.dilemma__lines {
  display: block;
  /* No longer a separate row — it's inside the body column,
     so it naturally aligns with the title above it. */
}

/* --- Def-examples: icon | body layout --- */
.def-examples {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
}
.def-examples__body {
  flex: 1;
  min-width: 0;
}
.def-examples__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--econ-blue);
  color: #FFFFFF;
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1;
}
.def-examples__title {
  display: block;
  margin-bottom: var(--sp-2);
  /* colour already set to blue-700 by v3 */
}
.def-examples__list {
  display: block;
}


/* ============================================================
   ============================================================
   V8 TOPIC 2 SUPPORT
   - Purple branch variant (4th branch for AD components)
   - Hallmark accent variants (blue, purple, generic)
   - Paired template (Card 6: G + Net Trade)
   ============================================================
   ============================================================ */

/* --- 4th branch tone: purple (used for X−M in AD topic) --- */
.branch-cal--purple {
  background: var(--econ-purple-50);
  border-left-color: var(--econ-purple-700);
}
.branch-cal--purple .branch-cal__dot { background: var(--econ-purple-700); }
.branch-cal--purple .branch-cal__label { color: var(--econ-purple-700); }

/* --- 5th branch tone: rose --- */
.branch-cal--rose {
  background: var(--econ-rose-50);
  border-left-color: var(--econ-rose);
}
.branch-cal--rose .branch-cal__dot { background: var(--econ-rose); }
.branch-cal--rose .branch-cal__label { color: var(--econ-rose); }

/* --- Hallmark accent: generalised variants --- */
.cause-col--hallmark-green       { border-left-color: var(--econ-green); }
.cause-col--hallmark-green .cause-col__title { color: var(--econ-green-700); }
.cause-col--hallmark-amber       { border-left-color: var(--econ-amber); }
.cause-col--hallmark-amber .cause-col__title { color: var(--econ-amber-700); }
.cause-col--hallmark-blue        { border-left-color: var(--econ-blue); }
.cause-col--hallmark-blue .cause-col__title { color: var(--econ-blue-700); }
.cause-col--hallmark-purple      { border-left-color: var(--econ-purple-700); }
.cause-col--hallmark-purple .cause-col__title { color: var(--econ-purple-700); }


/* ============================================================
   PAIRED TEMPLATE — two components side-by-side (Card 6 of AD)
   ============================================================ */

.paired-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
@media (max-width: 900px) {
  .paired-grid { grid-template-columns: 1fr; }
}

.paired-half {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-left: 4px solid var(--econ-gray-300);
  box-shadow: var(--shadow-sm);
}
.paired-half--blue   { border-left-color: var(--econ-blue);        background: var(--econ-blue-50); }
.paired-half--green  { border-left-color: var(--econ-green);       background: var(--econ-green-50); }
.paired-half--amber  { border-left-color: var(--econ-amber);       background: var(--econ-amber-50); }
.paired-half--purple { border-left-color: var(--econ-purple-700);  background: var(--econ-purple-50); }
.paired-half--rose   { border-left-color: var(--econ-rose);        background: var(--econ-rose-50); }

.paired-half__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.paired-half--blue   .paired-half__label { color: var(--econ-blue-700); }
.paired-half--green  .paired-half__label { color: var(--econ-green-700); }
.paired-half--amber  .paired-half__label { color: var(--econ-amber-700); }
.paired-half--purple .paired-half__label { color: var(--econ-purple-700); }

.paired-half__drivers ul {
  list-style: none;
  padding: 0;
}
.paired-half__drivers li {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  position: relative;
  line-height: var(--lh-relaxed);
}
.paired-half__drivers li::before {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--econ-gray-400);
}
.paired-half--blue   .paired-half__drivers li::before { background: var(--econ-blue); }
.paired-half--green  .paired-half__drivers li::before { background: var(--econ-green); }
.paired-half--amber  .paired-half__drivers li::before { background: var(--econ-amber); }
.paired-half--purple .paired-half__drivers li::before { background: var(--econ-purple-700); }
.paired-half--rose   .paired-half__drivers li::before { background: var(--econ-rose); }

.paired-half__example {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--econ-gray-300);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}
.paired-half__example-flag {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--econ-blue);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}


/* ============================================================
   V9 — Cause banner: add blue and purple variants
   So that .paired template cards (and any future cause card using
   blue/purple themes) get the same styled banner treatment as
   consumption (green) and investment (amber).
   ============================================================ */

.cause-banner--blue          { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); }
.cause-banner--blue::after   { background: var(--econ-blue); }
.cause-banner--blue .cause-banner__pill { color: var(--econ-blue-700); }
.cause-banner--blue .cause-banner__pill-dot { background: var(--econ-blue); }
.cause-banner--blue .cause-banner__line { color: var(--econ-blue-700); }

.cause-banner--purple        { background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%); }
.cause-banner--purple::after { background: var(--econ-purple-700); }
.cause-banner--purple .cause-banner__pill { color: var(--econ-purple-700); }
.cause-banner--purple .cause-banner__pill-dot { background: var(--econ-purple-700); }
.cause-banner--purple .cause-banner__line { color: var(--econ-purple-700); }


/* ============================================================
   ============================================================
   V13 — AD-INTERACTIVE TEMPLATE (LANDSCAPE)
   Full-width diagram at top, horizontal tab strip below, then
   the active tab's content panel underneath.

   Replaces the V10 portrait layout where the diagram was squeezed
   into a 1.5fr column. The diagram is the pedagogical centrepiece
   and deserves the full canvas width.
   ============================================================
   ============================================================ */

.ad-interactive {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* --- 1. Full-width diagram panel --- */
.ad-interactive__diagram {
  background: #FFFFFF;
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ad-interactive__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Layer visibility — CSS state machine ---
   The container holds one of: .show-base, .show-extension, .show-shift.
   Layers fade in/out via opacity for smooth transitions. */

/* Visible in BASE state */
.ad-svg .layer-curve-solid,
.ad-svg .layer-e1,
.ad-svg .layer-legend-base {
  opacity: 1;
  transition: opacity 0.32s ease;
}

/* Hidden by default */
.ad-svg .layer-curve-dashed,
.ad-svg .layer-extension,
.ad-svg .layer-shift,
.ad-svg .layer-curve-label-shift,
.ad-svg .layer-legend-extension,
.ad-svg .layer-legend-shift {
  opacity: 0;
  transition: opacity 0.32s ease;
}

/* EXTENSION state */
.show-extension .ad-svg .layer-legend-base { opacity: 0; }
.show-extension .ad-svg .layer-legend-extension { opacity: 1; }
.show-extension .ad-svg .layer-extension { opacity: 1; }

/* SHIFT state */
.show-shift .ad-svg .layer-curve-solid > line { stroke: #94A3B8; stroke-dasharray: 6 4; transition: stroke 0.32s ease; }
.show-shift .ad-svg .layer-curve-solid > text { opacity: 0; }
.show-shift .ad-svg .layer-curve-label-shift { opacity: 1; }
.show-shift .ad-svg .layer-e1 { opacity: 0; }
.show-shift .ad-svg .layer-legend-base { opacity: 0; }
.show-shift .ad-svg .layer-legend-shift { opacity: 1; }
.show-shift .ad-svg .layer-shift { opacity: 1; }

/* --- 2. Horizontal tab strip --- */
.ad-interactive__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 760px) {
  .ad-interactive__tabs { grid-template-columns: 1fr; }
}

.ad-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
}
.ad-tab:hover {
  background: var(--econ-gray-50);
  transform: translateY(-1px);
}
.ad-tab.is-active {
  border-color: var(--econ-blue);
  background: var(--econ-blue-50);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.18);
}

.ad-tab__num {
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: var(--econ-gray-200);
  color: var(--econ-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.ad-tab.is-active .ad-tab__num {
  background: var(--econ-blue);
  color: #FFFFFF;
}

.ad-tab__label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: var(--lh-tight);
}
.ad-tab.is-active .ad-tab__label {
  color: var(--econ-blue-700);
}

/* --- 3. Content panel below tabs --- */
.ad-interactive__panels {
  position: relative;
}

.ad-panel {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-left: 4px solid var(--econ-blue);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: none;
}
.ad-panel.is-active {
  display: block;
  animation: ad-panel-rise 0.32s ease;
}

@keyframes ad-panel-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ad-panel__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--econ-blue-700);
  margin-bottom: var(--sp-3);
}

.ad-panel__body {
  font-size: var(--fs-base);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}



/* ============================================================
   ============================================================
   V12 — TRANSMISSION-CHAIN TEMPLATE
   Card 3 of Monetary Policy topic.
   Three-zone flow row at top (Action → Channels → Outcome),
   then a tap-to-reveal panel showing the chain steps.
   ============================================================
   ============================================================ */

.tc-flow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2.5fr minmax(120px, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
  margin-bottom: var(--sp-5);
}
@media (max-width: 760px) {
  .tc-flow { grid-template-columns: 1fr; }
}

/* --- Action & Outcome bookends --- */
.tc-action, .tc-outcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.tc-action {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid var(--econ-amber);
}
.tc-action__eyebrow {
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  color: var(--econ-amber-700);
  letter-spacing: 2px;
  margin-bottom: var(--sp-2);
}
.tc-action__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--econ-amber-700);
  line-height: var(--lh-tight);
}
.tc-outcome {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
  border: 1px solid var(--econ-green);
}
.tc-outcome__eyebrow {
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  color: var(--econ-green-700);
  letter-spacing: 2px;
  margin-bottom: var(--sp-2);
}
.tc-outcome__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--econ-green-700);
  line-height: var(--lh-tight);
}

/* --- Channel pills (the 5 buttons) --- */
.tc-channels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  justify-content: center;
}

.tc-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
}
.tc-channel:hover {
  background: var(--econ-gray-50);
  transform: translateX(2px);
}

.tc-channel__dot {
  width: 12px; height: 12px;
  border-radius: var(--r-full);
  background: var(--econ-gray-400);
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.tc-channel__label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}

.tc-channel__chev {
  color: var(--econ-ink);
  font-size: 14px;
  transition: transform 0.18s ease, color 0.18s ease;
}

/* Channel theming — when ACTIVE, show its colour */
.tc-channel--green.is-active  { border-color: var(--econ-green);  background: var(--econ-green-50);  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18); }
.tc-channel--green.is-active .tc-channel__dot    { background: var(--econ-green); }
.tc-channel--green.is-active .tc-channel__label  { color: var(--econ-green-700); }
.tc-channel--green.is-active .tc-channel__chev   { color: var(--econ-green); transform: translateX(2px); }

.tc-channel--amber.is-active  { border-color: var(--econ-amber);  background: var(--econ-amber-50);  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18); }
.tc-channel--amber.is-active .tc-channel__dot    { background: var(--econ-amber); }
.tc-channel--amber.is-active .tc-channel__label  { color: var(--econ-amber-700); }
.tc-channel--amber.is-active .tc-channel__chev   { color: var(--econ-amber); transform: translateX(2px); }

.tc-channel--blue.is-active   { border-color: var(--econ-blue);   background: var(--econ-blue-50);   box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18); }
.tc-channel--blue.is-active .tc-channel__dot     { background: var(--econ-blue); }
.tc-channel--blue.is-active .tc-channel__label   { color: var(--econ-blue-700); }
.tc-channel--blue.is-active .tc-channel__chev    { color: var(--econ-blue); transform: translateX(2px); }

.tc-channel--purple.is-active { border-color: var(--econ-purple-700); background: var(--econ-purple-50); box-shadow: 0 2px 8px rgba(126, 34, 206, 0.18); }
.tc-channel--purple.is-active .tc-channel__dot   { background: var(--econ-purple-700); }
.tc-channel--purple.is-active .tc-channel__label { color: var(--econ-purple-700); }
.tc-channel--purple.is-active .tc-channel__chev  { color: var(--econ-purple-700); transform: translateX(2px); }

.tc-channel--rose.is-active   { border-color: var(--econ-rose);   background: var(--econ-rose-50);   box-shadow: 0 2px 8px rgba(225, 29, 72, 0.18); }
.tc-channel--rose.is-active .tc-channel__dot     { background: var(--econ-rose); }
.tc-channel--rose.is-active .tc-channel__label   { color: var(--econ-rose-700); }
.tc-channel--rose.is-active .tc-channel__chev    { color: var(--econ-rose); transform: translateX(2px); }

/* --- Chain panel (the expanded view) --- */
.tc-panels {
  position: relative;
  margin-bottom: var(--sp-5);
}

.tc-panel {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-left: 4px solid var(--econ-gray-300);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: none;
}
.tc-panel.is-active {
  display: block;
  animation: tc-panel-rise 0.32s ease;
}

@keyframes tc-panel-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tc-panel--green  { border-left-color: var(--econ-green); }
.tc-panel--amber  { border-left-color: var(--econ-amber); }
.tc-panel--blue   { border-left-color: var(--econ-blue); }
.tc-panel--purple { border-left-color: var(--econ-purple-700); }
.tc-panel--rose   { border-left-color: var(--econ-rose); }

.tc-panel__header {
  margin-bottom: var(--sp-4);
}
.tc-panel__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
}
.tc-panel--green  .tc-panel__title { color: var(--econ-green-700); }
.tc-panel--amber  .tc-panel__title { color: var(--econ-amber-700); }
.tc-panel--blue   .tc-panel__title { color: var(--econ-blue-700); }
.tc-panel--purple .tc-panel__title { color: var(--econ-purple-700); }
.tc-panel--rose   .tc-panel__title { color: var(--econ-rose-700); }

.tc-chain {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tc-step;
}
.tc-chain__step {
  position: relative;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 48px;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
  counter-increment: tc-step;
}
.tc-chain__step::before {
  content: counter(tc-step);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--econ-gray-100);
  color: var(--econ-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-extrabold);
}
.tc-panel--green  .tc-chain__step::before { background: var(--econ-green-50);  color: var(--econ-green-700); }
.tc-panel--amber  .tc-chain__step::before { background: var(--econ-amber-50);  color: var(--econ-amber-700); }
.tc-panel--blue   .tc-chain__step::before { background: var(--econ-blue-50);   color: var(--econ-blue-700); }
.tc-panel--purple .tc-chain__step::before { background: var(--econ-purple-50); color: var(--econ-purple-700); }
.tc-panel--rose   .tc-chain__step::before { background: var(--econ-rose-50);   color: var(--econ-rose-700); }

/* Connecting line between steps */
.tc-chain__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 22px;
  top: calc(50% + 14px);
  width: 0;
  height: calc(100% - 28px);
  border-left: 2px dashed var(--econ-gray-300);
}

.tc-panel__micro {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--econ-gray-50);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-relaxed);
}

/* ════════════════════════════════════════════════════════════════
   QUIZ MODULE
   Multi-format quiz engine — 12 question types
   All styles namespaced under .quiz-*
   ════════════════════════════════════════════════════════════════ */

/* ── Quiz container & shell hooks ── */
.quiz-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-7) var(--sp-12);
}
@media (max-width: 720px) {
  .quiz-wrap { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
}

/* ── Intro hero (pre-quiz) ── */
.quiz-hero {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-7);
  box-shadow: var(--shadow-md);
}
.quiz-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--econ-purple-700);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.quiz-hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--econ-purple);
}
.quiz-hero__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.quiz-hero__lede {
  font-size: var(--fs-md);
  color: var(--econ-ink);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
  max-width: 640px;
}
.quiz-hero__meta {
  display: flex; gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--econ-gray-200);
}
.quiz-hero__meta-item {
  display: flex; flex-direction: column; gap: 2px;
}
.quiz-hero__meta-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-ink);
}
.quiz-hero__meta-value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}
.quiz-start-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-6);
  background: var(--econ-ink);
  color: var(--econ-white);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}
.quiz-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 20, 38, 0.18);
}

/* ── Question card header (badge + score + progress) ── */
.quiz-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-md);
  animation: quiz-fade .3s ease;
}
@keyframes quiz-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.quiz-type-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid;
}
.quiz-type-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.quiz-score {
  text-align: right;
}
.quiz-score__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-bottom: 2px;
}
.quiz-score__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: 1;
}

.quiz-progress {
  height: 6px;
  background: var(--econ-gray-100);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.quiz-progress__fill {
  height: 100%;
  background: var(--econ-green);
  border-radius: 3px;
  transition: width .5s ease;
}
.quiz-qnum {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-bottom: var(--sp-5);
}

.quiz-stem {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--econ-ink);
  margin-bottom: var(--sp-5);
}
.quiz-stem strong { font-weight: var(--fw-bold); }
.quiz-stem em { font-style: italic; }

.quiz-instr {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-style: italic;
  margin-bottom: var(--sp-4);
}

/* ── Feedback boxes ── */
.quiz-fb {
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  margin-top: var(--sp-5);
  display: none;
}
.quiz-fb.show { display: block; animation: quiz-fade .3s ease; }
.quiz-fb--ok {
  background: var(--econ-green-50);
  border: 1px solid var(--econ-green-100);
  border-left: 4px solid var(--econ-green);
}
.quiz-fb--bad {
  background: var(--econ-rose-50);
  border: 1px solid var(--econ-rose-100);
  border-left: 4px solid var(--econ-rose);
}
.quiz-fb__head {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.quiz-fb--ok .quiz-fb__head { color: var(--econ-green-700); }
.quiz-fb--bad .quiz-fb__head { color: var(--econ-rose-700); }
.quiz-fb__body {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--econ-ink);
}
.quiz-fb__body strong { font-weight: var(--fw-bold); }
.quiz-fb__body em { font-style: italic; }
.quiz-fb__body br { display: block; margin: var(--sp-1) 0; }

/* ── Buttons ── */
.quiz-next-row {
  display: none;
  margin-top: var(--sp-5);
}
.quiz-next-row.show {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.quiz-btn {
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.quiz-btn--primary {
  background: var(--econ-ink);
  color: var(--econ-white);
}
.quiz-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 20, 38, 0.18);
}
.quiz-btn--secondary {
  background: var(--econ-white);
  color: var(--econ-ink);
  border: 1px solid var(--econ-gray-200);
}
.quiz-btn--secondary:hover {
  border-color: var(--econ-ink);
  transform: translateY(-1px);
}
.quiz-btn--submit {
  background: var(--econ-amber);
  color: var(--econ-ink);
}
.quiz-btn--submit:hover:not(:disabled) {
  background: var(--econ-amber-600);
  transform: translateY(-1px);
}
.quiz-btn--submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.quiz-submit-row {
  text-align: center;
  margin: var(--sp-5) 0 0;
}

/* ════════════════════════════════════════════════════════════════
   QUESTION TYPES
   ════════════════════════════════════════════════════════════════ */

/* ── MCQ / Confidence MCQ / Calculation / Data table / Diagram ── */
.quiz-opts {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.quiz-opt {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex; gap: var(--sp-4);
  align-items: flex-start;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.quiz-opt:hover:not(.locked) {
  border-color: var(--econ-ink);
  background: var(--econ-gray-50);
}
.quiz-opt.locked { cursor: default; }
.quiz-opt.correct {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-opt.wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-opt.reveal {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-opt__letter {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  width: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--econ-ink);
  letter-spacing: 0.05em;
}
.quiz-opt.correct .quiz-opt__letter,
.quiz-opt.reveal  .quiz-opt__letter { color: var(--econ-green-700); }
.quiz-opt.wrong   .quiz-opt__letter { color: var(--econ-rose-700); }
.quiz-opt__text {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--econ-ink);
}

/* ── Elastic sort (Visual Sort) ── */
.quiz-es-tally {
  display: flex; justify-content: center;
  margin: var(--sp-3) 0 var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-ink);
}
.quiz-es-tally strong {
  color: var(--econ-amber-700);
  margin-right: var(--sp-1);
}
.quiz-es-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.quiz-es-card {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: all 0.18s ease;
}
.quiz-es-card.classified {
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
}
.quiz-es-card.es-correct {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-es-card.es-wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-es-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.quiz-es-label {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--econ-ink);
  margin-bottom: var(--sp-1);
}
.quiz-es-note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  line-height: 1.4;
  margin-bottom: var(--sp-3);
  min-height: 1.4em;
}
.quiz-es-btns {
  display: flex; gap: var(--sp-2);
  width: 100%;
  margin-top: auto;
  flex-wrap: wrap;
}
.quiz-es-btn {
  flex: 1; min-width: 0;
  padding: 8px 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--econ-gray-200);
  background: var(--econ-white);
  color: var(--econ-ink);
  transition: all 0.18s ease;
  line-height: 1.3;
}
.quiz-es-btn:hover:not(.locked) {
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
}
.quiz-es-btn.locked { cursor: default; }
.quiz-es-btn.picked {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
}
.quiz-es-btn.right-pick {
  background: var(--econ-green-50) !important;
  border-color: var(--econ-green) !important;
  color: var(--econ-green-700) !important;
}
.quiz-es-btn.wrong-pick {
  background: var(--econ-rose-50) !important;
  border-color: var(--econ-rose) !important;
  color: var(--econ-rose-700) !important;
}
.quiz-es-btn.true-answer {
  background: var(--econ-green-50) !important;
  border-color: var(--econ-green) !important;
  color: var(--econ-green-700) !important;
  opacity: 0.75;
}

/* ── Calculation ── */
.quiz-calc-context {
  background: var(--econ-purple-50);
  border: 1px solid var(--econ-purple-100);
  border-left: 4px solid var(--econ-purple);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.quiz-calc-context__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-purple-700);
  margin-bottom: var(--sp-2);
}
.quiz-calc-context__text {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--econ-ink);
}
.quiz-calc-toggle {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  color: var(--econ-ink);
  padding: 8px 14px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all 0.18s ease;
}
.quiz-calc-toggle:hover { border-color: var(--econ-ink); }
.quiz-calc-working {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
  display: none;
}
.quiz-calc-working.show { display: block; animation: quiz-fade .3s ease; }
.quiz-calc-step {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--econ-gray-200);
  line-height: 1.55;
}
.quiz-calc-step:last-child {
  border-bottom: none;
  color: var(--econ-ink);
  font-weight: var(--fw-bold);
}
.quiz-calc-opt {
  display: grid !important;
  grid-template-columns: auto 1fr 1.4fr;
  gap: var(--sp-4);
  align-items: center;
}
.quiz-calc-ped {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  color: var(--econ-ink);
}
.quiz-calc-typ {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  margin-bottom: 2px;
}
.quiz-calc-rev {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-style: italic;
}
@media (max-width: 640px) {
  .quiz-calc-opt {
    grid-template-columns: auto 1fr;
  }
  .quiz-calc-opt > :last-child { grid-column: 1 / -1; }
}

/* ── Diagnostic pair ── */
.quiz-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 640px) {
  .quiz-pair-grid { grid-template-columns: 1fr; }
}
.quiz-pair-card {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.quiz-pair-card:hover:not(.locked) {
  border-color: var(--econ-ink);
  transform: translateY(-2px);
}
.quiz-pair-card.locked { cursor: default; }
.quiz-pair-card.winner {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-pair-card.loser { opacity: 0.5; }
.quiz-pair-card.chosen-wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-pair-header {
  background: var(--econ-gray-50);
  border-bottom: 1px solid var(--econ-gray-200);
  padding: var(--sp-3) var(--sp-4);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-2);
}
.quiz-pair-name {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--econ-ink);
}
.quiz-pair-badge {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  color: var(--econ-ink);
}
.quiz-pair-body {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--econ-ink);
}
.quiz-pair-body strong { font-weight: var(--fw-bold); }
.quiz-pair-body em { font-style: italic; }

/* ── Confidence panel ── */
.quiz-conf-panel {
  background: var(--econ-amber-50);
  border: 1px solid var(--econ-amber-100);
  border-left: 4px solid var(--econ-amber);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  display: none;
}
.quiz-conf-panel.show { display: block; animation: quiz-fade .3s ease; }
.quiz-conf-q {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-3);
  text-align: center;
}
.quiz-conf-btns {
  display: flex; gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.quiz-conf-btn {
  padding: 10px 18px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  border: 1.5px solid;
  background: var(--econ-white);
  transition: all 0.18s ease;
}
.quiz-conf-btn.certain { border-color: var(--econ-green); color: var(--econ-green-700); }
.quiz-conf-btn.certain:hover:not(:disabled) { background: var(--econ-green-50); }
.quiz-conf-btn.unsure  { border-color: var(--econ-amber); color: var(--econ-amber-700); }
.quiz-conf-btn.unsure:hover:not(:disabled)  { background: var(--econ-amber-50); }
.quiz-conf-btn.guess   { border-color: var(--econ-rose); color: var(--econ-rose-700); }
.quiz-conf-btn.guess:hover:not(:disabled)   { background: var(--econ-rose-50); }
.quiz-conf-btn:disabled { opacity: 0.4; cursor: default; }
.quiz-conf-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  margin-right: var(--sp-2);
}
.quiz-conf-tag.certain { background: var(--econ-green-50); color: var(--econ-green-700); }
.quiz-conf-tag.unsure  { background: var(--econ-amber-50); color: var(--econ-amber-700); }
.quiz-conf-tag.guess   { background: var(--econ-rose-50); color: var(--econ-rose-700); }

/* ── Odd one out ── */
.quiz-oo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 640px) { .quiz-oo-grid { grid-template-columns: 1fr; } }
.quiz-oo-card {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.quiz-oo-card:hover:not(.locked) {
  border-color: var(--econ-ink);
  transform: translateY(-2px);
}
.quiz-oo-card.locked { cursor: default; }
.quiz-oo-card.chosen-wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-oo-card.is-odd {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-oo-card.dimmed { opacity: 0.4; }
.quiz-oo-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.quiz-oo-label {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--econ-ink);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}
.quiz-oo-note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
}

/* ── Multi select ── */
.quiz-ms-opts {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.quiz-ms-opt {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex; gap: var(--sp-3);
  align-items: center;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.quiz-ms-opt:hover:not(.locked) {
  border-color: var(--econ-ink);
  background: var(--econ-gray-50);
}
.quiz-ms-opt.locked { cursor: default; }
.quiz-ms-opt.checked {
  border-color: var(--econ-ink);
  background: var(--econ-gray-50);
}
.quiz-ms-box {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  border: 2px solid var(--econ-gray-300);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  transition: all 0.18s ease;
}
.quiz-ms-opt.checked .quiz-ms-box {
  background: var(--econ-ink);
  border-color: var(--econ-ink);
  color: var(--econ-white);
}
.quiz-ms-opt.result-correct {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-ms-opt.result-correct .quiz-ms-box {
  background: var(--econ-green);
  border-color: var(--econ-green);
  color: var(--econ-white);
}
.quiz-ms-opt.result-wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-ms-opt.result-wrong .quiz-ms-box {
  background: var(--econ-rose);
  border-color: var(--econ-rose);
  color: var(--econ-white);
}
.quiz-ms-opt.result-missed {
  border-color: var(--econ-amber) !important;
  background: var(--econ-amber-50) !important;
}
.quiz-ms-opt.result-missed .quiz-ms-box {
  background: var(--econ-amber);
  border-color: var(--econ-amber);
  color: var(--econ-ink);
}
.quiz-ms-text {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--econ-ink);
}

/* ── Rank & Chain ── */
.quiz-rank-instr {
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-left: 4px solid var(--econ-blue);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.6;
}
.quiz-rank-tracker {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.quiz-rank-tracker__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-right: var(--sp-2);
}
.quiz-rank-slot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--econ-gray-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  background: var(--econ-white);
  transition: all 0.3s ease;
}
.quiz-rank-slot.filled {
  border-color: var(--econ-blue);
  color: var(--econ-blue);
  background: var(--econ-blue-50);
}
.quiz-rank-ends {
  display: flex; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.quiz-rank-end-lbl {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quiz-rank-end-lbl.most  { color: var(--econ-green-700); }
.quiz-rank-end-lbl.least { color: var(--econ-ink); }
.quiz-rank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 640px) { .quiz-rank-grid { grid-template-columns: 1fr; } }
.quiz-rank-item {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.quiz-rank-item:hover:not(.locked):not(.selected) {
  border-color: var(--econ-ink);
  transform: translateY(-2px);
}
.quiz-rank-item.locked { cursor: default; }
.quiz-rank-item.selected {
  border-color: var(--econ-blue);
  background: var(--econ-blue-50);
}
.quiz-rank-item.rank-correct {
  border-color: var(--econ-green) !important;
  background: var(--econ-green-50) !important;
}
.quiz-rank-item.rank-wrong {
  border-color: var(--econ-rose) !important;
  background: var(--econ-rose-50) !important;
}
.quiz-rank-badge {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--econ-gray-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  background: var(--econ-white);
  transition: all 0.3s ease;
}
.quiz-rank-item.selected .quiz-rank-badge {
  border-color: var(--econ-blue);
  color: var(--econ-blue);
  background: var(--econ-blue-50);
}
.quiz-rank-item.rank-correct .quiz-rank-badge {
  border-color: var(--econ-green);
  color: var(--econ-green-700);
  background: var(--econ-green-50);
}
.quiz-rank-item.rank-wrong .quiz-rank-badge {
  border-color: var(--econ-rose);
  color: var(--econ-rose-700);
  background: var(--econ-rose-50);
}
.quiz-rank-label {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--econ-ink);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
  padding-right: var(--sp-8);
}
.quiz-rank-note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  line-height: 1.5;
}

/* ── Para fill ── */
.quiz-para-box {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 16, "SOFT" 30, "WONK" 0;
  font-size: var(--fs-lg);
  line-height: 2;
  color: var(--econ-ink);
}
.quiz-para-anchor {
  font-style: italic;
  display: block;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--econ-gray-200);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.quiz-blank-pill {
  display: inline-block;
  background: var(--econ-blue-50);
  border: 2px solid var(--econ-blue-100);
  color: var(--econ-blue-700);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: 2px 10px;
  border-radius: var(--r-sm);
  vertical-align: middle;
  transition: all 0.3s ease;
  min-width: 80px;
  text-align: center;
}
.quiz-blank-pill.filled {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber-100);
  color: var(--econ-amber-700);
}
.quiz-blank-pill.pf-correct {
  background: var(--econ-green-50) !important;
  border-color: var(--econ-green) !important;
  color: var(--econ-green-700) !important;
}
.quiz-blank-pill.pf-wrong {
  background: var(--econ-rose-50) !important;
  border-color: var(--econ-rose) !important;
  color: var(--econ-rose-700) !important;
}
.quiz-pf-controls {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.quiz-pf-row {
  display: flex; align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.quiz-pf-row__num {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--econ-blue-700);
  width: 26px;
  flex-shrink: 0;
}
.quiz-pf-opt {
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  background: var(--econ-white);
  transition: all 0.18s ease;
}
.quiz-pf-opt:hover:not(.locked) { border-color: var(--econ-ink); }
.quiz-pf-opt.locked { cursor: default; }
.quiz-pf-opt.selected {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
}
.quiz-pf-opt.pf-opt-correct {
  background: var(--econ-green-50) !important;
  border-color: var(--econ-green) !important;
  color: var(--econ-green-700) !important;
}
.quiz-pf-opt.pf-opt-wrong {
  background: var(--econ-rose-50) !important;
  border-color: var(--econ-rose) !important;
  color: var(--econ-rose-700) !important;
}

/* ── Data table ── */
.quiz-tbl-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--econ-gray-200);
}
.quiz-tbl-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--econ-white);
}
.quiz-tbl-wrap thead {
  background: var(--econ-gray-50);
}
.quiz-tbl-wrap thead th {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--econ-ink);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--econ-gray-200);
}
.quiz-tbl-wrap tbody tr {
  border-bottom: 1px solid var(--econ-gray-200);
}
.quiz-tbl-wrap tbody tr:last-child { border-bottom: none; }
.quiz-tbl-wrap tbody tr:nth-child(even) { background: var(--econ-gray-50); }
.quiz-tbl-wrap tbody td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--econ-ink);
  vertical-align: middle;
}
.quiz-tbl-wrap tbody td:first-child { font-weight: var(--fw-semi); }

.quiz-question-secondary {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--econ-ink);
  margin-bottom: var(--sp-4);
}

/* ── Diagram interpretation ── */
.quiz-diag-box {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  text-align: center;
}
.quiz-diag-box svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.quiz-diag-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-top: var(--sp-3);
}

/* ── Results screen ── */
.quiz-results {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  box-shadow: var(--shadow-md);
}
.quiz-results__hero {
  text-align: center;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--econ-gray-200);
}
.quiz-results__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.quiz-results__score {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-weight: var(--fw-bold);
  font-size: 80px;
  line-height: 1;
  margin: var(--sp-3) 0;
}
.quiz-results__score-denom {
  font-size: 36px;
  color: var(--econ-gray-400);
  font-weight: var(--fw-normal);
}
.quiz-results__verdict {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--econ-ink);
  margin-top: var(--sp-3);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.quiz-review-title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--econ-ink);
  margin-bottom: var(--sp-4);
}
.quiz-review-grid {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.quiz-rv-item {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: flex-start;
  gap: var(--sp-3);
}
.quiz-rv-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.quiz-rv-dot.ok {
  background: var(--econ-green-50);
  border: 1px solid var(--econ-green);
  color: var(--econ-green-700);
}
.quiz-rv-dot.bad {
  background: var(--econ-rose-50);
  border: 1px solid var(--econ-rose);
  color: var(--econ-rose-700);
}
.quiz-rv-type {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.quiz-rv-summary {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.5;
}
.quiz-results__actions {
  display: flex; justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* ===== Results v2 — score / time / accuracy ===== */
.quiz-results { padding: var(--sp-6); }

.quiz-results__hero {
  display: flex; align-items: center; gap: var(--sp-4);
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--sp-5);
}
.quiz-results__head-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--econ-green-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.quiz-results__head-title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--econ-ink);
  line-height: 1.2;
}
.quiz-results__head-sub {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin-top: 2px;
}

.quiz-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.quiz-stat {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.quiz-stat--ring { align-items: center; text-align: center; }
.quiz-stat__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--econ-gray-600);
  margin-bottom: var(--sp-2);
}
.quiz-stat__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--econ-ink);
}
.quiz-stat__value--small { font-size: 32px; }
.quiz-stat__denom {
  font-size: 28px;
  color: var(--econ-gray-400);
  font-weight: var(--fw-normal);
}
.quiz-stat__sub {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin-top: var(--sp-2);
}
.quiz-stat__verdict {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--econ-ink);
  line-height: 1.4;
  margin-top: var(--sp-3);
}
.quiz-stat__chip {
  display: inline-flex; align-items: center;
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  margin-top: var(--sp-3);
}
.quiz-stat__chip--ok {
  background: var(--econ-green-50);
  color: var(--econ-green-700);
  border: 1px solid var(--econ-green-100);
}
.quiz-stat__chip--bad {
  background: var(--econ-rose-50);
  color: var(--econ-rose-700);
  border: 1px solid var(--econ-rose-100);
}
.quiz-stat__divider {
  width: 100%; height: 1px;
  background: var(--econ-gray-200);
  margin: var(--sp-3) 0;
}

/* Accuracy ring */
.quiz-ring {
  --ring-pct: 0;
  width: 132px; height: 132px;
  border-radius: 50%;
  background:
    conic-gradient(var(--econ-green) calc(var(--ring-pct) * 1%), var(--econ-gray-200) 0);
  display: flex; align-items: center; justify-content: center;
  margin: var(--sp-2) 0;
}
.quiz-ring__inner {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--econ-white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.quiz-ring__pct {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-section);
  font-weight: var(--fw-bold);
  font-size: 28px;
  color: var(--econ-green-700);
  line-height: 1;
}
.quiz-ring__sub {
  font-size: var(--fs-xs);
  color: var(--econ-gray-600);
  margin-top: 4px;
}

/* Review your answers — numbered dots */
.quiz-review-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.quiz-review-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--econ-ink);
  margin-bottom: var(--sp-4);
}
.quiz-dots {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.quiz-dot {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  border: 1px solid;
}
.quiz-dot--ok {
  background: var(--econ-green-50);
  border-color: var(--econ-green-100);
  color: var(--econ-green-700);
}
.quiz-dot--bad {
  background: var(--econ-rose-50);
  border-color: var(--econ-rose-100);
  color: var(--econ-rose-700);
}
.quiz-dot__mark { font-weight: var(--fw-bold); }
.quiz-review-legend {
  display: flex; gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
}
.quiz-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.quiz-legend-dot--ok { background: var(--econ-green); }
.quiz-legend-dot--bad { background: var(--econ-rose); }

/* Download sheet CTA */
.quiz-cta-card {
  display: flex; align-items: center;
  gap: var(--sp-4);
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.quiz-cta-card__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--econ-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.quiz-cta-card__body { flex: 1; }
.quiz-cta-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--econ-ink);
}
.quiz-cta-card__sub {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .quiz-stats { grid-template-columns: 1fr; }
}

/* Per-question review rows — each is independently collapsible */
.quiz-review-card__hint {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin-top: -8px;
  margin-bottom: var(--sp-3);
}
.quiz-rvrows {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}
.quiz-rvrow {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
.quiz-rvrow__head {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.quiz-rvrow__head::-webkit-details-marker { display: none; }
.quiz-rvrow__chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  border: 1px solid;
}
.quiz-rvrow__chip--ok {
  background: var(--econ-green-50);
  border-color: var(--econ-green-100);
  color: var(--econ-green-700);
}
.quiz-rvrow__chip--bad {
  background: var(--econ-rose-50);
  border-color: var(--econ-rose-100);
  color: var(--econ-rose-700);
}
.quiz-rvrow__body { flex: 1; min-width: 0; }
.quiz-rvrow__type {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.quiz-rvrow__stem {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quiz-rvrow[open] .quiz-rvrow__stem {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.quiz-rvrow__chev {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--econ-gray-400);
  transition: transform 0.18s ease;
}
.quiz-rvrow[open] .quiz-rvrow__chev {
  transform: rotate(90deg);
}
.quiz-rvrow__detail {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--econ-gray-200);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  background: var(--econ-white);
}
.quiz-rvrow__summary {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2);
}
.quiz-rvrow__exp {
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
  line-height: 1.55;
}

/* ===== Impacts of inflation card ===== */
.impact-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.impact-group {
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  border: 1px solid;
}
.impact-group--green  { background: var(--econ-green-50);   border-color: var(--econ-green-100);  }
.impact-group--amber  { background: var(--econ-amber-50);   border-color: var(--econ-amber-100);  }
.impact-group--blue   { background: var(--econ-blue-50);    border-color: var(--econ-blue-100);   }
.impact-group--purple { background: var(--econ-purple-50);  border-color: var(--econ-purple-100); }
.impact-group__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.impact-group__icon { font-size: 20px; }
.impact-group__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--econ-ink);
}
.impact-group--green  .impact-group__label { color: var(--econ-green-700);  }
.impact-group--amber  .impact-group__label { color: var(--econ-amber-700);  }
.impact-group--blue   .impact-group__label { color: var(--econ-blue-700);   }
.impact-group--purple .impact-group__label { color: var(--econ-purple-700); }
.impact-group--purple .impact-group__list li::before { background: var(--econ-purple); }
.impact-group__list {
  margin: 0; padding-left: 0;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.6;
  display: flex; flex-direction: column; gap: 2px;
}
.impact-group__list li {
  position: relative;
  padding: 4px 0 4px calc(var(--sp-7) + var(--sp-3));
}
.impact-group__list li::before {
  content: '';
  position: absolute;
  left: var(--sp-7);
  top: 12px;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--econ-gray-400);
}
.impact-group--green .impact-group__list li::before { background: var(--econ-green); }
.impact-group--amber .impact-group__list li::before { background: var(--econ-amber); }
.impact-group--blue  .impact-group__list li::before { background: var(--econ-blue);  }

/* Winners / Losers split */
.wl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.wl-panel {
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  border: 1px solid;
}
.wl-panel--win  { background: var(--econ-green-50); border-color: var(--econ-green-100); }
.wl-panel--lose { background: var(--econ-rose-50);  border-color: var(--econ-rose-100);  }
.wl-panel__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.wl-panel__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.wl-panel--win  .wl-panel__icon { background: var(--econ-green); color: var(--econ-white); }
.wl-panel--lose .wl-panel__icon { background: var(--econ-rose);  color: var(--econ-white); }
.wl-panel__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.wl-panel--win  .wl-panel__label { color: var(--econ-green-700); }
.wl-panel--lose .wl-panel__label { color: var(--econ-rose-700);  }
.wl-panel__list {
  margin: 0; padding-left: 0;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.6;
  display: flex; flex-direction: column; gap: 2px;
}
.wl-panel__list li {
  position: relative;
  padding: 4px 0 4px calc(var(--sp-7) + var(--sp-2) + var(--sp-3));
}
.wl-panel__list li::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-7) + var(--sp-2));
  top: 12px;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--econ-gray-400);
}
.wl-panel--win  .wl-panel__list li::before { background: var(--econ-green); }
.wl-panel--lose .wl-panel__list li::before { background: var(--econ-rose);  }

@media (max-width: 900px) {
  .impact-groups { grid-template-columns: 1fr; }
  .wl-row        { grid-template-columns: 1fr; }
}

/* ============================================================
   LINK IT — Context station (tap-select, tap-place)
   ============================================================ */

.link-station { min-width: 0; }
.link-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-100);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.link-card__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--econ-green-700);
  background: var(--econ-green-50);
  border: 1px solid var(--econ-green-100);
  padding: 6px 12px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}
.link-card__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--econ-green);
}

.link-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--econ-ink);
  margin: 0 0 var(--sp-3) 0;
}
.link-card__lede {
  font-size: var(--fs-base);
  color: var(--econ-gray-700);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-5) 0;
}

/* extract */
.link-extract {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  line-height: 1.75;
  color: var(--econ-ink);
  font-size: var(--fs-base);
}
.link-extract p { margin: 0 0 var(--sp-2) 0; }
.link-extract p:last-child { margin-bottom: 0; }

.mark-btn {
  display: inline;
  font: inherit;
  color: inherit;
  background: rgba(15,23,42,0.04);
  border: 1px dashed rgba(15,23,42,0.22);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, box-shadow 120ms, color 160ms;
}
.mark-btn:hover {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue);
}
.mark-btn.is-selected {
  background: var(--econ-blue-100);
  border-style: solid;
  border-color: var(--econ-blue);
  box-shadow: 0 0 0 3px rgba(40,82,255,0.18);
  font-weight: var(--fw-semi);
}
.mark-btn.is-placed {
  background: transparent;
  border: 1px dotted rgba(15,23,42,0.18);
  color: rgba(15,23,42,0.45);
  text-decoration: line-through;
  cursor: default;
  pointer-events: none;
}

/* selected banner */
.link-selected {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.link-selected__label {
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  font-size: var(--fs-sm);
}
.link-selected__chip {
  background: var(--econ-white);
  border: 1px solid var(--econ-blue);
  color: var(--econ-blue-700);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.link-selected__hint {
  flex: 1;
  color: var(--econ-blue-700);
  font-size: var(--fs-sm);
}
.link-selected__cancel {
  background: transparent;
  border: 1px solid var(--econ-blue-100);
  color: var(--econ-blue-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  padding: 4px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
}
.link-selected__cancel:hover { background: var(--econ-white); }

/* inline bucket picker (single-tap flow) */
.link-picker {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--econ-surface);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
}
.link-picker__phrase {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.link-picker__chip {
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border-strong);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
}
.link-picker__hint {
  font-size: var(--fs-sm);
  color: var(--econ-muted);
  flex: 1;
}
.link-picker__cancel {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--econ-muted);
  font-size: var(--fs-md);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  line-height: 1;
}
.link-picker__cancel:hover { background: var(--econ-surface-2); }
.link-picker__options {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.link-picker__opt {
  flex: 1;
  min-width: 120px;
  padding: var(--sp-3);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  text-align: center;
  line-height: 1.3;
}
.link-picker__opt:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.link-picker__opt-icon { font-size: 1.25rem; }
.link-picker__opt--green {
  background: var(--econ-green-50);
  border-color: var(--econ-green-100);
  color: var(--econ-green-700);
}
.link-picker__opt--green:hover { border-color: var(--econ-green); }
.link-picker__opt--amber {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber-100);
  color: var(--econ-amber-700);
}
.link-picker__opt--amber:hover { border-color: var(--econ-amber); }
.link-picker__opt--blue {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue-100);
  color: var(--econ-blue-700);
}
.link-picker__opt--blue:hover { border-color: var(--econ-blue); }

/* buckets */
.link-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.link-bucket {
  display: flex; flex-direction: column; gap: var(--sp-3);
  text-align: left;
  background: var(--econ-gray-50);
  border: 1.5px solid var(--econ-gray-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  cursor: default;
  transition: transform 120ms, box-shadow 160ms, border-color 160ms;
  min-height: 140px;
  font: inherit;
}
.link-bucket--green { background: var(--econ-green-50);  border-color: var(--econ-green-100); }
.link-bucket--amber { background: var(--econ-amber-50);  border-color: var(--econ-amber-100); }
.link-bucket--blue  { background: var(--econ-blue-50);   border-color: var(--econ-blue-100);  }

.link-bucket.is-ready {
  cursor: pointer;
  border-style: dashed;
  border-width: 2px;
}
.link-bucket--green.is-ready { border-color: var(--econ-green); }
.link-bucket--amber.is-ready { border-color: var(--econ-amber); }
.link-bucket--blue.is-ready  { border-color: var(--econ-blue);  }
.link-bucket.is-ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(15,23,42,0.18);
}

.link-bucket__head {
  display: flex; align-items: center; gap: var(--sp-2);
}
.link-bucket__icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--econ-white);
}
.link-bucket--green .link-bucket__icon { background: var(--econ-green); }
.link-bucket--amber .link-bucket__icon { background: var(--econ-amber); }
.link-bucket--blue  .link-bucket__icon { background: var(--econ-blue);  }

.link-bucket__label {
  flex: 1;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.link-bucket--green .link-bucket__label { color: var(--econ-green-700); }
.link-bucket--amber .link-bucket__label { color: var(--econ-amber-700); }
.link-bucket--blue  .link-bucket__label { color: var(--econ-blue-700);  }

.link-bucket__count {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-gray-700);
  background: var(--econ-white);
  padding: 2px 8px;
  border-radius: var(--r-full);
  min-width: 24px;
  text-align: center;
}
.link-bucket__empty {
  font-size: var(--fs-sm);
  color: var(--econ-gray-500);
  font-style: italic;
  padding: var(--sp-2) 0;
}
.link-bucket__chips {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.link-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--econ-white);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  width: 100%;
}
.link-chip__text { flex: 1; }
.link-chip__x, .link-chip__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: var(--econ-gray-100);
  color: var(--econ-gray-700);
  font-weight: var(--fw-bold);
  font-size: 13px;
  flex-shrink: 0;
  /* reset button defaults */
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.link-chip__x:hover,
.link-chip:hover .link-chip__x { background: var(--econ-rose); color: var(--econ-white); }
.link-chip.is-correct { border-color: var(--econ-green); }
.link-chip.is-correct .link-chip__icon { background: var(--econ-green); color: var(--econ-white); }
.link-chip.is-wrong   { border-color: var(--econ-rose);  background: #FEF2F2; }
.link-chip.is-wrong   .link-chip__icon { background: var(--econ-rose); color: var(--econ-white); }

/* extras row */
.link-extras {
  margin-bottom: var(--sp-4);
}
.link-extras__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-gray-700);
  margin-bottom: var(--sp-2);
}
.link-extras__chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.extra-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-100);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  cursor: pointer;
  transition: all 120ms;
}
.extra-chip__plus {
  color: var(--econ-blue);
  font-weight: var(--fw-bold);
}
.extra-chip:hover {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue);
}
.extra-chip.is-selected {
  background: var(--econ-blue-100);
  border-color: var(--econ-blue);
  box-shadow: 0 0 0 3px rgba(40,82,255,0.18);
  font-weight: var(--fw-semi);
}
.extra-chip.is-placed {
  opacity: 0.4;
  cursor: default;
  text-decoration: line-through;
}

/* info banner */
.link-info {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-left: 4px solid var(--econ-blue);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--econ-blue-700);
}
.link-info__icon {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

/* footer */
.link-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--econ-gray-100);
}
.link-footer__counter {
  flex: 1;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
}
.link-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit;
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  padding: 10px 18px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms;
}
.link-btn--ghost {
  background: var(--econ-white);
  color: var(--econ-ink);
  border-color: var(--econ-gray-100);
}
.link-btn--ghost:hover { background: var(--econ-gray-50); }
.link-btn--primary {
  background: var(--econ-blue);
  color: var(--econ-white);
  border-color: var(--econ-blue);
}
.link-btn--primary:hover { background: var(--econ-blue-dark, #1E3FCC); }
.link-btn--primary:disabled {
  background: var(--econ-gray-100);
  border-color: var(--econ-gray-100);
  color: var(--econ-gray-500);
  cursor: not-allowed;
}

/* result */
.link-result {
  margin-top: var(--sp-2);
}
.link-result__head {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.link-result__score {
  font-size: var(--fs-lg);
  color: var(--econ-ink);
  margin-bottom: 4px;
}
.link-result__score strong {
  font-size: var(--fs-xl);
  color: var(--econ-blue-700);
}
.link-result__verdict {
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
}

.link-fb {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.link-fb__row {
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-100);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.link-fb__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.link-fb__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  color: var(--econ-white);
  font-weight: var(--fw-bold);
  font-size: 12px;
  flex-shrink: 0;
}
.link-fb__mark--ok   { background: var(--econ-green); }
.link-fb__mark--no   { background: var(--econ-rose);  }
.link-fb__mark--miss { background: var(--econ-amber); }
.link-fb__evidence {
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  font-size: var(--fs-sm);
}
.link-fb__right {
  font-size: var(--fs-sm);
  color: var(--econ-rose);
  font-weight: var(--fw-semi);
}
.link-fb__text {
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
  line-height: var(--lh-relaxed);
  padding-left: 28px;
}

.link-bridge {
  background: linear-gradient(135deg, var(--econ-purple-50) 0%, #F5EBFF 100%);
  border: 1px solid var(--econ-purple-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}
.link-bridge__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-purple-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.link-bridge__text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--econ-ink);
  font-style: italic;
}

/* right-rail stations */
.link-rail__stations {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.link-rail__station {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--econ-gray-100);
  background: var(--econ-white);
}
.link-rail__station.is-current {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue);
}
.link-rail__station.is-done { opacity: 0.85; }
.link-rail__num {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--econ-gray-100);
  color: var(--econ-gray-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.link-rail__station.is-current .link-rail__num { background: var(--econ-blue); color: var(--econ-white); }
.link-rail__station.is-done    .link-rail__num { background: var(--econ-green); color: var(--econ-white); }
.link-rail__body { flex: 1; min-width: 0; }
.link-rail__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.link-rail__chip {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  background: var(--econ-white);
  border: 1px solid var(--econ-blue);
  padding: 1px 8px;
  border-radius: var(--r-full);
  margin-top: 2px;
}
.link-rail__wgll {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.link-rail__wgll-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
  line-height: var(--lh-relaxed);
}
.link-rail__wgll-icon { flex-shrink: 0; font-size: 16px; }

@media (max-width: 900px) {
  .link-buckets { grid-template-columns: 1fr; }
  .link-footer  { flex-wrap: wrap; }
}

/* ============================================================
   STAGES — extended states (available, done, locked) + clickable
   ============================================================ */
a.stage { text-decoration: none; }
a.stage:hover .stage__num {
  border-color: var(--econ-blue);
  background: var(--econ-blue-50);
}
a.stage:hover .stage__name { color: var(--econ-blue-700); }

.stage.is-available .stage__num {
  border-color: var(--econ-blue);
  color: var(--econ-blue-700);
}
.stage.is-available .stage__name { color: var(--econ-blue-700); }

.stage.is-done .stage__num {
  background: var(--econ-green);
  border-color: var(--econ-green);
  color: var(--econ-white);
}
.stage.is-done .stage__name { color: var(--econ-gray-700); }
.stage.is-done .stage__sub  { color: var(--econ-gray-500); }

.stage.is-locked .stage__num {
  background: var(--econ-gray-50);
  border-color: var(--econ-gray-200);
  color: var(--econ-gray-500);
}
.stage.is-locked .stage__name { color: var(--econ-gray-500); }
.stage.is-locked .stage__sub  { color: var(--econ-gray-400); }

.stage__chip--available {
  background: var(--econ-blue-50);
  color: var(--econ-blue-700);
}
.stage__chip--done {
  background: var(--econ-green-50);
  color: var(--econ-green-700);
}

/* ============================================================
   LINK IT INTRO — stations preview list
   ============================================================ */

.link-intro-stations__head {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-gray-700);
  margin: var(--sp-5) 0 var(--sp-3);
}
.link-intro-stations {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.link-intro-station {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--econ-gray-100);
  background: var(--econ-white);
  text-decoration: none;
  color: inherit;
  transition: all 120ms;
}
.link-intro-station:hover {
  border-color: var(--econ-blue);
  background: var(--econ-blue-50);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(15,23,42,0.10);
}
.link-intro-station.is-locked {
  opacity: 0.55;
  cursor: default;
}
.link-intro-station.is-locked:hover {
  border-color: var(--econ-gray-100);
  background: var(--econ-white);
  transform: none;
  box-shadow: none;
}
.link-intro-station__num {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--econ-blue-50);
  color: var(--econ-blue-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.link-intro-station.is-locked .link-intro-station__num {
  background: var(--econ-gray-100);
  color: var(--econ-gray-500);
}
.link-intro-station__body { flex: 1; min-width: 0; }
.link-intro-station__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 2px;
}
.link-intro-station__name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  color: var(--econ-ink);
}
.link-intro-station__skill {
  font-size: 11px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.link-intro-station__skill--application { background: var(--econ-green-50);  color: var(--econ-green-700);  }
.link-intro-station__skill--analysis    { background: var(--econ-blue-50);   color: var(--econ-blue-700);   }
.link-intro-station__skill--evaluation  { background: var(--econ-amber-50);  color: var(--econ-amber-700);  }
.link-intro-station__skill--numeracy    { background: var(--econ-purple-50); color: var(--econ-purple-700); }
.link-intro-station__sub {
  font-size: var(--fs-sm);
  color: var(--econ-gray-700);
  line-height: var(--lh-snug);
}
.link-intro-station__arrow {
  color: var(--econ-blue);
  flex-shrink: 0;
}

/* simple topbar variant */
.topbar--simple { justify-content: space-between; }
.topbar__back-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--econ-ink);
  text-decoration: none;
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
}
.topbar__back-link:hover { color: var(--econ-blue-700); }

/* ============================================================
   THEME — Link It  (amber / orange accent across all Link pages)
   Scope: .theme--link wraps the entire .app on Link It pages.
   ============================================================ */

/* session dot step-2 = current → amber */
.theme--link .session-dot.is-current {
  background: var(--econ-amber);
  border-color: var(--econ-amber);
  color: var(--econ-ink);
}

/* stage current → amber */
.theme--link .stage.is-current .stage__num {
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
}
.theme--link .stage.is-current .stage__name { color: var(--econ-amber-700); }
.theme--link .stage__chip {
  background: var(--econ-amber-100);
  color: var(--econ-amber-700);
}

/* cards-list current station → amber */
.theme--link .cards-list__item.is-current { background: var(--econ-amber-50); }
.theme--link .cards-list__item.is-current .cards-list__num {
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
}
.theme--link .cards-list__item.is-current .cards-list__name { color: var(--econ-amber-700); }
.theme--link .cards-list__chip { color: var(--econ-amber-700); }

/* clickable station links in rail */
a.cards-list__item { text-decoration: none; color: inherit; display: flex; }
a.cards-list__item.is-linked { cursor: pointer; transition: background 0.15s, transform 0.1s; }
a.cards-list__item.is-linked:hover { background: var(--econ-gray-100); }
a.cards-list__item.is-linked:active { transform: scale(0.99); }
.theme--link a.cards-list__item.is-linked:hover { background: var(--econ-amber-50); }
.cards-list__chip--locked {
  background: var(--econ-gray-100);
  color: var(--econ-gray-500);
  border: 1px solid var(--econ-gray-200);
}

/* eyebrow tag → amber */
.theme--link .link-card__eyebrow {
  color: var(--econ-amber-700);
  background: var(--econ-amber-50);
  border-color: var(--econ-amber-100);
}
.theme--link .link-card__eyebrow-dot { background: var(--econ-amber); }

/* selected-evidence banner → amber */
.theme--link .link-selected {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber-100);
}
.theme--link .link-selected__label,
.theme--link .link-selected__hint  { color: var(--econ-amber-700); }
.theme--link .link-selected__chip  {
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
}
.theme--link .link-selected__cancel {
  border-color: var(--econ-amber-100);
  color: var(--econ-amber-700);
}

/* mark-btn selected ring → amber */
.theme--link .mark-btn:hover {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
}
.theme--link .mark-btn.is-selected {
  background: var(--econ-amber-100);
  border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.22);
}

/* extra-chip hover/selected → amber */
.theme--link .extra-chip:hover {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
}
.theme--link .extra-chip.is-selected {
  background: var(--econ-amber-100);
  border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.22);
}

/* primary button → amber with dark text */
.theme--link .link-btn--primary {
  background: var(--econ-amber);
  border-color: var(--econ-amber);
  color: var(--econ-ink);
}
.theme--link .link-btn--primary:hover {
  background: var(--econ-amber-600);
  border-color: var(--econ-amber-600);
  color: var(--econ-white);
}
.theme--link .link-btn--primary:disabled {
  background: var(--econ-gray-100);
  border-color: var(--econ-gray-100);
  color: var(--econ-gray-500);
}

/* session meta Start button → amber */
.theme--link .btn--primary {
  background: var(--econ-amber);
  border-color: var(--econ-amber);
  color: var(--econ-ink);
}
.theme--link .btn--primary:hover {
  background: var(--econ-amber-600);
  border-color: var(--econ-amber-600);
  color: var(--econ-white);
}

/* station-preview tiles open state → amber */
.theme--link .link-intro-station__num {
  background: var(--econ-amber-50);
  color: var(--econ-amber-700);
}
.theme--link .link-intro-station:hover {
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
}

/* topbar session label → amber for Link It pages */
.theme--link .topbar__session-label { color: var(--econ-amber-700); }

/* picker border → amber in Link It theme */
.theme--link .link-picker {
  border-color: var(--econ-amber-100);
  background: var(--econ-amber-50);
}
.theme--link .link-picker__chip {
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
  background: var(--econ-white);
}
.theme--link .link-picker__hint { color: var(--econ-amber-700); }

/* ============================================================
   Chain station — Build the Chain
   ============================================================ */

/* eyebrow row with score badge */
.chain-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.chain-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chain-score__label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--econ-muted);
  text-transform: uppercase;
  line-height: 1;
}
.chain-score__val {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: 1.2;
}

/* progress bar */
.chain-progress-bar {
  height: 4px;
  background: var(--econ-gray-100);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.chain-progress-bar__fill {
  height: 100%;
  background: var(--econ-amber);
  border-radius: var(--r-full);
  transition: width 0.3s ease;
}

/* scenario card */
.chain-scenario {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--econ-amber-50);
  border: 1px solid var(--econ-amber-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.chain-scenario__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.chain-scenario__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-1);
}
.chain-scenario__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  color: var(--econ-ink);
  line-height: 1.4;
}

/* station sub-label */
.chain-station-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--econ-muted);
  margin-bottom: var(--sp-3);
}
.chain-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}

/* two-column layout: tiles left, chain right */
.chain-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  align-items: start;
}
.chain-layout.is-checked {
  grid-template-columns: 1fr;
}

/* chain slots — vertical stack */
.chain-slots {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* arrow between slots (↓) */
.chain-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 30px;
  font-size: 1.1rem;
  color: var(--econ-muted);
  margin: 2px 0;
}
.chain-arrow__label {
  font-size: 10px;
  font-style: italic;
  color: var(--econ-gray-400);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* individual slot — row layout */
.chain-slot {
  width: 100%;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  min-height: 56px;
}

/* num badge */
.chain-slot__num {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* anchor slot (step 1, locked) */
.chain-slot--anchor {
  background: var(--econ-green-50);
  border: 2px solid var(--econ-green-100);
}
.chain-slot--anchor .chain-slot__num {
  background: var(--econ-green);
  color: white;
}
.chain-slot--anchor .chain-slot__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  text-align: left;
  line-height: 1.3;
}

/* endpoint slot (locked destination) */
.chain-slot--endpoint {
  background: var(--econ-amber-50);
  border: 2px solid var(--econ-amber-100);
}
.chain-slot--endpoint .chain-slot__num {
  background: var(--econ-amber);
  color: white;
}
.chain-slot--endpoint .chain-slot__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-amber-700);
  text-align: left;
  line-height: 1.3;
}

/* empty slot */
.chain-slot--empty {
  background: var(--econ-white);
  border: 2px dashed var(--econ-gray-200);
}
.chain-slot--empty .chain-slot__num {
  background: var(--econ-gray-100);
  color: var(--econ-muted);
  border: 2px solid var(--econ-gray-200);
  background: transparent;
}
.chain-slot__placeholder {
  font-size: var(--fs-xs);
  color: var(--econ-muted);
  text-align: left;
  line-height: 1.4;
  flex: 1;
}

/* filled slot */
.chain-slot--filled {
  background: var(--econ-white);
  border: 2px solid var(--econ-border);
}
.chain-slot--filled .chain-slot__num {
  background: var(--econ-gray-100);
  color: var(--econ-ink);
}
.chain-slot__icon {
  font-size: 1.5rem;
  line-height: 1;
}
.chain-slot__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  text-align: left;
  line-height: 1.35;
  flex: 1;
}
.chain-slot__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
}

/* remove × button on filled slot */
.chain-slot__remove {
  position: static;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--econ-gray-100);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--econ-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.chain-slot__remove:hover { background: var(--econ-rose); color: white; }

/* feedback mark on slot after check */
.chain-slot__mark {
  position: static;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.chain-slot.is-correct {
  border-color: var(--econ-green);
  background: var(--econ-green-50);
}
.chain-slot.is-correct .chain-slot__num { background: var(--econ-green); color: white; }
.chain-slot.is-correct .chain-slot__mark { background: var(--econ-green); color: white; }
.chain-slot.is-wrong {
  border-color: var(--econ-rose);
  background: #FEF2F2;
}
.chain-slot.is-wrong .chain-slot__num { background: var(--econ-rose); color: white; }
.chain-slot.is-wrong .chain-slot__mark { background: var(--econ-rose); color: white; }

/* available tiles */
.chain-available {
  margin-bottom: var(--sp-4);
}
.chain-available__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.chain-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.chain-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--econ-ink);
  transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
  width: 100%;
}
.chain-tile:hover {
  border-color: var(--econ-amber);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.chain-tile__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.chain-tile__text {
  font-size: var(--fs-sm);
  line-height: 1.35;
  font-weight: var(--fw-med);
  flex: 1;
}

/* feedback section */
.chain-feedback {
  margin-top: var(--sp-4);
}
.chain-fb {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.chain-fb__row {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--econ-border);
  background: var(--econ-surface);
}
.chain-fb__row.is-correct { border-left-color: var(--econ-green); background: var(--econ-green-50); }
.chain-fb__row.is-wrong   { border-left-color: var(--econ-rose);  background: #FEF2F2; }
.chain-fb__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.chain-fb__mark {
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.chain-fb__row.is-correct .chain-fb__mark { background: var(--econ-green); color: white; }
.chain-fb__row.is-wrong   .chain-fb__mark { background: var(--econ-rose);  color: white; }
.chain-fb__step {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.chain-fb__wrong-label {
  font-size: var(--fs-xs);
  color: var(--econ-muted);
  margin-left: auto;
}
.chain-fb__explain {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.5;
}

/* Chain ideal-reasoning reveal panel (mirrors depends-ideal) */
.chain-ideal {
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left: 3px solid var(--econ-amber);
  background: var(--econ-white);
  margin-top: -2px;
  margin-bottom: var(--sp-1);
}
.chain-ideal--correct {
  border-left-color: var(--econ-green);
  background: var(--econ-green-50);
}
.chain-ideal--wrong {
  border-left-color: var(--econ-rose);
  background: #FEF2F2;
}
.chain-ideal__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: 4px;
}
.chain-ideal--correct .chain-ideal__label { color: var(--econ-green-700); }
.chain-ideal--wrong   .chain-ideal__label { color: var(--econ-rose-700); }
.chain-ideal__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--econ-ink);
}
.chain-ideal__correction {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-rose-700);
  margin-bottom: 4px;
}

/* responsive: collapse two-column to single column on narrow screens */
@media (max-width: 820px) {
  .chain-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .chain-layout__chain { order: 1; }
  .chain-layout__tiles { order: 2; }
}

/* theme--link overrides for chain station */
.theme--link .chain-progress-bar__fill { background: var(--econ-amber); }
.theme--link .chain-tile:hover { border-color: var(--econ-amber); }
.theme--link .chain-slot--anchor { background: var(--econ-green-50); border-color: var(--econ-green-100); }

/* ============================================================
   Chain station — Open Response variant
   ============================================================ */

/* Open chain: slots stack vertically for text input */
.chain-slots--open {
  flex-direction: column;
  overflow-x: visible;
  gap: 0;
}
.chain-slots--open .chain-slot { max-width: none; }
.chain-slots--open .chain-arrow {
  width: auto;
  height: 28px;
  padding-top: 0;
  transform: rotate(90deg);
  align-self: flex-start;
  margin-left: 12px; /* align with slot num centre */
}

/* Open slot body */
.chain-open-slot {
  flex-direction: row;
  align-items: flex-start;
  min-height: auto;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--econ-border);
  background: var(--econ-white);
}
.chain-open-slot.is-pending { border-color: var(--econ-amber); background: var(--econ-amber-50); }
.chain-open-slot.is-correct  { border-color: var(--econ-green); background: var(--econ-green-50); }
.chain-open-slot.is-wrong    { border-color: var(--econ-rose);  background: #FEF2F2; }

.chain-slot__num.is-correct { background: var(--econ-green); color: white; }
.chain-slot__num.is-wrong   { background: var(--econ-rose);  color: white; }

.chain-open-slot__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Student answer textarea */
.chain-open-slot__textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  background: var(--econ-white);
  line-height: 1.5;
  transition: border-color 0.15s;
}
.chain-open-slot__textarea:focus {
  outline: none;
  border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.18);
}

/* Locked answer display after check */
.chain-open-slot__answer {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.5;
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  min-height: 48px;
}
.chain-open-slot__empty-note { color: var(--econ-muted); font-style: italic; }

/* Model answer reveal */
.chain-open-slot__model {
  background: var(--econ-surface);
  border-left: 3px solid var(--econ-amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-4);
}
.chain-open-slot__model-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-1);
}
.chain-open-slot__model-text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.5;
}

/* Self-mark buttons */
.chain-open-slot__selfmark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.chain-open-slot__selfmark-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-muted);
  flex-shrink: 0;
}
.chain-selfmark-btn {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.chain-selfmark-btn--ok {
  background: var(--econ-green-50);
  border-color: var(--econ-green-100);
  color: var(--econ-green-700);
}
.chain-selfmark-btn--ok:hover { background: var(--econ-green); color: white; border-color: var(--econ-green); }
.chain-selfmark-btn--no {
  background: #FEF2F2;
  border-color: #FECACA;
  color: var(--econ-rose);
}
.chain-selfmark-btn--no:hover { background: var(--econ-rose); color: white; border-color: var(--econ-rose); }

/* Mark prompt nudge */
.chain-open-slot__mark-prompt {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--econ-muted);
  padding: var(--sp-3) 0;
  font-style: italic;
}

/* Vocabulary chips */
.chain-vocab {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.chain-vocab__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-muted);
  white-space: nowrap;
  padding-top: 5px;
  flex-shrink: 0;
}
.chain-vocab__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chain-vocab-chip {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--econ-surface);
  border: 1px solid var(--econ-border);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  color: var(--econ-ink);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.chain-vocab-chip:hover {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
  color: var(--econ-amber-700);
}

/* ============================================================
   Diagram Connector station
   ============================================================ */

/* Scenario card */
.diag-scenario {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--econ-amber-50);
  border: 1px solid var(--econ-amber-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.diag-scenario__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}
.diag-scenario__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.diag-scenario__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.diag-scenario__point {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--econ-muted);
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-full);
  padding: 3px 10px;
}

/* Stage 0: diagram option cards */
.diag-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.diag-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 2px solid var(--econ-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--econ-ink);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.diag-option:hover:not(:disabled) {
  border-color: var(--econ-amber);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.diag-option.is-selected {
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
}
.diag-option.is-correct {
  border-color: var(--econ-green);
  background: var(--econ-green-50);
}
.diag-option.is-wrong {
  border-color: var(--econ-rose);
  background: #FEF2F2;
}
.diag-option:disabled { cursor: default; }
.diag-option__thumb {
  width: 100%;
  border: 1px solid var(--econ-border);
  border-radius: var(--r-md);
  background: var(--econ-white);
  overflow: hidden;
  padding: var(--sp-2);
}
.diag-thumb { width: 100%; height: auto; display: block; }
.diag-option__body { width: 100%; }
.diag-option__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  margin-bottom: 3px;
  text-align: center;
}
.diag-option__sub {
  font-size: var(--fs-xs);
  color: var(--econ-muted);
  line-height: 1.4;
}
.diag-option__feedback {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.7);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--econ-ink);
}
.diag-option__feedback-icon {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}
.diag-option.is-correct .diag-option__feedback-icon { color: var(--econ-green-700); }
.diag-option.is-wrong   .diag-option__feedback-icon { color: var(--econ-rose); }
.diag-option__correct-badge {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-green-700);
  background: var(--econ-green-50);
  border: 1px solid var(--econ-green-100);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

/* Diagram wrapper — relative container for SVG + overlaid zones */
.diag-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-lg);
  background: var(--econ-white);
  overflow: visible; /* zones can bleed slightly */
}
.diag-wrap--small { max-width: 100%; }
.diag-svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--r-lg);
}

/* Drop zones (absolutely positioned over SVG) */
.diag-zone {
  position: absolute;
  height: 7%;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 2px dashed var(--econ-gray-300);
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: var(--fw-med);
  color: var(--econ-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  z-index: 2;
  backdrop-filter: blur(2px);
}
.diag-zone.is-ready {
  border-color: var(--econ-amber);
  border-style: solid;
  background: var(--econ-amber-50);
  animation: zone-pulse 1s ease-in-out infinite alternate;
}
@keyframes zone-pulse {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 0 3px rgba(245,184,0,0.25); }
}
.diag-zone.is-filled {
  border-style: solid;
  border-color: var(--econ-border-strong);
  background: var(--econ-white);
  color: var(--econ-ink);
  font-weight: var(--fw-semi);
}
.diag-zone.is-correct { border-color: var(--econ-green); background: var(--econ-green-50); color: var(--econ-green-700); }
.diag-zone.is-wrong   { border-color: var(--econ-rose);  background: #FEF2F2; color: var(--econ-rose); }
.diag-zone__empty { color: var(--econ-gray-300); font-style: italic; }
.diag-zone__icon  { font-style: normal; }

/* Available label chips */
.diag-chip-panel {
  background: var(--econ-amber-50);
  border: 1.5px solid var(--econ-amber-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.diag-chip-panel__instruction {
  font-size: var(--fs-sm);
  color: var(--econ-amber-700);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-3);
}
.diag-chips { margin-bottom: var(--sp-4); }
.diag-chips__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.diag-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.diag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--econ-ink);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.diag-chip:hover {
  border-color: var(--econ-amber);
  transform: translateY(-1px);
}
.diag-chip.is-selected {
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
  color: var(--econ-amber-700);
  font-weight: var(--fw-semi);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.22);
}

/* Label result feedback */
.diag-label-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--econ-surface);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.diag-label-result__score {
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  font-size: var(--fs-md);
}
.diag-label-result__msg { font-size: var(--fs-sm); color: var(--econ-muted); }
.diag-label-result__msg--ok { color: var(--econ-green-700); }

/* Legend */
.diag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--econ-muted);
}
.diag-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.diag-legend__line {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Stage 2: interpret questions */
.diag-interp-questions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.diag-interp-row {
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--econ-white);
}
.diag-interp-row.is-correct { border-color: var(--econ-green); }
.diag-interp-row.is-wrong   { border-color: var(--econ-rose); }
.diag-interp-row__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--econ-surface);
  border-bottom: 1px solid var(--econ-border);
  cursor: pointer;
}
.diag-interp-row__num {
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  background: var(--econ-amber-50);
  border: 1.5px solid var(--econ-amber-100);
  color: var(--econ-amber-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.diag-interp-row__q {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.diag-interp-row__mark {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.diag-interp-row__mark.is-ok { background: var(--econ-green); color: white; }
.diag-interp-row__mark.is-no { background: var(--econ-rose);  color: white; }
.diag-interp-input-wrap { padding: var(--sp-3) var(--sp-4); }
.diag-interp-input {
  width: 100%; resize: vertical; min-height: 70px;
  border: 1.5px solid var(--econ-border); border-radius: var(--r-md);
  padding: var(--sp-3); font: inherit; font-size: var(--fs-sm);
  color: var(--econ-ink); line-height: 1.5;
}
.diag-interp-input:focus {
  outline: none; border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.18);
}
.diag-interp-answer {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--econ-ink); line-height: 1.5;
}
.diag-interp-answer em { color: var(--econ-muted); font-style: italic; }
.diag-interp-model {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--econ-border);
  background: var(--econ-surface);
}
.diag-interp-model__label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--econ-amber-700); margin-bottom: 3px;
}
.diag-interp-model__text { font-size: var(--fs-sm); color: var(--econ-ink); line-height: 1.5; }
.diag-interp-selfmark {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--econ-border);
}
.diag-interp-selfmark__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--econ-muted); flex-shrink: 0;
}

/* Stage 3: explain layout */
.diag-explain-card .link-card__title { font-size: var(--fs-xl); }
.diag-explain-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.diag-explain-left__label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--econ-muted); margin-bottom: var(--sp-2);
}
.diag-explain-keys {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
}
.diag-criteria-chip {
  font-size: var(--fs-xs); padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--econ-surface);
  border: 1px solid var(--econ-border);
  color: var(--econ-muted);
}
.diag-explain-right {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.diag-explain-part {
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
}
.diag-explain-part.is-correct { border-color: var(--econ-green); background: var(--econ-green-50); }
.diag-explain-part.is-wrong   { border-color: var(--econ-rose);  background: #FEF2F2; }
.diag-explain-part__head {
  display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.diag-explain-part__num {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--econ-amber);
  color: var(--econ-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.diag-explain-part__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--econ-ink); }
.diag-explain-part__prompt { font-size: var(--fs-xs); color: var(--econ-muted); }
.diag-explain-input {
  width: 100%; resize: vertical; min-height: 80px;
  border: 1.5px solid var(--econ-border); border-radius: var(--r-md);
  padding: var(--sp-3); font: inherit; font-size: var(--fs-sm);
  color: var(--econ-ink); line-height: 1.5;
}
.diag-explain-input:focus {
  outline: none; border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.18);
}
.diag-explain-input--combined { min-height: 110px; }
.diag-explain-count {
  text-align: right; font-size: var(--fs-xs); color: var(--econ-muted);
  margin-top: 3px;
}
.diag-explain-frozen {
  padding: var(--sp-3); background: var(--econ-surface);
  border: 1px solid var(--econ-border); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--econ-ink); line-height: 1.5;
  min-height: 48px;
}
.diag-explain-frozen em { color: var(--econ-muted); font-style: italic; }
.diag-explain-model {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--econ-amber-50);
  border-left: 3px solid var(--econ-amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.diag-explain-model__label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--econ-amber-700); margin-bottom: 3px;
}
.diag-explain-model__text { font-size: var(--fs-sm); color: var(--econ-ink); line-height: 1.5; }
.diag-combined {
  padding: var(--sp-4);
  background: var(--econ-surface);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
}
.diag-combined__label {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--econ-ink);
  margin-bottom: 3px;
}
.diag-combined__sub {
  font-size: var(--fs-xs); color: var(--econ-muted); margin-bottom: var(--sp-3);
}

/* Responsive */
@media (max-width: 680px) {
  .diag-options { grid-template-columns: 1fr; }
  .diag-explain-layout { grid-template-columns: 1fr; }
}

/* ── It Depends On — explain phase ── */
.depends-explain {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-4);
}
.depends-explain-block {
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--econ-white);
  transition: border-color 0.2s, background 0.2s;
}
.depends-explain-block.is-correct {
  border-color: var(--econ-green);
  background: var(--econ-green-50);
}
.depends-explain-block.is-wrong {
  border-color: var(--econ-rose);
  background: #FEF2F2;
}
.depends-explain-block__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.depends-explain-block__icon { font-size: 1.4rem; flex-shrink: 0; }
.depends-explain-block__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  flex: 1;
}
.depends-factor-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.is-correct .depends-factor-mark { background: var(--econ-green); color: white; }
.is-wrong   .depends-factor-mark { background: var(--econ-rose);  color: white; }

.depends-explain-block__textarea {
  width: 100%;
  min-height: 72px;
  padding: var(--sp-3);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  background: var(--econ-white);
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.depends-explain-block__textarea:focus {
  outline: none;
  border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.15);
}
.depends-explain-block__textarea[readonly] {
  background: transparent;
  border-color: transparent;
  color: var(--econ-ink);
  resize: none;
  padding-left: 0;
}

/* ============================================================
   It Depends On station
   ============================================================ */

/* Claim card */
.depends-claim {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--econ-amber-50);
  border: 1.5px solid var(--econ-amber-100);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-5);
}
.depends-claim__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.depends-claim__prompt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-1);
}
.depends-claim__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: 1.3;
}

/* Two-column layout */
.depends-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  align-items: start;
}

/* Factor bank (left) */
.depends-bank__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.depends-factor-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.depends-factor {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  font: inherit;
  color: var(--econ-ink);
  text-align: left;
  width: 100%;
  transition: border-color 0.12s, transform 0.1s, box-shadow 0.1s;
}
.depends-factor:hover {
  border-color: var(--econ-amber);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.depends-factor.is-placed {
  opacity: 0.35;
  pointer-events: none;
  transform: none;
}
.depends-factor.is-missed {
  border-color: var(--econ-green);
  box-shadow: 0 0 0 2px var(--econ-green);
  opacity: 1;
  flex-wrap: wrap;
}
.depends-factor__missed {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--econ-green-700);
  background: var(--econ-green-50);
  border-radius: var(--r-full);
  padding: 2px 7px;
  flex: 0 0 100%;
  white-space: nowrap;
  align-self: flex-start;
  width: fit-content;
  margin-top: var(--sp-1);
}
.depends-factor__icon { font-size: 1.4rem; flex-shrink: 0; }
.depends-factor__label { font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1.3; flex: 1; }

/* Ranked slots (right) */
.depends-rank__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.depends-slots {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.depends-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-size: 1rem;
  color: var(--econ-muted);
  margin: 2px 0;
}
.depends-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 2px dashed var(--econ-gray-200);
  min-height: 58px;
  background: var(--econ-white);
}
.depends-slot--filled {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-style: solid;
  border-color: var(--econ-border);
  transition: border-color 0.18s, background 0.18s;
}
.depends-slot--filled.is-correct {
  border-color: var(--econ-green);
  background: var(--econ-green-50);
}
.depends-slot--filled.is-wrong {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
}
.depends-slot__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.depends-slot__textarea {
  width: 100%;
  min-height: 84px;
  padding: var(--sp-3);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--econ-ink);
  background: var(--econ-white);
  resize: vertical;
  box-sizing: border-box;
}
.depends-slot__textarea:focus {
  outline: none;
  border-color: var(--econ-amber);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.18);
}
.depends-slot__textarea[readonly] {
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.depends-slot__label--struck {
  text-decoration: line-through;
  opacity: 0.55;
}
.depends-ideal {
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left: 3px solid var(--econ-amber);
  background: var(--econ-white);
}
.depends-ideal--correct {
  border-left-color: var(--econ-green);
}
.depends-ideal--wrong {
  border-left-color: var(--econ-rose);
  background: var(--econ-rose-50);
}
.depends-ideal__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: 4px;
}
.depends-ideal--correct .depends-ideal__label { color: var(--econ-green-700); }
.depends-ideal--wrong   .depends-ideal__label { color: var(--econ-rose-700); }
.depends-ideal__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--econ-ink);
}
.depends-slot__num {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  background: var(--econ-gray-100);
  color: var(--econ-muted);
  border: 2px solid var(--econ-gray-200);
}
.depends-slot--filled .depends-slot__num {
  background: var(--econ-amber);
  color: white;
  border-color: var(--econ-amber);
}
.depends-slot__placeholder {
  font-size: var(--fs-xs);
  color: var(--econ-muted);
  flex: 1;
}
.depends-slot__icon { font-size: 1.3rem; flex-shrink: 0; }
.depends-slot__label { font-size: var(--fs-sm); font-weight: var(--fw-med); flex: 1; line-height: 1.3; }
.depends-slot__remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--econ-gray-100);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--econ-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s;
}
.depends-slot__remove:hover { background: var(--econ-rose); color: white; }

/* Reveal — expanded slots */
.depends-reveal-slot {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--econ-border);
  background: var(--econ-surface);
  margin-bottom: var(--sp-3);
}
.depends-reveal-slot__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.depends-reveal-slot__rank {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--econ-amber);
  color: white;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.depends-reveal-slot__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  flex: 1;
}
.depends-match {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.depends-match--hit {
  background: var(--econ-green-50);
  color: var(--econ-green-700);
  border: 1px solid var(--econ-green-100);
}
.depends-match--miss {
  background: var(--econ-gray-100);
  color: var(--econ-muted);
}
.depends-slot__why {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.55;
  border-left: 3px solid var(--econ-amber-100);
  padding-left: var(--sp-3);
}

/* Judgement builder */
.depends-judgement {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--econ-amber-50);
  border: 1.5px solid var(--econ-amber-100);
  border-radius: var(--r-xl);
}
.depends-judgement__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-2);
}
.depends-judgement__text {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--econ-ink);
  line-height: 1.6;
}

/* Eyebrow + scenario counter row */
/* Theme overrides */
.theme--link .depends-factor:hover { border-color: var(--econ-amber); }
.theme--link .depends-slot--filled .depends-slot__num { background: var(--econ-amber); border-color: var(--econ-amber); }
.theme--link .depends-reveal-slot__rank { background: var(--econ-amber); }

/* Responsive */
@media (max-width: 820px) {
  .depends-layout { grid-template-columns: 1fr; }
  .depends-rank { order: 1; }
  .depends-bank { order: 2; }
}

/* ============================================================
   MAKE THE JUDGEMENT STATION
   ============================================================ */

/* Evidence cards row — 4 station summaries */
.judge-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.judge-card {
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  border: 1.5px solid;
  background: var(--econ-white);
}
.judge-card__icon { font-size: 1.3rem; margin-bottom: var(--sp-2); }
.judge-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: 4px;
}
.judge-card__text {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--econ-ink-soft);
}
.judge-card--green  { background: var(--econ-green-50);  border-color: var(--econ-green-100);  }
.judge-card--green  .judge-card__title { color: var(--econ-green-700); }
.judge-card--amber  { background: var(--econ-amber-50);  border-color: var(--econ-amber-100);  }
.judge-card--amber  .judge-card__title { color: var(--econ-amber-700); }
.judge-card--purple { background: var(--econ-purple-50); border-color: var(--econ-purple-100); }
.judge-card--purple .judge-card__title { color: var(--econ-purple-700); }
.judge-card--blue   { background: var(--econ-blue-50);   border-color: var(--econ-blue-100);   }
.judge-card--blue   .judge-card__title { color: var(--econ-blue-700); }

/* Cloze paragraph */
.judge-cloze {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 1;
  font-size: 18px;
  line-height: 2;
  color: var(--econ-ink);
  padding: var(--sp-5) var(--sp-5);
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.judge-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 4px 10px;
  margin: 0 3px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue);
  background: var(--econ-blue-50);
  border: 1.5px solid var(--econ-blue-100);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.judge-blank:hover {
  border-color: var(--econ-blue);
  background: var(--econ-blue-100);
}
.judge-blank.is-active {
  background: var(--econ-blue);
  color: white;
  border-color: var(--econ-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.judge-blank.is-filled {
  background: var(--econ-cream);
  color: var(--econ-ink);
  border-color: var(--econ-border);
  border-style: solid;
}
.judge-blank.is-filled.is-active {
  background: var(--econ-amber);
  color: white;
  border-color: var(--econ-amber);
}
.judge-blank.is-correct {
  background: var(--econ-green-50);
  color: var(--econ-green-700);
  border-color: var(--econ-green);
}
.judge-blank.is-wrong {
  background: var(--econ-rose-50);
  color: var(--econ-rose-700);
  border-color: var(--econ-rose);
}

/* Workspace: bank rows (single column now) */
.judge-workspace {
  display: block;
  margin-bottom: var(--sp-4);
}
.judge-bank {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.judge-bank-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-md);
  transition: background 0.12s, border-color 0.12s;
}
.judge-bank-row.is-active {
  background: var(--econ-amber-50);
  border-color: var(--econ-amber);
}
.judge-bank-row__num {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue);
  text-align: center;
}
.judge-bank-row__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.judge-option {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
  padding: 5px 14px;
  background: var(--econ-white);
  border: 1.5px solid var(--econ-border);
  border-radius: 999px;
  color: var(--econ-ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
  box-shadow: 0 1px 2px rgba(11,20,38,0.04);
}
.judge-option:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(11,20,38,0.08);
  border-color: var(--econ-amber);
  background: var(--econ-amber-50);
}
.judge-option.is-selected {
  background: var(--econ-amber);
  color: white;
  border-color: var(--econ-amber);
}
.judge-option.is-selected:hover:not(:disabled) {
  background: var(--econ-amber-600);
  color: white;
  border-color: var(--econ-amber-600);
}
.judge-option.is-correct {
  background: var(--econ-green);
  color: white;
  border-color: var(--econ-green);
}
.judge-option.is-wrong {
  background: var(--econ-rose);
  color: white;
  border-color: var(--econ-rose);
}
.judge-option:disabled { cursor: default; }

/* Overall position radios */
.judge-overall {
  padding: var(--sp-4);
  background: var(--econ-amber-50);
  border: 1.5px solid var(--econ-amber-100);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.judge-overall__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-1);
}
.judge-overall__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}
.judge-overall__opt:hover:not(:disabled) { background: rgba(255,255,255,0.6); }
.judge-overall__radio {
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  border: 2px solid var(--econ-amber-200);
  background: white;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}
.judge-overall__opt.is-selected .judge-overall__radio {
  border-color: var(--econ-amber);
}
.judge-overall__opt.is-selected .judge-overall__radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--econ-amber);
  transform: translate(-50%, -50%);
}
.judge-overall__opt.is-correct .judge-overall__radio { border-color: var(--econ-green); }
.judge-overall__opt.is-correct .judge-overall__radio::after { background: var(--econ-green); }
.judge-overall__opt.is-correct { background: var(--econ-green-50); }
.judge-overall__opt.is-wrong .judge-overall__radio { border-color: var(--econ-rose); }
.judge-overall__opt.is-wrong .judge-overall__radio::after { background: var(--econ-rose); }
.judge-overall__opt.is-wrong { background: var(--econ-rose-50); }
.judge-overall__label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--econ-ink);
}
.judge-overall__opt:disabled { cursor: default; }

/* Reveal block */
.judge-reveal {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--econ-cream);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--econ-border);
}
.judge-reveal__score {
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--econ-white);
  border: 1.5px solid;
}
.judge-reveal__score--green { border-color: var(--econ-green); }
.judge-reveal__score--amber { border-color: var(--econ-amber); }
.judge-reveal__score--rose  { border-color: var(--econ-rose); }
.judge-reveal__score-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-bottom: 4px;
}
.judge-reveal__score--green .judge-reveal__score-num { color: var(--econ-green-700); }
.judge-reveal__score--amber .judge-reveal__score-num { color: var(--econ-amber-700); }
.judge-reveal__score--rose  .judge-reveal__score-num { color: var(--econ-rose-700); }
.judge-reveal__score-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-muted);
  margin-bottom: var(--sp-2);
}
.judge-reveal__overall {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  padding: 4px 8px;
  border-radius: var(--r-full);
}
.judge-reveal__overall.is-correct { background: var(--econ-green-50); color: var(--econ-green-700); }
.judge-reveal__overall.is-wrong   { background: var(--econ-rose-50);  color: var(--econ-rose-700);  }
.judge-reveal__bridge {
  padding: var(--sp-3);
  background: var(--econ-white);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--econ-amber);
}
.judge-reveal__bridge-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-amber-700);
  margin-bottom: var(--sp-2);
}
.judge-reveal__bridge-text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--econ-ink);
  font-style: italic;
}

/* Ready for Land it rail card */
.rail-card--ready {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue-100);
}
.rail-card--ready .rail-card__flag {
  font-size: 1.4rem;
  margin-bottom: var(--sp-2);
}

/* Responsive */
@media (max-width: 980px) {
  .judge-cards { grid-template-columns: repeat(2, 1fr); }
  .judge-workspace { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE / SMARTPHONE RESPONSIVE
   Prevent side-scroll, fix text overflow, scale diagrams
   ============================================================ */

/* ── Prevent overflow on all containers ── */
.app, .page, .link-card, .link-card__body,
.depends-layout, .depends-bank, .depends-slots,
.chain-layout, .diag-wrap, .judge-cloze,
.judge-cards, .judge-workspace, .judge-reveal {
  max-width: 100%;
  min-width: 0;
}

/* ── Wrap long words in text containers ── */
.link-card__title,
.link-card__instruction,
.link-card__claim,
.depends-factor__label,
.depends-slot__head,
.depends-ideal,
.chain-slot__text,
.diag-interp-row__q,
.judge-card__text,
.judge-cloze,
.judge-reveal__bridge-text,
.judge-overall__label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Small phone breakpoint (≤ 600px) ── */
@media (max-width: 600px) {

  /* Reduce link card padding */
  .link-card { padding: var(--sp-4); }

  /* Stack claim card on narrow screens */
  .depends-claim { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
  .depends-claim__text { font-size: var(--fs-md); }

  /* Judge: stack evidence cards to 1 column */
  .judge-cards { grid-template-columns: 1fr; }

  /* Cloze paragraph: smaller font, allow line wrapping */
  .judge-cloze { font-size: var(--fs-sm); line-height: 1.9; padding: var(--sp-3); }

  /* Blank chips: shrink min-width so they don't blow out the container */
  .judge-blank { min-width: 44px; padding: 3px 7px; font-size: var(--fs-xs); }

  /* Judge option pills: wrap freely */
  .judge-bank-row__opts { flex-wrap: wrap; }
  .judge-option { font-size: var(--fs-sm); padding: 6px 12px; }

  /* Reveal: stack score + bridge */
  .judge-reveal { grid-template-columns: 1fr; }

  /* Diagram options: already 1-col at 680px; ensure thumb SVG scales */
  .diag-option__thumb svg { width: 100%; height: auto; }
  .diag-wrap { overflow: hidden; }

  /* Drop-zones: allow text to wrap so they don't overflow */
  .diag-zone { white-space: normal; font-size: 10px; padding: 0 6px; }

  /* Depends bank: ensure factors don't overflow */
  .depends-factor { max-width: 100%; }
  .depends-factor__label { white-space: normal; }

  /* Depends slots: full width */
  .depends-slot--filled { min-width: 0; width: 100%; }
  .depends-slot__textarea { font-size: var(--fs-xs); }

  /* Station progress rail (cards-list): allow wrap */
  .cards-list { flex-wrap: wrap; }

  /* Context / chain: reduce font size slightly */
  .link-card__instruction { font-size: var(--fs-sm); }
}

/* ── Extra-small phones (≤ 400px) ── */
@media (max-width: 400px) {
  .judge-cloze { font-size: 13px; }
  .judge-blank { min-width: 36px; padding: 2px 5px; }
  .link-card { padding: var(--sp-3); }
}


/* ============================================================
   BRAND REFRESH — sticky nav, mobile nav, sidebar logo,
   topbar sticky, improved intro card polish
   ============================================================ */

/* ── Sticky topbar (desktop) ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
}

/* ── Mobile nav (shown on ≤ 900px where sidebar is hidden) ── */
.mobile-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--econ-white);
  border-bottom: 1px solid var(--econ-border);
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 var(--sp-4);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(11,20,38,0.07);
}
.mobile-nav__logo {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 1;
  min-width: 0;
}
.mobile-nav__logo img {
  height: 32px;
  max-height: 32px;
  width: 32px;
  max-width: 32px;
  object-fit: contain;
  display: block;
}
.mobile-nav__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.mobile-nav__streak {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  background: var(--econ-green-50);
  border: 1px solid var(--econ-green-100);
  padding: 5px 12px;
  border-radius: var(--r-full);
}
.mobile-nav__avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--econ-blue-100);
  color: var(--econ-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(37,99,235,0.18);
}

@media (max-width: 900px) {
  .mobile-nav { display: flex; }
  .topbar { position: sticky; top: 56px; z-index: 89; }
}

/* ── Updated sidebar brand — show logo-full, hide old text ── */
.sidebar__logo-link {
  display: block;
  padding: var(--sp-4) 0 var(--sp-5);
}
.sidebar__logo-full {
  width: 156px;
  height: auto;
  display: block;
}
.sidebar__wordmark,
.sidebar__tagline { display: none; }
/* Also hide the old icon-only wrapper if still present */
.sidebar__brand .sidebar__logo { display: none; }
.sidebar__brand .sidebar__logo-link ~ .sidebar__logo { display: none; }

/* ── Sidebar nav — improved active state ── */
.sidebar__nav a.is-active {
  background: linear-gradient(135deg, var(--econ-blue-50) 0%, rgba(219,234,254,0.6) 100%);
  color: var(--econ-blue-700);
  font-weight: var(--fw-semi);
}

/* ── Topic page intro card — hero visual improvements ── */
.intro-card {
  background: linear-gradient(160deg, #FFFFFF 60%, #F0FDF7 100%);
  border: 1.5px solid var(--econ-border);
  border-top: 3px solid var(--econ-green);
}

/* ── Session meta — polished ── */
.session-meta {
  border: 1.5px solid var(--econ-border);
  border-radius: var(--r-xl);
  background: var(--econ-white);
  box-shadow: 0 2px 10px rgba(11,20,38,0.05);
}

/* ── Card improvements — stronger top accent ── */
.card {
  border: 1.5px solid var(--econ-border);
  box-shadow: 0 2px 12px rgba(11,20,38,0.05);
}

/* ── Button improvements ── */
.btn--primary {
  box-shadow: 0 3px 10px rgba(11,20,38,0.2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(11,20,38,0.25);
}

/* ── Right rail — cleaner ── */
.rail-card {
  border: 1.5px solid var(--econ-border);
  box-shadow: 0 2px 8px rgba(11,20,38,0.04);
}

/* ── Topbar improvements ── */
.topbar {
  box-shadow: 0 1px 6px rgba(11,20,38,0.07);
}

/* ── Page: extra top breathing room for sticky topbar ── */
.page { scroll-margin-top: var(--header-h); }

/* ============================================================
   LINK IT — Complete page
   ============================================================ */

.lc-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--econ-border);
}
.lc-hero__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--econ-green-50);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-hero__title {
  font-family: var(--ff-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: 1.2;
  margin-bottom: var(--sp-1);
}
.lc-hero__sub {
  font-size: var(--fs-sm);
  color: var(--econ-muted);
  line-height: 1.5;
}

/* Stat boxes grid */
.lc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.lc-stat-box {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
}
.lc-stat-box--gauge {
  align-items: center;
  text-align: center;
}
.lc-stat-box--empty {
  background: transparent;
  border-color: transparent;
}
.lc-stat-box__label {
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  color: var(--econ-muted);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.lc-stat-box__main {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--sp-1);
}
.lc-stat-box__big {
  font-family: var(--ff-head);
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  line-height: 1;
}
.lc-stat-box__denom {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--econ-muted);
}
.lc-stat-box__pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-muted);
  margin-bottom: var(--sp-2);
}
.lc-stat-box__msg {
  font-size: var(--fs-xs);
  color: var(--econ-muted);
  font-style: italic;
  line-height: 1.4;
  margin-top: auto;
}

/* Readiness gauge */
.lc-gauge {
  width: 90px;
  height: 90px;
  margin: var(--sp-2) 0;
}
.lc-gauge__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-muted);
  margin-top: var(--sp-1);
}

/* Station table */
.lc-station-table {
  margin-bottom: var(--sp-5);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lc-station-table__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-gray-400);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 2px solid var(--econ-border);
  background: var(--econ-gray-50);
}
.lc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--econ-border);
}
.lc-row:last-child { border-bottom: none; }
.lc-row__badge {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  color: white;
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lc-row__name {
  flex: 0 0 180px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.lc-row__score {
  flex: 0 0 140px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}
.lc-row__fb {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--econ-muted);
}
.lc-row__sublabel {
  font-size: var(--fs-xs);
  color: var(--econ-gray-400);
  font-weight: 400;
  margin-top: 1px;
}
.lc-row__time {
  flex: 0 0 88px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.lc-stat-box__big--time {
  font-size: 22px;
}
.lc-th--spacer { flex: 0 0 28px; }
.lc-th--name   { flex: 0 0 180px; }
.lc-th--score  { flex: 0 0 140px; }
.lc-th--time   { flex: 0 0 88px; }

/* Advice boxes */
.lc-advice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.lc-advice-box {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.lc-advice-box__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  margin-bottom: var(--sp-3);
}
.lc-advice-box__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: 1.6;
}
.lc-weak-chip {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--econ-amber-50);
  border: 1px solid var(--econ-amber-100);
  border-radius: var(--r-md);
}
.lc-weak-chip__label {
  font-size: 10px;
  font-weight: var(--fw-semi);
  color: var(--econ-amber-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.lc-weak-chip__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-amber-700);
}

/* Rail next card */
.lc-next {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.lc-next__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.lc-next__text {
  font-size: var(--fs-sm);
  color: var(--econ-muted);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 820px) {
  .lc-stats  { grid-template-columns: 1fr; }
  .lc-advice { grid-template-columns: 1fr; }
  .lc-row__name { flex: 1; }
}

/* ============================================================
   Land It — theme & components
   Scope: .theme--land wraps the entire .app on Land It pages.
   ============================================================ */

.theme--land .topbar__session-label { color: var(--econ-rose-600); }

.theme--land .stage.is-current .stage__num {
  border-color: var(--econ-rose);
  color: var(--econ-rose-600);
}
.theme--land .stage.is-current .stage__name { color: var(--econ-rose-600); }
.theme--land .stage__chip {
  background: var(--econ-rose-100);
  color: var(--econ-rose-600);
}

.theme--land .btn--primary {
  background: var(--econ-rose);
  border-color: var(--econ-rose);
  color: var(--econ-white);
}
.theme--land .btn--primary:hover {
  background: var(--econ-rose-600);
  border-color: var(--econ-rose-600);
  color: var(--econ-white);
}
.theme--land .btn--primary.is-disabled {
  background: var(--econ-gray-100);
  border-color: var(--econ-gray-100);
  color: var(--econ-gray-400);
  pointer-events: none;
  cursor: default;
}

/* Configurator card */
.land-config-card {
  padding: var(--sp-6) var(--sp-8);
}
.land-config-card__head {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--econ-gray-200);
}
.land-config-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  margin-bottom: var(--sp-1);
}
.land-config-card__sub {
  font-size: var(--fs-sm);
  color: var(--econ-gray-500);
}

/* Section list */
.land-sections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Individual section tile */
.land-section {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  background: var(--econ-cream);
}
.land-section__head {
  margin-bottom: var(--sp-2);
}
.land-section__label-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.land-section__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.land-section__tag--a {
  background: var(--econ-green-50);
  color: var(--econ-green-700);
  border: 1.5px solid var(--econ-green-100);
}
.land-section__tag--b {
  background: var(--econ-amber-50);
  color: var(--econ-amber-700);
  border: 1.5px solid var(--econ-amber-100);
}
.land-section__tag--c {
  background: var(--econ-rose-50);
  color: var(--econ-rose-600);
  border: 1.5px solid var(--econ-rose-100);
}
.land-section__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  line-height: 1.2;
}
.land-section__sub {
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
}
.land-section__desc {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.5;
}

/* Pill selector buttons */
.land-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.land-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--sp-4);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
  background: var(--econ-white);
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, box-shadow 0.13s, color 0.13s;
  line-height: 1;
  min-width: 48px;
}
.land-pill:hover {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
  color: var(--econ-rose-600);
}
.land-pill.is-selected {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
  color: var(--econ-rose-600);
  box-shadow: 0 0 0 3px rgba(236,45,104,0.14);
  font-weight: var(--fw-bold);
}
.land-pill--skip {
  color: var(--econ-gray-500);
}
.land-pill--skip:hover {
  border-color: var(--econ-gray-300);
  background: var(--econ-gray-50);
  color: var(--econ-gray-600);
}
.land-pill--skip.is-selected {
  border-color: var(--econ-gray-300);
  background: var(--econ-gray-100);
  color: var(--econ-gray-600);
  box-shadow: none;
}
.land-pill--lg {
  padding: var(--sp-2) var(--sp-5);
}

/* Session meta bar */
.land-session-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  background: var(--econ-white);
  border: 1px solid var(--econ-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.land-session-meta__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.land-session-meta__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--econ-rose-50);
  color: var(--econ-rose-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.land-session-meta__label {
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
}
.land-session-meta__val {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.land-session-meta__cta { margin-left: auto; }

/* Rail summary panel */
.land-rs__marks-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: 2px;
}
.land-rs__marks-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  font-variation-settings: var(--fraunces-display);
  color: var(--econ-rose-600);
  line-height: 1;
}
.land-rs__marks-label {
  font-size: var(--fs-sm);
  color: var(--econ-gray-500);
  font-weight: var(--fw-semi);
}
.land-rs__time {
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
  margin-bottom: var(--sp-3);
}
.land-rs__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.land-rs__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  line-height: 1.4;
}
.land-rs__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.land-rs__dot--a { background: var(--econ-green); }
.land-rs__dot--b { background: var(--econ-amber); }
.land-rs__dot--c { background: var(--econ-rose); }
.land-rs__empty {
  font-size: var(--fs-xs);
  color: var(--econ-gray-400);
  font-style: italic;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 820px) {
  .land-config-card { padding: var(--sp-5) var(--sp-5); }
  .land-session-meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }
  .land-session-meta__cta { margin-left: 0; }
}

/* ============================================================
   Land It — Section A question page
   ============================================================ */

/* page wrapper */
.land-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-10);
  min-width: 0; /* prevent CSS grid blowout */
}

/* section header */
.land-section-header {
  padding: var(--sp-6) var(--sp-8);
  background: var(--econ-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--econ-border);
}
.land-section-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-rose-600);
  background: var(--econ-rose-50);
  border: 1px solid var(--econ-rose-100);
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: var(--sp-3);
}
.land-section-title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--econ-ink);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}
.land-section-desc {
  font-size: var(--fs-sm);
  color: var(--econ-gray-600);
  margin: 0;
}

/* progress bar card */
.land-progress-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-6);
}
.land-progress-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.land-progress-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--econ-rose-50);
  color: var(--econ-rose-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.land-progress-card__label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.land-progress-card__count {
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
  white-space: nowrap;
}
.land-progress-bar {
  height: 6px;
  background: var(--econ-rose-100);
  border-radius: var(--r-full);
  overflow: hidden;
}
.land-progress-bar__fill {
  height: 100%;
  background: var(--econ-rose);
  border-radius: var(--r-full);
  transition: width 0.4s ease;
}

/* question card */
.land-q-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.land-q-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--econ-gray-100);
}
.land-q-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}
.land-q-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--econ-gray-500);
  margin-top: 2px;
}
.land-q-marks {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--econ-rose-600);
  background: var(--econ-rose-50);
  border: 1px solid var(--econ-rose-100);
  border-radius: var(--r-full);
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.land-q-card__body {
  display: flex;
  flex-direction: column;
}
.land-q-context {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--econ-gray-100);
  background: var(--econ-gray-50);
}
.land-q-parts {
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* chart wrap */
.land-chart-wrap {
  background: var(--econ-white);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
}

/* data grid */
.land-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.land-data-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--econ-white);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--econ-gray-100);
}
.land-data-item__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: var(--fw-bold);
}
.land-data-item__icon--green { background: var(--econ-green-50);  color: var(--econ-green-600); }
.land-data-item__icon--rose  { background: var(--econ-rose-50);   color: var(--econ-rose-600);  }
.land-data-item__icon--blue  { background: var(--econ-blue-50);   color: var(--econ-blue-600);  }
.land-data-item__icon--amber { background: var(--econ-amber-50);  color: var(--econ-amber-600); }
.land-data-item__label {
  font-size: 10px;
  color: var(--econ-gray-500);
  line-height: 1.3;
  margin-bottom: 2px;
}
.land-data-item__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}

/* question parts */
.land-part {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.land-part__stem {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-base);
}
.land-part__stem--row {
  flex-wrap: wrap;
}
.land-part__letter {
  font-weight: var(--fw-bold);
  color: var(--econ-rose-600);
  flex-shrink: 0;
}
.land-part__stem-text { flex: 1; }
.land-part__marks {
  font-size: var(--fs-xs);
  color: var(--econ-gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* MCQ options */
.land-mcq-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.land-mcq-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  background: var(--econ-white);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  transition: border-color 0.12s, background 0.12s;
  width: 100%;
}
.land-mcq-option:hover {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
}
.land-mcq-option.is-selected {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
}
.land-mcq-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--econ-gray-300);
  flex-shrink: 0;
  background: var(--econ-white);
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.land-mcq-option.is-selected .land-mcq-radio {
  border-color: var(--econ-rose);
  background: var(--econ-rose);
}
.land-mcq-option.is-selected .land-mcq-radio::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--econ-white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* revealed states */
.land-mcq-option.is-correct {
  border-color: var(--econ-green);
  background: var(--econ-green-50);
  cursor: default;
}
.land-mcq-option.is-correct .land-mcq-radio {
  border-color: var(--econ-green);
  background: var(--econ-green);
}
.land-mcq-option.is-wrong {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
  cursor: default;
}
.land-mcq-option.is-wrong .land-mcq-radio {
  border-color: var(--econ-rose-600);
  background: var(--econ-rose-600);
}
.land-mcq-text { flex: 1; }

/* feedback / model answer */
.land-part-feedback {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border-left: 3px solid;
}
.land-part-feedback--correct {
  background: var(--econ-green-50);
  border-color: var(--econ-green);
  color: var(--econ-green-700);
}
.land-part-feedback--wrong {
  background: var(--econ-rose-50);
  border-color: var(--econ-rose);
  color: var(--econ-rose-700);
}
.land-part-model {
  background: var(--econ-gray-50);
  border: 1px solid var(--econ-gray-200);
  border-left: 3px solid var(--econ-green);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.land-part-model__label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--econ-green-600);
  margin-bottom: var(--sp-1);
}
.land-part-model__text {
  font-size: var(--fs-xs);
  color: var(--econ-gray-700);
  line-height: var(--lh-base);
}

/* freetext */
.land-freetext-ta {
  width: 100%;
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  color: var(--econ-ink);
  resize: vertical;
  background: var(--econ-white);
  box-sizing: border-box;
  line-height: var(--lh-base);
  transition: border-color 0.12s;
}
.land-freetext-ta:focus {
  outline: none;
  border-color: var(--econ-rose);
  box-shadow: 0 0 0 3px rgba(236,45,104,0.1);
}
.land-freetext-ta--sm { min-height: 80px; }
.land-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--econ-rose-600);
  line-height: var(--lh-base);
}
.land-hint svg { flex-shrink: 0; margin-top: 1px; }
.land-hint-details { font-size: var(--fs-xs); }
.land-hint-details[open] .land-hint-summary span::after { content: " — hide"; opacity: 0.7; }
.land-hint-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--econ-gray-500);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: var(--fw-medium);
  padding: 2px 0;
}
.land-hint-summary::-webkit-details-marker { display: none; }
.land-hint-summary svg { flex-shrink: 0; width: 14px; height: 14px; }
.land-hint-summary:hover { color: var(--econ-rose-600); }
.land-hint-details .land-hint { margin-top: var(--sp-2); padding-left: 20px; }

/* calculation flow */
.land-part--calc { gap: var(--sp-4); }
.land-calc-badge-wrap { display: flex; }
.land-calc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-blue-700);
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-radius: var(--r-full);
  padding: 4px 10px;
}
.land-calc-flow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.land-calc-step { flex: 1; min-width: 0; }
.land-calc-step__label {
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--econ-gray-500);
  margin-bottom: var(--sp-1);
  line-height: 1.3;
}
.land-calc-step__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1.5px solid var(--econ-gray-200);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  background: var(--econ-white);
  transition: border-color 0.12s;
}
.land-calc-step__input-wrap:focus-within {
  border-color: var(--econ-rose);
  box-shadow: 0 0 0 3px rgba(236,45,104,0.1);
}
.land-calc-step__input {
  border: none;
  outline: none;
  font-size: var(--fs-sm);
  flex: 1;
  background: transparent;
  color: var(--econ-ink);
  min-width: 0;
  font-family: var(--font-body);
}
.land-calc-step__unit {
  font-size: var(--fs-sm);
  color: var(--econ-gray-400);
  flex-shrink: 0;
}
.land-calc-step__reveal {
  font-size: 11px;
  color: var(--econ-green-600);
  margin-top: var(--sp-1);
  padding-left: var(--sp-1);
}
.land-calc-arrow {
  color: var(--econ-gray-400);
  padding-top: 26px;
  flex-shrink: 0;
}
.land-calc-interp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* right rail — this section panel */
.land-this-section {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
}
.land-this-section__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-gray-500);
  margin-bottom: var(--sp-3);
}
.land-this-section__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.land-this-section__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.land-this-section__icon--a { background: var(--econ-rose-50);  color: var(--econ-rose-600);  }
.land-this-section__icon--b { background: var(--econ-amber-50); color: var(--econ-amber-600); }
.land-this-section__icon--c { background: var(--econ-blue-50);  color: var(--econ-blue-600);  }
.land-this-section__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.land-this-section__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.land-this-section__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--econ-gray-600);
}
.land-this-section__meta-item svg { color: var(--econ-gray-400); flex-shrink: 0; }

/* right rail — question navigator */
.land-q-nav {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
}
.land-q-nav__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-gray-500);
  margin-bottom: var(--sp-3);
}
.land-q-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--econ-gray-100);
  background: var(--econ-white);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  transition: border-color 0.12s, background 0.12s;
}
.land-q-nav__item:last-child { margin-bottom: 0; }
.land-q-nav__item:hover { border-color: var(--econ-rose); background: var(--econ-rose-50); }
.land-q-nav__item.is-current {
  border-color: var(--econ-rose);
  background: var(--econ-rose-50);
}
.land-q-nav__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
  flex: 1;
}
.land-q-nav__badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.land-q-nav__item.is-current .land-q-nav__badge {
  background: var(--econ-rose);
  color: var(--econ-white);
}
.land-q-nav__badge--next {
  background: var(--econ-gray-100);
  color: var(--econ-gray-600);
}

/* bottom action bar */
.land-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
  margin-top: var(--sp-2);
}
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--econ-gray-300);
  border-radius: var(--r-lg);
  background: var(--econ-white);
  color: var(--econ-gray-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.btn--ghost:hover { border-color: var(--econ-rose); background: var(--econ-rose-50); color: var(--econ-rose-600); }

/* data table context */
.land-table-wrap {
  overflow-x: auto;
}
.land-table__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--econ-gray-600);
  margin-bottom: var(--sp-2);
}
.land-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.land-table thead th {
  text-align: right;
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--econ-gray-200);
  white-space: nowrap;
}
.land-table thead th:first-child { text-align: left; }
.land-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  color: var(--econ-ink);
  border-bottom: 1px solid var(--econ-gray-100);
  white-space: nowrap;
}
.land-table tbody tr:last-child td { border-bottom: none; }
.land-table__label {
  text-align: left !important;
  font-weight: var(--fw-medium);
  color: var(--econ-gray-700);
  white-space: normal;
}

/* text extract context */
.land-extract {
  background: var(--econ-gray-50);
  border-left: 3px solid var(--econ-rose);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4);
}
.land-extract__text {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-base);
  font-style: italic;
}
.land-extract__source {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--econ-gray-500);
}

/* ============================================================
   Section B — context pack, tips, strong-answers
   ============================================================ */

.land-context-pack {
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.land-context-pack__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--econ-rose-50);
  border-bottom: 1px solid var(--econ-rose-100);
}
.land-context-pack__icon { color: var(--econ-rose-600); display: inline-flex; }
.land-context-pack__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--econ-ink);
}
.land-context-pack__body { padding: 0; }

.land-extract-acc {
  border-bottom: 1px solid var(--econ-gray-100);
}
.land-extract-acc:last-child { border-bottom: none; }
.land-extract-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}
.land-extract-acc__summary::-webkit-details-marker { display: none; }
.land-extract-acc__summary:hover { background: var(--econ-gray-50); }
.land-extract-acc__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.land-extract-acc__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--econ-rose-600);
}
.land-extract-acc__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--econ-ink);
}
.land-extract-acc__chev {
  color: var(--econ-gray-400);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.land-extract-acc[open] > .land-extract-acc__summary .land-extract-acc__chev {
  transform: rotate(180deg);
}
.land-extract-acc__body {
  padding: 0 var(--sp-5) var(--sp-4);
}
.land-extract-acc__paragraph {
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  line-height: var(--lh-base);
  margin: 0 0 var(--sp-3);
}
.land-extract-acc__paragraph:last-of-type { margin-bottom: var(--sp-3); }

.land-extract-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.land-extract-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--econ-rose-600);
  background: var(--econ-rose-50);
  border: 1px solid var(--econ-rose-100);
  border-radius: var(--r-full);
  padding: 3px 10px;
  white-space: nowrap;
}

/* tips disclosure */
.land-tips-details {
  background: var(--econ-amber-50);
  border: 1px solid var(--econ-amber-100);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.land-tips-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-amber-700);
}
.land-tips-summary::-webkit-details-marker { display: none; }
.land-tips-summary__icon { color: var(--econ-amber-600); display: inline-flex; }
.land-tips-summary__icon svg { width: 16px; height: 16px; }
.land-tips-summary:hover { color: var(--econ-amber-700); }
.land-tips-details[open] .land-tips-summary__label::after { content: " — hide"; opacity: 0.7; }
.land-tips-list {
  margin: var(--sp-2) 0 var(--sp-1);
  padding-left: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--econ-ink);
  line-height: var(--lh-base);
}
.land-tips-list li { margin-bottom: 4px; }
.land-tips-list li:last-child { margin-bottom: 0; }

/* large freetext for Section B */
.land-freetext-ta--lg { min-height: 180px; }

/* Section C — single essay */
.land-essay-card {
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.land-essay-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.land-essay-card__command {
  display: inline-block;
  font-family: var(--font-display, "Fraunces"), serif;
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--econ-blue-700);
  background: var(--econ-blue-50);
  border: 1px solid var(--econ-blue-100);
  border-radius: var(--r-md);
  padding: 4px 16px;
  letter-spacing: 0.01em;
}
.land-essay-card__marks {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--econ-gray-500);
  white-space: nowrap;
}
.land-essay-card__stem {
  font-family: var(--font-display, "Fraunces"), serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--econ-ink);
  font-weight: 500;
}
.land-freetext-ta--essay { min-height: 360px; }

.land-tips-details--essay {
  background: var(--econ-blue-50);
  border-color: var(--econ-blue-100);
}
.land-tips-details--essay .land-tips-summary { color: var(--econ-blue-700); }
.land-tips-details--essay .land-tips-summary__icon { color: var(--econ-blue-600); }

.land-part-model--essay .land-part-model__text p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.land-part-model--essay .land-part-model__text p:last-child { margin-bottom: 0; }

/* stacked body (no side context column) */
.land-q-card__body--stack { flex-direction: column; }

/* right-rail "What strong answers do" */
.land-strong-answers {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--econ-white);
  border: 1px solid var(--econ-border);
  border-radius: var(--r-xl);
}
.land-strong-answers__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--econ-gray-500);
  margin-bottom: var(--sp-3);
}
.land-strong-answers__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--econ-ink);
  margin-bottom: var(--sp-2);
}
.land-strong-answers__item:last-child { margin-bottom: 0; }
.land-strong-answers__tick {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--econ-green-50);
  color: var(--econ-green-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.land-strong-answers__tick svg { width: 10px; height: 10px; }

/* ── diagram attachment zone ───────────────────────────── */
.land-diagram-zone {
  margin-top: var(--sp-3);
}
.land-diagram-zone__input {
  display: none;
}
.land-diagram-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  background: var(--econ-gray-50);
  border: 1.5px dashed var(--econ-gray-300);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--econ-gray-500);
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.land-diagram-btn:hover {
  background: var(--econ-gray-100);
  border-color: var(--econ-gray-400);
  color: var(--econ-gray-700);
}
.land-diagram-btn__icon {
  font-size: 15px;
  line-height: 1;
}
.land-diagram-zone__preview-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.land-diagram-zone__img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--econ-gray-200);
  object-fit: contain;
  background: var(--econ-gray-50);
}
.land-diagram-zone__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.land-diagram-zone__remove:hover {
  background: rgba(220, 38, 38, 0.85);
}

/* responsive */
@media (max-width: 820px) {
  .land-calc-flow { flex-wrap: wrap; }
  .land-calc-arrow { padding-top: 0; align-self: center; }
  .land-section-header { padding: var(--sp-4) var(--sp-5); }
  .land-bottom-bar { flex-direction: column; align-items: stretch; }
  .land-bottom-bar .btn--ghost,
  .land-bottom-bar .btn--primary { width: 100%; text-align: center; justify-content: center; }
}