/* TopEdu. Graph paper, navy ink, one colour borrowed from a heat map. */
:root {
  color-scheme: light dark;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --ink: #15213b;
  --muted: #5a6478;
  --line: #dcdfe6;
  --grid: rgba(21, 33, 59, 0.045);
  --accent: #c8451f;
  --accent-ink: #ffffff;
  --accent-soft: #fbe9e2;
  --cool: #15616d;
  --cool-soft: #e0f0f1;
  --warn: #8a5a00;
  --warn-soft: #fbf1d9;
  --danger: #a4262c;
  --danger-soft: #fbe6e7;
  --ok: #1d6b3a;
  --ok-soft: #e2f3e7;
  --display: "Newsreader", Georgia, serif;
  --ui: "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 40px);
  --shell: min(calc(100% - 2 * var(--gutter)), 1120px);
  --measure: 66ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1626;
    --surface: #182136;
    --ink: #eef0f5;
    --muted: #a3acbf;
    --line: #2d3850;
    --grid: rgba(238, 240, 245, 0.04);
    --accent: #ef7a50;
    --accent-ink: #1a0f0a;
    --accent-soft: #3b2219;
    --cool: #6cc6cf;
    --cool-soft: #15343a;
    --warn: #e9bf6a;
    --warn-soft: #3a2e12;
    --danger: #f19a9e;
    --danger-soft: #3d1c1f;
    --ok: #7fd49c;
    --ok-soft: #173424;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1626; --surface: #182136; --ink: #eef0f5; --muted: #a3acbf; --line: #2d3850; --grid: rgba(238, 240, 245, 0.04);
  --accent: #ef7a50; --accent-ink: #1a0f0a; --accent-soft: #3b2219; --cool: #6cc6cf; --cool-soft: #15343a;
  --warn: #e9bf6a; --warn-soft: #3a2e12; --danger: #f19a9e; --danger-soft: #3d1c1f; --ok: #7fd49c; --ok-soft: #173424;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px;
  font: 400 16px/1.6 var(--ui);
  overflow-wrap: break-word;
}
a { color: var(--cool); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 600; }
h1 { font: 500 clamp(34px, 6.2vw, 62px)/1.06 var(--display); letter-spacing: -0.01em; }
h2 { font: 500 clamp(25px, 3.4vw, 34px)/1.15 var(--display); }
h3 { font-size: 18px; line-height: 1.3; }
p { margin: 0; }
.shell { width: var(--shell); margin-inline: auto; }
.stack > * + * { margin-top: 13px; }
.stack-lg > * + * { margin-top: 34px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow { color: var(--accent); font: 600 13px/1.4 var(--ui); letter-spacing: 0.04em; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.measure { max-width: var(--measure); }

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); min-height: 60px; }
.site-header .shell { display: flex; align-items: center; gap: 8px 21px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 600 21px/1 var(--display); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 24px; height: 24px; flex: none; }
.site-nav { display: flex; gap: 2px 16px; flex-wrap: wrap; flex: 1; align-items: center; }
.site-nav a { color: var(--muted); font-size: 15px; text-decoration: none; padding: 5px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent); }
.site-nav .end { margin-left: auto; }
.site-footer { margin-top: 89px; border-top: 1px solid var(--line); padding-block: 34px; background: var(--paper); }
.site-footer .shell { display: flex; flex-wrap: wrap; gap: 8px 21px; color: var(--muted); font-size: 14px; }
.site-footer a { color: var(--muted); }

@media (max-width: 640px) {
  .site-header .shell { display: block; padding-block: 13px 8px; }
  .site-nav { margin-top: 8px; }
  .site-nav .end { margin-left: 0; }
  .form-first > :last-child { order: -1; }
}
main { padding-block: 34px 0; }
.page-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 13px; margin-bottom: 34px; }
.page-title h1 { font-size: clamp(30px, 4.6vw, 44px); }

.btn, button { font: 600 15px/1 var(--ui); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 21px;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
.btn:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.btn.quiet:hover { color: var(--ink); border-color: var(--ink); filter: none; }
.btn.danger { color: var(--danger); background: transparent; border-color: var(--danger); }
.btn.danger:hover { color: var(--danger); background: var(--danger-soft); filter: none; }
.btn.small { min-height: 34px; padding: 0 13px; font-size: 14px; }
.link-button { padding: 0; color: var(--cool); background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.panel { padding: 21px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel.tint-accent { background: var(--accent-soft); border-color: transparent; }
.panel.tint-cool { background: var(--cool-soft); border-color: transparent; }
.panel.tint-warn { background: var(--warn-soft); border-color: transparent; }
.grid { display: grid; gap: 21px; }
.grid.two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.split { display: grid; gap: 21px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: start; } }

label { display: block; font-weight: 600; font-size: 14px; }
.hint { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="number"], select, textarea {
  display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 9px 11px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 400 16px/1.4 var(--ui);
}
textarea { min-height: 110px; resize: vertical; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23808896' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 600; font-size: 14px; }
.choice-list { display: grid; gap: 8px; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.choice { display: block; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin-right: 6px; accent-color: var(--accent); }
.choice strong { font-weight: 600; }

.notice { padding: 13px 16px; border-radius: var(--radius); background: var(--cool-soft); font-size: 15px; }
.notice.error { color: var(--danger); background: var(--danger-soft); }
.notice.ok { color: var(--ok); background: var(--ok-soft); }
.notice.warn { color: var(--warn); background: var(--warn-soft); }
.tag { display: inline-block; padding: 2px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.tag.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.tag.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.tag.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.row-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.row-list > li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 13px; }
.empty { padding: 21px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.loading { color: var(--muted); }

/* Landing */
.hero { display: grid; gap: 34px; align-items: center; padding-block: 21px 55px; }
@media (min-width: 860px) { .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 55px; padding-block: 34px 89px; } }
.hero p.lede { max-width: 52ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--muted); }
.figure { margin: 0; }
.figure canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.figure figcaption { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.band { padding-block: 55px; border-top: 1px solid var(--line); }
.band-title { max-width: 720px; margin-bottom: 34px; }
.steps { display: grid; gap: 21px; padding: 0; margin: 0; list-style: none; counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps li { counter-increment: step; padding-top: 13px; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); display: block; margin-bottom: 8px; color: var(--accent); font: 500 28px/1 var(--display); }
.topic-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.topic-link:hover { color: inherit; border-color: var(--ink); }
.topic-number { color: var(--accent); font: 500 21px/1 var(--display); }

/* Topics */
.topic { scroll-margin-top: 13px; }
.topic > p { margin-top: 13px; }
.topic dl { display: grid; gap: 3px 16px; margin: 13px 0 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .topic dl { grid-template-columns: 130px minmax(0, 1fr); } }
.topic dt { color: var(--muted); font-size: 14px; }
.topic dd { margin: 0 0 8px; font-size: 15px; }

/* Conversation */
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.message { max-width: 85%; padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); white-space: pre-wrap; }
.message.mine { align-self: flex-end; background: var(--cool-soft); border-color: transparent; }
.message time, .message .who { display: block; color: var(--muted); font-size: 12px; }
.milestone { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.milestone.done span { color: var(--muted); text-decoration: line-through; }

/* Lab */
.plot { display: block; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.legend { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; }
.legend canvas { flex: 1; height: 12px; min-width: 0; border-radius: 2px; }
.field-readout { display: flex; flex-wrap: wrap; gap: 3px 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

table.simple { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.simple th, table.simple td { padding: 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.simple th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 34px; font-size: 24px; }
.prose p, .prose ul { margin-top: 13px; }
.draft-banner { padding: 13px 16px; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Landing: the hands-on plate */
.try-it { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.try-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 13px; margin-bottom: 10px; }
.readout { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.readout output { color: var(--ink); font-weight: 600; font-size: 18px; }
.figure canvas#hero-field { cursor: grab; touch-action: pan-y; border: 0; }
.figure canvas#hero-field:active { cursor: grabbing; }
.try-controls { margin-top: 13px; gap: 8px 16px; }
.try-controls label { font-size: 13px; font-weight: 500; }
.try-it figcaption strong { color: var(--ink); font-weight: 600; }
.status-note { padding: 11px 14px; color: var(--ink); background: var(--cool-soft); border-radius: var(--radius); font-size: 15px; max-width: 62ch; }
.project-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 13px; }
.project-grid .topic-link { transition: border-color 0.15s, transform 0.15s; }
@media (prefers-reduced-motion: no-preference) { .project-grid .topic-link:hover { transform: translateY(-2px); } }
.project-grid h3 { font: 500 21px/1.2 var(--display); }
.project-grid .tag { align-self: flex-start; white-space: normal; }
.more-link { margin-top: 21px; font-weight: 600; }
.parents-band { background: transparent; }
.cta-band { margin-top: 34px; padding: 55px 21px 34px; text-align: center; border-top: 1px solid var(--line); }
.cta-band .actions { justify-content: center; }

/* How it works and For parents */
.page-hero { padding-block: 21px 34px; max-width: 800px; }
.page-hero .lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--muted); max-width: 60ch; }
.facts { display: grid; gap: 13px 21px; margin: 21px 0 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 2px 0 0; font: 500 21px/1.2 var(--display); }
.timeline { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-left: 2px solid var(--line); }
.timeline > li { position: relative; display: grid; gap: 5px 21px; padding: 0 0 34px 21px; }
.timeline > li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
@media (min-width: 720px) { .timeline > li { grid-template-columns: 120px minmax(0, 1fr); } }
.timeline-weeks { color: var(--accent); font-weight: 600; font-size: 14px; }
.timeline h3 { font: 500 24px/1.2 var(--display); }
.checkpoint { padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }
.example { display: grid; gap: 13px; max-width: var(--measure); padding-left: 21px; margin: 0; }
.check-list { display: grid; gap: 8px; padding: 0; margin: 13px 0 0; list-style: none; }
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before { content: "✓"; position: absolute; left: 3px; color: var(--ok); font-weight: 700; }
.check-list.no-list li::before { content: "✕"; color: var(--danger); }
.faq { display: grid; gap: 0; max-width: 800px; border-top: 1px solid var(--line); }
.faq details { padding: 13px 0; border-bottom: 1px solid var(--line); }
.faq summary, .topic summary { font-weight: 600; cursor: pointer; }
.faq p { margin-top: 8px; color: var(--muted); max-width: var(--measure); }

/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 21px; }
.filter { min-height: 34px; padding: 0 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; font-weight: 500; font-size: 14px; cursor: pointer; }
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.topic-hook { margin-top: 8px; font-size: 18px; line-height: 1.4; max-width: 62ch; }
.topic .small { margin-top: 8px; }
.topic details { margin-top: 13px; }
.topic details > p { margin-top: 13px; }

/* A project's own page: /topedu/research/<id>/ (built by research/guide/build.py) */
.back-link { padding-top: 21px; }
.back-link a::before { content: "← "; }
.facts.facts-text dd { font: 500 16px/1.4 var(--ui); }
.figure-row { display: grid; gap: 21px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.figure-row .figure:only-child { max-width: 640px; }
.nowrap { white-space: nowrap; }
.figure img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.code-block { margin: 0; padding: 13px 16px; overflow-x: auto; font: 400 13px/1.5 var(--mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.prose-tables h3 { margin-top: 13px; }
.prose-tables table.simple th[scope], .prose-tables table.simple tr > th:first-child { width: 30%; }
.topic h2 a { color: inherit; text-decoration: none; }
.topic h2 a:hover { color: var(--accent); }
@media (min-width: 720px) { .band .split { grid-template-columns: 1fr 1fr; } }