/* Teach pages. Hand-written; the pages themselves are generated by tools/teach-build.js.
   One pinned dark theme on screen, like the catalog, and a plain black-on-white print
   stylesheet so worksheets photocopy cleanly. System fonts only: these pages load
   nothing from any other origin. */

:root {
  color-scheme: dark;
  --bg: #071016;
  --panel: #0b1821;
  --panel-strong: #0d1d27;
  --border: #25384a;
  --text: #c8d9e5;
  --text-dim: #9db2c1;
  --text-hi: #f2f8fb;
  --teal: #35d6bb;
  --amber: #ffb84d;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

html { background-color: var(--bg); }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--text-hi); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

code, pre { font-family: var(--mono); font-size: 0.92em; }
code { background-color: var(--panel-strong); padding: 0.05em 0.3em; border-radius: 3px; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  padding: 0.5rem 0.9rem;
  background-color: var(--panel-strong);
  color: var(--text-hi);
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; }

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

/* ---- top bar ---- */
.t-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
  background-color: #060d13;
}
.t-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-hi);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.t-badge {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 6px;
  background-color: #162b2a;
  color: #4dcfb0;
  font-weight: 700;
  letter-spacing: 0;
}
.t-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.t-crumbs li + li::before { content: "/"; color: var(--text-dim); margin-right: 0.4rem; }
.t-crumbs [aria-current] { color: var(--text-hi); }

/* Exhibit nav — carried by every worksheet and every sequence row. Wraps to one
   item a line on a narrow screen rather than scrolling sideways. */
.t-exnav { margin: 1rem 0; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 6px; }
.t-exnav p { margin: 0 0 0.2rem; font-size: 0.9rem; }
.t-exnav-where { color: var(--text-dim); }
.t-exnav-what { color: var(--text-hi); font-weight: 600; }
.t-exnav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.t-exnav-links li { margin: 0; }
.t-exnav-here { color: var(--text-hi); font-weight: 600; }
.t-exnav-off { color: var(--text-dim); }
.t-exnav-meeting { color: var(--text-dim); font-size: 0.85em; }
.t-row-nav td { padding-top: 0; }
/* Inside a sequence row the nav must not be what makes the table wider than the
   page. It carries no border or side padding there, and long exhibit titles are
   allowed to break rather than hold a line open. CI caught this at 390px as a
   six-pixel sideways scroll that a local run did not reproduce. */
.t-row-nav .t-exnav { margin: 0.2rem 0 0.4rem; padding: 0; border: 0; min-width: 0; }
.t-exnav, .t-exnav p, .t-exnav-links { min-width: 0; overflow-wrap: anywhere; }
/* The syllabus line now ends in a URL, and a URL is one unbreakable token. It
   fits at 390px in a local Chromium and not under CI's fallback font metrics,
   which is what a six-pixel sideways scroll on the module page turned out to be.
   Let it break rather than hold the page open. */
.t-syllabus-line { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .t-exnav-links { flex-direction: column; gap: 0.35rem; }
}

/* ---- layout ---- */
.t-main {
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem;
}
.t-main h1, .t-main h2, .t-main h3 { color: var(--text-hi); line-height: 1.25; }
.t-main h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0.2rem 0 0.6rem; }
.t-main h2 { font-size: 1.35rem; margin: 2.4rem 0 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.t-main h3 { font-size: 1.08rem; margin: 1.6rem 0 0.4rem; }
.t-main p, .t-main li { max-width: 72ch; }
.t-eyebrow {
  margin: 0;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-eyebrow a { color: var(--amber); }
.t-lede { font-size: 1.1rem; color: var(--text); margin: 0; }

.t-toc ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; padding: 0; margin: 1.6rem 0 0; list-style: none; }

.t-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; margin: 1.4rem 0 0; }
/* A long value (an audience sentence, say) takes the whole row rather than wrapping to a
   few words a line inside one grid track. */
.t-fact-wide { grid-column: 1 / -1; }
.t-facts div { border: 1px solid var(--border); background-color: var(--panel); padding: 0.7rem 0.9rem; }
.t-facts dt { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.t-facts dd { margin: 0.2rem 0 0; }

/* Ready to teach: the same definition-list shape as the facts above it, given its own
   surround so it reads as a panel to decide from rather than more prose to work
   through. Each value is a sentence, so the tracks are wider than the facts grid's —
   a two-word column here would be the crushed-prose defect the layout check exists
   for. Every row is derived in teach-build.js; nothing in it is hand-written. */
.t-ready { border: 1px solid var(--accent); background-color: var(--panel); padding: 0.9rem 1.1rem 1.1rem; margin: 1.6rem 0 0; }
.t-ready > h2 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-hi); border: 0; }
.t-ready-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0.7rem; margin: 0.8rem 0 0; }
.t-ready-list div { border: 1px solid var(--border); padding: 0.6rem 0.8rem; }
.t-ready-list dt { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.t-ready-list dd { margin: 0.2rem 0 0; }

.t-modules { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.t-module { border: 1px solid var(--border); background-color: var(--panel); padding: 1rem 1.2rem; }
.t-module h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.t-module p { margin: 0.4rem 0 0; }
.t-meta { color: var(--text-dim); font-size: 0.95rem; }
.t-meta strong { color: var(--text); }
.t-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  padding: 0 0.3rem;
  color: var(--text-dim);
}

.t-table { position: relative; overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); }
.t-table table, .ws-table table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
/* A table with a prose column must not be squeezed until its text breaks every two or three
   words. Below this width the table keeps its measure and its own labelled region scrolls,
   which is why .t-table is focusable. */
.t-table table, .ws-table table { min-width: 34rem; }
.t-table th, .t-table td, .ws-table th, .ws-table td { min-width: 7rem; }
/* The row header carries the prose; the answer columns carry a tick or a short note. A
   7rem floor is right for an answer column and far too narrow for a sentence, and giving
   both the same floor is what squeezed one row header in a record table down to about
   twenty characters a line. The first column gets a measure of its own, and the table
   grows past its own min-width and scrolls in its labelled region, which is what that
   region is for. */
.t-table tbody th[scope="row"], .ws-table tbody th[scope="row"] { min-width: 16rem; }
.t-table th, .t-table td, .ws-table th, .ws-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.t-table thead th, .ws-table thead th { background-color: var(--panel-strong); color: var(--text-hi); font-size: 0.85rem; }
.t-tight { margin: 0; padding-left: 1.1rem; }
/* The sentence describing an exhibit runs the width of the table, under its row. */
.t-row-note td { border-top: 0; padding-top: 0; color: var(--text-lo); }
/* And its citation runs under that, in the same full-width shape. */
.t-row-cite td { border-top: 0; padding-top: 0; font-size: 0.9rem; color: var(--text-lo); }
.t-cite-label { font-weight: 600; }
.t-pick { margin: 0.35rem 0; }
.t-pick > summary { cursor: pointer; }
.t-foot-licence { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--text-lo); max-width: 72ch; }
.t-attrib { font-style: italic; }
.t-attrib-block { padding: 0.6rem 0.8rem; border-left: 3px solid var(--accent); background: var(--panel); }
.t-dated { display: block; color: var(--text-dim); font-size: 0.85rem; }
.t-src { color: var(--text-dim); font-family: var(--mono); font-size: 0.85rem; }
.t-pending { color: var(--text-dim); font-style: italic; }

.t-callout, .t-disclaimer {
  border-left: 3px solid var(--amber);
  background-color: var(--panel);
  padding: 0.7rem 1rem;
  margin: 1rem 0;
}

.t-syllabus { border: 1px solid var(--border); background-color: var(--panel); padding: 1rem 1.2rem; }
.t-syllabus-line { font-size: 1.05rem; color: var(--text-hi); margin: 0 0 0.8rem; }
.t-copy-status { margin-left: 0.6rem; color: var(--teal); }

.t-btn {
  display: inline-block;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--teal);
  background-color: #0e2a27;
  color: var(--text-hi);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.t-btn:hover { background-color: #134039; color: var(--text-hi); }
.t-btn--ghost { background-color: transparent; border-color: var(--border); }
.t-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0; }

.t-cite { margin: 0.4rem 0; }
.t-cites { padding-left: 1.2rem; }
.t-cites--all { list-style: none; padding: 0; }
.t-pre {
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--panel-strong);
  border: 1px solid var(--border);
  padding: 0.8rem 1rem;
}
.t-details { border: 1px solid var(--border); padding: 0.6rem 1rem; margin: 1rem 0; }
.t-details summary { cursor: pointer; color: var(--text-hi); }

/* ---- worksheets ---- */
.ws-body h2 { text-transform: none; }
.ws-answer > li { margin-bottom: 0.4rem; }
.ws-answer > li::after {
  content: "";
  display: block;
  height: 3.2rem;
  margin-top: 0.3rem;
  border-bottom: 1px dashed var(--border);
}
.ws-table { position: relative; overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); }
.ws-blank { min-width: 7rem; height: 2.4rem; }
.ws-note { border-left: 3px solid var(--teal); padding: 0.4rem 1rem; background-color: var(--panel); }
.print-only { display: none; }

/* ---- footer ---- */
.t-foot {
  border-top: 1px solid var(--border);
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  color: var(--text-dim);
}
.t-foot-links { margin: 0 0 1rem; }
.t-quote { margin: 0; }
.t-quote p { margin: 0; color: var(--text-hi); font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.t-quote cite { color: var(--teal); font-style: normal; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---- print: black on white, no chrome, room to write ---- */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; }
  .t-top, .t-foot, .t-toc, .no-print, .skip-link, .t-actions { display: none !important; }
  .print-only { display: flex !important; }
  .t-main { max-width: none; padding: 0; }
  .t-main h1, .t-main h2, .t-main h3, .t-syllabus-line, .t-quote p { color: #000 !important; }
  .t-main h2 { border-top: 1px solid #000; break-after: avoid; }
  a { color: #000; }
  code, .t-facts div, .t-callout, .t-disclaimer, .ws-note, .t-table thead th, .ws-table thead th, .t-pre, .t-syllabus {
    background: #fff !important; color: #000 !important; border-color: #000 !important;
  }
  .t-table, .ws-table { overflow: visible; border-color: #000; }
  .t-table table, .ws-table table { min-width: 0; }
  .t-table th, .t-table td, .ws-table th, .ws-table td { border: 1px solid #000; }
  .ws-blank { height: 2.2rem; }
  .ws-answer > li::after { height: 4.5rem; border-bottom: 1px solid #000; }
  /* A worksheet's sections are what a student works through in order, so each one
     starts at the top of a page rather than wherever the previous one happened to end.
     The first keeps the heading block company on page one. */
  .ws-sec { break-inside: avoid-page; }
  .ws-body .ws-sec + .ws-sec { break-before: page; }
  /* Every worksheet in a module hand-out starts on its own page. */
  .ws-handout + .ws-handout { break-before: page; }
  /* On paper a link cannot be followed, so it has to say where it goes. Only real
     destinations: an in-page jump would print its own fragment and say nothing. */
  .ws-body a[href^="http"]::after, .t-facts a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .ws-student { gap: 3rem; margin: 0 0 1rem; }
  .ws-student span { flex: 1; border-bottom: 1px solid #000; padding-bottom: 1.2rem; }
}