/* Orthos Spelling — single stylesheet.
   Phase 1: just enough chrome to make the auth + dashboard flow look
   like a real product. Heat-map and chart styles arrive in Phase 2. */

:root {
  color-scheme: light;

  /* Brand palette. Editorial cream paper, deep plum ink, teal accent.
     Pure white feels clinical; the warm paper tone is forgiving and
     elegant. */
  --ink:          #2D1B3D;
  --ink-soft:     #3D2F4A;
  --warm:         #6B636E;
  --warm-soft:    #94909A;

  --paper:        #F7F3EC;   /* page background — warm cream */
  --paper-deep:   #EFE9DF;   /* subtle section tint */
  --card:         #FFFFFF;
  --card-shadow:  0 1px 2px rgba(45, 27, 61, 0.04),
                  0 4px 18px rgba(45, 27, 61, 0.04);
  --card-hover-shadow: 0 2px 4px rgba(45, 27, 61, 0.06),
                       0 8px 28px rgba(45, 27, 61, 0.08);
  --line:         #E8E1D4;   /* warm line */
  --line-soft:    #F0EBE0;

  --teal:         #2C7A6B;
  --teal-d:       #1F5A4F;
  --teal-soft:    #E0EEEC;
  --teal-faint:   #F0F7F5;

  --plum:         #6B4E87;
  --plum-soft:    #EFEAF3;

  --amber:        #C79450;
  --amber-soft:   #F6ECDA;
  --correct:      #3F7A4A;
  --correct-soft: #E8F1EA;
  --error:        #9A3B2E;
  --error-soft:   #F6E4E1;

  /* Category palette (V/C/S/O) — used by the engine + heat map +
     mock landing page. Living here so it's editable in one place. */
  --cat-v:        #4A7CA6;
  --cat-v-soft:   #E2EAF2;
  --cat-c:        #B85C50;
  --cat-c-soft:   #F6E4E1;
  --cat-s:        #C79450;
  --cat-s-soft:   #FAEFD8;
  --cat-o:        #3F7A4A;
  --cat-o-soft:   #E8F1EA;

  /* Motion tokens — single timing + easing across the whole UI.
     The 'slow' variant is for layout shifts (modal/panel open). */
  --t-fast:       0.12s ease;
  --t-normal:     0.18s ease;
  --t-slow:       0.28s cubic-bezier(0.2, 0, 0, 1);

  /* Focus halo — applied uniformly to interactive elements. */
  --focus-ring:   0 0 0 3px var(--teal-soft);

  /* Minimum interactive size — 44px is the Apple HIG + WCAG floor. */
  --tap:          44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Uniform keyboard-focus halo. :focus-visible means it appears only
   on keyboard navigation, not mouse clicks — so click targets don't
   get a halo on press, but Tab navigation always does. */
:where(a, button, summary, [role="button"],
       input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

a {
  color: var(--teal-d);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
a:hover { border-bottom-color: var(--teal-d); }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: none;
}
.brand:hover { border-bottom: none; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--teal);
  color: white;
  border-radius: 8px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand-wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.brand-sub {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-d);
  margin-left: 2px;
}
.topnav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topnav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-bottom: none;
}
.topnav-link:hover { color: var(--teal-d); border-bottom: none; }
/* User-menu disclosure (Probes + Sign out live in here). Built on
   <details>/<summary> so it works without JS, including keyboard
   open/close via Enter and Space. */
.user-menu {
  position: relative;
}
.user-menu[open] > summary .user-chip-caret { transform: rotate(180deg); }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--warm);
  padding: 4px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;             /* kill default summary triangle */
  user-select: none;
}
.user-chip::-webkit-details-marker { display: none; }
.user-chip:hover { color: var(--teal-d); border-color: var(--teal); }
.user-chip-caret {
  font-size: 9px;
  line-height: 1;
  transition: transform var(--t-normal);
  color: var(--warm);
}
.user-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(20, 25, 35, 0.08);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 50;
}
.user-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}
.user-menu-link:hover {
  background: var(--teal-soft, #E8F2F0);
  color: var(--teal-d);
  border-bottom: none;
}
.user-menu-form { display: contents; margin: 0; }

/* ============================================================
   Page shell
   ============================================================ */

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 32px 80px;
}

.page-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 40px;
  font-size: 12.5px;
  color: var(--warm);
  text-align: center;
  border-top: 1px solid var(--line);
}
.page-footer a { color: var(--warm); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn:hover { border-bottom: 1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}
.btn[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: orthos-spin 0.7s linear infinite;
}
@keyframes orthos-spin {
  to { transform: rotate(360deg); }
}

.btn-primary {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: white;
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover {
  background: var(--paper);
  border-color: var(--teal);
  color: var(--teal-d);
}

.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-block { display: block; width: 100%; text-align: center; }

.btn-danger {
  background: var(--card);
  color: var(--error);
  border-color: var(--error-soft);
}
.btn-danger:hover {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error);
}

/* Danger zone disclosure (delete-class) — pushed below the add-student
   form on the sidebar, opt-in via summary click. */
.danger-disclosure {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.danger-summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--warm);
  list-style: none;
  padding: 2px 0;
}
.danger-summary::-webkit-details-marker { display: none; }
.danger-summary:hover { color: var(--error); }
.danger-blurb {
  font-size: 12px;
  color: var(--warm);
  margin: 8px 0 10px;
}

.link-btn {
  font: inherit;
  font-size: 14px;
  background: none;
  border: none;
  padding: 6px 10px;
  color: var(--ink-soft);
  cursor: pointer;
}
.link-btn:hover { color: var(--teal-d); }

/* ============================================================
   Forms (auth pages)
   ============================================================ */

.auth-card {
  max-width: 460px;
  margin: 36px auto;
  padding: 38px 40px 34px;
  background: var(--card);
  border: none;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.auth-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.auth-sub {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--ink-soft);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast),
              box-shadow var(--t-fast);
  width: 100%;
  min-height: var(--tap);
}
/* Custom-styled select — replaces the native chrome dropdown arrow
   with a clean inline caret so the field matches the rest of the
   form. Still semantically a <select>; keyboard + screen reader
   behavior is preserved. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--warm) 50%),
    linear-gradient(135deg, var(--warm) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--card);
  box-shadow: var(--focus-ring);
}
.form-hint {
  font-size: 12px;
  color: var(--warm);
}

.form-error {
  background: rgba(154, 59, 46, 0.08);
  color: var(--error);
  border: 1px solid rgba(154, 59, 46, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.form-notice {
  background: var(--correct-soft);
  color: var(--correct);
  border: 1px solid rgba(63, 122, 74, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

/* 'Forgot?' link sitting inside a form-label, right-aligned. */
.form-label-aside {
  float: right;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--teal-d);
  border-bottom: none;
}
.form-label-aside:hover {
  color: var(--teal);
  border-bottom: 1px solid var(--teal);
}

/* Email-not-verified banner that appears beneath the topbar on every
   page while a user has an unverified email. Non-blocking — the app
   still works; this just nudges. */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: var(--amber-soft);
  color: var(--ink-soft);
  font-size: 13.5px;
  border-bottom: 1px solid rgba(199, 148, 80, 0.35);
}
.verify-banner strong { color: var(--ink); font-weight: 600; }
.verify-banner em {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
}
.verify-banner-form { margin: 0; display: inline; }
.verify-banner-btn {
  background: var(--card);
  border: 1px solid var(--amber);
  color: var(--amber);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.verify-banner-btn:hover {
  background: var(--amber);
  color: white;
}
.verify-banner-btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.7;
}

/* Generic notice that sits at the top of a page (e.g. after resend). */
.page-notice {
  background: var(--teal-faint);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  padding: 10px 16px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.auth-alt {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--warm);
}

/* ============================================================
   Landing page
   ============================================================ */

.landing-hero {
  text-align: center;
  padding: 32px 0 24px;
}
.landing-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 12px;
}
.landing-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 16px;
}
.landing-title em {
  font-style: italic;
  color: var(--teal-d);
}
.landing-lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 32px;
}
.landing-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

/* Split hero: pitch on the left, mock heat map on the right. Stacks
   under 1000px so the mockup keeps its proportions on tablets. */
.landing-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: center;
  text-align: left;
  padding: 36px 0 28px;
}
.landing-hero-split .landing-title {
  font-size: 38px;
  line-height: 1.12;
  margin-bottom: 14px;
}
.landing-hero-split .landing-lede { margin: 0 0 22px; max-width: 50ch; }
.landing-hero-split .landing-cta-row { justify-content: flex-start; gap: 12px; }
.landing-trust {
  margin-top: 14px;
  font-size: 13px;
  color: var(--warm);
}
.landing-hero-text { min-width: 0; }
.landing-hero-preview { min-width: 0; }
@media (max-width: 1000px) {
  .landing-hero-split { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .landing-hero-split .landing-cta-row { justify-content: center; }
  .landing-hero-split .landing-lede { margin-left: auto; margin-right: auto; }
}

/* Mock heat-map card — uses real cat-pill / heat-cell classes so it
   actually looks like a screenshot of the product. */
.mock-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(20, 25, 35, 0.08);
  padding: 16px 18px;
  font-size: 13px;
}
.mock-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, #F0EBF2);
}
.mock-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.mock-eyebrow-meta {
  font-size: 11px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.mock-heat {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.mock-heat th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm);
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.mock-heat th:first-child { text-align: left; }
.mock-heat td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-soft, #F0EBF2);
}
.mock-heat tbody tr:last-child td { border-bottom: none; }
.mock-word {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.mock-rate, .mock-rate-head {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  color: var(--warm);
}
.mock-heat .heat-cell { text-align: center; min-width: 0; }
.mock-card-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft, #F0EBF2);
  font-size: 11px;
  color: var(--warm);
}

/* How-it-works numbered strip */
.landing-howitworks {
  margin: 56px 0 32px;
  text-align: center;
}
.landing-howitworks-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 0 0 28px;
  color: var(--ink);
}
.landing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}
@media (max-width: 800px) { .landing-steps { grid-template-columns: 1fr; } }
.landing-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 22px 20px;
}
.landing-step-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.landing-step h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink);
}
.landing-step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.landing-final-cta {
  margin: 56px 0 24px;
  padding: 32px 24px;
  text-align: center;
  background: var(--teal-soft, #E8F2F0);
  border-radius: 12px;
}
.landing-final-cta h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
}

.landing-features {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
.landing-feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 20px 24px;
}
.landing-feature h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink);
}
.landing-feature p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   Dashboard (placeholder)
   ============================================================ */

.dash-hero {
  margin-bottom: 24px;
}
.dash-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 6px;
}
.dash-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
}
.dash-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ============================================================
   Home dashboard (Round 4 — editorial rebuild)
   ============================================================
   Design intent: calm, confident, generous breathing room. Serif
   typography does the structural work. No bordered boxes —
   differentiation comes from subtle background tints, soft
   shadows, and rhythm. The teal accent earns its appearance. */

/* Hero + KPIs sit side-by-side at full width so the top of the page
   uses the horizontal space the page shell now affords. Collapses
   to stacked on narrow screens. */
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  margin: 20px 0 28px;
}
@media (max-width: 900px) {
  .home-top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}

.home-hero {
  margin: 10px 0 0;
  padding: 0 4px;
}
.home-hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  text-transform: capitalize;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.home-hero-eyebrow time { color: inherit; }
.home-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--ink);
}
.home-hero-sub {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.home-hero-sub strong {
  color: var(--ink);
  font-weight: 600;
}

/* KPI strip — tabular numerals, soft divider lines, no borders.
   Sits on the right of the hero at full width; collapses below it
   on narrow screens. */
.home-kpis {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 18px 24px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.kpi {
  flex: 1 1 0;
  padding: 4px 18px;
  min-width: 0;
}
.kpi-value {
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 12.5px;
  color: var(--warm);
  margin-top: 6px;
}
.kpi-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  flex: 0 0 1px;
}
@media (max-width: 760px) {
  .home-kpis { flex-wrap: wrap; gap: 18px 0; }
  .kpi { flex-basis: 50%; }
  .kpi-divider { display: none; }
}

/* Section heading shared by Recent + Your blocks. */
.home-section { margin: 0 0 36px; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.home-section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
}
.home-section-link {
  font-size: 13.5px;
  color: var(--teal-d);
  border-bottom: none;
}
.home-section-link:hover { color: var(--teal); border-bottom: none; }
.home-section-actions { display: flex; align-items: center; gap: 14px; }
.ghost-link {
  font-size: 13.5px;
  color: var(--warm);
  border-bottom: none;
  padding: 6px 0;
}
.ghost-link:hover { color: var(--teal-d); border-bottom: none; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* Recent activity grid — 3 cards with real progress bars. */
.recent-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .recent-grid { grid-template-columns: 1fr; } }
.recent-card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.recent-card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-1px);
}
.recent-link {
  display: block;
  padding: 18px 20px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.recent-link:hover { border-bottom: none; }
.recent-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
  font-variant-numeric: tabular-nums;
}
.recent-probe {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 8px 0 4px;
  /* Two-line truncate so long auto-generated names don't blow up
     the card height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-class {
  font-size: 13.5px;
  color: var(--warm);
}
.recent-progress {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.recent-bar {
  height: 6px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.recent-bar-fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width var(--t-slow);
}
.recent-card.is-empty .recent-bar-fill { background: var(--warm-soft); }
.recent-card.is-complete .recent-bar-fill { background: var(--correct); }
.recent-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  gap: 8px;
}
.recent-count {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.recent-state {
  font-size: 11.5px;
  color: var(--warm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recent-card.is-complete .recent-state { color: var(--correct); }

/* Block (class) grid. 2-up, cleaner than the old rectangle. */
.block-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .block-grid { grid-template-columns: 1fr; } }
.block-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
  position: relative;
  overflow: hidden;
}
.block-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--teal);
  opacity: 0.7;
  transition: opacity var(--t-normal);
}
.block-card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-1px);
}
.block-card:hover::before { opacity: 1; }
.block-link {
  display: block;
  padding: 20px 24px 20px 26px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.block-link:hover { border-bottom: none; }
.block-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.block-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.006em;
  margin: 0;
  color: var(--ink);
}
.block-arrow {
  color: var(--warm);
  font-size: 16px;
  transition: transform var(--t-normal), color var(--t-normal);
}
.block-card:hover .block-arrow {
  color: var(--teal);
  transform: translateX(3px);
}
.block-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  font-size: 13px;
  color: var(--warm);
}
.block-meta-dot { color: var(--warm-soft); }
.block-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.block-bottom-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.block-bottom-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm);
}
.block-bottom-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
}
.block-bottom-row-quiet { margin-top: 4px; }
.block-bottom-probe {
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}
.block-bottom-count {
  font-size: 12.5px;
  color: var(--warm);
}
.block-bottom-empty {
  font-size: 13px;
  color: var(--warm);
  font-style: italic;
}

/* Empty state (no classes yet) */
.home-empty {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 36px 32px;
  text-align: left;
  max-width: 640px;
}
.home-empty h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.home-empty p {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Wraps the /sessions index list in a soft-shadow card so it matches
   the rest of the editorial language. */
.sessions-index-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 8px 22px;
  margin-top: 18px;
}

/* Filter strip above the sessions list — class chips + search box. */
.sessions-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.sessions-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filter-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  transition: background var(--t-normal), color var(--t-normal);
}
.filter-chip:hover {
  background: var(--teal-faint);
  color: var(--teal-d);
  border-bottom: none;
}
.filter-chip.is-active {
  background: var(--teal);
  color: white;
}
.sessions-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sessions-search-input {
  font: inherit;
  font-size: 13.5px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  min-width: 200px;
}
.sessions-search-input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--card);
  box-shadow: 0 0 0 2px var(--teal-soft);
}
.sessions-search-clear {
  font-size: 12.5px;
  color: var(--warm);
  border-bottom: none;
}
.sessions-search-clear:hover { color: var(--error); border-bottom: none; }

/* Probe library grid — denser than block cards, since you're shopping
   through word lists. */
.probe-grid {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.probe-card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.probe-card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-1px);
}
.probe-link {
  display: block;
  padding: 18px 22px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.probe-link:hover { border-bottom: none; }
.probe-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.probe-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--ink);
}
.probe-arrow {
  color: var(--warm);
  transition: color var(--t-normal), transform var(--t-normal);
}
.probe-card:hover .probe-arrow { color: var(--teal); transform: translateX(2px); }
.probe-meta {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm);
  margin-top: 6px;
}
.probe-preview {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Recommendations (Round 6 — "What to teach next")
   ============================================================
   Closes the loop between data and instruction: each ranked subtype
   gets a card with the pattern / hypothesis / activity surfaced
   inline. Lives inside the session results page and (single-card
   variant) the student profile. */

.recs-panel {
  margin: 0 0 18px;
}
.results-right .recs-panel { margin-top: 0; }
.recs-head { margin-bottom: 14px; }
.recs-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 6px;
}
.recs-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink);
}
.recs-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 64ch;
}
.recs-sub strong { color: var(--ink); font-weight: 600; }

.recs-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rec-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 24px 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.rec-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--teal);
  opacity: 0.5;
}
.rec-card-single {
  grid-template-columns: 1fr;
  padding: 24px 26px 22px;
}
.rec-rank {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--teal-d);
  letter-spacing: -0.02em;
}
.rec-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rec-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--ink);
}
.rec-count {
  font-size: 12px;
  color: var(--warm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rec-fields {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 18px;
  font-size: 14px;
  line-height: 1.55;
}
.rec-fields dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
  margin-top: 8px;
}
.rec-fields dd {
  margin: 0;
  color: var(--ink-soft);
  margin-top: 8px;
}
@media (max-width: 700px) {
  .rec-fields { grid-template-columns: 1fr; }
  .rec-fields dt { margin-top: 12px; }
  .rec-fields dd { margin-top: 2px; }
}
.rec-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.rec-more summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-d);
  list-style: none;
  padding: 4px 0;
}
.rec-more summary::-webkit-details-marker { display: none; }
.rec-more summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--t-normal);
}
.rec-more[open] summary::before { transform: rotate(90deg); }
.rec-more summary:hover { color: var(--teal); }

/* ============================================================
   Class accuracy trend (Round 6)
   ============================================================ */

/* Trend-inline: trend snapshot rendered inside an already-shadowed
   panel (the class-main card), so it gets no chrome of its own —
   just a hairline separator below. */
.trend-inline {
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line-soft);
}
.trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.trend-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
}
.trend-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.trend-now-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.trend-now-meta {
  font-size: 12.5px;
  color: var(--warm);
}
.trend-svg {
  display: block;
  width: 100%;
  height: 80px;
  margin: 4px 0 6px;
}
.trend-foot {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  font-size: 12px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.trend-delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--warm);
}
.trend-delta.is-up { color: var(--correct); }
.trend-delta.is-down { color: var(--error); }

/* ============================================================
   Student longitudinal view (/student/<id>)
   ============================================================ */

/* Sibling-student chip strip — sits above the hero so you can jump
   between kids in the same class without bouncing back to the
   roster. Soft pill bar, no card chrome of its own. */
.stu-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 16px;
  padding: 6px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.stu-switcher-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  transition: background var(--t-normal), color var(--t-normal);
}
.stu-switcher-chip:hover {
  background: var(--teal-faint);
  color: var(--teal-d);
  border-bottom: none;
}
.stu-switcher-chip.is-active {
  background: var(--teal);
  color: white;
}

.stu-overview-hero {
  display: grid;
  grid-template-columns: 64px 1fr repeat(3, auto);
  gap: 22px;
  align-items: center;
  margin: 22px 0 26px;
  padding: 22px 26px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
@media (max-width: 900px) {
  .stu-overview-hero {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 14px 18px;
  }
}
.stu-overview-avatar {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-d) 100%);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.stu-overview-text { min-width: 0; }
.stu-overview-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 4px;
}
.stu-overview-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--ink);
}
.stu-overview-meta {
  font-size: 14px;
  color: var(--warm);
}
.stu-overview-stat {
  text-align: center;
  padding-left: 22px;
  border-left: 1px solid var(--line);
  min-width: 110px;
}
.stu-overview-stat-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stu-overview-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .stu-overview-stat {
    border-left: none;
    padding-left: 0;
    text-align: left;
    grid-column: span 2;
    border-top: 1px solid var(--line-soft);
    padding-top: 10px;
  }
}

/* Accuracy sparkline — bigger than the class one, gets its own panel */
.stu-trend-svg {
  display: block;
  width: 100%;
  height: 130px;
  margin: 6px 0 10px;
}

/* Two-column body: timeline left, recent errors + rec right */
.stu-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1000px) {
  .stu-overview-grid { grid-template-columns: 1fr; }
}
.stu-overview-side > * + * { margin-top: 18px; }

/* Session timeline list inside the left panel */
.stu-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stu-timeline-row {
  border-bottom: 1px solid var(--line-soft);
}
.stu-timeline-row:last-child { border-bottom: none; }
.stu-timeline-link {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 8px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  transition: background var(--t-normal);
}
.stu-timeline-link:hover { background: var(--teal-faint); border-bottom: none; }
.stu-timeline-date {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.stu-timeline-probe {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.stu-timeline-sub {
  font-size: 12.5px;
  color: var(--warm);
  margin-top: 2px;
}
.stu-timeline-score { text-align: right; }
.stu-timeline-pct {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stu-timeline-row.is-strong .stu-timeline-pct { color: var(--correct); }
.stu-timeline-row.is-warn .stu-timeline-pct { color: var(--error); }
.stu-timeline-frac {
  font-size: 11.5px;
  color: var(--warm);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* Recent classified errors list (sidebar) */
.stu-error-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stu-error-row { border-bottom: 1px solid var(--line-soft); }
.stu-error-row:last-child { border-bottom: none; }
.stu-error-link {
  display: block;
  padding: 12px 4px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
  transition: background var(--t-normal);
}
.stu-error-link:hover { background: var(--teal-faint); border-bottom: none; }
.stu-error-words {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
}
.stu-error-target { font-weight: 500; color: var(--ink); }
.stu-error-arrow { color: var(--warm-soft); }
.stu-error-attempt { color: var(--error); font-style: italic; }
.stu-error-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--warm);
  flex-wrap: wrap;
}
.stu-error-subtype { color: var(--ink-soft); }
.stu-error-date {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ============================================================
   Probe view extras (Run-with picker + Where-used list)
   ============================================================ */

.probe-runwith-sub {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.probe-runwith-list,
.probe-uses-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.probe-runwith-row,
.probe-uses-row {
  border-bottom: 1px solid var(--line-soft);
}
.probe-runwith-row:last-child,
.probe-uses-row:last-child { border-bottom: none; }

.probe-runwith-link,
.probe-uses-link {
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 18px;
  padding: 12px 6px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  transition: background var(--t-normal);
  border-bottom: none;
}
.probe-runwith-link:hover,
.probe-uses-link:hover {
  background: var(--teal-faint);
  border-bottom: none;
}

.probe-runwith-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.probe-runwith-meta,
.probe-uses-class {
  font-size: 12.5px;
  color: var(--warm);
  text-align: right;
}
.probe-runwith-arrow,
.probe-uses-arrow {
  color: var(--warm);
  font-size: 16px;
  transition: color var(--t-normal), transform var(--t-normal);
}
.probe-runwith-link:hover .probe-runwith-arrow,
.probe-uses-link:hover .probe-uses-arrow {
  color: var(--teal-d);
  transform: translateX(2px);
}

/* Where-used row: 4 cells (date / class / count / arrow). */
.probe-uses-link {
  grid-template-columns: 100px 1fr auto 20px;
}
.probe-uses-date {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.probe-uses-class {
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
}
.probe-uses-count {
  font-size: 12px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}

/* Inline rename disclosure on probe detail */
.rename-disclosure { margin-top: 14px; max-width: 540px; }
.rename-summary {
  display: inline-block;
  cursor: pointer;
  font-size: 13px;
  color: var(--warm);
  list-style: none;
  padding: 4px 0;
}
.rename-summary::-webkit-details-marker { display: none; }
.rename-summary:hover { color: var(--teal-d); }
.rename-disclosure[open] .rename-summary { color: var(--ink-soft); }
.rename-form {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.rename-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.rename-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal-soft);
}

/* Compact dashboard hero used on /dashboard. Title on the left,
   quick-action buttons on the right so creation flows are reachable
   without scrolling. */
.dash-hero-compact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.dash-hero-compact .dash-title { font-size: 26px; margin-bottom: 2px; }
.dash-hero-text { flex: 1 1 auto; min-width: 0; }
.dash-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .dash-hero-compact { flex-direction: column; align-items: flex-start; }
}

/* ---- 'Focus this week' panel ----
   Amber-tinted call-out at the top of the dashboard showing the
   priority words from the most-recent session. Lives above 'Pick
   up where you left off' so the actionable thing is the first thing
   you see. */
.focus-panel {
  background: linear-gradient(135deg, var(--amber-soft) 0%, var(--card) 100%);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.focus-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.focus-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2px;
}
.focus-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--ink);
}
.focus-link {
  font-size: 13px;
  color: var(--teal-d);
  border-bottom: none;
}
.focus-link:hover { border-bottom: 1px solid var(--teal-d); }

.focus-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.focus-word {
  background: var(--card);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.focus-word-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
}
.focus-word-rate {
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.004em;
}
.focus-word-frac {
  font-size: 11.5px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}

/* Wrapper for the '+ New probe' button on /probes (the library page). */
.library-actions { margin: 16px 0 24px; }

/* ============================================================
   Class grid (dashboard) — packs cards via auto-fit minmax so we
   get 4-across at full width and reflow to 2 / 1 at smaller widths
   without media-query gymnastics. The card style itself lives in
   .block-card (used by templates). The legacy .class-card-* rules
   were removed in the audit cleanup pass.
   ============================================================ */
.class-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ============================================================
   Breadcrumb (back link)
   ============================================================ */

.breadcrumbs {
  margin: 0 0 12px;
  font-size: 13.5px;
}
.breadcrumbs a {
  color: var(--warm);
  border-bottom: none;
}
.breadcrumbs a:hover {
  color: var(--teal-d);
  border-bottom: 1px solid var(--teal-d);
}

/* ============================================================
   Class detail page
   ============================================================ */

.class-hero {
  margin-bottom: 32px;
}
/* Editorial hero on /class/<id>. Matches the dashboard rhythm: small
   eyebrow, large Fraunces title, meta line, action CTA on the right.
   No bottom border — section heads do the dividing inside. */
.class-hero-compact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0 26px;
  padding: 0 4px;
}
.class-hero-compact .class-hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.class-hero-compact .class-hero-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--ink);
}
.class-hero-compact .class-hero-meta {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}
.class-hero-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .class-hero-compact { flex-direction: column; align-items: flex-start; }
}

/* Two-column layout: sessions (main) + roster (sidebar). */
.class-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .class-layout { grid-template-columns: 1fr; }
}
.class-main, .class-side {
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 24px;
}
.class-side { padding: 18px 20px; }
.class-section-count {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  margin-left: 6px;
}

/* Compact roster list — first name + 'x' archive icon, no row glow. */
.roster-compact {
  list-style: none;
  margin: 6px 0 18px;
  padding: 0;
}
.roster-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.roster-compact-row:last-child { border-bottom: none; }
.roster-compact-name {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
  transition: color var(--t-normal);
}
.roster-compact-name:hover {
  color: var(--teal-d);
  border-bottom: none;
}
.roster-compact-archive {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--warm);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.roster-compact-archive:hover {
  background: var(--error-soft);
  color: var(--error);
}
.class-empty-side { font-size: 13px; margin-bottom: 12px; }
.add-student-form-side .add-student-input {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.class-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 4px;
}
.class-hero-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
  color: var(--ink);
}
.class-hero-meta {
  font-size: 13.5px;
  color: var(--warm);
}

.class-section {
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.class-section-head {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.class-section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.006em;
  margin: 0;
  color: var(--ink);
}

.class-empty {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--warm);
}

/* ---- Add student inline form (used inside the class roster sidebar) */
.student-archive-form { display: inline; margin: 0; }
.add-student-form { margin-top: 8px; }
.add-student-input {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.add-student-input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

/* ============================================================
   Form layout extras
   ============================================================ */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .add-student-row { flex-direction: column; }
}

/* ============================================================
   Probe forms + view
   ============================================================ */

.probe-words-input {
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.probe-words-input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

/* ---- Category pills used across many surfaces ---- */
.cat-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.cat-V { background: #E2EAF2; color: #3D6A93; }
.cat-C { background: #F6E4E1; color: #8A4035; }
.cat-S { background: #FAEFD8; color: #8A5A1A; }
.cat-O { background: #E8F1EA; color: #2D5C3A; }

/* ---- Category summary tiles on probe view ---- */
/* Shared soft-shadow panel used across probe view + session pages. */
.panel {
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 26px;
  margin-bottom: 18px;
}
.panel-head {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--ink);
}

.cat-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-summary-tile {
  text-align: center;
  padding: 16px 12px;
  border-radius: 12px;
  border: none;
}
.cat-summary-tile-V { background: #E2EAF2; }
.cat-summary-tile-C { background: #F6E4E1; }
.cat-summary-tile-S { background: #FAEFD8; }
.cat-summary-tile-O { background: #E8F1EA; }
.cat-summary-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cat-summary-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ---- Probe word list — multi-column at wide widths so a 20-word
   probe doesn't look like an empty stretch of paper. */
.probe-word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: 28px;
}
@media (max-width: 700px) {
  .probe-word-list { column-count: 1; }
}
.probe-word-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  break-inside: avoid;
}
.probe-word-row:last-child { border-bottom: none; }
.probe-word-num {
  text-align: right;
  color: var(--warm);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.probe-word-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  color: var(--ink);
}
.probe-word-cat-name {
  font-size: 12.5px;
  color: var(--warm);
}

/* ---- Editorial sessions list (used on /sessions and /class/<id>).
   No card chrome — lives inside a panel that already has shadow.
   Subtle row separators, generous padding, gentle teal hover wash.
   Scans as date / probe + class / progress / arrow at full width.
   ============================================================ */
.session-flat-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
}
.session-flat-row {
  border-bottom: 1px solid var(--line-soft);
}
.session-flat-row:last-child { border-bottom: none; }
.session-flat-link {
  display: grid;
  grid-template-columns: 96px 1fr 156px 20px;
  gap: 22px;
  align-items: center;
  padding: 16px 6px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  transition: background var(--t-normal);
}
.session-flat-link:hover {
  background: var(--teal-faint);
}
.session-flat-date {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.session-flat-probe {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.session-flat-meta {
  font-size: 12.5px;
  color: var(--warm);
  margin-top: 3px;
}
.session-flat-progress {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.session-flat-count {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.session-flat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm);
}
.session-flat-row.is-complete .session-flat-label { color: var(--correct); }
.session-flat-row.is-empty   .session-flat-label { color: var(--warm); }
.session-flat-arrow {
  font-size: 18px;
  color: var(--warm);
  text-align: right;
}
.session-flat-link:hover .session-flat-arrow { color: var(--teal-d); }
@media (max-width: 700px) {
  .session-flat-link {
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px 14px;
  }
  .session-flat-progress { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; gap: 10px; }
  .session-flat-arrow { display: none; }
}

/* ============================================================
   Entry surfaces (run-probe wizard)
   ============================================================ */

/* Whole entry surface is constrained to a readable width so the
   banner, student tabs, word form, and action buttons all align as
   one focused workspace instead of the previous mismatch where the
   form was 680px but the banner/tabs spanned the full page. */
.entry-surface {
  max-width: 720px;
  margin: 0 auto;
}
.entry-hero { margin: 28px 0 22px; padding: 0 4px; }
.entry-hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.entry-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.entry-hero-meta {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.entry-flash {
  margin: 0 0 18px;
  padding: 12px 18px;
  background: var(--correct-soft);
  border-radius: 10px;
  font-size: 14px;
  color: var(--correct);
  font-weight: 500;
}

/* ---- Per-student tab strip ----
   Soft-shadowed pill bar, no border. Each chip rounded; active gets
   the teal fill, complete gets a tint + checkmark. */
.entry-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 10px 12px;
  background: var(--card);
  border: none;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.entry-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  border-bottom: none;
  transition: background var(--t-normal), color var(--t-normal);
}
.entry-tab:hover {
  background: var(--teal-faint);
  color: var(--teal-d);
  border-bottom: none;
}
.entry-tab.is-active {
  background: var(--teal);
  color: white;
}
.entry-tab.is-complete:not(.is-active) {
  background: var(--correct-soft);
  color: var(--correct);
}
.entry-tab.is-complete:not(.is-active)::after {
  content: "✓";
  font-weight: 700;
  margin-left: 2px;
}
.entry-tab-name { font-weight: 500; }
.entry-tab-score {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.entry-tab:not(.is-active) .entry-tab-score {
  background: var(--card);
  color: var(--warm);
}

/* ---- Active student banner ---- */
.entry-active-banner {
  background: var(--card);
  border: none;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 16px 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.entry-active-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 2px;
}
.entry-active-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.entry-active-meta {
  font-size: 13px;
  color: var(--warm);
  max-width: 360px;
  text-align: right;
  line-height: 1.45;
}

/* ---- Word entry grid ---- */
/* Single column on purpose. Words flow strictly top-to-bottom so the
   tab order matches what you read (1, 2, 3, …) instead of the old
   2-column zigzag that made data entry feel hostile. Cap the width
   on wide screens so the form stays readable. */
.entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 10px 24px;
}
.entry-row {
  display: grid;
  grid-template-columns: 36px 1fr 1.6fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.entry-row:last-child { border-bottom: none; }
.entry-num {
  text-align: right;
  color: var(--warm);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.entry-target {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.entry-input {
  font: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  transition: border-color var(--t-normal), background var(--t-normal),
              box-shadow var(--t-normal);
}
.entry-input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.entry-input.is-correct {
  border-color: var(--correct);
  background: var(--correct-soft);
  color: var(--correct);
}
.entry-input.is-error {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--error);
}

/* ---- Submit footer ---- */
.entry-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============================================================
   Session-complete summary
   ============================================================ */

.session-summary {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.session-summary-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.session-summary-row:last-child { border-bottom: none; }
.session-summary-row:nth-child(even) { background: var(--paper); }
.session-summary-name { font-weight: 500; }
.session-summary-score { color: var(--ink-soft); font-size: 13px; }
.session-summary-score.is-empty { color: var(--warm); font-style: italic; }
.session-summary-edit {
  font-size: 12.5px;
  padding: 3px 10px;
  color: var(--teal-d);
}
.session-complete-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   Results / Student / Heat-map (the four-tab insights UI)
   ============================================================ */

.results-hero { margin: 28px 0 18px; padding: 0 4px; }
.results-hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.results-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ink);
}
.results-hero-meta {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- Four-tab strip ----
   Quiet ink-on-paper tabs, teal underline for the active one.
   No background pill — keeps the page rhythm calm. */
.four-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 26px;
}
.four-tab {
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 16px;
  color: var(--warm);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-normal), border-color var(--t-normal);
}
.four-tab:hover {
  color: var(--teal-d);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.four-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--teal);
}
.four-tab.is-disabled {
  color: var(--warm-soft);
  pointer-events: none;
}

/* ---- Priority callout ----
   Amber tint with no hard border. Reads like an editorial pull-quote. */
.priority-callout {
  background: var(--amber-soft);
  border-radius: 12px;
  padding: 16px 22px;
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.priority-callout strong { color: var(--ink); }
.priority-callout em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.priority-link {
  color: var(--teal-d);
  font-weight: 500;
  margin-left: 6px;
}

/* ---- Stat-tile grid ----
   Big serif numerics, no boxes. Tiles read as data, not chrome. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 28px;
  padding: 22px 28px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
@media (max-width: 700px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 0;
    padding: 20px 22px;
  }
}
.stat-tile {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 20px;
  position: relative;
}
.stat-tile + .stat-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 8px;
}
.stat-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-num-text { font-size: 20px; letter-spacing: -0.008em; }
.stat-sub {
  font-size: 12px;
  color: var(--warm);
  margin-top: 6px;
}
.stat-good .stat-num { color: var(--correct); }
.stat-warn .stat-num { color: var(--error); }

/* Results page: two-column body so charts (left) and recommendations
   (right) are visible together at full page width. Stacks under
   ~1000px so each panel keeps its breathing room. */
.results-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 1000px) {
  .results-body { grid-template-columns: 1fr; }
}
.results-left, .results-right { min-width: 0; }
.results-left > * + * { margin-top: 18px; }

/* ---- Chart panels — soft-shadowed cards with breathing room ---- */
.chart-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
/* Inside the narrower left column on the results page, stack charts so
   each gets full width and student labels stay readable. */
.results-left .chart-grid {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.results-left .chart-grid .chart-canvas { height: 260px; }
@media (max-width: 700px) {
  .chart-grid { grid-template-columns: 1fr; }
}
.chart-panel {
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 24px;
}
.chart-panel h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.004em;
  margin: 0 0 2px;
  color: var(--ink);
}
.panel-sub {
  font-size: 12.5px;
  color: var(--warm);
  margin: 0 0 14px;
}
.panel-empty {
  font-size: 13.5px;
  color: var(--warm);
  font-style: italic;
  text-align: center;
  padding: 28px 0;
  margin: 0;
}
.chart-canvas {
  height: 240px;
  position: relative;
}

/* ---- Subtype list — ranked errors below the charts ---- */
.subtype-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.subtype-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.subtype-row:last-child { border-bottom: none; }
.subtype-num {
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  color: var(--warm);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.subtype-name {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.subtype-count {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--teal-d);
  font-variant-numeric: tabular-nums;
}

/* ---- Student profile ---- */
/* ---- Student switcher chips ---- */
.student-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 6px;
  background: var(--card);
  border: none;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.stu-tab {
  font-size: 13px;
  padding: 6px 13px;
  background: transparent;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-normal), color var(--t-normal);
}
.stu-tab:hover {
  background: var(--teal-faint);
  color: var(--teal-d);
  border-bottom: none;
}
.stu-tab.is-active {
  background: var(--teal);
  color: white;
}
.stu-tab .stu-score {
  background: rgba(255,255,255,0.22);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stu-tab:not(.is-active) .stu-score {
  background: var(--paper-deep);
  color: var(--warm);
}

/* ---- Student headline card ----
   Avatar + name + 2 big stat tiles, set inside a soft-shadow card. */
.stu-card {
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 26px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 20px;
  align-items: center;
}
.stu-avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-d) 100%);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.stu-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 0;
  color: var(--ink);
}
.stu-name-link {
  color: inherit;
  border-bottom: none;
  transition: color var(--t-normal);
}
.stu-name-link:hover { color: var(--teal-d); border-bottom: none; }
.stu-meta-link {
  font-size: 12.5px;
  color: var(--teal-d);
  border-bottom: none;
}
.stu-meta-link:hover { color: var(--teal); border-bottom: 1px solid var(--teal); }
.stu-meta {
  font-size: 13px;
  color: var(--warm);
  margin-top: 3px;
}
.stu-bigstat {
  text-align: center;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.stu-bigstat-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stu-bigstat-num.amber { color: var(--amber); }
.stu-bigstat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm);
  margin-top: 6px;
}

/* ---- Word-by-word table ---- */
.word-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 13.5px;
}
.word-table th {
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
}
.word-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.word-table tr:last-child td { border-bottom: none; }
.word-table tr.row-miss td { background: rgba(154, 59, 46, 0.04); }
.word-target {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 13.5px;
}
.word-attempt {
  color: var(--error);
  font-style: italic;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
}
.checkmark { color: var(--correct); font-weight: 700; }

/* ---- Heat map ---- */
.heatmap-wrap {
  overflow-x: auto;
  border: none;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--card-shadow);
  padding: 8px 10px;
}
.heatmap {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.heatmap th, .heatmap td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  white-space: nowrap;
}
.heatmap th:first-child, .heatmap td:first-child {
  text-align: left;
  font-weight: 500;
  padding-left: 16px;
  padding-right: 14px;
}
.heatmap th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
  border-bottom: 1px solid var(--line);
}
.heatmap tr:last-child td { border-bottom: none; }
.heatmap-priority {
  background: rgba(199, 148, 80, 0.08);
}
.heat-cell {
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.heat-cell.miss {
  background: var(--error-soft);
  color: var(--error);
  font-weight: 700;
}
.heat-cell.hit {
  background: var(--correct-soft);
  color: var(--correct);
  font-weight: 700;
}
.heat-cell.heat-cell-empty {
  background: var(--paper-deep);
  color: var(--warm-soft);
}
.miss-rate-cell {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--warm);
  border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.priority-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: white;
  background: var(--amber);
  padding: 3px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ============================================================
   Heat map — clarity layer
   ============================================================
   The hint paragraph explains what the category pill means (most-
   common error type, not 'this word is a vowel word' — which is what
   teachers reasonably assumed before the fix). */
.heatmap-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 16px;
  line-height: 1.55;
}
.heatmap-hint .heat-cell {
  width: auto;
  padding: 0 6px;
  font-size: 11px;
  height: auto;
  border-radius: 4px;
}
.heatmap-hint .cat-pill { vertical-align: middle; }

.heat-cat-cell {
  white-space: nowrap;
  text-align: center;
}
.heat-cat-share {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}

/* Per-cell hover tooltip — pure CSS, no JS. On hover (desktop) or
   focus (keyboard) the tooltip pops above the cell with the student's
   actual attempt and the engine-assigned subtype. On mobile, tap
   shows it via :focus-within. */
.heatmap .heat-cell {
  position: relative;
  cursor: default;
}
.heatmap .heat-cell.miss, .heatmap .heat-cell.hit {
  cursor: help;
}
.heat-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 180px;
  max-width: 260px;
  background: var(--ink);
  color: #FAF6EC;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 6px 24px rgba(20, 25, 35, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast),
              visibility var(--t-fast);
  z-index: 100;
  white-space: normal;
}
.heat-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.heatmap .heat-cell:hover .heat-tooltip,
.heatmap .heat-cell:focus-within .heat-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* JS-applied class on cells whose tooltip would clip the sticky topbar
   if it tried to render above. Flips direction to render below. */
.heatmap .heat-cell.flip-down .heat-tooltip {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.heatmap .heat-cell.flip-down .heat-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}
.heatmap .heat-cell.flip-down:hover .heat-tooltip,
.heatmap .heat-cell.flip-down:focus-within .heat-tooltip {
  transform: translateX(-50%) translateY(0);
}
.heat-tooltip-head {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 236, 0.65);
  margin-bottom: 4px;
}
.heat-tooltip-head strong { color: #FAF6EC; font-weight: 600; }
.heat-tooltip-attempt {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  color: #FAF6EC;
  margin-bottom: 6px;
  word-break: break-all;
}
.heat-tooltip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(250, 246, 236, 0.18);
  font-size: 11.5px;
  color: rgba(250, 246, 236, 0.85);
}
.heat-tooltip-meta .cat-pill {
  /* Slightly tinted so it reads on dark background */
  filter: brightness(1.15);
}
.heat-tooltip-hit strong {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}
.heat-tooltip-hit span {
  font-size: 11.5px;
  color: rgba(250, 246, 236, 0.7);
}

/* Edge handling: tooltips near the right edge of the table can clip.
   The rightmost cells nudge their tooltip left instead of centered. */
.heatmap th:nth-last-child(-n+3) ~ td .heat-tooltip,
.heatmap td:nth-last-child(-n+3) .heat-tooltip {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.heatmap th:nth-last-child(-n+3) ~ td .heat-tooltip::after,
.heatmap td:nth-last-child(-n+3) .heat-tooltip::after {
  left: auto;
  right: 12px;
  transform: none;
}
.heatmap .heat-cell:hover .heat-tooltip,
.heatmap .heat-cell:focus-within .heat-tooltip {
  transform: translateX(-50%) translateY(0);
}
.heatmap td:nth-last-child(-n+3) .heat-cell:hover .heat-tooltip,
.heatmap td:nth-last-child(-n+3) .heat-cell:focus-within .heat-tooltip {
  transform: translateY(0);
}

/* ============================================================
   Cross-class insights (/insights)
   ============================================================ */

/* Biggest-opportunity callout — synthesizes the data into a single
   actionable recommendation. Amber gradient marks it as the page's
   primary call to action; everything else is supporting analysis. */
.opportunity-callout {
  margin: 18px 0 28px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--amber-soft) 0%, var(--card) 100%);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  position: relative;
}
.opportunity-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}
.opportunity-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ink);
}
.opportunity-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 72ch;
}
.opportunity-lede strong { color: var(--ink); font-weight: 600; }
.opportunity-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.opportunity-words-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm);
  margin-right: 4px;
}
.opportunity-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--card);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
}
.opportunity-word-rate {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.opportunity-link {
  display: inline-block;
  font-size: 14px;
  color: var(--teal-d);
  font-weight: 500;
  border-bottom: none;
}
.opportunity-link:hover {
  color: var(--teal);
  border-bottom: 1px solid var(--teal);
}

/* Pattern table rows clickable to drilldown */
.ins-pattern-clickable {
  cursor: pointer;
  transition: background var(--t-fast);
}
.ins-pattern-clickable:hover {
  background: var(--teal-faint);
}
.ins-pattern-label {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.ins-pattern-clickable:hover .ins-pattern-label {
  color: var(--teal-d);
}

/* Drilldown: per-word list with expand-to-see-students */
.drilldown-words {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.drilldown-word {
  border-bottom: 1px solid var(--line-soft);
}
.drilldown-word:last-child { border-bottom: none; }
.drilldown-word details summary {
  display: grid;
  grid-template-columns: 1fr 90px 60px 1.5fr;
  gap: 16px;
  align-items: center;
  padding: 14px 6px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast);
  border-radius: 6px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}
.drilldown-word details summary:hover {
  background: var(--teal-faint);
}
.drilldown-word details summary::-webkit-details-marker { display: none; }
.drilldown-word details summary::before {
  content: "▸";
  position: absolute;
  left: -14px;
  color: var(--warm-soft);
  font-size: 11px;
  transition: transform var(--t-fast);
}
.drilldown-word details[open] summary::before {
  transform: rotate(90deg);
}
.drilldown-word-head { position: relative; }
.drilldown-word-target {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  color: var(--ink);
}
.drilldown-word-frac {
  font-size: 12.5px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.drilldown-word-rate {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.drilldown-word-rate.is-priority { color: var(--error); }
.drilldown-word-bar {
  display: block;
  height: 6px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.drilldown-word-bar-fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
}
.drilldown-word.is-priority .drilldown-word-bar-fill { background: var(--error); }

.drilldown-students {
  list-style: none;
  margin: 0 0 14px 22px;
  padding: 10px 0 12px;
  border-top: 1px dashed var(--line-soft);
}
.drilldown-student-row {
  display: grid;
  grid-template-columns: 130px 1fr 1.4fr 1.4fr;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.drilldown-student-row:last-child { border-bottom: none; }
.drilldown-student-name {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.drilldown-student-name:hover { color: var(--teal-d); }
.drilldown-student-class {
  font-size: 12px;
  color: var(--warm);
}
.drilldown-student-attempt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink-soft);
}
.drilldown-student-attempt strong {
  color: var(--error);
  font-weight: 500;
}
.drilldown-student-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warm);
}
.drilldown-empty {
  margin: 6px 0 14px 22px;
  font-size: 13px;
  color: var(--warm);
  font-style: italic;
}

@media (max-width: 760px) {
  .drilldown-word details summary {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
  }
  .drilldown-word-bar { grid-column: 1 / -1; }
  .drilldown-student-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Tighter KPI strip on the insights page since the page itself
   carries a lot of dense data downstream. */
.ins-kpis { margin: 18px 0 24px; }

.insights-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1000px) {
  .insights-body { grid-template-columns: 1fr; }
}
.insights-left, .insights-right { min-width: 0; }
.insights-left > * + *, .insights-right > * + * { margin-top: 18px; }

/* --- Pattern table — the centerpiece. Ranked impact list with an
       inline bar so the eye can scan miss-rates in one pass. --- */
.ins-pattern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ins-pattern-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.ins-pattern-table th.num { text-align: right; }
.ins-pattern-table th.bar-col { width: 28%; }
.ins-pattern-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.ins-pattern-table tr:last-child td { border-bottom: none; }
.ins-pattern-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
}
.ins-pattern-family {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 2px;
}
.ins-pattern-label {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.ins-miss {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.ins-miss.is-warn { color: var(--error); }
.ins-pattern-bar {
  height: 8px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.ins-pattern-bar-fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
}
.ins-pattern-table tr.is-priority .ins-pattern-bar-fill {
  background: var(--error);
}

/* --- Hardest-words list --- */
.ins-word-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-word-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 14px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.ins-word-row:last-child { border-bottom: none; }
.ins-word-target {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
}
.ins-word-frac {
  font-size: 12px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.ins-word-rate {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ins-word-rate.is-priority { color: var(--error); }

/* --- Category breakdown --- */
.ins-cat-list, .ins-subtype-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-cat-row {
  margin-bottom: 12px;
}
.ins-cat-row:last-child { margin-bottom: 0; }
.ins-cat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}
.ins-cat-name {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--ink);
}
.ins-cat-count {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ins-cat-bar {
  height: 6px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.ins-cat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
}
.cat-V-fill { background: var(--cat-v); }
.cat-C-fill { background: var(--cat-c); }
.cat-S-fill { background: var(--cat-s); }
.cat-O-fill { background: var(--cat-o); }

/* --- Subtype list --- */
.ins-subtype-row {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.ins-subtype-row:last-child { border-bottom: none; }
.ins-subtype-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--warm);
}
.ins-subtype-name { color: var(--ink-soft); }
.ins-subtype-count {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--teal-d);
  font-variant-numeric: tabular-nums;
}

/* --- Per-block table --- */
.ins-block-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ins-block-table th {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
}
.ins-block-table th:first-child { text-align: left; }
.ins-block-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.ins-block-table tr:last-child td { border-bottom: none; }
.ins-block-name {
  text-align: left !important;
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  color: var(--ink);
}
.ins-block-cell {
  display: table-cell;
}
.ins-block-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ins-block-pct {
  display: block;
  font-size: 10.5px;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* ============================================================
   Print styles
   ============================================================
   Goal: any page printed (Cmd+P) renders as a clean letter-sized
   document — no topbar, no user menu, no dropdowns, no card
   shadows. Charts and tables retain color so the heat map still
   reads as a heat map on a color printer; soft backgrounds become
   plain white for ink economy. */

@media print {
  body { background: white; color: black; -webkit-print-color-adjust: exact;
         print-color-adjust: exact; }
  .topbar, .page-footer,
  .user-menu, .breadcrumbs,
  .four-tab-bar, .student-tabs, .entry-tabs,
  .stu-switcher, .sessions-filter,
  .home-section-actions, .home-quick-actions,
  .add-student-form, .danger-disclosure,
  .rename-disclosure, .rec-more,
  .focus-link, .home-section-link, .stu-meta-link {
    display: none !important;
  }
  .page { max-width: 100%; padding: 0; }
  /* Strip shadows + borders from every panel; print on paper, not chrome. */
  .home-kpis, .class-main, .class-side, .panel, .focus-panel,
  .recent-card, .block-card, .recs-panel, .rec-card,
  .stu-overview-hero, .stu-card, .chart-panel, .trend-panel,
  .heatmap-wrap, .sessions-index-card, .home-empty,
  .auth-card, .mock-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
  /* Headings: re-anchor for the printed page; large serif still reads */
  h1, h2, h3, h4 { page-break-after: avoid; }
  /* Charts can be heavy; let them squeeze rather than break */
  .chart-canvas { height: 180px !important; }
  /* Heat map cells: keep color but kill the bg color washes for tints */
  .heat-cell.miss { background: #fff !important; color: #9A3B2E !important;
                    border: 1px solid #9A3B2E !important; }
  .heat-cell.hit { background: #fff !important; color: #3F7A4A !important;
                   border: 1px solid #3F7A4A !important; }
  a { color: black; border-bottom: none !important; }
}