/* GenEx Portal.  Colours and shapes follow the mock-ups in Curtley's Phase 0 Visual
   Workflow Guide; the depth, motion and hover tips were added on 2026-10-10 (backlog 61).
   No template carries an inline style; bar lengths are SVG attributes.  Every transition
   is switched off under prefers-reduced-motion at the end of this file. */

:root {
  --navy: #16233f;
  --navy-2: #22345a;
  --teal: #12888a;
  --teal-bright: #3cc4b4;
  --teal-bg: #e3f4f3;
  --amber: #c67700;
  --amber-bg: #fdf3e1;
  --purple: #5b36b0;
  --purple-bg: #efeafb;
  --green: #157a4c;
  --green-bg: #e2f5ea;
  --red: #b3261e;
  --red-bg: #fde8e8;
  --blue: #1b56b3;
  --blue-bg: #e4edfb;
  --grey: #9aa3b5;
  --grey-bg: #e6eaf1;
  --page: #f3f5f9;
  --card: #ffffff;
  --line: #dde2ec;
  --text: #16233f;
  --muted: #5b6780;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(22, 35, 63, 0.06), 0 1px 3px rgba(22, 35, 63, 0.04);
  --shadow-2: 0 12px 28px -10px rgba(22, 35, 63, 0.22);
  --ring: 0 0 0 3px rgba(18, 136, 138, 0.28);
  --ease: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Backlog 129: the tokens a theme swaps.  Accents come twice: the plain name is for
     text and thin marks on a tint, and `-solid` for a fill that carries white text, which
     stays saturated in the dark theme where the plain one turns light. */
  --teal-solid: #12888a;
  --green-solid: #157a4c;
  --red-solid: #b3261e;
  --purple-solid: #5b36b0;
  --amber-solid: #c67700;
  --ink-fill: #16233f;
  --side-1: #16233f;
  --side-2: #0f1a30;
  --card-2: #fbfcfe;
  /* Backlog 131: a well inside a card.  The page colour served for it in light, and read
     as a black hole in dark, where the page is far darker than a card. */
  --inset: #f3f5f9;
  --band: #16233f;
  --page-2: #e8ecf3;
  --hover: #f8fafc;
  --field: #ffffff;
  --field-line: #c9d0dd;
  --grey-text: #56607a;
  --teal-wash: #f1faf9;
  --teal-line: #bfe6e1;
  --amber-line: #efc98a;
  --amber-deep: #7a4700;
  --green-line: #a9dcc0;
  --purple-line: #c9b8ef;
  --red-line: #efb4b0;
  --red-deep: #8c1d18;
  --glass: rgba(255, 255, 255, 0.75);
  --chart-wash: rgba(22, 35, 63, 0.025);
  --chart-hover: rgba(22, 35, 63, 0.04);
  color-scheme: light;
}

/* The dark theme.  Chosen by the person (`data-theme` on the page, from the `theme`
   cookie, see static/theme.js), or by their device when they have not chosen.  The two
   blocks hold the same values: CSS cannot share one block between a media query and an
   attribute without a preprocessor.  The amber and red tints are solid colours (backlog
   131): at 14% over the navy card they came out as a neutral grey, measured 50,50,55. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #16233f; --navy-2: #22345a;
    --teal: #45cdbd; --teal-bright: #5fe0cf; --teal-bg: rgba(69, 205, 189, 0.14);
    --amber: #f2b25c; --amber-bg: #3a2d17;
    --purple: #b39dfb; --purple-bg: rgba(179, 157, 251, 0.15);
    --green: #5ad69a; --green-bg: rgba(90, 214, 154, 0.14);
    --red: #ff8a80; --red-bg: #3e2228;
    --blue: #8fb4ff; --blue-bg: rgba(143, 180, 255, 0.15);
    --grey: #6f7c96; --grey-bg: #26324d;
    --page: #0b1220; --card: #131d31; --line: #26324b; --text: #e7ecf6; --muted: #9ba8c1;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 14px 32px -12px rgba(0, 0, 0, 0.6);
    --ring: 0 0 0 3px rgba(69, 205, 189, 0.38);
    --teal-solid: #10918b; --green-solid: #1b8a57; --red-solid: #c9372d;
    --purple-solid: #6b46c9; --amber-solid: #b86e00;
    --ink-fill: #33466f; --side-1: #0f1830; --side-2: #070c18;
    --card-2: #172338; --page-2: #0f1828; --hover: #19253c; --inset: #0f192b; --band: #24365c;
    --field: #0e1729; --field-line: #33415f; --grey-text: #b4bfd3;
    --teal-wash: #10282c; --teal-line: #1e4c4c;
    --amber-line: #5c4321; --amber-deep: #f6c98a; --green-line: #245a40;
    --purple-line: #4a3c7a; --red-line: #6b2f2b; --red-deep: #ffb4ab;
    --glass: rgba(19, 29, 49, 0.72);
    --chart-wash: rgba(255, 255, 255, 0.03); --chart-hover: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #16233f; --navy-2: #22345a;
  --teal: #45cdbd; --teal-bright: #5fe0cf; --teal-bg: rgba(69, 205, 189, 0.14);
  --amber: #f2b25c; --amber-bg: #3a2d17;
  --purple: #b39dfb; --purple-bg: rgba(179, 157, 251, 0.15);
  --green: #5ad69a; --green-bg: rgba(90, 214, 154, 0.14);
  --red: #ff8a80; --red-bg: #3e2228;
  --blue: #8fb4ff; --blue-bg: rgba(143, 180, 255, 0.15);
  --grey: #6f7c96; --grey-bg: #26324d;
  --page: #0b1220; --card: #131d31; --line: #26324b; --text: #e7ecf6; --muted: #9ba8c1;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 14px 32px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(69, 205, 189, 0.38);
  --teal-solid: #10918b; --green-solid: #1b8a57; --red-solid: #c9372d;
  --purple-solid: #6b46c9; --amber-solid: #b86e00;
  --ink-fill: #33466f; --side-1: #0f1830; --side-2: #070c18;
  --card-2: #172338; --page-2: #0f1828; --hover: #19253c; --inset: #0f192b; --band: #24365c;
  --field: #0e1729; --field-line: #33415f; --grey-text: #b4bfd3;
  --teal-wash: #10282c; --teal-line: #1e4c4c;
  --amber-line: #5c4321; --amber-deep: #f6c98a; --green-line: #245a40;
  --purple-line: #4a3c7a; --red-line: #6b2f2b; --red-deep: #ffb4ab;
  --glass: rgba(19, 29, 49, 0.72);
  --chart-wash: rgba(255, 255, 255, 0.03); --chart-hover: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--page);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin-bottom: 12px; }
h3 { font-size: 0.98rem; margin: 18px 0 8px; }
p { margin: 0 0 6px; }
/* Backlog 131: headings balance their lines, so no word is left alone on the last.  The
   style longhand only: the `text-wrap` shorthand also sets wrapping back on, and so undid
   every `white-space: nowrap` a list or table inherits from its parent.  `pretty` was tried
   on paragraphs and dropped: it moved words to lengthen a last line and split dates,
   "27 / Sep 17:12". */
h1, h2, h3, .q-state, .j-hint, .eyebrow { text-wrap-style: balance; }
table { border-collapse: collapse; width: 100%; }
.big, .count, .table td, .cohort, .attempt-dot, .stat { font-variant-numeric: tabular-nums; }

/* Keyboard focus is visible everywhere, and only for the keyboard. */
:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { box-shadow: var(--ring); border-radius: 8px; }

/* ------------------------------------------------------------- hover tips -- */
/* A tip lives in a data-tip attribute and needs no script.  It shows on hover and on
   keyboard focus, above the element by default; data-tip-pos="below" or "left" moves it.
   Ancestors with overflow hidden would clip it, so none of the containers that carry
   tips do; the cohort grid only scrolls below 1200px, where its tips are left to the
   screen reader text. */
/* The tip exists only while shown.  A hidden tip that still occupies its box widens the
   page: measured 2026-10-10, the review page scrolled 51px sideways from the verdict
   pills' tips at the right edge.  So `content` is set on hover and focus only, and it
   fades in by animation rather than transition. */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: var(--ink-fill); color: #fff;
  font-size: 0.8rem; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  text-transform: none; text-align: left; text-decoration: none; white-space: normal;
  width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 9px;
  box-shadow: var(--shadow-2); pointer-events: none; z-index: 30;
  animation: tip-in 160ms ease-out both;
}
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink-fill);
  pointer-events: none; z-index: 30; animation: tip-in 160ms ease-out both;
}
@keyframes tip-in { from { opacity: 0; } }
[data-tip-pos="below"]:hover::after, [data-tip-pos="below"]:focus-visible::after { bottom: auto; top: calc(100% + 9px); }
[data-tip-pos="below"]:hover::before, [data-tip-pos="below"]:focus-visible::before { bottom: auto; top: calc(100% + 4px); border-top-color: transparent; border-bottom-color: var(--ink-fill); }
/* Opens leftwards from the element's right edge: for anything near the right of a card. */
[data-tip-pos="left"]:hover::after, [data-tip-pos="left"]:focus-visible::after,
.ac-card-head [data-tip]:hover::after, .ac-card-head [data-tip]:focus-visible::after,
.unit-card-head [data-tip]:hover::after, .round-head [data-tip]:hover::after,
.round-head [data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
[data-tip-pos="left"]:hover::before, [data-tip-pos="left"]:focus-visible::before,
.ac-card-head [data-tip]:hover::before, .ac-card-head [data-tip]:focus-visible::before,
.unit-card-head [data-tip]:hover::before, .round-head [data-tip]:hover::before,
.round-head [data-tip]:focus-visible::before { left: auto; right: 14px; transform: none; }
.tip-dot {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--grey-bg); color: var(--muted); font-size: 0.72rem; font-weight: 800;
  vertical-align: 2px; margin-left: 4px; cursor: help;
  text-transform: none; letter-spacing: 0; font-family: Georgia, serif; font-style: italic;
}
.tip-dot:hover { background: var(--ink-fill); color: #fff; }

/* ------------------------------------------------------------------ shell -- */
/* Backlog 100.  The menu: a brand mark, the Admin and Tutor switch for the admin team, bold
   links on icon tiles, who is signed in and sign out at the foot, and a handle half way
   down its edge that folds it to its icons.  It stays in view while the page scrolls. */
.shell {
  --side-w: 264px;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh;
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.side {
  position: sticky; top: 0; height: 100vh; z-index: 15;
  background:
    radial-gradient(circle at 0% 0%, rgba(60, 196, 180, 0.16), transparent 45%),
    linear-gradient(180deg, var(--side-1) 0%, var(--side-2) 100%);
  color: #fff; display: flex; flex-direction: column; min-width: 0;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 8px 0 30px -18px rgba(10, 18, 36, 0.6);
}
.brand {
  display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; font-size: 1.4rem;
  font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.02em; white-space: nowrap;
}
.brand-word span { color: var(--teal-bright); }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); color: #fff;
  font-size: 1.25rem; font-weight: 900; box-shadow: 0 6px 16px -6px rgba(60, 196, 180, 0.7);
}
.brand-dark { color: var(--text); border: 0; padding: 0 0 18px; }
.brand-dark .brand-word span { color: var(--teal); }
.brand-dark .brand-mark { color: #fff; }

.view-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 16px 6px; padding: 4px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
}
.view-switch a {
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 6px;
  border-radius: 9px; color: #b9c5da; font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.view-switch a svg { width: 17px; height: 17px; flex: none; }
.view-switch a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.view-switch a.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
.view-switch a.on svg { color: var(--teal); }

.side-label {
  margin: 16px 24px 8px; color: #7f8daa; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
}
.side nav { padding: 0 14px; display: grid; gap: 3px; }
.side nav a {
  display: flex; align-items: center; gap: 13px; position: relative;
  padding: 7px 10px; border-radius: 12px; white-space: nowrap;
  color: #d4dcea; text-decoration: none; font-size: 1rem; font-weight: 600; letter-spacing: 0.005em;
  transition: background var(--ease), color var(--ease);
}
.side nav a svg {
  width: 36px; height: 36px; padding: 8px; flex: none; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); color: #aebbd2;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.side nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.side nav a:hover svg { color: #fff; background: rgba(255, 255, 255, 0.1); transform: scale(1.05); }
.side nav a.on { background: linear-gradient(90deg, rgba(60, 196, 180, 0.22), rgba(60, 196, 180, 0.04)); color: #fff; font-weight: 800; }
.side nav a.on svg { color: #fff; background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); box-shadow: 0 6px 14px -6px rgba(60, 196, 180, 0.8); }
.side nav a.on::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--teal-bright);
}
.nav-short { display: none; }

.side-foot { margin-top: auto; padding: 14px 14px 18px; display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.side-me {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px;
  color: #fff; text-decoration: none; min-width: 0; transition: background var(--ease);
}
.side-me:hover, .side-me.on { background: rgba(255, 255, 255, 0.07); }
.side-avatar { width: 40px; height: 40px; font-size: 0.9rem; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); }
.side-me-text { display: flex; flex-direction: column; min-width: 0; }
.side-me-text strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me-text small { color: #9fb0c9; font-size: 0.8rem; white-space: nowrap; }
.side-out { margin: 0; }
.side-out button {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: 11px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.92rem;
  background: rgba(255, 255, 255, 0.04); color: #d8e0ee; border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.side-out button svg { width: 18px; height: 18px; flex: none; }
.side-out button:hover { background: rgba(179, 38, 30, 0.22); border-color: rgba(255, 140, 130, 0.5); color: #fff; }
.side-note { margin: 0 8px; color: #8d9ab3; font-size: 0.78rem; }

/* The fold handle sits half way down the menu's right edge. */
.side-toggle {
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%); z-index: 16;
  width: 28px; height: 28px; padding: 5px; border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  display: grid; place-items: center; transition: transform var(--ease), background var(--ease), color var(--ease);
}
.side-toggle svg { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 220ms ease; }
.side-toggle:hover { background: var(--teal-solid); color: #fff; border-color: var(--teal-solid); }

/* Tips on the menu are for the folded menu only, where the labels are gone. */
.side [data-tip]:hover::after, .side [data-tip]:focus-visible::after,
.side [data-tip]:hover::before, .side [data-tip]:focus-visible::before { display: none; }
[data-tip-pos="right"]:hover::after, [data-tip-pos="right"]:focus-visible::after {
  left: calc(100% + 12px); bottom: auto; top: 50%; transform: translateY(-50%);
}
[data-tip-pos="right"]:hover::before, [data-tip-pos="right"]:focus-visible::before {
  left: calc(100% + 2px); bottom: auto; top: 50%; transform: translateY(-50%);
  border-top-color: transparent; border-right-color: var(--ink-fill);
}

@media (min-width: 761px) {
  .shell.side-compact { --side-w: 84px; }
  .side-compact .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .side-compact .brand-word, .side-compact .nav-long, .side-compact .side-me-text,
  .side-compact .side-out span, .side-compact .view-switch span, .side-compact .side-note { display: none; }
  .side-compact .side-label { visibility: hidden; margin-top: 10px; height: 0; }
  .side-compact .view-switch { grid-template-columns: 1fr; margin: 4px 14px 6px; }
  .side-compact .side nav a { justify-content: center; padding: 6px; }
  .side-compact .side-me { justify-content: center; padding: 6px 0; }
  .side-compact .side-out button { padding: 9px 0; }
  .side-compact .side-toggle svg { transform: rotate(180deg); }
  .side-compact .side [data-tip]:hover::after, .side-compact .side [data-tip]:focus-visible::after,
  .side-compact .side [data-tip]:hover::before, .side-compact .side [data-tip]:focus-visible::before { display: block; }
}

.main { padding: 32px 40px 48px; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.top h1 { font-size: 1.9rem; font-weight: 800; }
.sub { color: var(--muted); font-size: 1.02rem; margin-top: 4px; }
.who { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.who-name { font-size: 1rem; color: inherit; text-decoration: none; }
.who-name:hover { text-decoration: underline; }
.bell {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line); margin-right: 4px;
  box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease);
}
.bell:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.bell svg { fill: var(--text); }
.bell-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--red-solid); color: #fff; font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card);
}
.chip {
  display: inline-block; background: var(--grey-bg); color: var(--text); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 999px;
}
.avatar {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); color: #fff;
  font-weight: 700; flex: none; box-shadow: var(--shadow-1);
}

.flash {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--blue-bg); color: var(--text); border-left: 4px solid var(--blue);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
  animation: rise 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.flash svg { width: 20px; height: 20px; flex: none; color: var(--blue); margin-top: 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------- the inbox -- */
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox li {
  position: relative; display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 10px; border-bottom: 1px solid var(--line);
  transition: background var(--ease);
}
.inbox li:hover { background: var(--hover); }
.inbox li a { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.inbox li a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.inbox li:hover strong { color: var(--teal); }
.inbox li.new .feed-icon { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--teal-bright); }
.inbox li.new { background: var(--teal-wash); }
.inbox li.new strong::after {
  content: "New"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--teal-solid); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
}
.inbox-dot { width: 12px; height: 12px; border-radius: 50%; }
.inbox li.new .inbox-dot { box-shadow: 0 0 0 0 rgba(18, 136, 138, 0.5); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgba(18, 136, 138, 0); } }
.dot-teal { background: var(--teal); }
.dot-red { background: var(--red); }
.dot-green { background: var(--green); }
.dot-purple { background: var(--purple); }
.banner-action { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.disclaimer { background: var(--blue-bg); border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 0.92rem; }

/* ---------------------------------------------------------------- pieces -- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow-1);
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.big { font-size: 2.2rem; font-weight: 800; line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.muted-strong { color: var(--muted); font-weight: 500; }
.small { font-size: 0.84rem; }
.strong { font-weight: 700; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.gap { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.wide { display: block; width: 100%; text-align: center; margin-bottom: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
/* A coloured cell's link keeps the cell's colour: a flagged score reads red, not teal. */
.green a, .amber a, .red a { color: inherit; }
.purple { color: var(--purple); }
.blue { color: var(--blue); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem; white-space: nowrap;
}
.pill svg { width: 13px; height: 13px; }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-grey { background: var(--grey-bg); color: var(--grey-text); }
.pill-purple { background: var(--purple-bg); color: var(--purple); }
.pill-blue { background: var(--blue-bg); color: var(--blue); }
[data-tip].pill, [data-tip].chip { cursor: help; }

.tbc {
  display: inline-block; background: var(--amber-bg); color: var(--amber); border: 1px dashed var(--amber);
  border-radius: 6px; padding: 0 6px; font-size: 0.78rem; font-weight: 700; cursor: help;
}

.btn {
  display: inline-block; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn-teal { background: linear-gradient(135deg, #18a0a2, #0f7c7e); color: #fff; }
.btn-purple { background: linear-gradient(135deg, #6a44c4, #4e2d9b); color: #fff; }
.btn-line, .btn-plain { background: var(--field); color: var(--text); border-color: var(--field-line); }
.btn-line:hover, .btn-plain:hover { border-color: var(--teal); }
.btn-red { background: var(--field); color: var(--red); border-color: var(--red-line); }
.btn-red:hover { background: var(--red-bg); }
.link-teal { color: var(--teal); font-weight: 700; text-decoration: none; }
.link-teal:hover { text-decoration: underline; }

.bar { display: block; width: 100%; height: 12px; margin: 14px 0 6px; }
.bar-track { fill: var(--grey-bg); }
.fill-green { fill: var(--green); }
.fill-amber { fill: var(--amber); }
.bar rect:last-child { animation: grow 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; transform-origin: 0 0; }
@keyframes grow { from { transform: scaleX(0); } }

.legend { color: var(--text); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; font-weight: 700; }
.count-green { background: var(--green-bg); color: var(--green); }
.count-amber { background: var(--amber-bg); color: var(--amber); }
.count-grey { background: var(--grey-bg); color: var(--grey-text); }
.key { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.key-green { background: var(--green); }
.key-amber { background: var(--amber); }
.key-purple { background: var(--purple); }
.key-red { background: var(--red); }
.key-grey { background: var(--grey-bg); }

.table th { text-align: left; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
/* `break-word`, not `anywhere`: both break a word too long for its cell, but `anywhere` also
   lets the table shrink a column to one letter, which broke "Q1" and squeezed names to a
   letter a line on a phone, where the table should scroll in its card instead (131). */
.table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: break-word; }
.table tbody tr, .table > tr { transition: background var(--ease); }
.table tbody tr:hover td, .table > tr:hover td { background: var(--hover); }
.plain { list-style: none; padding: 0; margin: 0 0 14px; }
.plain li { padding: 7px 0; }

.banner { border-radius: 12px; padding: 14px 20px; margin-bottom: 18px; }
.banner-amber { background: var(--amber-bg); border: 1px solid var(--amber-line); }
.banner-amber strong { color: var(--amber-deep); }
.banner-green { background: var(--green-bg); border: 1px solid var(--green-line); }
.banner-purple { background: var(--purple-bg); border: 1px solid var(--purple-line); }
.banner-red { background: var(--red-bg); border: 1px solid var(--red-line); }
.note { background: var(--inset); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.empty { text-align: center; color: var(--muted); padding: 26px 12px; }
.empty svg { width: 40px; height: 40px; color: var(--grey); margin-bottom: 8px; }

.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px 20px; align-items: start; margin-bottom: 18px; }
/* Backlog 131: the split's gap is the space between its cards, so cards stacked in it on a
   narrow screen sit 18px apart like everywhere else, not the gap and a margin, 38px. */
.split > .card, .split > * > .card:last-child { margin-bottom: 0; }
.split-even { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.split-wide { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
/* Backlog 117: the feedback items take more of the row and each item's heading stays on one
   line ("Formatting & AC headings"); the side column, the record and next step, gives way. */
.split-items { grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); }
/* Backlog 131: each item is a line of its status, its heading (on one line, backlog 117)
   and the date it was done, with the comment under them across the whole card.  As table
   columns the comment got what the status and the longest heading left, and started at a
   different place in every table. */
@media (min-width: 761px) {
  .items, .items tbody { display: block; }
  .items tr { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 8px; border-bottom: 1px solid var(--line); }
  .items tr:last-child { border-bottom: 0; }
  .items tr > td { border: 0; }
  .items td:nth-child(1) { grid-row: 1; padding-bottom: 0; }
  .items .item-key { grid-column: 2; grid-row: 1; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
  .items td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; padding-top: 6px; }
  .items td:nth-child(4) { grid-column: 3; grid-row: 1; padding-bottom: 0; }
  .items td:nth-child(4):empty { display: none; }
}
.stack > .card:last-child { margin-bottom: 18px; }

/* ------------------------------------------------------ student dashboard -- */
.ring { width: 118px; height: 118px; display: block; }
.ring circle { fill: none; stroke-width: 11; }
.ring-track { stroke: var(--grey-bg); }
.ring-fill {
  stroke: var(--green); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: ring 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes ring { from { stroke-dashoffset: 100; } }
.ring-num { font-size: 30px; font-weight: 800; fill: var(--text); }
.ring-of { font-size: 11px; font-weight: 700; fill: var(--muted); letter-spacing: 0.06em; }
.unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.unit-card {
  display: block; color: inherit; text-decoration: none; border-top-width: 6px; margin: 0;
  transition: transform var(--ease), box-shadow var(--ease);
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.unit-card h2 { font-size: 1.22rem; margin: 6px 0 2px; }
.unit-card-head { display: flex; justify-content: space-between; align-items: center; }
.top-green { border-top-color: var(--green); }
.top-amber { border-top-color: var(--amber); }
.top-grey { border-top-color: var(--grey); }
.next { background: var(--inset); border-radius: 8px; padding: 9px 12px; margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; }
.next svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal); }

/* ------------------------------------------------------------------ tabs -- */
.tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 22px; }
.tabs a {
  padding: 10px 22px; color: var(--muted); font-weight: 700; text-decoration: none;
  margin-bottom: -2px; border-bottom: 4px solid transparent; font-size: 1.02rem;
  transition: color var(--ease), border-color var(--ease);
}
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--teal); border-bottom-color: var(--teal); }

/* ----------------------------------------------------- corrections / rounds -- */
.rounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; position: relative; }
.rounds::before { content: ""; position: absolute; left: 30px; right: 30px; top: 31px; height: 2px; background: var(--line); }
.round-card { margin: 0; padding: 16px 20px; position: relative; border-top: 4px solid var(--blue); }
.round-card.round-auto { border-top-color: var(--purple); }
.round-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.15rem; }
.round-next {
  border: 2px dashed var(--teal); border-radius: var(--radius); background: var(--teal-wash);
  padding: 16px 20px; text-align: center; color: var(--muted); border-top-width: 2px; position: relative;
}
.round-next strong { color: var(--teal); font-size: 1.2rem; display: block; margin-bottom: 4px; }
.items { margin: 0; }
.items td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.items tr:last-child td { border-bottom: 0; }
.items tr { transition: background var(--ease); }
.items tr:hover, .items tr:hover td { background: var(--hover); }
.item-key { font-weight: 700; }
.struck { text-decoration: line-through; color: var(--muted); }
/* A comment's paragraphs are separated by a blank line; keep them apart on screen. */
.items td:nth-child(3), .record-text > .line-text, .ac-card > p, .overview-item > p { white-space: pre-line; }
.resolved { margin-top: 14px; border-top: 1px solid var(--line); }
.resolved summary {
  cursor: pointer; padding: 12px 8px; color: var(--muted); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.resolved summary::-webkit-details-marker { display: none; }
.resolved summary::before { content: "\25B8"; color: var(--teal); transition: transform var(--ease); display: inline-block; }
.resolved[open] summary::before { transform: rotate(90deg); }
.resolved .items tr td { opacity: 0.85; }
.doc { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; }
.doc-icon { background: linear-gradient(135deg, #d13b31, #a1211a); color: #fff; font-weight: 800; padding: 16px 12px; border-radius: 8px; box-shadow: var(--shadow-1); }
.upload input[type=file] { display: block; margin: 6px 0 12px; }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; cursor: pointer;
  border: 2px dashed var(--field-line); border-radius: 12px; padding: 16px; text-align: center;
  background: var(--inset); transition: border-color var(--ease), background var(--ease);
}
.drop:hover, .drop:focus-within, .drop.is-over { border-color: var(--teal); background: var(--teal-bg); }
.slot.is-over { border-color: var(--teal); box-shadow: var(--ring); }
.drop svg { width: 30px; height: 30px; color: var(--teal); }
.upload .drop input[type=file] { margin: 6px auto 0; max-width: 100%; font-size: 0.85rem; }

/* ----------------------------------------------------------------- submit -- */
.attempts { display: flex; justify-content: space-around; margin: 18px 0 8px; text-align: center; }
.attempt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.attempt-dot {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  font-size: 1.6rem; font-weight: 800; cursor: default;
  transition: transform var(--ease);
}
.attempt:hover .attempt-dot { transform: scale(1.06); }
.attempt-dot.now { background: linear-gradient(135deg, #18a0a2, #0f7c7e); color: #fff; box-shadow: 0 0 0 6px var(--teal-bg); }
.attempt-dot.done-red { background: var(--red-bg); color: var(--red); border: 3px solid var(--red); }
.attempt-dot.done-green { background: var(--green-bg); color: var(--green); border: 3px solid var(--green); }
.attempt-dot.left { border: 3px dashed var(--grey); color: var(--grey); }
.declare label { display: block; margin: 10px 0; }
/* A declaration's second line starts under its first, not under the tick box (131). */
.declare > .check { display: flex; gap: 10px; align-items: flex-start; }
.declare > .check input { margin-top: 4px; flex: none; }
.declare .btn { margin-top: 12px; }
/* Backlog 96: the AI Usage Disclosure Form inside Submit for Marking. */
.disclose { border: 1px solid var(--field-line); border-radius: 12px; padding: 12px 16px 6px; margin: 14px 0; min-width: 0; }
.disclose legend { font-weight: 800; padding: 0 6px; }
.disclose-q { font-weight: 700; margin: 14px 0 4px; }
.disclose .check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.disclose .check input { margin-top: 4px; flex: none; }
.disclose input[type=text], .disclose input[type=url] {
  display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px 10px;
  border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); color: var(--text);
}
.disclose label { font-weight: 600; }
.ai-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; border-top: 1px dashed var(--field-line); padding-top: 6px; margin-top: 6px; }
.ai-row label { margin: 4px 0; font-weight: 400; font-size: 0.9rem; }
/* Sections 2 to 4 are for a learner who used AI; hidden once they say they did not. */
.disclose:has(input[name=ai_use][value=none]:checked) .disclose-used { display: none; }
.steps { list-style: none; padding: 0; margin: 8px 0 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 30px; width: 2px; background: var(--line); }
.steps li { display: flex; gap: 14px; margin-bottom: 16px; position: relative; }
.step-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; flex: none; box-shadow: 0 0 0 4px var(--card); }
.step-dot.teal { background: var(--teal-solid); }
.step-dot.purple { background: var(--purple-solid); }
.step-dot.amber { background: var(--amber-solid); }
.step-dot.navy { background: var(--ink-fill); }
.alert-red { background: var(--red-bg); border-color: var(--red-line); display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
.alert-score { display: flex; flex-direction: column; align-items: center; }
.alert-score .big { font-size: 3rem; }
.alert-text strong { color: var(--red-deep); }
.band-teal { border-top: 6px solid var(--teal); }
.band-purple { border-top: 6px solid var(--purple); }

/* ---------------------------------------------------------- feedback record -- */
.paper { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 36px 44px; box-shadow: 0 4px 18px rgba(22, 35, 63, 0.06); }
.paper-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 4px solid var(--teal); padding-bottom: 12px; margin-bottom: 16px; }
.paper-head h2 { font-size: 1.7rem; margin: 0; }
.paper-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px; margin-bottom: 18px; }
.record-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.record-head { background: var(--card-2); display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; gap: 12px; border-radius: 10px 10px 0 0; }
.record-line { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--line); }
.serif { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; }
.paper-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
/* Backlog 137: the record laid out as Curtley's sample, header to sign-off. */
.record .line-text { white-space: pre-line; margin: 0; }
.rec-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 18px; }
.rec-meta > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.rec-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.rec-meta dt { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.rec-meta dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.rec-banner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; background: var(--ink-fill); color: #fff; border-radius: 10px; padding: 16px 20px; margin-bottom: 14px; }
.rec-banner > div { display: grid; gap: 2px; }
.rec-banner strong { font-size: 1.2rem; }
.rec-banner span { opacity: 0.85; font-size: 0.92rem; }
.rec-grade { text-align: right; }
.rec-key { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; margin-bottom: 18px; display: grid; gap: 6px; }
.rec-key p { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.92rem; }
.rec-key .pill { justify-self: start; }
.rec-key-word { padding-left: 4px; }
.why-word { color: var(--teal); }
.rec-overall { border: 1px solid var(--line); border-left: 5px solid var(--ink-fill); border-radius: 8px; padding: 14px 18px; display: grid; gap: 4px; }
.rec-overall h3, .rec-overall p { margin: 0; }
.rec-section { margin: 30px 0 4px; font-size: 1.3rem; }
.rec-section span { color: var(--muted); font-weight: 600; margin-right: 6px; }
.rec-section-note { margin: 0 0 12px; }
.rec-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.rec-block-head { background: var(--card-2); border-left: 5px solid var(--ink-fill); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; }
.rec-band { font-size: 0.82rem; font-weight: 700; margin-left: 4px; }
.band-pass { color: var(--teal); }
.band-merit { color: var(--purple); }
.band-distinction { color: var(--amber); }
.rec-now { padding: 12px 18px; display: grid; gap: 6px; }
.rec-now > p { margin: 0; }
.rec-optional strong { color: var(--amber); }
.rec-earlier { border-top: 1px solid var(--line); padding: 10px 18px 12px; display: grid; gap: 8px; }
.rec-earlier-head { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.rec-entry { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; font-size: 0.92rem; }
.rec-entry-check { color: var(--text); }
.rec-full summary { cursor: pointer; color: var(--teal); font-size: 0.85rem; }
.rec-full p { margin-top: 6px; }
.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th, .rec-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rec-table thead th { font-size: 0.8rem; color: var(--muted); background: var(--card-2); }
.rec-table tbody th { width: 190px; }
.rec-table td:nth-child(2) { width: 120px; }
.rec-table td p { margin: 0; }
.rec-sign { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 8px; }
.rec-sign th, .rec-sign td { text-align: left; padding: 14px; border-bottom: 1px solid var(--line); }
.rec-blank { display: inline-block; width: 160px; border-bottom: 1px solid var(--muted); vertical-align: bottom; }
.rec-blank-short { width: 90px; }
/* Backlog 135: a line's words, then a Met criterion's named checks, then why it was struck. */
.record-text { min-width: 0; }
.record-text > p { margin: 0; }
.record-text > p + p, .record-text > .checks-table + p { margin-top: 8px; }
.why { font-size: 0.92rem; }
.why strong { color: var(--teal); }
.checks-table { width: 100%; border-collapse: collapse; margin: 10px 0 2px; font-size: 0.92rem; }
.checks-table th { text-align: left; font-size: 0.8rem; font-weight: 700; color: var(--muted); padding: 4px 10px 6px 0; border-bottom: 2px solid var(--line); }
.checks-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.checks-table td:first-child { font-weight: 600; width: 46%; }
.checks-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ tutor views -- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 4px; }
.stat { border-left-width: 6px; display: grid; grid-template-columns: 1fr auto; align-items: start; }
.stat > p { grid-column: 1; }
/* Backlog 131: the figure sits at the foot of every card, so a heading that wraps in one
   card leaves the four figures level. */
.stat { grid-template-rows: 1fr auto; }
.stat > .big { grid-row: 2; align-self: end; }
.stat-link { color: inherit; text-decoration: none; transition: transform var(--ease), box-shadow var(--ease); }
.stat-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.btn svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.banner svg { width: 18px; height: 18px; vertical-align: -4px; color: var(--green); }
.stat-icon {
  grid-column: 2; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--inset); color: var(--muted);
}
.stat-icon svg { width: 22px; height: 22px; }
.edge-amber { border-left-color: var(--amber); }
.edge-amber .stat-icon { background: var(--amber-bg); color: var(--amber); }
.edge-purple { border-left-color: var(--purple); }
.edge-purple .stat-icon { background: var(--purple-bg); color: var(--purple); }
.edge-red { border-left-color: var(--red); }
.edge-red .stat-icon { background: var(--red-bg); color: var(--red); }
.edge-blue { border-left-color: var(--blue); }
.edge-blue .stat-icon { background: var(--blue-bg); color: var(--blue); }
.queue .btn { min-width: 96px; text-align: center; }
.grid-wrap { overflow: visible; }
/* Backlog 106 and 108.  The grid fills its card: a fixed name column, the nine units
   sharing the rest, and every tile as wide as its column.  Below its minimum it scrolls
   inside the card rather than the page. */
.cohort { width: 100%; min-width: 400px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cohort .c-name { width: 34%; }
/* Measured against the card, not the window: half a 1360 screen leaves a tile about 30px,
   so the picture and the fraction's "of" give way there before anything scrolls. */
.grid-wrap { container-type: inline-size; }
@container (max-width: 620px) {
  .cohort:not(.cohort-wide) .c-name { width: 30%; }
  .cohort:not(.cohort-wide) .who-cell .avatar { display: none; }
  .cohort:not(.cohort-wide) .tile-frac span { display: none; }
  .cohort:not(.cohort-wide) td { padding: 7px 2px; }
  .cohort:not(.cohort-wide) .tile { height: 38px; border-radius: 9px; }
}
.cohort-wide { min-width: 940px; }
.cohort-wide .c-name { width: 250px; }
.cohort-wide .c-sum { width: 170px; }
.cohort thead th {
  text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted);
  padding: 0 3px 10px; border-bottom: 1px solid var(--line);
}
.cohort thead th.c-name, .cohort thead th.c-sum { text-align: left; }
.cohort tbody th { text-align: left; padding: 8px 12px 8px 0; font-weight: 400; }
.cohort td { padding: 8px 3px; }
.cohort tbody tr + tr > * { border-top: 1px solid var(--line); }
.cohort-wide td { padding: 10px 4px; }
.cohort-wide tbody th { padding: 12px 14px 12px 0; }
.who-cell { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.who-cell .avatar { width: 36px; height: 36px; font-size: 0.82rem; }
.who-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-cell-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-cell:hover strong { color: var(--teal); }
.cohort-wide .who-cell .avatar { width: 42px; height: 42px; font-size: 0.9rem; }

.tile {
  position: relative; display: grid; place-items: center; height: 42px; border-radius: 10px;
  color: #fff; text-decoration: none; overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
}
.tile:hover, .tile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); z-index: 2; outline: none; }
.tile:focus-visible { box-shadow: var(--ring); }
.tile-mark { display: grid; place-items: center; line-height: 1; }
.tile-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile-green { background: linear-gradient(160deg, #1f9a62, var(--green-solid)); }
.tile-purple { background: linear-gradient(160deg, #7350cc, var(--purple-solid)); }
.tile-red { background: linear-gradient(160deg, #d2382f, var(--red-solid)); }
.tile-amber { background: var(--amber-bg); color: var(--amber-deep); box-shadow: inset 0 0 0 1px var(--amber-line); }
.tile-grey { background: repeating-linear-gradient(135deg, var(--card-2) 0 6px, var(--grey-bg) 6px 12px); box-shadow: inset 0 0 0 1px var(--line); }
.tile-frac { font-weight: 800; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tile-frac span { font-weight: 600; font-size: 0.72rem; opacity: 0.75; }
.tile-bar { position: absolute; left: 6px; right: 6px; bottom: 5px; width: calc(100% - 12px); height: 4px; }
.tile-bar rect.tile-bar-fill { fill: var(--amber); }
.tile-bar { background: var(--amber-line); border-radius: 2px; }

/* The wide form: the unit at the top, what it means at the bottom. */
.cohort-wide .tile { height: 66px; place-items: stretch; grid-template-rows: auto 1fr auto; padding: 7px 9px 8px; }
.cohort-wide .tile-u { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; opacity: 0.85; }
.cohort-wide .tile-mark { justify-items: start; align-self: center; }
.cohort-wide .tile-mark svg { width: 17px; height: 17px; }
.cohort-wide .tile-cap { font-size: 0.72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cohort-wide .tile-amber .tile-cap { padding-bottom: 6px; }
.cohort-wide .tile-grey { color: var(--muted); }
.cohort-wide .tile-grey .tile-cap { font-weight: 600; }
.cohort-wide .tile-bar { bottom: 6px; left: 9px; right: 9px; width: calc(100% - 18px); }
/* Where a tile is too narrow for its word (about 70px), it keeps the unit and the mark,
   and the hover tip carries the rest. */
@container (max-width: 1180px) {
  .cohort-wide .tile-cap { display: none; }
  .cohort-wide .tile { grid-template-rows: auto 1fr; }
  .cohort-wide .tile-mark { justify-items: center; }
  .cohort-wide .c-name { width: 230px; }
  .cohort-wide .c-sum { width: 165px; }
}

.sum-cell { display: flex; align-items: center; gap: 12px; padding-left: 10px; }
.mini-ring { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.mini-ring circle { fill: none; stroke-width: 6; }
.mini-ring-track { stroke: var(--grey-bg); }
.mini-ring-fill { stroke: var(--green); stroke-linecap: round; }
.sum-text { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }

/* Counts by state across the top of the Learners page, which double as its key. */
.tally { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tally-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--inset);
}
.tally-item .key { grid-row: span 2; width: 10px; height: 34px; border-radius: 5px; }
/* The grid's key in the tiles' own colours: the plain accents turn pastel in dark while the
   tiles stay deep (131).  Not started is the tiles' stripe, edged so it shows. */
.tally-item .key-green, .legend-tally .key-green { background: var(--green-solid); }
.tally-item .key-purple, .legend-tally .key-purple { background: var(--purple-solid); }
.tally-item .key-red, .legend-tally .key-red { background: var(--red-solid); }
.tally-item .key-amber, .legend-tally .key-amber { background: var(--amber-bg); box-shadow: inset 0 0 0 2px var(--amber); }
.tally-item .key-grey, .legend-tally .key-grey { box-shadow: inset 0 0 0 2px var(--grey); }
.tally-item { border: 1px solid var(--line); }
.tally-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tally-name { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.legend-tally strong { font-variant-numeric: tabular-nums; margin-left: 2px; }
@media (max-width: 1200px) {
  .tally { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tally-item { padding: 10px 12px; }
  /* On a phone the names stay put while the units scroll beside them. */
  .cohort-wide { min-width: 600px; }
  .cohort-wide .c-name { width: 112px; }
  .cohort-wide .c-sum { width: 120px; }
  .cohort-wide .who-cell .avatar, .cohort-wide .who-cell-text .small { display: none; }
  .cohort-wide .tile { height: 54px; padding: 6px 6px 7px; }
  .cohort-wide td { padding: 8px 2px; }
  .cohort-wide .c-name { position: sticky; left: 0; z-index: 3; background: var(--card); }
  .cohort-wide .mini-ring { width: 36px; height: 36px; }
  .cohort-wide .sum-cell { gap: 8px; padding-left: 6px; }
}

.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px; align-items: start; }
/* Backlog 131: the document scrolls inside its pane once it sticks, so its lower half is
   never out of reach while the feedback beside it is still being read. */
.docpane { background: var(--page-2); border-radius: var(--radius); padding: 22px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.docpage { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 26px 32px; box-shadow: 0 2px 10px rgba(22, 35, 63, 0.08); }
.ln { display: block; height: 11px; background: var(--grey-bg); border-radius: 6px; margin: 9px 0; width: 96%; }
.ln-mid { width: 88%; }
.ln-short { width: 70%; }
.ln-mark { display: block; padding: 6px 12px; margin: 8px 0; border-left: 4px solid; }
.mark-amber { background: var(--amber-bg); border-color: var(--amber); }
.mark-amber .ln { background: var(--amber-line); }
.mark-red { background: var(--red-bg); border-color: var(--red); }
.mark-red .ln { background: var(--red-line); }
.review-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.toggle { display: inline-flex; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); padding: 3px; gap: 3px; }
.toggle a { padding: 7px 16px; color: var(--text); font-weight: 700; text-decoration: none; border-radius: 7px; transition: background var(--ease), color var(--ease); }
.toggle a:hover { background: var(--hover); }
.toggle a.on { background: var(--ink-fill); color: #fff; }
.ac-card { border-left: 5px solid var(--line); }
.ac-card.v-met { border-left-color: var(--green); }
.ac-card.v-partial { border-left-color: var(--amber); }
.ac-card.v-not_met { border-left-color: var(--red); }
.ac-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 1.08rem; margin-bottom: 4px; }
.ac-card-on { border: 3px solid var(--teal); }
.edit-box { width: 100%; font: inherit; border: 3px solid var(--teal); border-radius: 10px; padding: 12px; margin: 8px 0 12px; }
/* Backlog 135: the tutor's verdict for a criterion, as chips with a radio inside each. */
.verdict-pick { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verdict-pick legend { float: left; font-weight: 700; margin-right: 6px; padding: 0; }
.verdict-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--field-line); background: var(--field); cursor: pointer; font-weight: 600;
  transition: border-color var(--ease), background var(--ease);
}
.verdict-opt:hover { border-color: var(--teal); }
.verdict-opt input { margin: 0; accent-color: var(--teal); }
.verdict-opt.opt-green:has(input:checked) { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.verdict-opt.opt-amber:has(input:checked) { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-deep); }
.verdict-opt.opt-red:has(input:checked) { background: var(--red-bg); border-color: var(--red-line); color: var(--red-deep); }
.verdict-opt.opt-purple:has(input:checked) { background: var(--purple-bg); border-color: var(--purple-line); color: var(--purple); }
.verdict-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.ac-card > .checks-table { margin-bottom: 8px; }
.overview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.overview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.overview-row p { flex-basis: 100%; }
.actionbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1px solid var(--line); padding: 16px 0; margin-top: 8px;
  position: sticky; bottom: 0; background: var(--page); z-index: 5;
}
.actionbar form { margin: 0; }

.signoff { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
.front { padding: 26px 30px; }
.front h2 { font-size: 1.35rem; border-bottom: 3px solid var(--purple); padding-bottom: 8px; margin-bottom: 14px; }
.front p { margin-bottom: 10px; }
.sig { border-top: 2px dashed var(--line); margin-top: 16px; padding-top: 14px; }
.sig-box { border: 2px dashed var(--amber); border-radius: 8px; color: var(--amber); font-weight: 700; text-align: center; padding: 12px; margin: 8px 0; }
.sig-box.signed { border-style: solid; border-color: var(--green); color: var(--green); font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; }
.ac-sheet { padding: 0; overflow: hidden; }
.ac-rate { margin: 0; padding: 10px 22px 0; }
/* A band of its own (131): navy in light; in dark a navy that still stands off the card,
   where the ink fill turned slate and the menu's navy all but matched the card. */
.ac-sheet-head { background: var(--band); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; font-size: 1.05rem; }
.ac-table th { text-align: left; width: 230px; padding: 13px 22px; border-top: 1px solid var(--line); vertical-align: top; }
.ac-table td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.ac-table td.strong { width: 70px; }
.ac-edit { padding: 16px 22px; }
.ac-edit-row { display: grid; grid-template-columns: 220px 80px 1fr; gap: 12px; align-items: start; margin-bottom: 10px; font-weight: 700; }
.ac-edit textarea, .ac-edit select { font: inherit; font-weight: 400; border: 1px solid var(--field-line); border-radius: 8px; padding: 8px; width: 100%; }
.ac-edit select { padding-right: 30px; }

/* ------------------------------------------------------------------ admin -- */
.chart { display: block; width: 100%; height: auto; }
.chart text { fill: var(--muted); font-size: 13px; }
.chart .chart-n { font-size: 12px; font-weight: 700; fill: var(--text); }
.chart g:hover rect { filter: brightness(0.92); }
.c-grey { fill: var(--grey-bg); }
.c-amber { fill: #e7a13c; }
.c-green { fill: var(--green); }
.checks { list-style: none; padding: 0; margin: 14px 0 20px; }
.checks li { padding: 7px 0 7px 30px; position: relative; font-size: 1.02rem; }
/* A tick in a box of ours rather than the font's ballot-box glyphs (backlog 131). */
.checks li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 6px; border: 2px solid var(--field-line); background: var(--field);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; line-height: 1;
}
.checks li.on::before { content: "\2713"; color: #fff; background: var(--teal-solid); border-color: var(--teal-solid); }
form.inline { display: flex; gap: 8px; align-items: center; }
/* In a table a dropdown and its button share a line where they can, and stack where they
   cannot, rather than pushing the table out of its card (Users & roles at 1024 and 1100). */
.table form.inline, .target form.inline { flex-wrap: wrap; }
/* Backlog 131: one height with the buttons beside it, and a chevron drawn in the theme's
   own colour rather than the browser's, jammed against the edge. */
select {
  font: inherit; padding: 9px 34px 9px 12px; border-radius: 10px; border: 1px solid var(--field-line); color: var(--text);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 17px) 52% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 12px) 52% / 5px 5px no-repeat,
    var(--field);
  transition: border-color var(--ease);
}
select:hover { border-color: var(--teal); }
input[type=checkbox], input[type=radio], progress { accent-color: var(--teal-solid); }

/* ----------------------------------------------------------------- sign-in -- */
.signin-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.signin { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); padding: 36px 40px; width: min(760px, 100%); }
.signin h1 { font-size: 1.6rem; }
.signin h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 22px 0 10px; }
.signin-people { display: flex; flex-wrap: wrap; gap: 10px; }
.signin-people button {
  display: inline-flex; align-items: center; gap: 10px; background: var(--page); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 16px 5px 5px; font: inherit; cursor: pointer; color: var(--text);
}
.signin-people .avatar { width: 34px; height: 34px; font-size: 0.85rem; }
.signin-people button:hover { border-color: var(--teal); }

/* ------------------------------------------------------------------ forms -- */
.form label { display: block; font-weight: 600; margin: 0 0 14px; }
.form input[type=email], .form input[type=password], .form input[type=text],
.form input[type=number], .form input[type=date], .form input:not([type]), .form select {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
  padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 10px; background-color: var(--field); color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form select { padding-right: 34px; }
.form input:focus, .form select:focus, .edit-box:focus { box-shadow: var(--ring); border-color: var(--teal); }
.form input[type=file] { display: block; margin-top: 6px; font-weight: 400; }
/* Backlog 131.  The browser's own "Choose File" button, drawn as one of ours. */
input[type=file] { font: inherit; font-size: 0.86rem; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 10px; padding: 7px 14px; border-radius: 9px;
  border: 1px dashed var(--field-line); background: var(--card-2); color: var(--text); cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
input[type=file]:hover::file-selector-button { border-color: var(--teal); background: var(--teal-bg); color: var(--teal); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form .check input { margin-top: 4px; }
/* A short form laid across a card: fields side by side, the button at the end of the row. */
.form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 14px; align-items: end; margin-bottom: 12px; }
.form-row label { margin: 0; }
.form-row .btn { padding: 11px 18px; }
/* Five fields across, the button on its own line under them (131). */
.form-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form-row-5 .btn { grid-column: 1 / -1; justify-self: start; }
/* Backlog 164: the import's file, its default role and the button. */
.form-row-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
/* Backlog 165: each role's guide, at the top of its Help and guides page. */
.guide-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guide-card h2 { margin: 2px 0 4px; }
.guide-card p { margin: 0; }
.link-button.link-danger { color: var(--red); }
.settings-table td:nth-child(4) { min-width: 9rem; }
.prior summary { cursor: pointer; font-weight: 700; }
.prior[open] summary { margin-bottom: 8px; }
.grade-pick { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); font-weight: 600; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.row-actions { display: flex; gap: 14px; margin-top: 4px; font-size: 0.88rem; }
.row-actions form { margin: 0; }
tr.faded td { opacity: 0.55; }
code.copy { display: block; margin: 8px 0 4px; padding: 8px 10px; background: var(--card); border-radius: 8px; word-break: break-all; user-select: all; }
.downloads { margin-top: 16px; }
.downloads .btn { margin-bottom: 8px; }

/* ----------------------------------------------------- sign-in (the door) -- */
.door { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; min-height: 100vh; }
.door-panel {
  background:
    radial-gradient(circle at 85% 15%, rgba(60, 196, 180, 0.22), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(60, 196, 180, 0.14), transparent 38%),
    linear-gradient(160deg, var(--side-1) 0%, #0f3b52 60%, var(--teal-solid) 140%);
  color: #fff; display: flex; flex-direction: column; padding: 8px 12px 28px;
}
.door-panel .brand { border: 0; }
.door-copy { margin: auto 28px; max-width: 440px; }
.door-copy h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 14px; }
.door-copy p { color: #cfe0ea; font-size: 1.05rem; }
.door-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.door-points li { display: flex; gap: 12px; align-items: flex-start; color: #e6f0f4; }
.door-points svg { width: 22px; height: 22px; flex: none; color: var(--teal-bright); margin-top: 1px; }
.door-points strong { display: block; color: #fff; }
.door-points span { color: #b9cfd9; font-size: 0.95rem; }
.door-foot { margin: 0 28px; color: #8fb3c2; font-size: 0.85rem; }
.door-main { display: grid; place-items: center; padding: 32px 20px; }
.door-card { width: min(420px, 100%); }
.door-card h1 { font-size: 1.8rem; margin-bottom: 4px; }
.door-card .sub { margin-bottom: 22px; }
.door-card .btn { padding: 12px 18px; margin-top: 6px; }

/* ------------------------------------------------------------ the checks -- */
.checking { display: flex; gap: 18px; align-items: flex-start; }
.spinner {
  width: 38px; height: 38px; border-radius: 50%; flex: none; margin-top: 4px;
  border: 4px solid var(--grey-bg); border-top-color: var(--teal); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.checking-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.checking-steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); animation: step 4.5s ease-in-out infinite; }
.checking-steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grey-bg); flex: none; animation: step-dot 4.5s ease-in-out infinite; }
.checking-steps li:nth-child(2), .checking-steps li:nth-child(2)::before { animation-delay: 1.5s; }
.checking-steps li:nth-child(3), .checking-steps li:nth-child(3)::before { animation-delay: 3s; }
@keyframes step { 0%, 100% { color: var(--muted); } 12%, 30% { color: var(--teal); } }
@keyframes step-dot { 0%, 100% { background: var(--grey-bg); } 12%, 30% { background: var(--teal); } }
.draft-text { max-height: 78vh; overflow-y: auto; padding-right: 8px; }
.draft-text p { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 0.98rem; line-height: 1.55; }
.draft-text h3 { margin: 18px 0 8px; }
.summary-card { border-left: 5px solid var(--purple); }
.summary-card summary { cursor: pointer; }
.summary-card ol { margin: 8px 0 0; padding-left: 20px; }
.summary-card li { margin-bottom: 6px; }
.overview-item { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.overview-item:first-of-type { border-top: 0; }
.overview-item.ac-card-on { border: 3px solid var(--teal); border-radius: 10px; padding: 12px; }
.score-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.score-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.score-form label { font-weight: 600; font-size: 0.9rem; }
.score-form input[type=number] { display: block; width: 110px; margin-top: 4px; font: inherit; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 8px; }
.score-form input[type=file] { display: block; margin-top: 4px; }
.sig-preview { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 10px 0 16px; background: var(--card); }
.sig-preview img { max-width: 100%; max-height: 90px; display: block; }

/* ------------------------------------------------------- desktop-only note -- */
/* Shown only on phones, on screens built for a desk: the tutor's review and sign-off,
   the cohort grid, Users & roles.  The page still renders below it. */
.desk-note { display: none; }

/* ------------------------------------------------------------------ print -- */
@media print {
  .side, .who, .tabs, .actionbar, .flash, .desk-note { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .card, .paper { box-shadow: none; }
}

/* -------------------------------------------------------------- narrower -- */
/* A wide table beside a side card: side by side only where both fit.  Measured: the IV
   flag table overflowed its card by 56px at 1280 and 1px at 1366 beside the sampling card. */
@media (max-width: 1500px) {
  .split-roomy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-even, .split-wide, .split-items, .review, .signoff { grid-template-columns: minmax(0, 1fr); }
  .stats, .rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rounds::before { display: none; }
  .grid-wrap { overflow-x: auto; }
  .docpane { position: static; }
}
/* Phones.  Designed for the learner's screens: the dashboard, a unit's status and upload,
   feedback and the inbox.  The tutor's review and sign-off are desktop work and simply
   stack here, under a note that says so.  `minmax(0, 1fr)` rather than `1fr`: a bare
   fraction will not shrink below its content, and the menu's full width would push the
   whole page sideways. */
@media (max-width: 760px) {
  /* The brand bar keeps its height on a short page; the free space goes to the page. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* The menu becomes a tab bar along the bottom, where a thumb reaches it, with short
     labels so seven fit across 375px.  The brand stays as a slim bar at the top. */
  .side { position: sticky; top: 0; z-index: 15; min-width: 0; height: auto; padding-top: env(safe-area-inset-top); }
  .brand { padding: 10px 16px; font-size: 1.15rem; gap: 10px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; }
  .view-switch, .side-label, .side-foot, .side-toggle { display: none; }
  /* The bell and the picture join the brand bar, so the page title is the first thing
     under it rather than a row of two buttons. */
  .who { position: fixed; top: calc(env(safe-area-inset-top) + 9px); right: 12px; z-index: 16; }
  .side nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(17, 27, 49, 0.97); box-shadow: 0 -8px 24px rgba(22, 35, 63, 0.22);
  }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a {
    flex: 1 0 0; min-width: 48px; flex-direction: column; justify-content: center; gap: 3px;
    padding: 7px 2px 6px; margin: 0; border-radius: 10px; text-align: center;
    font-size: 0.68rem; font-weight: 600; color: #aab6cc;
  }
  .side nav a svg { width: 22px; height: 22px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .side nav a:hover svg { transform: none; background: none; }
  .side nav a.on { background: rgba(60, 196, 180, 0.16); color: #fff; font-weight: 700; }
  /* Eight tabs (the admin team's) fit across 390px with slightly smaller words. */
  .side nav:has(a:nth-child(8)) a { flex: 1 1 0; min-width: 0; font-size: 0.62rem; }
  .side nav a.on svg { background: none; box-shadow: none; color: var(--teal-bright); }
  .side nav a.on::before { display: none; }
  .nav-long { display: none; }
  .nav-short { display: block; white-space: nowrap; }
  .main { padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
  /* A wide table scrolls inside its card instead of dragging the page sideways. */
  .table { display: block; overflow-x: auto; }
  .stack-sm td.right .btn { width: 100%; text-align: center; }
  /* A stacked table's rows are blocks; the table and its body must be too, or the anonymous
     table box shrinks to its content and the cards stop short of the card's edge. */
  .stack-sm, .stack-sm tbody { display: block; width: 100%; }
  .review-bar { flex-wrap: wrap; }
  .top { gap: 10px; margin-bottom: 16px; }
  .top h1 { font-size: 1.45rem; }
  .sub { font-size: 0.95rem; }
  .who { gap: 8px; }
  .who .chip, .who-name { display: none; }
  .who .avatar, .bell { width: 34px; height: 34px; }
  .bell svg { width: 20px; height: 20px; }
  .card { padding: 18px 16px; }
  /* A card's heading takes the line it needs; the count or link beside it drops under it. */
  .card-head { flex-wrap: wrap; row-gap: 2px; }
  .big { font-size: 1.8rem; }
  .legend { gap: 6px 10px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs a { padding: 10px 12px; white-space: nowrap; font-size: 0.95rem; }
  .items tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .items td { padding: 0; border: 0; }
  .items td:nth-child(3) { grid-column: 1 / -1; width: auto; }
  .items td:nth-child(4) { grid-column: 1 / -1; }
  .items td:nth-child(4):empty { display: none; }
  .inbox li { grid-template-columns: 38px 1fr; }
  .inbox li > :last-child { grid-column: 2; }
  .upload .btn, .declare .btn { width: 100%; white-space: normal; }
  .ai-row { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px dashed var(--field-line); padding-top: 6px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  /* The rounds become a strip to swipe, so the feedback itself is on the first screen. */
  .rounds { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; margin-bottom: 14px; }
  .rounds::-webkit-scrollbar { display: none; }
  .round-card { flex: 0 0 148px; padding: 12px 14px; }
  .round-head { font-size: 1rem; flex-wrap: wrap; gap: 4px; }
  .round-card p { margin: 2px 0 0; font-size: 0.88rem; }
  .round-next { display: none; }
  /* A learner's tables become one labelled block per row. */
  .stack-sm thead { display: none; }
  .stack-sm tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  /* The label on the left, the value on the right; a value too long for the line drops to
     the next one, still on the right, rather than running off the card (131). */
  .stack-sm td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px; padding: 3px 0; border: 0; text-align: right; }
  .stack-sm td::before { margin-right: auto; }
  .stack-sm .fam-dl { margin-right: 0; }
  /* On a phone the whole card is the link; the chevron would push the last value in. */
  .stack-sm .row-go td:last-child { padding-right: 0; }
  .stack-sm .row-go td:last-child::after { content: none; }
  /* A row's button cell has no label, so nothing to push the button off the left edge. */
  .stack-sm td.right::before { content: none; }
  /* A long pill beside its label wraps rather than running off the card (131). */
  .stack-sm td > .pill { white-space: normal; text-align: right; }
  .stack-sm td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: left; flex: none; }
  .stack-sm td:first-child { display: block; text-align: left; font-weight: 700; }
  .stack-sm td:first-child::before { content: none; }
  .stack-sm td.right { justify-content: flex-start; padding-top: 8px; }
  /* Backlog 131: on a unit, the learner's next step (Check my work, Upload) comes before
     the list of feedback items rather than 3,500px under it. */
  .split-items > .stack { display: contents; }
  .split-items > .stack > .next-card { order: -1; }
  .split-items > .stack > .card { margin-bottom: 0; }
  .items td:nth-child(3) { word-break: break-word; }
  .attempt-dot { width: 52px; height: 52px; font-size: 1.3rem; }
  .unit-grid, .stats, .rounds { grid-template-columns: minmax(0, 1fr); }
  .alert-red { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; }
  .record-line, .ac-edit-row { grid-template-columns: 1fr; }
  /* Backlog 137: the record's grids and tables stack on a phone. */
  .rec-meta, .rec-meta > div, .rec-entry, .rec-key p { grid-template-columns: minmax(0, 1fr); }
  .rec-meta > div { gap: 0; }
  .rec-meta > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rec-meta > div:last-child { border-bottom: 0; }
  .rec-grade { text-align: left; }
  .rec-entry { gap: 2px; }
  .rec-table, .rec-table tbody, .rec-table tr, .rec-table th, .rec-table td,
  .rec-sign, .rec-sign tbody, .rec-sign tr, .rec-sign th, .rec-sign td { display: block; width: auto; }
  .rec-table thead { display: none; }
  .rec-table tr, .rec-sign tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .rec-table th, .rec-table td, .rec-sign th, .rec-sign td { border: 0; padding: 4px 14px; }
  /* A marksheet's criterion on a phone: each question on its own line, then Yes or No and
     the evidence under it, rather than three columns of a word or two each (131). */
  .ac-sheet { padding: 0; }
  .ac-sheet-head { padding: 12px 16px; flex-wrap: wrap; font-size: 1rem; }
  .ac-rate { padding: 10px 16px 0; }
  .ac-table, .ac-table tbody { display: block; }
  .ac-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--line); }
  .ac-table th { grid-column: 1 / -1; width: auto; padding: 12px 16px 2px; border: 0; }
  .ac-table td { border: 0; padding: 2px 16px 12px; }
  .ac-table td.strong { width: auto; padding-right: 0; }
  .ac-table td:empty { padding: 0; }
  .paper { padding: 22px 18px; }
  .paper-head { flex-direction: column; gap: 8px; }
  .paper-head h2 { font-size: 1.35rem; }
  .paper-head .right { text-align: left; }
  .paper-meta { grid-template-columns: 1fr; }
  .door { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .door-main { place-items: start center; padding-top: 28px; }
  .door-panel { padding-bottom: 8px; }
  .door-foot, .door-copy p, .door-points { display: none; }
  .door-copy { margin: 8px 16px 6px; }
  .door-copy h2 { font-size: 1.45rem; margin: 0; }
  /* Approving a round and signing a marksheet are desk work: the note at the top of those
     pages says so, and the buttons that would contradict it are not offered here. */
  .docpane, .actionbar { display: none; }
  .desk-note {
    display: flex; gap: 12px; align-items: flex-start; background: var(--amber-bg);
    border: 1px solid var(--amber-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  }
  .desk-note svg { width: 22px; height: 22px; flex: none; color: var(--amber); }
  [data-tip]::after, [data-tip]::before { display: none; }
}

/* ---------------------------------------------------------- less motion -- */
/* Backlog 83.  The profile panel, sliding in from the right as on the estate's other
   platforms, and the pictures that stand in for initials. */
[hidden] { display: none !important; }
.avatar-btn { text-decoration: none; overflow: hidden; cursor: pointer; }
.avatar-btn:focus-visible, .who-name:focus-visible { outline: none; box-shadow: var(--ring); }
.avatar-face, .profile-photo-frame { display: grid; place-items: center; width: 100%; height: 100%; }
.avatar img, .avatar-face img, .profile-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; overflow: hidden; }
.profile-scrim { position: fixed; inset: 0; background: rgba(22, 35, 63, 0.42); z-index: 60; }
.profile-panel {
  /* 100%, not 100vw: the viewport width counts the scrollbar, and the panel then hung
     15px off the left edge of a phone. */
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 61;
  display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -24px 0 48px -24px rgba(22, 35, 63, 0.45);
  transform: translateX(104%); visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.profile-panel.is-open { transform: none; visibility: visible; transition: transform 220ms ease; }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.profile-head h2 { margin: 0; font-size: 1.15rem; }
.profile-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text); }
.profile-close:hover { border-color: var(--teal); }
.profile-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.profile-photo {
  display: flex; gap: 16px; align-items: center; padding: 14px; border: 2px dashed var(--line);
  border-radius: var(--radius); cursor: pointer; transition: border-color var(--ease), background-color var(--ease);
}
.profile-photo:hover, .profile-photo.is-over, .profile-photo:focus-visible { border-color: var(--teal); background: var(--teal-bg); outline: none; }
.profile-photo.is-busy { opacity: 0.7; }
.profile-photo p { margin: 2px 0 0; }
.profile-photo .profile-photo-frame {
  width: 76px; height: 76px; flex: none; border-radius: 50%; overflow: hidden; color: #fff;
  font-weight: 800; font-size: 1.6rem; background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid));
}
.profile-photo-status { min-height: 1.2em; color: var(--muted); }
.profile-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-name { font-size: 1.3rem; font-weight: 800; }
.profile-inline { margin: 0; }
.profile-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.profile-facts dt { color: var(--muted); font-size: 0.9rem; }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }
.profile-body form { margin: 0; }
.learner-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.learner-who { display: flex; align-items: center; gap: 14px; }
.learner-who p { margin: 2px 0 0; }
/* Backlog 118: the ATHE Learner ID as a small panel: label, a proper field with Save beside
   it, and a line saying whether the number is held. */
.learner-id {
  display: flex; flex-direction: column; gap: 8px; margin: 0; width: min(100%, 360px);
  padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 12px; background: var(--card-2);
}
.learner-id-set { border-left-color: var(--teal); }
.learner-id-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.learner-id-row { display: flex; gap: 8px; }
.learner-id-row input {
  flex: 1; min-width: 0; font: inherit; font-weight: 600; letter-spacing: 0.03em;
  padding: 9px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--text);
}
.learner-id-row input::placeholder { font-weight: 400; letter-spacing: 0; color: #8a93a6; }
.learner-id-row input:focus { border-color: var(--teal); }
.learner-id-row .btn { flex: none; }
.learner-id-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; color: var(--amber); }
.learner-id-set .learner-id-note { color: var(--green); }
.learner-id-note svg { flex: none; width: 14px; height: 14px; }

/* ----------------------------------------------------- the unit's journey -- */
/* Backlog 99.  Five steps across the top of a unit, from `UnitState.journey`.  The line
   into a step fills once the learner has reached it, and grows in like the bars do. */
.journey {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 20px 18px 16px; margin-bottom: 18px;
}
.journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.journey li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.journey li + li::before {
  content: ""; position: absolute; top: 17px; left: calc(-50% + 24px); right: calc(50% + 24px);
  height: 3px; border-radius: 3px; background: var(--line);
}
.journey li.j-done::before, .journey li.j-now::before, .journey li.j-alert::before {
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
  transform-origin: 0 50%; animation: grow 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.journey li.j-alert::before { background: linear-gradient(90deg, var(--teal), var(--red)); }
.j-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--line); color: var(--muted);
  font-weight: 800; font-size: 0.95rem; flex: none;
}
.j-dot svg { width: 18px; height: 18px; stroke-width: 2.6; }
.j-done .j-dot { background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); border-color: transparent; color: #fff; }
.j-done:last-child .j-dot { background: linear-gradient(135deg, #1f9a62, var(--green-solid)); }
.j-now .j-dot { border: 3px solid var(--teal); color: var(--teal); animation: j-pulse 2.4s ease-out infinite; }
.j-alert .j-dot { border: 3px solid var(--red); color: var(--red); background: var(--red-bg); }
@keyframes j-pulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 136, 138, 0.35); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(18, 136, 138, 0); }
}
.j-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.j-label { font-weight: 700; font-size: 0.92rem; color: var(--muted); }
.j-done .j-label { color: var(--text); }
.j-now .j-label { color: var(--teal); }
.j-alert .j-label { color: var(--red); }
.j-hint { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.journey-caption { display: none; }

/* -------------------------------------------------------------- dashboards -- */
/* Backlog 100.  The live strip, the headline figures and the charts. */
.chip, .pill { overflow-wrap: normal; }

.live { padding: 16px 18px; }
.live-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px;
  background: var(--red-bg); color: var(--red); font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: live-beat 1.6s ease-out infinite; }
@keyframes live-beat { 0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(179, 38, 30, 0); } }
.live-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.live-tile {
  --tone: var(--teal); --tone-bg: var(--teal-bg);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--tone-bg); border: 1px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), opacity var(--ease);
}
.live-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--tone); }
.live-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--tone); }
.live-icon svg { width: 18px; height: 18px; }
.live-n { font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--tone); font-variant-numeric: tabular-nums; }
.live-label { font-size: 0.76rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.live-tile.is-zero { --tone: #7c879c; --tone-bg: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.live-tile.is-zero .live-icon { color: var(--grey); }
.live-tile.is-new { animation: live-new 1.2s ease-out; }
@keyframes live-new { 0% { box-shadow: 0 0 0 0 rgba(18, 136, 138, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(18, 136, 138, 0); } }
.live-teal { --tone: var(--teal); --tone-bg: var(--teal-bg); }
.live-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.live-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.live-purple { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.live-amber { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.live-green { --tone: var(--green); --tone-bg: var(--green-bg); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 4px; }
.kpi {
  --tone: var(--teal); --tone-bg: var(--teal-bg);
  /* No overflow: hidden here, or the tip on a figure's heading would be cut off. */
  position: relative; display: block; color: inherit; text-decoration: none;
  border-top: 4px solid var(--tone); padding-bottom: 14px;
  transition: transform var(--ease), box-shadow var(--ease);
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.kpi .big { color: var(--text); }
.kpi-of { font-size: 1rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.kpi-icon { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.kpi-icon svg { width: 21px; height: 21px; }
.kpi-teal { --tone: var(--teal); --tone-bg: var(--teal-bg); }
.kpi-green { --tone: var(--green); --tone-bg: var(--green-bg); }
.kpi-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.kpi-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.kpi-amber { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.kpi-purple { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.spark { display: block; width: 100%; height: 40px; margin-top: 10px; }
.spark-line { fill: none; stroke: var(--tone); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-area { fill: var(--tone-bg); }

.chart .grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .grid-line.grid-base { stroke: var(--field-line); stroke-dasharray: none; }
.chart .chart-axis, .chart .chart-sub { font-size: 11px; fill: var(--grey); }
.chart .chart-weekend { fill: var(--chart-wash); }
/* Backlog 107 and 110.  The activity chart's words are HTML beside the SVG, so they stay
   the same size however wide the card is: the scale in a gutter on the left, the day and
   its weekday in a row of columns matching the bars, today as a teal pill.  The positions
   of the scale are the plot's own proportions: headroom 26, plot 150, of 176. */
.act { margin-top: 10px; }
.act-plot { position: relative; margin-left: 32px; }
.act-ax {
  position: absolute; left: -32px; width: 24px; text-align: right; transform: translateY(-50%);
  font-size: 11px; line-height: 1; color: var(--grey); font-variant-numeric: tabular-nums;
}
.act-ax-2 { top: 14.773%; }
.act-ax-1 { top: 57.386%; }
.act-ax-0 { top: 100%; }
.act-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 0.9rem; }
.act .chart-n { font-size: 13px; }
.act-days { list-style: none; display: grid; margin: 8px 0 0 32px; padding: 0; }
.act-n14 .act-days { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.act-n30 .act-days { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.act-n90 .act-days { grid-template-columns: repeat(90, minmax(0, 1fr)); }
.act-days li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; }
.act-days .is-last { align-items: flex-end; }
.act-d { font-size: 0.8rem; font-weight: 700; line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.act-w { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); }
.is-weekend .act-d { color: var(--grey); font-weight: 600; }
.act-today { background: var(--teal-solid); color: #fff; border-radius: 999px; padding: 0 7px; }
.act-w-today { color: var(--teal); font-weight: 800; }
@media (max-width: 760px) {
  .act .chart-n { display: none; }
  /* Fourteen days across a phone: every other day, counted back from today. */
  .act-n14 .act-days li:nth-child(odd) > * { visibility: hidden; }
}
.chart-legend { margin-top: 20px; padding: 14px 4px 0; border-top: 1px solid var(--line); gap: 8px 20px; }
.chart-foot { margin: 12px 4px 0; line-height: 1.6; }
.chart .col-hit { fill: transparent; }
.chart .chart-col:hover .col-hit { fill: var(--chart-hover); }
.chart .chart-col:hover rect:not(.col-hit) { filter: brightness(1.08); }
.chart a { cursor: pointer; }
.c-teal { fill: var(--teal); }
.c-blue { fill: var(--blue); }
.c-purple { fill: var(--purple); }
.key-teal { background: var(--teal); }
.key-blue { background: var(--blue); }
.fill-teal { fill: var(--teal); }
.fill-red { fill: var(--red); }
.count-purple { background: var(--purple-bg); color: var(--purple); }
.grow-up { transform-box: fill-box; transform-origin: 50% 100%; animation: grow-up 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes grow-up { from { transform: scaleY(0); } }
.grow { transform-box: fill-box; transform-origin: 0 50%; animation: grow 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

.funnel { display: grid; gap: 8px; margin-top: 6px; }
.funnel-row {
  display: grid; grid-template-columns: 28px 118px minmax(0, 1fr) 76px; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background var(--ease);
}
.funnel-row:hover { background: var(--hover); }
.funnel-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grey-bg); color: var(--muted); font-weight: 800; font-size: 0.85rem; }
.funnel-label { font-weight: 700; display: flex; flex-direction: column; line-height: 1.2; }
.funnel-alert { color: var(--red); font-size: 0.76rem; font-weight: 700; }
.kpi .eyebrow { padding-right: 46px; }
/* Backlog 131: the four headline cards share their rows, so a heading that wraps in one
   card keeps every figure and every spark line level across the row. */
.kpi { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.kpi .spark { align-self: end; }
.chart .chart-empty { font-size: 14px; fill: var(--muted); }
.toggle-sm a { padding: 4px 10px; font-size: 0.82rem; white-space: nowrap; }
.funnel-track { width: 100%; height: 18px; display: block; }
.funnel-n { white-space: nowrap; text-align: right; }
.funnel-fill { fill: var(--grey); }
.funnel-2 .funnel-fill { fill: #e7a13c; } .funnel-2 .funnel-step { background: var(--amber-bg); color: var(--amber); }
.funnel-3 .funnel-fill { fill: var(--blue); } .funnel-3 .funnel-step { background: var(--blue-bg); color: var(--blue); }
.funnel-4 .funnel-fill { fill: var(--purple); } .funnel-4 .funnel-step { background: var(--purple-bg); color: var(--purple); }
.funnel-5 .funnel-fill { fill: var(--green); } .funnel-5 .funnel-step { background: var(--green-solid); color: #fff; }

.hbars { display: grid; gap: 12px; margin: 10px 0 14px; }
.hbar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.hbar-label { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.hbar-high .hbar-label { color: var(--red); }
.hbar-track { width: 100%; height: 14px; display: block; }
.hbar-n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.speed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 8px; }
.speed-item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--inset); }
.speed-item .big { font-size: 1.6rem; }
.big-none { font-size: 1rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.load td:first-child { white-space: nowrap; }
.speed-item p { margin: 0; }
.speed-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--teal-bg); color: var(--teal); }
.speed-icon svg { width: 19px; height: 19px; }
.speed-amber { background: var(--amber-bg); color: var(--amber); }
.speed-purple { background: var(--purple-bg); color: var(--purple); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); transition: background var(--ease); }
.feed li:last-child { border-bottom: 0; }
.feed li:hover { background: var(--hover); }
.feed a { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.feed a:hover strong { color: var(--teal); }
.feed-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.feed-icon svg { width: 18px; height: 18px; }
.feed-teal { background: var(--teal-bg); color: var(--teal); }
.feed-blue { background: var(--blue-bg); color: var(--blue); }
.feed-purple { background: var(--purple-bg); color: var(--purple); }
.feed-green { background: var(--green-bg); color: var(--green); }
.feed-red { background: var(--red-bg); color: var(--red); }

@media (max-width: 1500px) {
  .live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .live-grid, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpis { gap: 12px; }
  .speed { grid-template-columns: minmax(0, 1fr); }
  .speed-item { flex-direction: row; }
  .funnel-row { grid-template-columns: 28px minmax(0, 1fr) 70px; }
  .funnel-n { grid-row: 1; grid-column: 3; }
  .funnel-track { grid-row: 2; grid-column: 2 / -1; }
  .feed li { grid-template-columns: 36px minmax(0, 1fr); }
  .feed li > :last-child { grid-column: 2; }
}

/* The learner's dashboard: the one next step, and a small journey on every unit card. */
.focus-card {
  display: block; color: inherit; text-decoration: none; position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(60, 196, 180, 0.18), transparent 40%),
    linear-gradient(135deg, var(--card) 0%, var(--teal-wash) 100%);
  border-color: var(--teal-line); transition: transform var(--ease), box-shadow var(--ease);
}
.focus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.focus-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.focus-head h2 { margin: 0 0 2px; font-size: 1.3rem; }
.focus-head p { margin: 0; }
.focus-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); color: #fff; box-shadow: 0 8px 18px -8px rgba(18, 136, 138, 0.8); }
.focus-icon svg { width: 24px; height: 24px; }
.focus-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--teal); white-space: nowrap; }
.focus-go svg { width: 20px; height: 20px; transition: transform var(--ease); }
.focus-card:hover .focus-go svg { transform: translateX(4px); }
.focus-card .journey { margin: 0; box-shadow: none; background: var(--glass); }

.jmini { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.jmini-dots { display: inline-flex; gap: 4px; }
.jmini-dots i { display: block; width: 18px; height: 6px; border-radius: 3px; background: var(--grey-bg); }
.jmini-dots i.jm-done { background: var(--teal); }
.jmini-dots i.jm-now { background: var(--teal-bright); box-shadow: 0 0 0 2px var(--teal-bg); }
.jmini-dots i.jm-alert { background: var(--red); }
.jmini-text { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
@media (max-width: 760px) {
  .focus-head { grid-template-columns: auto minmax(0, 1fr); }
  .focus-go { grid-column: 1 / -1; }
}

/* A list row is one link: the first cell's link stretches over the whole row, and any
   button in the row stays clickable above it. */
.row-link { position: relative; cursor: pointer; }
.row-link a.stretch { color: inherit; text-decoration: none; }
.row-link a.stretch::after { content: ""; position: absolute; inset: 0; }
.row-link:hover a.stretch { color: var(--teal); }
.row-link .btn, .row-link form, .row-link [data-tip] { position: relative; z-index: 1; }
/* Backlog 131: a row that opens something and has no button says so with a chevron. */
.row-go td:last-child { position: relative; padding-right: 36px; }
.row-go td:last-child::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--grey); border-right: 2px solid var(--grey);
  transform: translateY(-50%) rotate(45deg); transition: border-color var(--ease), right var(--ease);
}
.row-go:hover td:last-child::after { border-color: var(--teal); right: 10px; }
.table td .jmini { margin-top: 6px; }

/* Users & roles: counts by role that filter the list, and a search as you type. */
.people-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.people-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text); background: var(--inset);
  border: 1px solid var(--line); transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.chip-btn strong { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--card); font-size: 0.78rem; }
.chip-btn:hover { border-color: var(--teal); }
.chip-btn.on { background: var(--ink-fill); border-color: var(--ink-fill); color: #fff; }
.chip-btn.on strong { background: var(--teal-bright); color: #16233f; }
.people-search input {
  width: min(300px, 100%); font: inherit; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--field-line); background: var(--field); color: var(--text);
}
.people-search input:focus { border-color: var(--teal); box-shadow: var(--ring); }
.person-cell { display: flex; align-items: center; gap: 12px; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.82rem; overflow: hidden; }

/* The tutor's review: the verdicts as one bar, and a chip per criterion to jump to it. */
.verdicts { padding: 16px 18px; }
.verdict-bar { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; }
.verdicts .legend { margin: 8px 0 10px; }
.ac-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-jump a {
  padding: 4px 10px; border-radius: 8px; font-size: 0.82rem; font-weight: 800; text-decoration: none;
  border: 1px solid transparent; transition: transform var(--ease), border-color var(--ease);
}
.ac-jump a:hover { transform: translateY(-1px); border-color: currentColor; }
.jump-green { background: var(--green-bg); color: var(--green); }
.jump-amber { background: var(--amber-bg); color: var(--amber); }
.jump-red { background: var(--red-bg); color: var(--red); }
.jump-grey { background: var(--grey-bg); color: var(--muted); }
.ac-card, .ac-sheet { scroll-margin-top: 16px; }
.ac-sheet:target { box-shadow: 0 0 0 3px var(--teal-bright), var(--shadow-2); }
.ac-card:target { box-shadow: 0 0 0 3px var(--teal-bright), var(--shadow-2); }

/* Help: the questions learners ask, one line each until opened. */
.faq details { border-top: 1px solid var(--line); }
.faq details:first-of-type { border-top: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 4px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 600; color: var(--teal); transition: transform var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--teal); }
.faq details p { color: var(--muted); padding: 0 4px 14px; margin: 0; }

/* Each page's title carries its menu icon. */
.top-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.top-icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 15px;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(18, 136, 138, 0.75);
}
.top-icon svg { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .top-icon { width: 40px; height: 40px; border-radius: 12px; }
  .top-icon svg { width: 21px; height: 21px; }
  /* Backlog 131: no room kept on the right; on a phone the bell and picture are up in the
     brand bar, and the 84px that was kept wrapped every subtitle to three lines. */
  .top-title { gap: 12px; }
}

/* The learner's next step leads the side column, so the upload is never below the fold. */
.next-card { border-top: 4px solid var(--teal); background: linear-gradient(180deg, var(--teal-wash) 0%, var(--card) 55%); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Words in the work queue break between words, never inside one ("Markshe / et"). */
.queue td { overflow-wrap: normal; }
/* Names and headers on one line (131); the item column takes what is left. */
.queue td:first-child, .queue td:nth-child(2) { white-space: nowrap; }

@media (max-width: 760px) {
  .journey { padding: 14px 2px 12px; }
  .journey li + li::before { top: 14px; left: calc(-50% + 19px); right: calc(50% + 19px); }
  .j-dot { width: 30px; height: 30px; font-size: 0.85rem; }
  .j-dot svg { width: 15px; height: 15px; }
  .j-label { font-size: 0.7rem; letter-spacing: -0.01em; line-height: 1.2; }
  .j-hint { display: none; }
  .journey-caption { display: block; margin: 12px 4px 0; text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--text); }
}

/* Backlog 105.  The bell drops down its detail under itself; the list scrolls inside the
   panel and View all stays pinned at the foot.  On a phone it spans the screen. */
.bell-wrap { position: relative; display: inline-block; }
.bell[aria-expanded="true"] { box-shadow: var(--ring); }
.bell[aria-expanded="true"]::after, .bell[aria-expanded="true"]::before { display: none; }
.bell-pop {
  position: absolute; top: calc(100% + 12px); right: -8px; z-index: 40; width: 420px;
  display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 48px -16px rgba(22, 35, 63, 0.35), 0 2px 6px rgba(22, 35, 63, 0.08);
  white-space: normal; text-align: left; animation: pop-in 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.bell-pop[hidden] { display: none; }
.bell-pop::before {
  content: ""; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px;
  background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bell-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line); font-size: 1.02rem;
}
.bell-pop-n {
  background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 0.78rem;
  padding: 3px 10px; border-radius: 999px;
}
.bell-pop-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; flex: 1 1 auto; }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-list a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none;
  transition: background var(--ease);
}
.bell-list a:hover, .bell-list a:focus-visible { background: var(--page); outline: none; }
.bell-list a:hover strong { color: var(--teal); }
.bell-list li + li a { box-shadow: 0 -1px 0 var(--line); }
.bell-list li + li a:hover { box-shadow: none; }
.bell-list .is-new a { background: linear-gradient(90deg, var(--teal-bg), transparent 70%); }
.bell-list .is-new .feed-icon { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--teal-bright); }
.bell-list-quiet .feed-icon { width: 30px; height: 30px; margin-left: 3px; }
.bell-list-quiet .feed-icon svg { width: 15px; height: 15px; }
.bell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.bell-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-when { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bell-go {
  font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--grey-bg); color: var(--text);
}
.bell-go-teal { background: var(--teal-bg); color: var(--teal); }
.bell-go-purple { background: var(--purple-bg); color: var(--purple); }
.bell-go-red { background: var(--red-bg); color: var(--red); }
.feed-grey { background: var(--grey-bg); color: var(--text); }
.bell-sec {
  margin: 14px 12px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.bell-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 14px; color: var(--muted); }
.bell-empty svg { width: 22px; height: 22px; flex: none; color: var(--teal); }
.bell-loading { margin: 0; padding: 26px 20px; color: var(--muted); }
.bell-pop-foot {
  display: block; padding: 13px 20px; border-top: 1px solid var(--line); text-align: center;
  font-weight: 700; color: var(--teal); text-decoration: none; border-radius: 0 0 var(--radius) var(--radius);
}
.bell-pop-foot:hover { background: var(--teal-bg); }
@media (max-width: 760px) {
  .bell-pop {
    position: fixed; top: calc(env(safe-area-inset-top) + 58px); left: 12px; right: 12px;
    width: auto; max-height: calc(100vh - 150px);
  }
  .bell-pop::before { right: 64px; }
  .bell-list a { grid-template-columns: 32px minmax(0, 1fr); padding: 10px 8px; }
  .bell-when { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Backlog 86.  One card per deliverable on a unit with several.  The grid fills the row,
   two to four across, and stacks on a phone; a long file name breaks rather than widening
   the card. */
.deliverables { margin-bottom: 4px; }
.deliverables > .card-head { margin: 4px 2px 6px; align-items: center; }
.deliverables > .card-head h2 { margin: 0; }
.deliverables > p.small { margin: 0 2px 12px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-bottom: 18px; }
.slot { display: flex; flex-direction: column; margin-bottom: 0; padding: 18px 20px; border-top: 4px solid var(--green); }
.slot-empty { border-top-color: var(--field-line); background: var(--card-2); }
.slot-new { border-top-color: var(--amber); }
.slot h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; }
.slot .eyebrow { margin-bottom: 4px; }
.slot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.slot-tags .pill { font-size: 0.78rem; padding: 2px 10px; }
.slot-file { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; overflow-wrap: anywhere; }
.slot-file svg { flex: none; width: 18px; height: 18px; color: var(--green); margin-top: 2px; }
.slot-file span { display: flex; flex-direction: column; min-width: 0; }
.slot-form { margin-top: auto; }
.slot-form input[type=file] { display: block; width: 100%; max-width: 100%; font-size: 0.82rem; margin: 0 0 10px; }
.slot-form .btn { width: 100%; justify-content: center; }
.slot-form .btn svg { width: 16px; height: 16px; }
.slot-msg { margin: 8px 0 0; color: var(--text); }
.slot-msg:empty { display: none; }
.file-list { list-style: none; padding: 0; margin: 4px 0 10px; }
.file-list li { margin: 3px 0; overflow-wrap: anywhere; }
.file-list li .muted { display: block; }
.slot-form progress { display: block; width: 100%; height: 8px; margin-top: 8px; accent-color: var(--teal); }

/* Backlog 122.  The details a person fills in, in the profile panel and on the page. */
.form input[type=tel] {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
  padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field-hint { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.profile-section { padding-top: 14px; border-top: 1px solid var(--line); }
.profile-section h3 { margin: 0 0 12px; font-size: 1rem; }
.profile-form label { margin-bottom: 12px; }
.profile-missing {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg);
  border-left: 4px solid var(--amber); font-size: 0.92rem;
}
.profile-title { color: var(--muted); font-size: 0.95rem; flex-basis: 100%; }

/* Backlog 123.  Who is online, for Dallas only: a small dot beside the profile with the
   number online, green while anybody is, and the list dropping down under it. */
.presence-wrap { position: relative; display: inline-block; }
.presence-dot {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  color: var(--text); font-size: 0.8rem; font-weight: 700; text-decoration: none;
}
/* A real element, not ::before: the tooltips (`[data-tip]`) already use both pseudo-elements. */
.presence-light {
  width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}
.presence-dot.is-on .presence-light { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.presence-dot[aria-expanded="true"]::after, .presence-dot[aria-expanded="true"]::before { display: none; }
.presence-dot:hover { border-color: var(--teal); }
.presence-dot:focus-visible, .presence-dot[aria-expanded="true"] { outline: none; box-shadow: var(--ring); }
.presence-pop {
  position: absolute; top: calc(100% + 12px); right: -8px; z-index: 40; width: 380px;
  max-height: min(520px, calc(100vh - 120px)); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 48px -16px rgba(22, 35, 63, 0.35), 0 2px 6px rgba(22, 35, 63, 0.08);
  white-space: normal; text-align: left; animation: pop-in 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.presence-pop[hidden] { display: none; }
.presence-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.presence-list { list-style: none; margin: 0; padding: 6px 8px 8px; }
.presence-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px; border-radius: 10px;
}
.presence-row:hover { background: var(--grey-bg); }
.presence-avatar { width: 34px; height: 34px; font-size: 0.8rem; overflow: hidden; }
.presence-who { display: flex; flex-direction: column; min-width: 0; }
.presence-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-when { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.presence-state { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.presence-state.is-on { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.presence-state.is-off { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.presence-card { padding: 8px; }
.presence-card .presence-pop, .presence-card .presence-head { border: 0; }
@media (max-width: 760px) {
  .presence-dot { height: 28px; padding: 0 8px 0 7px; }
  .presence-pop {
    position: fixed; top: calc(env(safe-area-inset-top) + 58px); left: 12px; right: 12px;
    width: auto; max-height: calc(100vh - 150px);
  }
  .presence-row { grid-template-columns: 32px minmax(0, 1fr); }
  .presence-when { grid-column: 2; }
}

/* -------------------------------------------------------------- the theme -- */
/* Backlog 129.  A sun or a moon at the top of every page, and the three-way choice in the
   profile panel.  Which icon shows follows the theme in force, chosen or the device's. */
.theme-form { display: inline-flex; margin: 0; }
.theme-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), color var(--ease);
}
.theme-btn:hover { transform: translateY(-1px) rotate(-14deg); box-shadow: var(--shadow-2); color: var(--teal); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-moon { display: grid; }
.theme-sun { display: none; color: var(--amber); }
:root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-moon { display: none; }
  :root:not([data-theme="light"]) .theme-sun { display: grid; }
}
.theme-choice {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 8px;
  padding: 4px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line);
}
.theme-choice button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit;
  font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: background var(--ease), color var(--ease);
}
.theme-choice button svg { width: 20px; height: 20px; }
.theme-choice button:hover { color: var(--text); }
.theme-choice button[aria-checked="true"] { background: var(--card); color: var(--teal); box-shadow: var(--shadow-1); }
@media (max-width: 760px) {
  .theme-btn { width: 34px; height: 34px; }
  .theme-btn svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------------ the guardian view -- */
/* Backlog 129.  A parent or guardian following their child: whose progress it is and the
   switcher, the headline, eight figures, the qualification as one track, each unit's five
   steps and every criterion as a chip.  Every tone is a pair of tokens, so the dark theme
   needs nothing of its own here. */
.top-purple { border-top-color: var(--purple); }
.top-red { border-top-color: var(--red); }
.top-teal { border-top-color: var(--teal); }
.table-scroll { overflow-x: auto; }
/* The default tone first, so the tone classes below it win at the same specificity. */
.fam-stat, .fam-next, .q-node, :where(.fam-timeline li) { --tone: var(--teal); --tone-bg: var(--teal-bg); }
.card-head .link-teal { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.card-head .link-teal svg { width: 16px; height: 16px; transition: transform var(--ease); }
.card-head .link-teal:hover svg { transform: translateX(3px); }
.fam-green, .q-green, .tl-green, .fam-next-green { --tone: var(--green); --tone-bg: var(--green-bg); }
.fam-teal, .q-teal, .tl-teal, .fam-next-teal { --tone: var(--teal); --tone-bg: var(--teal-bg); }
.fam-amber, .q-amber, .tl-amber, .fam-next-amber { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.fam-purple, .q-purple, .tl-purple, .fam-next-purple { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.fam-blue, .tl-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.fam-red, .q-red, .tl-red, .fam-next-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.q-grey, .fam-next-grey { --tone: var(--grey); --tone-bg: var(--grey-bg); }

.kid-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  margin-bottom: 18px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.kid-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kid-avatar { width: 52px; height: 52px; font-size: 1.05rem; overflow: hidden; flex: none; box-shadow: 0 0 0 3px var(--teal-bg); }
.kid-text { min-width: 0; }
.kid-text .eyebrow { margin-bottom: 1px; }
.kid-text h2 { margin: 0; font-size: 1.22rem; }
.kid-text .small { margin: 2px 0 0; }
.kid-switch { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; max-width: 100%; }
.kid-switch::-webkit-scrollbar { display: none; }
.kid-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--inset); color: var(--text); text-decoration: none;
  font-weight: 700; white-space: nowrap; transition: transform var(--ease), border-color var(--ease), background var(--ease);
}
.kid-chip .avatar { width: 30px; height: 30px; font-size: 0.72rem; }
.kid-chip svg { width: 16px; height: 16px; stroke-width: 2.6; }
.kid-chip:hover { border-color: var(--teal); transform: translateY(-1px); }
.kid-chip.on { background: var(--teal-bg); border-color: var(--teal); color: var(--teal); }

.fam-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 0.95fr); gap: 28px; align-items: center;
  background: radial-gradient(circle at 0% 0%, var(--teal-bg), transparent 46%), var(--card);
}
.fam-hero .big { font-size: 1.9rem; }
.fam-hero-bar .bar { margin: 12px 0 6px; }
.fam-hero-bar .small { margin: 0; }
.fam-next {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line);
  border-left: 4px solid var(--tone); color: inherit; text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease);
}
a.fam-next:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.fam-next-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.fam-next-icon svg { width: 22px; height: 22px; }
.fam-next-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fam-next-text .eyebrow { margin: 0; color: var(--tone); }
.fam-next-text strong { font-size: 1.05rem; }
.fam-next-go { color: var(--tone); }
.fam-next-go svg { width: 20px; height: 20px; transition: transform var(--ease); }
a.fam-next:hover .fam-next-go svg { transform: translateX(4px); }

.fam-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.fam-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
  background: radial-gradient(circle at 100% 100%, var(--tone-bg) 0 54px, transparent 55px), var(--card);
  color: inherit; text-decoration: none; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
/* Only a figure that opens something lifts; one that only explains itself keeps still and
   shows its tip, so nothing looks clickable that is not (backlog 131). */
a.fam-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--tone); }
.fam-stat[data-tip]:not(a):hover { border-color: var(--tone); }
.fam-stat[data-tip] { cursor: help; }
a.fam-stat { cursor: pointer; }
/* The figure and its label sit at the top of every tile and the footnote at the foot, so a
   label that wraps in one tile moves nothing in its neighbours. */
.fam-stat { grid-template-rows: auto auto 1fr; align-content: start; }
.fam-stat-sub { align-self: end; }
.fam-stat-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.fam-stat-icon svg { width: 22px; height: 22px; }
.fam-stat-n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fam-stat-label { font-weight: 700; font-size: 0.9rem; }
.fam-stat-sub { grid-column: 1 / -1; margin-top: 10px; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }

/* The qualification as one track: a ring per unit, joined by a line that turns green once
   the unit before is achieved.  Rows of three on a narrow computer, a list on a phone. */
.q-track { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.q-node { position: relative; min-width: 0; }
.q-node + .q-node::before {
  content: ""; position: absolute; top: 30.5px; left: calc(-50% + 32px); right: calc(50% + 32px);
  height: 3px; border-radius: 3px; background: var(--line);
}
.q-done + .q-node::before { background: linear-gradient(90deg, var(--green), var(--teal-bright)); transform-origin: 0 50%; animation: grow 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.q-node a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 4px 4px 10px; border-radius: 12px; color: inherit; text-decoration: none;
  transition: background var(--ease), transform var(--ease);
}
.q-node a:hover { background: var(--hover); transform: translateY(-2px); }
.q-node a:hover .q-title { color: var(--text); }
.q-ring { display: block; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--card); position: relative; z-index: 1; }
.q-ring circle { fill: none; stroke-width: 4.5; }
.q-ring-track { stroke: var(--grey-bg); }
.q-done .q-ring-track { fill: var(--green-bg); }
.q-ring-fill { stroke: var(--tone); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; animation: ring 1s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.q-ring-n { font-size: 15px; font-weight: 800; fill: var(--text); }
.q-done .q-ring-n { fill: var(--green); }
.q-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-label strong { font-size: 0.9rem; }
.q-title { font-size: 0.78rem; color: var(--muted); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--ease); }
/* Two lines kept for every title across the track, so the statuses under them line up (131). */
.q-track .q-title { min-height: 2.5em; }
.q-state { font-size: 0.76rem; font-weight: 700; line-height: 1.25; color: var(--tone); }
.q-grey .q-state { color: var(--muted); }

.wk-chart { display: block; width: 100%; height: 132px; }
.wk-base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wk-hit { fill: transparent; }
.wk-chart g:hover .wk-hit { fill: var(--chart-hover); }
.wk-days { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 0.72rem; color: var(--muted); text-align: center; white-space: nowrap; }
/* Right-aligned through flex, so a label wider than its column spills left, into the chart's
   width, rather than past its end. */
.wk-days li:last-child { display: flex; justify-content: flex-end; }

.fam-timeline { list-style: none; margin: 0; padding: 0; }
.fam-timeline li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.fam-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line); }
.tl-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.tl-icon svg { width: 18px; height: 18px; }
.tl-text { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; min-width: 0; }
.tl-text strong { font-weight: 650; }
.tl-text a { color: inherit; text-decoration: none; }
.tl-text a:hover { text-decoration: underline; }
.tl-text a:hover { color: var(--teal); }
.fam-hint { margin: -2px 0 14px; }
/* Two cards side by side that end level (backlog 131). */
.split-match { align-items: stretch; }

/* The progress page: a card per unit with its journey and its criteria. */
.fam-section-head { flex-wrap: wrap; margin: 6px 0 12px; }
.fam-section-head .legend { margin: 0; }
.fam-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 18px; margin-bottom: 18px; }
/* Each card takes four rows of the grid (head, journey, figures, link) and shares them with
   the card beside it, so a title on one line next to one on two moves nothing (131). */
.fam-unit { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; margin: 0; border-top-width: 6px; transition: transform var(--ease), box-shadow var(--ease); }
.fam-unit:hover { box-shadow: var(--shadow-2); }
.fam-unit-head, .fam-unit-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fam-unit-head .eyebrow { margin-bottom: 2px; }
.fam-unit-head h3 { margin: 0; font-size: 1.08rem; }
.fam-unit-head h3 a { color: inherit; text-decoration: none; }
.fam-unit-head h3 a:hover { color: var(--teal); }
.fam-unit-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fam-unit .journey, .fam-unit-hero .journey { margin: 0; box-shadow: none; background: var(--card-2); padding: 14px 8px 10px; }
.fam-unit-figs .bar { margin: 0 0 6px; }
.fam-unit-figs .small { margin: 0 0 10px; }
.fam-unit-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--teal); text-decoration: none; }
.fam-unit-go svg { width: 18px; height: 18px; transition: transform var(--ease); }
.fam-unit-go:hover svg { transform: translateX(4px); }

.crit-map { display: grid; gap: 8px; }
.crit-band { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; }
.crit-band-name { padding-top: 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.crit-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crit {
  display: inline-grid; place-items: center; min-width: 46px; height: 28px; padding: 0 8px;
  border-radius: 8px; border: 1px solid transparent; font-size: 0.78rem; font-weight: 800;
  font-variant-numeric: tabular-nums; cursor: help; transition: transform var(--ease), box-shadow var(--ease);
}
.crit-chips .crit:hover, .crit-chips .crit:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.crit-met { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.crit-working { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.crit-todo { background: var(--grey-bg); color: var(--grey-text); }
.crit-na { background: var(--purple-bg); color: var(--purple); border-color: var(--purple-line); }
.crit-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1px solid transparent; }
.crit-dot.crit-met { background: var(--green); }
.crit-dot.crit-working { background: var(--amber); }
.crit-dot.crit-todo { background: var(--grey); }
.crit-dot.crit-na { background: var(--purple); }

/* Milestones: six markers along the diploma, lit once reached. */
.milestones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ms {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 8px 12px; border-radius: 14px; border: 1px dashed var(--field-line); background: var(--card-2);
  cursor: help; transition: transform var(--ease), box-shadow var(--ease);
}
.ms:hover, .ms:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.ms strong { font-size: 0.88rem; line-height: 1.25; }
.ms .small { font-size: 0.76rem; margin-top: auto; }
.ms-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--grey-bg); color: var(--muted); }
.ms-badge svg { width: 22px; height: 22px; }
.ms-on { border-style: solid; border-color: var(--teal-line); background: radial-gradient(circle at 50% 0%, var(--teal-bg), transparent 70%), var(--card); }
.ms-on .ms-badge { color: #fff; background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid)); box-shadow: 0 8px 18px -8px rgba(18, 136, 138, 0.8); }
.ms-on .small { color: var(--teal); font-weight: 700; }
.kid-tally { padding: 1px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.kid-chip.on .kid-tally { border-color: var(--teal-line); color: var(--teal); }

/* The guide. */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.guide-steps li { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.guide-steps p { margin: 4px 0 0; font-size: 0.9rem; }
.guide-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--teal); color: var(--teal); font-weight: 800; }
.guide-n-done { border: 0; color: #fff; background: linear-gradient(135deg, #1f9a62, var(--green-solid)); }
.guide-n svg { width: 18px; height: 18px; stroke-width: 2.6; }
.guide-words { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; }
.guide-words dt { font-weight: 800; }
.guide-words dd { margin: 0; color: var(--muted); }
.guide-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guide-help li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.guide-help li > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--teal-bg); color: var(--teal); }
.guide-help p { margin: 2px 0 0; font-size: 0.9rem; }
.guide-privacy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 1100px) {
  .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guide-steps { grid-template-columns: minmax(0, 1fr); }
  .guide-steps li { flex-direction: row; align-items: flex-start; }
  .guide-n { flex: none; }
  .guide-words { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .guide-words dd { margin-bottom: 10px; }
  .guide-privacy { grid-template-columns: minmax(0, 1fr); }
}
.crit-legend { margin: 0 0 12px; }

/* One unit. */
.fam-back { margin: -4px 0 12px; }
.fam-back a { display: inline-flex; align-items: center; gap: 4px; }
.fam-back svg { width: 16px; height: 16px; }
.fam-unit-hero { border-top-width: 6px; }
.fam-unit-hero-head { margin-bottom: 16px; }
.fam-unit-hero-head h2 { margin: 0 0 4px; font-size: 1.35rem; }
.fam-band { margin: 18px 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fam-crits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fam-crit {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.fam-crit:hover { border-color: var(--field-line); box-shadow: var(--shadow-1); }
.fam-crit > .crit { cursor: default; }
.fam-crit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fam-crit-top strong { font-weight: 650; line-height: 1.35; }
.fam-note { margin-top: 6px; }
.fam-note summary { cursor: pointer; color: var(--teal); font-weight: 700; font-size: 0.85rem; width: max-content; max-width: 100%; }
.fam-note p { margin: 6px 0 0; white-space: pre-line; font-size: 0.9rem; }
.fam-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fam-file {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2);
  color: inherit; text-decoration: none; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.fam-file > svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--teal-bg); color: var(--teal); }
.fam-file > span { display: flex; flex-direction: column; min-width: 0; }
.fam-file:hover { border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* Reports. */
.fam-report {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
  background: radial-gradient(circle at 100% 0%, var(--teal-bg), transparent 46%), var(--card);
}
.fam-report-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-solid));
  box-shadow: 0 10px 22px -10px rgba(18, 136, 138, 0.75);
}
.fam-report-icon svg { width: 32px; height: 32px; }
.fam-report-text h2 { margin-bottom: 4px; }
.fam-report-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; font-size: 0.9rem; }
.fam-report-list li { display: inline-flex; align-items: center; gap: 6px; }
.fam-report-list svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.6; }
.fam-report .btn svg, .fam-dl svg { width: 16px; height: 16px; vertical-align: -3px; }
.fam-dl {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 4px 11px;
  border-radius: 999px; background: var(--teal-bg); color: var(--teal); font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: background var(--ease), color var(--ease);
}
.fam-dl:hover { background: var(--teal-solid); color: #fff; }
.fam-none { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.fam-none p { max-width: 520px; }
.kid-links { list-style: none; margin: 0 0 6px; padding: 0; }
.kid-links li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.kid-links form { display: inline; }

@media (max-width: 1200px) {
  .fam-hero { grid-template-columns: auto minmax(0, 1fr); }
  .fam-hero .fam-next { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .fam-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .q-node + .q-node::before { display: none; }
  .q-node a { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 8px; }
}
@media (max-width: 760px) {
  .kid-bar { padding: 12px 14px; }
  .kid-avatar { width: 44px; height: 44px; }
  .fam-hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; }
  .fam-hero .ring { width: 92px; height: 92px; }
  .fam-hero .big { font-size: 1.35rem; }
  .fam-hero-mid .eyebrow .tip-dot { display: none; }
  .fam-stats { gap: 10px; }
  .fam-stat { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .fam-stat-icon { grid-row: auto; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; }
  .fam-stat-icon svg { width: 18px; height: 18px; }
  .fam-stat-n { font-size: 1.35rem; }
  .fam-stat-label { font-size: 0.84rem; }
  .fam-stat-sub { margin-top: 4px; font-size: 0.76rem; }
  /* The track becomes a list, its line running down through the rings. */
  .q-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .q-node::before, .q-node + .q-node::before {
    content: ""; display: block; position: absolute; left: 29.5px; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto; border-radius: 0; background: var(--line); animation: none;
  }
  .q-node:first-child::before { top: 30px; }
  .q-node:last-child::before { bottom: calc(100% - 30px); }
  .q-done::before, .q-done + .q-node::before { background: var(--green); }
  .q-node a { align-items: flex-start; padding: 7px 8px; gap: 14px; }
  .q-ring { width: 46px; height: 46px; }
  .q-label { padding-top: 3px; }
  .q-title { -webkit-line-clamp: 1; line-clamp: 1; }
  .q-track .q-title { min-height: 0; }
  .fam-unit-head, .fam-unit-hero-head { flex-direction: column; }
  .fam-unit-pills { justify-content: flex-start; }
  .crit-band { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .crit-band-name { padding-top: 0; }
  .fam-crit-top { flex-direction: column; gap: 4px; }
  .fam-report { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fam-report .btn { width: 100%; text-align: center; }
  .wk-chart { height: 110px; }
}

/* ------------------------------------------------- the learner's journey -- */
/* Backlog 131.  The learner's dashboard is built from the guardian's pieces: the hero, the
   figures, the track of nine rings, milestones and the weeks.  What is its own is the board
   beside the ring, whose move each unit is, a chip per unit that opens it. */
.me-hero { grid-template-columns: auto minmax(0, 1fr) minmax(330px, 0.95fr); }
.me-hero .legend { margin-top: 12px; }
/* The names take the width of the longest, and every row's chips start under each other. */
.lanes {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px;
  padding: 4px 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line);
}
.lane {
  --tone: var(--grey); --tone-bg: var(--grey-bg);
  grid-column: span 2; display: grid; grid-template-columns: subgrid; align-items: center; padding: 8px 0;
}
.lane + .lane { border-top: 1px dashed var(--line); }
.lane-yours { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.lane-tutor { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.lane-done { --tone: var(--green); --tone-bg: var(--green-bg); }
.lane-ahead .lane-n { color: var(--grey-text); }
/* The name and its count fill the column, so every count sits under the one above. */
.lane-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 0.86rem; cursor: help; }
.lane-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--tone-bg); color: var(--tone); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lane-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lane-chip {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tone-bg); color: var(--tone); font-weight: 800; font-size: 0.88rem; text-decoration: none;
  transition: transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}
/* Each chip is its unit's colour (a `q-` tone class, as on the track); it fills on hover. */
.lane-chip:hover, .lane-chip:focus-visible { background: var(--tone); color: var(--card); transform: translateY(-2px); box-shadow: var(--shadow-2); border-radius: 50%; }
.lane-chip.q-grey { color: var(--grey-text); }
.lane-none { font-size: 0.8rem; color: var(--muted); }
.focus-done { background: radial-gradient(circle at 100% 0%, var(--green-bg), transparent 45%), var(--card); border-color: var(--green-line); }
.focus-done:hover { transform: none; box-shadow: var(--shadow-1); }
.focus-done .focus-head { margin-bottom: 0; }
.focus-done .focus-icon { background: linear-gradient(135deg, #1f9a62, var(--green-solid)); }

/* My units: the cards in a row line up (title, journey, bar, next step) whatever the length
   of each title.  Each card takes six rows of the grid and shares them with its row. */
.unit-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.unit-card .jmini { align-self: start; }
.unit-card-bar .bar { margin: 12px 0 6px; }
.unit-card-bar p { margin: 0; }
.unit-card .next { align-self: end; }

@media (max-width: 1200px) {
  .me-hero { grid-template-columns: auto minmax(0, 1fr); }
  .me-hero .lanes { grid-column: 1 / -1; grid-template-columns: repeat(2, max-content minmax(0, 1fr)); }
  .me-hero .lane + .lane { border-top: 0; }
  .me-hero .lane:nth-child(n+3) { border-top: 1px dashed var(--line); }
}
@media (max-width: 760px) {
  .me-hero { grid-template-columns: auto minmax(0, 1fr); }
  .me-hero .legend { display: none; }
  .me-hero .lanes { grid-template-columns: max-content minmax(0, 1fr); padding: 2px 12px; }
  .me-hero .lane:nth-child(n+2) { border-top: 1px dashed var(--line); }
  .lane-chip { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner { border-top-color: var(--teal-bright); }
  html { scroll-behavior: auto; }
}