/* Shared stylesheet for the Google Vibe Coding course lessons.
   Tufte-inspired: warm paper, serif body, generous margins, print-friendly.
   Every lesson links this — keep it consistent. */

:root {
  color-scheme: dark;          /* dark-mode UI: scrollbars, form controls match */
  --paper:   #1a1b1e;          /* soft near-black, not #000 (avoids glare/halation) */
  --ink:     #d6d3c9;          /* warm off-white, not pure #fff (less brightness) */
  --muted:   #908d83;
  --rule:    #34353a;
  --accent:  #c9a86a;          /* muted gold — citations, emphasis (gentle, warm) */
  --good:    #7fbf95;
  --bad:     #d98b8b;
  --panel:   #232428;          /* slightly lifted from paper for panels */
  --maxw:    42rem;
}

html { font-size: 17px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  line-height: 1.55;
  margin: 0;
  padding: 4rem 1.5rem 8rem;
}
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* --- Cross-course lesson nav (static, generated by tools/gen-nav.py) --- */
/* Full-bleed sticky bar. Negative margins cancel body padding (4rem / 1.5rem)
   so it sits flush at the top; inner content aligns with the reading column. */
.lnav {
  position: sticky; top: 0; z-index: 10;
  margin: -4rem -1.5rem 2.5rem;
  display: flex; justify-content: center;   /* parent centers the rail — robust, no auto-margin */
  background: rgba(26, 27, 30, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.lnav-inner {
  box-sizing: border-box;               /* padding sits inside the basis, so content = --maxw */
  flex: 0 1 calc(var(--maxw) + 3rem);   /* reading column + 1.5rem gutters; shrinks on narrow */
  min-width: 0;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1.5rem; font-size: .8rem;
}
.lnav a { border: none; color: var(--accent); white-space: nowrap; }
.lnav a:hover { border-bottom: 1px solid var(--accent); }
.lnav-pos { flex: 1; text-align: center; color: var(--muted); letter-spacing: .03em; }
.lnav-seq { display: flex; gap: .9rem; white-space: nowrap; }

/* --- Masthead --- */
.eyebrow {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .4rem;
}
h1 { font-size: 2.05rem; line-height: 1.12; margin: 0 0 .3rem; font-weight: 700; }
.subtitle { color: var(--muted); font-style: italic; font-size: 1.12rem; margin: 0 0 1.6rem; }
.lede { font-size: 1.18rem; line-height: 1.5; }

h2 {
  font-size: 1.3rem; margin: 2.4rem 0 .6rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .25rem;
}
h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
p { margin: .7rem 0; }
strong { font-weight: 700; }
em.key { font-style: normal; background: linear-gradient(transparent 62%, rgba(201,168,106,.30) 62%); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(201,168,106,.35); }
a:hover { border-bottom-color: var(--accent); }

/* --- Citations (superscript links to sources) --- */
sup.cite { font-size: .68rem; line-height: 0; }
sup.cite a { border: none; font-weight: 700; }

/* --- Spectrum / comparison table --- */
table.compare { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .9rem; }
table.compare th, table.compare td {
  border: 1px solid var(--rule); padding: .5rem .6rem; vertical-align: top; text-align: left;
}
table.compare th { background: var(--panel); font-family: system-ui, sans-serif; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; }
table.compare td:first-child { font-weight: 700; white-space: nowrap; }

/* --- Callout panels --- */
.panel {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: .9rem 1.1rem; margin: 1.3rem 0; border-radius: 0 4px 4px 0;
}
.panel h3 { margin-top: 0; }
.panel.tip { border-left-color: var(--good); }

/* --- Three-lens grid (individual / leadership / org) --- */
.lenses { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 1.2rem 0; }
@media (min-width: 640px) { .lenses { grid-template-columns: repeat(3, 1fr); } }
.lens { border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: .8rem .9rem;
  border-radius: 0 0 4px 4px; background: #26272b; }
.lens h4 { margin: 0 0 .35rem; font-family: system-ui, sans-serif; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.lens p { font-size: .92rem; margin: .3rem 0; }

/* --- Footer / navigation --- */
.lesson-foot { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem;
  font-size: .92rem; color: var(--muted); }
.lesson-foot a { font-weight: 600; }
.ask { font-style: italic; }

/* --- Code + worked examples --- */
pre { background:#15161a; border:1px solid var(--rule); border-radius:5px; padding:.7rem .9rem;
  overflow-x:auto; font-size:.82rem; line-height:1.45; margin:.5rem 0; color:#cdd0c8; }
code { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; font-size:.85em; }
:not(pre) > code { background:#15161a; border:1px solid var(--rule); border-radius:3px; padding:.05rem .3rem; }
pre code { background:none; border:none; padding:0; }
.cap { font-size:.78rem; color:var(--muted); font-style:italic; margin:.15rem 0 1rem; }

/* "One task, N dial settings" ladder of worked examples */
.ladder { margin:1.2rem 0; }
.rung { border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:0 5px 5px 0;
  padding:.75rem .95rem; margin:.6rem 0; }
.rung h4 { margin:0 0 .35rem; font-family:system-ui,sans-serif; font-size:.85rem; letter-spacing:.02em; }
.rung .tag { font-size:.72rem; color:var(--muted); font-style:italic; font-weight:400; }
.rung.now { border-left-color: var(--accent); background: var(--panel); }
.rung.now h4 { color: var(--accent); }
.rung p { margin:.3rem 0; font-size:.95rem; }

/* --- Governance layer (reusable overlay across every lesson) --- */
/* Blue = governance / runtime axis, to stay visually distinct from gold = build axis. */
.gov-layer { background:#1b2127; border:1px solid #2f3a44; border-left:3px solid #5f93b4;
  border-radius:0 5px 5px 0; padding:.9rem 1.1rem; margin:1.4rem 0; }
.gov-layer h3 { margin-top:0; color:#82b3d1; }
.gov-layer .badge { display:inline-block; font-family:system-ui,sans-serif; font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:#82b3d1; margin-bottom:.2rem; }
.pillar { font-family:ui-monospace,monospace; font-size:.78rem; background:#15161a;
  border:1px solid var(--rule); border-radius:3px; padding:.04rem .35rem; white-space:nowrap; }

/* Two-axis readiness map: build dial (cols) x governance ladder (rows) */
table.readiness { border-collapse:collapse; width:100%; margin:1.1rem 0; font-size:.78rem;
  font-family:system-ui,sans-serif; }
table.readiness th, table.readiness td { border:1px solid var(--rule); padding:.45rem .5rem;
  text-align:center; vertical-align:middle; }
table.readiness th { background:var(--panel); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; }
table.readiness .rowlab { background:var(--panel); text-align:right; white-space:nowrap; font-size:.72rem; }
table.readiness td.danger { background:#2c2020; border-color:var(--bad);  color:#e6b3b3; font-weight:600; }
table.readiness td.safe   { background:#1e2a22; border-color:var(--good); color:#a9d9bb; font-weight:600; }
table.readiness td.warn   { background:#2a2620; color:#d8c89a; }

/* --- Free-recall reveal (synthesis checkpoints) — native <details>, no JS --- */
details.recall { border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 5px 5px 0; padding:.7rem .95rem; margin:.8rem 0; background:var(--panel); }
details.recall > summary { cursor:pointer; font-weight:700; color:var(--accent); list-style:none; }
details.recall > summary::-webkit-details-marker { display:none; }
details.recall > summary::before { content:"▸ "; }
details.recall[open] > summary::before { content:"▾ "; }
details.recall > summary .hint { font-weight:400; font-style:italic; font-size:.82rem; color:var(--muted); }
details.recall .ans { margin-top:.6rem; }

/* --- Quiz widget (assets/quiz.js) --- */
.quiz-q { margin: 1.3rem 0; }
.quiz-q .q { font-weight: 700; margin-bottom: .5rem; }
.quiz-q .options { list-style: none; padding: 0; margin: 0; }
.quiz-q .options li {
  border: 1px solid var(--rule); border-radius: 5px; padding: .55rem .75rem;
  margin: .4rem 0; cursor: pointer; font-size: .95rem; transition: background .12s, border-color .12s;
}
.quiz-q .options li:hover:not(.locked) { background: var(--panel); }
.quiz-q .options li.locked { cursor: default; }
.quiz-q .options li.correct   { border-color: var(--good); background: #1e2a22; }
.quiz-q .options li.correct::after  { content: "  ✓"; color: var(--good); font-weight: 700; }
.quiz-q .options li.incorrect { border-color: var(--bad);  background: #2c2020; }
.quiz-q .options li.incorrect::after { content: "  ✕"; color: var(--bad); font-weight: 700; }
.quiz-q .explain {
  display: none; margin-top: .6rem; font-size: .9rem; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: .7rem;
}
.quiz-q .explain.show { display: block; }

/* --- Print --- */
@media print {
  body { padding: 0; font-size: 11pt; }
  .lnav { display: none; }
  .quiz .options li { cursor: default; }
  a { color: var(--ink); border: none; }
  .no-print { display: none; }
}