/* ─── The Angry Men, Not Dead Yet ───────────────────────────────────────────
   Midnight slate ground, sodium-vapour light. The light belongs to the slot,
   never to the man standing in it.
   ------------------------------------------------------------------------ */

:root {
  --ink: #12161f;
  --ink-2: #1a2029;
  --ink-3: #232b36;
  --slot-dark: #171d26;
  --bone: #e8e4da;
  --sodium: #f2a03d;
  --flare: #e2513b;
  --dim: #6b7484;
  --line: #2b333f;

  --row-h: 62px;
  --pad: 16px;
  --radius: 5px;

  --display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--ink);
  /* A fine sodium haze from the top, as if the board is lit from above. */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(242, 160, 61, 0.10), transparent 62%);
  background-repeat: no-repeat;
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad) 72px;
}

/* ─── Masthead ──────────────────────────────────────────────────────────── */

.masthead { padding: 34px 0 22px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 15vw, 92px);
  line-height: 0.84;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}

.wordmark span { display: block; }
.wordmark .the { font-size: 0.34em; letter-spacing: 0.1em; color: var(--dim); line-height: 1.2; }
.wordmark .lit { color: var(--sodium); }

.strap {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sodium);
}

.strap::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: rgba(242, 160, 61, 0.35);
}

.lede {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--dim);
  font-size: 14.5px;
}

.lede b { color: var(--bone); font-weight: 600; }

/* ─── Tabs ──────────────────────────────────────────────────────────────── */

.tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 2px;
  margin: 26px -16px 0;
  padding: 10px 16px;
  background-color: rgba(18, 22, 31, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.tab {
  flex: 1;
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 4px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.tab:hover { color: var(--bone); }

.tab[aria-selected='true'] {
  background-color: var(--ink-3);
  border-color: var(--line);
  color: var(--sodium);
}

.panel { display: none; padding-top: 26px; }
.panel.on { display: block; }

/* ─── Shared section furniture ──────────────────────────────────────────── */

.hed {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
}

.sub {
  margin: 0 0 20px;
  color: var(--dim);
  font-size: 13.5px;
  max-width: 52ch;
}

.field { margin-bottom: 18px; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 7px;
}

select,
textarea {
  width: 100%;
  background-color: var(--ink-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  font-family: var(--body);
  font-size: 15px;
}

select { appearance: none; background-image: none; }
textarea { resize: vertical; min-height: 62px; }

select:focus-visible,
textarea:focus-visible,
.tab:focus-visible,
.btn:focus-visible,
.row:focus-visible,
.gridtable th button:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--sodium);
  outline-offset: 2px;
}

/* ─── Identity gate ─────────────────────────────────────────────────────── */

.gate {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 13px 15px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
}

.gate b { font-weight: 600; }

.gate.open {
  border-color: rgba(242, 160, 61, 0.45);
  background-color: rgba(242, 160, 61, 0.07);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gate.open b { color: var(--sodium); }
.gate.open .until { display: block; margin-top: 5px; text-transform: none; letter-spacing: 0; opacity: 0.75; }

.gate.shut { border-color: var(--line); background-color: var(--ink-2); }
.gate.shut b { display: block; color: var(--bone); margin-bottom: 3px; }

.gate.wait {
  background-color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.board.locked { opacity: 0.55; pointer-events: none; }

/* ─── The board ─────────────────────────────────────────────────────────── */

.board {
  position: relative;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
}

.row {
  display: flex;
  align-items: stretch;
  height: var(--row-h);
  margin-bottom: 5px;
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* The row itself stays scrollable on touch; only the grip grabs. */
  touch-action: pan-y;
  will-change: transform;
}

.row.shift { transition: transform 0.16s cubic-bezier(0.2, 0, 0, 1); }

.row.lifted {
  cursor: grabbing;
  z-index: 20;
  border-color: var(--sodium);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  transition: none;
}

/* The slot: a numbered cell that keeps its light while men move through it. */
.slot {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-color: var(--slot-dark);
  color: var(--dim);
}

.who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
}

.nick {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.real {
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--sodium);
  border: 1px solid rgba(242, 160, 61, 0.4);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 7px;
  vertical-align: 2px;
}

.grip {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 20px;
  letter-spacing: -1px;
  border-left: 1px solid var(--line);
  background-color: rgba(255, 255, 255, 0.02);
  touch-action: none;
  cursor: grab;
}

.row.lifted .grip { color: var(--sodium); }

/* The reach/steal callout that prints when a man is dropped. */
.delta {
  position: absolute;
  right: 52px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  animation: rise 0.9s ease-out forwards;
}

.delta.up { color: var(--sodium); }
.delta.down { color: var(--flare); }

@keyframes rise {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: block;
  width: 100%;
  appearance: none;
  border: none;
  border-radius: var(--radius);
  background-color: var(--sodium);
  color: #17120a;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn:hover { filter: brightness(1.09); }
.btn:disabled { background-color: var(--ink-3); color: var(--dim); cursor: not-allowed; }

.btn-ghost {
  width: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 8px 13px;
}

.btn-ghost:hover { color: var(--bone); filter: none; }

.note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  text-align: center;
  min-height: 16px;
}

.note.bad { color: var(--flare); }
.note.good { color: var(--sodium); }

/* ─── Consensus ─────────────────────────────────────────────────────────── */

.era {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.chip {
  appearance: none;
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  cursor: pointer;
}

.chip[aria-pressed='true'] { color: var(--sodium); border-color: var(--sodium); }

/* ─── Consensus: one table, readable on a phone ─────────────────────────
   Seven columns fit inside 360px, so nothing has to scroll sideways on the
   device where this actually gets read. The head is sticky and every column
   sorts. The slot keeps its light, so the finishing order stays legible even
   when the rows are sorted by something else. */

.standings {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.standings th,
.standings td {
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

.standings thead th {
  position: sticky;
  /* Below the sticky tab bar, not under it — .tabs is 55px and z-index 30. */
  top: 55px;
  z-index: 2;
  background-color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.standings th button {
  width: 100%;
  padding: 9px 7px;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--dim);
  background: none;
  border: 0;
  text-align: right;
  cursor: pointer;
}

.standings th button:hover { color: var(--bone); }
.standings th.sorted button { color: var(--sodium); }
.standings th.man button { text-align: left; }
.standings th.place button { padding-left: 10px; text-align: center; }

.standings td { padding: 7px 7px; font-size: 14px; }
.standings tbody tr:last-child td { border-bottom: 0; }

.standings .place { width: 44px; padding-left: 10px; text-align: center; }

.standings .place .slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

/* max-width:0 with width:99% is the table trick that lets one column take the
   leftover space AND shrink below its content — so the names ellipsis away
   before the figures ever get pushed off the screen. */
.standings .man {
  width: 99%;
  max-width: 0;
  text-align: left;
  padding-left: 9px;
  overflow: hidden;
}

.standings .man .nick,
.standings .man .real {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standings .man .nick { font-size: 19px; line-height: 1.05; }
.standings .man .real {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--dim);
}

.standings .num { font-size: 13px; }
.standings .avg { font-size: 15px; font-weight: 600; color: var(--bone); }
.standings .dim { color: var(--dim); }

/* Phones: tighten until all seven columns clear the viewport. Measured at
   390px (iPhone 14/15/16) — the table must not need a sideways scroll. */
@media (max-width: 430px) {
  .standings td { padding: 7px 4px; }
  .standings th button { padding: 9px 4px; letter-spacing: 0.02em; }
  .standings .place { width: 38px; padding-left: 6px; }
  .standings .man { padding-left: 7px; }
  .standings .man .nick { font-size: 17px; }
  .standings .man .real { font-size: 10px; }
}

/* The oldest phones (SE, 320px): the real name is the one thing here nobody
   needs — they know who Nugsy is. Drop it rather than scroll sideways. */
@media (max-width: 345px) {
  .standings .man .real { display: none; }
  .standings .man .nick { font-size: 16px; }
}

.move {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 2px;
  white-space: nowrap;
}

.move.up   { color: var(--sodium); background-color: rgba(242, 160, 61, 0.14); }
.move.down { color: var(--flare);  background-color: rgba(226, 81, 59, 0.14); }
.move.flat { color: var(--dim); }
.move.new  { color: var(--bone); background-color: rgba(255, 255, 255, 0.07); font-size: 9.5px; }

.chase {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sodium);
}

.chase b { display: block; color: var(--bone); font-weight: 500; margin-bottom: 3px; }
.chase.in { color: var(--dim); }

/* ─── The grid ──────────────────────────────────────────────────────────── */

.scroller {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.gridtable {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gridtable th,
.gridtable td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  height: 34px;
}

.gridtable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--ink-3);
  font-weight: 500;
  color: var(--dim);
}

.gridtable th button {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 8px 9px;
  width: 100%;
  cursor: pointer;
}

.gridtable th button:hover { color: var(--bone); }
.gridtable th.sorted button { color: var(--sodium); }

/* Fixed, not just a minimum. Every other column has a set width, so a name
   column with only a min-width is the one elastic thing in the table and
   absorbs the entire surplus once the grid breaks out to the window — leaving
   a 600px-wide column of names and a squashed matrix. Pinning it hands the
   slack to the figures instead, which is what anyone came here to read. */
.gridtable .corner,
.gridtable .rowhead {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: var(--ink-2);
  text-align: left;
  width: 148px;
  min-width: 148px;
}

@media (max-width: 600px) {
  .gridtable .corner,
  .gridtable .rowhead { width: 112px; min-width: 112px; }
}

.gridtable thead .corner { z-index: 4; background-color: var(--ink-3); }
.gridtable .rowhead span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 7px;
  font-size: 12px;
}

/* The finishing place, carried onto every tab so a man reads the same
   everywhere. Lit on the same sodium scale as his slot on the ballot. */
.gridtable .pl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 18px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
}
.gridtable .cell { width: 40px; }
.gridtable .self { box-shadow: inset 0 0 0 1px var(--flare); }

/* Reading one man across every board: put the light on his row and take it off
   everyone else's. Hover does it on a mouse — no JS, no click needed — and a
   tap pins it on a phone, where there is no hover to lean on. */
.gridtable tbody tr { transition: opacity 120ms ease; }

.gridtable:not(.pinned) tbody:hover tr:not(:hover),
.gridtable.pinned tbody tr:not(.lit) {
  opacity: 0.2;
}

/* The row in the light keeps its own head fully bright even while the sticky
   column sits above the dimmed ones. */
.gridtable.pinned tbody tr.lit .rowhead,
.gridtable tbody tr:hover .rowhead { color: var(--bone); }
.gridtable.pinned tbody tr.lit .rowhead { box-shadow: inset 2px 0 0 var(--sodium); }

@media (prefers-reduced-motion: reduce) {
  .gridtable tbody tr { transition: none; }
}
.gridtable .tot { background-color: var(--ink-3); min-width: 46px; }
.gridtable thead .tot { background-color: var(--ink-3); }
.gridtable .gap-hi { color: var(--flare); font-weight: 600; }
.gridtable .gap-lo { color: var(--cool, #4a7c8c); font-weight: 600; }

.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}

.legend-scale {
  flex: 1;
  max-width: 160px;
  height: 6px;
  border-radius: 3px;
  background-image: linear-gradient(90deg, var(--sodium), var(--slot-dark));
}

.legend-scale.rev { background-image: linear-gradient(90deg, var(--slot-dark), var(--sodium)); }

/* The grid is the one thing here that can't live inside a 760px column: a
   column per voter plus three totals runs past 800px once everyone is in.
   So the panel becomes a full-window stage — but the table takes only the
   width it actually needs and sits centred on it, rather than stretching to
   the window and leaving the figures swimming. The heading and chips stay in
   the ordinary reading column. `max-width` caps it at the viewport (less an
   inset for a classic scrollbar), where the .scroller takes over again. */
@media (min-width: 800px) {
  #panel-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 26px 17px 0;
  }

  #panel-grid > .hed,
  #panel-grid > .sub,
  #panel-grid > .era {
    max-width: 726px;
    margin-inline: auto;
  }

  /* `min-content`, not `fit-content`: every cell here is `nowrap`, so a table's
     min-content width is exactly the width at which nothing has to be scrolled
     to and nothing is clipped — no more. `fit-content` gives max-content
     instead, which pads every column out to ~1260px and is most of the way back
     to stretching across the window. The chase list, the warning and the legend
     inherit the width, so they line up with the table edges for free. */
  #grid-host {
    width: min-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

.warn {
  border: 1px solid rgba(226, 81, 59, 0.5);
  background-color: rgba(226, 81, 59, 0.09);
  border-radius: var(--radius);
  padding: 10px 13px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--bone);
}

/* ─── Anonymous notes ───────────────────────────────────────────────────── */

.minihed {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 30px 0 10px;
}

.said {
  border-left: 2px solid var(--line);
  padding: 7px 0 7px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--bone);
  opacity: 0.85;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align: center;
  color: var(--dim);
  font-size: 14px;
}

footer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.7;
}

@media (max-width: 420px) {
  .slot { flex: 0 0 46px; font-size: 17px; }
  .nick { font-size: 22px; }
  /* Wider on a phone, not narrower: on touch this is the ONLY way to grab a
     row, and 34px is under the 44px minimum for a fingertip. */
  .grip { flex: 0 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .row.shift { transition: none; }
  .delta { animation: none; opacity: 1; }
  * { scroll-behavior: auto; }
}