:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1a1d21;
  --muted: #6b7480;
  --line: #dfe3e8;
  --accent: #1c5fd8;
  --accent-soft: #e8f0fe;
  --good: #1a7f4b;
  --bad: #b3261e;
  --bad-soft: #fdecea;
  --warn-soft: #fff6e0;
  --own: #f0f1f3;
  --radius: 7px;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 17px; }
h2 { font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 46px; z-index: 20;   /* clears the 46px app bar */
}
.ident p { margin: 2px 0 0; font-size: 12px; }
.status { text-align: right; }
.progress { font-size: 14px; font-weight: 600; }
.progress.complete { color: var(--good); }

/* ---------- layout ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  padding: 14px 18px 28px;
  align-items: start;
}
@media (max-width: 950px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  min-width: 0;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.controls { display: flex; align-items: center; gap: 10px; }
.hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); }

input[type=search] {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: 13px; min-width: 210px;
}
input[type=search]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.chk { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---------- pool table ---------- */
.tablewrap { overflow-x: auto; max-height: calc(100vh - 258px); overflow-y: auto; border: 1px solid var(--line); border-radius: 5px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 5;
  background: #eef1f4; text-align: left; white-space: nowrap;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none; font-weight: 600;
}
thead th:hover { background: #e4e9ee; }
thead th .arrow { color: var(--accent); font-size: 10px; }
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 5px 8px; border-bottom: 1px solid #eef0f2; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--accent-soft); }
tbody tr.ranked { background: #f3f8f4; }
tbody tr.ranked:hover { background: #e8f2ea; }
tbody tr.own { background: var(--own); color: var(--muted); cursor: not-allowed; }
tbody tr.own:hover { background: var(--own); }
td.name { font-weight: 600; }

/* rank column: narrow, centered in both header and body */
thead th[data-key="_rank"], td.rank { text-align: center; width: 52px; }
/* the editor needs more room than the badge it replaces */
td.rank.rankedit { width: auto; min-width: 72px; }
.rankbadge {
  display: inline-block; min-width: 19px; padding: 0 4px;
  background: var(--good); color: #fff; border-radius: 3px;
  font: 600 10px/16px var(--mono); text-align: center;
}
td.name .ownflag { font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 6px; }
/* narrative notes: clamp so one long comment can't blow out the row */
td.wide { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }

/* column picker */
.colmenu-wrap { position: relative; }
.small-btn { flex: none; padding: 5px 10px; font-size: 12px; }
.colmenu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20,24,30,.14);
  padding: 9px 11px; width: 250px;
}
.colmenu[hidden] { display: none; }
.colmenu-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 7px;
}
.colmenu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.colmenu-list .chk { color: var(--ink); font-size: 12px; padding: 1px 0; cursor: pointer; }

.info {
  border: 0; background: none; color: var(--accent); cursor: pointer;
  font: 600 11px var(--mono); padding: 0 4px;
}
.empty { color: var(--muted); font-size: 13px; padding: 10px 2px; margin: 0; }

/* ---------- ballot ---------- */
.ballot { position: sticky; top: 108px; }  /* app bar + view topbar */
.ballotlist {
  list-style: none; margin: 0; padding: 0;
  max-height: calc(100vh - 330px); overflow-y: auto;
}
.ballotlist li {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px;
  margin-bottom: 4px; background: #fff; cursor: grab;
}
.ballotlist li.dragging { opacity: .35; }
.ballotlist li.dropbefore { box-shadow: 0 -2px 0 var(--accent); }
.ballotlist li.dropafter { box-shadow: 0  2px 0 var(--accent); }
.ballotlist .pos { font: 600 11px var(--mono); color: var(--muted); min-width: 20px; text-align: right; }
.ballotlist .who { flex: 1; min-width: 0; }
.ballotlist .who b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ballotlist .who span { font-size: 11px; color: var(--muted); }
.ballotlist .pts {
  font: 600 11px var(--mono); color: var(--accent);
  background: var(--accent-soft); border-radius: 3px; padding: 1px 5px;
}
.ballotlist .rm { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.ballotlist .rm:hover { color: var(--bad); }

.actions { display: flex; gap: 8px; margin-top: 12px; }
.btn { flex: 1; padding: 8px 12px; border-radius: 5px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:disabled { background: #b8c4d6; border-color: #b8c4d6; cursor: not-allowed; }
.btn.ghost { background: #fff; }
.btn.ghost:hover { background: #f2f4f7; }
.linkbtn { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; padding: 0; text-decoration: underline; }

.errors {
  background: var(--bad-soft); border: 1px solid #f5c6c2; color: var(--bad);
  border-radius: 5px; padding: 8px 10px; margin-top: 10px; font-size: 12.5px;
}
.errors ul { margin: 0; padding-left: 17px; }
.submitted { margin: 10px 0 0; font-size: 12.5px; color: var(--good); font-weight: 600; }

/* ---------- detail overlay ---------- */
.detail {
  position: fixed; inset: 0; background: rgba(20,24,30,.42);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
/* .detail sets display:flex, which would otherwise beat the UA [hidden] rule
   and pin the overlay open. */
.detail[hidden] { display: none; }
.detail-inner {
  background: #fff; border-radius: 8px; padding: 20px 22px;
  max-width: 620px; width: 100%; max-height: 82vh; overflow-y: auto; position: relative;
}
.detail-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.detail h3 { margin: 0 0 2px; font-size: 17px; }
.detail .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.detail dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px 14px; margin: 0 0 14px; }
.detail dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.detail dd { margin: 1px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; }
.detail .comments { background: var(--bg); border-radius: 5px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; }

/* ============================ app shell ============================ */
.appbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; flex-direction: column; padding: 8px 0; white-space: nowrap; }
.brand strong { font-size: 14px; }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.navitem {
  display: flex; align-items: center; gap: 5px;
  padding: 13px 12px; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navitem:hover { color: var(--ink); background: #f7f8fa; }
.navitem.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.adminpip, .devpip {
  font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  border-radius: 3px; padding: 3px 4px;
}
.adminpip { background: #ede7f6; color: #5b3fa8; }
/* Teal, not the admin purple — the two gates are different, and a developer
   glancing at the nav should be able to tell which is which without reading. */
.devpip { background: #d8f1ee; color: #14706a; }
.who-am-i { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
/* The chip in the app bar is the same chip the Users table uses — one per role,
   coloured the same way, so "what am I" reads identically in both places. */
.rolebadge { display: inline-flex; gap: 3px; cursor: pointer; }
.rolebadge .roletag { margin-right: 0; }
.view { min-height: 60vh; }
.loading { padding: 30px; color: var(--muted); }
.errtext { color: var(--bad); }
.okstrong { color: var(--good); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 11px; }

/* ============================== stub =============================== */
.stub { margin: 18px; max-width: 640px; }
.stub h2 { font-size: 17px; margin: 8px 0 4px; }
.stub ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink); font-size: 13px; }
.stub li { margin-bottom: 5px; }
.pill {
  display: inline-block; font: 600 10px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .05em; background: var(--warn-soft); color: #8a6100;
  border-radius: 3px; padding: 4px 6px;
}
.stubnote {
  margin: 12px 0 0; padding: 8px 10px; background: var(--bg);
  border-radius: 5px; font-size: 12.5px; color: var(--muted);
}

/* ============================= results ============================= */
.results { padding: 14px 18px 30px; display: flex; flex-direction: column; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; display: flex; flex-direction: column;
}
.stat b { font-size: 21px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--muted); }
.stat.bad b { color: var(--bad); }

.flags { border-left: 3px solid #e0a800; background: var(--warn-soft); }
.flags.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.flags h2 { font-size: 13px; margin-bottom: 6px; }
.flags ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.flags li { margin-bottom: 4px; }
.flagnote { margin: 9px 0 0; font-size: 12.5px; }
.tie { font-size: 12.5px; margin-bottom: 8px; }

.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.teamlist { list-style: none; margin: 0; padding: 0; }
.teamlist li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #eef0f2; }
.teamlist .pos { font: 600 11px var(--mono); color: var(--muted); min-width: 22px; text-align: right; }
.teamlist .who { flex: 1; min-width: 0; }
.teamlist .who b { display: block; font-size: 12.5px; }
.teamlist .who span { font-size: 11px; color: var(--muted); }
.teamlist .pts { font: 600 12px var(--mono); color: var(--accent); }

.awardtag { font: 600 10px/1 var(--mono); border-radius: 3px; padding: 3px 5px; color: var(--muted); }
.awardtag.a1 { background: #e6f4ea; color: #1a7f4b; }
.awardtag.a2 { background: var(--accent-soft); color: var(--accent); }
.awardtag.a3 { background: #f2f4f7; color: #5f6a76; }

.confidential { border: 1px solid #d9c2c0; background: #fdf8f7; }
.confidential.open { border-color: var(--bad); }
.confidential h2 { color: #8a2a22; }
.synthnote {
  background: var(--warn-soft); border-radius: 5px; padding: 8px 10px;
  font-size: 12.5px; margin: 0 0 12px;
}
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 12px; }
.award { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; }
.award h3 { margin: 0; font-size: 13px; }
.winner { font-size: 16px; font-weight: 600; margin: 6px 0 8px; color: var(--good); }
table.mini { width: 100%; font-size: 12px; }
table.mini td { padding: 2px 0; border-bottom: 1px solid #f1f3f5; white-space: nowrap; }

/* --------------------- roles, overrides, publishing --------------------- */
.rolebadge { cursor: pointer; user-select: none; }
.rolebadge.is-admin { background: #ede7f6; color: #5b3fa8; }
.rolebadge.is-coach { background: var(--accent-soft); color: var(--accent); }

.flags.warn { border-left-color: var(--accent); background: var(--accent-soft); }
.stat.warn b { color: #8a6100; }

.ovtag {
  font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  background: #fdecea; color: #b3261e; border: 1px solid #f0c4c0;
  border-radius: 3px; padding: 3px 4px; margin-left: 5px; white-space: nowrap;
}
tr.ovrow { background: #fffaf0; }
tr.ovrow:hover { background: #fff4e0; }
.ovpick { display: block; font-size: 11.5px; color: var(--muted); margin: 8px 0; }
.ovpick select, td select {
  display: block; margin-top: 3px; font: inherit; font-size: 12px;
  padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
td select { display: inline-block; margin: 0; }

.diffbox {
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: 9px 11px; margin: 9px 0 0; font: 12px/1.5 var(--mono);
  white-space: pre-wrap; max-height: 240px; overflow-y: auto;
}
.status .btn { flex: none; }
.status .muted.small { margin-top: 4px; }

/* published view */
.honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.honour { display: flex; flex-direction: column; gap: 3px; }
.honour b { font-size: 16px; }
.pubnote { margin: 0; }

/* ----------------------- drill-down affordances ----------------------- */
.linkcell {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.linkcell:hover { text-decoration-style: solid; }
.linkcell.strong { font-weight: 700; }
td.name .linkcell { color: var(--ink); font-weight: 600; }
td.name .linkcell:hover { color: var(--accent); }
button.ovtag { cursor: pointer; font-family: var(--mono); }

.votertable td { padding: 4px 8px 4px 0; }
.votertable .strong { font-weight: 700; font-family: var(--mono); }
.votertable tr.droprow { color: var(--muted); }
.votertable tr.droprow .strong { text-decoration: line-through; }

.ballotmap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ballotmap { grid-template-columns: minmax(0, 1fr); } }
/* Grid and flex children default to min-width:auto and refuse to shrink below
   their content, which pushed these nowrap tables past the viewport. */
.ballotmap > *, .teams > *, .results > *, .honours > * { min-width: 0; }
table.mini { table-layout: fixed; }
table.mini td:first-child { white-space: normal; word-break: break-word; }
table.mini td.num { width: 4.5em; }
table.mini td.wide-num { width: 6em; }

.detail dl { margin-bottom: 14px; }

.poy .winner { font-size: 20px; margin: 4px 0 6px; }
.poy .ovpick select { max-width: 420px; }

.subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 14px 0 6px; font-weight: 600; }
.confidential .winner { font-size: 17px; }

.received { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 4px; }
.recv { background: var(--bg); border-radius: 5px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; }
.recv .linkcell { text-align: left; font-size: 14px; }

.rec { font: 600 11px var(--mono); color: var(--muted); white-space: nowrap; }
td.mono { font: 12px var(--mono); }

/* ---------------------- publish bar & roster ---------------------- */
.publishbar { border-left: 3px solid var(--good); padding: 9px 14px; }
.publishbar.drift { border-left-color: var(--bad); background: var(--bad-soft); }
.pb-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pb-row .pb-status { font-size: 13px; white-space: nowrap; }
/* the detail takes the slack so the buttons sit hard right */
.pb-row .pb-detail { flex: 1 1 auto; min-width: 0; }
.pb-row .btn { flex: none; align-self: center; }
.pb-block { background: #fff; border: 1px solid #f0c4c0; border-radius: 5px;
  padding: 8px 10px; margin: 10px 0 0; font-size: 12.5px; color: var(--bad); }

.roster .controls { gap: 8px; }
.roster .tablewrap.short { max-height: 320px; }
.filed { font-weight: 700; font-size: 14px; }
.filed.yes { color: var(--good); }
.filed.no  { color: var(--bad); }
tr.missingrow { background: #fffaf0; }
tr.missingrow:hover { background: #fff4e0; }

/* ------------------------- standings note ------------------------- */
/* The reading note sits under the table it explains. Full width, so the
   list runs in columns rather than as one tall strip. */

.panel.note h2 { margin-bottom: 6px; }
.notelist { margin: 0; padding-left: 17px; font-size: 12.5px; color: var(--muted);
  columns: 2; column-gap: 30px; }
@media (max-width: 800px) { .notelist { columns: 1; } }
.notelist li { margin-bottom: 4px; }
.notelist b { color: var(--ink); }

td.awardcell { white-space: nowrap; }

tr.clickrow { cursor: pointer; }

.honour.pending { border-style: dashed; }

/* ----------------------------- sign in ----------------------------- */
.loginwrap { display: flex; justify-content: center; padding: 60px 20px; }
.login { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login h1 { font-size: 19px; }
.login .muted { margin: -8px 0 0; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--muted); font-weight: 600; }
.field input {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px;
}
.field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.login .btn { flex: none; }

/* ------------------- admin roster + coach voting ------------------- */
.rowacts { white-space: nowrap; }
.rowacts .linkbtn { margin-right: 9px; }
.rowacts .linkbtn:last-child { margin-right: 0; }
.linkbtn.danger { color: var(--bad); }
.linkbtn[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
tr.inactive td { opacity: .55; }

.roletag {
  font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em;
  border-radius: 3px; padding: 3px 5px; margin-right: 3px;
}
/* One colour per role, and each distinct from the others at a glance:
   blue coach, tinted purple admin, the same purple filled for super admin —
   which reads as "more than admin" rather than "different from" — and green
   for the global tier. */
.roletag.coach { background: var(--accent-soft); color: var(--accent); }
.roletag.admin { background: #ede7f6; color: #5b3fa8; }
.roletag.super-admin { background: #5b3fa8; color: #fff; }
.roletag.developer { background: #e6f4ea; color: var(--good); }
.roletag.no-role { background: #f2f4f7; color: var(--muted); }

.formgrid { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
.formgrid select {
  font: inherit; font-size: 14px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
}
.detail .field input { font-size: 14px; }

li.emptyslot { border-style: dashed; background: var(--bg); }
li.emptyslot .who { font-size: 12.5px; }

/* COY slots are draggable like the player ballot */
#coyList li[draggable="true"] { cursor: grab; }
#coyList li.dragging { opacity: .35; }
#coyList li.dropbefore { box-shadow: 0 -2px 0 var(--accent); }
#coyList li.dropafter  { box-shadow: 0  2px 0 var(--accent); }

/* nomination form: two-up fields inside each group */
.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 4px; }
@media (max-width: 600px) { .fieldgrid { grid-template-columns: 1fr; } }
.detail h4.subhead { margin: 16px 0 6px; }
.detail textarea {
  font: inherit; font-size: 14px; padding: 8px 10px; width: 100%;
  border: 1px solid var(--line); border-radius: 5px; resize: vertical;
}
.detail .flags { margin: 12px 0; }
.detail .flags ul { margin: 0; padding-left: 17px; font-size: 12.5px; }

/* ------------------------------ setup ------------------------------ */
.fieldhint { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.cappedrow { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.tiebreak { margin: 0 0 6px; padding-left: 20px; font-size: 12.5px; }
.tiebreak li { margin-bottom: 6px; }
.tiebreak .chk { display: inline-flex; color: var(--ink); }
.panel .fieldgrid { max-width: 720px; }

.seasonpick {
  font: inherit; font-size: 12px; padding: 3px 6px; max-width: 210px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink);
}
.seasonpick[hidden] { display: none; }

/* inline editing inside a table */
.cellinput {
  font: inherit; font-size: 12.5px; padding: 3px 5px; width: 100%; min-width: 90px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.cellinput.mono { font-family: var(--mono); font-size: 11.5px; }
.cellinput.short { min-width: 68px; }
.cellinput.tiny { min-width: 44px; width: 52px; }
.cellinput:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* create/add actions read as additive, not as the primary save */
.btn.go { background: var(--good); border-color: var(--good); color: #fff; }
.btn.go:hover { background: #16693e; border-color: #16693e; }

/* two halves of a selected coach's ballot: what they received, what they cast */
.subboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; align-items: start; }
.subboxes > * { min-width: 0; }
.subbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; }
.subbox h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.subbox h4.subhead { margin-top: 12px; }
.subbox .hint { margin-bottom: 8px; }

/* one row per entry: school sits beside the name, not beneath it */
.teamlist.inline li { padding: 2px 2px; }
.teamlist.inline .who { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.teamlist.inline .who b { display: inline; }
.teamlist.inline .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a blue action that is not the primary one on the row */
.btn.outline { background: #fff; border-color: var(--accent); color: var(--accent); }
.btn.outline:hover { background: var(--accent-soft); }

/* filter row sits under the sortable headings */
#poolFilters th { position: sticky; top: 30px; z-index: 4; background: #f4f6f8;
  padding: 3px 5px; border-bottom: 1px solid var(--line); }
/* The filter row must not set the width of the table. Every stat column is
   three or four characters wide; a filter box that insists on sixty pixels
   pushes the whole table sideways and buries the statistics the coach came to
   read. These shrink to their column and rely on the placeholder for meaning. */
#poolFilters .cellinput {
  min-width: 0; width: 100%; font-size: 10px; padding: 1px 3px;
}
#poolFilters th { padding: 3px 2px; }

/* a declared vocabulary, entered as boxes rather than typed */
.fieldlabel { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.optrow { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.optrow .chk { font-size: 13px; }

.seasonecho { font-variant-numeric: tabular-nums; }

/* a heading that cannot reorder anything must not look clickable */
th.nosort { cursor: default; }
tr[data-school] { cursor: pointer; }
tr[data-school] .rowacts { cursor: default; }

/* Column labels for a ranked ballot, carrying the same weight and colour as the
   values beneath them — the points badge in particular, so the shaded chip
   reads as "this column is points" rather than as a stray value. */
.listhead {
  display: flex; align-items: center; gap: 7px;
  padding: 0 6px 4px; margin-bottom: 2px;
}
.listhead .pos { font: 600 10px var(--mono); color: var(--muted);
  min-width: 20px; text-align: right; letter-spacing: .04em; }
.listhead .who { flex: 1; min-width: 0; }
.listhead .pts {
  font: 600 10px var(--mono); color: var(--accent);
  background: var(--accent-soft); border-radius: 3px; padding: 1px 5px;
  letter-spacing: .04em;
}
/* The remove button occupies a column on every row; keep the header aligned. */
.ballotlist li .rm { min-width: 15px; }

/* The append-only record. Dense and plain on purpose — it is evidence, not a
   report, and it should look like the raw thing it is. */
.auditpanel .controls { gap: 8px; }
.auditpanel #auditFind { min-width: 220px; }
.auditlist { border-top: 1px solid var(--line); margin-top: 8px; }
.auditentry { border-bottom: 1px solid #eef0f2; }
.auditentry > summary {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 2px;
  cursor: pointer; font-size: 12.5px;
}
.auditentry > summary::marker { color: var(--muted); }
.auditentry[open] > summary { background: #f7f9fb; }
.auditwhen { font-size: 11px; color: var(--muted); white-space: nowrap; }
.auditevent {
  font: 600 10px var(--mono); color: var(--accent); background: var(--accent-soft);
  border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.auditsummary { flex: 1; min-width: 0; }
.auditmeta {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px;
  margin: 6px 0 8px 20px; font-size: 12px;
}
.auditmeta dt { color: var(--muted); }
.auditmeta dd { margin: 0; }
.auditentry .diffbox { margin: 0 0 10px 20px; max-height: 340px; overflow: auto; }

/* Viewing as somebody else. Loud on purpose: every screen below this bar is
   showing another account's view, and forgetting that is how a developer
   misreads a bug report as a permissions fault. */
.impbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 14px; font-size: 13px;
  background: #fff4d6; border-bottom: 1px solid #e3c98a; color: #6b4e00;
}
.impbar .muted { color: #8a6d1f; }
.impbar .btn { flex: 0 0 auto; }

.devrow { display: flex; gap: 10px; align-items: baseline; padding: 5px 2px; font-size: 12.5px; }

/* The recipient whose message is in the preview pane. */
#mList tr { cursor: pointer; }
#mList tr.previewing { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The rank badge doubles as the control for moving or dropping a pick, so it
   has to look pressable rather than like a label. Green is a player ballot or
   Coach of the Year; blue is the Achievement award, so the two coach columns
   are told apart at a glance rather than by reading their headings. */
button.rankbadge { border: 0; cursor: pointer; font-family: var(--mono); }
button.rankbadge:hover { filter: brightness(1.12); }
.rankbadge.ach { background: var(--accent); }
.rankedit { display: inline-flex; align-items: center; gap: 2px; justify-content: center; }
.rankinput {
  width: 44px; padding: 1px 2px; text-align: center;
  font: 600 11px var(--mono); border: 1px solid var(--accent); border-radius: 3px;
}
.rankrm {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.rankrm:hover { color: var(--bad); }

/* Two ends of a range in the width one filter box used to take. */
.rangefilter { display: flex; gap: 1px; }
.rangefilter .cellinput { min-width: 0; width: 100%; }
/* A placeholder wider than the box is worse than none — it truncates to
   nonsense. Numeric filters are unlabelled and lean on the column heading. */
#poolFilters .cellinput::placeholder { font-size: 9px; opacity: .55; }

/* A full ballot: rows stop inviting a click they will refuse. Matches the
   greyed-out "add" the coach ballot has always shown. */
#poolTable.full tbody tr:not(.ranked) { cursor: not-allowed; }
#poolTable.full tbody tr:not(.ranked) td.name { color: var(--muted); }


/* A link that acts as a button — the backup is a plain download, which needs no
   script and carries the session cookie by itself. */
a.btn { display: inline-block; text-align: center; text-decoration: none; flex: 0 0 auto; }

/* The one button in the app that destroys data. It should not look like Save. */
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
#restoreFile { font-size: 12.5px; }