:root {
  /* ============================================================
     SCHOOL COLOURS — change these three and the whole app follows.
     --brand      the dominant colour: header text, buttons, headings
     --brand-dark a deeper shade for hovers and gradients
     --accent-bar the highlight: header underline, active tab marker
     Keep --brand dark enough for white text to sit on it (4.5:1),
     and leave --red/--green/--amber alone — those carry meaning
     (errors, paid, pending), not branding.
     ============================================================ */
  --brand: #33007F;        /* school purple */
  --brand-dark: #24005A;
  --accent-bar: #F7B512;   /* school gold */
  --brand-link: #5B2A9E;   /* links: brand-tinted, still 7:1 on white */

  /* semantic aliases used throughout the stylesheet */
  --navy: var(--brand);
  --navy-2: var(--brand-dark);
  --brand-red: var(--accent-bar);
  --accent: var(--brand);
  --link: var(--brand-link);
  --bg: #f4f5f8;
  --card: #ffffff;
  --text: #14203a;
  --muted: #64708a;
  --border: #dde1ec;
  --green: #1e8e5a;
  --green-bg: #e6f5ee;
  --red: #b80213;
  --red-bg: #fdecea;
  --amber: #b26a00;
  --amber-bg: #fff4e0;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.45;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- header / nav (white so the chapter banner logo reads true) ---------- */
header.site {
  background: #fff; color: var(--text); padding: 0 16px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  border-bottom: 3px solid var(--brand-red);
  box-shadow: 0 1px 0 var(--border);
}
header.site .brand { display: flex; align-items: center; padding: 7px 0; }
header.site .brand img.banner-logo { height: 44px; width: auto; display: block; }
header.site nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
header.site nav a {
  color: #3c4a68; padding: 14px 10px; font-size: 0.92rem; font-weight: 600;
  border-radius: 6px 6px 0 0;
}
header.site nav a:hover { color: var(--navy); text-decoration: none; }
header.site nav a.active { color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent-bar); }
header.site .who { color: var(--muted); font-size: 0.85rem; padding: 6px 0;
  display: flex; align-items: center; gap: 8px; }
header.site select.year-switch {
  width: auto; padding: 3px 6px; font-size: 0.85rem; border-radius: 6px;
  background: #fff; color: var(--text); border: 1px solid var(--border); cursor: pointer;
}
header.site form { display: inline; }
header.site button.linky {
  background: none; border: none; color: #3c4a68; cursor: pointer;
  font-size: 0.92rem; font-weight: 600; padding: 14px 10px;
}
header.site button.linky:hover { color: var(--navy); }

main { max-width: 1080px; margin: 0 auto; padding: 20px 14px 60px; }

/* ---------- cards, layout ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px;
}
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-2 { grid-template-columns: 1fr; }
}
.stat { text-align: left; }
.stat .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; }
.stat .value { font-size: 1.6rem; font-weight: 700; margin-top: 2px; }
.stat .value.pos { color: var(--green); }
.stat .value.neg { color: var(--red); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
table.data th, table.data td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td.wrap { white-space: normal; }
table.data th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); background: #fafbfe;
}
table.data tr:hover td { background: #f7f9fd; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 700; border-top: 2px solid var(--text); }

/* ---------- forms & buttons ---------- */
label { display: block; font-size: 0.85rem; font-weight: 600; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 1rem; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link);
}
.btn {
  display: inline-block; background: var(--accent); color: #fff; border: none;
  padding: 10px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.secondary { background: #e9edf5; color: var(--text); }
.btn.navy { background: var(--navy); }
.btn.danger { background: var(--red); }
.btn.small { padding: 5px 10px; font-size: 0.85rem; }
.btn.ghost { background: none; color: var(--link); padding: 5px 8px; }
.inline-form { display: inline; }
form .row, form.row { display: flex; gap: 12px; flex-wrap: wrap; }
form .row > div, form.row > div { flex: 1; min-width: 160px; }

/* ---------- badges & flash ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; }
.badge.approved, .badge.confirmed, .badge.open-ev { background: var(--green-bg); color: var(--green); }
.badge.pending, .badge.claimed { background: var(--amber-bg); color: var(--amber); }
.badge.rejected, .badge.cancelled, .badge.voided { background: var(--red-bg); color: var(--red); }
.badge.neutral, .badge.locked, .badge.completed { background: #e9edf5; color: var(--muted); }
.badge.lead { background: #fdf3d7; color: #8a6d1a; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.95rem; }
.flash.success { background: var(--green-bg); color: var(--green); }
.flash.error { background: var(--red-bg); color: var(--red); }
.muted { color: var(--muted); font-size: 0.88rem; }
.help { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.code {
  font-family: ui-monospace, Menlo, Consolas, monospace; background: #eef1f8;
  padding: 2px 7px; border-radius: 6px; font-size: 0.95rem; letter-spacing: 0.08em;
}

/* ---------- auth pages ---------- */
.auth-wrap { max-width: 440px; margin: 4vh auto 0; padding: 0 14px; }
.auth-wrap .brand-big { text-align: center; font-size: 1.35rem; font-weight: 800;
  color: var(--navy); margin-bottom: 14px; }
.auth-wrap .logo-hero { display: block; max-width: 320px; width: 90%; margin: 0 auto 6px; }
#push-btn { width: 100%; margin-top: 4px; }

/* ---------- event slot list ---------- */
.slot-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.slot-row .pos { font-weight: 700; min-width: 110px; }
.slot-row .claimer { color: var(--muted); }

/* ---------- dashboard charts ---------- */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.chart-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
p.chart-legend { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.bar-row.conf { padding: 6px 0; }
.bar-label { flex: 0 0 130px; font-size: 0.85rem; color: var(--muted);
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row.conf .bar-label { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.bar-track { flex: 1; height: 14px; background: #e8ecf4; border-radius: 4px;
  overflow: hidden; display: flex; min-width: 80px; }
.bar-fill { display: block; height: 100%; background: #1d4f91;
  border-radius: 4px 0 0 4px; }
.bar-track.stacked { height: 18px; gap: 2px; background: none; }
.bar-track.stacked .seg { height: 100%; border-radius: 3px; min-width: 4px; }
.bar-track.stacked .seg.rest { background: #e8ecf4; }
.bar-val { flex: 0 0 auto; font-size: 0.85rem; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .bar-label { flex-basis: 96px; } }

/* ---------- view-as-student banner ---------- */
.impersonation-bar {
  background: var(--amber-bg); color: var(--amber);
  border-bottom: 2px solid var(--amber);
  padding: 9px 16px; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50;
}

/* ---------- membership roster ---------- */
table.roster th, table.roster td { padding: 5px 5px; }
table.roster .sticky-col {
  position: sticky; left: 0; z-index: 5; background: var(--card);
  box-shadow: 2px 0 0 var(--border); max-width: 200px;
}
table.roster th.sticky-col { background: #fafbfe; }
table.roster tr:hover td.sticky-col { background: #f7f9fd; }
table.roster tr.row-complete td.sticky-col { background: #f2faf5; }
table.roster .sub { font-size: 0.76rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 190px; }
.veg-tag { color: var(--green); font-weight: 700; }
table.roster select.cell {
  width: auto; padding: 3px 4px; font-size: 0.8rem; border-radius: 6px;
  background: #fff; cursor: pointer;
}
table.roster .chip { padding: 3px 7px; font-size: 0.74rem; }
table.roster select.cell.ok { background: var(--green-bg); color: var(--green);
  border-color: #bfe3d2; font-weight: 700; }
table.roster select.cell.part { background: var(--amber-bg); color: var(--amber);
  border-color: #eeda9f; font-weight: 700; }
table.roster select.cell.todo { background: var(--red-bg); color: var(--red);
  border-color: #f3c1bd; font-weight: 700; }
table.roster select.cell.vex { background: #e8edff; color: #2743a6;
  border-color: #c3cff5; font-weight: 700; }
.cell-form { display: inline; }
.chip {
  display: inline-block; border: 1px solid var(--border); background: #f2f4fa;
  color: var(--muted); border-radius: 14px; padding: 3px 9px; font-size: 0.78rem;
  font-weight: 700; cursor: pointer; margin: 1px 0;
}
.chip.ok { background: var(--green-bg); color: var(--green); border-color: #bfe3d2; }
.chip.part { background: var(--amber-bg); color: var(--amber); border-color: #eeda9f; }
.chip:hover { filter: brightness(0.96); }
.chip.static { cursor: default; }
.chip.static:hover { filter: none; }
tr.row-complete td { background: #f2faf5; }
td.nowrap { white-space: nowrap; }

/* ---------- student onboarding checklist ---------- */
ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist li { padding: 8px 0; border-bottom: 1px solid var(--border); }
ul.checklist li:last-child { border-bottom: none; }
ul.checklist li.done { color: var(--muted); }
ul.checklist li.done strong { color: inherit; }

/* ---------- print ---------- */
@media print {
  header.site, .no-print, .flash, .site-footer { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .card { border: none; padding: 0; }
  .page-break { page-break-after: always; }
  table.data th { background: #fff; }
}
@media (max-width: 600px) {
  header.site { padding: 0 10px; }
  header.site nav a { padding: 10px 7px; font-size: 0.85rem; }
  main { padding: 14px 10px 60px; }
  .card { padding: 14px; }
  table.data { font-size: 0.88rem; }
}


/* ---- site footer / credits ---- */
.site-footer {
  max-width: 1100px; margin: 28px auto 18px; padding: 12px 18px 0;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 0.74rem; line-height: 1.5; color: #7d8aa0;
}
.site-footer span { display: block; }
.site-footer strong { color: #5d6b84; }

/* ---------- competitive events ---------- */
:root {
  --ce-team: #a4c2f4; --ce-individual: #ffe599; --ce-either: #b6d7a8;
  --ce-ga: #b4a7d6; --ce-contested: #c026d3; --ce-contested-bg: #fbe1ff;
}
.comp-meter { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.comp-bignum { font-size:1.55rem; font-weight:800; color:var(--navy); line-height:1.05; }
.comp-pips { display:flex; gap:5px; }
.comp-pip { width:24px; height:24px; border-radius:6px; border:2px solid var(--border); background:#fff; }
.comp-pip.on { background:var(--navy); border-color:var(--navy); }
.comp-pip.full { background:var(--red); border-color:var(--red); }
.comp-meter-sep { border-left:1px solid var(--border); padding-left:16px; }
.comp-meter-note { margin-left:auto; max-width:340px; }
.comp-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:12px 0 8px; }
.comp-search { border:1px solid var(--border); border-radius:8px; padding:6px 11px;
  font-size:.88rem; font-family:inherit; color:var(--text); background:#fff; }
.comp-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); margin:4px 0 12px; }
.comp-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; }
.comp-legend .sw-team { background:var(--ce-team); }
.comp-legend .sw-individual { background:var(--ce-individual); }
.comp-legend .sw-either { background:var(--ce-either); }
.comp-legend .sw-ga { background:var(--ce-ga); }

.comp-ev { background:var(--card); border:1px solid var(--border); border-left:6px solid var(--border);
  border-radius:var(--radius); padding:11px 14px; margin-bottom:8px; }
.comp-ev.team { border-left-color:var(--ce-team); }
.comp-ev.individual { border-left-color:var(--ce-individual); }
.comp-ev.either { border-left-color:var(--ce-either); }
.comp-ev.mine { box-shadow:0 0 0 2px rgba(12,35,64,.12); }
.comp-ev-head { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.comp-ev-name { font-weight:700; font-size:1.02rem; color:var(--navy); margin:0; }
.comp-ev-meta { font-size:.82rem; color:var(--muted); margin:2px 0 0; }
.comp-ev-actions { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.comp-entries { margin-top:9px; padding-top:9px; border-top:1px dashed var(--border); }
.comp-entry { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:3px 0; font-size:.89rem; }
.comp-entry.inactive { opacity:.6; }
.comp-dot { width:8px; height:8px; border-radius:50%; background:var(--navy); flex:0 0 auto; }
.comp-entry.needs .comp-dot { background:var(--amber); }
.comp-tname { font-weight:700; }
.comp-watchers { font-size:.85rem; color:var(--muted); margin:5px 0 0; }
.comp-open-cta { font-size:.85rem; color:var(--amber); font-weight:600; margin:5px 0 0; }
.comp-entry-card { border:1px solid var(--border); border-radius:8px; padding:9px 11px; margin-bottom:8px; }
.comp-entry-card.inactive { opacity:.65; }
.comp-entry-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.comp-spacer { margin-left:auto; }
.comp-cell-entry { font-size:.85rem; padding:2px 0; }
.comp-cell-entry .muted { font-size:.8rem; }
tr.comp-row-contested { background:#fffafd; }
.comp-runoff { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:10px; margin-top:8px; }
.comp-rcard { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:#fcfdff; }
.comp-rcard h4 { margin:0 0 5px; font-size:.96rem; color:var(--navy); }
.comp-cp { display:flex; justify-content:space-between; gap:10px; font-size:.83rem; padding:2px 0;
  border-bottom:1px dotted var(--border); }
.comp-cp-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:5px 0;
  border-bottom:1px solid var(--border); }
.cp-passed { color:var(--green); font-weight:700; }
.cp-not_passed { color:var(--red); font-weight:700; }
.cp-nothing { color:var(--muted); font-weight:700; }
.cp-submitted { color:var(--amber); font-weight:700; }
.badge.b-team { background:var(--ce-team); color:#12233a; }
.badge.b-individual { background:var(--ce-individual); color:#4a3800; }
.badge.b-either { background:var(--ce-either); color:#1c3d1c; }
.badge.b-ga { background:var(--ce-ga); color:#231a44; }
.badge.b-tested { background:#f6b26b; color:#4a2c00; }
.badge.b-contested { background:var(--ce-contested-bg); color:#7a1188; }
@media (max-width:640px) {
  .comp-ev-actions { margin-left:0; width:100%; }
  .comp-meter-note { margin-left:0; max-width:none; }
}
.badge.b-early { background: var(--amber-bg); color: var(--amber); border: 1px solid #f0d08a; }

/* ---------- branding picker (Settings) ---------- */
.brand-pick { display:flex; gap:8px; align-items:center; }
.brand-pick input[type=color] { width:46px; height:38px; padding:2px; border:1px solid var(--border);
  border-radius:6px; background:#fff; cursor:pointer; }
.brand-pick input[type=text] { width:110px; font-family:ui-monospace,Menlo,Consolas,monospace;
  text-transform:uppercase; }
.brand-preview { --pb:var(--brand); --pa:var(--accent-bar); --pl:var(--brand-link);
  border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.bp-header { background:#fff; border-bottom:3px solid var(--pa); padding:0 12px;
  display:flex; align-items:center; gap:10px; }
.bp-mark { width:28px; height:28px; border-radius:6px; background:var(--pb); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem;
  margin:8px 0; overflow:hidden; }
.bp-mark img { max-width:100%; max-height:100%; }
.bp-tab { font-size:.85rem; color:#5f6b85; padding:12px 6px; font-weight:600; }
.bp-tab.bp-on { color:var(--pb); box-shadow:inset 0 -3px 0 var(--pa); }
.bp-body { padding:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--bg); }
.bp-btn { background:var(--pb); color:#fff; border-radius:7px; padding:6px 14px;
  font-size:.85rem; font-weight:700; }
.bp-btn.ghost { background:#fff; color:var(--pb); border:1px solid var(--pb); }
.bp-link { color:var(--pl); font-size:.88rem; text-decoration:underline; }
.bp-warn { margin:0; padding:8px 12px; border-top:1px solid var(--border); font-size:.83rem; }
.bp-warn.bad { color:var(--red); font-weight:600; }
.bp-warn.good { color:var(--green); }

/* ---------- section bar (second-level nav) ---------- */
.subnav { background:#fff; border-bottom:1px solid var(--border); }
.subnav-inner { padding:0 16px; display:flex;
  gap:2px; flex-wrap:wrap; justify-content:center; }  /* centered under the top bar */
.subnav a { display:inline-block; padding:9px 12px; font-size:.88rem; font-weight:600;
  color:#5f6b85; text-decoration:none; border-bottom:2px solid transparent; }
.subnav a:hover { color:var(--brand); }
.subnav a.on { color:var(--brand); border-bottom-color:var(--brand); }

/* event catalog: flag checkboxes sit inline so rows stay short */
table.data td.help label { display: inline-block; font-weight: 400; margin: 2px 10px 2px 0; }