/* Stepsies brand: electric purple, coral, teal. Poppins. */
:root {
  --p-50: #f5f3ff;
  --p-100: #ede9fe;
  --p-200: #ddd6fe;
  --p-300: #c4b5fd;
  --p-400: #a78bfa;
  --p-500: #8b5cf6;
  --p-600: #7c3aed;
  --p-700: #6d28d9;
  --p-900: #4c1d95;
  --s-100: #ffedd5;
  --s-500: #f97316;
  --s-600: #ea580c;
  --a-500: #14b8a6;
  --ink: #1f1637;
  --body: #4b4563;
  --muted: #6b6580;
  --line: #e9e5f5;
  --bg: #fcfbff;
  --card: #fff;
  --ok: #4d7c0f;
  --ok-bg: #ecfccb;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --radius: 18px;
  --shadow: 0 1px 2px rgb(76 29 149 / 0.06), 0 8px 24px -12px rgb(76 29 149 / 0.18);
  --tone: var(--p-600);
  --tone-bg: var(--p-100);
}

.tone-purple { --tone: #7c3aed; --tone-bg: #ede9fe; --tone-ink: #7c3aed; }
.tone-orange { --tone: #ea580c; --tone-bg: #ffedd5; --tone-ink: #c2410c; }
.tone-teal { --tone: #0d9488; --tone-bg: #ccfbf1; --tone-ink: #0f766e; }
.tone-pink { --tone: #db2777; --tone-bg: #fce7f3; --tone-ink: #be185d; }
.tone-amber { --tone: #b45309; --tone-bg: #fef3c7; --tone-ink: #b45309; }
.tone-lime { --tone: #4d7c0f; --tone-bg: #ecfccb; --tone-ink: #4d7c0f; }
.tone-blue { --tone: #2563eb; --tone-bg: #dbeafe; --tone-ink: #2563eb; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--p-600); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; }
button { cursor: pointer; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--p-600); cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--p-400);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: #fff;
  padding: 8px 12px;
}

.icon { flex: none; vertical-align: -0.2em; }
.mascot { flex: none; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}
.site-nav > a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav > a:hover { color: var(--p-600); }
/* The account button keeps the button's white text: the link colours above would put dark text on purple. */
.site-nav > a.btn,
.site-nav > a.btn:hover { color: #fff; }
.nav-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 40px;
  width: min(300px, 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
}
.nav-search:focus-within { border-color: var(--p-400); }
.nav-search input,
.hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  color: var(--ink);
}

/* Buttons and chips */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--p-600);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: var(--p-700); }
.btn:active { transform: scale(0.98); }
.btn-soft { background: var(--p-100); color: var(--p-700); }
.btn-soft:hover { background: var(--p-200); }
.text-link { font-weight: 600; font-size: 0.95rem; }

.pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--s-100);
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 600;
}
a.pill { text-decoration: none; }
a.pill:hover { background: #fed7aa; }
/* The home page line: square corners. */
.home-pill .pill { border-radius: 0; }
/* The header button: both labels in the page, one shown (html[data-me], set in the head and by account.js). */
.account-in { display: none; }
html[data-me='in'] .account-in { display: inline-block; }
html[data-me='in'] .account-out { display: none; }
/* The My Dashboard menu: a details element, so it opens without JavaScript; account.js closes it on a click outside. */
.account-menu { position: relative; }
.account-menu summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: #fff; white-space: nowrap; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary .icon { transition: transform 0.15s; }
.account-menu[open] summary .icon { transform: rotate(180deg); }
.account-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.account-menu-list a, .account-menu-list button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-list a:hover, .account-menu-list button:hover { background: var(--p-50); color: var(--p-700); }
.account-menu-list form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.account-menu-list button:disabled { color: var(--muted); cursor: default; background: none; }
/* A label that changes after the page appears fades in, rather than jumping. */
@keyframes swap-in { from { opacity: 0; } }
.swap-in { animation: swap-in 0.2s ease-out; }

.chip {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--body);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--p-300); }
.chip[aria-pressed='true'],
.chip[aria-current] {
  background: var(--p-600);
  border-color: var(--p-600);
  color: #fff;
}
.filters {
  display: flex;
  gap: 8px;
  margin: 24px -20px;
  padding: 2px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Pages with a browse column: the main column first in the HTML, the column beside it (home and grade pages) */
.side-layout {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding-top: 28px;
  padding-bottom: 72px;
}
.side-main { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.side-main > section > .section-head { margin-bottom: 20px; }
/* The column's gap spaces its sections; their own top margins would double it. */
.side-layout > .side-main > * { margin-top: 0; }
.side-main .page-hero { margin-bottom: 0; }
.home-hero {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(700px 320px at 100% 0%, #ede9fe 0%, transparent 70%), radial-gradient(500px 260px at 0% 100%, #ffedd5 0%, transparent 70%), #fff;
}
.home-hero h1 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  margin: 16px 0;
  text-wrap: balance;
}
.home-hero h1 em {
  font-style: normal;
  color: var(--p-600);
}
.home-tries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.home-tries .chip { font-size: 0.85rem; padding: 6px 13px; }
.home-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.home-skill { display: grid; gap: 2px; padding: 14px 16px; text-decoration: none; }
.home-skill strong { color: var(--ink); font-weight: 600; }
.home-skill:hover { border-color: var(--p-300); }
.home-skill .meta { color: var(--muted); font-size: 0.82rem; }
.home-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.home-why h3 { margin: 0 0 6px; font-size: 1rem; }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px 32px; border-radius: var(--radius); background: linear-gradient(135deg, #ede9fe, #ffedd5); }
.home-cta > div { flex: 1 1 360px; }
.home-cta h2 { font-size: 1.4rem; margin: 0 0 4px; }
.home-cta p { margin: 0; font-size: 0.95rem; }

.side-col {
  flex: 1 1 260px;
  max-width: 100%;
  display: grid;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
}
.side-section { display: grid; gap: 2px; }
.side-section h2 { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.side-link,
.side-group summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; color: var(--body); text-decoration: none; }
.side-link:hover,
.side-group summary:hover { background: var(--p-50); color: var(--p-700); }
.side-group-link,
.side-group summary { font-weight: 600; }
.side-group summary { cursor: pointer; list-style: none; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary > span:first-child::before { content: '›'; display: inline-block; width: 14px; color: var(--muted); transition: transform 0.15s; }
.side-group[open] summary > span:first-child::before { transform: rotate(90deg); }
.side-group-link > span:first-child { padding-left: 14px; }
.side-count { flex: none; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.side-group ul { margin: 0; padding: 2px 0 8px 34px; list-style: none; display: grid; gap: 2px; }
.side-group li a { display: block; padding: 3px 0; color: var(--body); text-decoration: none; }
.side-group li a:hover { color: var(--p-700); }
a.side-all { color: var(--p-700); font-weight: 500; }
.side-current { background: var(--p-100); color: var(--p-700); font-weight: 600; }
/* The home page's side column: grades in a grid, one subject open at a time (details name="side-subject"), curricula as chips by country. */
.home-side { gap: 0; }
.home-side .side-section + .side-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.home-side .side-section h2 { margin-bottom: 10px; color: var(--ink); font-size: 0.78rem; font-weight: 700; }
.side-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.side-grades a { padding: 7px 0; border: 1px solid var(--line); border-radius: 8px; color: var(--body); font-weight: 600; text-align: center; text-decoration: none; }
.side-grades a:first-child { grid-column: 1 / -1; }
.side-grades a:hover { border-color: var(--p-300); background: var(--p-50); color: var(--p-700); }
.side-subject + .side-subject { margin-top: 6px; }
.side-subject > summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.side-subject > summary::-webkit-details-marker { display: none; }
.side-subject > summary::after { content: '›'; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform 0.15s; }
.side-subject > summary:hover { background: var(--p-50); }
.side-subject[open] > summary { background: var(--p-50); color: var(--p-700); }
.side-subject[open] > summary::after { transform: rotate(90deg); }
.side-subject[open] > summary + * { margin-top: 4px; }
.home-side .side-group summary, .home-side .side-group-link { font-weight: 500; }
.side-place + .side-place { margin-top: 12px; }
.side-place h3 { margin: 0 0 6px; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.side-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.side-chips .chip { padding: 4px 10px; font-size: 0.8rem; }
.home-side .side-section > a.side-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; text-decoration: none; }

/* Skill hub page (src/views/hubs.tsx, HubPage) */
.grade-head .page-title { margin-top: 6px; }
.hub-grades { align-items: center; margin-top: 16px; color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.hub-h2 { font-size: 1.4rem; margin: 0 0 16px; }
.hub-h2 a { color: inherit; text-decoration: none; }
.hub-h2 a:hover { color: var(--p-600); }
.hub-sheets { display: grid; gap: 40px; scroll-margin-top: 16px; }
.hub-about > p { max-width: 75ch; }
.hub-about .hub-notes { margin-top: 20px; }
.hub-about h3 { font-size: 1.1rem; margin: 0 0 10px; }
.holiday-words { max-width: 75ch; padding: 14px 18px; border-radius: 12px; background: var(--p-50); line-height: 1.8; }
.hub-source { font-size: 0.9rem; color: var(--muted, #555); }
#levels, #tips, #curriculum, #about { scroll-margin-top: 16px; }

/* Grades page (src/views/navigation.tsx, GradesPage) */
.grades-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.grade-card { display: grid; gap: 14px; padding: 18px 20px; }
.grade-card-head { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.grade-card-head h2 { margin: 0; font-size: 1.1rem; color: var(--ink); }
.grade-card-head:hover h2 { color: var(--p-700); }
.grade-card-head .meta { color: var(--muted); font-size: 0.85rem; }
.grade-badge { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--p-100); color: var(--p-600); font-size: 1.6rem; font-weight: 700; }
.grade-card .chips .chip { font-size: 0.82rem; padding: 5px 12px; }
.grade-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.grade-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.grade-card li a { padding: 3px 0; color: var(--body); text-decoration: none; font-size: 0.93rem; }
.grade-card li a:hover { color: var(--p-700); }
.grade-card > .text-link { text-decoration: none; font-size: 0.9rem; }

/* Grade page (src/views/hubs.tsx, GradeLandingPage) */
.grade-head h1 { margin: 6px 0 10px; }
.grade-head .chips { margin: 16px 0 0; }
.grade-subject { font-size: 1.5rem; margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px; }
.grade-subject span { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
/* Columns, not a grid: the groups differ a lot in length, and a grid row is as tall as its longest card. */
.grade-groups { columns: 3 240px; column-gap: 16px; }
.grade-group { padding: 16px 18px; margin-bottom: 16px; break-inside: avoid; scroll-margin-top: 16px; }
.grade-group h3 { margin: 0 0 8px; font-size: 1.02rem; }
.grade-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.grade-group li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.grade-group li a { padding: 3px 0; color: var(--body); text-decoration: none; font-size: 0.93rem; }
.grade-group li a:hover { color: var(--p-700); }

.lead {
  font-size: 1.08rem;
  color: var(--body);
  max-width: 60ch;
}
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 6px 6px 6px 18px;
  max-width: 560px;
  border: 2px solid var(--p-200);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.hero-search:focus-within { border-color: var(--p-500); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 20px;
}

.path-card {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -28px rgb(76 29 149 / 0.45);
}
.path-mascot {
  position: absolute;
  top: -58px;
  right: 14px;
}
.path-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-right: 96px;
}
.path-steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--p-50);
  color: var(--p-700);
  font-size: 0.8rem;
  font-weight: 600;
}
.path-steps li:last-child { background: var(--p-600); color: #fff; }
.path-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.93rem;
  text-decoration: none;
}
.path-list a span:nth-child(2) { flex: 1; }
.path-list a > .icon { color: var(--p-300); }
.path-list a:hover { background: var(--p-50); }
.path-list li + li { border-top: 1px solid var(--line); }

.type-icon,
.subject-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--tone-bg);
  color: var(--tone);
}
.subject-icon { width: 48px; height: 48px; border-radius: 14px; }
.path-list .type-icon,
.side .type-icon { width: 32px; height: 32px; border-radius: 10px; }

/* Sections */
.section { padding: 64px 0; }
.section-tint { background: #f7f5fe; }
.section-head { margin-bottom: 28px; }
.section-head p { margin-top: 6px; color: var(--muted); }

.page { padding-top: 22px; padding-bottom: 72px; }
/* The pages are wider than a comfortable line of text: running text keeps its own measure. */
.page p, .page li { max-width: 80ch; }
.page > h1 + .lead { margin: 8px 0 28px; }

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.card:hover {
  transform: translateY(-2px);
  border-color: var(--tone);
  box-shadow: var(--shadow);
}
.card p { font-size: 0.92rem; }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.grade-tile {
  display: grid;
  gap: 2px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--tone-bg);
  color: var(--tone);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.grade-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.grade-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.grade-more span { font-weight: 600; margin-right: 4px; }
.grade-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.grade-num { font-size: 3rem; font-weight: 700; line-height: 1; }
.grade-sub { font-size: 0.82rem; font-weight: 500; opacity: 0.85; margin-top: 6px; }

.subject-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 40px;
}
.type-chip,
.planned-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.type-chip:hover { border-color: var(--p-400); }
.type-chip strong,
.planned-list strong,
.side strong { display: block; font-size: 0.93rem; font-weight: 600; color: var(--ink); }
.type-chip small,
.planned-list small,
.side small { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

/* Browse pages */
.crumbs { margin-bottom: 18px; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--p-300); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--p-600); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.page-title {
  display: flex;
  /* The icon sits beside the title, not halfway down a long introduction. */
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.page-title .lead { margin-top: 4px; }
.strand {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Small text: the tones too light for 4.5:1 on the page set a darker --tone-ink. */
  color: var(--tone-ink, var(--tone));
}
.topic-card { border-left: 5px solid var(--tone); }
.status {
  align-self: flex-start;
  margin-top: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f1eff8;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}
.status-ready { background: var(--ok-bg); color: var(--ok); }

.resource-card .type-tag,
.resource-head .type-tag {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-600);
}

.grade-block { margin-top: 44px; }
.grade-block > h2 { font-size: 1.3rem; margin-bottom: 16px; }
.grade-block > h2 a { color: inherit; text-decoration: none; }
.grade-block > h2 a:hover { color: var(--p-600); }


.planned-note {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--p-50);
}
.planned-note h2 { font-size: 1.25rem; margin-bottom: 6px; }
.planned-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.planned-list li { opacity: 0.8; border-style: dashed; }

.empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 0;
}

/* Resource page */
.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}
.resource-head { margin-bottom: 22px; }
.resource-head h1 { margin: 4px 0 8px; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}
.toolbar .meta { margin: 0; padding: 0; }

.side {
  position: sticky;
  top: 84px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.side h2 { font-size: 1rem; margin-bottom: 8px; }
.side li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  text-decoration: none;
}
.side li a:hover { background: var(--p-50); }
.side .text-link { display: inline-block; margin-top: 12px; font-size: 0.88rem; }

.sheet {
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  color: #2b2640;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--p-500);
}
.sheet-head strong { display: block; font-size: 1.3rem; color: var(--ink); line-height: 1.25; }
.sheet-context { font-size: 0.78rem; font-weight: 600; color: var(--p-600); }
.name-date { display: grid; gap: 10px; flex: none; font-size: 0.85rem; }
.name-date span {
  display: block;
  width: 190px;
  border-bottom: 1px solid #9ca3af;
  padding-bottom: 2px;
}
.sheet-foot {
  margin-top: 36px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

.sheet h2 { font-size: 1.2rem; margin: 30px 0 10px; }
.sheet > h2:first-of-type,
.sheet > .qblock:first-of-type > h2 { margin-top: 0; }
.sheet p { margin: 0 0 12px; }
.sheet > ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.sheet > ul li { margin-bottom: 6px; }
.sheet > ul li::marker { color: var(--p-500); }

.table-scroll { overflow-x: auto; margin: 0 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--p-50); color: var(--ink); font-weight: 600; }
tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }

.callout {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 5px solid var(--s-500);
  border-radius: 0 12px 12px 0;
  background: #fff7ed;
}
.callout strong { color: #9a3412; }
.callout p { margin: 2px 0 0; }

.checklist li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.box { flex: none; width: 18px; height: 18px; margin-top: 4px; border: 2px solid var(--p-400); border-radius: 5px; }

.figure { margin: 8px 0 22px; text-align: center; }
.cell-diagram { width: 100%; max-width: 380px; height: auto; font-family: inherit; }
.figure figcaption { font-size: 0.85rem; color: var(--muted); }

.instructions { font-style: italic; color: var(--body); }
.bank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--p-300);
  border-radius: 12px;
}
.bank strong { margin-right: 4px; color: var(--ink); font-size: 0.85rem; }
.bank span { padding: 1px 10px; border-radius: 999px; background: var(--p-50); font-size: 0.9rem; }

.questions { list-style: decimal; padding-left: 26px; }
.questions > li { margin-bottom: 18px; padding-left: 4px; break-inside: avoid; }
.questions > li::marker { font-weight: 600; color: var(--ink); }
.questions.compact { columns: 2; column-gap: 32px; }
.questions.compact > li { margin-bottom: 10px; }
.qtext { margin-bottom: 8px !important; color: var(--ink); }
.marks { margin-left: 8px; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.lines span { display: block; height: 30px; border-bottom: 1px solid #b6b3c4; }
.blank {
  display: inline-block;
  min-width: 46px;
  margin-right: 10px;
  border-bottom: 1px solid #6b7280;
  text-align: center;
}
.answer { color: var(--p-700); font-weight: 600; }
p.answer { padding: 8px 12px; border-radius: 10px; background: var(--p-50); font-weight: 500; }
.blank.answer { border-color: var(--p-500); }

.match { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px 32px; }
.match ol { padding-left: 26px; }
.match-terms { list-style: decimal; }
.match-defs { list-style: upper-alpha; }
.match li { margin-bottom: 10px; }
.match li::marker { font-weight: 600; color: var(--ink); }

.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.option input { position: absolute; opacity: 0; pointer-events: none; }
.letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid #9ca3af;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
[data-quiz] .option:hover { border-color: var(--p-300); }
.option:has(input:checked) { border-color: var(--p-500); background: var(--p-50); }
.option:has(input:checked) .letter { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.option:has(input:focus-visible) { outline: 3px solid var(--p-400); outline-offset: 2px; }
.option:has(input:disabled) { cursor: default; }
.options .option.correct { border-color: #65a30d; background: var(--ok-bg); }
.options .option.correct .letter { background: #65a30d; border-color: #65a30d; color: #fff; }
.options .option.wrong { border-color: #ef4444; background: var(--bad-bg); }
.options .option.wrong .letter { background: #ef4444; border-color: #ef4444; color: #fff; }
.why { margin: 8px 0 0 !important; font-size: 0.9rem; color: var(--body); }

.quiz-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.quiz-score { margin: 0 !important; font-weight: 600; color: var(--ink); }

.key-group + .key-group { margin-top: 36px; padding-top: 28px; border-top: 2px dashed var(--line); }
.sheet .key-title { font-size: 1.35rem; margin: 0 0 18px; }
.key-title a { color: var(--p-700); text-decoration: none; }
.key-group .qblock h2 { font-size: 1.05rem; margin-top: 22px; }

/* Footer */
.site-footer {
  padding: 48px 0 28px;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: 0.9rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-grid p { margin-top: 10px; max-width: 32ch; color: var(--muted); }
.site-footer h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.site-footer li { margin-bottom: 6px; }
.site-footer li a { color: var(--body); text-decoration: none; }
.site-footer li a:hover { color: var(--p-600); }
.footer-grades { columns: 2; }
.footer-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.footer-note nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-note a { color: var(--muted); }
.footer-note a:hover { color: var(--p-600); }

/* About, Contact, Privacy, Terms */
.prose > * { max-width: 68ch; }
.prose h2 { margin: 32px 0 10px; font-size: 1.25rem; }
.prose p, .prose li { line-height: 1.65; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 1.2em; display: grid; gap: 8px; list-style: disc; }
.prose .updated { color: var(--muted); font-size: 0.9rem; }
.prose .contact-email { font-size: 1.2rem; font-weight: 600; }
.prose .operator-line { margin-top: 40px; color: var(--muted); font-size: 0.85rem; }
.operator { display: inline-block; height: 1.4em; width: auto; vertical-align: -0.38em; }

/* Tablet and phone */
@media (max-width: 900px) {
  .resource-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .section { padding: 48px 0; }

  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 20px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav > a { padding: 10px 0; font-size: 1rem; }
  .site-nav > a.btn { margin-top: 8px; padding: 12px 20px; }
  .account-menu { margin-top: 8px; }
  .account-menu summary { padding: 12px 20px; }
  .account-menu-list { position: static; margin-top: 8px; box-shadow: none; }
  .nav-search { margin: 8px 0 0; width: 100%; height: 46px; }
}

@media (max-width: 640px) {
  .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-num { font-size: 2.4rem; }
  .hero-search .btn { padding: 10px 16px; }
  .options, .match { grid-template-columns: minmax(0, 1fr); }
  .questions.compact { columns: 1; }
  .sheet-head { flex-direction: column; align-items: stretch; }
  .name-date { grid-template-columns: 1fr 1fr; }
  .name-date span { width: auto; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .planned-note { flex-direction: column; text-align: center; }
  .page-title { align-items: flex-start; }
  tbody th { white-space: normal; }
}

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

/* Worksheet catalogue */
.btn-small { padding: 8px 16px; font-size: 0.88rem; }
.btn-big { padding: 14px 26px; font-size: 1.05rem; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.ws-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.ws-card:hover { transform: translateY(-2px); border-color: var(--p-400); box-shadow: var(--shadow); }
.ws-thumb { display: grid; place-items: center; aspect-ratio: 1 / 1.08; padding: 14px; background: var(--p-50); }
.ws-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border: 1px solid #e3def3; box-shadow: 0 3px 10px -4px rgb(31 22 55 / 0.35); }
.ws-card-body { display: grid; gap: 4px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ws-card-body strong { color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.ws-card-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.ws-stars { color: var(--s-500); letter-spacing: 1px; }
.ws-count { color: var(--p-700); font-weight: 600; }
.ws-stack { position: relative; display: block; aspect-ratio: 1 / 1.08; background: var(--p-100); overflow: hidden; }
.ws-stack .ws-thumb { position: absolute; inset: 0; aspect-ratio: auto; padding: 28px; background: none; }
.ws-stack .ws-thumb:nth-child(1) { z-index: 3; }
.ws-stack .ws-thumb:nth-child(2) { z-index: 2; transform: rotate(5deg) translate(9px, -2px); }
.ws-stack .ws-thumb:nth-child(3) { z-index: 1; transform: rotate(-5deg) translate(-9px, -2px); }

.shelf-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.shelf-head h2 { font-size: 1.3rem; }
.section-head.shelf-head h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.shelf-head .text-link { text-decoration: none; white-space: nowrap; }

/* Every select draws its own chevron: the native arrow sits hard against the right edge. */
select {
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.activity-head { margin: 40px 0 14px; }
.activity-head h2 { font-size: 1.2rem; }
.activity-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-group + .skill-group { margin-top: 24px; }
.skill-group h3 { margin: 0 0 12px; font-size: 1.1rem; }
.facet-count { color: var(--muted); font-size: 0.8rem; font-weight: 500; }

.browse-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.browse-head .lead { margin-top: 6px; }
.browse-search { margin-top: 0; flex: 1 1 320px; max-width: 440px; }
.browse { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.browse-single { grid-template-columns: minmax(0, 1fr); }
.facets { position: sticky; top: 84px; }
.facets summary { display: none; }
.facet + .facet { margin-top: 22px; }
.facet h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 6px; }
.facet a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink); font-size: 0.92rem; text-decoration: none; }
.facet a:hover { background: var(--p-50); }
.facet a[aria-current] { background: var(--p-100); color: var(--p-700); font-weight: 600; }
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; font-size: 0.92rem; }
.results-bar strong { color: var(--ink); }
.sorts { display: flex; gap: 4px; align-items: center; color: var(--muted); }
.sorts span { margin-right: 4px; }
.sorts a { padding: 3px 10px; border-radius: 999px; color: var(--body); text-decoration: none; }
.sorts a[aria-current] { background: var(--p-100); color: var(--p-700); font-weight: 600; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; }
.pager a { min-width: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 500; text-align: center; text-decoration: none; }
.pager a:hover { border-color: var(--p-400); }
.pager a[aria-current] { background: var(--p-600); border-color: var(--p-600); color: #fff; }

.ws-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: start; }
.ws-preview { display: grid; gap: 20px; padding: 24px; border-radius: var(--radius); background: var(--p-50); }
.ws-preview figure { margin: 0 auto; width: 100%; max-width: 520px; }
.ws-preview figure.landscape { max-width: none; }
.ws-preview svg, .ws-preview img { display: block; width: 100%; height: auto; border: 1px solid #e3def3; box-shadow: 0 10px 30px -14px rgb(31 22 55 / 0.4); }
.ws-preview figcaption { margin-top: 8px; text-align: center; color: var(--muted); font-size: 0.82rem; }
.ws-info { position: sticky; top: 84px; display: grid; gap: 14px; }
.ws-quick { display: none; }
.ws-download { display: grid; gap: 8px; padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ws-download p { font-size: 0.85rem; color: var(--muted); text-align: center; }
.ws-versions h2, .ws-facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
.ws-versions p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ws-facts { display: grid; gap: 0; margin: 0; }
.ws-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ws-facts dd { margin: 0; color: var(--ink); font-size: 0.93rem; }
/* Teaching handouts (src/views/handouts.tsx), and the link to them on a worksheet's page */
.ws-teach { display: grid; gap: 8px; }
.ws-teach h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
.ws-teach-link { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #99e6dc; border-radius: var(--radius); background: #f0fdfa; color: inherit; text-decoration: none; }
.ws-teach-link:hover { border-color: #0d9488; }
.ws-teach-link strong { color: #0f766e; }
.ws-teach-link span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.handout-shelf-note { margin: -6px 0 16px; color: var(--muted); }
.handout-group + .handout-group { margin-top: 32px; }
.handout-group h2 { font-size: 1.2rem; margin: 0 0 14px; }

.series-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.series-nav a { min-width: 34px; padding: 6px 0; border-radius: 8px; background: var(--p-50); color: var(--p-700); font-weight: 600; text-align: center; text-decoration: none; }
.series-nav a[aria-current] { background: var(--p-600); color: #fff; }

.auth { display: grid; justify-items: center; gap: 12px; max-width: 460px; text-align: center; }
.auth-options { display: grid; gap: 10px; width: 100%; margin: 8px 0; }
.auth-options form { display: grid; }
.auth-email { gap: 10px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.auth-email:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.auth-options label { display: grid; gap: 4px; font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.auth-options input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.auth-options input[aria-invalid] { border-color: var(--bad); }
.auth-error { margin: 0; color: var(--bad); font-size: 0.88rem; }
.auth-small { color: var(--muted); font-size: 0.88rem; }
.auth-why { margin: 0; padding: 10px 16px; border-radius: 12px; background: var(--p-50); color: var(--p-900); font-weight: 500; }
.auth h2 { margin-top: 28px; font-size: 1.1rem; }
/* The sign-in dialog on worksheet and handout pages (shared/_sign_in_dialog.html.erb). It sits near the top and scrolls
   inside itself, so on a phone the email field stays above the keyboard. */
.sign-in-dialog { position: fixed; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 16px auto auto; padding: 0; overflow-y: auto; border: 0; border-radius: var(--radius); background: var(--card); color: var(--body); box-shadow: var(--shadow); }
.sign-in-dialog::backdrop { background: rgb(31 22 55 / 0.5); }
.sign-in-dialog .auth { max-width: none; padding: 28px 22px 20px; }
.sign-in-dialog .auth h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.sign-in-dialog .auth h2:focus { outline: none; }
.sign-in-dialog .auth p { margin: 0; }
.sign-in-dialog .lead { font-size: 1rem; }
.sign-in-dialog .auth-options input { font-size: 1rem; }
.sign-in-for { padding: 6px 14px; border-radius: 12px; background: var(--p-50); color: var(--p-900); font-weight: 600; font-size: 0.93rem; }
.sign-in-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.sign-in-close:hover { background: var(--p-50); color: var(--ink); }
@media (min-height: 760px) and (min-width: 600px) { .sign-in-dialog { margin-top: 8vh; } }
.btn-danger { background: #fff; color: var(--bad); border: 1px solid var(--bad); }
.btn-danger:hover { background: #fef2f2; }

@media (max-width: 900px) {
  .browse { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .facets { position: static; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .facets summary { display: block; font-weight: 600; color: var(--ink); cursor: pointer; }
  .facets details[open] summary { margin-bottom: 12px; }
  .ws-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ws-info { position: static; }
  .ws-quick { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -8px; }
  .ws-quick p { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.25; }
  .ws-quick .btn { flex: none; }
}
@media (max-width: 640px) {
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ws-preview { padding: 12px; }
}

/* What students learn, in our words (no codes: src/data/related.ts) */
.section-title { font-size: 1.3rem; margin: 40px 0 16px; }
.section-note { color: var(--muted); margin: -8px 0 16px; }
.soon-note { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 18px; border-radius: 14px; background: var(--p-50); color: var(--p-700); font-weight: 500; }
.expectations { display: grid; gap: 18px; }
.overall { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; scroll-margin-top: 84px; }
.overall h2 { font-size: 1.15rem; }
.overall-text { margin-top: 8px; color: var(--ink); }
.specific { margin-top: 14px; }
.specific { padding-left: 1.2em; }
.specific li { padding: 6px 0; }
.overall-summary { display: grid; gap: 22px; }
.overall-summary h3 a { color: var(--ink); text-decoration: none; }
.overall-summary h3 a:hover { color: var(--p-600); }
.overall-summary li { margin-top: 8px; padding-left: 0; }
.official-link { font-size: 0.9rem; }
.muted { color: var(--muted); }
.curriculum-source { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; max-width: 80ch; }
.ws-related { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.ws-skill { margin-top: 8px; font-size: 0.9rem; }
.ws-related-note { margin-top: 8px; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

/* Worksheet engine lab */
.lab { padding-block: 32px 64px; }
.lab-lede { max-width: 60ch; color: var(--body); }
.lab-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lab-card { display: grid; gap: 6px; padding: 18px; text-decoration: none; color: var(--body); }
.lab-card strong { color: var(--ink); font-size: 1.05rem; }
.lab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.lab-bar h1 { margin: 0; font-size: 1.5rem; flex: 1 1 240px; }
.lab-actions { display: flex; gap: 10px; }
.lab-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.lab-letters a { min-width: 34px; padding: 6px 8px; text-align: center; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--p-700); background: var(--p-50); }
.lab-letters a[aria-current] { background: var(--p-600); color: #fff; }
.lab-errors { padding: 16px 20px; border-radius: var(--radius); background: var(--bad-bg); color: var(--bad); margin-bottom: 20px; }
.lab-errors ul { margin: 8px 0 0; padding-left: 20px; }
.ws-page { max-width: 760px; margin: 0 auto 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ws-page.landscape { max-width: 980px; }
.ws-page svg { display: block; width: 100%; height: auto; }
.lab-spec { max-width: 980px; margin: 0 auto; }
.lab-spec summary { cursor: pointer; font-weight: 600; color: var(--p-700); }
.lab-spec pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: var(--p-50); font-size: 0.8rem; }

.review { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; }
.review th, .review td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.review th { background: var(--p-50); }
.review td:first-child { white-space: nowrap; }
.review .bad { margin-top: 6px; color: var(--bad); font-weight: 600; }

/* Admin (src/admin): internal pages, plain and dense */
.admin { padding-block: 24px 64px; }
.admin h1 { margin: 8px 0 20px; font-size: 1.6rem; overflow-wrap: anywhere; }
.admin h2 { margin: 32px 0 12px; font-size: 1.15rem; }
.admin-nav, .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav a, .admin-tabs a { padding: 6px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--p-700); background: var(--p-50); }
.admin-nav a[aria-current], .admin-tabs a[aria-current] { background: var(--p-600); color: #fff; }
.admin-tabs { margin-bottom: 20px; }
.admin-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.admin-stat { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.admin-stat span { color: var(--muted); font-size: 0.82rem; }
.admin-stat strong { color: var(--ink); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.admin-stat small { color: var(--muted); font-size: 0.78rem; }
.admin-cols { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.admin .review td:first-child { white-space: normal; overflow-wrap: anywhere; }
.admin-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-bar-cell { width: 40%; vertical-align: middle !important; }
.admin-bar { display: block; height: 10px; min-width: 1px; border-radius: 5px; background: var(--p-500); }
.admin-scroll { overflow-x: auto; }
.admin-matrix td.admin-gap { background: var(--p-50); }
.admin-muted { color: var(--muted); font-size: 0.88rem; }
.admin-search { display: flex; gap: 8px; max-width: 480px; margin-bottom: 8px; }
.admin-search input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.admin-pager { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.admin-danger { color: var(--bad); }
.btn.admin-danger:not(.btn-soft) { background: var(--bad); color: #fff; }
.admin-notice { padding: 10px 14px; border-radius: 10px; background: var(--p-50); color: var(--p-700); font-weight: 600; }
.admin-list { margin: 8px 0 0; padding-left: 18px; max-height: 320px; overflow-y: auto; }

/* Print: only the sheet, on letter paper */
/* Dashboard (/account) */
/* /account: a sticky menu of the sections on the left, the sections on the right; on a phone the menu is a row of chips. */
.dash-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; align-items: start; }
.dash-side { position: sticky; top: 88px; display: grid; gap: 14px; padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dash-side-who { margin: 0 10px; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.dash-menu { display: grid; gap: 2px; }
.dash-menu a, .dash-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.dash-menu a:hover, .dash-menu button:hover { background: var(--p-50); color: var(--p-700); }
.dash-menu a[aria-current] { background: var(--p-50); color: var(--p-700); font-weight: 600; }
.dash-menu-end { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dash-menu form { margin: 0; }
.dash-main { min-width: 0; }
.dash-main [id] { scroll-margin-top: 90px; }
@media (max-width: 900px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dash-side { position: static; padding: 0; border: 0; background: none; }
  .dash-side-who { display: none; }
  .dash-menu { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
  .dash-menu-end { display: contents; }
  .dash-menu a, .dash-menu button { width: auto; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; white-space: nowrap; }
}
.dash { display: grid; gap: 28px; max-width: 980px; }
.dash-head h1 { margin: 0 0 4px; }
.dash-section { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.dash-section h2 { margin: 0; font-size: 1.2rem; }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-meta { margin: 0; color: var(--muted); font-size: 0.9rem; }
.dash-title { color: var(--ink); font-weight: 600; text-decoration: none; line-height: 1.3; }
.dash-title:hover { color: var(--p-700); }
.dash-thumb { display: grid; place-items: center; width: 108px; aspect-ratio: 1 / 1.1; padding: 8px; border-radius: 12px; background: var(--p-50); }
.dash-thumb.landscape { width: 140px; aspect-ratio: 1.3 / 1; }
.dash-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border: 1px solid #e3def3; box-shadow: 0 3px 10px -4px rgb(31 22 55 / 0.35); }
.dash-last { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.dash-last .dash-thumb { width: 140px; }
.dash-last-body { display: grid; gap: 6px; }
.dash-last-body .dash-title { font-size: 1.15rem; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dash-empty { justify-items: center; text-align: center; }
.dash-empty p { margin: 0; max-width: 460px; color: var(--muted); }
.dash-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.dash-filters label { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.dash-filters select { min-width: 160px; padding: 8px 44px 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.dash-list { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dash-row:first-child { border-top: 0; }
.dash-row .dash-thumb { width: 64px; padding: 5px; border-radius: 8px; }
.dash-row .dash-thumb.landscape { width: 84px; }
.dash-row-body { display: grid; gap: 3px; }
.dash-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dash-tag { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--p-50); color: var(--p-700); font-size: 0.78rem; font-weight: 600; }
.dash-pager { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 0.92rem; color: var(--muted); }
.dash-pager a { font-weight: 600; }
.dash-paper fieldset { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.dash-paper legend { margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.dash-radio { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.dash-radio input { width: 18px; height: 18px; margin: 0; flex: none; }
.dash-account { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.dash-sign-ins { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.dash-sign-ins li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
@media (max-width: 640px) {
  .dash-section { padding: 16px; }
  .dash-last { grid-template-columns: 1fr; justify-items: start; }
  .dash-row { grid-template-columns: auto minmax(0, 1fr); }
  .dash-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .dash-filters select { min-width: 0; width: 100%; }
  .dash-filters label { flex: 1 1 140px; }
}

.print-gate { display: none; }

@media print {
  @page { size: letter; margin: 0.6in; }
  /* Pages that are open to read but not to print (src/auth/access.ts): the content gives way to a note. */
  .print-locked .sheet,
  .print-locked .ws-preview {
    display: none !important;
  }
  .print-locked .print-gate { display: block; margin: 2in 0; font-size: 16pt; text-align: center; }
  body { background: #fff; font-size: 11.5pt; }
  .site-header, .site-footer, .crumbs, .no-print, .skip { display: none !important; }
  .wrap, .page { max-width: none; padding: 0; }
  .resource-layout { display: block; }
  .sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .sheet-head, thead th, .option.correct, p.answer, .bank span, .callout {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option { border: 0; padding: 2px 0; }
  .lines span { height: 26px; }
  .qblock h2, .sheet h2 { break-after: avoid; }
  .figure, table tr, .callout { break-inside: avoid; }
  .key-title a { color: inherit; }
  .lab { padding: 0; }
  .lab-bar, .lab-letters, .lab-spec, .lab-errors { display: none !important; }
  .ws-page { max-width: none; margin: 0; border: 0; box-shadow: none; break-after: page; }
}

/* Skill hubs */
.page-title .lead + .lead { margin-top: 10px; }
.hub-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.hub-notes h2 { font-size: 1.3rem; margin: 0 0 12px; }
.hub-levels, .hub-tips { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.55; }
.hub-path p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.hub-path span { font-weight: 600; margin-right: 4px; }
@media (max-width: 720px) { .hub-notes { grid-template-columns: 1fr; gap: 24px; } }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hub-card { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.hub-card h3 { margin: 0; }
.hub-card p { margin: 0; color: var(--muted); line-height: 1.5; }

/* Texas pages */
.topic-skills { margin: 0 0 16px; padding: 0; list-style: none; display: grid; max-width: 80ch; }
.topic-skills li { padding: 12px 0; border-top: 1px solid var(--line); }
.topic-skills li:first-child { border-top: 0; padding-top: 0; }
.topic-skills .skill-name { display: block; font-size: 1.02rem; color: var(--ink); }
.topic-skills .skill-name a { color: inherit; text-decoration: none; }
.topic-skills .skill-name a:hover { color: var(--p-700); }
.topic-skills .skill-plain { display: block; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* Statistics pages (src/views/statistics.tsx): a hero with tiles, a dot chart, a table shaded by grade, and cards. */
.statistics.prose > .stat-hero, .statistics.prose > .stat-cards, .statistics.prose > .table-scroll { max-width: none; }
.stat-hero { margin: 4px 0 28px; padding: 32px; border-radius: var(--radius); background: linear-gradient(135deg, var(--p-50), #fff7ed); border: 1px solid var(--line); }
.stat-hero h1 { max-width: 24ch; }
.stat-hero .lead { margin: 12px 0 0; max-width: 70ch; }
.stat-kicker { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--p-600); color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.prose ul.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.stat-tiles li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); line-height: 1.35; }
.stat-tiles strong { color: var(--p-700); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-tiles span { color: var(--muted); font-size: 0.9rem; }
.stat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.stat-glance-scroll, .stat-heat-scroll { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stat-glance, .stat-heat { margin: 0; }
.stat-glance caption, .stat-heat caption { padding: 12px 16px; caption-side: top; text-align: left; color: var(--muted); font-size: 0.88rem; }
.stat-glance th, .stat-glance td { border-width: 1px 0 0; }
.stat-glance thead th { text-align: center; }
.stat-glance thead th:first-child, .stat-glance tbody th { text-align: left; }
.stat-glance tbody th a { color: var(--ink); text-decoration: none; }
.stat-glance tbody th a:hover { color: var(--p-700); }
.stat-glance td { width: 9%; min-width: 48px; height: 52px; padding: 4px; text-align: center; vertical-align: middle; }
.stat-glance .dot { display: inline-grid; place-items: center; width: calc(18px + var(--n) * 1.6px); height: calc(18px + var(--n) * 1.6px); border-radius: 50%; background: var(--p-200); color: var(--p-900); font-size: 0.78rem; font-weight: 700; }
.stat-glance .dot.top { background: var(--p-600); color: #fff; }
.stat-heat th, .stat-heat td { border-color: #fff; border-width: 2px; }
.stat-heat thead th { background: #fff; font-size: 0.82rem; vertical-align: bottom; }
.stat-heat tbody th { background: #fff; position: sticky; left: 0; z-index: 1; }
.stat-heat td { text-align: center; font-weight: 600; white-space: nowrap; color: var(--ink); }
.stat-heat td.none { background: #fafafa; color: #a8a3b8; font-weight: 400; }
.g0 { background: #f5f3ff; } .g1 { background: #ede9fe; } .g2 { background: #ddd6fe; } .g3 { background: #c4b5fd; } .g4 { background: #a78bfa; }
.g5 { background: #7c3aed; color: #fff !important; } .g6 { background: #6d28d9; color: #fff !important; } .g7 { background: #5b21b6; color: #fff !important; } .g8 { background: #4c1d95; color: #fff !important; }
.stat-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; color: var(--muted); font-size: 0.82rem; }
.stat-key span[class] { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; color: var(--ink); font-weight: 600; }
.stat-key span:first-child { margin-right: 4px; } .stat-key span:last-child { margin-left: 4px; }
.stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 12px; }
.stat-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); scroll-margin-top: 90px; }
.prose .stat-card h3 { margin: 0 0 8px; scroll-margin-top: 90px; }
.stat-card p, .stat-card li { max-width: none; }
.stat-card-grade { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--s-100); color: #9a3412; font-size: 0.78rem; font-weight: 600; }
.prose ul.stat-by-grade { margin: 12px 0 0; padding: 0; list-style: none; gap: 6px; }
.stat-by-grade li { display: flex; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.stat-grade { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 24px; border-radius: 6px; color: var(--ink); font-size: 0.8rem; font-weight: 700; }
.stat-card-link { margin-top: 12px; font-weight: 600; }
.prose ul.stat-facts { gap: 6px; font-size: 0.92rem; }
.stat-facts li::marker { color: var(--p-500); }
.stat-facts li.none { color: var(--muted); }
.stat-facts li.none::marker { color: #c9c4d6; }
.prose ul.stat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.stat-chips .chip { display: inline-block; white-space: normal; }
@media (max-width: 900px) {
  .stat-hero { padding: 22px 18px; }
  .prose ul.stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Curriculum changes (statistics/curriculum_changes): a finder in the hero, a timeline of school years, change cards
   with a subject colour and a grade bar, and a card per region. Subject colours pass 4.5:1 on white as text. */
.changes-page .s-math { --sc: #2563eb; --sc-bg: #dbeafe; }
.changes-page .s-ela { --sc: #be185d; --sc-bg: #fce7f3; }
.changes-page .s-science { --sc: #0f766e; --sc-bg: #ccfbf1; }
.changes-page .s-social-studies { --sc: #b45309; --sc-bg: #fef3c7; }
.changes-page .s-all { --sc: #6d28d9; --sc-bg: #ede9fe; }
.changes-page h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.changes-page .cc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; margin: 4px 0 24px; padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle at 0 0, var(--p-100), transparent 55%), linear-gradient(135deg, var(--p-50), #fff7ed); }
.changes-page .cc-hero h1 { max-width: 18ch; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.changes-page .cc-hero .lead { margin: 14px 0 0; max-width: 46ch; font-size: 1.02rem; }
.changes-page ul.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.changes-page .stat-tiles li { padding: 12px 14px; }
.changes-page .stat-tiles strong { font-size: 1.5rem; }
.changes-page .stat-tiles span { font-size: 0.82rem; }
.changes-page .cc-finder { display: grid; gap: 16px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(76 29 149 / 0.06), 0 18px 40px -18px rgb(76 29 149 / 0.35); }
.changes-page .cc-finder h2 { font-size: 1.25rem; }
.changes-page .cc-selects { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.changes-page .cc-field { display: grid; gap: 6px; min-width: 0; }
.changes-page .cc-field label, .changes-page .cc-chips legend { color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.changes-page .cc-field select, .changes-page .cc-field input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background-color: #fff; color: var(--ink); font: inherit; }
.changes-page .cc-field select { padding-right: 40px; background-position: right 14px center; }
.changes-page .cc-field select:hover, .changes-page .cc-field input:hover { border-color: var(--p-300); }
.changes-page .cc-field select:focus-visible, .changes-page .cc-field input:focus-visible { outline: 3px solid var(--p-400); outline-offset: 1px; border-color: var(--p-500); }
.changes-page .cc-where { margin: -6px 0 0; color: var(--muted); font-size: 0.85rem; }
.changes-page .cc-where button { padding: 0; border: 0; background: none; color: var(--p-600); font: inherit; font-weight: 600; text-decoration: underline; }
.changes-page .cc-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.changes-page .cc-chips legend { margin-bottom: 8px; padding: 0; }
.changes-page .cc-chip { position: relative; display: inline-flex; }
.changes-page .cc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.changes-page .cc-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--body); font-size: 0.86rem; font-weight: 500; line-height: 1.3; }
.changes-page .cc-chip[class*='s-'] span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
.changes-page .cc-chip:hover span { border-color: var(--p-300); }
.changes-page .cc-chip input:checked + span { border-color: var(--sc, var(--p-600)); background: var(--sc, var(--p-600)); color: #fff; }
.changes-page .cc-chip input:checked + span::before { background: #fff; }
.changes-page .cc-chip input:focus-visible + span { outline: 3px solid var(--p-400); outline-offset: 2px; }
.changes-page .cc-finder-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.changes-page .cc-count { color: var(--ink); font-weight: 600; }
.changes-page .cc-clear { font-size: 0.9rem; font-weight: 600; }
.changes-page.js .cc-submit { display: none; }
.changes-page .callout { max-width: none; }
.changes-page .cc-summary-slot:empty { display: none; }
.changes-page .cc-summary-slot { margin: 0 0 24px; }
.changes-page .cc-summary-slot .cc-region-card { border: 2px solid var(--p-300); background: var(--p-50); }
.changes-page .cc-summary-slot .cc-region-card h3 { font-size: 1.3rem; }
.changes-page .cc-summary-slot .cc-region-only { display: none; }
.changes-page .cc-time { margin: 0 0 36px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.changes-page .cc-time-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.changes-page .cc-key { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 0.8rem; }
.changes-page .cc-key li { display: inline-flex; align-items: center; gap: 6px; }
.changes-page .cc-key li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.changes-page .cc-timeline { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; }
.changes-page .cc-timeline > ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); min-width: min-content; }
.changes-page .cc-year { display: flex; flex-direction: column; gap: 10px; padding: 0 8px 4px; border-left: 1px dashed var(--line); }
.changes-page .cc-year:first-child { border-left: 0; }
.changes-page .cc-year-label { padding: 6px 0 8px; border-bottom: 3px solid var(--line); color: var(--muted); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.changes-page .cc-year-label em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--s-500); color: #fff; font-size: 0.7rem; font-style: normal; }
.changes-page .cc-year.is-now { border-radius: 12px; background: var(--p-50); border-left-color: transparent; }
.changes-page .cc-year.is-now + .cc-year { border-left-color: transparent; }
.changes-page .cc-year.is-now .cc-year-label { border-bottom-color: var(--s-500); color: var(--ink); }
.changes-page .cc-year ul { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.changes-page .cc-dot { position: relative; display: block; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 1px var(--sc); transition: transform 0.15s, opacity 0.15s; }
.changes-page .cc-dot:hover, .changes-page .cc-dot:focus-visible { transform: scale(1.3); }
.changes-page .cc-dot.is-dim { opacity: 0.18; }
.changes-page .cc-undated { margin-top: 12px; color: var(--muted); font-size: 0.85rem; }
.changes-page .cc-section { margin: 0 0 36px; scroll-margin-top: 90px; }
.changes-page .cc-section > h2 { margin: 0 0 16px; }
.changes-page .cc-empty { color: var(--muted); }
.changes-page .cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.changes-page .cc-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 20px 18px 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); scroll-margin-top: 90px; overflow: hidden; }
.changes-page .cc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--sc); }
.changes-page .cc-card:target { outline: 3px solid var(--sc); outline-offset: 2px; }
.changes-page .cc-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.changes-page .cc-subject { color: var(--sc); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.changes-page .cc-badge { padding: 3px 10px; border-radius: 999px; background: var(--p-100); color: var(--p-700); font-size: 0.75rem; font-weight: 600; }
.changes-page .cc-badge.is-now { background: var(--ok-bg); color: #3f6212; }
.changes-page .cc-badge.is-draft { background: #fef3c7; color: #92400e; }
.changes-page .cc-badge.is-withdrawn { background: var(--bad-bg); color: var(--bad); }
.changes-page .cc-badge.is-none { background: #f1f0f5; color: var(--muted); }
.changes-page .cc-card p { max-width: none; }
.changes-page .cc-when { color: var(--ink); font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.changes-page .cc-region { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 1.05rem; }
.changes-page .cc-country { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.changes-page .cc-grades { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.changes-page .cc-grades li { display: grid; place-items: center; height: 24px; border-radius: 5px; background: #f3f1f8; color: #8a849c; font-size: 0.68rem; font-weight: 600; }
.changes-page .cc-grades li.on { background: var(--sc); color: #fff; }
.changes-page .cc-grades-label { margin-top: 4px; color: var(--muted); font-size: 0.8rem; }
.changes-page .cc-summary { color: var(--ink); font-size: 0.95rem; line-height: 1.55; }
.changes-page .cc-more summary { width: max-content; color: var(--p-600); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.changes-page .cc-more p { margin-top: 6px; font-size: 0.9rem; }
.changes-page .cc-source { margin-top: auto; color: var(--muted); font-size: 0.8rem; }
.changes-page .cc-source a { font-weight: 600; }
.changes-page .cc-ws a { display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--sc-bg); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.changes-page .cc-ws a:hover { text-decoration: underline; }
.changes-page .cc-none { margin: 0 0 36px; padding: 18px 20px; border-radius: 14px; background: var(--p-50); color: var(--ink); }
.changes-page .cc-regions { margin: 8px 0 36px; }
.changes-page .cc-regions > h2 { margin: 0 0 16px; }
.changes-page .cc-region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.changes-page .cc-region-card { display: grid; gap: 8px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.changes-page .cc-region-card p { max-width: none; }
.changes-page .cc-region-counts { color: var(--body); font-size: 0.88rem; }
.changes-page .cc-region-counts strong { color: var(--p-700); font-size: 1.05rem; }
.changes-page .cc-region-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.88rem; font-weight: 600; }
.changes-page .cc-region-ws summary { color: var(--muted); font-size: 0.85rem; cursor: pointer; }
.changes-page .cc-region-ws ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.changes-page .cc-region-ws .chip { display: inline-block; white-space: normal; font-size: 0.8rem; padding: 5px 11px; }
.changes-page .cc-method { margin-top: 12px; }
.changes-page .cc-method h2 { font-size: 1.25rem; }
@media (max-width: 900px) {
  .changes-page .cc-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; }
  /* The finder before the tiles on a narrow screen. */
  .changes-page .cc-hero-text { display: contents; }
  .changes-page .cc-hero .stat-kicker { justify-self: start; margin: 0; }
  .changes-page .cc-hero h1, .changes-page .cc-hero .lead { margin: 0; }
  .changes-page ul.stat-tiles { order: 2; margin: 0; }
}
@media (max-width: 600px) {
  .changes-page.wrap { padding: 0 16px; }
  .changes-page .cc-hero { margin: 0 0 20px; padding: 20px 16px; border-radius: 20px; }
  .changes-page .cc-finder { padding: 18px 16px; }
  .changes-page .cc-selects { grid-template-columns: minmax(0, 1fr); }
  .changes-page .cc-time { padding: 18px 16px 14px; }
  .changes-page .cc-card { padding: 18px 16px 16px 22px; }
  .changes-page .cc-when { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .changes-page .cc-dot:hover, .changes-page .cc-dot:focus-visible { transform: none; }
}

/* Homeschooling guides (src/views/homeschool.tsx). */
.prose h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.prose ol.steps { padding-left: 1.4em; display: grid; gap: 10px; list-style: decimal; }
.prose ol.steps li { line-height: 1.65; padding-left: 4px; }
.prose ol.steps li::marker { color: var(--p-500); font-weight: 700; }
.homeschool .table-scroll { max-width: 68ch; }
.homeschool tbody th { white-space: normal; width: 34%; }
.homeschool-grades { display: flex !important; flex-wrap: wrap; gap: 8px 18px !important; list-style: none !important; padding-left: 0 !important; }
.homeschool-states { list-style: none !important; padding-left: 0 !important; gap: 16px !important; margin: 0 0 24px; }
.homeschool-states li { display: grid; gap: 4px; }
.homeschool-states span { color: var(--muted); }

/* Pricing (src/views/pricing.tsx) and the dashboard's plan (src/views/plan.tsx). */
.pricing-limit { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; background: var(--s-100); color: #7c2d12; }
.ticks { flex: 1; margin: 4px 0 8px; padding: 0; list-style: none; }
.ticks li { position: relative; margin: 0 0 9px; padding-left: 28px; color: var(--body); }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--p-100); color: var(--p-700); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; }
.plan-buttons { display: grid; gap: 8px; }
.plan-note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.org-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.org-form label { display: grid; gap: 6px; font-weight: 500; color: var(--ink); }
.org-form input, .org-form textarea, .dash-pages input:not([type='checkbox']) { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.org-form .org-wide, .org-form .auth-error { grid-column: 1 / -1; }
.org-form button { justify-self: start; }
.org-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pricing-sent { margin: 0; color: var(--ok); font-weight: 600; }
.dash-plan p { margin: 0; }
.dash-plan .btn { justify-self: start; }
.dash-pages { display: grid; gap: 12px; max-width: 520px; margin-top: 8px; }
.dash-pages h3 { margin: 0; font-size: 1rem; }
.dash-pages label:not(.dash-radio) { display: grid; gap: 6px; }
.dash-pages button { justify-self: start; }
.ws-sheet-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--p-50); color: var(--p-900); font-size: 0.92rem; }

/* Home page: one card for each skill group, with its biggest skills. */
.group-card { display: grid; align-content: start; gap: 6px; }
.group-card h3 { margin: 0; font-size: 1.05rem; }
.group-card h3 a { color: var(--ink); text-decoration: none; }
.group-card h3 a:hover { color: var(--p-600); }
.group-card .meta { color: var(--muted); font-size: 0.85rem; }
.group-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.group-card li a { color: var(--body); text-decoration: none; font-size: 0.95rem; }
.group-card li a:hover { color: var(--p-600); }

/* Skills page: the groups to jump to. */
.grade-block[id] { scroll-margin-top: 90px; }

/* Browse sidebar: the smaller values of a long facet, behind "Show more". */
.facets .facet-more summary { display: block; margin-top: 4px; padding: 6px 0; color: var(--p-600); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.facet-more[open] summary { margin-bottom: 4px; }

/* Curriculum skill maps (src/views/curriculum-map.tsx) */
.child-learns p { max-width: 80ch; line-height: 1.65; margin: 0; }
.skill-sheets { display: block; margin-top: 4px; color: var(--muted); font-size: 0.88rem; }
.topic-skills li { scroll-margin-top: 90px; }
.topic-skills li:target { background: var(--p-50); border-radius: 6px; outline: 6px solid var(--p-50); }
.grade-map-note { margin: 0 0 16px; color: var(--muted); max-width: 80ch; }
.grade-map-topics { margin: 0; columns: 3 240px; column-gap: 16px; }
.grade-map-topic { padding: 16px 18px; margin-bottom: 16px; break-inside: avoid; }
.grade-map-topic dt { font-weight: 600; margin-bottom: 8px; }
.grade-map-topic dt a { color: var(--ink); text-decoration: none; }
.grade-map-topic dt a:hover { color: var(--p-700); }
.grade-map-topic dd { margin: 0; }
.grade-map-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.grade-map-skills li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.93rem; }
.grade-map-skills a { padding: 3px 0; color: var(--body); text-decoration: none; }
.grade-map-skills a:hover { color: var(--p-700); }

/* Reviewers (src/views/editorial.tsx) */
.reviewed-by { margin: 12px 0 0; font-size: 0.88rem; color: var(--muted); }

/* /become-a-reviewer: checkbox groups in the application form, drawn as chips (.chip) that fill when checked. */
.org-form fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.org-form legend { width: 100%; padding: 0; margin-bottom: 6px; font-weight: 500; color: var(--ink); }
.org-form label.check { position: relative; display: inline-flex; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--body); font-size: 0.88rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.org-form label.check:hover { border-color: var(--p-300); }
.org-form label.check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.org-form label.check:has(input:checked) { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.org-form label.check:has(input:focus-visible) { outline: 3px solid var(--p-400); outline-offset: 2px; }
.form-note { margin-top: 28px; }
/* /careers: the open roles. */
.prose ul.roles { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.prose ul.roles li { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.prose .roles h2 { margin: 0 0 6px; font-size: 1.15rem; }
.prose .roles p { margin: 0; }

/* /classroom-timer: a red disk that gets smaller as the time runs out (--part, from 1 to 0), and big digits. Full screen fills the board. */
.timer { display: grid; justify-items: center; gap: 18px; margin: 8px 0 40px; padding: 28px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.timer-dial { width: min(320px, 70vw); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ink); background: conic-gradient(#e11d48 calc(var(--part, 1) * 360deg), #fff 0); }
.timer-digits { font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.timer.is-done .timer-digits { color: #e11d48; animation: timer-flash 1s steps(2) 3; }
@keyframes timer-flash { 50% { opacity: 0.2; } }
.timer-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.timer-start { min-width: 140px; font-size: 1.1rem; }
.timer-options { display: grid; justify-items: center; gap: 12px; }
.timer-options .chips { justify-content: center; }
.timer-options .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.timer-custom { display: flex; align-items: center; gap: 6px; }
.timer-custom input { width: 74px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: center; }
.timer[data-current-mode='stopwatch'] .timer-dial { background: conic-gradient(var(--p-500) calc(var(--part, 0) * 360deg), #fff 0); }
.timer:fullscreen { align-content: center; border: 0; border-radius: 0; box-shadow: none; }
.timer:fullscreen .timer-dial { width: min(62vh, 70vw); }
.timer:fullscreen .timer-digits { font-size: min(18vh, 16vw); }
.timer:fullscreen .timer-options { display: none; }
.timer-notes { margin-top: 8px; }
.timer-notes ul + p { margin-top: 12px; }
.timer-alerts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; font-size: 0.88rem; }
.timer-alerts > label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.timer-alerts select { padding: 6px 30px 6px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background-color: #fff; }
.timer-repeat input { width: 18px; height: 18px; accent-color: var(--p-600); }
.timer-warn-note { margin: -6px 0 0; padding: 4px 14px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 700; }
.timer-warn-note[hidden] { display: none; }
.timer.is-warn .timer-digits, .timer.is-warn .timer-dial, .timer.is-warn .vt-face { animation: timer-pulse 0.9s ease-in-out 1; }
@keyframes timer-pulse { 50% { transform: scale(1.06); } }
.timer.is-ringing .timer-digits { animation: timer-flash 1s steps(2) infinite; }
.timer:fullscreen .timer-warn-note { font-size: min(4vh, 4vw); }
@media (prefers-reduced-motion: reduce) {
  .timer.is-warn .timer-digits, .timer.is-warn .timer-dial, .timer.is-warn .vt-face { animation: none; }
}

/* /classroom-tools: every tool, with its other pages under its summary. */
.prose .roles h3 { margin: 0 0 6px; font-size: 1.15rem; }
.prose .tool-pages { margin-top: 8px; font-size: 0.92rem; }

/* src/tools/random-group-generator.tsx: /random-group-generator and /random-team-generator. Setup (names and options), a bar of buttons, and a grid of group cards big enough for the board. Full screen shows only the bar and the cards. */
.group-tool { --group-tone-0: #7c3aed; --group-tone-1: #ea580c; --group-tone-2: #0d9488; --group-tone-3: #db2777; --group-tone-4: #2563eb; --group-tone-5: #b45309; --group-tone-6: #4d7c0f; --group-tone-7: #6d28d9; display: grid; gap: 18px; margin: 8px 0 40px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.group-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.group-field { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.group-tool textarea, .group-tool select, .group-count input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); background: #fff; }
.group-names textarea { min-height: 220px; resize: vertical; line-height: 1.45; }
.group-options { display: grid; align-content: start; justify-items: start; gap: 14px; }
.group-options .chip, .group-count .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.group-count { display: flex; align-items: center; gap: 8px; }
.group-count label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.group-count input { width: 76px; text-align: center; }
.group-count .chip { min-width: 40px; font-size: 1.1rem; line-height: 1; }
.group-theme { width: min(220px, 100%); }
.group-apart { width: 100%; }
.group-apart summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.group-apart label { display: block; margin-top: 8px; }
.group-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.group-shuffle { min-width: 130px; font-size: 1.05rem; }
.group-status { margin: 0 0 0 auto; color: var(--muted); font-size: 0.92rem; }
.group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.group-card { padding: 14px 18px 16px; border: 2px solid var(--group-tone, var(--p-600)); border-top-width: 10px; border-radius: 14px; background: #fff; }
.group-card h2 { margin: 0 0 8px; font-size: 1.3rem; color: var(--group-tone, var(--p-600)); }
.group-card ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 16px; }
.group-card li { font-size: 1.15rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.group-cards.is-shuffling .group-card { animation: group-shake 0.3s ease-in-out infinite alternate; opacity: 0.55; }
.group-cards.is-revealing .group-card { animation: group-deal 0.35s ease-out both; animation-delay: calc(min(var(--i, 0), 12) * 60ms); }
@keyframes group-shake { from { transform: translateX(-3px) rotate(-1deg); } to { transform: translateX(3px) rotate(1deg); } }
@keyframes group-deal { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .group-cards.is-revealing .group-card { animation: none; }
  .group-cards.is-shuffling .group-card { animation: none; }
}
.group-tool:fullscreen { align-content: start; overflow: auto; padding: 24px 32px; border: 0; border-radius: 0; box-shadow: none; }
.group-tool:fullscreen .group-setup { display: none; }
.group-tool:fullscreen .group-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.group-tool:fullscreen .group-card h2 { font-size: 2rem; }
.group-tool:fullscreen .group-card li { font-size: 1.7rem; }
.group-notes { margin-top: 8px; }
.group-notes ul + p { margin-top: 12px; }
@media (max-width: 720px) {
  .group-setup { grid-template-columns: minmax(0, 1fr); }
  .group-names textarea { min-height: 160px; }
  .group-status { margin-left: 0; width: 100%; }
}

/* src/tools/visual-timer.tsx, bomb-timer.tsx, count-up-timer.tsx: the timers that share the classroom timer's panel (.timer). */
.vtimer { --vt-color: #e11d48; }
.vt-face { position: relative; width: min(460px, 84vw); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ink); background: #fff; }
.vt-disk { position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(var(--vt-color) calc(var(--part, 1) * 360deg), transparent 0); }
.vt-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt-tick { stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.vt-tick-5 { stroke-width: 2.4; }
.vt-num { font: 700 11px Poppins, system-ui, sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.vtimer[data-face='fit'] .vt-num, .vtimer[data-face='fit'] .vt-tick:not(.vt-tick-5) { display: none; }
.vt-knob { fill: var(--ink); }
.vt-swatch::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 6px; border-radius: 50%; background: var(--swatch); vertical-align: -0.05em; }
.vtimer:fullscreen .vt-face { width: min(72vh, 86vw); }
.vtimer:fullscreen .vt-digits { font-size: min(12vh, 12vw); }

.bt-stage { width: min(400px, 76vw); aspect-ratio: 1; }
.bt-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bt-bomb[hidden], .bt-boom[hidden] { display: none; }
.bt-body { fill: #2b2340; }
.bt-shine { fill: #fff; opacity: 0.3; }
.bt-cap { fill: #6b6580; stroke: #2b2340; stroke-width: 4; }
.bt-eye { fill: #fff; }
.bt-pupil { fill: #2b2340; }
.bt-smile { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.bt-fuse, .bt-fuse-burnt { fill: none; stroke-width: 7; stroke-linecap: round; }
.bt-fuse { stroke: #b45309; }
.bt-fuse-burnt { stroke: var(--line); stroke-dasharray: 2 10; }
.bt-spark { fill: #facc15; stroke: #f97316; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.bt-spark-core { fill: #fff7ed; }
.btimer.is-running .bt-spark { animation: bt-flicker 0.25s ease-in-out infinite alternate; }
@keyframes bt-flicker { from { transform: scale(0.75) rotate(0deg); } to { transform: scale(1.15) rotate(20deg); } }
.btimer.is-running .bt-bomb svg { animation: bt-wobble 0.6s ease-in-out infinite alternate; transform-origin: 45% 60%; }
@keyframes bt-wobble { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.bt-burst-out { fill: #f97316; }
.bt-burst-in { fill: #facc15; }
.bt-boom-text { font: 800 60px Poppins, system-ui, sans-serif; fill: #db2777; stroke: #fff; stroke-width: 3; paint-order: stroke; text-anchor: middle; }
.bt-boom svg { animation: bt-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes bt-pop { from { transform: scale(0.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
.btimer.is-done .timer-digits { animation: none; }
.btimer:fullscreen .bt-stage { width: min(62vh, 80vw); }
.btimer:fullscreen .timer-digits { font-size: min(14vh, 14vw); }
@media (prefers-reduced-motion: reduce) {
  .btimer.is-running .bt-spark, .btimer.is-running .bt-bomb svg, .bt-boom svg { animation: none; }
}

.cu-digits { font-size: clamp(3.4rem, 17vw, 8rem); }
.cutimer [data-lap]:disabled { opacity: 0.5; cursor: default; }
.cu-laps { display: none; width: min(520px, 100%); max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cutimer.has-laps .cu-laps { display: block; }
.cu-laps li { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--ink); }
.cu-laps .cu-lap { font-weight: 700; text-align: center; }
.cu-laps .cu-total { color: var(--muted); text-align: right; }
.cu-laps li.is-best .cu-lap { color: var(--ok); }
.cu-laps li.is-worst .cu-lap { color: var(--s-600); }
.cutimer:fullscreen .cu-digits { font-size: min(26vh, 18vw); }
.cutimer:fullscreen .cu-laps { max-height: 34vh; font-size: 1.4rem; }
.cu-board { position: relative; display: grid; place-items: center; }
.cu-count { position: absolute; inset: -12px -24px; display: grid; place-items: center; border-radius: var(--radius); background: var(--card); color: var(--p-600); font-size: clamp(3.4rem, 17vw, 8rem); font-weight: 800; line-height: 1; }
.cu-count[hidden] { display: none; }
.cu-count.is-pop { animation: cu-pop 0.35s ease-out both; }
@keyframes cu-pop { from { transform: scale(0.6); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
.cu-digits.is-pulse { animation: timer-pulse 0.9s ease-in-out 1; }
.cu-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; font-size: 0.88rem; }
.cu-countin { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cu-countin input { width: 18px; height: 18px; accent-color: var(--p-600); }
.cutimer:fullscreen .cu-count { font-size: min(26vh, 18vw); }
.cutimer:fullscreen .cu-options { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cu-count.is-pop, .cu-digits.is-pulse { animation: none; }
}

/* /hundreds-chart, /120-chart, /blank-hundreds-chart (src/tools/hundreds-chart.tsx): a grid of ten columns to color. Print shows the sheet alone, sized to fit US Letter and A4. */
.hc-chart { display: grid; gap: 18px; margin: 8px 0 40px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.hc-controls { display: grid; gap: 10px; }
.hc-controls .chips { align-items: center; }
.hc-controls .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.hc-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.hc-custom { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.hc-custom input { width: 70px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: center; }
.hc-print { margin-left: auto; }
.hc-swatch::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 6px; border-radius: 50%; background: var(--hc-paint); vertical-align: -0.05em; }
.hc-chart { --hc-yellow: #fde047; --hc-blue: #93c5fd; --hc-pink: #f9a8d4; --hc-green: #86efac; }
.hc-yellow { --hc-paint: var(--hc-yellow); }
.hc-blue { --hc-paint: var(--hc-blue); }
.hc-pink { --hc-paint: var(--hc-pink); }
.hc-green { --hc-paint: var(--hc-green); }
.hc-sheet { width: 100%; max-width: 640px; margin: 0 auto; }
.hc-print-head { display: none; }
.hc-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.hc-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: clamp(0.72rem, 3.4vw, 1.35rem); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.hc-cell:nth-child(10n) { border-right-width: 2px; }
.hc-grid .hc-cell:nth-last-child(-n + 10) { border-bottom-width: 2px; }
.hc-cell:hover { outline: 3px solid var(--p-300); outline-offset: -3px; }
.hc-cell:focus-visible { outline: 3px solid var(--p-600); outline-offset: -3px; }
.hc-cell.is-hidden span { visibility: hidden; }
.hc-cell[data-paint='yellow'] { background: var(--hc-yellow); }
.hc-cell[data-paint='blue'] { background: var(--hc-blue); }
.hc-cell[data-paint='pink'] { background: var(--hc-pink); }
.hc-cell[data-paint='green'] { background: var(--hc-green); }
.hc-notes { margin-top: 8px; }
.hc-read-aloud { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.88rem; }
.hc-read-aloud input { accent-color: var(--p-600); }
.hc-cell.is-said { outline: 4px solid var(--p-600); outline-offset: -4px; transform: scale(1.06); transition: transform 0.15s; position: relative; z-index: 1; }
@page hc-sheet { size: auto; margin: 12mm; }
@media print {
  .hc-page > :not(.hc-chart), .hc-controls { display: none !important; }
  .hc-chart { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .hc-sheet { page: hc-sheet; max-width: none; width: 180mm; margin: 0 auto; break-inside: avoid; }
  .hc-print-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6mm; font-size: 14pt; font-weight: 700; color: #000; }
  .hc-print-head span + span { font-size: 11pt; font-weight: 400; }
  .hc-grid { grid-template-columns: repeat(10, 18mm); border-color: #000; }
  .hc-cell { width: 18mm; height: 18mm; aspect-ratio: auto; border-color: #000; color: #000; font-size: 15pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hc-cell:hover { outline: 0; }
}

/* /bingo-card-generator, /sight-word-bingo, /math-bingo: settings, then a preview of the printed pages. Sizes inside a sheet are in cqw, so the
   preview and the print match. Print shows only the sheets, one page each (the script sets @page to Letter or A4). */
.bingo-tool { display: grid; gap: 14px; margin: 8px 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.bingo-tool[hidden], .bingo-row[hidden], .bingo-message[hidden] { display: none; }
.bingo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bingo-label { font-weight: 600; color: var(--ink); min-width: 90px; }
.bingo-row select, .bingo-fields input, .bingo-fields select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); min-width: 0; }
.bingo-row textarea { font: inherit; flex: 1 1 260px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.bingo-check { display: inline-flex; align-items: center; gap: 6px; }
.bingo-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bingo-fields label { display: grid; gap: 4px; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.bingo-fields input, .bingo-fields select { width: 100%; font-weight: 400; }
.bingo-seed { display: flex; gap: 6px; }
.bingo-seed input { flex: 1 1 auto; width: 0; }
.bingo-note { margin: -4px 0 0; font-size: 0.88rem; color: var(--muted); }
.bingo-message { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.bingo-tool [data-print] { margin-left: auto; }
.bingo-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-bottom: 40px; }
.bingo-sheet { container-type: inline-size; aspect-ratio: 7.5 / 10; padding: 6.5%; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: space-around; overflow: hidden; color: #111; }
.bingo-out[data-paper='a4'] .bingo-sheet { aspect-ratio: 186 / 273; }
.bingo-card { width: 92cqw; display: grid; gap: 1.6cqw; }
.bingo-out[data-per-page='2'] .bingo-card { width: 46cqw; gap: 1cqw; }
.bingo-card-title { text-align: center; font-weight: 700; font-size: 6.5cqw; line-height: 1.1; overflow-wrap: anywhere; }
.bingo-out[data-per-page='2'] .bingo-card-title { font-size: 4.2cqw; }
.bingo-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border: 0.5cqw solid #111; container-type: inline-size; }
.bingo-head { display: grid; place-items: center; padding: 1.5cqw 0; background: var(--p-600); color: #fff; font-weight: 700; font-size: 11cqw; line-height: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bingo-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 1cqw; border: 0.3cqw solid #111; text-align: center; line-height: 1.05; font-weight: 600; font-size: calc(var(--fs) * 1cqw); overflow: hidden; overflow-wrap: break-word; hyphens: none; }
.bingo-cell.is-free { font-size: calc(var(--free) * 1cqw); font-weight: 700; color: var(--p-700); background: var(--p-100); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bingo-card-foot { text-align: right; font-size: 2.4cqw; color: #555; }
.bingo-out[data-per-page='2'] .bingo-card-foot { font-size: 1.8cqw; }
.bingo-caller { aspect-ratio: auto; justify-content: flex-start; align-items: stretch; grid-column: 1 / -1; font-size: 2.6cqw; }
.bingo-caller h2 { margin: 0 0 1cqw; font-size: 4.5cqw; }
.bingo-caller p { margin: 0 0 3cqw; }
.bingo-board { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.8cqw; }
.bingo-board .bingo-head { font-size: 4cqw; padding: 1cqw 0; }
.bingo-tick { padding: 0.4cqw 0 0.4cqw 4.5cqw; border: 1px solid #bbb; font-size: 2.6cqw; font-variant-numeric: tabular-nums; position: relative; }
.bingo-tick::before, .bingo-calls li::before { content: ''; position: absolute; left: 1cqw; top: 50%; width: 1.8cqw; height: 1.8cqw; margin-top: -0.9cqw; border: 1px solid #555; }
.bingo-calls { columns: 3; column-gap: 4cqw; margin: 0; padding: 0; list-style: none; counter-reset: call; }
.bingo-calls li { position: relative; padding: 0.5cqw 0 0.5cqw 4cqw; break-inside: avoid; }
.bingo-notes { margin-top: 8px; }
@media print {
  .bingo-page > :not(.bingo-out) { display: none !important; }
  .bingo-out { display: block; margin: 0; }
  .bingo-out .bingo-sheet, .bingo-out[data-paper] .bingo-sheet { aspect-ratio: auto; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; justify-content: flex-start; gap: 6cqw; break-after: page; overflow: visible; }
  .bingo-out[data-per-page='2'] .bingo-sheet { gap: 5cqw; }
  .bingo-out .bingo-caller { gap: 1.5cqw; }
  .bingo-sheet:last-child { break-after: auto; }
}

/* src/tools/random-name-picker.tsx: the stage (a big name, or the wheel) beside the class list. Full screen shows the stage only. */
.np { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; gap: 20px; margin: 8px 0 40px; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.np-stage { display: grid; justify-items: center; align-content: start; gap: 16px; min-width: 0; }
.np .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.np .chips { justify-content: center; }
.np-reveal { display: grid; place-items: center; width: 100%; min-height: 260px; padding: 16px; border-radius: 14px; background: var(--p-50); overflow: hidden; }
.np-name { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.7em; margin: 0; font-weight: 700; line-height: 1.1; color: var(--muted); text-align: center; font-size: clamp(2.6rem, 11vw, 6rem); overflow-wrap: anywhere; }
.np-name[data-many='2'] { font-size: clamp(2.2rem, 8vw, 4.5rem); }
.np-name[data-many='3'], .np-name[data-many='4'], .np-name[data-many='5'] { font-size: clamp(1.8rem, 6vw, 3.4rem); }
.np-name.is-final { color: var(--p-600); animation: np-pop 0.35s ease-out; }
@keyframes np-pop { 0% { transform: scale(0.85); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
.np-wheel { display: grid; justify-items: center; gap: 10px; width: 100%; }
.np-wheel svg { width: min(440px, 100%); height: auto; font-family: inherit; font-weight: 600; }
.np-result { min-height: 1.4em; margin: 0; font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; color: var(--p-600); text-align: center; overflow-wrap: anywhere; }
.np[data-view='name'] .np-wheel, .np[data-view='wheel'] .np-reveal { display: none; }
.np-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.np-pick { min-width: 150px; font-size: 1.15rem; }
.np.is-busy .np-pick { opacity: 0.6; }
.np-side { display: grid; align-content: start; gap: 12px; min-width: 0; }
.np-list { display: grid; gap: 6px; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.np-list textarea { width: 100%; min-height: 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-weight: 400; line-height: 1.4; resize: vertical; }
.np-total { margin: 0; color: var(--muted); font-size: 0.88rem; }
.np-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); cursor: pointer; }
.np-check input { width: 18px; height: 18px; accent-color: var(--p-600); }
.np-side .chips { justify-content: flex-start; }
.np-picked { display: none; gap: 8px; }
.np.has-picked .np-picked { display: grid; }
.np-picked h2 { margin: 4px 0 0; font-size: 1rem; }
.np-picked ol { margin: 0; padding-left: 1.6em; max-height: 220px; overflow-y: auto; }
.np-picked li { padding: 2px 0; }
.np-picked li span { margin-right: 8px; overflow-wrap: anywhere; }
.np-back { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--p-700); font: inherit; font-size: 0.78rem; cursor: pointer; }
.np:fullscreen { grid-template-columns: 1fr; align-content: center; border: 0; border-radius: 0; box-shadow: none; }
.np:fullscreen .np-side, .np:fullscreen .np-count { display: none; }
.np:fullscreen .np-reveal { min-height: 60vh; }
.np:fullscreen .np-name { font-size: min(16vh, 12vw); }
.np:fullscreen .np-wheel svg { width: min(72vh, 90vw); }
.np-notes { margin-top: 8px; }
.np-notes ul + p { margin-top: 12px; }
@media (max-width: 760px) {
  .np { grid-template-columns: 1fr; padding: 18px 12px; }
  .np-reveal { min-height: 180px; }
}

/* /classroom-noise-meter: a level bar (--level, 0 to 1) with a line at the limit (--limit), or bouncing balls on a canvas. The panel's data-zone colours it; .is-loud shows the calm alert. */
.noise { position: relative; display: grid; justify-items: center; gap: 16px; margin: 8px 0 40px; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); --zone: #22c55e; }
.noise[data-zone='yellow'] { --zone: #eab308; }
.noise[data-zone='red'] { --zone: #e11d48; }
.noise-meter { width: 100%; max-width: 640px; }
.noise-bar { position: relative; height: clamp(56px, 12vw, 96px); border: 4px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
.noise-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--level, 0) * 100%); background: var(--zone); transition: background-color 0.3s; }
.noise-limit-line { position: absolute; top: 0; bottom: 0; left: calc(var(--limit, 0.7) * 100%); width: 4px; margin-left: -2px; background: var(--ink); }
.noise-ball-box { display: none; position: relative; width: 100%; max-width: 640px; }
.noise-balls { display: block; width: 100%; height: clamp(220px, 40vw, 340px); border: 4px solid var(--ink); border-radius: var(--radius); background: #fff; }
.noise[data-current-view='balls'] .noise-meter, .noise[data-current-view='manual'] .noise-meter { display: none; }
.noise[data-current-view='balls'] .noise-ball-box { display: block; }
/* The preview before Start: CSS only, no sound, never counted. The bar swings and a few balls hop; Start or a first click ends it (.is-preview goes). */
.noise-preview { display: none; position: absolute; top: 10px; left: 10px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--s-100); color: var(--body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.noise.is-preview:not([data-current-view='manual']) .noise-preview { display: block; }
.noise.is-preview .noise-fill { animation: noise-preview-bar 6s ease-in-out infinite; }
@keyframes noise-preview-bar { 0%, 100% { width: 12%; background: #22c55e; } 35% { width: 48%; background: #22c55e; } 55% { width: 62%; background: #eab308; } 70% { width: 78%; background: #e11d48; } 85% { width: 30%; background: #22c55e; } }
.noise-preview-balls { display: none; position: absolute; inset: 4px; pointer-events: none; }
.noise.is-preview .noise-preview-balls { display: block; }
.noise-preview-balls span { position: absolute; bottom: 0; left: calc(4% + var(--i) * 12%); width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--c, #7c3aed); animation: noise-preview-hop 1.6s cubic-bezier(0.3, 0, 0.7, 1) calc(var(--i) * -0.37s) infinite alternate; }
.noise-preview-balls span:nth-child(4n+2) { --c: #f97316; }
.noise-preview-balls span:nth-child(4n+3) { --c: #14b8a6; }
.noise-preview-balls span:nth-child(4n) { --c: #3b82f6; }
@keyframes noise-preview-hop { from { transform: translateY(0); } to { transform: translateY(calc(-40% * (2 + var(--i) / 2))); } }
@media (prefers-reduced-motion: reduce) {
  .noise.is-preview .noise-fill { animation: none; width: 40%; }
  .noise-preview-balls span { animation: none; }
}
.noise-privacy { flex-basis: 100%; margin: 0; text-align: center; font-size: 0.88rem; color: var(--body); }
/* The voice level display, no microphone: the teacher sets 0 to 4; data-level on the panel colours it. */
.noise-levels { display: none; justify-items: center; gap: 12px; width: 100%; max-width: 640px; }
.noise[data-current-view='manual'] .noise-levels { display: grid; }
.noise[data-current-view='manual'] .noise-word, .noise[data-current-view='manual'] .noise-start, .noise[data-current-view='manual'] .noise-privacy, .noise[data-current-view='manual'] .noise-alert { display: none; }
.noise-level-now { display: grid; justify-items: center; gap: 4px; width: 100%; margin: 0; padding: 24px 16px; border: 4px solid var(--ink); border-radius: var(--radius); background: var(--zone); color: #fff; text-align: center; }
.noise-level-now strong { font-size: clamp(2rem, 8vw, 4rem); line-height: 1.05; }
.noise-level-now span { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 600; }
.noise[data-current-view='manual'][data-level='0'] { --zone: #475569; }
.noise[data-current-view='manual'][data-level='1'] { --zone: #2563eb; }
.noise[data-current-view='manual'][data-level='2'] { --zone: #16a34a; }
.noise[data-current-view='manual'][data-level='3'] { --zone: #ca8a04; }
.noise[data-current-view='manual'][data-level='4'] { --zone: #dc2626; }
.noise-levels .chips { justify-content: center; }
.noise-levels .chip { cursor: pointer; font: inherit; }
.noise-level-keys { margin: 0; font-size: 0.85rem; color: var(--body); }
.noise:fullscreen .noise-level-now { min-height: 50vh; align-content: center; }
.noise:fullscreen .noise-level-now strong { font-size: 14vh; }
.noise-use-manual { cursor: pointer; font: inherit; }
.noise-word { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--ink); }
.noise[data-zone='red'] .noise-word { color: #e11d48; }
.noise-alert { visibility: hidden; padding: 10px 20px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.6rem); text-align: center; }
.noise.is-loud .noise-alert { visibility: visible; animation: noise-pulse 2s ease-in-out infinite; }
@keyframes noise-pulse { 50% { opacity: 0.6; } }
.noise-message { max-width: 520px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--s-100); color: var(--ink); text-align: center; }
.noise-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.noise-start { min-width: 140px; font-size: 1.1rem; }
.noise-options { display: grid; justify-items: center; gap: 12px; width: 100%; }
.noise-options .chips { justify-content: center; }
.noise-options .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.noise-range { display: grid; gap: 4px; width: min(320px, 100%); font-size: 0.92rem; color: var(--body); }
.noise-range input { width: 100%; accent-color: var(--p-600); }
.noise-sounds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.noise-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--body); }
.noise-pick select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.noise-pick input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--p-600); }
.noise-reward { margin: 0; padding: 10px 20px; border-radius: 999px; background: #dcfce7; color: #166534; font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.6rem); text-align: center; }
.noise.is-rewarded .noise-reward { animation: noise-pop 0.6s ease-out; }
@keyframes noise-pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.noise:fullscreen .noise-reward { font-size: 6vh; }
.noise-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 0.95rem; }
.noise:fullscreen { align-content: center; border: 0; border-radius: 0; box-shadow: none; }
.noise:fullscreen .noise-meter, .noise:fullscreen .noise-ball-box { max-width: 90vw; }
.noise:fullscreen .noise-bar { height: 22vh; }
.noise:fullscreen .noise-balls { height: 60vh; }
.noise:fullscreen .noise-word { font-size: 8vh; }
.noise:fullscreen .noise-options { display: none; }
.noise-notes { margin-top: 8px; }

/* /name-tracing-generator: the options on the left, a preview of each name's sheet on the right; in print, only the sheets, one per page on US Letter or A4. */
.nt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; margin: 8px 0 40px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.nt-controls { display: grid; gap: 14px; position: sticky; top: 16px; }
.nt-field { display: grid; gap: 4px; font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.nt-field select, .nt-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 400; color: var(--ink); }
.nt-names textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.nt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nt-checks { display: grid; gap: 8px; font-size: 0.92rem; }
.nt-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nt-check input { width: 18px; height: 18px; accent-color: var(--p-600); }
.nt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nt-actions .btn { cursor: pointer; }
.nt-status { flex-basis: 100%; margin: 0; font-size: 0.88rem; color: var(--muted); }
.nt-preview { display: grid; gap: 16px; min-width: 0; }
.nt-preview.is-many { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nt-sheet { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.nt-sheet svg { display: block; width: 100%; height: auto; }
.nt-notes { margin-top: 8px; }
@media (max-width: 820px) {
  .nt { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .nt-controls { position: static; }
}
@page nt-letter { size: letter; margin: 0; }
@page nt-a4 { size: A4; margin: 0; }
@media print {
  .nt-page > :not(.nt), .nt-controls { display: none !important; }
  .nt { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .nt-preview, .nt-preview.is-many { display: block; }
  .nt-sheet { break-after: page; border: 0; border-radius: 0; box-shadow: none; }
  .nt-sheet:last-child { break-after: auto; }
  .nt-preview[data-paper='letter'] .nt-sheet { page: nt-letter; width: 215.9mm; height: 279mm; }
  .nt-preview[data-paper='a4'] .nt-sheet { page: nt-a4; width: 210mm; height: 296.5mm; }
  .nt-sheet svg { width: 100%; height: 100%; }
}

/* /bingo-number-caller: the called number in big type with its letter, the last calls, and a board of every number (5 rows of 15 for 75 balls, 9 rows of 10 for 90). Full screen keeps the number and the board. */
.bingo { display: grid; gap: 18px; margin: 8px 0 40px; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.bingo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; }
.bingo-current { display: grid; place-items: center; align-content: center; width: clamp(150px, 40vw, 230px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ink); background: #fff; line-height: 1; color: var(--ink); }
.bingo.has-letter .bingo-current { background: var(--p-50); }
.bingo-letter { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; color: var(--p-600); }
.bingo-letter:empty { display: none; }
.bingo-number { font-size: clamp(3.4rem, 14vw, 6rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.bingo-side { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.bingo-progress { margin: 0; font-weight: 600; color: var(--ink); }
.bingo-last-label { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.bingo-last { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; margin: 0; padding: 0; list-style: none; }
.bingo-last li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--p-50); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bingo-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bingo-call { min-width: 160px; font-size: 1.1rem; }
.bingo-board { display: grid; gap: 4px; max-width: 100%; overflow-x: auto; }
.bingo-row { display: grid; grid-template-columns: repeat(var(--bingo-cols, 15), minmax(0, 1fr)); gap: 4px; }
.bingo-board[data-board-size='75'] .bingo-row { --bingo-cols: 16; }
.bingo-board[data-board-size='90'] .bingo-row { --bingo-cols: 10; }
.bingo-row-letter, .bingo-cell { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border-radius: 8px; font-size: clamp(0.62rem, 2.2vw, 1.05rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.bingo-row-letter { background: var(--ink); color: #fff; font-weight: 700; }
.bingo-cell { border: 1px solid var(--line); background: #fff; color: var(--muted); }
.bingo-cell.is-called { border-color: var(--p-600); background: var(--p-600); color: #fff; }
.bingo-cell.is-last { border-color: var(--s-500); background: var(--s-500); }
.bingo-board[data-board-size='90'] { max-width: 560px; margin: 0 auto; width: 100%; }
.bingo-options { display: grid; justify-items: center; gap: 12px; }
.bingo-options .chips { justify-content: center; align-items: center; }
.bingo-options .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.bingo-every { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--body); }
.bingo-every select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.bingo:fullscreen { align-content: center; border: 0; border-radius: 0; box-shadow: none; overflow: auto; }
.bingo:fullscreen .bingo-current { width: min(34vh, 40vw); }
.bingo:fullscreen .bingo-number { font-size: min(14vh, 14vw); }
.bingo:fullscreen .bingo-letter { font-size: min(6vh, 6vw); }
.bingo:fullscreen .bingo-board { width: min(100%, 150vh); margin: 0 auto; }
.bingo:fullscreen .bingo-options { display: none; }
/* Sound cues have a visual twin: the ball shakes while the cage rattles, the new number pops, and Bingo! shows a banner with confetti. */
.bingo { position: relative; }
.bingo-win-btn { min-width: 120px; font-size: 1.1rem; background: var(--s-500); border-color: var(--s-500); }
.bingo-win-btn:hover { background: var(--s-600); border-color: var(--s-600); }
.bingo.is-rolling .bingo-current { animation: bingo-shake 0.15s linear infinite; }
.bingo-current.is-new { animation: bingo-pop 0.35s ease-out; }
.bingo-win { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 16px; border: 3px solid var(--s-500); border-radius: var(--radius); background: var(--s-100); text-align: center; overflow: hidden; }
.bingo-win[hidden] { display: none; }
.bingo-win-title { margin: 0; font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--s-600); animation: bingo-pop 0.5s ease-out; }
.bingo-win-note { margin: 0; max-width: 46ch; font-weight: 600; color: var(--ink); }
.bingo-win .btn { position: relative; z-index: 1; }
.bingo-confetti { position: absolute; inset: 0; pointer-events: none; }
.bingo-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)); animation: bingo-fall 2.4s ease-in var(--d) 2 both; }
@keyframes bingo-shake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
@keyframes bingo-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bingo-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0.2; transform: translateY(260px) rotate(calc(var(--r) * -8)); } }
@media (prefers-reduced-motion: reduce) {
  .bingo.is-rolling .bingo-current, .bingo-current.is-new, .bingo-win-title { animation: none; }
  .bingo.is-rolling .bingo-current { border-style: dashed; }
  .bingo-confetti i { animation: none; opacity: 1; top: auto; bottom: 6px; }
}
.bingo-notes { margin-top: 8px; }

/* /number-line-generator (src/tools/number-line-generator.tsx): the form, then the lines as SVG. Print shows the lines alone, sized to fit US Letter and A4. */
.nl-tool { display: grid; gap: 18px; margin: 8px 0 40px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.nl-controls { display: grid; gap: 14px; }
.nl-controls .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.nl-read-aloud { display: inline-flex; align-items: center; gap: 6px; }
.nl-read-aloud input { accent-color: var(--p-600); }
.nl-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px; }
.nl-field { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.nl-field[hidden] { display: none; }
.nl-field input, .nl-field select { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 0.95rem; font-weight: 400; color: var(--ink); }
.nl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl-actions .btn { margin-left: auto; }
.nl-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 0.92rem; }
.nl-error[hidden] { display: none; }
.nl-print-head { display: none; }
.nl-sheet { display: grid; gap: 14px; }
.nl-line { cursor: pointer; border-radius: 10px; }
.nl-line:hover { background: var(--p-50); }
.nl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-axis, .nl-tick { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.nl-tick { stroke-width: 2.5; }
.nl-arrow { fill: var(--ink); }
.nl-label, .nl-frac text { fill: var(--ink); font-family: inherit; font-weight: 600; }
.nl-label { text-anchor: middle; }
.nl-frac-bar { stroke: var(--ink); stroke-width: 2; }
.nl-hop { fill: none; stroke: #e11d48; stroke-width: 3; }
.nl-hop-head { fill: #e11d48; }
.nl-hop-label { fill: #e11d48; text-anchor: middle; font-family: inherit; font-weight: 700; }
.nl-pending { fill: var(--p-300); fill-opacity: 0.6; stroke: var(--p-600); stroke-width: 2; }
.nl-notes { margin-top: 8px; }
.nl-notes ul + p { margin-top: 12px; }
@page nl-sheet { size: auto; margin: 12mm; }
@media print {
  .nl-page > :not(.nl-tool), .nl-controls { display: none !important; }
  .nl-tool { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .nl-paper { page: nl-sheet; width: 180mm; margin: 0 auto; }
  .nl-print-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8mm; font-size: 14pt; font-weight: 700; color: #000; }
  .nl-print-head span + span { font-size: 11pt; font-weight: 400; }
  .nl-sheet { gap: 10mm; }
  .nl-line { break-inside: avoid; }
  .nl-line:hover { background: none; }
  .nl-pending { display: none; }
  .nl-axis, .nl-tick, .nl-frac-bar { stroke: #000; }
  .nl-arrow, .nl-label, .nl-frac text { fill: #000; }
  .nl-hop, .nl-hop-head, .nl-hop-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* /multiplication-chart: the chart sizes itself to its box (--cell, from the number of columns), lights the row and column under the pointer, and prints on one page of Letter or A4. */
.mchart { display: grid; gap: 14px; margin: 8px 0 40px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.mchart-controls { display: grid; justify-items: center; gap: 10px; }
.mchart-controls .chips { justify-content: center; }
.mchart-controls .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.mchart-read-aloud { display: inline-flex; align-items: center; gap: 6px; }
.mchart-read-aloud input { accent-color: var(--p-600); }
.mchart-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.mchart-row select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.mchart-readout { margin: 0; min-height: 1.6em; text-align: center; font-size: clamp(1.05rem, 4vw, 1.35rem); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mchart-sheet { display: grid; justify-items: center; gap: 6px; }
.mchart-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.mchart-name { display: none; margin: 0; }
.mchart-scroll { width: 100%; container-type: inline-size; overflow-x: auto; }
.mchart-grid { --cell: clamp(24px, calc((100cqi - 2px) / (var(--n) + 1)), 54px); margin: 0 auto; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; font-size: max(10px, calc(var(--cell) * 0.38)); color: var(--ink); }
.mchart-grid th, .mchart-grid td { width: var(--cell); height: var(--cell); padding: 0; border: 1px solid #cfc8e3; text-align: center; vertical-align: middle; }
.mchart-grid th { background: var(--p-100); color: var(--p-900); font-weight: 700; }
.mchart-grid .mchart-corner { background: var(--p-600); color: #fff; }
.mchart-grid td { background: #fff; cursor: pointer; }
.mchart.mchart-color .mchart-grid td { background: hsl(var(--h, 0) 85% 95%); }
.mchart.mchart-color .mchart-grid td.is-square { background: hsl(var(--h, 0) 80% 85%); font-weight: 700; }
.mchart-grid td.is-hidden { background: #fff !important; }
.mchart-grid td.is-shown { color: var(--p-600); font-weight: 700; }
.mchart-grid .is-table { background: #fde68a !important; font-weight: 700; }
.mchart-grid .is-row, .mchart-grid .is-col { background: var(--p-200) !important; }
.mchart-grid th.is-row, .mchart-grid th.is-col { background: var(--p-600) !important; color: #fff; }
.mchart-grid td.is-cell { background: var(--p-600) !important; color: #fff; font-weight: 700; }
.mchart-notes { margin-top: 8px; }
@media print {
  .mchart-controls, .mchart-readout { display: none !important; }
  .mchart { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .mchart, .mchart * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mchart-sheet { break-inside: avoid; gap: 0.08in; }
  .mchart-title { font-size: 16pt; }
  .mchart[data-fill='blank'] .mchart-name, .mchart[data-fill='some'] .mchart-name { display: block; font-size: 11pt; margin-bottom: 0.08in; }
  .mchart-scroll { overflow: visible; container-type: normal; }
  /* 6.9in wide fits Letter (7.3in inside the margins) and A4 (7.07in); the chart is square, so it is 6.9in tall too. */
  .mchart-grid { --cell: calc(6.9in / (var(--n) + 1)); font-size: calc(var(--cell) * 0.4); }
  .mchart-grid td { cursor: auto; }
}

/* /word-search-maker: the form beside the sheet on a wide screen, the sheet below it on a phone. The grid is SVG; print shows the puzzle on one page of Letter or A4 and the answer key on the next. */
.wsm-tool { display: grid; gap: 24px; margin: 8px 0 40px; }
@media (min-width: 900px) { .wsm-tool { grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; } }
.wsm-controls { display: grid; gap: 14px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.wsm-field { display: grid; gap: 6px; font-weight: 500; color: var(--ink); }
.wsm-field input, .wsm-field select, .wsm-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; color: var(--ink); }
.wsm-field textarea { resize: vertical; min-height: 9em; line-height: 1.4; }
.wsm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.wsm-set { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.wsm-set legend { width: 100%; padding: 0; margin-bottom: 6px; font-weight: 500; color: var(--ink); }
.wsm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wsm-check input { width: 18px; height: 18px; accent-color: var(--p-600); }
.wsm-report { padding: 10px 12px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-size: 0.9rem; }
.wsm-report p { margin: 0; }
.wsm-report p + p { margin-top: 4px; }
.wsm-sheets { display: grid; gap: 24px; min-width: 0; }
.wsm-sheet { padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.wsm-sheet-title { margin: 0 0 4px; text-align: center; font-size: 1.5rem; color: var(--ink); overflow-wrap: anywhere; }
.wsm-name { margin: 0 0 14px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.wsm-grid svg { display: block; width: 100%; max-width: 620px; margin: 0 auto; font-family: inherit; }
.wsm-grid text { font-size: 6px; font-weight: 600; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.wsm-grid .wsm-frame { fill: none; stroke: var(--ink); stroke-width: 0.5; }
.wsm-grid .wsm-band { stroke-width: 7.4; stroke-linecap: round; opacity: 0.45; }
.wsm-band-0 { stroke: #fbbf24; } .wsm-band-1 { stroke: #34d399; } .wsm-band-2 { stroke: #60a5fa; } .wsm-band-3 { stroke: #f472b6; } .wsm-band-4 { stroke: #a78bfa; } .wsm-band-5 { stroke: #fb923c; }
.wsm-bank-box h3 { margin: 18px 0 8px; text-align: center; font-size: 1rem; color: var(--ink); }
.wsm-bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.wsm-number { margin: 14px 0 0; text-align: right; color: var(--muted); font-size: 0.8rem; }
.wsm-key .wsm-grid svg { max-width: 360px; }
.wsm-notes { margin-top: 8px; }
@media (max-width: 480px) { .wsm-row { grid-template-columns: 1fr; } .wsm-sheet { padding: 16px 10px; } }
@media print {
  .wsm-tool { display: block; margin: 0; }
  .wsm-sheets { display: block; }
  .wsm-sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; break-inside: avoid; }
  .wsm-sheet, .wsm-sheet * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .wsm-sheet-title { font-size: 20pt; }
  .wsm-name { font-size: 11pt; color: #000; margin-bottom: 0.15in; }
  /* 6.3in square leaves room for the title and a word bank of 30 words on Letter (9.8in inside the margins) and A4. */
  .wsm-grid svg { width: 6.3in; max-width: none; }
  .wsm-key { break-before: page; }
  .wsm-key .wsm-grid svg { width: 6.3in; max-width: none; }
  .wsm-bank { grid-template-columns: repeat(4, 1fr); font-size: 11pt; }
  .wsm-number { font-size: 9pt; }
}

/* /voice-level-chart, /group-role-cards, /transition-cards (ClassroomCards): the controls, then the sheets as they print.
   Print shows the sheets alone, one to a page, 180 x 250 mm so they fit both US Letter and A4 inside 12 mm margins. */
.cards-tool { display: grid; gap: 16px; margin: 8px 0 40px; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.cards-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cards-controls .btn { margin-left: auto; }
.cards-controls .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.cards-check { display: inline-flex; align-items: center; gap: 6px; }
.cards-check input { accent-color: var(--p-600); }
.cards-field { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; }
.cards-field input { width: 70px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: center; }
.cards-count { margin: 0; color: var(--muted); font-size: 0.88rem; }
.cards-sheet { width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 180 / 250; display: flex; flex-direction: column; gap: 3%; padding: 3%; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #000; container-type: inline-size; }
.cards-sheet[hidden], .cards-card[hidden] { display: none; }
.cards-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3cqw; }
.cards-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 3cqw; border: 1.2cqw solid var(--card); border-radius: 4cqw; text-align: center; }
.card-icon { width: 18cqw; height: 18cqw; flex: none; }
.cards-tool, .cards-tool * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cards-notes { margin-top: 8px; }
/* Voice levels: one row a level, the number in a coloured square. */
.vl-title { margin: 0; font-size: 8cqw; font-weight: 700; text-align: center; }
.vl-levels { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 2cqw; margin: 0; padding: 0; list-style: none; }
.vl-level { display: flex; align-items: center; gap: 4cqw; padding: 0 4cqw 0 0; border: 1cqw solid var(--card); border-radius: 4cqw; overflow: hidden; }
.vl-num { align-self: stretch; display: grid; place-items: center; width: 24cqw; background: var(--card); color: #fff; font-size: 17cqw; font-weight: 700; line-height: 1; }
.vl-level .card-icon { width: 15cqw; height: 15cqw; }
.vl-words { display: grid; gap: 1cqw; }
.vl-name { font-size: 7cqw; font-weight: 700; color: var(--card); line-height: 1.1; }
.vl-line { font-size: 3.6cqw; }
/* Role cards: six a page, each with its job and a thing to say. */
.rc-sheet + .rc-sheet { display: none; }
.rc-group { margin: 0; font-size: 4cqw; font-weight: 700; }
.rc-name { font-size: 6cqw; font-weight: 700; color: var(--card); line-height: 1.1; }
.rc-job { font-size: 3.2cqw; }
.rc-says { font-size: 3.2cqw; font-style: italic; }
/* Transition cards: a big number or an icon; the first-then board is two boxes. */
.tc-sheet + .tc-sheet { margin-top: 8px; }
.tc-big { font-size: 22cqw; font-weight: 700; line-height: 1; color: var(--card); }
.tc-name { font-size: 6cqw; font-weight: 700; color: var(--card); line-height: 1.1; }
.tc-box { flex: 1; display: flex; flex-direction: column; border: 1.2cqw solid var(--card); border-radius: 4cqw; overflow: hidden; }
.tc-box-head { padding: 2cqw 4cqw; background: var(--card); color: #fff; font-size: 9cqw; font-weight: 700; }
/* Under each tool page (tools/_page_end): the questions teachers ask, each opening on a click, and the day it last changed. */
.tool-faq { margin: 8px 0 16px; }
.tool-faq details { border-bottom: 1px solid var(--line); }
.tool-faq summary { cursor: pointer; padding: 10px 0; }
.tool-faq summary h3 { display: inline; margin: 0; font-size: 1rem; }
.tool-faq details p { margin: 0 0 12px; }
.tool-updated { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; }
/* The line after a board tool to a printable for the class (tools/_companion). */
.tool-companion { margin: 0 0 24px; font-size: 0.95rem; color: var(--muted); }
/* The language switcher of a tool page that comes in other languages (tools/_langs). */
.tool-langs { margin: -8px 0 12px; font-size: 0.85rem; color: var(--muted); }
.tool-langs a { color: var(--muted); }
.tool-langs a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }
@page cards-sheet { size: auto; margin: 12mm; }
@media print {
  .cards-tool { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .cards-controls, .cards-count, .cards-notes { display: none !important; }
  .cards-sheet { page: cards-sheet; width: 180mm; max-width: none; height: 250mm; aspect-ratio: auto; margin: 0 auto; padding: 0; border: 0; border-radius: 0; break-inside: avoid; }
  .cards-sheet + .cards-sheet { break-before: page; }
  .rc-sheet + .rc-sheet { display: flex; }
  .cards-sheet[hidden], .rc-sheet + .rc-sheet[hidden] { display: none; }
  .tc-sheet + .tc-sheet { margin-top: 0; }
}

/* /classroom-tools: a card for each tool, with its drawing (src/tools/thumbs.tsx) on top. */
.prose ul.tool-cards { max-width: none; list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.prose ul.tool-cards li { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); transition: transform 0.15s ease; }
.prose ul.tool-cards li:hover { transform: translateY(-2px); }
.tool-thumb { display: block; line-height: 0; border-bottom: 1px solid var(--line); }
.tool-thumb svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.tool-card-body { padding: 14px 16px 16px; }
.prose .tool-card-body h3 { margin: 0 0 6px; font-size: 1.1rem; }
.prose .tool-card-body h3 a { color: var(--ink); text-decoration: none; }
.prose .tool-card-body h3 a:hover { color: var(--p-600); }
.prose .tool-card-body p { margin: 0; font-size: 0.92rem; }
.prose .tool-card-body .tool-pages { margin-top: 8px; font-size: 0.85rem; }
@media (max-width: 560px) {
  .prose ul.tool-cards li { flex-direction: row; }
  .tool-thumb { flex: 0 0 112px; border-bottom: 0; border-right: 1px solid var(--line); }
  .tool-thumb svg { height: 100%; aspect-ratio: auto; min-height: 90px; }
  .tool-card-body { padding: 12px 14px; }
}

/* The site-wide sound control on tool pages (src/tools/sound-control.tsx): mute and volume. */
.sound-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sound-control .chip { cursor: pointer; font: inherit; font-size: 0.88rem; }
.sound-volume { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.sound-volume input { width: 110px; accent-color: var(--p-600); }

/* Page heroes: the Skills, Curricula and Pricing pages open with a soft band, a kicker and the title. */
.page-hero { margin: 4px 0 32px; padding: 34px 36px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(700px 300px at 100% 0%, #ede9fe 0%, transparent 70%), radial-gradient(500px 260px at 0% 100%, #ffedd5 0%, transparent 70%), #fff; }
.page-hero h1 { margin: 6px 0 10px; text-wrap: balance; }
.page-hero-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--s-100); color: #9a3412; font-size: 0.8rem; font-weight: 600; }
@media (max-width: 640px) { .page-hero { padding: 24px 20px; border-radius: 18px; } }

/* /skills: a sticky list of groups beside the groups' cards; on a phone the list is a row of chips. */
.skills-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.skill-jump { position: sticky; top: 88px; display: grid; gap: 18px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; scrollbar-width: thin; }
.skill-jump h2 { margin: 0 10px 6px; color: var(--tone-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; }
.skill-jump a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--ink); font-size: 0.9rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.skill-jump a:hover { background: var(--tone-bg); color: var(--tone-ink); }
.skill-jump small { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.skill-group { scroll-margin-top: 90px; }
.skill-group + .skill-group { margin-top: 48px; }
.skill-group-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; padding-left: 16px; border-left: 4px solid var(--tone); }
.skill-group-head h2 { font-size: 1.45rem; }
.skill-group-subject { color: var(--tone-ink); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.skill-group-meta { margin-top: 2px; color: var(--muted); font-size: 0.88rem; }
.skill-group-head .text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--tone-ink); text-decoration: none; white-space: nowrap; }
.skills-main .hub-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.skill-card { display: flex; gap: 6px; }
.skill-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skill-card-foot { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.skill-card-grades { padding: 2px 10px; white-space: nowrap; border-radius: 999px; background: var(--tone-bg); color: var(--tone-ink); font-weight: 600; }
.skill-card-foot .icon { margin-left: auto; color: var(--tone); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.skill-card:hover .skill-card-foot .icon { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .skills-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .skill-jump > div { min-width: 0; }
  .skill-jump { position: static; max-height: none; overflow: visible; padding: 0; border: 0; background: none; }
  .skill-jump ul { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
  .skill-jump h2 { margin: 0 0 8px; }
  .skill-jump a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; white-space: nowrap; }
}

/* /curricula */
.curricula-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.curriculum-card { gap: 10px; padding: 24px; }
.curriculum-card h2 { font-size: 1.4rem; }
.curriculum-card > p { color: var(--muted); font-size: 0.95rem; }
.curriculum-card-top { display: flex; align-items: center; gap: 12px; }
.curriculum-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--tone-bg); color: var(--tone-ink); font-weight: 700; letter-spacing: 0.02em; }
.curriculum-place { color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.curriculum-subjects { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.curriculum-subjects li { padding: 3px 10px; border-radius: 999px; background: var(--p-50); color: var(--body); font-size: 0.8rem; font-weight: 500; }
.curriculum-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.curriculum-card-foot strong { color: var(--ink); font-weight: 600; }
.curriculum-go { display: inline-flex; align-items: center; gap: 4px; color: var(--tone-ink); font-weight: 600; }
.curriculum-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; counter-reset: step; }
.curriculum-steps li { position: relative; padding: 22px 22px 22px 70px; border-radius: var(--radius); background: #f7f5fe; counter-increment: step; }
.curriculum-steps li::before { content: counter(step); position: absolute; top: 20px; left: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--p-600); color: #fff; font-weight: 700; }
.curriculum-steps h3 { margin-bottom: 4px; }
.curriculum-steps p { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 820px) { .curriculum-steps { grid-template-columns: minmax(0, 1fr); } }

/* /pricing */
.pricing-hero { margin: 8px auto 36px; max-width: 760px; text-align: center; }
.pricing-hero h1 { margin: 10px 0 12px; font-size: clamp(2rem, 4.8vw, 2.9rem); text-wrap: balance; }
.pricing-hero .lead { margin: 0 auto; }
.pricing-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; color: var(--ink); font-size: 0.9rem; font-weight: 500; }
.pricing-points li::before { content: '✓'; margin-right: 6px; color: var(--p-600); font-weight: 700; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 64px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.plan-card h2 { margin: 0; color: var(--p-700); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.plan-for { margin-top: -6px; color: var(--muted); font-size: 0.9rem; }
.plan-main { border: 2px solid var(--p-600); background: linear-gradient(180deg, #f5f3ff 0%, #fff 45%); box-shadow: 0 24px 50px -22px rgb(124 58 237 / 0.5); }
.plan-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--p-600); color: #fff; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.plan-price { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.plan-price span { color: var(--muted); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; }
.plan-alt { margin: -6px 0 0; padding: 6px 12px; align-self: start; border-radius: 999px; background: var(--p-100); color: var(--p-700); font-size: 0.88rem; font-weight: 600; }
.plan-main .plan-price { padding-bottom: 0; border-bottom: 0; }
.plan-main .plan-alt { margin: 0 0 4px; }
.pricing-faq { margin: 0 0 64px; }
.pricing-faq > h2 { margin-bottom: 20px; text-align: center; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.faq-grid > div { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq-grid h3 { margin-bottom: 6px; }
.faq-grid p { font-size: 0.95rem; }
.pricing-org { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: start; padding: 36px; border-radius: 24px; background: radial-gradient(600px 280px at 100% 0%, #ede9fe 0%, transparent 70%), var(--p-50); scroll-margin-top: 90px; }
.pricing-org-intro h2 { margin-bottom: 10px; }
.pricing-org-intro > p { margin-bottom: 16px; }
.pricing-org .org-form, .pricing-org .pricing-sent { padding: 24px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.pricing-org .org-form button { padding: 12px 28px; }
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .plan-main { order: -1; }
  .faq-grid, .pricing-org { grid-template-columns: minmax(0, 1fr); }
  .pricing-org { padding: 24px 20px; gap: 20px; }
}

/* Skill hubs: the hero with a fan of the first sheets, the sets, then about, levels, tips and curricula; where next is in the browse column. */
.hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; }
.hub-hero .page-hero-kicker { background: var(--tone-bg); color: var(--tone-ink); }
.hub-hero .lead { max-width: 62ch; }
.hub-hero .reviewed-by { margin-top: 14px; }
.hub-fan { position: relative; height: 250px; }
.hub-fan img { position: absolute; top: 50%; left: 50%; width: 58%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 40px -18px rgb(76 29 149 / 0.5); }
.hub-fan img:nth-child(1) { transform: translate(-95%, -50%) rotate(-8deg); }
.hub-fan img:nth-child(2) { transform: translate(-50%, -54%) rotate(1deg); z-index: 1; }
.hub-fan img:nth-child(3) { transform: translate(-5%, -48%) rotate(8deg); }
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 32px; }
.hub-set { scroll-margin-top: 90px; }
.hub-set:first-of-type { margin-top: 8px; }
.hub-about, .hub-notes-levels, .hub-tips-box, .hub-related { margin-top: 56px; }
.hub-about h2, .hub-notes-levels h2, .hub-tips-box h2, .hub-related h2 { margin-bottom: 14px; font-size: 1.35rem; }
.hub-about-text { display: grid; gap: 12px; max-width: 75ch; }
.hub-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 0; counter-reset: hub-step; }
.hub-steps li { position: relative; padding: 20px 20px 20px 66px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; counter-increment: hub-step; }
.hub-steps li::before { content: counter(hub-step); position: absolute; top: 18px; left: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--p-600); color: #fff; font-weight: 700; }
.hub-steps h3 { margin-bottom: 4px; }
.hub-steps p { color: var(--body); font-size: 0.93rem; line-height: 1.55; }
.hub-tips-box { padding: 28px 30px; border-radius: 22px; background: radial-gradient(500px 240px at 100% 0%, #ffedd5 0%, transparent 70%), var(--p-50); }
.hub-tips-box .ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 32px; margin: 0; }
.hub-tips-box .ticks li { margin: 0; }
.hub-related { padding-top: 28px; border-top: 1px solid var(--line); }
.hub-related > p:first-of-type { max-width: 75ch; }
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: minmax(0, 1fr); }
  .hub-fan { display: none; }
}

/* Tool embeds (src/tools/embed.tsx): the tool alone, for an iframe on another site, and the box with its code on the tool's page. */
body.embed { background: var(--bg, #fff); }
body.embed .page { padding-top: 12px; padding-bottom: 8px; }
body.embed .page > :not(section) { display: none; }
body.embed .page > section ~ section { display: none; }
.embed-credit { margin: 0; padding: 6px 16px 10px; text-align: center; font-size: 0.85rem; }
.embed-credit a { color: var(--muted); }
.embed-box { margin: 32px 0 8px; padding: 20px 24px; border-radius: 16px; background: var(--p-50); max-width: 75ch; }
.embed-box h2 { margin: 0 0 8px; font-size: 1.2rem; }
.embed-code { width: 100%; box-sizing: border-box; font: 0.85rem/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; resize: vertical; background: #fff; }
.embed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.embed-note { font-size: 0.9rem; color: var(--muted); margin: 10px 0 0; }

/* Save to Pinterest (src/views/layout.tsx, PinSave). */
.pin-save { display: flex; align-items: center; gap: 16px; margin: 32px 0 8px; padding: 14px 18px; border-radius: 16px; background: var(--p-50); max-width: 75ch; }
.pin-save img { flex: none; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.pin-save p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* "How to teach" guides (src/views/teaching-guides.tsx). */
.guide-steps li { margin-bottom: 12px; }
.guide-grade { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--p-100); color: var(--p-700); font-size: 0.8rem; font-weight: 600; vertical-align: 1px; }
.teaching-guide .ws-grid { margin: 16px 0 8px; }

/* School board registration pages (src/views/boards.tsx): Stepsies' own look, never the board's. */
.board .board-fact { margin: 0 0 18px; }
.board .board-fact > p { margin: 0 0 6px; }
.board .board-cite { font-size: 0.86rem; color: var(--muted); margin: 0; }
.board .board-cite a { color: inherit; }
.board .board-links { list-style: none !important; padding-left: 0 !important; display: grid; gap: 6px !important; margin: 8px 0 12px; }
.board .board-links span { color: var(--muted); }
.board .age-table .this-year { background: var(--p-50); font-weight: 600; }
.board .age-calc { display: grid; gap: 6px; max-width: 34rem; margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.board .age-calc label { font-weight: 600; color: var(--ink); }
.board .age-calc input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; max-width: 14rem; }
.board .age-calc output { min-height: 1.4em; color: var(--ink); }
.board .board-ready, .board .board-others { display: grid; gap: 6px; }
.board .board-table th a { font-weight: 600; }

/* The share row (shared/_share.html.erb), under a page's print buttons or its title */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.share-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; margin-right: 2px; }
.share button.chip { font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.share button[hidden] { display: none; }
.ws-download .share { justify-content: center; margin-top: 4px; }

/* School math methods for parents (/math-methods, MethodFigure). */
.method-figure { display: block; max-width: 100%; height: auto; font-family: inherit; }
.math-method figure { margin: 16px 0 20px; }
.method-hero { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.method-aka { color: var(--muted); }
.method-steps figure { margin: 12px 0 4px; }
.prose ul.method-cards { max-width: none; list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.method-cards li { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.method-cards figure { margin: 0; height: 150px; display: flex; align-items: center; justify-content: center; }
.method-cards .method-figure { max-height: 150px; width: auto; }
.prose .method-cards h2 { margin: 0 0 6px; font-size: 1.1rem; }
.method-cards h2 a { color: var(--ink); text-decoration: none; }
.method-cards p { margin: 0; font-size: 0.92rem; }