/* ============================================================
   AIGP Self-Study — Direction B "Modern Slate"
   Newsreader headlines · IBM Plex Sans body · forest-green accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* neutrals — cool gray */
  --bg: oklch(0.989 0.002 250);
  --surface: #ffffff;
  --sidebar-bg: oklch(0.982 0.003 250);
  --ink: oklch(0.25 0.008 260);
  --read: oklch(0.34 0.009 260);
  --muted: oklch(0.49 0.01 260);
  --faint: oklch(0.64 0.01 262);
  --line: oklch(0.912 0.004 260);
  --line-soft: oklch(0.95 0.003 260);

  /* accent — forest green */
  --accent: oklch(0.50 0.085 158);
  --accent-deep: oklch(0.42 0.082 158);
  --accent-line: oklch(0.85 0.045 158);
  --accent-soft: oklch(0.96 0.024 158);
  --accent-tint: oklch(0.975 0.014 158);

  /* warning — muted clay (for red-flags) */
  --warn: oklch(0.55 0.115 38);
  --warn-line: oklch(0.86 0.055 45);
  --warn-soft: oklch(0.965 0.022 50);

  /* info — slate blue (for generic-industry use case) */
  --slate: oklch(0.50 0.05 250);
  --slate-line: oklch(0.86 0.03 250);
  --slate-soft: oklch(0.965 0.014 250);

  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --sidebar-w: 300px;
  --shadow-sm: 0 1px 2px rgba(20,30,45,.05);
  --shadow: 0 4px 18px -6px rgba(20,30,45,.12), 0 1px 3px rgba(20,30,45,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }

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

/* ---- top bar ---- */
.topbar {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding: 0 26px 0 22px;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 17px; box-shadow: var(--shadow-sm);
}
.brand-txt b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; display: block; line-height: 1.1; }
.brand-txt span { color: var(--faint); font-size: 11.5px; letter-spacing: .02em; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.top-progress { display: flex; align-items: center; gap: 11px; }
.tp-track { width: 150px; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tp-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.tp-label { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.top-cta {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.top-cta:hover { border-color: var(--accent-line); color: var(--accent); }
.top-cta svg { width: 14px; height: 14px; }

/* higher-ed lens switch */
.hed-switch {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.hed-switch:hover { border-color: var(--accent-line); color: var(--accent-deep); }
.hed-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hed-switch .hsw-ic { display: grid; place-items: center; color: var(--faint); }
.hed-switch .hsw-ic svg { width: 15px; height: 15px; }
.hed-switch .hsw-label { white-space: nowrap; }
.hed-switch .hsw-track {
  width: 34px; height: 19px; border-radius: 99px; background: var(--line);
  position: relative; flex: none; transition: background .18s;
}
.hed-switch .hsw-thumb {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s;
}
.hed-switch[aria-checked="true"] { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-tint); }
.hed-switch[aria-checked="true"] .hsw-ic { color: var(--accent-deep); }
.hed-switch[aria-checked="true"] .hsw-track { background: var(--accent); }
.hed-switch[aria-checked="true"] .hsw-thumb { transform: translateX(15px); }
@media (prefers-reduced-motion: reduce) {
  .hed-switch .hsw-track, .hed-switch .hsw-thumb { transition: none; }
}
@media (max-width: 540px) { .hed-switch .hsw-label { display: none; } }

/* ============ SIDEBAR ============ */
.sidebar {
  position: sticky; top: 62px; align-self: start; height: calc(100vh - 62px);
  overflow-y: auto; background: var(--sidebar-bg);
  border-right: 1px solid var(--line); padding: 18px 12px 60px;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.side-search {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px;
  margin: 4px 6px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--faint); font-size: 13px;
}
.side-search svg { width: 15px; height: 15px; opacity: .6; flex: none; }
.side-search input {
  border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13px;
  color: var(--ink); width: 100%;
}
.side-home {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 6px 6px;
  border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--muted);
}
.side-home:hover { background: var(--accent-tint); color: var(--accent); }
.side-home.active { background: var(--accent-soft); color: var(--accent-deep); }
.side-home svg { width: 16px; height: 16px; }

.spot-group { margin: 8px 6px 4px; padding: 8px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spot-head { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 2px 6px 6px; }
.spot-group.collapsible { padding-bottom: 6px; }
.spot-group.collapsible .spot-links { display: none; }
.spot-group.collapsible.open .spot-links { display: block; padding-top: 2px; }
button.spot-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: transparent; border: 0; cursor: pointer; padding: 3px 6px 6px;
}
button.spot-toggle:hover { color: var(--muted); }
.spot-toggle .spot-count { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.spot-toggle .spot-chev { margin-left: auto; width: 12px; height: 12px; color: var(--faint); transition: transform .2s; display: grid; place-items: center; }
.spot-toggle .spot-chev svg { width: 12px; height: 12px; }
.spot-group.open .spot-toggle .spot-chev { transform: rotate(90deg); }
.side-home.spot { margin: 0; padding: 7px 6px; font-size: 12.5px; font-weight: 600; }
.side-home.spot svg { width: 13px; height: 13px; color: var(--accent); }

.dom-group { margin-top: 14px; }
.dom-head {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; margin: 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  border-radius: var(--radius); text-decoration: none; transition: background .12s, color .12s;
}
.dom-head:hover { background: var(--line-soft); color: var(--muted); }
.dom-head.active { color: var(--accent-deep); }
.dom-head.active .dnum { background: var(--accent-soft); }
.dom-head .dnum {
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 5px; background: var(--accent-tint);
}

/* domain accordion */
.dom-head-row { display: flex; align-items: center; margin: 0 6px; }
.dom-head-row .dom-head { flex: 1; min-width: 0; margin: 0; }
.dom-head-row .dom-head > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dom-toggle {
  flex: none; width: 26px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--faint);
  border-radius: var(--radius); transition: background .12s, color .12s;
}
.dom-toggle:hover { background: var(--line-soft); color: var(--muted); }
.dom-toggle svg { width: 13px; height: 13px; transition: transform .2s; }
.dom-group.open .dom-toggle svg { transform: rotate(90deg); }
.dom-body { display: none; }
.dom-group.open .dom-body { display: block; }

/* competency (collapsible "module") */
.comp { margin: 2px 6px; }
.comp-btn {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius);
  font-size: 12.8px; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.comp-btn:hover { background: var(--line-soft); }
.comp-btn .ccode { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; flex: none; }
.comp-btn .ctitle { flex: 1; }
.comp-btn .cchev { width: 13px; height: 13px; color: var(--faint); flex: none; transition: transform .2s; display: grid; place-items: center; }
.comp.open .comp-btn .cchev { transform: rotate(90deg); }
.comp-mini { font-size: 10.5px; color: var(--faint); font-family: var(--mono); flex: none; }

.pi-list { display: none; margin: 2px 0 6px; }
.comp.open .pi-list { display: block; }
.pi-link {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 10px 6px 14px;
  margin-left: 14px; border-left: 1.5px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 12.3px; color: var(--muted); line-height: 1.4;
}
.pi-link:hover { background: var(--line-soft); color: var(--ink); }
.pi-link.active {
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
  border-left-color: var(--accent);
}
.pi-link .tick {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--surface);
}
.pi-link.done .tick { background: var(--accent); border-color: var(--accent); }
.pi-link.done .tick svg { width: 9px; height: 9px; color: #fff; }
.pi-link.done .pi-name { color: var(--faint); }
.pi-link .picode { font-family: var(--mono); font-size: 10.5px; opacity: .75; }

/* ---- icon sizing fallbacks (inline SVGs in fixed containers) ---- */
.cchev svg { width: 13px; height: 13px; display: block; }
.dc-meta svg { width: 14px; height: 14px; }
.dbadge svg { width: 15px; height: 15px; }
.l-sec-num svg { width: 16px; height: 16px; }
.objective .obj-ic svg { width: 22px; height: 22px; }
.redflag .rf-ic svg { width: 19px; height: 19px; }

/* ============ MAIN CONTENT ============ */
.main { min-width: 0; }
.view { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ---- breadcrumb ---- */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); padding: 26px 0 0; flex-wrap: wrap; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: .45; }
.crumb b { color: var(--muted); font-weight: 500; }

/* ============ HOME ============ */
.home-banner { display: flex; align-items: center; gap: 16px; margin: 14px 0 4px; padding: 14px 18px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); flex-wrap: wrap; }
.home-banner .hb-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 99px; padding: 5px 12px; white-space: nowrap; flex: none; }
.home-banner p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--read); flex: 1; min-width: 240px; }
.home-banner p b { color: var(--ink); font-weight: 600; }
.hero { padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.hero-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: 50px; line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 20px; max-width: 18ch;
}
.hero p { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0 0 28px; }
.hero-stats { display: flex; gap: 38px; flex-wrap: wrap; }
.hstat b { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); display: block; line-height: 1; }
.hstat span { font-size: 12.5px; color: var(--faint); margin-top: 6px; display: block; }
.hero-resume {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 12px 20px;
  background: var(--accent); color: #fff; border-radius: 99px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow);
}
.hero-resume:hover { background: var(--accent-deep); }
.hero-resume svg { width: 16px; height: 16px; }

.home-sec-h { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 46px 0 6px; letter-spacing: -.01em; }
.home-sec-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; }

.dom-cards { display: grid; gap: 18px; padding-bottom: 36px; }
.dom-card {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; align-items: start;
  padding: 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .2s;
}
.dom-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.dom-card .dc-num {
  width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-family: var(--serif); font-weight: 600; font-size: 26px;
}
.dom-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 2px 0 7px; letter-spacing: -.01em; }
.dom-card p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.55; max-width: 62ch; }
.dom-card .dc-meta { display: flex; gap: 16px; font-size: 12px; color: var(--faint); flex-wrap: wrap; }
.dom-card .dc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dom-card .dc-meta b { color: var(--muted); font-weight: 600; }
.dc-prog { text-align: right; min-width: 96px; }
.dc-ring { width: 56px; height: 56px; margin: 0 0 0 auto; }
.dc-prog small { font-size: 11px; color: var(--faint); display: block; margin-top: 8px; }

/* ---- study path (home wayfinding) ---- */
.study-path { list-style: none; margin: 0 0 8px; padding: 0; }
.sp-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; position: relative; padding: 0 0 22px; }
.sp-step::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--accent-line); }
.sp-step:last-child { padding-bottom: 4px; }
.sp-step:last-child::before { display: none; }
.sp-n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line);
  font-family: var(--serif); font-weight: 600; font-size: 18px; position: relative; z-index: 1;
}
.sp-body { padding-top: 3px; }
.sp-body h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 4px 0 5px; letter-spacing: -.01em; }
.sp-body p { font-size: 13.5px; color: var(--muted); margin: 0 0 11px; line-height: 1.55; max-width: 62ch; }
.sp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-links a {
  display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line);
  border-radius: 99px; transition: background .12s, color .12s, border-color .12s;
}
.sp-links a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.home-footer {
  border-top: 1px solid var(--line); margin-top: 8px; padding: 26px 0 80px;
  font-size: 13px; line-height: 1.7; color: var(--faint);
}
.home-footer b { color: var(--muted); font-weight: 600; }
.home-footer a { color: var(--accent-deep); border-bottom: 1px solid var(--accent-line); }
.home-footer a:hover { color: var(--accent); }

/* About this guide */
.about-guide { padding: 30px 0 90px; }
.ag-rule { display: block; width: 64px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 26px; }
.ag-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.ag-title { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink); }
.ag-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.ag-tag { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 99px; padding: 5px 12px; }
.ag-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .ag-cols { grid-template-columns: 1fr; gap: 26px; } }
.ag-col { border-left: 2px solid var(--line); padding-left: 18px; }
.ag-col label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 11px; }
.ag-col b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.ag-col .ag-sub { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 7px; }
.ag-col a { display: inline-block; margin-top: 11px; color: var(--accent-deep); font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--accent-line); }
.ag-col a:hover { color: var(--accent); }
.ag-disclaimer { margin: 26px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 92ch; }
.ag-disclaimer strong { color: var(--ink); font-weight: 600; }

/* ============ HOMEPAGE EU AI ACT SPOTLIGHT CARD ============ */
.spotlight {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  padding: 28px 30px; margin: 38px 0 8px; border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--accent-deep), var(--accent));
  color: #fff; box-shadow: var(--shadow);
}
.spotlight .sp-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: 11px; }
.spotlight h3 { font-family: var(--serif); font-size: 27px; font-weight: 600; margin: 0 0 9px; letter-spacing: -.01em; }
.spotlight p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.88); max-width: 60ch; }
.spotlight .sp-go {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; white-space: nowrap;
  background: #fff; color: var(--accent-deep); border-radius: 99px; font-size: 14px; font-weight: 600;
}
.spotlight .sp-go svg { width: 16px; height: 16px; }
@media (max-width: 720px) { .spotlight { grid-template-columns: 1fr; } }

/* ============ EU AI ACT TOPIC PAGE ============ */
.topic { max-width: 860px; padding-bottom: 90px; }
.topic-hero { padding: 30px 0 26px; border-bottom: 1px solid var(--line); }
.topic-hero .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.topic-hero .eyebrow svg { width: 14px; height: 14px; flex: none; }
.spotlight .sp-eyebrow svg { width: 13px; height: 13px; vertical-align: -1px; margin-right: 5px; }
.topic-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.topic-hero p { font-size: 17px; color: var(--muted); line-height: 1.6; max-width: 64ch; margin: 0; }
.topic-hero .badges { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.topic-sec { padding-top: 38px; scroll-margin-top: 80px; }
.topic-sec > h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.topic-sec > .lead { font-size: 15px; color: var(--muted); margin: 0 0 18px; line-height: 1.6; max-width: 66ch; }

/* risk pyramid */
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 6px 0 8px; }
.ptier {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 24px; border-radius: 10px; color: #fff;
}
.ptier .pt-name { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.ptier .pt-desc { font-size: 12.5px; opacity: .92; text-align: right; }
.ptier.t1 { width: 46%; background: var(--warn); }
.ptier.t2 { width: 64%; background: var(--accent-deep); }
.ptier.t3 { width: 82%; background: var(--accent); }
.ptier.t4 { width: 100%; background: oklch(0.6 0.01 260); }
@media (max-width: 640px) { .ptier { width: 100% !important; flex-direction: column; align-items: flex-start; gap: 4px; } .ptier .pt-desc { text-align: left; } }

/* fact list (key numbers / definitions reuse .defs) */
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin: 4px 0; }
.fact { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.fact b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--accent-deep); line-height: 1; }
.fact span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* bulleted points */
ul.topic-ul { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 9px; }
ul.topic-ul li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.55; color: var(--read); }
ul.topic-ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
ul.topic-ul.warn li::before { background: var(--warn); }

/* role table */
.roletable { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.roletable th, .roletable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.roletable thead th { background: var(--sidebar-bg); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.roletable tbody tr:last-child td { border-bottom: 0; }
.roletable td:first-child { font-family: var(--serif); font-weight: 600; color: var(--ink); white-space: nowrap; }
.l-table-wrap { overflow-x: auto; margin-top: 2px; }

/* timeline */
.timeline { display: grid; gap: 0; margin: 4px 0; }
.tl-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.tl-row:last-child { border-bottom: 0; }
.tl-row .tl-date { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--accent-deep); }
.tl-row .tl-what { font-size: 14px; color: var(--read); line-height: 1.5; }
.tl-row .tl-what b { color: var(--ink); font-weight: 600; }

/* secondary (lite) spotlight banner */
.spotlight.lite {
  background: var(--accent-tint); color: var(--ink); border: 1px solid var(--accent-line);
  box-shadow: none; padding: 20px 24px;
}
.spotlight.lite .sp-eyebrow { color: var(--accent-deep); opacity: 1; }
.spotlight.lite h3 { font-size: 21px; }
.spotlight.lite p { color: var(--muted); }
.spotlight.lite .sp-go { background: var(--accent); color: #fff; padding: 10px 18px; font-size: 13px; }

/* NIST RMF — four functions diagram */
.rmf-govern {
  border: 2px solid var(--accent); border-radius: var(--radius-lg); padding: 16px 20px;
  background: var(--accent-tint); margin-bottom: 12px;
}
.rmf-govern .rg-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.rmf-govern b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); display: block; margin: 4px 0 5px; }
.rmf-govern span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rmf-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .rmf-flow { grid-template-columns: 1fr; } }
.rmf-node { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); position: relative; }
.rmf-node .rn-step { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
.rmf-node b { font-family: var(--serif); font-size: 18px; font-weight: 600; display: block; margin: 4px 0 6px; color: var(--ink); }
.rmf-node span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* trustworthiness characteristics */
.charlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.charitem { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13.5px; line-height: 1.4; color: var(--read); }
.charitem .ci-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }
.charitem b { color: var(--ink); font-weight: 600; }

/* AI lifecycle map */
.lifephase { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 24px 0 14px; display: flex; align-items: center; gap: 10px; }
.lifephase::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lifephase.first { margin-top: 4px; }
.lifesteps { display: grid; gap: 0; }
.lifestep { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding-bottom: 18px; position: relative; }
.lifestep::before { content: ''; position: absolute; left: 16px; top: 30px; bottom: -4px; width: 2px; background: var(--line); }
.lifestep:last-child::before { display: none; }
.lifestep .ls-num {
  width: 34px; height: 34px; border-radius: 50%; flex: none; z-index: 1;
  background: var(--accent-soft); color: var(--accent-deep); border: 1.5px solid var(--accent-line);
  display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 13px;
}
.lifestep .ls-body { padding-top: 5px; }
.lifestep .ls-body b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); display: block; letter-spacing: -.01em; }
.lifestep .ls-body p { margin: 4px 0 9px; font-size: 13.8px; color: var(--muted); line-height: 1.55; max-width: 62ch; }
.life-note {
  display: flex; gap: 13px; align-items: flex-start; padding: 16px 20px; margin: 6px 0 8px;
  background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
}
.life-note svg { width: 19px; height: 19px; color: var(--accent-deep); flex: none; margin-top: 1px; }
.life-note p { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--read); }
.life-note b { color: var(--ink); font-weight: 600; }

/* glossary */
.glossary { max-width: 1040px; }
.gloss-searchbar { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); flex: 0 1 280px; }
.gloss-searchbar svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.gloss-searchbar input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.gloss-bar { position: sticky; top: 62px; z-index: 20; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; padding: 12px 0; margin: 20px 0 8px; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.gloss-az { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; justify-content: flex-end; }
@media (max-width: 600px) { .gloss-bar { flex-wrap: wrap; } .gloss-az { justify-content: flex-start; } }
.gloss-az a, .gloss-az span { width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; border-radius: 6px; }
.gloss-az a { color: var(--accent-deep); }
.gloss-az a:hover { background: var(--accent-soft); }
.gloss-az span.off { color: var(--line); }
.gloss-letter { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--accent-deep); margin: 28px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-line); scroll-margin-top: 120px; }
.gloss-section { scroll-margin-top: 120px; }
.gloss-term { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.gloss-term dt { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.gloss-term dd { margin: 0 0 9px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.gl-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-src { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 5px; padding: 2px 7px; }
.gl-src:hover { background: var(--accent-soft); }
.gloss-empty { padding: 40px 0; text-align: center; color: var(--faint); font-size: 15px; }

/* exam mode */
.exam { max-width: 760px; }
.exam-setup { padding: 8px 0; }
.es-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; display: block; margin-bottom: 12px; }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
@media (max-width: 560px) { .mode-row { grid-template-columns: 1fr; } }
.mode-btn { text-align: left; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.mode-btn b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.mode-btn span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.mode-btn:hover { border-color: var(--accent-line); }
.mode-btn.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
.mode-btn.on b { color: var(--accent-deep); }
.exam-start[disabled] { opacity: .45; pointer-events: none; }
.exam-reveal[disabled] { opacity: .5; pointer-events: none; }
.scope-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.scope-btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--muted); }
.scope-btn span { font-family: var(--mono); font-size: 11px; color: var(--faint); background: var(--bg); border-radius: 99px; padding: 1px 7px; }
.scope-btn:hover { border-color: var(--accent-line); }
.scope-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.scope-btn.on span { color: var(--accent-deep); background: var(--surface); }
.es-note { font-size: 13px; color: var(--faint); margin: 0 0 20px; }
.exam-start { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: var(--accent); color: #fff; border: 0; border-radius: 99px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow); }
.exam-start:hover { background: var(--accent-deep); }
.exam-top { display: flex; align-items: center; gap: 16px; margin: 8px 0 22px; }
.exam-bar { flex: 1; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.exam-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.exam-count { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.exam-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm); }
.exam-pi { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--accent-deep); font-weight: 600; display: inline-block; margin-bottom: 16px; border-bottom: 1px solid var(--accent-line); }
.exam-q { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.exam-reveal { margin-top: 24px; width: 100%; padding: 14px; border: 1px dashed var(--accent-line); border-radius: var(--radius-lg); background: var(--accent-tint); color: var(--accent-deep); font-size: 14.5px; font-weight: 600; }
.exam-reveal:hover { background: var(--accent-soft); }
.exam-a { margin-top: 22px; padding: 18px 20px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); font-size: 15px; line-height: 1.62; color: var(--read); }
.exam-a label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; display: block; margin-bottom: 7px; }
.exam-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.eg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: var(--radius-lg); font-size: 14.5px; font-weight: 600; border: 1px solid; }
.eg-btn svg { width: 16px; height: 16px; }
.eg-btn.ok { background: var(--accent); color: #fff; border-color: var(--accent); }
.eg-btn.ok:hover { background: var(--accent-deep); }
.eg-btn.miss { background: var(--surface); color: var(--warn); border-color: var(--warn-line); }
.eg-btn.miss:hover { background: var(--warn-soft); }
.exam-foot { margin-top: 18px; }
.mcq-head { display: flex; gap: 8px; margin-bottom: 14px; }
.mcq-tag { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.mcq-scn { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 99px; padding: 2px 10px; }
.mcq-scenario { font-size: 14.5px; line-height: 1.6; color: var(--read); background: var(--bg); border-left: 3px solid var(--accent-line); border-radius: 0 8px 8px 0; padding: 13px 16px; margin-bottom: 18px; }
.exam-card.mcq .exam-q { font-size: 21px; }
.mcq-opts { display: grid; gap: 10px; margin-top: 20px; }
.mcq-opt { display: flex; align-items: flex-start; gap: 13px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-size: 14.5px; line-height: 1.5; color: var(--read); }
.mcq-opt:hover { border-color: var(--accent-line); }
.mcq-opt .mo-letter { width: 24px; height: 24px; border-radius: 6px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.mcq-opt .mo-text { flex: 1; padding-top: 2px; }
.mcq-opt .mo-mark { flex: none; width: 20px; height: 20px; }
.mcq-opt .mo-mark svg { width: 18px; height: 18px; }
.mcq-opt.sel { border-color: var(--accent); background: var(--accent-tint); }
.mcq-opt.sel .mo-letter { background: var(--accent); color: #fff; border-color: var(--accent); }
.mcq-opt.correct { border-color: var(--accent); background: var(--accent-soft); }
.mcq-opt.correct .mo-letter { background: var(--accent); color: #fff; border-color: var(--accent); }
.mcq-opt.correct .mo-mark.ok { color: var(--accent-deep); }
.mcq-opt.wrong { border-color: var(--warn-line); background: var(--warn-soft); }
.mcq-opt.wrong .mo-letter { background: var(--warn); color: #fff; border-color: var(--warn); }
.mcq-opt.wrong .mo-mark.no { color: var(--warn); }
.mcq-opt.dim { opacity: .6; }
.mcq-explain { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid; }
.mcq-explain.right { background: var(--accent-tint); border-color: var(--accent-line); }
.mcq-explain.wrong { background: var(--warn-soft); border-color: var(--warn-line); }
.mcq-explain label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 6px; }
.mcq-explain.right label { color: var(--accent-deep); }
.mcq-explain.wrong label { color: var(--warn); }
.mcq-explain p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--read); }
.exam-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--faint); font-size: 13px; font-weight: 500; padding: 4px; }
.exam-link svg { width: 14px; height: 14px; }
.exam-link:hover { color: var(--accent-deep); }
.exam-link.big { font-size: 14px; padding: 10px 4px; }
.exam-summary { text-align: center; padding: 30px 0; }
.es-ring { width: 110px; height: 110px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 3px solid var(--accent); }
.exam-summary h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.exam-summary > p { font-size: 15px; color: var(--muted); margin: 0 0 24px; }
.es-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.es-missed { margin-top: 34px; text-align: left; }
.es-missed label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; display: block; margin-bottom: 12px; }

/* frameworks crosswalk table */
.xtable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cross-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.cross-table th, .cross-table td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); vertical-align: top; line-height: 1.45; }
.cross-table th:last-child, .cross-table td:last-child { border-right: 0; }
.cross-table tbody tr:last-child td { border-bottom: 0; }
.cross-table thead th { background: var(--accent-tint); font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--accent-deep); position: sticky; top: 0; }
.cross-table thead th:first-child { background: var(--sidebar-bg); }
.cross-table td.rowlabel { font-weight: 600; color: var(--ink); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; background: var(--sidebar-bg); }

/* ISO standards spotlight */
.iso-glance td.rowlabel { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--accent-deep); }
.iso-grid { display: grid; gap: 12px; }
.iso-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px; }
.iso-card .iso-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.iso-code { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; padding: 3px 9px; }
.iso-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.iso-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 9px; letter-spacing: -.01em; }
.iso-short { display: flex; gap: 10px; align-items: baseline; margin: 0 0 12px; padding: 10px 14px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius); }
.iso-short b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; flex: none; }
.iso-short span { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--accent-deep); }
.iso-concept { font-size: 14px; color: var(--read); line-height: 1.5; margin: 0 0 13px; max-width: 70ch; }
.iso-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.iso-kw .kw { font-size: 11.5px; color: var(--muted); background: var(--sidebar-bg); border: 1px solid var(--line-soft); border-radius: 5px; padding: 3px 8px; line-height: 1.3; }
.iso-app { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.iso-app b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; flex: none; margin-top: 2px; padding: 3px 7px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 4px; }
@media (max-width: 600px) { .iso-app { flex-direction: column; gap: 7px; } .iso-app b { align-self: flex-start; } }

/* AI foundations — nesting diagram */
.nest-l { display: block; border: 1px solid var(--accent-line); border-radius: var(--radius-lg); padding: 15px 17px; }
.nest-l > .nest-l { margin-top: 13px; }
.nest-l.l1 { background: var(--accent-tint); }
.nest-l.l2 { background: var(--accent-soft); }
.nest-l.l3 { background: var(--surface); }
.nest-l.l4 { background: var(--accent-deep); border-color: var(--accent-deep); }
.nest-tag { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); }
.nest-d { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.nest-l.l4 .nest-tag { color: #fff; }
.nest-l.l4 .nest-d { color: rgba(255,255,255,.85); }

/* Cheat sheet */
.cheat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 760px) { .cheat-grid { grid-template-columns: 1fr; } }
.cheat-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; break-inside: avoid; }
.cheat-card h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0 0 10px; color: var(--ink); letter-spacing: -.01em; }
.cheat-row { display: grid; grid-template-columns: 122px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.45; }
.cheat-row:first-of-type { border-top: 0; }
.cheat-row .ck { font-weight: 600; color: var(--accent-deep); }
.cheat-row .cv { color: var(--read); }
@media (max-width: 440px) { .cheat-row { grid-template-columns: 1fr; gap: 2px; } }
.cheat-print { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 7px 14px; border: 1px solid var(--accent-line); border-radius: 99px; background: var(--accent-tint); color: var(--accent-deep); font-size: 12.5px; font-weight: 600; font-family: var(--sans); vertical-align: middle; }
.cheat-print svg { width: 14px; height: 14px; }

/* Flashcards — spaced repetition */
.srs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .srs-stats { grid-template-columns: repeat(2, 1fr); } }
.srs-stat { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 16px; text-align: center; }
.srs-stat b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--accent-deep); line-height: 1; }
.srs-stat span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.srs-boxes-wrap { margin-top: 24px; }
.srs-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; margin-top: 12px; padding: 18px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sidebar-bg); min-height: 110px; }
.srs-box { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.sb-bar { width: 56%; min-height: 8px; background: var(--accent); border-radius: 5px 5px 0 0; }
.sb-n { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink); }
.sb-l { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.srs-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 6px; }
.srs-cats { margin-top: 20px; }
.flash-q { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.35; color: var(--ink); margin: 8px 0 4px; letter-spacing: -.01em; }
.flash-a { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--read); }
.flash-a label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
@media (max-width: 600px) { .flash-q { font-size: 21px; } }

/* print — cheat sheet only */
@media print {
  .topbar, .sidebar, .nav-backdrop, .no-print { display: none !important; }
  .app { display: block; }
  .main { display: block; padding: 0; }
  .view { padding: 0 !important; }
  .topic { max-width: none !important; padding: 0 !important; }
  .cheat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .cheat-card { box-shadow: none; }
  .topic-hero { border: 0 !important; padding: 0 0 10px !important; }
  body { background: #fff; }
}

/* ============ DOMAIN PAGE ============ */
.dom-hero { padding: 34px 0 28px; border-bottom: 1px solid var(--line); }
.dom-hero .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 14px; }
.dom-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 16px; max-width: 22ch; }
.dom-hero p { font-size: 16.5px; color: var(--muted); line-height: 1.6; max-width: 64ch; margin: 0; }
.dom-hero p.dom-intro { font-size: 15px; color: var(--read); margin-top: 14px; }
.exam-focus { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; margin: 22px 0 4px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); }
.exam-focus svg { width: 18px; height: 18px; color: var(--accent-deep); flex: none; margin-top: 1px; }
.exam-focus .ef-body label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; display: block; margin-bottom: 4px; }
.exam-focus .ef-body p { margin: 0; font-size: 13.8px; line-height: 1.55; color: var(--read); max-width: 80ch; }
.comp-intro { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; max-width: 66ch; }
.dom-hero .badges { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.dbadge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; color: var(--muted); background: var(--surface); }
.dbadge b { color: var(--ink); font-weight: 600; }

.comp-block { padding: 30px 0; border-bottom: 1px solid var(--line-soft); }
.comp-block:last-child { border-bottom: 0; }
.comp-block-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.comp-block-h .code { font-family: var(--mono); font-size: 14px; color: var(--accent); font-weight: 600; }
.comp-block-h h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.comp-block-meta { font-size: 12.5px; color: var(--faint); margin: 0 0 18px; }
.pi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pi-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s, transform .15s;
}
.pi-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.pi-card .num { font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 600; flex: none; padding-top: 1px; }
.pi-card .pc-body b { font-weight: 600; font-size: 14px; color: var(--ink); display: block; line-height: 1.35; }
.pi-card .pc-body span { font-size: 12px; color: var(--faint); display: block; margin-top: 4px; }
.pi-card .state { margin-left: auto; flex: none; }
.pi-card .state .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.pi-card.done .state .dot { background: var(--accent); border-color: var(--accent); }
.pi-card.done .state .dot svg { width: 9px; height: 9px; color: #fff; }

/* ============ LESSON PAGE ============ */
.lesson-wrap { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 44px; padding-bottom: 90px; }
.lesson { min-width: 0; padding-top: 8px; }
.l-pi-badge { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 18px 0 12px; }
.l-title { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.16; letter-spacing: -.018em; margin: 0 0 18px; max-width: 24ch; }
.l-sub { font-size: 17px; color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 62ch; }
.l-metabar {
  display: flex; align-items: center; gap: 18px; padding: 14px 0; margin-bottom: 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--faint);
}
.l-metabar .mi { display: inline-flex; align-items: center; gap: 7px; }
.l-metabar .mi svg { width: 14px; height: 14px; }
.l-complete {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px;
  border: 1px solid var(--accent); border-radius: 99px; color: var(--accent-deep);
  font-weight: 600; font-size: 12.5px; background: var(--surface);
}
.l-complete:hover { background: var(--accent-tint); }
.l-complete .box { width: 15px; height: 15px; border-radius: 4px; border: 1.6px solid var(--accent); display: grid; place-items: center; }
.l-complete .box svg { width: 10px; height: 10px; color: #fff; opacity: 0; }
.l-complete.is-done { background: var(--accent); color: #fff; border-color: var(--accent); }
.l-complete.is-done .box { background: #fff; }
.l-complete.is-done .box svg { color: var(--accent); opacity: 1; }

/* section scaffold */
.l-section { padding-top: 34px; scroll-margin-top: 78px; }
.l-sec-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.l-sec-num {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent);
  width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft);
  display: grid; place-items: center; flex: none;
}
.l-sec-head h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.l-p { font-size: 15.5px; line-height: 1.72; color: var(--read); margin: 0 0 15px; max-width: 70ch; }
.l-p strong { color: var(--ink); font-weight: 600; }
.l-p a, .l-inline-link { color: var(--accent-deep); border-bottom: 1px solid var(--accent-line); }
.l-h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
ul.l-ul { margin: 0 0 15px; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 70ch; }
ul.l-ul li { display: flex; gap: 11px; font-size: 15px; line-height: 1.6; color: var(--read); }
ul.l-ul li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 9px; }

/* 1 · Source PI block */
.pi-source {
  border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  background: var(--accent-tint); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 18px 22px; margin: 0 0 4px;
}
.pi-source .ps-tag { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pi-source .ps-code { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 5px; }
.pi-source .ps-src { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.pi-source p { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--accent-deep); margin: 0; }

/* 6 · Learning objective */
.objective {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 4px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.objective .obj-ic { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 1px; }
.objective .obj-body label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 600; display: block; margin-bottom: 5px; }
.objective .obj-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--read); }
.bloom-chip { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 1px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* 3 · Definitions */
.defs { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.def-row { padding: 15px 20px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
.def-row:last-child { border-bottom: 0; }
.def-row dt { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
.def-row dd { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--muted); }

/* 4/5 · Use case cards */
.usecase { padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.usecase.generic { border-left: 4px solid var(--slate); background: var(--slate-soft); }
.usecase.highered { border-left: 4px solid var(--accent); background: var(--accent-tint); }
.uc-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.usecase.generic .uc-tag { color: var(--slate); }
.usecase.highered .uc-tag { color: var(--accent-deep); }
.uc-tag svg { width: 14px; height: 14px; }
.usecase p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--read); }
.usecase p + p { margin-top: 10px; }

/* 5 · Higher-education additional layer */
.hed-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 99px; padding: 3px 10px; align-self: center;
}

/* opt-in stub (shown when the Higher-ed lens is off) */
.hed-stub {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  border: 1px dashed var(--accent-line); border-radius: var(--radius-lg); background: var(--accent-tint);
}
.hed-stub-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.hed-stub-ic svg { width: 20px; height: 20px; }
.hed-stub-body b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); display: block; letter-spacing: -.01em; }
.hed-stub-body p { margin: 6px 0 14px; font-size: 13.8px; line-height: 1.6; color: var(--read); max-width: 70ch; }
.hed-stub-body p strong { color: var(--ink); font-weight: 600; }
.hed-stub-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px;
  background: var(--accent); color: #fff; border: 0; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hed-stub-btn:hover { background: var(--accent-deep); }
.hed-stub-btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .hed-stub { flex-direction: column; gap: 12px; } }
.hed-intro { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
.hed-intro strong { color: var(--ink); font-weight: 600; }
.hed-lens {
  padding: 18px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); background: var(--accent-tint);
}
.hed-lens .hed-uc { color: var(--accent-deep); margin-bottom: 9px; }
.hed-lens p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--read); max-width: 72ch; }
.hed-lens p strong { color: var(--ink); font-weight: 600; }

.hed-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 12px; }
.hed-bar-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.hed-showall {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px;
  border: 1px solid var(--accent-line); border-radius: 99px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
}
.hed-showall:hover { background: var(--accent-tint); }

.hed-accordions { display: grid; gap: 10px; }
.hed-acc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.hed-acc.is-open { border-color: var(--accent-line); }
.hed-acc-h { margin: 0; font: inherit; font-weight: inherit; }
.hed-acc-btn {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 18px; border: 0; background: transparent; color: var(--ink);
}
.hed-acc-btn:hover { background: var(--line-soft); }
.hed-acc.is-open .hed-acc-btn { background: var(--accent-tint); }
.hed-acc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hed-acc-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.hed-acc-ic svg { width: 17px; height: 17px; }
.hed-acc-title { flex: 1; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hed-acc-count { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--faint); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; flex: none; }
.hed-acc.is-open .hed-acc-count { color: var(--accent-deep); border-color: var(--accent-line); background: var(--surface); }
.hed-acc-chev { width: 17px; height: 17px; color: var(--faint); flex: none; transition: transform .22s ease; }
.hed-acc.is-open .hed-acc-chev { transform: rotate(180deg); color: var(--accent-deep); }
.hed-acc-panel { display: none; border-top: 1px solid var(--line-soft); }
.hed-acc.is-open .hed-acc-panel { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hed-acc.is-open .hed-acc-panel { animation: hedReveal .24s ease both; }
}
@keyframes hedReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hed-acc-inner { padding: 16px 18px 18px; }

.hed-list { display: grid; gap: 12px; }
.hed-item { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--accent-line); }
.hed-item b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hed-item span { font-size: 13.8px; line-height: 1.58; color: var(--read); }
.hed-item span strong { color: var(--ink); font-weight: 600; }
ul.hed-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
ul.hed-ul li { display: flex; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--read); }
ul.hed-ul li::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); flex: none; margin-top: 8px; transform: rotate(45deg); }
.hed-scn { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--read); }
.hed-scn strong { color: var(--ink); font-weight: 600; }

/* higher-ed sidebar group + law/controls matrix page */
.hed-group { border-color: var(--accent-line); }
.hed-group .spot-head { color: var(--accent-deep); }
.side-home.hed-spot svg { color: var(--accent); }
.hedm-theme h3 { margin-bottom: 11px; }
.hedm-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 9px;
}
.hedm-theme .iso-kw { margin-bottom: 4px; }
.hedm-theme ul.topic-ul li { font-size: 13.8px; }
.hedm-maprow { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hedm-mr { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.hedm-mr b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; }
.hedm-cref {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-deep);
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; margin: 1px 2px 1px 0;
}
.hedm-cref:hover { background: var(--accent-soft); }
.hedm-na { color: var(--faint); font-family: var(--mono); }
.hedm-matrix td .hedm-cref { font-size: 10.5px; }
.hedm-matrix td { white-space: normal; }
.hedm-foot { font-size: 12.5px; line-height: 1.6; color: var(--faint); margin: 24px 0 0; max-width: 80ch; }
.hedm-foot strong { color: var(--muted); font-weight: 600; }

/* ============ NINE GOVERNANCE DOMAINS PAGE ============ */
.nd-topic { max-width: 1060px; }
.nd-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.nd-by { font-size: 13.5px; color: var(--muted); }
.nd-by b { color: var(--ink); font-weight: 600; }
.nd-ver { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 99px; padding: 3px 11px; }
.nd-distinct { display: flex; gap: 13px; align-items: flex-start; margin-top: 20px; padding: 15px 18px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); }
.nd-distinct svg { width: 18px; height: 18px; color: var(--accent-deep); flex: none; margin-top: 1px; }
.nd-distinct p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--read); }
.nd-distinct b { color: var(--ink); font-weight: 600; }

/* sticky in-page nav */
.nd-nav {
  position: sticky; top: 62px; z-index: 20; display: flex; gap: 7px; flex-wrap: wrap;
  padding: 12px 0; margin: 22px 0 4px;
  background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nd-nav-chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px;
}
.nd-nav-chip:hover { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-tint); }
@media (max-width: 700px) { .nd-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .nd-nav-chip { flex: none; } }

/* architecture */
.nd-supers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 8px; }
@media (max-width: 760px) { .nd-supers { grid-template-columns: 1fr; } }
.nd-supercard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.nd-supercard-h { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--accent-deep); margin-bottom: 11px; letter-spacing: -.01em; }
.nd-superdoms { display: grid; gap: 7px; }
.nd-dpill { font-size: 12.5px; color: var(--read); line-height: 1.4; }
.nd-dpill b { font-family: var(--mono); font-size: 11px; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.nd-subh { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 26px 0 12px; letter-spacing: -.01em; }
.nd-defs .def-row { grid-template-columns: 180px 1fr; }
@media (max-width: 600px) { .nd-defs .def-row { grid-template-columns: 1fr; } }

/* risk tiers (overview) */
.nd-tiers { display: grid; gap: 10px; }
.nd-tier { display: flex; gap: 14px; align-items: baseline; padding: 13px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); }
.nd-tier.t-low { border-left-color: oklch(0.6 0.01 260); }
.nd-tier.t-mod { border-left-color: var(--accent); }
.nd-tier.t-high { border-left-color: var(--warn); }
.nd-tier-k { font-family: var(--serif); font-weight: 600; font-size: 15.5px; color: var(--ink); flex: none; width: 130px; }
.nd-tier-d { font-size: 13.5px; color: var(--read); line-height: 1.5; }
@media (max-width: 560px) { .nd-tier { flex-direction: column; gap: 4px; } .nd-tier-k { width: auto; } }

/* domain blocks */
.nd-super-head {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 30px 0 14px; display: flex; align-items: center; gap: 12px;
}
.nd-super-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.nd-domain { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: 22px 24px; margin-bottom: 16px; scroll-margin-top: 120px; box-shadow: var(--shadow-sm); }
.nd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.nd-num { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); font-family: var(--serif); font-weight: 600; font-size: 20px; }
.nd-titles { flex: 1; min-width: 0; }
.nd-super { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nd-titles h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 2px 0 0; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.nd-tier-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 99px; padding: 4px 11px; flex: none; align-self: flex-start; }
.nd-scope { font-size: 14px; line-height: 1.6; color: var(--read); margin: 0 0 16px; max-width: 92ch; }
.nd-instr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
@media (max-width: 720px) { .nd-instr { grid-template-columns: 1fr; } }
.nd-col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
ul.nd-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
ul.nd-ul li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.5; color: var(--read); }
ul.nd-ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 1px; background: var(--accent); transform: rotate(45deg); }
.nd-cross { margin: 16px 0 0; padding: 11px 14px; font-size: 12.8px; line-height: 1.55; color: var(--muted); background: var(--bg); border-radius: var(--radius); border: 1px solid var(--line-soft); }
.nd-cross b { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); margin-right: 8px; }

/* crosswalk D-chips */
.nd-chip { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 6px; padding: 2px 8px; margin: 1px 2px 1px 0; }
.nd-chip:hover { background: var(--accent-soft); }
.nd-chipcell { white-space: nowrap; }
.nd-cross-table td:nth-child(2) { color: var(--read); }

/* risk-tiering examples */
.nd-tierex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .nd-tierex { grid-template-columns: 1fr; } }
.nd-tx { border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.nd-tx.t-low { border-top-color: oklch(0.6 0.01 260); }
.nd-tx.t-mod { border-top-color: var(--accent); }
.nd-tx.t-high { border-top-color: var(--warn); }
.nd-tx-h { margin-bottom: 10px; }
.nd-tx-k { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.nd-tx ul.nd-ul li { font-size: 12.5px; }

/* implementation phases */
.nd-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .nd-phases { grid-template-columns: 1fr; } }
.nd-phase { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.nd-phase-h { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--accent-deep); margin-bottom: 12px; letter-spacing: -.01em; }
.nd-phase-steps { display: grid; gap: 9px; }
.nd-step { display: flex; gap: 11px; align-items: baseline; font-size: 13px; color: var(--read); line-height: 1.45; }
.nd-step-d { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 7px; flex: none; }
@media (max-width: 600px) {
  .hed-acc-title { font-size: 15.5px; }
  .hed-acc-btn { gap: 11px; padding: 13px 14px; }
  .hed-acc-ic { width: 30px; height: 30px; }
}

/* 7 · Red flags */
.redflags { padding: 4px 0; }
.redflag {
  display: flex; gap: 13px; padding: 14px 18px; margin-bottom: 10px;
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius-lg);
}
.redflag:last-child { margin-bottom: 0; }
.redflag .rf-ic { width: 19px; height: 19px; color: var(--warn); flex: none; margin-top: 1px; }
.redflag .rf-body b { font-weight: 600; font-size: 14px; color: var(--ink); display: block; margin-bottom: 3px; }
.redflag .rf-body span { font-size: 13.5px; line-height: 1.55; color: var(--read); }

/* 8 · Governance controls */
.controls { display: grid; gap: 10px; }
.control {
  display: flex; gap: 13px; padding: 15px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.control .ctrl-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex: none; }
.control .ctrl-ic svg { width: 16px; height: 16px; }
.control .ctrl-body b { font-weight: 600; font-size: 14px; color: var(--ink); display: block; margin-bottom: 3px; }
.control .ctrl-body span { font-size: 13.5px; line-height: 1.55; color: var(--read); }

/* 9 · Question patterns (self-test) */
.qpat { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.qrow { border-bottom: 1px solid var(--line-soft); }
.qrow:last-child { border-bottom: 0; }
.qrow button {
  width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 18px; border: 0; background: transparent; font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.5;
}
.qrow button:hover { background: var(--line-soft); }
.qrow .qmark { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); flex: none; padding-top: 1px; }
.qrow .qchev { margin-left: auto; width: 16px; height: 16px; color: var(--faint); flex: none; transition: transform .2s; margin-top: 2px; }
.qrow.open .qchev { transform: rotate(180deg); }
.qans { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.qrow.open .qans { max-height: 360px; }
.qans-inner { padding: 0 18px 16px 42px; font-size: 13.8px; line-height: 1.65; color: var(--muted); }
.qans-inner .lbl { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: block; margin-bottom: 5px; }

/* 10 · Cross-refs + checklist */
.xref-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 920px) { .xref-wrap { grid-template-columns: 1fr; } }
.xref-col h4, .check-col h4 { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 0 0 12px; }
.xchips { display: flex; flex-wrap: wrap; gap: 8px; }
.xchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; color: var(--muted); background: var(--surface); }
.xchip:hover { border-color: var(--accent-line); color: var(--accent-deep); }
.xchip .xc { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
.checklist { display: grid; gap: 8px; }
.chk { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13.5px; line-height: 1.5; color: var(--read); cursor: pointer; }
.chk .cbox { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--line); flex: none; margin-top: 1px; display: grid; place-items: center; }
.chk .cbox svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.chk.checked .cbox { background: var(--accent); border-color: var(--accent); }
.chk.checked .cbox svg { opacity: 1; }
.chk.checked { color: var(--faint); }
.chk.checked .chk-txt { text-decoration: line-through; }

/* downloads */
.dls { display: grid; gap: 10px; }
.dl {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.dl:hover { border-color: var(--accent-line); }
.dl .ficon { width: 38px; height: 38px; border-radius: 8px; flex: none; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.dl .ficon svg { width: 18px; height: 18px; }
.dl .dlname { font-size: 13.8px; font-weight: 600; color: var(--ink); }
.dl .dlmeta { font-size: 11.5px; color: var(--faint); margin-top: 2px; font-family: var(--mono); }
.dl .dlget { margin-left: auto; color: var(--faint); }
.dl .dlget svg { width: 17px; height: 17px; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.pg { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 18px; background: var(--surface); }
.pg:hover { border-color: var(--accent-line); }
.pg span { font-size: 11px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.pg b { display: block; margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.pg.next { text-align: right; }
.pg.disabled { opacity: .4; pointer-events: none; }

/* scaffold notice */
.scaffold-note {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 8px 0 0;
  background: var(--slate-soft); border: 1px dashed var(--slate-line); border-radius: var(--radius-lg);
}
.scaffold-note svg { width: 20px; height: 20px; color: var(--slate); flex: none; margin-top: 1px; }
.scaffold-note b { font-weight: 600; color: var(--ink); }
.scaffold-note p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.l-section.placeholder { opacity: .55; }
.l-section.placeholder .ph-bar { height: 11px; border-radius: 99px; background: var(--line); margin-bottom: 10px; }

/* right rail TOC */
.toc-rail { position: sticky; top: 84px; align-self: start; padding-top: 92px; }
.toc-rail h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 0 0 13px; }
.toc { display: grid; gap: 10px; border-left: 1px solid var(--line); }
.toc a { font-size: 12.3px; color: var(--muted); padding-left: 14px; line-height: 1.4; border-left: 2px solid transparent; margin-left: -1px; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; }

/* ============ RESPONSIVE ============ */
/* hamburger + backdrop are desktop-hidden by default */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 1080px) {
  .toc-rail { display: none; }
  .lesson-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* single-column shell; sidebar becomes an off-canvas drawer */
  .app { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; gap: 10px; }

  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted);
    -webkit-tap-highlight-color: transparent; -webkit-appearance: none;
  }
  .nav-toggle:hover { border-color: var(--accent-line); color: var(--accent); }
  .nav-toggle svg { width: 20px; height: 20px; }

  .sidebar {
    position: fixed; top: 62px; left: 0; z-index: 60;
    height: calc(100vh - 62px); height: calc(100dvh - 62px);
    width: min(86vw, 320px); display: block;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: 8px 0 28px -10px rgba(20,30,45,.28);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-backdrop {
    display: block; position: fixed; inset: 62px 0 0 0; z-index: 50;
    background: rgba(20,30,45,.34); opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .view { padding: 0 22px; }
  .hero h1 { font-size: 38px; }
}

@media (max-width: 760px) {
  /* progress widget doesn't fit alongside brand + actions */
  .top-progress { display: none; }
}

@media (max-width: 600px) {
  .view { padding: 0 16px; }
  .hero { padding: 32px 0 24px; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 16px; }
  .hero-stats { gap: 20px 30px; }
  .hstat b { font-size: 26px; }
  .home-sec-h, .ag-title { font-size: 22px; }
  .topic-hero h1 { font-size: 30px; }
  .topic-hero p { font-size: 15.5px; }
  .dom-hero h1 { font-size: 28px; }
  .l-title { font-size: 28px; }
  .l-sub { font-size: 15.5px; }
  .l-sec-head h2, .topic-sec > h2, .comp-block-h h2 { font-size: 20px; }
  .exam-card { padding: 22px 18px; }
  .exam-q { font-size: 21px; }
  .exam-card.mcq .exam-q { font-size: 18.5px; }

  /* metabar: let the complete button drop to its own line */
  .l-metabar { flex-wrap: wrap; gap: 10px 16px; }
  .l-complete { margin-left: 0; }

  /* stacked definition + timeline rows */
  .def-row { grid-template-columns: 1fr; gap: 5px; }
  .tl-row { grid-template-columns: 1fr; gap: 4px; }
  .exam-grade { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* home domain cards: drop the progress ring under the body, smaller numeral */
  .dom-card { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .dom-card .dc-num { width: 44px; height: 44px; font-size: 20px; }
  .dc-prog { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
  .dc-ring { margin: 0; }
  .dc-prog small { margin-top: 0; }
}

@media (max-width: 440px) {
  /* tighten the topbar on the smallest phones */
  .brand-txt span { display: none; }
  .topbar-right { gap: 10px; }
}


/* ===================== exam-prep additions ===================== */
/* weak drill + multi-select */
.exam-start.weak { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); margin-top: 10px; }
.exam-start.weak:hover { background: var(--accent-tint); }
.mcq-scn.multi { background: #7c3aed14; color: #7c3aed; border-color: #7c3aed40; }

/* mock exam chrome */
.mock-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.mock-timer { font-family: var(--mono); font-size: 18px; font-weight: 700; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); }
.mock-timer.low { color: #b42318; border-color: #b4231860; animation: mockpulse 1s infinite alternate; }
@keyframes mockpulse { from { background: transparent; } to { background: #b4231814; } }
.mock-flag { border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
.mock-flag.on { color: #b54708; border-color: #b5470860; background: #b547080f; }
.mock-submit { margin-left: auto; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 13px; background: var(--accent); color: #fff; }
.mock-submit:hover { filter: brightness(1.08); }
.mock-pn { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.mock-pn .exam-link[disabled] { opacity: .35; pointer-events: none; }

/* navigator grid */
.mock-nav { margin-top: 18px; }
.mock-nav > label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.mn-cell { height: 34px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; font-size: 12px; font-family: var(--mono); color: var(--muted); position: relative; }
.mn-cell.done { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); font-weight: 700; }
.mn-cell.flag::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #b54708; }
.mn-cell.cur { outline: 2px solid var(--accent); outline-offset: 1px; }

/* mock history + report */
.mock-hist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mock-hist > label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.mh-chip { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.mh-chip.ok { color: #067647; border-color: #06764740; background: #06764710; }
.mh-chip.no { color: #b42318; border-color: #b4231840; background: #b4231810; }
.es-ring.low { border-color: #b42318; color: #b42318; }
.mr-item { text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 10px; }
.mr-q { font-size: 13.5px; margin-bottom: 8px; }
.mr-a { font-size: 12.5px; font-weight: 600; margin: 2px 0; }
.mr-a.no { color: #b42318; }
.mr-a.ok { color: #067647; }
.mr-why { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* readiness */
.rd-rows { display: flex; flex-direction: column; gap: 10px; }
.rd-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; }
.rd-dom { font-size: 13px; font-weight: 600; }
.rd-dom a { color: inherit; text-decoration: none; }
.rd-dom a:hover { color: var(--accent); }
.rd-bar { height: 10px; border-radius: 999px; background: var(--line-soft, #eee); overflow: hidden; }
.rd-fill { height: 100%; border-radius: 999px; background: var(--faint); transition: width .4s; }
.rd-fill.ok { background: #067647; }
.rd-fill.no { background: #b42318; }
.rd-pct { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.rd-note { font-size: 11.5px; font-weight: 500; color: var(--faint); margin-left: 8px; }
.rd-verdict { font-size: 15.5px; font-weight: 600; line-height: 1.55; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); }
.rd-verdict.ok { color: #067647; border-color: #06764740; background: #06764708; }
.rd-verdict.mid { color: #b54708; border-color: #b5470840; background: #b5470808; }
.rd-verdict.no { color: #b42318; border-color: #b4231840; background: #b4231808; }
.rd-checks { display: flex; flex-direction: column; gap: 8px; }
.rd-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.rd-check.ok { color: var(--ink, #222); }
.rc-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--faint); flex: none; }
.rd-check.ok .rc-dot { background: #067647; border-color: #067647; color: #fff; }

/* nested sub-groups inside Exam spotlights */
.spot-sub { margin: 0 0 2px; padding: 0; border: 0; }
.spot-sub button.spot-toggle { padding: 5px 6px 4px; }
.spot-group.collapsible.open .spot-sub:not(.open) > .spot-links { display: none; }
.spot-group.open .spot-sub:not(.open) .spot-toggle .spot-chev { transform: none; }
.spot-sub > .spot-links { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--line); }

/* Practice block */
.pb-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0 0 18px; }
.pb-how { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); font-size: 13px; }
.pb-how b { display: block; margin-bottom: 3px; }
.pb-how span { color: var(--muted); }
.pb-conf { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; flex-wrap: wrap; }
.pb-conf label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pb-cbtn { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pb-cbtn.on { background: #2e7d5b; color: #fff; border-color: #2e7d5b; }
.pb-cbtn.g.on { background: #b97f10; border-color: #b97f10; }
.pb-res { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.pb-res.miss { color: #b3433e; }
.pb-res.guess { color: #b97f10; }
.pb-res.okk { color: #2e7d5b; }
.pb-diag-wrap { text-align: left; margin: 18px 0; }
.pb-diag-wrap > label, .es-missed > label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 8px; }
.pb-diag { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 12px; }
.pb-diag th, .pb-diag td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pb-diag th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.pb-rules { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); font-size: 13px; }
.pb-rules ul { margin: 6px 0 0; padding-left: 18px; }
.pb-rules li { margin: 4px 0; color: var(--muted); }
.pb-rev { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 12px 0; background: var(--bg); text-align: left; }
.pb-rev-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pb-rev-h b { font-size: 13px; }
.pb-ropt { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.pb-ropt.ok { border-color: #2e7d5b; background: rgba(46, 125, 91, 0.06); }
.pb-ropt.no { border-color: #b3433e; background: rgba(179, 67, 62, 0.06); }
.pb-ropt b.lt { margin-right: 4px; }
.pb-ropt.ok b.lt { color: #2e7d5b; }
.pb-ropt.no b.lt { color: #b3433e; }
.pb-ropt .pb-why { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.pb-trap { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* ============================================================
   Anatomy of the Exam page
   ============================================================ */
.ana-doms { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.ana-dom-head { display: flex; align-items: baseline; gap: 10px; }
.ana-dom-id { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); flex: 0 0 auto; }
.ana-dom-head b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.ana-dom-pct { margin-left: auto; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--accent-deep); }
.ana-track { height: 12px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; margin: 8px 0 6px; }
.ana-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.ana-fill-I   { background: oklch(0.58 0.07 250); }
.ana-fill-II  { background: oklch(0.50 0.085 158); }
.ana-fill-III { background: oklch(0.55 0.09 200); }
.ana-fill-IV  { background: oklch(0.55 0.10 38); }
.ana-dom-sub { font-size: 13px; color: var(--muted); margin: 0; }
.ana-note { font-size: 13px; color: var(--muted); background: var(--accent-tint); border-left: 3px solid var(--accent-line); padding: 10px 14px; border-radius: 0 8px 8px 0; margin-top: 16px; }

.ana-heatgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.ana-heat { border-radius: 10px; padding: 12px 13px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ana-heat-top { display: flex; align-items: center; justify-content: space-between; }
.ana-heat-id { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.ana-heat-n { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1; }
.ana-heat-lbl { font-size: 12px; line-height: 1.4; color: var(--muted); }
.ana-heat-hot  { background: oklch(0.50 0.085 158); border-color: transparent; }
.ana-heat-hot .ana-heat-id, .ana-heat-hot .ana-heat-n { color: #fff; }
.ana-heat-hot .ana-heat-lbl { color: rgba(255,255,255,0.86); }
.ana-heat-warm { background: var(--accent-soft); border-color: var(--accent-line); }
.ana-heat-warm .ana-heat-id, .ana-heat-warm .ana-heat-n { color: var(--accent-deep); }
.ana-heat-mid  { background: var(--accent-tint); }
.ana-heat-mid .ana-heat-n { color: var(--accent-deep); }
.ana-heat-cool { background: var(--surface); }
.ana-heat-cool .ana-heat-n { color: var(--faint); }
.ana-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.ana-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ana-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ana-sw-hot { background: oklch(0.50 0.085 158); }
.ana-sw-warm { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.ana-sw-mid { background: var(--accent-tint); border: 1px solid var(--accent-line); }
.ana-sw-cool { background: var(--surface); border: 1px solid var(--line); }

.ana-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.ana-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); }
.ana-card-stat { display: inline-block; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--accent-deep); line-height: 1; }
.ana-card b { display: block; font-size: 14px; margin: 8px 0 6px; color: var(--ink); }
.ana-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

.ana-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ana-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; border: 1px solid var(--accent); }
.ana-cta svg { width: 15px; height: 15px; }
.ana-cta:hover { background: var(--accent-deep); }
.ana-source { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 26px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
@media (max-width: 640px) { .ana-dom-pct { font-size: 16px; } .ana-heatgrid { grid-template-columns: 1fr 1fr; } }