/* ==========================================================================
   Sydney Huskies Basketball — Season Awards
   Aesthetic: winter sport-print, drawn from the club logo. Cold slate ground,
   the logo's neutral greys for type, condensed poster type, and the light blue
   of the husky's eye as the one highlight — outlined when it labels, filled
   when it acts.
   ========================================================================== */

:root {
  --ink:        #0b1014;
  --ink-raise:  #131b21;
  --ink-card:   #161f26;
  --ink-sunk:   #080c0f;

  /* Type: the logo's neutral cool greys, not a warm paper cream. */
  --bone:       #eaeef0;
  --bone-soft:  rgba(234, 238, 240, 0.66);
  --bone-faint: rgba(234, 238, 240, 0.38);

  /* Highlight: the light blue of the husky's eye — the only colour the logo
     carries, so the only colour on the page that is not a grey. --ice-deep is
     the eye's own shadow, for the quiet end of the same scale. */
  --ice:        #03e0ff;
  --ice-deep:   #237a87;

  /* Error and success stay red and green: they report state, they are not
     brand, and recolouring them to the highlight would lose the signal. */
  --alarm:      #d96b5c;
  --grow:       #7fb08a;

  --line:       rgba(234, 238, 240, 0.13);
  --line-firm:  rgba(234, 238, 240, 0.28);

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body:    'Sora', ui-sans-serif, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;

  --shell: 1180px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

/* Atmosphere: a cold light from the top-left, a deep teal pool bottom-right, and
   a fixed grain sheet so flat panels never read as plastic. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 8% -8%,  rgba(3, 224, 255, 0.10), transparent 62%),
    radial-gradient(820px 520px at 104% 108%, rgba(35, 122, 135, 0.18), transparent 60%),
    linear-gradient(178deg, transparent 40%, var(--ink-sunk) 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 52px) 120px;
}

/* ---------- Type ---------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.92;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ice);
  margin: 0;
}

.lede { color: var(--bone-soft); max-width: 54ch; }

/* ---------- Masthead ----------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 3vw, 30px);
  align-items: end;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 62px) clamp(18px, 5vw, 52px) clamp(22px, 4vw, 34px);
  border-bottom: 1px solid var(--line-firm);
}

.crest { width: clamp(52px, 8vw, 76px); height: auto; display: block; }

.masthead h1 {
  font-size: clamp(2.1rem, 7.2vw, 4.6rem);
  /* Two-tone wordmark: the club in bone, the sport in outline. */
}
/* The results wordmark reads as one line: the club lockup, then "VOTE RESULTS"
   side by side. The mark is sized in em so it is always a fixed proportion of
   the words it sits next to, and both are centred on the same axis. */
.masthead h1.wordmark-inline {
  display: flex;
  align-items: center;
  gap: 0.42em;
  flex-wrap: wrap;
  white-space: normal;
  font-size: clamp(1.5rem, 4.6vw, 3.2rem);
}
.masthead h1.wordmark-inline .wordmark-words { white-space: nowrap; }
.masthead h1.wordmark-inline img {
  display: block;
  flex: none;
  height: 1.74em;
  width: auto;
}
.masthead h1 .thin {
  -webkit-text-stroke: 1px var(--bone-faint);
  color: transparent;
}
.masthead .season {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  line-height: 1.7;
}
.masthead .season b { color: var(--ice); font-weight: 500; }

.masthead-nav {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  margin-top: 6px;
}
.masthead-nav a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.masthead-nav a:hover,
.masthead-nav a:focus-visible { color: var(--ice); border-bottom-color: var(--ice); }

@media (max-width: 720px) {
  .masthead { grid-template-columns: auto 1fr; }
  .masthead .season { grid-column: 1 / -1; text-align: left; }
  .masthead-nav { justify-content: flex-start; }
}

/* The ballot leads with the club's own lockup rather than a type-set wordmark.
   The mark already carries the crest, so the masthead drops to two columns.
   Declared after the rules above so it wins on source order at every width. */
.masthead--brand { grid-template-columns: 1fr auto; }

.wordmark { line-height: 0; }
.wordmark img {
  display: block;
  width: clamp(220px, 44vw, 480px);
  height: auto;
}

/* The results dashboard leads with the same lockup, but inside the heading
   rather than beside it, so it drops to the same two columns as the ballot. */
.masthead--results { grid-template-columns: 1fr auto; }

@media (max-width: 720px) {
  .masthead--brand,
  .masthead--results { grid-template-columns: 1fr; }
}

/* ---------- Panels ------------------------------------------------------- */

.panel {
  position: relative;
  background: linear-gradient(168deg, var(--ink-card), var(--ink-raise));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 38px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.85);
}

.panel--flush { padding: 0; overflow: hidden; }

/* Reveal on load, staggered by --i */
.rise {
  animation: rise 0.66s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Steps -------------------------------------------------------- */

.step { margin-top: clamp(26px, 4vw, 44px); }

.step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.step-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--ice);
  padding: 3px 9px;
  border: 1px solid var(--ice-deep);
  border-radius: 999px;
  white-space: nowrap;
}
.step-head h2 { font-size: clamp(1.25rem, 3.1vw, 1.85rem); }
.step-head .hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- Selectable chips (teams, players) ---------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Division groupings for the team picker (two dozen squads across five ages). */
.chip-groups { display: grid; gap: 18px; }
.chip-group + .chip-group { padding-top: 18px; border-top: 1px solid var(--line); }
.chip-group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 11px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ice);
}
.chip-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.chip span {
  display: block;
  padding: 10px 17px;
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  background: rgba(234, 238, 240, 0.03);
  font-size: 0.92rem;
  color: var(--bone-soft);
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease),
              background 0.16s var(--ease), color 0.16s var(--ease);
}
.chip:hover span { transform: translateY(-2px); border-color: var(--ice); color: var(--bone); }
.chip input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 3px; }
.chip input:checked + span {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  font-weight: 500;
}
.chip input:disabled + span { opacity: 0.34; }
.chip input:disabled { cursor: not-allowed; }

/* A name that has already voted: shown, but spent. One vote each, so the chip
   is legible enough to find yourself on the list and clearly not clickable. */
.chip--locked input:disabled + span {
  opacity: 1;
  border-style: dashed;
  border-color: var(--line);
  background: rgba(234, 238, 240, 0.015);
  color: rgba(234, 238, 240, 0.38);
  text-decoration: line-through;
  text-decoration-color: rgba(234, 238, 240, 0.24);
}
.chip--locked:hover input:disabled + span {
  transform: none;
  border-color: var(--line);
  color: rgba(234, 238, 240, 0.38);
}
.award-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--ice);
  border-radius: var(--r-md);
  background: rgba(3, 224, 255, 0.07);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--bone-soft);
  max-width: 58ch;
}
.award-note[hidden] { display: none; }

.chip--locked .chip-tag {
  border-color: rgba(234, 238, 240, 0.2);
  background: rgba(234, 238, 240, 0.05);
  color: rgba(234, 238, 240, 0.5);
  text-decoration: none;
}

/* ---------- Award ballot rows -------------------------------------------- */

.award {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 36px);
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: clamp(14px, 2.6vw, 30px);
  transition: background 0.3s var(--ease);
}
.award:first-child { border-top: 0; }
.award[data-filled='true'] { background: rgba(3, 224, 255, 0.05); }

.award-index {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.3rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-firm);
  transition: -webkit-text-stroke-color 0.3s var(--ease), color 0.3s var(--ease);
}
.award[data-filled='true'] .award-index {
  color: var(--ice);
  -webkit-text-stroke-color: transparent;
}

.award h3 { font-size: clamp(1.1rem, 2.7vw, 1.5rem); color: var(--bone); }
.award-desc {
  margin: 7px 0 16px;
  font-size: 0.9rem;
  color: var(--bone-soft);
  max-width: 58ch;
}

@media (max-width: 620px) {
  .award { grid-template-columns: 1fr; gap: 6px; }
  .award-index { font-size: 1.6rem; }
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

.btn--go { background: var(--ice); color: #04191d; font-weight: 500; }
.btn--go:hover:not(:disabled) { background: #46e9ff; }
.btn--go:disabled { background: rgba(234, 238, 240, 0.09); color: var(--bone-faint); cursor: not-allowed; }

.btn--ghost { background: transparent; color: var(--bone-soft); border-color: var(--line-firm); }
.btn--ghost:hover:not(:disabled) { color: var(--bone); border-color: var(--ice); }

.btn--danger { background: transparent; color: var(--alarm); border-color: rgba(217, 107, 92, 0.45); }
.btn--danger:hover:not(:disabled) { background: rgba(217, 107, 92, 0.12); }

.btn--small { padding: 9px 16px; font-size: 0.66rem; }

/* Coaching staff appear in the "your name" step, tagged so it is obvious why
   they are there. They never appear in the award steps. */
.chip-tag {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(3, 224, 255, 0.38);
  background: rgba(3, 224, 255, 0.10);
  color: var(--ice);
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.chip input:checked + span .chip-tag {
  border-color: rgba(11, 16, 20, 0.28);
  background: rgba(11, 16, 20, 0.1);
  color: rgba(11, 16, 20, 0.62);
}

.step-note {
  margin: 0 0 16px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--bone-faint);
}
.panel--flush + .step-note, .step-note + .panel--flush { margin-top: 0; }

/* ---------- Submit dock -------------------------------------------------- */

.dock {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 30px;
  padding: 16px clamp(18px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: rgba(11, 16, 20, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-lg);
}
.dock .progress-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.dock .progress-text b { color: var(--bone); font-weight: 500; }
.dock button { margin-left: auto; }

.track {
  flex: 1 1 140px;
  height: 3px;
  min-width: 90px;
  background: rgba(234, 238, 240, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.track > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ice-deep), var(--ice));
  transition: width 0.45s var(--ease);
}

/* ---------- Notices ------------------------------------------------------ */

.notice {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--ice);
  background: rgba(3, 224, 255, 0.08);
  font-size: 0.92rem;
  color: var(--bone);
}
.notice--bad { border-left-color: var(--alarm); background: rgba(217, 107, 92, 0.11); }
.notice--good { border-left-color: var(--grow); background: rgba(127, 176, 138, 0.1); }
.notice ul { margin: 8px 0 0; padding-left: 20px; color: var(--bone-soft); }
.notice[hidden] { display: none; }

/* ---------- Receipt (post-submit) --------------------------------------- */

.receipt { text-align: left; }
.receipt .stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grow);
  border: 1px solid rgba(127, 176, 138, 0.45);
  border-radius: 999px;
  padding: 7px 16px;
}
.receipt h2 { font-size: clamp(1.8rem, 5.4vw, 3rem); margin: 22px 0 12px; }
.receipt dl {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}
.receipt dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding-top: 4px;
}
.receipt dd { margin: 0; color: var(--bone); }

/* ---------- Skeletons & empty states ------------------------------------ */

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg,
    rgba(234, 238, 240, 0.05) 20%,
    rgba(234, 238, 240, 0.11) 42%,
    rgba(234, 238, 240, 0.05) 64%);
  background-size: 260% 100%;
  animation: sweep 1.5s linear infinite;
}
@keyframes sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.skeleton-row { height: 38px; margin-bottom: 11px; }
.skeleton-row:nth-child(2) { width: 82%; }
.skeleton-row:nth-child(3) { width: 64%; }

.empty {
  text-align: center;
  padding: clamp(34px, 7vw, 74px) 24px;
}
.empty svg { opacity: 0.55; margin-bottom: 20px; }
.empty h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); margin-bottom: 12px; }
.empty p { color: var(--bone-soft); margin: 0 auto 22px; max-width: 46ch; }

/* The whole of the voting page once an official has closed the ballot. There
   is nothing to do here, so the sentence is the page — set large, centred and
   on its own. */
.closed h2 {
  font-size: clamp(1.45rem, 4.6vw, 2.45rem);
  line-height: 1.16;
  max-width: 26ch;
  margin: 0 auto;
}

/* ---------- Gate (password) --------------------------------------------- */

.gate {
  max-width: 470px;
  margin: clamp(40px, 9vw, 96px) auto 0;
}
.gate h2 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); margin-bottom: 10px; }
.gate p { color: var(--bone-soft); font-size: 0.93rem; margin: 0 0 24px; }
.gate form { display: flex; gap: 10px; flex-wrap: wrap; }
.gate input { flex: 1 1 190px; }

/* ---------- Fields ------------------------------------------------------ */

label.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 8px;
}

input[type='text'], input[type='password'], textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--bone);
  background: var(--ink-sunk);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-md);
  padding: 13px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea {
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.75;
  resize: vertical;
  min-height: 260px;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(3, 224, 255, 0.16);
}
input::placeholder, textarea::placeholder { color: rgba(234, 238, 240, 0.26); }

/* ---------- Stats & tallies (results) ----------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(24px, 4vw, 38px);
}
.stat {
  background: var(--ink-raise);
  padding: 20px clamp(16px, 2.4vw, 24px);
}
.stat .k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  display: block;
  margin-bottom: 9px;
}
.stat .v {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 0.9;
  color: var(--bone);
}
/* A count that is asking for something to be done about it. */
.stat .v--flag { color: var(--alarm); }
.stat .v small {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
  margin-left: 6px;
}

/* ---------- Ballot open/closed (results) -------------------------------- */

/* The close and re-open control. It changes what every voter sees, so the panel
   itself carries the state: ice while the ballot is live, alarm once it is
   shut, readable before the button is. */
.ballot-state {
  margin-top: clamp(20px, 3.2vw, 30px);
  border-left: 3px solid var(--ice-deep);
}
.ballot-state h2 { font-size: clamp(1.15rem, 2.8vw, 1.5rem); margin: 10px 0 10px; }
.ballot-state .lede { font-size: 0.9rem; margin: 0; }
.ballot-state .actions { margin-top: 18px; }
.ballot-state--closed { border-left-color: var(--alarm); }
.ballot-state--closed .eyebrow { color: var(--alarm); }

/* ---------- Leaderboard (results) --------------------------------------- */

/* One row per team, one column per award, holding whoever that team is
   currently voting in. Two dozen squads is too much to read as prose, so it is
   set as a table: the eye scans down a column to compare, across a row to read
   one team. Wider than a phone, so it scrolls sideways with the team name
   pinned rather than reflowing into something unscannable.

   Flat surface rather than the usual panel gradient — the pinned column has to
   paint its own background, and a gradient behind it would not line up. */
.leaderboard { margin-top: clamp(20px, 3.2vw, 30px); background: var(--ink-card); }
.leaderboard h2 { font-size: clamp(1.3rem, 3.2vw, 1.9rem); margin: 10px 0 10px; }
.leaderboard .lede { font-size: 0.9rem; margin: 0 0 18px; }

/* The engraving download. Sits between the lede and the table it draws from,
   so it is in reach without the table having to be scrolled past first. */
.leaderboard .actions { margin-top: 0; margin-bottom: 20px; }
.leaderboard .progress-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.lb-scroll {
  overflow-x: auto;
  margin: 0 calc(clamp(22px, 3.4vw, 38px) * -1);
  padding: 0 clamp(22px, 3.4vw, 38px);
  scrollbar-width: thin;
}

.lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.lb-table th, .lb-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.lb-table thead th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bone-faint);
  border-bottom-color: var(--line-firm);
  white-space: normal;
  min-width: 132px;
}
.lb-table thead th.lb-team { min-width: 150px; }
.lb-table thead th.lb-count { min-width: 74px; text-align: right; }
.lb-table tbody tr:last-child > th,
.lb-table tbody tr:last-child > td { border-bottom: 0; }
/* A shut row's drawer is still the last row in the table, so the rule above
   lands on something invisible and leaves a stray hairline under the board. */
.lb-table tbody tr:nth-last-child(2):has(+ .lb-detail[hidden]) > th,
.lb-table tbody tr:nth-last-child(2):has(+ .lb-detail[hidden]) > td { border-bottom: 0; }
.lb-row { transition: background 0.18s var(--ease); }
.lb-row:hover { background: rgba(234, 238, 240, 0.028); }

/* The team name is the row's own heading and stays put while the awards scroll
   under it, so a name is never lost halfway across the table. Pinned cells sit
   over the scrolling ones, so they have to paint the panel colour themselves. */
.lb-table th.lb-team {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ink-card);
}
.lb-table tbody th.lb-team {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--bone);
  padding-top: 14px;
}
.lb-row:hover th.lb-team,
.lb-row--open th.lb-team { background: #1a232a; }

/* Every line on the board opens: the team name is the control, and the row
   around it is the same click target, so a squad's breakdown is one press away
   from the count that raised the question. */
.lb-row { cursor: pointer; }
.lb-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lb-row:hover .lb-toggle { color: var(--bone); }
.lb-toggle:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* A chevron drawn from two borders: right when shut, down when open. */
.lb-chev {
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ice);
  border-bottom: 1.5px solid var(--ice);
  transform: rotate(-45deg);
  transition: transform 0.24s var(--ease);
}
.lb-row--open .lb-chev { transform: rotate(45deg); }

/* The open line reads as the head of the panel hanging off it rather than as
   one row among two dozen. */
.lb-row--open { background: rgba(3, 224, 255, 0.05); }
.lb-row--open > th, .lb-row--open > td { border-bottom-color: transparent; }
.lb-row--open.lb-row--quiet > th.lb-team, .lb-row--open.lb-row--quiet > td { opacity: 1; }

.lb-table td.lb-count {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--bone-soft);
  white-space: nowrap;
}
/* Every ballot on the team sheet is in, coaching staff included. */
.lb-count--done { color: var(--grow); }

.lb-pick { display: block; color: var(--bone); line-height: 1.35; }
.lb-votes {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}
/* A tie is not a result yet, so it drops out of the highlight and says so. */
.lb-cell--tied .lb-pick { color: var(--bone-soft); }
.lb-cell--tied .lb-votes { color: var(--bone-faint); }
/* A tie an official has settled: the name is final, so it reads as one, but the
   label keeps it honest about what put it there. */
.lb-cell--broken .lb-pick { color: var(--bone); }
.lb-cell--broken .lb-votes { color: var(--grow); }
/* A recorded call the tally has since moved out from under. */
.lb-cell--review .lb-votes { color: var(--alarm); }
.lb-cell--empty { color: rgba(234, 238, 240, 0.26); font-family: var(--mono); font-size: 0.8rem; }

/* A squad with nothing in yet: present on the board, plainly not counted. */
.lb-row--quiet th.lb-team, .lb-row--quiet td { opacity: 0.5; }

.lb-note {
  margin: 20px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--bone-faint);
}

/* ---------- The breakdown drawer (results) ------------------------------ */

/* Refresh sits above the board on its own line: it has to stay in reach when
   there is no board to show, and it acts on the whole page, not on one row. */
.board-tools { margin-top: clamp(26px, 4vw, 42px); justify-content: flex-end; }

/* Expand and collapse act on the table, so they sit with it rather than in the
   page toolbar, pushed away from the download button they share a row with. */
.leaderboard .actions .lb-tool { margin-left: auto; }

/* The row that drops out from under an open line, spanning every column. The
   table can be far wider than a phone, so the panel inside is pinned to the
   left of the scroller at the width the reader can actually see: counts read
   in one column and stay put while the award columns scroll behind them. */
.lb-detail > td {
  padding: 0;
  background: linear-gradient(180deg, rgba(3, 224, 255, 0.05), transparent 52%);
  border-bottom: 1px solid var(--line-firm);
}
.lb-detail-inner {
  position: sticky;
  left: clamp(22px, 3.4vw, 38px);
  width: var(--lb-view, 100%);
  max-width: 100%;
  padding: 2px 0 30px;
  /* Opacity only: this element is doing the pinning, so nothing here shifts
     it sideways while it arrives. */
  animation: drawer-in 0.32s var(--ease) both;
}
@keyframes drawer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb-detail-inner { animation: none; } }

.tally-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(16px, 2.6vw, 26px);
  margin-top: 18px;
}
.tally { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; background: var(--ink-raise); }
.tally h3 { font-size: 1rem; margin-bottom: 4px; }
.tally .leader {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
  display: block;
  margin-bottom: 16px;
}
.tally .none { color: var(--bone-faint); font-size: 0.86rem; }

.bar-row { margin-bottom: 12px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-row .bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.87rem;
  margin-bottom: 5px;
  color: var(--bone-soft);
}
.bar-row .bar-label b { font-family: var(--mono); font-size: 0.8rem; color: var(--bone); font-weight: 400; }
.bar-row .bar-label .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Single-hue scale: the leader sits at full ice, everyone else steps down in
   opacity. Rank stays readable without colour-coding people. */
.bar {
  height: 8px;
  background: rgba(234, 238, 240, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ice);
  transform-origin: left;
  animation: grow 0.7s var(--ease) both;
}
.bar-row[data-rank='1'] .bar > i { opacity: 0.78; }
.bar-row[data-rank='2'] .bar > i { opacity: 0.58; }
.bar-row[data-rank='3'] .bar > i { opacity: 0.42; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The tally heading takes its colour from what settled the category: ice while
   the votes are still doing the deciding, green once a call has been made,
   amber while a tie is sitting there undecided. */
.tally .leader--tied { color: var(--alarm); }
.tally .leader--awarded { color: var(--grow); }
.tally .leader--empty { color: var(--bone-faint); }

/* A card wanting attention is outlined rather than filled: the bars inside it
   still have to be readable against the same surface. */
.tally--tied { border-color: rgba(217, 107, 92, 0.4); }
.tally--awarded { border-color: rgba(127, 176, 138, 0.4); }

/* The bar belonging to the player a tie was handed to. */
.bar-row--awarded .bar-label .name { color: var(--bone); }
.bar-row--awarded .bar-label .name::after {
  content: '★';
  margin-left: 7px;
  font-size: 0.72em;
  color: var(--grow);
}
.bar-row--awarded .bar > i { background: var(--grow); opacity: 1; }

/* ---------- Breaking a tie (results) ------------------------------------ */

/* Sits at the foot of a tied tally card. It is a decision being taken, not a
   number being reported, so it is set apart from the bars above it with a rule
   and its own sunken surface. */
.tiebreak {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-firm);
}
.tiebreak-head {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alarm);
}
.tiebreak--settled .tiebreak-head { color: var(--grow); }
.tiebreak--stale .tiebreak-head { color: var(--alarm); }

.tiebreak-state {
  margin: 9px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--bone-soft);
}
.tiebreak-state b { color: var(--bone); font-weight: 500; }

.tiebreak-warn {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--alarm);
  background: rgba(217, 107, 92, 0.1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--bone-soft);
}

.tiebreak-legend {
  margin: 14px 0 10px;
  font-size: 0.84rem;
  color: var(--bone-soft);
}

/* Narrower than the ballot's chips — these sit inside a tally card, and the
   names in a tie are usually two or three. */
.tiebreak-picker { gap: 7px; }
.tiebreak-picker .chip span { padding: 7px 14px; font-size: 0.85rem; }
.tiebreak-picker .chip input:checked + span {
  background: var(--grow);
  border-color: var(--grow);
  color: #08150c;
}

.tiebreak-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tiebreak-notice { margin-top: 12px; font-size: 0.82rem; }

.name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.name-list span {
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--bone-soft);
}
.name-list.awaiting span { border-style: dashed; color: var(--bone-faint); }
/* A ballot that is already in: the husky-eye ice, outlined rather than filled,
   because it labels a state instead of acting. */
.name-list.voted span {
  color: var(--ice);
  border-color: var(--ice-deep);
  background: rgba(3, 224, 255, 0.08);
}

/* ---------- Admin ------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
  margin-top: clamp(24px, 4vw, 40px);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.awards-editor { display: grid; gap: 12px; margin-top: 6px; }
.award-edit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-sunk);
}
.award-edit .stack { display: grid; gap: 8px; }
.award-edit input, .award-edit textarea { background: var(--ink-raise); }
/* The description field is a textarea, but it is not the roster paste box:
   drop that rule's tall min-height and mono face so it sits neatly under the
   award name. */
.award-edit textarea {
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 0;
}

.preview-team { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.preview-team:last-child { border-bottom: 0; }
.preview-team strong { font-size: 0.95rem; }
.preview-team em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--bone-faint);
  margin-left: 8px;
}
.preview-team p { margin: 6px 0 0; font-size: 0.85rem; color: var(--bone-soft); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }

.site-footer {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 34px clamp(18px, 5vw, 52px) 60px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer a { color: var(--bone-faint); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--ice); border-bottom-color: var(--ice); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Awards seasons (admin) ------------------------------------- */

.season-panel { margin-top: clamp(24px, 4vw, 38px); }
.season-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--bone-soft);
}
.season-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.season-history a { color: var(--ice); }
.season-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  color: var(--bone);
  background: linear-gradient(168deg, var(--ink-card), var(--ink-raise));
  border: 1px solid var(--line-firm);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.modal--wide { width: min(760px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(4, 7, 9, 0.78); backdrop-filter: blur(3px); }
.modal-body { padding: clamp(22px, 3.4vw, 34px); }
.modal h2 { font-size: clamp(1.3rem, 3.2vw, 1.8rem); margin: 10px 0 18px; }
.modal textarea { min-height: 300px; }
.modal-warn { font-size: 0.86rem; margin: 14px 0 0; }

.season-fields { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
@media (max-width: 520px) { .season-fields { grid-template-columns: 1fr; } }
.season-preview {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--bone-soft);
}
.season-preview b {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--ice);
  letter-spacing: 0.01em;
}
input[type='number'] {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--bone);
  background: var(--ink-sunk);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-md);
  padding: 13px 16px;
}

/* ---------- Previous seasons (results) --------------------------------- */

.season-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 38px);
}
.season-switch select {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--bone);
  background: var(--ink-sunk);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.season-switch label.field-label { margin: 0; }
.season-locked { border-left-color: var(--bone-faint); }
.season-locked .eyebrow { color: var(--bone-soft); }