/* learn-ml-epistemology-with-phoebe - editorial bold design system
   Accent: umber #5B3A72 · Ink #38224A · Flagship: evidence cyan #8A6A1F
   (CSS var names still read --indigo/--amber; they hold umber and cyan values.)
   Every value recomputed for this palette and checked against WCAG AA. */

:root {
  --amber-ink-text: #876B15;
  --faint-text: #78608D;
  --indigo: #5B3A72;
  --indigo-deep: #38224A;
  --indigo-mid: #B9A0CB;
  --indigo-soft: #DCCFE7;
  --indigo-50: #F6F2FA;
  --ink: #1C1622;
  --muted: #655C70;
  --faint: #D8D0DF;
  --hairline: #E5DEEA;
  --amber: #8A6A1F;
  --amber-ink: #FCF8EC;
  --amber-50: #FCF8EC;
  --paper: #FCFBFD;
  --code-bg: #F6F2FA;
  --code-ink: #1C1622;
  --radius: 14px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }
html.zoom-125 { font-size: 20px; }
html.zoom-150 { font-size: 24px; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.85;
  font-feature-settings: "tnum";
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- header band ---------- */
.masthead {
  background: var(--indigo);
  color: #fff;
  padding: 2.5rem 0 2.25rem;
}
.masthead .eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 1;
  font-weight: 600;
}
.masthead h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 800;
  margin: .5rem 0 .75rem;
  letter-spacing: -.02em;
}
.masthead h1 .accent { color: inherit; }
.masthead .sub { font-size: 1.05rem; opacity: 1; max-width: 44rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip.level { background: #fff; color: var(--indigo); }
.chip.audience { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.chip.time { background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }


/* ---------- toolbar ---------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  padding: .55rem 0;
}
.toolbar .wrap { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.toolbar .crumb { font-size: .8rem; color: var(--muted); font-weight: 600; margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar .btn { white-space: nowrap; flex: none; padding: .38rem .8rem; font-size: .78rem; line-height: 1.2; }
.toolbar .crumb a { color: var(--indigo); text-decoration: none; }
.btn {
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.btn:hover { border-color: var(--indigo); color: var(--indigo); }
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn.primary:hover { background: var(--indigo-deep); }

/* ---------- sections ---------- */
main { padding: 2.5rem 0 4rem; }

.section { margin-bottom: 2.8rem; }
.section-kicker { margin-bottom: 1rem; }
.section-kicker .klabel {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--indigo);
  font-weight: 700;
  margin-bottom: .35rem;
}
.section-kicker h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.section-kicker .tag {
  border-radius: 999px;
  padding: .18rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tag.concept { background: var(--indigo-50); color: var(--indigo); }
.tag.demo { background: var(--amber-50); color: var(--amber-ink-text); }
.tag.exercise { background: var(--ink); color: #fff; }

.lede { color: var(--muted); max-width: 46rem; margin-bottom: 1.4rem; line-height: 1.8; }

/* live vs self-study markers on cards */
.mode {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .14rem .6rem;
  border-radius: 999px;
  flex: none;
}
.mode.live { background: var(--indigo); color: #fff; }
.mode.self { background: #fff; color: var(--muted); border: 1px solid var(--hairline); }

/* ---------- accordions ---------- */
details.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: .8rem;
  overflow: hidden;
  background: #fff;
}
details.card[open] { border-color: var(--indigo-soft); box-shadow: 0 8px 28px rgba(134,25,143,.08); }
details.card summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: 1.02rem;
  user-select: none;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary .dot {
  width: .6rem; height: .6rem;
  border-radius: 999px;
  background: var(--indigo);
  flex: none;
}
details.card summary .mini { margin-left: auto; font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
details.card summary .caret { transition: transform .2s ease; color: var(--indigo); font-size: .8rem; }
details.card[open] summary .caret { transform: rotate(90deg); }
details.card .body { padding: 0 1.25rem 1.4rem; border-top: 1px solid var(--hairline); padding-top: 1.15rem; }
details.card .body p { margin-bottom: 1.05rem; max-width: 48rem; }
details.card .body p:last-child { margin-bottom: 0; }
details.card .body ul, details.card .body ol { margin: 0 0 1.1rem 1.2rem; max-width: 47rem; }
details.card .body li { margin-bottom: .65rem; }
details.card .body h4 { font-size: .95rem; font-weight: 700; margin: 1.1rem 0 .45rem; }
details.card .body h4:first-child { margin-top: 0; }

/* ---------- pills & legends ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .28rem .85rem;
  font-size: .78rem;
  font-weight: 600;
}
.pill.solid { background: var(--indigo); color: #fff; }
.pill.light { background: var(--indigo-50); color: var(--indigo); }
.pill.inkpill { background: var(--ink); color: #fff; }
.pill.amber, .pill.peach { background: var(--amber); color: var(--amber-ink); }
.pill.bare { color: var(--muted); }

/* ---------- 4D grid ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin: .5rem 0 1rem; }
.d-card {
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--indigo);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.d-card h4 { font-size: .95rem; margin-bottom: .3rem; }
.d-card h4 .lead-letter { color: var(--indigo); }
.d-card p { font-size: .86rem; color: var(--muted); margin: 0; }

/* ---------- tables ---------- */
table.clean { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .4rem 0 1rem; }
table.clean th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .5rem .6rem;
  border-bottom: 2px solid var(--ink);
}
table.clean td { padding: .7rem .6rem; border-bottom: .5px solid var(--hairline); vertical-align: top; line-height: 1.7; }
table.clean td:first-child { font-weight: 600; }

/* ---------- prompt boxes ---------- */
.prompt-box{
  position: relative;
  background: #F6F2FA;
  border: 1px solid #E5DEEA;
  color: #1C1622;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1rem 0 1.2rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.prompt-box .label{
  position: absolute;
  top: -0.7rem;
  left: 1rem;
  background: #5B3A72;
  color: #FFFFFF;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .15rem .7rem;
}
.prompt-box.bad .label { background: var(--faint); color: var(--ink); }
.prompt-box.good .label { background: var(--amber); color: var(--amber-ink); }
.copy-btn{
  position: absolute;
  top: .7rem;
  right: .7rem;
  background: #FFFFFF;
  border: 1px solid #E5DEEA;
  color: #1C1622;
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", -apple-system, sans-serif;
  transition: background .15s ease;
}
.copy-btn:hover { background: #E5DEEA; }
.copy-btn.copied { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }

/* ---------- demo steps ---------- */
.steps { counter-reset: step; margin: .6rem 0 1rem; }
.step {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: .9rem;
  row-gap: .2rem;
  padding: .85rem 0;
  border-bottom: .5px solid var(--hairline);
}
.step > * { grid-column: 2; min-width: 0; }
.step > .prompt-box { margin: .8rem 0 .4rem; }
.step:last-child { border-bottom: none; }
.step::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  width: 1.7rem; height: 1.7rem;
  border-radius: 999px;
  background: var(--indigo-50);
  color: var(--indigo);
  font-weight: 700;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.step p { margin: 0; }

/* ---------- callouts ---------- */
.callout {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: .92rem;
}
.callout.tip { background: var(--indigo-50); border-left: 4px solid var(--indigo); }
.callout.win { background: var(--amber-50); border-left: 4px solid var(--amber); }
.callout strong:first-child { display: block; margin-bottom: .2rem; }

.callout.example {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--amber);
  font-size: .9rem;
}
.callout.example .ex-pill {
  display: inline-block;
  background: var(--amber);
  color: var(--amber-ink);
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}
.callout.example p { margin: 0 0 .75rem; max-width: 47rem; }
.callout.example p:last-child { margin-bottom: 0; }
.callout.example ul { margin: 0 0 0 1.1rem; max-width: 46rem; }
.callout.example li { margin-bottom: .6rem; }
.callout.example li:last-child { margin-bottom: 0; }

/* ---------- zoomable figures ---------- */
figure.zoomable {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin: 1rem 0 1.4rem;
  cursor: zoom-in;
  transition: box-shadow .15s ease;
  background: #fff;
}
figure.zoomable:hover { box-shadow: 0 8px 28px rgba(134,25,143,.12); }
figure.zoomable svg, figure.zoomable img { width: 100%; height: auto; display: block; }
figure.zoomable figcaption {
  margin-top: .6rem;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(252,251,253,.97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox .inner{
  background: #fff;
  border: 1px solid #E5DEEA;
  box-shadow: 0 10px 40px rgba(28,22,34,.14);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 94vw;
  max-height: 92vh;
  overflow: auto;
}
.lightbox .inner svg, .lightbox .inner img { width: min(88vw, 70rem); height: auto; }
.lightbox .close-hint{
  position: fixed;
  top: 1rem; right: 1.4rem;
  color: #1C1622;
  font-size: .8rem;
  font-weight: 600;
}

/* ---------- courses covered ---------- */
.covered { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.covered-row {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .75rem 1.1rem;
  border-bottom: .5px solid var(--hairline);
  font-size: .9rem;
}
.covered-row:last-child { border-bottom: none; }
.covered-row .status { flex: none; }
.covered-row .name { font-weight: 600; }
.covered-row .note { margin-left: auto; color: var(--muted); font-size: .78rem; text-align: right; }

/* ---------- cheat sheet footer ---------- */
.cheat{
  background: #F6F2FA;
  border: 1px solid #E5DEEA;
  color: #1C1622;
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.3rem;
  margin-top: 3rem;
}
.cheat h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.cheat h3 span { color: #5B3A72; }
.cheat .grid-2 { gap: 1rem; }
.cheat .cheat-item { border-left: 3px solid var(--indigo-mid); padding-left: .8rem; }
.cheat .cheat-item b { display: block; font-size: .85rem; color: #38224A; }
.cheat .cheat-item span { font-size: .82rem; color: #655C70; }

footer.pagefoot {
  border-top: 1px solid var(--hairline);
  margin-top: 3rem;
  padding: 1.4rem 0 2.5rem;
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
}
footer.pagefoot a { color: var(--indigo); text-decoration: none; font-weight: 600; }

/* ---------- wayfinding: reading progress + section dots + part numbers ---------- */

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--indigo), var(--amber));
  z-index: 90;
}

.pagenav {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pagenav a {
  width: .68rem; height: .68rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--faint);
  display: block;
  position: relative;
  transition: all .15s ease;
}
.pagenav a:hover { border-color: var(--indigo); transform: scale(1.3); }
.pagenav a.active { background: var(--indigo); border-color: var(--indigo); }
.pagenav a .nlabel {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: .22rem .65rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.pagenav a:hover .nlabel { opacity: 1; }
@media (max-width: 74rem) { .pagenav { display: none; } }

main { counter-reset: partnum -1; }
.section .section-kicker { position: relative; }
.section .section-kicker::before {
  counter-increment: partnum;
  content: counter(partnum, decimal-leading-zero);
  position: absolute;
  right: 0;
  top: -1.2rem;
  font-size: 4.4rem;
  font-weight: 800;
  color: var(--indigo-50);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 0;
}
.section .section-kicker > * { position: relative; z-index: 1; }

details.card summary { transition: background .15s ease; }
details.card summary:hover { background: #F8F5FB; }

/* ---------- journey strip: you are here in the series ---------- */
.journey {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.journey .jlabel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: 1; margin-right: .3rem; }
.journey a {
  width: 1.7rem; height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
  transition: all .15s ease;
  font-variant-numeric: tabular-nums;
}
.journey a:hover { border-color: #fff; transform: scale(1.12); }
.journey a.here { background: #fff; color: var(--indigo); border-color: #fff; }
.journey a.dd-chip { width: auto; border-radius: 999px; padding: 0 .7rem; font-size: .72rem; }

/* ---------- check-yourself quiz ---------- */
.quiz-q {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1rem;
  margin-bottom: .9rem;
  background: #fff;
}
.quiz-q .qtext { font-weight: 700; margin-bottom: .7rem; }
.quiz-q .qopt {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  font-size: .9rem;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.quiz-q .qopt:hover { border-color: var(--indigo); background: var(--indigo-50); }
.quiz-q .qopt.correct { background: var(--indigo); border-color: var(--indigo); color: #fff; font-weight: 600; }
.quiz-q .qopt.correct::after { content: "  ✓"; }
.quiz-q .qopt.wrong { background: #FCF8EC; border-color: #FCA5A5; color: #991B1B; animation: qshake .3s ease; }
.quiz-q .qopt.wrong::after { content: "  ✗ try again"; font-size: .78rem; }
.quiz-q .qopt:disabled { cursor: default; }
.quiz-q .qwhy {
  display: none;
  background: var(--amber-50);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: .6rem .9rem;
  font-size: .86rem;
  margin-top: .3rem;
}
.quiz-q.answered .qwhy { display: block; }
@keyframes qshake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.quiz-score { font-weight: 700; color: var(--indigo); margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .quiz-q .qopt.wrong { animation: none; }
  .journey a:hover { transform: none; }
}

/* ---------- micro-interactions (react-bits inspired, vanilla) ---------- */

/* BlurText: staggered word reveal on the masthead headline */
.masthead h1 .bw {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.35em);
  animation: bw-in .7s cubic-bezier(.22,.9,.35,1) forwards;
  animation-delay: var(--bw-delay, 0s);
}
@keyframes bw-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* SpotlightCard: cursor-following highlight on accordion cards */
details.card { position: relative; }
details.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(134,25,143,.09), transparent 65%);
}
details.card:hover::after { opacity: 1; }

/* ScrollReveal: sections rise in as they enter the viewport */
.js-reveal .section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.35,1);
}
.js-reveal .section.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .masthead h1 .bw { animation: none; opacity: 1; filter: none; transform: none; }
  details.card::after { display: none; }
  .js-reveal .section { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 40rem) {
  .masthead h1 { font-size: 1.6rem; }
  
  .toolbar .crumb { display: none; }
}

@media print {
  .toolbar, .copy-btn { display: none; }
  details.card { border: 1px solid #ccc; }
}

/* ---------- live SQL playground (sql-live.js) ---------- */
.sqlbox {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  margin: 1rem 0 1.4rem;
  box-shadow: 0 8px 28px rgba(134,25,143,.06);
}
.sql-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  background: var(--indigo-deep);
  color: #fff;
}
.sql-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--amber); flex: none; }
.sql-title { font-size: .76rem; font-weight: 600; letter-spacing: .02em; opacity: .92; }
.sql-spacer { margin-left: auto; }
.sql-btn {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 999px;
  padding: .26rem .8rem;
  font-size: .74rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .14s ease; white-space: nowrap;
}
.sql-btn:hover { background: rgba(255,255,255,.2); }
.sql-btn.sql-run { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.sql-btn.sql-run:hover { filter: brightness(1.05); }
.sql-label {
  display: block;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--muted);
  padding: .6rem .9rem .2rem;
}
.sql-code-wrap { border-bottom: 1px solid var(--hairline); }
.sql-code {
  width: 100%;
  border: none; outline: none; resize: vertical;
  padding: .35rem .9rem .9rem;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .86rem; line-height: 1.6;
  color: var(--ink); background: #fff;
  tab-size: 2;
}
.sql-out { padding: .2rem .9rem 1rem; overflow-x: auto; }
.sql-tablewrap { overflow-x: auto; }
table.sql-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .3rem 0 .1rem; }
table.sql-table th {
  text-align: left; text-transform: uppercase; letter-spacing: .05em;
  font-size: .68rem; color: var(--indigo); font-weight: 800;
  padding: .35rem .6rem; border-bottom: 2px solid var(--indigo-50); white-space: nowrap;
}
table.sql-table td {
  padding: .32rem .6rem; border-bottom: .5px solid var(--hairline);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.sql-table tr:last-child td { border-bottom: none; }
.sql-null { color: var(--faint); font-style: italic; font-size: .78rem; }
.sql-note { font-size: .74rem; color: var(--muted); margin: .5rem 0 0; font-weight: 600; }
.sql-hint { font-weight: 500; font-style: italic; }
.sql-err {
  font-size: .82rem; color: #991B1B; background: #FCF8EC;
  border: 1px solid #FCA5A5; border-radius: 8px;
  padding: .55rem .75rem; margin: .4rem 0 0;
  font-family: "SF Mono", Menlo, monospace;
}
.sql-cap { font-size: .78rem; color: var(--muted); padding: 0 .9rem .8rem; }
.sqlbox.sql-had-err .sql-bar { background: #7f1d1d; }


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


@media (max-width: 640px) {  }


@media (max-width: 640px) {
  
  
}

/* === LWP-PATCH v2 === */
/* palette-agnostic aliases: 75 repos use --indigo/--amber, 1 uses --pine/--clay */
:root {
  --pv-accent: var(--indigo, var(--pine, #8A6A1F));
  --pv-flag: var(--amber, var(--clay, #5B3A72));
  --pv-flag-50: var(--amber-50, var(--clay-50, #FCF8EC));
}

/* ============================================================
   v2 - readable on a phone + reading modes
   Layout only. No palette tokens are changed.
   ============================================================ */

/* --- skip link --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pv-accent); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
  font-weight: 700; font-size: .85rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --- visible keyboard focus everywhere --- */
:focus-visible {
  outline: 3px solid var(--pv-flag);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- diagrams: hold authored width, scroll instead of shrinking --- */
.figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.figscroll::-webkit-scrollbar { height: 6px; }
.figscroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }

/* --- tables: scroll container + sticky row label --- */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

/* --- section contents counter --- */
.sec-meta {
  display: block; margin-top: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- study-mode switch --- */
.btn.mode-on { background: var(--pv-flag); border-color: var(--pv-flag); color: #fff; }

/* --- deep-linked card gets a moment of emphasis --- */
details.card.linked { border-color: var(--pv-flag); box-shadow: 0 0 0 3px var(--pv-flag-50); }

@media (max-width: 820px) {
  /* labels keep the size they were drawn at; the figure scrolls */
  figure.zoomable svg { min-width: 820px; }
  .figscroll .mm-svg, .mindmap svg { min-width: 840px; }

  table.clean { min-width: 620px; }
  table.clean th:first-child,
  table.clean td:first-child {
    position: sticky; left: 0; background: #fff;
    box-shadow: 1px 0 0 var(--hairline);
  }

  pre, .prompt-box { overflow-x: auto; }

  /* 44px tap targets */
  details.card summary { min-height: 44px; }
  .qopt { min-height: 44px; display: flex; align-items: center; padding: .7rem .9rem; }
  .toolbar .btn, .pagefoot a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .toolbar .crumb, .toolbar #zoom-toggle { display: none; }
  .toolbar .btn { flex: 1 1 0; padding: .3rem .4rem; font-size: .72rem; }
  table.clean { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  /* long inline code tokens and nowrap chips are the two things that still
     forced the page sideways below 640px: let them break rather than push
     the layout. Inside the media query only - desktop is untouched. */
  :not(pre) > code, .prompt-box span, code span,
  p span, li span, td span { overflow-wrap: anywhere; word-break: break-word; }
  .chip, .syn-chip, .pill, .mode, .tag { white-space: normal; max-width: 100%; }

  
  
  .chip-row, .legend { flex-wrap: wrap; }
  .journey { flex-wrap: wrap; row-gap: .45rem; }
}

/* --- print: a session should print as a complete handout --- */
@media print {
  .pagenav, #progress-bar, .skip-link, .journey, .lightbox { display: none !important; }
  details.card > .body { display: block !important; }
  details.card, figure, table.clean, .callout { break-inside: avoid; page-break-inside: avoid; }
  figure.zoomable svg { min-width: 0; max-width: 100%; }
  .figscroll, .tablescroll { overflow: visible; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .72rem; color: #555; }
}

/* swipe hint: own line, only when the diagram really does scroll */
figure.zoomable.can-scroll figcaption { flex-wrap: wrap; }
figure.zoomable.can-scroll figcaption::after {
  content: "swipe the diagram \2192";
  flex: 0 0 100%;
  margin-top: .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pv-flag);
}
/* === /LWP-PATCH === */


/* ============================================================
   LWP WIDGET KIT v1 - wipe / hotspot / tick / tryrow / stakes
   / scorecard / passport. Self-theming off the course :root.
   ============================================================ */

/* --- shared shell --------------------------------------- */
.wk {
  margin: 26px 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  overflow: hidden;
}
.wk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--indigo-50);
  border-bottom: 1px solid var(--hairline);
}
.wk-head b {
  font-size: 0.74rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--indigo-deep);
}
.wk-head .wk-hint { font-size: 0.82rem; color: var(--muted); }
.wk-body { padding: 18px 16px; }
.wk-foot {
  padding: 10px 16px; border-top: 1px dashed var(--hairline);
  font-size: 0.82rem; color: var(--muted); background: var(--paper);
}

/* --- 1. wipe: draggable before/after ------------------- */
.wipe { position: relative; user-select: none; touch-action: none; }
.wipe-panes { position: relative; overflow: hidden; border-radius: 10px; }
.wipe-a, .wipe-b { padding: 18px 20px; font-size: 0.92rem; line-height: 1.75; }
.wipe-a { background: #FCF8EC; border: 1px solid #FCA5A5; border-radius: 10px; }
.wipe-b {
  position: absolute; inset: 0;
  background: var(--indigo-50); border: 1px solid var(--indigo-soft);
  border-radius: 10px;
  clip-path: inset(0 0 0 var(--wx, 50%));
}
.wipe-a h5, .wipe-b h5 {
  margin: 0 0 8px; font-size: 0.72rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 800;
}
.wipe-a h5 { color: #991B1B; }
.wipe-b h5 { color: var(--indigo-deep); }
.wipe-a p, .wipe-b p { margin: 0 0 6px; }
.wipe-grip {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--indigo); cursor: ew-resize; z-index: 3;
  transform: translateX(-1.5px);
}
.wipe-grip::after {
  content: "⇄"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--indigo); color: #fff;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 800;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
}
.wipe-tags { display: flex; justify-content: space-between; margin-top: 10px; }
.wipe-tags span {
  font-size: 0.7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.wipe-tags .wt-a { background: #FCF8EC; color: #991B1B; }
.wipe-tags .wt-b { background: var(--indigo-50); color: var(--indigo-deep); }

/* --- 2. hotspot: pins on a mock ------------------------ */
.hotspot { position: relative; }
.hs-mock { position: relative; border-radius: 10px; overflow: hidden; }
.hs-mock svg { display: block; width: 100%; height: auto; }
.hs-pin {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 27px; height: 27px; border-radius: 999px;
  border: 2px solid #fff; background: var(--indigo); color: #fff;
  font: 800 0.78rem/1 Inter, sans-serif;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 9px rgba(0,0,0,.28);
  transition: transform .16s ease, background .16s ease;
  z-index: 2;
}
.hs-pin:hover { transform: translate(-50%, -50%) scale(1.18); }
.hs-pin.on { background: var(--amber); color: var(--amber-ink); }
.hs-pin::before {
  content: ""; position: absolute; inset: -7px; border-radius: 999px;
  border: 2px solid var(--indigo); opacity: 0;
}
.hs-pin.on::before { border-color: var(--amber); opacity: .55; }
.hs-caps { margin-top: 14px; display: grid; gap: 8px; }
.hs-cap {
  display: none; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--indigo-50); border-left: 3px solid var(--indigo);
  font-size: 0.9rem; line-height: 1.7;
}
.hs-cap.on { display: flex; }
.hs-cap b {
  flex: 0 0 auto; color: var(--indigo-deep);
  font-size: 0.74rem; letter-spacing: .06em; text-transform: uppercase;
  padding-top: 2px;
}
.hs-empty { font-size: 0.86rem; color: var(--muted); font-style: italic; }

/* --- 3. tick: travelling-dot pipeline ------------------ */
.tick-rail { position: relative; padding: 26px 0 8px; }
.tick-line {
  position: absolute; left: 4%; right: 4%; top: 40px; height: 3px;
  background: var(--hairline); border-radius: 2px;
}
.tick-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--indigo); border-radius: 2px;
  width: 0; transition: width .45s cubic-bezier(.4,0,.2,1);
}
.tick-dot {
  position: absolute; top: 41.5px; left: 4%;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--amber); border: 3px solid #fff;
  box-shadow: 0 2px 9px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
  transition: left .45s cubic-bezier(.4,0,.2,1);
  z-index: 3;
}
.tick-stages { display: flex; justify-content: space-between; position: relative; }
.tick-stage { flex: 1; text-align: center; }
.tick-stage i {
  display: block; width: 13px; height: 13px; margin: 34px auto 10px;
  border-radius: 999px; background: #fff;
  border: 3px solid var(--faint); transition: border-color .3s ease;
}
.tick-stage.done i { border-color: var(--indigo); background: var(--indigo); }
.tick-stage span {
  font-size: 0.76rem; font-weight: 700; color: var(--muted);
  transition: color .3s ease;
}
.tick-stage.done span { color: var(--ink); }
.tick-controls { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.tick-btn {
  font: 700 0.8rem Inter, sans-serif; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff;
}
.tick-btn.ghost { background: #fff; color: var(--indigo); }
.tick-btn:disabled { opacity: .4; cursor: not-allowed; }
.tick-note {
  display: none; margin-top: 12px; padding: 13px 15px;
  background: var(--paper); border-left: 3px solid var(--amber);
  border-radius: 8px; font-size: 0.9rem; line-height: 1.75;
}
.tick-note.on { display: block; }
.tick-note b { color: var(--indigo-deep); }

/* --- 4. tryrow: inline micro-try ----------------------- */
.tryrow .tr-in {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tryrow textarea, .tryrow input[type="text"] {
  flex: 1 1 260px; min-height: 44px;
  font: 400 0.9rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  resize: vertical;
}
.tryrow textarea:focus, .tryrow input:focus {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-50);
}
.tr-go {
  font: 800 0.8rem Inter, sans-serif; cursor: pointer;
  padding: 0 18px; border-radius: 9px; min-height: 44px;
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff;
}
.tr-out {
  display: none; margin-top: 12px; padding: 13px 15px;
  border-radius: 9px; background: var(--indigo-50);
  border-left: 3px solid var(--indigo);
  font-size: 0.9rem; line-height: 1.7;
}
.tr-out.on { display: block; }
.tr-out.bad { background: #FCF8EC; border-left-color: #991B1B; }
.tr-metrics { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 6px; }
.tr-metric { display: flex; flex-direction: column; }
.tr-metric b {
  font: 800 1.35rem/1.1 Inter, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--indigo-deep);
}
.tr-metric span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px;
}
.tr-verdict { font-weight: 700; }
.tr-verdict.ok { color: var(--indigo-deep); }
.tr-verdict.no { color: #991B1B; }

/* --- 5. stakes: live cost meter ------------------------ */
.stakes-grid { display: grid; gap: 9px; }
.stakes-grid label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 9px;
  border: 1px solid var(--hairline); background: var(--paper);
  cursor: pointer; font-size: 0.9rem; line-height: 1.65;
  transition: border-color .16s ease, background .16s ease;
}
.stakes-grid label:hover { border-color: var(--indigo-soft); }
.stakes-grid label.on { border-color: var(--indigo); background: var(--indigo-50); }
.stakes-grid label.trap.on { border-color: #991B1B; background: #FCF8EC; }
.stakes-grid input { margin-top: 4px; accent-color: var(--indigo); flex: 0 0 auto; }
.stakes-grid .sk-d {
  margin-left: auto; flex: 0 0 auto;
  font: 800 0.76rem Inter, sans-serif; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px;
  background: var(--indigo-50); color: var(--indigo-deep);
}
.stakes-grid label.trap .sk-d { background: #FCF8EC; color: #991B1B; }
.stakes-read {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 15px 17px; border-radius: 10px;
  background: var(--indigo-deep); color: #fff;
}
.stakes-read output {
  font: 800 2.1rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
}
.stakes-read .sk-unit { font-size: 0.85rem; opacity: .82; }
.stakes-read .sk-delta {
  margin-left: auto; font-size: 0.85rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.15);
}
.stakes-read .sk-delta.good { background: var(--amber); color: var(--amber-ink); }
.stakes-read .sk-delta.bad { background: #FCA5A5; color: #7f1d1d; }

/* --- 6. scorecard: halfway self-grade ------------------ */
.scorecard .sc-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--hairline);
}
.scorecard .sc-row:last-of-type { border-bottom: 0; }
.scorecard .sc-q { font-size: 0.92rem; line-height: 1.6; }
.scorecard .sc-q em { color: var(--muted); font-style: normal; font-size: 0.84rem; display: block; }
.sc-opts { display: flex; gap: 6px; }
.sc-opts button {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hairline); background: #fff; color: var(--muted);
  font: 800 0.82rem Inter, sans-serif;
}
.sc-opts button.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.sc-total {
  margin-top: 16px; padding: 15px 17px; border-radius: 10px;
  background: var(--indigo-50); border-left: 3px solid var(--indigo);
}
.sc-total b {
  font: 800 1.6rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--indigo-deep); display: block; margin-bottom: 4px;
}
.sc-total span { font-size: 0.9rem; line-height: 1.7; }

/* --- 7. passport --------------------------------------- */
.pp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 800 0.72rem Inter, sans-serif; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--indigo-50); color: var(--indigo-deep);
  border: 1px solid var(--indigo-soft); cursor: default;
}
.pp-pill.full { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.pp-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.pp-stamp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 74px; padding: 12px 6px; border-radius: 12px;
  border: 2px dashed var(--faint); background: var(--paper);
  text-decoration: none; color: var(--muted);
  transition: all .18s ease;
}
.pp-stamp:hover { border-color: var(--indigo-soft); }
.pp-stamp i { font-size: 1.3rem; font-style: normal; opacity: 1; }
.pp-stamp b { font: 800 0.7rem Inter, sans-serif; }
.pp-stamp.got {
  border-style: solid; border-color: var(--indigo);
  background: var(--indigo-50); color: var(--indigo-deep);
}
.pp-stamp.got i { opacity: 1; }
.pp-note { font-size: 0.86rem; color: var(--muted); }

/* --- 8. cliffhanger ------------------------------------ */
.callout.next {
  border-left: 4px solid var(--amber); background: var(--amber-50);
}
.callout.next .nx-pill {
  display: inline-block; margin-bottom: 7px;
  font: 800 0.68rem Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  background: var(--amber); color: var(--amber-ink);
}

/* --- mobile floor (desktop is the product) ------------- */
@media (max-width: 720px) {
  .wk-body { padding: 14px 12px; }
  .stakes-read output { font-size: 1.7rem; }
  .stakes-grid .sk-d { margin-left: 0; }
  .stakes-grid label { flex-wrap: wrap; }
  .scorecard .sc-row { grid-template-columns: 1fr; }
  .sc-opts { justify-content: flex-start; }
  .tick-stage span { font-size: 0.68rem; }
  .pp-stamp { width: 62px; }
}


/* ============================================================
   dh-live.js - believability, and the other axis
   ============================================================ */
#dh-live { margin: 28px 0; }
.dh-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.dh-meter { padding: 16px 18px; border-radius: var(--radius); color: #fff; transition: background .3s ease; }
.dh-meter.dh-b { background: var(--indigo-deep); }
.dh-meter.dh-t { background: var(--indigo); }
.dh-meter.dh-t.collapsed { background: #991B1B; }
.dh-big { display: block; font: 800 2.6rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.dh-big.hi { color: #DCCFE7; }
.dh-big.mid { color: #fff; }
.dh-big.lo { color: #FCA5A5; }
.dh-mlab { display: block; font: 800 0.7rem Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; opacity: .85; margin-top: 6px; }
.dh-msub { display: block; font-size: 0.82rem; opacity: .8; margin-top: 3px; }
.dh-stage { display: grid; grid-template-columns: 260px 1fr; gap: 16px; margin-bottom: 14px; }
.dh-facewrap { border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper); padding: 12px; display: grid; place-items: center; }
.dh-face { width: 100%; height: auto; max-width: 220px; }
.dh-right { min-width: 0; }
.dh-h { margin: 0 0 8px; font: 800 0.72rem Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.dh-ta { width: 100%; font: 400 0.9rem/1.7 Inter, sans-serif; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--hairline); background: #fff; color: var(--ink); resize: vertical; }
.dh-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }
.dh-ctl { display: flex; gap: 10px; align-items: center; margin: 9px 0 14px; flex-wrap: wrap; }
.dh-tnote { font-size: 0.8rem; color: var(--muted); }
.dh-track { display: flex; flex-wrap: wrap; gap: 3px; }
.dh-cell { font: 700 0.66rem ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 5px;
  background: var(--indigo-50); color: var(--indigo-deep); transition: all .1s linear; }
.dh-cell.rest { background: var(--paper); color: var(--faint-text); }
.dh-cell.now { background: var(--amber); color: var(--amber-ink); transform: scale(1.18); }
.dh-panel { border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; overflow: hidden; }
.dh-phead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; background: var(--indigo-50); border-bottom: 1px solid var(--hairline); }
.dh-phead b { font: 800 0.74rem Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--indigo-deep); }
.dh-ethhead { background: var(--amber-50); border-top: 1px solid var(--hairline); }
.dh-ethhead b { color: var(--amber-ink); }
.dh-pnote { font-size: 0.82rem; color: var(--muted); }
.dh-lever { display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background .16s ease; }
.dh-lever:hover { background: var(--paper); }
.dh-lever.on { background: var(--indigo-50); }
.dh-lever.dh-disc.on { background: var(--amber-50); }
.dh-lever input { margin-top: 4px; accent-color: var(--indigo); flex: 0 0 auto; }
.dh-lever.dh-disc input { accent-color: var(--amber); }
.dh-lmid { flex: 1 1 240px; min-width: 0; }
.dh-lmid b { display: block; font-size: 0.92rem; line-height: 1.5; }
.dh-why { display: block; font-size: 0.82rem; line-height: 1.65; color: var(--muted); margin-top: 3px; }
.dh-w { flex: 0 0 auto; font: 800 0.74rem Inter, sans-serif; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-deep); }
.dh-w0 { background: var(--amber-50); color: var(--amber-ink-text); }
.dh-sess { flex: 0 0 auto; font: 700 0.66rem Inter, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--paper); color: var(--muted); border: 1px solid var(--hairline); }
.dh-facts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 13px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--paper); }
.dh-fnote { font-size: 0.8rem; color: var(--muted); }
.dh-acts { display: flex; gap: 8px; padding: 14px 16px; flex-wrap: wrap; }
.dh-btn { font: 800 0.8rem Inter, sans-serif; cursor: pointer; padding: 9px 17px;
  border-radius: 999px; border: 1px solid var(--indigo); background: var(--indigo); color: #fff; }
.dh-btn.ghost { background: #fff; color: var(--indigo); }
.dh-btn:disabled { opacity: .4; cursor: not-allowed; }
.dh-verdict { margin: 14px 0 0; padding: 13px 16px; border-radius: 10px; font-size: 0.9rem; line-height: 1.75; }
.dh-verdict.ok { background: var(--indigo-50); border-left: 3px solid var(--indigo); }
.dh-verdict.warn { background: var(--amber-50); border-left: 3px solid var(--amber); color: var(--amber-ink-text); }
.dh-verdict.bad { background: #FCF8EC; border-left: 3px solid #991B1B; color: #7f1d1d; }
.dh-rail { margin: 14px 0 0; padding: 13px 16px; border-radius: 10px;
  background: var(--paper); border-left: 3px solid var(--muted);
  font-size: 0.86rem; line-height: 1.75; color: var(--muted); }
.dh-rail b { color: var(--ink); }
@media (max-width: 860px) {
  .dh-stage { grid-template-columns: 1fr; }
  .dh-reads { grid-template-columns: 1fr; }
  .dh-big { font-size: 2.1rem; }
}


/* ---------- agenda bar ---------- */
/* Restored 2026-08-26. This block was missing from the aiap batch stylesheet while
   older course repos had it, so the masthead agenda rendered as run-on text.
   Band text colours are computed per palette rather than copied, because this
   batch uses much paler soft tones than the repo the block came from. */
.agenda {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  margin: 1.4rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
}

.agenda span { padding: .45rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agenda .a1 { background: var(--indigo-deep); color: #fff; }
.agenda .a2 { background: var(--indigo-mid); color: var(--ink); }
.agenda .a3 { background: var(--amber); color: var(--amber-ink); }
.agenda .a4 { background: var(--indigo-soft); color: var(--ink); }


/* ---------- mono, and the warn callout ---------- */
/* Added 2026-08-26. Both were used in markup with no rule anywhere in the
   estate: .mono appeared in 126 places across this batch and in zero
   stylesheets, and .callout.warn inherited only padding and radius from the
   base .callout, which sets no background, so warnings rendered as plain
   indented paragraphs. .mono needs two rules because it is used both as a
   block footer note and as inline code. */
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .86em;
}

p.mono { color: var(--muted); }

span.mono {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: .08em .34em;
  white-space: nowrap;
}

.callout.warn { background: #FCF8EC; border-left: 4px solid #8A6A1F; }

/* ---------- heur-live: the heuristic review bench ---------- */
/* Three widgets share this block: the review bench (hb-), the severity matrix
   (sv-) and the data-contract validator (ct-). Every colour here is computed
   against this repo's own palette, not carried from the donor repo. */

.hb-wrap { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: #fff; }
.hb-honesty { font-size: .78rem; color: var(--muted); border-left: 3px solid var(--amber); padding: .3rem .7rem; margin-bottom: .9rem; }
.hb-honesty b { color: var(--ink); }

/* the scoreboard */
.hb-board { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.hb-tile { flex: 1 1 8.5rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: .55rem .7rem; }
.hb-tile .hb-k { display: block; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hb-tile .hb-v { display: block; font-size: 1.45rem; font-weight: 800; color: var(--indigo-deep); line-height: 1.25; font-variant-numeric: tabular-nums; }
.hb-tile.hb-bad .hb-v { color: #991B1B; }
.hb-tile .hb-note { display: block; font-size: .72rem; color: var(--muted); }

/* lens toggles */
.hb-lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .45rem; margin-bottom: .9rem; }
.hb-lens { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline; padding: .5rem .6rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: .85rem; }
.hb-lens:hover { border-color: var(--indigo-mid); }
.hb-lens input { accent-color: var(--indigo); margin-top: .2rem; }
.hb-lens .hb-ln { font-weight: 600; color: var(--ink); }
.hb-lens .hb-ln em { font-style: normal; font-weight: 400; color: var(--muted); display: block; font-size: .78rem; }
.hb-lens .hb-lc { font-size: .74rem; color: var(--indigo-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-lens[data-on="1"] { background: var(--indigo-50); border-color: var(--indigo-mid); }
.hb-lens.hb-anti[data-on="1"] { background: #FCF8EC; border-color: #8A6A1F; }
.hb-lens .hb-badge { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #7F1D1D; }

/* the product under review */
.hb-stage { border: 1px solid var(--faint); border-radius: 10px; padding: .8rem; background: var(--paper); margin-bottom: .9rem; }
.hb-stage-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.hb-stage-h b { font-size: .95rem; color: var(--ink); }
.hb-stage-h span { font-size: .74rem; color: var(--muted); }
.hb-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.hb-panel { background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: .5rem .6rem; font-size: .8rem; position: relative; }
.hb-panel .hb-pt { font-weight: 700; color: var(--ink); font-size: .78rem; }
.hb-panel .hb-pn { font-size: 1.3rem; font-weight: 800; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.hb-panel .hb-ps { font-size: .72rem; color: var(--muted); }
.hb-panel.hb-flagged { outline: 2px solid #8A6A1F; outline-offset: 1px; }
.hb-panel.hb-false { outline: 2px dashed #991B1B; outline-offset: 1px; }
.hb-pill { position: absolute; top: -.5rem; right: -.3rem; background: #991B1B; color: #fff; border-radius: 999px; font-size: .62rem; font-weight: 700; padding: .1rem .38rem; }
.hb-panel.hb-false .hb-pill { background: #991B1B; }
.hb-scroll { max-height: 15rem; overflow-y: auto; }
.hb-tbl { width: 100%; border-collapse: collapse; font-size: .74rem; margin: .2rem 0 .35rem; }
.hb-tbl td { padding: .16rem .3rem; border-bottom: 1px solid var(--hairline); color: var(--ink); }
.hb-tbl td:last-child { color: var(--muted); }
.hb-tbl tr:last-child td { border-bottom: 0; }

/* findings list */
.hb-findings { list-style: none; padding: 0; margin: 0; }
.hb-findings li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem .7rem; align-items: baseline; padding: .45rem .1rem; border-bottom: 1px solid var(--hairline); font-size: .84rem; }
.hb-findings li:last-child { border-bottom: 0; }
.hb-sev { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.hb-s4 { background: #991B1B; color: #fff; }
.hb-s3 { background: #8A6A1F; color: #fff; }
.hb-s2 { background: var(--amber-50); color: var(--amber-ink-text); }
.hb-s1 { background: var(--indigo-50); color: var(--indigo-deep); }
.hb-findings .hb-src { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.hb-findings li.hb-fp { background: #FCF8EC; }
.hb-findings li.hb-fp .hb-src { color: #991B1B; }
.hb-empty { font-size: .84rem; color: var(--muted); padding: .6rem .1rem; }

/* severity matrix */
.sv-grid { display: grid; grid-template-columns: 1fr repeat(3, 5.4rem) 4rem; gap: .35rem .5rem; align-items: center; font-size: .82rem; }
.sv-grid .sv-h { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.sv-grid input[type=range] { width: 100%; accent-color: var(--indigo); }
.sv-grid .sv-out { font-weight: 800; color: var(--indigo-deep); text-align: right; font-variant-numeric: tabular-nums; }
.sv-order { margin: .9rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--indigo-50); font-size: .85rem; }
.sv-order ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.sv-order li { margin: .15rem 0; }

/* contract validator */
.ct-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ct-wrap textarea{ width: 100%; min-height: 15rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.6; border: 1px solid var(--hairline); border-radius: 10px; padding: .6rem .7rem; background: #F6F2FA;
  border: 1px solid #E5DEEA; color: #1C1622; resize: vertical; }
.ct-out { border: 1px solid var(--hairline); border-radius: 10px; padding: .6rem .7rem; background: var(--paper); font-size: .82rem; max-height: 22rem; overflow-y: auto; }
.ct-group { margin-bottom: .7rem; }
.ct-group b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .25rem; }
.ct-row { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: baseline; padding: .12rem 0; }
.ct-row .ct-m { font-weight: 700; }
.ct-pass .ct-m { color: #166534; }
.ct-fail .ct-m { color: #991B1B; }
.ct-fail { color: var(--ink); }
.ct-pass { color: var(--muted); }
.ct-tally { font-weight: 700; color: var(--indigo-deep); margin-bottom: .6rem; font-size: .9rem; }

.hb-btn { font: inherit; font-size: .82rem; font-weight: 600; border: 1px solid var(--indigo-mid); background: #fff; color: var(--indigo-deep); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.hb-btn:hover { background: var(--indigo-50); }
.hb-btn.hb-primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.hb-btn.hb-primary:hover { background: var(--indigo-deep); }
.hb-ctl { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .9rem; }

@media (max-width: 720px) {
  .ct-wrap { grid-template-columns: 1fr; }
  .sv-grid { grid-template-columns: 1fr 3.6rem 3.6rem 3.6rem 3rem; font-size: .76rem; }
  .hb-lenses { grid-template-columns: 1fr; }
}






/* ---------- footer session nav -------------------------------
   .pagenav is the fixed side-dot strip that app.js builds. The one
   inside the page footer is a pair of text links and must not inherit
   that treatment, or it renders at zero by zero and disappears.
   ------------------------------------------------------------- */
.pagefoot .pagenav {
  display: flex;
  position: static; transform: none; right: auto; top: auto; z-index: auto;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .6rem;
}
.pagefoot .pagenav a {
  width: auto; height: auto; border: 0; background: none; border-radius: 0;
  display: inline; font-size: .85rem; font-weight: 700; color: var(--indigo);
  text-decoration: none;
}
.pagefoot .pagenav a:hover { transform: none; text-decoration: underline; border-color: transparent; }
.pagefoot .pagenav a.active { background: none; }
.pagefoot .pagenav a .nlabel { display: none; }

/* the step number is generated by .step::before; any literal one in the
   markup would render a second time */
.step .n { display: none; }

@media (max-width: 74rem) { .pagefoot .pagenav { display: flex; } }





/* ---------- ob: the optimisation bench (p10) ---------- */
.ob { border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; overflow: hidden; margin: 1.1rem 0; }
.ob-head { background: var(--indigo-deep); color: #fff; padding: .85rem 1.1rem; }
.ob-head h4 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 800; }
.ob-head p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--indigo-soft); }
.ob-controls { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; padding: .9rem 1.1rem; background: var(--indigo-50); border-bottom: 1px solid var(--hairline); }
.ob-ctl { display: flex; flex-direction: column; gap: .25rem; }
.ob-ctl label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ob-num { font: inherit; font-size: .86rem; padding: .34rem .5rem; border: 1px solid var(--faint); border-radius: 9px; background: #fff; color: var(--ink); width: 5.4rem; }
.ob-btn { font: inherit; font-size: .84rem; font-weight: 800; padding: .44rem 1rem; border: 0; border-radius: 10px; background: var(--indigo); color: #fff; cursor: pointer; }
.ob-btn:hover { background: var(--indigo-deep); }
.ob-btn.ghost { background: #fff; color: var(--amber); border: 1px solid var(--amber); }
.ob-btn.ghost:hover { background: var(--amber-50); }
.ob-body { padding: 1.1rem; }
.ob-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.ob-kpi { border: 1px solid var(--hairline); border-radius: 12px; padding: .55rem .7rem; background: var(--paper); }
.ob-kpi b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--indigo); line-height: 1.25; }
.ob-kpi b.warn { color: var(--amber); }
.ob-kpi span { display: block; margin-top: .2rem; font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ob-note { font-size: .86rem; line-height: 1.75; color: var(--ink); margin: 0 0 1rem; }
.ob-scroll { overflow-x: auto; }
.ob-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ob-tbl th { text-align: right; padding: .3rem .45rem; font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.ob-tbl th:first-child { text-align: left; }
.ob-tbl td { text-align: right; padding: .3rem .45rem; border-bottom: 1px solid var(--indigo-50); font-variant-numeric: tabular-nums; }
.ob-tbl td:first-child { text-align: left; font-weight: 700; }
.ob-tbl tr.hi td { background: var(--indigo-50); }
.ob-tbl td.warn { color: var(--amber); font-weight: 800; }
.ob-flag { font-size: .82rem; font-weight: 700; padding: .5rem .7rem; border-radius: 10px; margin-bottom: 1rem; background: var(--amber-50); color: var(--amber); border: 1px solid var(--amber); }

/* layout-patch-3: phone-width overflow (2026-10-10) */
.sql-bar { flex-wrap: wrap; }
@media (max-width: 480px) {
  .covered-row { flex-wrap: wrap; }
  .covered-row .note { margin-left: 0; text-align: left; flex-basis: 100%; }
  details.card summary { flex-wrap: wrap; }
  details.card summary .mini { white-space: normal; }
  .wk, .sqlbox, .prompt-box, pre { max-width: 100%; overflow-x: auto; }
  .mono, code, strong, .note { overflow-wrap: anywhere; }
  select, input[type=range], label { max-width: 100%; }
  canvas, svg, img { max-width: 100%; height: auto; }
  .tree-kids, .tree-node-wrap, .tree-node, .rb-night, .al-row, .gd-field, .tl-row, .sl-row { max-width: 100%; overflow-x: auto; }
  .tl-cols, .sl-cols, .bb-cols, .ev-cols, [class$="-cols"] { grid-template-columns: 1fr !important; display: grid; }
  .tl-cols > *, .sl-cols > *, [class$="-cols"] > * { min-width: 0; max-width: 100%; }
  .mono { white-space: normal; }
  .er-w, .bb-lab, .tl-lev, .sl-lev { max-width: 100%; white-space: normal; }
}
/* contrast-patch-2b */
.cheat a { color: var(--indigo-deep, var(--ink)); }
.chip.audience { background: transparent; border-color: rgba(255,255,255,.55); }
.masthead a, .masthead .sub a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.prompt-box b, .prompt-box strong { color: var(--indigo-deep, var(--ink)); }
.prompt-box span, .prompt-box em, .prompt-box i { color: inherit; }
.pp-stamp i { color: var(--ink); }

/* Prompt-box label sits inside the box (2026-10-12). Hanging it 0.7rem above the edge let any
   overflow:auto parent cut it in half; in normal flow nothing can clip it. The right margin
   keeps it clear of the Copy button; long labels wrap instead of running under it. */
.prompt-box > .label{ position: static; display: table; margin: 0 5.2rem .55rem 0; white-space: normal; line-height: 1.45; }

/* Wipe panes share one grid cell (2026-10-12): the taller pane sets the height. Pane B was
   absolutely positioned over pane A, so a longer B was cut off at the bottom on phones. */
.wipe-panes { display: grid; }
.wipe-panes > .wipe-a, .wipe-panes > .wipe-b { grid-area: 1 / 1; }
.wipe-panes > .wipe-b { position: relative; inset: auto; }