@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&family=JetBrains+Mono:wght@400;700&display=swap');

/* The Lyceum look, shared with Spell Sprint: same palette, same faces.
   Light is the base; dark mode redefines the same tokens further down. */
:root {
  --bg: #FAF6FA;
  --bg-2: #FFFFFF;
  --bg-3: #F3EDF3;
  --line: #E2D8E4;
  --text: #2A1F2D;
  --muted: #8A798F;
  --accent: #7B4B94;      /* brand purple, same as Spell Sprint */
  --accent-2: #E2591B;    /* action orange, same as Spell Sprint's Start */
  --good: #1F8A5B;
  --good-soft: #E1F3EA;
  --good-line: #9AD0B4;
  --bad: #C4342F;
  /* The two halves of "where your writing time went". The same blue and gold
     the board uses, because it is the same measurement in two places and two
     colour schemes for one thing is how a child learns to distrust both. */
  --think: #3F6DA8;
  --type: #B58A35;
  --warn: #B7791F;
  --radius: 14px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* The other Sprints' names for the same colours. The sign-in screen's
     buttons were written against these and drew with no border, no fill and
     an invisible initial here, because Write Sprint never defined them. */
  --surface: var(--bg-2);
  --ink: var(--text);
  --ink-2: #5C4C61;
  --ink-3: var(--muted);
  --line-strong: #CDBDD1;
  --voice: var(--accent);
  --shadow-lift: 0 2px 4px rgba(42,31,45,.08), 0 18px 40px -18px rgba(42,31,45,.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100dvh; }

#app { margin: 0 auto; padding: clamp(16px, 3vw, 28px) clamp(14px, 3vw, 24px) 56px; }
.screen { animation: fade .18s ease; }
.narrow { max-width: 560px; margin: 0 auto; }
.wide { max-width: 780px; margin: 0 auto; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ shared --- */
.brand { font-size: clamp(34px, 9vw, 52px); line-height: 1; margin: 7vh 0 6px; text-align: center; font-weight: 800; letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.tagline { text-align: center; color: var(--muted); margin: 0 0 34px; }

label, .field-label { color: var(--muted); font-size: 14px; }
.field { display: block; margin: 0 0 16px; }
.field span { display: block; margin-bottom: 6px; }

input[type=text], input[type=number], input:not([type]), textarea {
  background: var(--bg-2);
  border: 2px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 17px;
  width: 100%;
  outline: none;
  font-family: inherit;
}
input:focus, textarea:focus { border-color: var(--accent); }

.btn { border: 0; border-radius: var(--radius); padding: 15px 20px; font-size: 17px; font-weight: 650; cursor: pointer; font-family: inherit; }
.btn.primary { background: var(--accent-2); color: #fff; }
.btn.primary:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--muted); border: 2px solid var(--line); }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.wide { width: 100%; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

.error { color: var(--bad); font-size: 14px; margin: 0; }
.muted { color: var(--muted); }
.small-note { font-size: 13px; }
.fine { color: var(--muted); font-size: 13px; margin: 14px 0 0; line-height: 1.5; }

#name-form { display: flex; flex-direction: column; gap: 12px; }
.recent { margin-top: 26px; }
.recent-label { color: var(--muted); font-size: 13px; text-align: center; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 16px; font-size: 15px; cursor: pointer; font-family: inherit; }
.admin-link { text-align: center; margin-top: 36px; font-size: 13px; }
.admin-link a { color: var(--muted); }

.topbar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 24px; }
.who { color: var(--muted); font-size: 16px; }
.who strong { color: var(--text); }
.pick-title { font-size: 22px; margin: 0 0 16px; }

.panel { margin-top: 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; color: var(--muted); font-weight: 600; }
.panel h3 .count { color: var(--text); font-weight: 700; }
.resume h3 { color: var(--warn); }

.targets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.target { background: var(--bg-2); border: 2px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px 18px; font-size: 16px; font-weight: 650; cursor: pointer; font-family: inherit; }
.target.is-on { border-color: var(--accent); color: var(--accent); }

.list { width: 100%; border-collapse: collapse; font-size: 15px; }
.list td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.list tr:last-child td { border-bottom: 0; }
.list td:last-child { text-align: right; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.list a { color: var(--accent); text-decoration: none; cursor: pointer; }

/* ------------------------------------------------------------ editor --- */
.hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hud-left span { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-left small, .hud-right { color: var(--muted); font-size: 13px; }
.hud-mid { font-family: var(--mono); color: var(--accent); font-size: 18px; font-variant-numeric: tabular-nums; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.save-state { font-size: 12px; color: var(--muted); }
.save-state.saving { color: var(--warn); }

.bar { height: 5px; background: var(--bg-2); border-radius: 99px; margin: 10px 0 16px; overflow: hidden; }
#bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width .2s ease; }
#bar-fill.done { background: var(--good); }

.title-input { font-size: 22px; font-weight: 700; border-color: transparent; background: transparent; padding: 8px 0; margin-bottom: 6px; }
.title-input:focus { border-color: transparent; border-bottom-color: var(--line); }

.editor {
  min-height: 58dvh;
  resize: vertical;
  line-height: 1.75;
  font-family: var(--serif);
  font-size: 18px;
  background: var(--bg-3);
  padding: 20px;
}
.write-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; }

/* ------------------------------------------------------------ report --- */
.report-head { margin: 6px 0 20px; }
.report-head h2 { margin: 0 0 4px; font-size: 26px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
.tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.tile span { font-size: 24px; font-weight: 800; font-family: var(--mono); }
.tile small { color: var(--muted); font-size: 12px; }

.issues { display: flex; flex-direction: column; gap: 10px; }
.issue { background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: 10px; padding: 12px 14px; }
.issue.style { border-left-color: var(--warn); }
.issue .msg { font-size: 15px; line-height: 1.45; }
.issue .ctx { margin-top: 6px; font-family: var(--serif); font-size: 14px; color: var(--muted); }
.issue .ctx b { color: var(--bad); font-weight: 700; }
.issue.style .ctx b { color: var(--warn); }

.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 15px; font-family: var(--mono); }
.fact small { color: var(--muted); font-family: system-ui, sans-serif; margin-left: 6px; font-size: 12px; }

.marked { font-family: var(--serif); font-size: 17px; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; }
.marked mark { background: rgba(196, 52, 47, .12); color: inherit; border-bottom: 2px solid var(--bad); border-radius: 2px; padding: 0 1px; }
.marked mark.style { background: rgba(183, 121, 31, .12); border-bottom-color: var(--warn); }

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

/* ------------------------------------------------------------- admin --- */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.back-link { background: none; border: 0; color: var(--accent); font-size: 14px; cursor: pointer; padding: 0; font-family: inherit; }
.story-text { font-family: var(--serif); font-size: 17px; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; }

/* Marking words, or writing the piece out. The panel keeps one heading and
   swaps what is under it, so it stays one story rather than becoming two. */
.panel-head { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.tabs { display: inline-flex; background: var(--bg-3); border: 1px solid var(--line);
        border-radius: 999px; padding: 3px; gap: 2px; }
.tab { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
       background: none; border: 0; border-radius: 999px; padding: 6px 14px;
       cursor: pointer; }
.tab.on { background: var(--bg-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A plain box with the story in it, set in the same face the story is read in
   so the teacher is editing what the child will see rather than a transcript
   of it. */
.edit-box { width: 100%; box-sizing: border-box; min-height: 340px; resize: vertical;
            font-family: var(--serif); font-size: 17px; line-height: 1.8;
            color: var(--text); background: var(--bg); border: 1px solid var(--line);
            border-radius: 10px; padding: 14px 16px; }
.edit-box:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

@media (max-width: 420px) {
  .hud { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ library --- */
.library-btn { margin-top: 14px; width: 100%; }

.shelf { display: flex; flex-direction: column; gap: 10px; }
.shelf-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
  display: block;
}
.shelf-item:hover { border-color: var(--accent); }
.shelf-item h3 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.shelf-item .shelf-meta { color: var(--muted); font-size: 13px; }
.shelf-item .shelf-open {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-title { font-size: clamp(26px, 6vw, 34px); margin: 10px 0 4px; }
.read-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: 22px;
}

.dl { display: inline-block; text-decoration: none; text-align: center; }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.player-head .pick-title { margin: 0; }
.shelf-heading { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 26px 0 10px; font-weight: 600; }
.shelf-heading:first-of-type { margin-top: 16px; }
.shelf-item.unfinished { border-left: 3px solid var(--warn); }
.shelf-item .shelf-tag { color: var(--warn); font-size: 12px; font-weight: 600; }
.read-actions { display: flex; gap: 8px; }
.saved-note { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--good-soft); border: 1px solid var(--good-line); color: var(--good); font-size: 14px; }
.draft-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.draft-item:last-child { border-bottom: 0; }
.draft-item summary { cursor: pointer; font-size: 15px; }
.draft-text { margin-top: 12px; font-size: 15px; max-height: 340px; overflow-y: auto; }

/* --------------------------------------------------------------- fix --- */
.fix-top { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.fix-progress { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
#fix-bar { height: 100%; width: 0%; background: var(--accent); transition: width .2s ease; }
.fix-label { color: var(--muted); font-size: 14px; margin: 26px 0 10px; }
.fix-context {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
}
.fix-context .bad {
  color: var(--bad);
  font-weight: 700;
  border-bottom: 2px solid var(--bad);
  padding: 0 2px;
}
.fix-field { margin-top: 22px; }
#fix-input { font-size: 22px; font-family: var(--serif); }
#fix-input.wrong { border-color: var(--bad); }
#fix-input.right { border-color: var(--good); }
.fix-feedback { font-size: 15px; margin: 10px 0 0; }
.fix-feedback.bad { color: var(--bad); }
.fix-feedback.good { color: var(--good); }
.fact.fixed { border-color: var(--good-line); background: var(--good-soft); }
.fact.fixed small { color: var(--good); }

/* ------------------------------------------- theme coordination --- */
/* Display face on the big headings, matching Spell Sprint. The editor,
   stories and fix flow keep the serif: reading and writing feel like a
   book; the chrome around them matches the rest of the family. */
.brand, .pick-title, .read-title, .report-head h2, .shelf-item h3 {
  font-family: var(--display);
  letter-spacing: -.01em;
}
.editor, input, textarea, .btn { border-radius: var(--radius); }
.panel, .shelf-item, .tile {
  box-shadow: 0 1px 2px rgba(42, 31, 45, .05), 0 8px 24px -16px rgba(42, 31, 45, .15);
}

/* Dark mode: the same tokens Spell Sprint uses after dusk, so the two
   apps match in both lights. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171021;
    --bg-2: #211829;
    --bg-3: #2C2135;
    --line: #3A2C45;
    --text: #F4EEF6;
    --muted: #93829C;
    --accent: #C293DC;
    --accent-2: #FF8A4C;
    --good: #4ECB93;
    --good-soft: #16311F;
    --good-line: #2C5C40;
    --bad: #FF7B72;
    --warn: #E0A94E;
    --think: #7BA6DF;
    --type: #D8B45F;
    --ink-2: #C3B3CB;
    --line-strong: #523F60;
    --shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
  }
  .btn.primary { color: #2A1405; }
  .marked mark { background: rgba(255, 123, 114, .22); }
  .marked mark.style { background: rgba(224, 169, 78, .18); }
  .panel, .shelf-item, .tile { box-shadow: none; }
}

/* ------------------------------------------------------------- review --- */
/* The story is the interface. A marked word is a button, and pressing it is
   how a child gets through their own report, rather than reading a list of
   what they got wrong and closing the tab. */
.verdict { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
           padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.verdict-line { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--text); }
.verdict-line b { font-weight: 800; }
.verdict-line .wrong { color: var(--bad); font-weight: 700; }
.verdict-line .ok { color: var(--good); font-weight: 700; }
.verdict-bar { height: 8px; border-radius: 99px; background: rgba(196, 52, 47, .2);
               overflow: hidden; }
.verdict-bar i { display: block; height: 100%; background: var(--good); border-radius: 99px;
                 transition: width .4s ease; }
.verdict .small-note { margin: 0; }

.reviewbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.review-progress { font-size: .85rem; color: var(--muted); font-weight: 600; }

.marked .flag { font: inherit; color: inherit; background: rgba(196, 52, 47, .12);
  border: 0; border-bottom: 2px solid var(--bad); border-radius: 3px;
  padding: 0 2px; cursor: pointer; transition: background .12s; }
.marked .flag:hover, .marked .flag:focus-visible { background: rgba(196, 52, 47, .28); }
.marked .flag.style { background: rgba(183, 121, 31, .12); border-bottom-color: var(--warn); }
.marked .flag.style:hover { background: rgba(183, 121, 31, .28); }
/* decided: either replaced, or claimed as the word they meant */
.marked .flag.fixed { background: rgba(31, 138, 91, .16); border-bottom-color: var(--good); }
.marked .flag.kept { background: transparent; border-bottom: 2px dotted var(--muted); }
.marked .flag.unsure { background: rgba(123, 75, 148, .14); border-bottom: 2px dashed var(--accent); }
/* The teacher's desk. A word an adult has settled reads as settled: solid, in
   the same green as a word put right, because that is what it now is. */
.marked .flag.taught { background: rgba(31, 138, 91, .22); border-bottom: 2px solid var(--good); }
.marked .flag.pending { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.pop-word { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.pop-msg { margin: 2px 0 6px; }
.sectionhead { margin: 22px 0 6px; font-family: var(--display); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.qwhy { font-family: var(--mono); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.qwhy.unread { color: var(--warn); }

.lists { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
         padding: 2px 18px; }
.lists > summary { cursor: pointer; padding: 15px 0; font-weight: 700; font-size: .95rem;
                   color: var(--muted); }
.lists > summary:hover { color: var(--text); }
.lists .panel { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }

/* the card that opens on a marked word */
.popover { position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px));
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(42, 31, 45, .38); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 9px; }
.pop-close { position: absolute; top: 6px; right: 9px; border: 0; background: none;
  font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.pop-close:hover { color: var(--text); }
.pop-word { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
            color: var(--text); }
.pop-message { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.45; }
.pop-options { display: flex; flex-wrap: wrap; gap: 7px; }
.pop-opt { font: inherit; font-weight: 700; font-size: .92rem; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg-3);
  color: var(--text); cursor: pointer; }
.pop-opt:hover { border-color: var(--good); color: var(--good); }
.pop-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pop-typebox { display: flex; gap: 8px; }
.pop-typebox input { flex: 1; min-width: 0; font: inherit; padding: 8px 11px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); }
.pop-feedback { margin: 0; font-size: .82rem; font-weight: 600; }
.pop-feedback.bad { color: var(--bad); }

@media (prefers-color-scheme: dark) {
  .marked .flag { background: rgba(255, 123, 114, .22); }
  .marked .flag:hover, .marked .flag:focus-visible { background: rgba(255, 123, 114, .36); }
  .marked .flag.style { background: rgba(224, 169, 78, .18); }
  .marked .flag.fixed { background: rgba(78, 203, 147, .2); }
  .marked .flag.unsure { background: rgba(197, 152, 224, .2); border-bottom-color: #C598E0; }
  .verdict-bar { background: rgba(255, 123, 114, .25); }
  .popover { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .75); }
}

.target-note { color: var(--accent); font-weight: 600; margin: 6px 0 0; }
.togo-note { font-family: var(--mono); font-size: .78rem; font-weight: 700;
             color: var(--accent); white-space: nowrap; }

/* ------------------------------------------------- who is signed in --- */
/* Same bar, same place, in every Sprint. The name is the biggest thing on it
   on purpose: a child who sits down at a machine someone else left open should
   see whose account it is before they type a word. */
.lyceum-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:10px 0 14px;border-bottom:1px solid var(--line);
}
.lb-home{
  justify-self:start;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--muted);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;transition:.15s;
}
.lb-home:hover{color:var(--accent);border-color:var(--accent);background:var(--bg-2)}
.lb-home svg{width:14px;height:14px}
.lb-app{justify-self:end;font-family:var(--display);font-weight:800;font-size:.82rem;
        letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.lb-who{
  justify-self:center;display:flex;align-items:center;gap:2px;
  font-family:inherit;background:rgba(123,75,148,.12);border:1px solid transparent;
  border-radius:999px;padding:3px 4px;transition:.15s;
}
.lb-who:hover{border-color:var(--accent)}
/* Two tap targets in one chip, each big enough for a small finger, with a
   hairline between them so it reads as two things. The name goes to their own
   page; only the small one hands the machine on. */
.lb-me{display:flex;align-items:center;gap:10px;text-decoration:none;
       border-radius:999px;padding:4px 12px 4px 4px;transition:.15s}
.lb-me:hover{background:var(--surface)}
.lb-avatar{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-family:var(--display);
  font-weight:800;font-size:1rem;
}
.lb-name{font-family:var(--display);font-size:1.32rem;font-weight:800;
         letter-spacing:-.02em;color:var(--text);line-height:1}
.lb-switch{font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.08em;
           text-transform:uppercase;color:var(--accent);background:transparent;border:0;
           border-left:1px solid var(--line-strong);padding:10px 14px;cursor:pointer;
           border-radius:0 999px 999px 0;transition:.15s}
.lb-switch:hover{filter:brightness(1.15);text-decoration:underline}
@media (max-width:520px){
  .lyceum-bar{grid-template-columns:1fr 1fr;row-gap:12px}
  .lb-who{grid-column:1 / -1;grid-row:2;justify-self:center}
  .lb-name{font-size:1.5rem}
}

/* a piece the parent has taken out of circulation ------------------------ */
.list tr.removed td { opacity: .55; }
.list tr.removed a { text-decoration: line-through; }
.gone { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase; color: var(--bad); margin-left: 6px;
        border: 1px solid var(--bad); border-radius: 999px; padding: 1px 7px; }
/* A piece a teacher has sat down and typed out. Worth naming on the list,
   because it is the one piece on it whose text is not purely the child's. */
.edited { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
          text-transform: uppercase; color: var(--good); margin-left: 6px;
          border: 1px solid var(--good-line); border-radius: 999px; padding: 1px 7px; }
.list td.act { text-align: right; white-space: nowrap; }
.btn.tiny { padding: 5px 11px; font-size: .78rem; font-weight: 700;
            border-width: 1px; border-radius: 999px; }


/* ------------------------------------------------- who is at the keyboard --- */
/* Names as buttons a child can hit without aiming, and a quieter way in for
   somebody genuinely new. The size is the point: this is the most-used control
   in the whole app and it used to be a text field. */
.who-ask{margin:0 0 10px;font-family:var(--display);font-size:1.15rem;font-weight:800;
         letter-spacing:-.01em}
.roster{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.roster .who{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;
             font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;
             color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);
             border-radius:999px;cursor:pointer;text-align:left;transition:.15s}
.roster .who:hover{border-color:var(--voice);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.roster .who .initial{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
                      background:var(--voice);color:#fff;display:grid;place-items:center;
                      font-size:1rem}
.roster .none{color:var(--ink-3);font-size:.88rem;font-weight:600}
/* "I'm new here": deliberately the quietest thing on the screen. The names are
   the screen; this is a small line of secondary text well below them, so it is
   there for the child who needs it and easy to pass for everyone else. Small
   to look at, not small to hit: the target stays 44px tall for the tablet. */
.newkid{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;
        padding:0 8px;background:none;border:0;color:var(--ink-2);
        font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
        text-decoration:underline;text-decoration-color:var(--line-strong);
        text-underline-offset:3px;transition:color .15s}
.newkid:hover,.newkid:focus-visible{color:var(--accent);text-decoration-color:currentColor}
.newform{margin-top:12px}
/* `hidden` has to win over `.field{display:flex}`, or the typed box is open from
   the start and the names stop being the door. */
.newform[hidden]{display:none}
.newrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Said before a second account exists, not after somebody notices one. */
.near{margin:8px 0 0;font-size:.9rem;font-weight:700;color:var(--accent)}
.near b{font-family:var(--display)}
.near .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ------------------------------------------------------ the school's mark --- */
/* Two paths rather than a picture, so the navy can step aside on the dark
   theme instead of sinking into the ground. */
.schoolmark{display:block;margin:0 auto 10px;height:34px;width:auto}
.schoolmark .wm-name{fill:#0B1F3A}
.schoolmark .wm-sub{fill:#B58A35}
@media (prefers-color-scheme: dark){
  .schoolmark .wm-name{fill:#F0EAF2}
  .schoolmark .wm-sub{fill:#D9B25C}
}

/* ------------------------------------------- where the writing time went ---
   Two halves of one bar, in two colours that are equally strong on purpose.
   Nothing here is a score: a child who stops to find the right word is doing
   the thing we asked for, and the first time this reads as "less thinking is
   better" somebody will win it by typing faster rubbish. */
.split { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-top: 14px; }
.split h3 { margin: 0 0 10px; font-family: var(--display); font-size: 15px; font-weight: 700; }
.split-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  background: var(--bg-3); }
.split-bar span { display: block; height: 22px; }
.split-think { background: var(--think); }
.split-type  { background: var(--type); }
.split-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0;
  font-size: 13px; color: var(--muted); }
.split-key span { display: inline-flex; align-items: center; gap: 7px; }
.split-key b { font-family: var(--mono); color: var(--text); font-weight: 700; }
.split-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.split-key .k-think { background: var(--think); }
.split-key .k-type  { background: var(--type); }
.split-note { margin: 9px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------ a child's own revision --- */
/* Going back into a finished story. The box is the same face the story is read
   in, so a child is editing what they will see rather than a transcript of it. */
.read-edit { margin-top: 10px; }
.edit-box {
  width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical;
  font-family: var(--serif); font-size: 17px; line-height: 1.8;
  color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.edit-box:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.edit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.read-actions-bottom { margin-top: 12px; }

/* ------------------------------------------------------- a colour of their own --- */
/* The generated block above repaints --accent for whichever colour the child
   chose. This is the part that makes it impossible to miss: the bar at the top
   of every screen wears it, so a kid who sits down at somebody else's session
   sees the wrong colour before they read the wrong name. */
.lyceum-bar{position:relative}
:root[data-hue] .lyceum-bar{border-bottom:2px solid var(--accent)}
:root[data-hue] .lb-who{background:var(--accent-soft)}
:root[data-hue] .lb-who:hover{border-color:var(--accent)}
:root[data-hue] .lb-avatar{background:var(--accent);color:var(--accent-ink)}
:root[data-hue] .lb-name{color:var(--accent)}

.lb-hue{
  width:26px;height:26px;flex:0 0 26px;margin-left:2px;padding:0;
  border:1px solid var(--line-strong,var(--line));border-radius:50%;
  background:var(--surface,var(--bg-2,#fff));display:grid;place-items:center;
  cursor:pointer;transition:.15s;
}
.lb-hue:hover{border-color:var(--accent)}
.lb-huedot{width:14px;height:14px;border-radius:50%;background:var(--accent);display:block}

.huepop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:40;
  margin-top:6px;padding:12px 14px 14px;background:var(--surface,var(--bg-2,#fff));
  border:1px solid var(--line);border-radius:var(--radius,14px);
  box-shadow:var(--shadow-lift,0 18px 40px -18px rgba(0,0,0,.35));min-width:212px;
}
.huepop-title{margin:0 0 9px;font-family:var(--display);font-weight:800;font-size:.86rem}
.huepop-err{margin:9px 0 0;font-size:.78rem;color:var(--bad,#C4342F)}
.huegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.hueswatch{
  width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--sw);border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;transition:.12s;
}
.hueswatch:hover{transform:scale(1.08)}
.hueswatch.on{border-color:var(--ink,var(--text));
              box-shadow:0 0 0 2px var(--surface,var(--bg-2,#fff)) inset}

/* --- colours, generated from theme.js: do not edit by hand --- */
/* A child's own colour. The page carries data-hue on <html>; everything
   else in the stylesheet already reads --accent, so nothing here has to
   know what a button looks like. */
:root[data-hue="blue"]{
    --accent: #2E60C5;
    --accent-2: #2E60C5;
    --accent-ink: #FFFFFF;
    --accent-soft: #EBEFF8;
    --accent-line: #AABCE1;
}
:root[data-hue="teal"]{
    --accent: #1C6F77;
    --accent-2: #1C6F77;
    --accent-ink: #FFFFFF;
    --accent-soft: #E0F3F5;
    --accent-line: #78C8D0;
}
:root[data-hue="green"]{
    --accent: #1B7347;
    --accent-2: #1B7347;
    --accent-ink: #FFFFFF;
    --accent-soft: #DFF4EA;
    --accent-line: #72CDA0;
}
:root[data-hue="gold"]{
    --accent: #73651B;
    --accent-2: #73651B;
    --accent-ink: #FFFFFF;
    --accent-soft: #F4F0DD;
    --accent-line: #CCBC6E;
}
:root[data-hue="orange"]{
    --accent: #9F4E25;
    --accent-2: #9F4E25;
    --accent-ink: #FFFFFF;
    --accent-soft: #F7EDE8;
    --accent-line: #DDB39E;
}
:root[data-hue="red"]{
    --accent: #BB2C50;
    --accent-2: #BB2C50;
    --accent-ink: #FFFFFF;
    --accent-soft: #F9ECEF;
    --accent-line: #E2AEBB;
}
:root[data-hue="pink"]{
    --accent: #B12A8F;
    --accent-2: #B12A8F;
    --accent-ink: #FFFFFF;
    --accent-soft: #F9ECF5;
    --accent-line: #E2ABD4;
}
:root[data-hue="purple"]{
    --accent: #9730CB;
    --accent-2: #9730CB;
    --accent-ink: #FFFFFF;
    --accent-soft: #F5EDF9;
    --accent-line: #D2AFE3;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-hue="blue"]{
      --accent: #8FAAE1;
      --accent-2: #8FAAE1;
      --accent-ink: #0F1B33;
      --accent-soft: #1F2E4C;
      --accent-line: #405E9C;
  }
  :root:not([data-theme="light"])[data-hue="teal"]{
      --accent: #35BAC6;
      --accent-2: #35BAC6;
      --accent-ink: #091E20;
      --accent-soft: #163336;
      --accent-line: #2D686D;
  }
  :root:not([data-theme="light"])[data-hue="green"]{
      --accent: #33C07A;
      --accent-2: #33C07A;
      --accent-ink: #091F14;
      --accent-soft: #153525;
      --accent-line: #2C6B4B;
  }
  :root:not([data-theme="light"])[data-hue="gold"]{
      --accent: #C1A933;
      --accent-2: #C1A933;
      --accent-ink: #1F1B09;
      --accent-soft: #342F15;
      --accent-line: #6A5F2B;
  }
  :root:not([data-theme="light"])[data-hue="orange"]{
      --accent: #DC9B7A;
      --accent-2: #DC9B7A;
      --accent-ink: #2A160C;
      --accent-soft: #43281B;
      --accent-line: #875237;
  }
  :root:not([data-theme="light"])[data-hue="red"]{
      --accent: #E293A7;
      --accent-2: #E293A7;
      --accent-ink: #330F18;
      --accent-soft: #4E202B;
      --accent-line: #9D4057;
  }
  :root:not([data-theme="light"])[data-hue="pink"]{
      --accent: #E18FCD;
      --accent-2: #E18FCD;
      --accent-ink: #300E28;
      --accent-soft: #4B1E40;
      --accent-line: #973E80;
  }
  :root:not([data-theme="light"])[data-hue="purple"]{
      --accent: #CA96E3;
      --accent-2: #CA96E3;
      --accent-ink: #291036;
      --accent-soft: #412151;
      --accent-line: #8343A4;
  }
}
:root[data-theme="dark"][data-hue="blue"]{
    --accent: #8FAAE1;
    --accent-2: #8FAAE1;
    --accent-ink: #0F1B33;
    --accent-soft: #1F2E4C;
    --accent-line: #405E9C;
}
:root[data-theme="dark"][data-hue="teal"]{
    --accent: #35BAC6;
    --accent-2: #35BAC6;
    --accent-ink: #091E20;
    --accent-soft: #163336;
    --accent-line: #2D686D;
}
:root[data-theme="dark"][data-hue="green"]{
    --accent: #33C07A;
    --accent-2: #33C07A;
    --accent-ink: #091F14;
    --accent-soft: #153525;
    --accent-line: #2C6B4B;
}
:root[data-theme="dark"][data-hue="gold"]{
    --accent: #C1A933;
    --accent-2: #C1A933;
    --accent-ink: #1F1B09;
    --accent-soft: #342F15;
    --accent-line: #6A5F2B;
}
:root[data-theme="dark"][data-hue="orange"]{
    --accent: #DC9B7A;
    --accent-2: #DC9B7A;
    --accent-ink: #2A160C;
    --accent-soft: #43281B;
    --accent-line: #875237;
}
:root[data-theme="dark"][data-hue="red"]{
    --accent: #E293A7;
    --accent-2: #E293A7;
    --accent-ink: #330F18;
    --accent-soft: #4E202B;
    --accent-line: #9D4057;
}
:root[data-theme="dark"][data-hue="pink"]{
    --accent: #E18FCD;
    --accent-2: #E18FCD;
    --accent-ink: #300E28;
    --accent-soft: #4B1E40;
    --accent-line: #973E80;
}
:root[data-theme="dark"][data-hue="purple"]{
    --accent: #CA96E3;
    --accent-2: #CA96E3;
    --accent-ink: #291036;
    --accent-soft: #412151;
    --accent-line: #8343A4;
}
/* --- end of generated colours --- */

/* Write Sprint paints its big buttons from --accent-2, which the generated
   block above now repaints too. The label colour was hard-coded white (and a
   near-black in dark mode), which is only right for one hue -- it follows the
   colour now, so every one of the eight keeps its 5.8:1. */
:root[data-hue] .btn.primary{color:var(--accent-ink)}

/* Where the Board's Go button lands: the story to work on today, ringed. */
.go-here{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius)}