:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #14171f;
  --muted: #6b7280;
  --line: #e3e6ea;
  --over: #12805c;
  --over-bg: #dff4ec;
  --under: #b4231f;
  --under-bg: #fce4e3;
  --accent: #14171f;
}

* { box-sizing: border-box; }

/* Elements toggled with the hidden attribute must stay hidden even when a class of
   theirs sets a display (.who is display:flex, which would otherwise win). */
[hidden] { display: none !important; }

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

main, .site-header, footer { max-width: 780px; margin: 0 auto; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0 16px;
}

h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 4px; }

.muted { color: var(--muted); font-size: 13px; }
footer { margin-top: 32px; text-align: center; }

.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }

.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}
.linkish:hover { color: var(--ink); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}

#loginForm { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

input[type="text"] {
  flex: 1 1 200px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}
input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

#loginForm button {
  padding: 10px 16px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tabs { display: flex; gap: 6px; }

.tab {
  padding: 7px 14px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.progress { font-size: 14px; color: var(--muted); }
.toolbar-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.division { margin-bottom: 18px; }

.division-name {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px 2px;
}

.team {
  /* the gradient is set per team in app.js and sits on this white background */
  background-color: var(--card);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrapping matters even on wide screens: a pick's blurb is a full-width row of its
     own beneath the team and its buttons. */
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

.team-name { font-weight: 600; font-size: 15px; }
.team-line { font-size: 12px; color: var(--muted); }

/* A fixed two-column track so every button is the same width, and the columns line up
   from card to card regardless of how long "Under 10.5" is against "Over 3.5". */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 300px;
  flex: 0 0 auto;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.25;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.choice small { display: block; color: var(--muted); font-size: 12px; }
.choice:hover { border-color: #c3c8d0; }

/* The arrow circle is always green (over) or red (under). What separates the pick from
   the rest is strength: an unpicked button is dimmed and keeps the neutral border, while
   the picked one is full colour and takes the team's border inline from app.js. */
.choice-badge {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.choice[data-choice="over"] .choice-badge { background: var(--over); }
.choice[data-choice="under"] .choice-badge { background: var(--under); }
.choice-badge svg { width: 17px; height: 17px; display: block; }
.choice-label { flex: 1 1 auto; }

.choice[aria-pressed="false"] .choice-badge { opacity: 0.3; }
.choice[aria-pressed="false"] .choice-label { color: var(--muted); }
.choice[aria-pressed="true"] { font-weight: 600; }

.error {
  background: var(--under-bg);
  border: 1px solid var(--under);
  color: var(--under);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  margin: 0 0 12px;
}

.table-scroll {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

table { border-collapse: collapse; width: 100%; font-size: 14px; }

th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}

thead th { font-size: 12px; color: var(--muted); font-weight: 600; }

th.team-col, td.team-col {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
}

td.pick-over { color: var(--over); font-weight: 700; }
td.pick-under { color: var(--under); font-weight: 700; }
td.pick-none { color: #c3c8d0; }
td.tally { color: var(--muted); font-size: 13px; }

.empty { padding: 24px; text-align: center; color: var(--muted); }

@media (max-width: 520px) {
  .team { flex-wrap: wrap; }
  .choices { width: 100%; }
}

.banner {
  background: #fff6e0;
  border: 1px solid #e6c766;
  color: #6b4e08;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 0 0 16px;
}

.logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

.team-info { display: flex; align-items: center; gap: 10px; min-width: 0; }

td.team-col .logo { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }

.scoring-note { margin: 12px 2px 18px; line-height: 1.5; }

caption {
  caption-side: bottom;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
}

#resultsEditor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
#resultsEditor summary { cursor: pointer; font-weight: 600; font-size: 15px; }
#resultsEditor > .muted { margin: 8px 0 14px; }

.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.result-row .team-info { flex: 1 1 auto; }

.status {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status.pending { color: var(--muted); font-weight: 400; }

.record-fields { display: flex; gap: 8px; flex: 0 0 auto; }

.record-field {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.record-field input {
  width: 58px;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

@media (max-width: 520px) {
  .result-row { flex-wrap: wrap; }
  .status { order: 3; }
  .record-fields { margin-left: auto; }
}

.banner-locked { background: #eef1f5; border-color: #ccd3dc; color: #38414f; }

.lock-notice { margin: 0 2px 6px; }
.pick-hint { margin: 0 2px 14px; }

/* The pixel burst canvas sits behind the card's content for the length of the animation.
   Positioned elements paint after the normal-flow inline content, so the team name and the
   buttons have to be positioned too or the canvas would cover them. */
.pixel-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.team-info,
.team .choices {
  position: relative;
  z-index: 1;
}

/* A card you can't act on — all your picks are spent, or the deadline has passed — goes
   fully grey: no team wash, no team border, desaturated logo and badges. Your own picks
   keep their colour so they stand out against the rest. app.js skips the inline wash and
   border for these, so there is nothing here to override. */
.team.inactive {
  background-color: #f6f7f9;
  border-color: var(--line);
}
.team.inactive .logo {
  filter: grayscale(1);
  opacity: 0.45;
}
.team.inactive .team-name { color: #8b93a1; }
.team.inactive .team-line { color: #a6adb9; }
.team.inactive .choice { background: #f6f7f9; }
.team.inactive .choice-badge { filter: grayscale(1); }

/* Greyed out: either you have used all your picks, or the deadline has passed. Your own
   picks stay legible in both cases; it is the unavailable options that recede. */
.choice:disabled { cursor: default; }
.choice:disabled:hover { border-color: var(--line); }
.choice[aria-pressed="false"]:disabled {
  opacity: 0.5;
  background: #fafbfc;
}
.choice[aria-pressed="true"]:disabled .choice-badge { opacity: 1; }

#returningBlock { margin-top: 14px; }

#userSelect {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Everyone tab: a card per person, listing their own picks. */
.person {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.person-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.person-head h3 { font-size: 16px; margin: 0; }
.person-summary { font-size: 13px; color: var(--muted); }

.person .table-scroll { border: none; border-radius: 0; }
.person table { font-size: 13px; }
.person td, .person th { text-align: left; }
.person tbody tr:last-child td { border-bottom: none; }

/* On a phone the Result column matters more than the raw record, and all four will not
   fit without scrolling the most important one out of view. */
@media (max-width: 520px) {
  .person .record-col { display: none; }
}

/* --- Pick blurbs -------------------------------------------------------------- */
/* The editor takes a full row of its own inside the flex team card. */
.note {
  flex: 1 1 100%;
  width: 100%;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 2px;
}

.note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.note-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.note-status { font-size: 12px; color: var(--muted); }
.note-status.note-failed { color: var(--under); }

.note-input {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.note-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.article-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--under);
  padding-bottom: 1px;
}
.article-link:hover { color: var(--under); }