@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root{
  --bg:#F7F6F2;
  --surface:#FFFFFF;
  --surface-2:#F1EFE9;
  --passage-bg:#FBF8EE;
  --surface-3:#E7E5DD;
  --border:rgba(20,20,18,0.12);
  --border-2:rgba(20,20,18,0.22);
  --ink:#141412;
  --text:#1C1C1A;
  --text-2:#5C5B55;
  --text-3:#8C8B83;
  --green-50:#EAF3EC; --green-500:#2E7D52; --green-600:#246343; --green-700:#1B4A32;
  --maroon-50:#F6E9EB; --maroon-500:#8C2F3B; --maroon-700:#6A2531;
  --blue-50:#E8F0F7; --blue-500:#2C6E9C; --blue-700:#1F5076;
  --amber-50:#FBF0DC; --amber-100:#F2DFB6; --amber-700:#8A5A12;
  --coral-50:#FBEEEA; --coral-100:#F6DCD3; --coral-500:#C96A4E; --coral-600:#B0563C;
  --sage-50:#EEF3EC; --sage-500:#6E8A5E;
  --primary:#246343;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --font:'Inter',-apple-system,system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --shadow-card:0 2px 14px rgba(20,20,18,0.05);
  --shadow-lift:0 10px 30px rgba(20,20,18,0.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

* {
  box-sizing: border-box;
}

html {
  /* Reserve the scrollbar track at all times. Without this, opening a panel or
     expanding a details section makes the page tall enough to need a scrollbar,
     the scrollbar appears, and every column jumps a few pixels sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* Long words, pasted prompts and student text must wrap rather than run out
     of their box. */
  overflow-wrap: break-word;
}

/* A grid or flex child defaults to min-width:auto, so long content pushes the
   track wider instead of wrapping, which is what makes text spill past a card. */
.grid > *, .layout > *, .stack > *, .row > * {
  min-width: 0;
}

/* A pasted URL or a run of characters with no space in it has a min-content
   width equal to the whole run, which widens every track above it and pushes
   the page sideways. Letting the text itself break anywhere keeps min-content
   small, so the fix stops at the text and never squashes a button. */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote, td, th,
span, label, .prompt, .qprompt, .meta, .chip, .option {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Controls are exempt. A button label is short and known, and breaking it
   mid-word to save space makes the control unreadable rather than tidy. */
button, .btn, .kind, select, option,
.nm, .name, .brand, .logo {
  overflow-wrap: normal;
}

.shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.panel {
  width: min(100%, 560px);
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.logo {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0;
}

.copy {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.btn:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.primary {
  background: var(--primary);
  color: var(--surface);
}

.ghost {
  border: 1px solid var(--border-2);
  background: var(--surface);
}

@media (max-width: 560px) {
  .panel {
    padding: 24px;
  }

  h1 {
    font-size: 34px;
  }
}

/* Phones. The teacher pages are built from a handful of small grids that hold
   their columns at any width, which is what squeezes buttons to half a thumb on
   a 375px screen. Below 720px every one of them becomes a single column. Each
   page carries its own inline styles that load after this file, so these rules
   are written with body in front to win on specificity. The grid property is
   inert on anything that is not a grid, so the generic names are safe here. */
@media (max-width: 720px) {
  body .row,
  body .row2,
  body .wrap,
  body .form-row,
  body .qrow,
  body .srow,
  body .list-actions,
  body .card-actions,
  body .live-grid,
  body .split,
  body .two,
  body .cols {
    grid-template-columns: 1fr;
  }

  body .list-actions,
  body .card-actions,
  body .live-actions,
  body .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body .list-actions .btn,
  body .card-actions .btn,
  body .live-actions .btn,
  body .actions .btn {
    /* Two to a row on a phone, not a tower of full-width buttons. */
    flex: 1 1 130px;
    min-height: 44px;
  }

  body .form-row.cols2,
  body .form-row.cols3,
  body .form-row.cols4 {
    grid-template-columns: 1fr;
  }

  /* The top bar is a single non-wrapping row, so on a narrow phone its last
     button hangs off the edge and drags the whole page sideways. */
  body .appbar {
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }

  body .btn {
    min-height: 40px;
  }

  body table {
    display: block;
    overflow-x: auto;
  }

  body input,
  body select,
  body textarea {
    max-width: 100%;
  }
}