/* Youth Record Pilot — Kiln & Hibiscus (locked palette, Nov 13).
   Warm Sand paper, Aubergine Ink text, Kiln Plum primary, Fired Clay actions,
   Muted Plum secondary, Plum Wash panels. Hibiscus is RESERVED for youth
   voice and is only defined here on :root — it is used by the voice plane
   (voice/), never by the shared shell or institutional views.
   Text pairs used below are the AA-checked pairs only:
   ink/sand, plum/sand, white/plum, white/clay, clay/sand, muted/sand,
   ink/wash. */
:root {
  --paper: #F6EEE3;       /* Warm Sand */
  --ink: #2E1A33;         /* Aubergine Ink */
  --plum: #472A52;        /* Kiln Plum */
  --clay: #A44A24;        /* Fired Clay */
  --muted: #6B5566;       /* Muted Plum */
  --wash: #EADFEC;        /* Plum Wash */
  --hibiscus: #C22A4D;    /* Hibiscus — RESERVED: youth voice only (voice/) */
  --line: var(--muted);
  /* Legacy aliases kept so in-flight modules referencing the old names
     recolour with the shell instead of breaking: */
  --blue: var(--plum);
  --blue-dark: var(--plum);
  --good: var(--plum);
  --amber: var(--clay);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.55;
}
a { color: var(--clay); }
a:hover { color: var(--plum); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.site-header { border-bottom: 3px solid var(--plum); padding-top: 22px; }
.brand { font-size: 28px; font-weight: 700; margin: 0; color: var(--plum); letter-spacing: -0.01em; }
.brand-sub { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.demo-note { color: var(--muted); font-size: 14.5px; max-width: 720px; margin: 8px 0 16px; }
.main-nav { background: var(--wash); border-top: 1px solid var(--line); }
.nav-row { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 10px; padding-bottom: 10px; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 4px 2px; }
.main-nav a:hover { text-decoration: underline; }
.main-nav a.active { border-bottom: 3px solid var(--plum); }
main { padding: 28px 0 40px; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; color: var(--plum); }
h2 { font-size: 22px; margin: 26px 0 8px; color: var(--plum); }
h3 { font-size: 18px; margin: 18px 0 6px; color: var(--ink); }
.sub { color: var(--muted); }
.kicker { color: var(--clay); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; }
.note { border: 1px solid var(--plum); background: var(--wash); color: var(--ink); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin: 14px 0; background: var(--paper); }
.rows .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--wash); }
.rows .row:last-child { border-bottom: none; }
.rows .row b { text-align: right; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14.5px; background: var(--wash); color: var(--ink); border: 1px solid var(--plum); }
.badge.improving { background: var(--plum); color: #fff; border-color: var(--plum); }
.btn { display: inline-block; background: var(--clay); color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--plum); }
.btn.secondary { background: var(--paper); color: var(--clay); border: 1px solid var(--clay); }
.btn.secondary:hover { background: var(--plum); color: #fff; border-color: var(--plum); }
.field { margin: 12px 0; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; max-width: 420px; padding: 9px 10px; font-size: 16px; border: 1px solid var(--muted); border-radius: 6px; box-sizing: border-box; background: var(--paper); color: var(--ink); }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--plum); color: #fff; }
tbody tr:nth-child(even) td { background: var(--wash); color: var(--ink); }
/* Promise grades — read by word + symbol + fill style, never colour alone. */
.chip-kept { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14.5px; background: var(--plum); color: #fff; border: 2px solid var(--plum); }
.chip-partly { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14.5px; background: var(--clay); color: #fff; border: 2px solid var(--clay); }
.chip-missed { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14.5px; background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.trend { color: var(--ink); font-weight: 600; white-space: nowrap; }
.site-footer { border-top: 1px solid var(--line); background: var(--wash); padding: 18px 0 26px; color: var(--ink); font-size: 14.5px; }
@media (max-width: 640px) {
  .rows .row { flex-direction: column; gap: 2px; }
  .rows .row b { text-align: left; }
}