/* FAST learning gains: a test-day look. Ink on paper, lime marker highlights, five level colours. */
:root {
  --paper: #f7f5ee;
  --card: #ffffff;
  --ink: #1e2126;
  --muted: #565b63;
  --line: #d9d4c6;
  --line-soft: #e8e4d8;
  --hi: #b9e05a;
  --hi-ink: #15181c;
  --mark: #d6f08a;
  --focus: #1e2126;
  --link: #1d5c7a;
  --l1: #a8402c; --l1-bg: #f8e6e1;
  --l2: #9a6a06; --l2-bg: #f8eed6;
  --l3: #2f6e3f; --l3-bg: #e2f0e4;
  --l4: #1f6a78; --l4-bg: #dceef0;
  --l5: #2b4c7e; --l5-bg: #e1e8f4;
  --gain: #2f6e3f;
  --no: #a8402c;
  --warn-bg: #f3f8e1;
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Avenir Next", "Segoe UI Semibold", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16171a;
    --card: #1f2125;
    --ink: #ecebe6;
    --muted: #a9adb4;
    --line: #3a3d43;
    --line-soft: #2c2f34;
    --hi: #b9e05a;
    --mark: #46581a;
    --focus: #b9e05a;
    --link: #8cc8e6;
    --l1: #f0a08e; --l1-bg: #3d2420;
    --l2: #e7c06a; --l2-bg: #3a2f17;
    --l3: #93d3a1; --l3-bg: #1d3524;
    --l4: #86d0dc; --l4-bg: #18343a;
    --l5: #a9c1ea; --l5-bg: #1f2b40;
    --gain: #93d3a1;
    --no: #f0a08e;
    --warn-bg: #27301a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--font);
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

.top, main, .site-foot { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 6px; flex-wrap: wrap; }
.brand { margin: 0; font: 700 15px/1.2 var(--font-head); letter-spacing: 0.01em; }
.brand a { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--hi); }
.top nav a { font-size: 15px; }

.hero { padding: 18px 0 8px; max-width: 70ch; }
h1 { font: 800 clamp(30px, 6vw, 44px)/1.1 var(--font-head); letter-spacing: -0.015em; margin: 0 0 10px; }
h1 mark { background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); color: inherit; padding: 0 2px; }
.lede { margin: 0; font-size: 18px; color: var(--muted); }

h2 { font: 750 24px/1.25 var(--font-head); margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font: 700 18px/1.3 var(--font-head); margin: 22px 0 6px; }

/* ---------------------------------------------------------------- tool */
.tool { margin-top: 18px; border-top: 3px solid var(--ink); padding-top: 16px; }
label, legend { font-weight: 650; font-size: 15px; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
select, input[type=text], textarea {
  font: 16px/1.4 var(--font);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 46px;
  width: 100%;
}
select { padding-right: 32px; }
textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 16px; line-height: 1.5; resize: vertical; min-height: 190px; max-height: none; tab-size: 8; }
select:focus-visible, input:focus-visible, textarea:focus-visible { border-color: var(--focus); }

.classbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.classbar .f-btns { flex-direction: row; gap: 8px; }
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; }
.seg legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.seg label { position: relative; font-weight: 600; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--line); background: var(--card); margin-left: -1.5px; }
.seg label:first-of-type span { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.seg label:last-of-type span { border-radius: 0 var(--radius) var(--radius) 0; }
.seg input:checked + span { background: var(--hi); color: var(--hi-ink); border-color: var(--hi); position: relative; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }

.scale { font-size: 15px; color: var(--muted); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.scale-name { color: var(--ink); font-weight: 650; }

.roster { margin-top: 18px; }
.big-label { font: 700 18px/1.3 var(--font-head); }
.hint { margin: 2px 0 8px; color: var(--muted); font-size: 15px; }
.hint.small { margin: 6px 0 0; }
.notes { margin: 8px 0 0; padding: 8px 12px 8px 28px; background: var(--warn-bg); border-radius: var(--radius); font-size: 15px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 650 16px/1.2 var(--font);
  min-height: 46px; padding: 10px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--hi);
  background: var(--hi); color: var(--hi-ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(0.96); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
.btn.danger { background: var(--no); border-color: var(--no); color: #fff; }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.file { position: relative; overflow: hidden; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.btn.file:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }

.banner { background: var(--warn-bg); border-left: 4px solid var(--hi); padding: 10px 14px; margin-bottom: 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.banner p { margin: 0; }
.banner p + p { margin-top: 8px; }
.ask { border: 2px solid var(--no); border-radius: var(--radius); padding: 12px 14px; margin: -4px 0 14px; background: var(--card); }
.ask p { margin: 0; }

/* ---------------------------------------------------------------- results */
.results { margin-top: 22px; }
.empty p { margin: 0; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.sum { background: var(--card); border: 1.5px solid var(--line); border-left: 6px solid var(--hi); border-radius: var(--radius); padding: 14px 18px; }
.sum p { margin: 0; }
.sum .big { font: 600 22px/1.3 var(--font-head); }
.sum .big b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum .bits { margin-top: 6px; font-size: 16px; }
.sum .caveat { margin-top: 8px; font-size: 15px; color: var(--muted); }

.tablebar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 14px 0 6px; }
.tablebar select { width: auto; min-width: 0; }
table.list { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.list thead th { text-align: left; font-size: 14px; font-weight: 650; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 6px 10px 6px 0; }
table.list tbody th, table.list td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-soft); }
table.list tbody th { font-weight: 700; }
.sid { display: block; overflow-wrap: anywhere; }
.tag { display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 600; padding: 1px 6px; border-radius: 3px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.num { font-weight: 650; font-size: 17px; margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.chip.l1 { color: var(--l1); background: var(--l1-bg); }
.chip.l2 { color: var(--l2); background: var(--l2-bg); }
.chip.l3 { color: var(--l3); background: var(--l3-bg); }
.chip.l4 { color: var(--l4); background: var(--l4-bg); }
.chip.l5 { color: var(--l5); background: var(--l5-bg); }
.meter { display: inline-flex; gap: 2px; }
.meter i { width: 6px; height: 11px; border: 1.5px solid currentColor; border-radius: 1px; }
.meter i.on { background: currentColor; }
.sub, .why, .issue { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.issue { color: var(--no); }
.g { font-weight: 750; }
.g-gain { color: var(--gain); }
.g-no { color: var(--no); }
.g-no.mid { color: var(--l2); }
.g-out, .g-bad { color: var(--muted); }
.need-lvl { font-size: 14px; color: var(--muted); }
.needcell b { font-size: 18px; }
.dim { color: var(--muted); }
table.list th:nth-child(1) { width: 14%; }
table.list th:nth-child(2), table.list th:nth-child(3) { width: 19%; }
table.list th:nth-child(5) { width: 19%; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.backup { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.backup summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.backup p { margin: 6px 0; max-width: 70ch; }
.backup h3 { font-size: 16px; margin-top: 14px; }
.keptlist { list-style: none; padding: 0; margin: 0; }
.keptlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius); font-size: 15px; z-index: 20; }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 70ch; padding-bottom: 20px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 4px 0; }
.faq h3 { margin-top: 18px; }
.faq p { margin: 4px 0 0; }
.sources { margin-top: 32px; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }

/* chart page */
.chart-wrap { max-width: 1280px; }
body:not(.app) .top, body:not(.app) .site-foot { max-width: 1280px; }
table.chart { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; margin: 8px 0 4px; }
table.chart th, table.chart td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
table.chart thead th { font-size: 13px; color: var(--muted); border-bottom: 2px solid var(--ink); vertical-align: bottom; white-space: normal; }
table.chart tbody th { font-weight: 700; }
table.chart .lv1 { color: var(--l1); } table.chart .lv2 { color: var(--l2); } table.chart .lv3 { color: var(--l3); } table.chart .lv4 { color: var(--l4); } table.chart .lv5 { color: var(--l5); }
table.chart td.lvl { font-weight: 650; }
.crumbs { font-size: 15px; margin: 6px 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.site-foot { margin-top: 30px; padding-top: 18px; padding-bottom: 30px; border-top: 3px solid var(--ink); }
.sb-footer { font-size: 14px; color: var(--muted); }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-more a { color: var(--muted); }
.sb-credit a { color: var(--ink); }

@media (max-width: 1000px) and (min-width: 641px) {
  table.chart .lvl { display: none; }
  table.chart { font-size: 14px; }
  table.chart th, table.chart td { padding: 6px 5px; }
}
/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .classbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .classbar .f-btns { grid-column: 1 / -1; }
  .setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setup .seg { grid-column: 1 / -1; }
  .seg label { flex: 1; }
  .seg span { width: 100%; }
}
@media (max-width: 640px) {
  .top, main, .site-foot { padding-left: 16px; padding-right: 16px; }
  body { font-size: 16px; }
  .classbar { grid-template-columns: 1fr; }
  .classbar .f-btns > .btn { flex: 1; }
  .setup { grid-template-columns: 1fr; }
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr { display: block; width: 100%; }
  table.list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.list tbody th, table.list td { display: block; border: 0; padding: 0; width: auto !important; }
  table.list tbody th { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 17px; }
  table.list tbody th .sid { display: inline !important; }
  table.list tbody th .tag { margin-top: 0; }
  table.list td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
  table.list td.gaincell, table.list td.needcell { grid-column: 1 / -1; }
  table.list td.gaincell::before { display: none; }
  table.list td.gaincell .why { display: inline; margin-left: 6px; }
  table.list td.needcell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  table.list td.needcell::before { display: inline; font-size: 14px; color: var(--muted); }
  table.list td.needcell .sub { width: 100%; }
  .actions .btn { flex: 1 1 100%; }
  .sum .big { font-size: 19px; }
  .sum .big b { font-size: 26px; }
  table.chart thead { display: none; }
  table.chart, table.chart tbody, table.chart tr { display: block; }
  table.chart tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.chart tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 2px; }
  table.chart td { border: 0; padding: 0; white-space: normal; }
  table.chart td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  table.chart td.lvl { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- print */
.print-root { display: none; }
@media print {
  @page { size: auto; margin: 0.5in; }
  body { background: #fff; color: #000; font-size: 10pt; }
  body.app > *:not(.print-root) { display: none !important; }
  body.app .print-root { display: block !important; }
  body:not(.app) .top, body:not(.app) .site-foot, body:not(.app) .skip, body:not(.app) .noprint { display: none !important; }
  body:not(.app) main { max-width: none; padding: 0; }
  body:not(.app) h1 { font-size: 18pt; margin-bottom: 4pt; }
  body:not(.app) h2 { font-size: 13pt; margin: 10pt 0 4pt; break-after: avoid; }
  body:not(.app) .lede, body:not(.app) .prose { font-size: 9.5pt; max-width: none; color: #000; }
  table.chart { font-size: 8.5pt; break-inside: avoid; }
  table.chart .lvl { display: table-cell !important; }
  .crumbs { display: none; }
  .chart-sec h2 { margin-top: 8pt; }
  body:not(.app) .hero { padding: 0 0 2pt; }
  body:not(.app) .prose p, body:not(.app) .prose li { margin: 2pt 0; }
  body:not(.app) .prose ul { margin: 2pt 0; }
  body:not(.app) .sources { margin-top: 6pt; padding-top: 4pt; font-size: 8.5pt; color: #333; break-inside: avoid; }
  table.chart th, table.chart td { padding: 2.5pt 4pt; border-bottom: 0.75pt solid #999; color: #000 !important; }
  table.chart thead th { color: #000; border-bottom: 1.5pt solid #000; font-size: 8pt; }
  .p-sheet { font: 10pt/1.35 var(--font); color: #000; }
  .p-title { font: 800 17pt/1.2 var(--font-head); margin: 0 0 3pt; }
  .p-meta { margin: 0 0 4pt; font-size: 9.5pt; color: #333; }
  .p-sum { margin: 0 0 6pt; font-weight: 650; }
  .p-list { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
  .p-list th, .p-list td { border: 0.75pt solid #777; padding: 2pt 4pt; line-height: 1.25; text-align: left; vertical-align: top; overflow-wrap: break-word; }
  .p-list td.c-id { overflow-wrap: anywhere; }
  .p-list tr.p-run th { border: 0; border-bottom: 0.75pt solid #777; font-size: 8pt; font-weight: 400; color: #444; padding: 0 0 2pt; }
  .p-list thead th { font-size: 8.5pt; background: none; border-bottom: 1.5pt solid #000; }
  .p-list thead { display: table-header-group; }
  .p-list tr { break-inside: avoid; }
  .p-list small { font-size: 8pt; color: #333; }
  .p-list tr.blank td { height: 24pt; }
  .c-n { width: 4.5%; white-space: nowrap; overflow-wrap: normal !important; } .c-id { width: 17%; font-size: 9pt; } .c-sc { width: 6%; } .c-lv { width: 8.5%; } .c-g { width: 10%; } .c-why { width: 25.5%; } .c-need { width: 12%; }
  .p-list td.c-why { font-size: 8.5pt; }
  .p-key { break-inside: avoid; margin: 0 0 6pt; font-size: 8.5pt; color: #222; }
  .p-key p { margin: 3pt 0 0; }
  .p-fill { display: flex; gap: 6pt; margin: 2pt 0 6pt; font-size: 11pt; }
  .p-fill span { flex: 1; border-bottom: 0.75pt solid #000; }
  .p-foot { break-inside: avoid; margin-top: 8pt; font-size: 8.5pt; color: #222; }
  .p-foot p { margin: 4pt 0; }
  .p-scales { display: flex; flex-direction: column; gap: 4pt; margin: 6pt 0; }
  .p-scale { border-collapse: collapse; width: 100%; font-size: 8.5pt; font-variant-numeric: tabular-nums; }
  .p-scale caption { text-align: left; font-weight: 700; padding-bottom: 2pt; }
  .p-scale th, .p-scale td { border: 0.75pt solid #999; padding: 2pt 4pt; text-align: left; }
  .p-slips { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 2.42in; gap: 0; break-after: page; }
  .p-slips:last-child { break-after: auto; }
  .slip { border: 1pt dashed #888; padding: 10pt 12pt; font: 10pt/1.35 var(--font); overflow: hidden; break-inside: avoid; }
  .slip p { margin: 0 0 3pt; }
  .s-head { display: flex; justify-content: space-between; gap: 8pt; border-bottom: 1.5pt solid #000; padding-bottom: 3pt; margin-bottom: 5pt !important; }
  .s-head b { font-size: 13pt; min-width: 0; overflow-wrap: anywhere; }
  .s-head span { flex-shrink: 0; }
  .s-head b.long { font-size: 9.5pt; }
  .s-head span { font-size: 9pt; color: #333; align-self: flex-end; }
  .slip .k { display: inline-block; min-width: 0.7in; color: #444; font-size: 9pt; }
  .slip .goal { margin-top: 5pt; font-size: 10.5pt; }
  .s-line { margin-top: 8pt !important; display: flex; gap: 6pt; }
  .s-line span { flex: 1; border-bottom: 0.75pt solid #000; }
  .s-note { margin-top: 8pt !important; font-size: 9pt; color: #444; }
}