/* Pitchside pages (D-158): page-specific layout, in one section per page
 * group. Each section opens with a `== name ==` banner comment. */

/* == login == */

/* The sign-in page: the crest-less wordmark, centred on --bg. */
body.loginpage {
  display: grid; place-items: center; min-height: 100vh;
  padding: var(--gutter);
}
.login { width: 100%; max-width: 24rem; padding: 24px; }
.login h1 { text-align: center; font-size: 26px; }
.login .lede { text-align: center; }
.login label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.login button { width: 100%; margin-top: 20px; }

/* == office == */

/* The club band: the top of the Office and the club pages, in the club's
   colours. The first card overlaps it by 8px. */
.clubband {
  display: flex; align-items: center; gap: 14px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 20px var(--gutter) 28px;
  color: var(--on-club); background: var(--club);
  box-shadow: inset 0 -1px 0 var(--club-edge);
}
.content > .clubband:first-child { margin-top: -20px; }
.clubband h1 { margin: 0; color: inherit; }
.clubband a { color: inherit; }
.clubband-text { flex: 1; min-width: 0; }
.clubband-meta { margin: 2px 0 0; font-size: 13px; }
.clubband-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 8px 0 0; font-size: 14px; font-weight: 700;
}
.clubband .chip { color: var(--ink); background: var(--card); border-color: transparent; }
.clubband + .card, .clubband + .alert { position: relative; margin-top: -8px; }
/* The generic ring (components.css) is --club-ink, which in light mode is
   usually the club primary -- the band's own background (final review M-2). */
.clubband :focus-visible { outline-color: var(--on-club); }
@media (min-width: 900px) {
  .clubband { margin: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--club-edge); }
  .content > .clubband:first-child { margin-top: 0; }
}

/* Next match: both crests, then the ground, the round and the Ready line. */
.fixture-big {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px; margin: 4px 0 8px;
}
.fixture-big .side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; text-align: center; font-size: 14px; font-weight: 700;
}
.fixture-big .vs { font-weight: 800; color: var(--muted); }

/* The rivalry card (D-155): the points gap by round, inline SVG. */
.gapline { display: block; width: 100%; max-width: 240px; height: auto; margin: 8px 0; }
.gapline polyline { fill: none; stroke: var(--club-ink); stroke-width: 2; }
.gapline .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* == table == */

.league td.club { max-width: 14rem; }
.league .clubcell a { font-weight: 600; }
.league tr.is-mine .clubcell a { font-weight: 800; }
.league.mini { margin-top: 4px; }

/* == fixtures == */

.round { margin: 20px 0; }
.round h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.round h2 a { text-decoration: none; }
.round h2 .meta { margin: 0; }
.round.is-current h2 a { color: var(--club-ink); }

/* A round is one card of rows: home crest by the score, away crest by it
   too, the score in the middle at 800 once it is played. */
ul.fixtures {
  list-style: none; margin: 0; padding: 4px 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
ul.fixtures li, ul.fixtures li.linked > a.row {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr) auto;
  align-items: center; gap: 8px; min-height: 48px; padding: 6px 0;
}
ul.fixtures li { border-bottom: 1px solid var(--line); }
ul.fixtures li:last-child { border-bottom: 0; }
ul.fixtures li.is-mine {
  margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  background: var(--card-2); box-shadow: inset 3px 0 0 var(--club-ink);
}
ul.fixtures .side { display: flex; align-items: center; gap: 8px; min-width: 0; }
ul.fixtures .side.home { justify-content: flex-end; text-align: right; }
ul.fixtures .side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
ul.fixtures .score { text-align: center; font-weight: 600; color: var(--muted); }
ul.fixtures .score.played { font-weight: 800; color: var(--ink); }
ul.fixtures .tail { display: flex; align-items: center; gap: 6px; }

/* A row that leads somewhere hands its whole area to the anchor (44px+). */
ul.fixtures li.linked { display: block; padding: 0; }
ul.fixtures li.linked.is-mine { padding: 0 14px; }
ul.fixtures li.linked > a.row { min-height: 52px; color: inherit; text-decoration: none; }
ul.fixtures .into { padding: 0 4px; color: var(--muted); }
ul.fixtures li.linked > a.row:hover .into { color: var(--club-ink); }
ul.fixtures.big { font-size: 16px; }

/* A 375px phone cannot fit two full names and a score: abbreviate rather
   than truncate ("Buenos Aires ..." reads as a different club). */
ul.fixtures .short { display: none; }
@media (max-width: 460px) {
  ul.fixtures .full { display: none; }
  ul.fixtures .short { display: inline; letter-spacing: .04em; }
}

/* == squad == */

/* The squad: player rows in a card. It stays a table, one row a player:
   position chip, the name over its meta line, ability, band tag. */
table.plist td { padding: 10px 6px; }
table.plist td.name { max-width: none; }
table.plist td.name > a {
  display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 700;
}
table.plist .meta { margin: 2px 0 0; }
.chip.pos { justify-content: center; min-width: 3.25rem; }
.plist-abil { font-size: 18px; font-weight: 800; }

.flag { margin-left: 4px; font-size: 13px; }
.flag.star { color: var(--club-ink); }
.flag.problem { font-weight: 800; color: var(--loss); }
.flag.locked { color: var(--muted); }

/* The match ratings and the market tables still say which club. */
.squad td.name { max-width: 10rem; }
.squad td.name .nat { margin-left: 6px; font-size: 12px; color: var(--muted); }

/* == player == */

.attrs { display: grid; gap: 8px; margin: 0; }
.attr { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 10px; }
.attr dt { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.attr dd { display: flex; align-items: center; gap: 10px; margin: 0; }
.meter {
  flex: 1; height: 8px; overflow: hidden;
  background: var(--card-2); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--club-ink); }
.attr .num { width: 2rem; text-align: right; font-size: 14px; font-weight: 700; }

.contract { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; }
.contract dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.contract dd { margin: 0; font-weight: 800; }

/* == club == */

ul.rosterlist { list-style: none; margin: 0; padding: 0; }
ul.rosterlist li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2.5rem;
  align-items: center; gap: 8px; min-height: 48px; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
ul.rosterlist li:last-child { border-bottom: 0; }
ul.rosterlist a { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 700; text-decoration: none; }
ul.rosterlist .meta { margin: 0; }
ul.rosterlist .num, ul.rosterlist .money { text-align: right; font-weight: 800; }

/* == choose == */

/* Choose a club, and the coach shortlist: a grid of cards, 1 / 2 / 3 wide.
   A chair carries its own club's tokens (.clubvars), so its button is in
   its colours. */
.chairs { display: grid; gap: 12px; margin: 12px 0 24px; }
.chair {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.chair-head { display: flex; align-items: center; gap: 12px; }
.chair h3 { margin: 0; font-size: 18px; font-weight: 800; }
.chair .meta, .chair .quote { margin: 0; }
.chair .quote { font-size: 14px; }
.chair .facts { margin: 0; font-size: 14px; }
.chair .facts > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.chair .facts dt { color: var(--muted); }
.chair .facts dd { margin: 0; text-align: right; font-weight: 700; }
.chair .crisisline {
  margin: 0; padding: 10px 12px; font-size: 14px;
  color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-input);
}
.chair form { margin-top: auto; }
.chair .take { width: 100%; margin-top: auto; }
.chair .take.is-armed {
  box-shadow: inset 0 0 0 1px var(--club-edge), 0 0 0 3px var(--card), 0 0 0 5px var(--club-ink);
}
.chair.tier1 h3::after, .chair.tier3 h3::after { font-size: 12px; font-weight: 600; color: var(--muted); }
.chair.tier1 h3::after { content: " · strong"; }
.chair.tier3 h3::after { content: " · thin"; }
#choose-error:not(:empty) {
  margin-top: 16px; padding: 12px 14px;
  color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-card);
}
@media (min-width: 640px) { .chairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .chairs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* == match == */

/* The score header: dark in both themes (--board), crests lg, 44px score. */
.scoreboard {
  margin: 0 0 12px; padding: 16px 14px 14px;
  color: var(--board-ink); background: var(--board);
  border: 1px solid var(--board-line); border-radius: var(--r-card);
}
.scoreboard a { color: inherit; }
.scoreboard .crest { box-shadow: 0 0 0 3px var(--board), inset 0 0 0 3px var(--c1), inset 0 0 0 6px var(--c2); }
.scoreboard .chip.derby { color: var(--board-live); border-color: var(--board-live); }
/* --club-ink reads badly on the dark board too (final review M-2). */
.scoreboard :focus-visible { outline-color: var(--board-ink); }
.scoreline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; gap: 8px; margin: 0; font-size: 14px; font-weight: 700;
}
.scoreline .side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; text-align: center;
}
.scoreline .score { font-size: 44px; font-weight: 800; line-height: 52px; letter-spacing: -0.02em; }
.sb-status { margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--board-muted); }
.sb-scorers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 10px; font-size: 13px; color: var(--board-muted);
}
.sb-scorers ul { list-style: none; margin: 0; padding: 0; }
.sb-scorers .home { text-align: right; }

.card.report h2 { font-size: 18px; font-weight: 800; }
.card.report p { margin: 8px 0 0; }
.tickerline { margin: 4px 0; }
td.rating { font-weight: 800; }

/* Commentary: a card per event, the minute as a chip. */
ol.ticker { display: grid; gap: 8px; list-style: none; margin: 8px 0 24px; padding: 0; }
ol.ticker li {
  display: grid; grid-template-columns: auto 4rem 1fr; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-ctl); box-shadow: var(--shadow);
}
ol.ticker .min, .md-min {
  display: inline-grid; place-items: center; min-width: 40px; height: 24px; padding: 0 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--card-2); border-radius: var(--r-pill);
}
ol.ticker .kind {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
ol.ticker .dim { color: var(--muted); }
ol.ticker .ev.goal { box-shadow: var(--shadow), inset 3px 0 0 var(--win); }
ol.ticker .ev.goal .kind { color: var(--win); }
ol.ticker .ev.red .kind { color: var(--loss); }
ol.ticker .ev.yellow .kind { color: var(--warn-ink); }

/* The tape room. Understated: a tool, not a slot machine. */
.tapecontrols { display: grid; gap: 12px; margin: 10px 0; }
.tapeside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tapeside .meta { flex-basis: 100%; margin: 0 0 2px; }
.tapeside button { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: var(--r-pill); }
.tapeside button.is-running { opacity: .6; }
.tapeout { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.tapeline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0 0 4px; font-variant-numeric: tabular-nums;
}
.tapeline .was, .tapeline .arrow { color: var(--muted); }
.tapeline .now strong { color: var(--club-ink); }
.tapeverdict { margin: 4px 0; font-size: 16px; font-weight: 700; }

/* == inbox == */

ul.post {
  list-style: none; margin: 12px 0; padding: 4px 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
ul.post:empty { display: none; }
ul.post li { border-bottom: 1px solid var(--line); }
ul.post li:last-child { border-bottom: 0; }
ul.post a {
  display: grid; grid-template-columns: 8px 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; min-height: 56px; padding: 8px 0;
  color: inherit; text-decoration: none;
}
ul.post .dot { width: 8px; height: 8px; border-radius: 50%; }
ul.post li.unread .dot { background: var(--club-ink); }
ul.post .text { display: grid; min-width: 0; }
ul.post .from { font-size: 13px; color: var(--muted); }
ul.post .subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.post li.unread .subject { font-weight: 800; }
ul.post .when { font-size: 13px; color: var(--muted); }

/* == message == */

.card.letter pre {
  margin: 0; white-space: pre-wrap;
  font-family: var(--font); font-size: 15px; line-height: 1.6;
}

/* Press answers: full-width quiet buttons. The rival's needle / respect /
   ignore is a segmented choice. */
.stances { display: grid; gap: 8px; }
.stances form { display: block; }
.stances button {
  display: grid; justify-items: start; gap: 2px;
  width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
}
.stances .what { font-size: 15px; font-weight: 700; }
.stances .cost { font-size: 12px; font-weight: 500; color: var(--muted); }
.stances.segmented {
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 4px; padding: 4px;
  background: var(--card-2); border-radius: var(--r-card);
}
.stances.segmented button {
  justify-items: center; text-align: center;
  background: var(--card); box-shadow: none;
}

/* == transfers == */

ul.bids { list-style: none; margin: 0; padding: 0; }
ul.bids li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
ul.bids li:last-child { border-bottom: 0; }
ul.bids .who .meta { display: block; }
ul.bids .acts { display: flex; gap: 8px; }

/* D-157: terms on one line -- a free agent's Sign form in a table row. */
form.terms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
form.terms input[type=number] { width: 6.5rem; }
form.terms select { width: auto; }
.card table button { min-height: 44px; padding: 0 14px; font-size: 14px; }
a.renew {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: 8px;
  font-weight: 700; white-space: nowrap;
}

/* == matchday == */

/* static/js/matchday.js draws into this page and toggles md-mine, md-opp,
   md-flash, md-ft and md-me. Those names, every data-md-* hook and the
   aria-live announcer are fixed (D-158); only the look changes here. */
.matchday { max-width: 42rem; }
.md-tablepanel { display: none; }
@media (min-width: 900px) { .md-tablepanel { display: block; } }

.md-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 0 10px; border-bottom: 1px solid var(--board-line);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--board-muted);
}
.md-catcherr { flex-basis: 100%; order: 3; color: var(--board-live); }
.md-status { color: var(--board-live); }
/* The alt-text syntax (final review M-5) keeps the dot itself out of a
   screen reader's reading of "LIVE" / "ROUND N" -- Figtree's audience is
   Safari on iOS 16.4+, which has carried it since 15.4. */
.md-status::before { content: "● " / ""; }
.md-status.md-ft { color: var(--board-ink); }
.md-status.md-ft::before { content: none; }
.md-clock { font-size: 15px; font-weight: 800; color: var(--board-live); }
.md-catchup { min-height: 44px; padding: 0 14px; font-size: 13px; }

.md-board { padding: 14px 0 4px; }
.md-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; gap: 8px;
}
.md-side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; text-align: center; font-size: 14px; font-weight: 700;
}
.md-team.md-mine { text-decoration: underline 2px var(--board-live); text-underline-offset: 5px; }
.md-n { font-size: 44px; font-weight: 800; line-height: 52px; white-space: nowrap; }
.md-xg { min-height: 1em; margin-top: 6px; text-align: center; font-size: 12px; color: var(--board-muted); }
.md-strip { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; height: 8px; margin: 10px 0 2px; }
.md-strip i { background: var(--board-line); border-radius: var(--r-pill); }
/* Coloured by you against them, not home against away. */
.md-strip i.md-opp { background: var(--board-opp); }
.md-strip i.md-mine { background: var(--board-ink); }

.md-tension {
  margin: 12px 0; padding: 12px 14px; font-style: italic;
  color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-card);
}
.md-feed { display: grid; gap: 8px; }
.md-feed p {
  margin: 0; padding: 10px 12px; font-size: 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-ctl); box-shadow: var(--shadow);
}
.md-feed .md-min { margin-right: 10px; }
.md-feed .md-min:empty { display: none; }
.md-feed p.md-goal { font-weight: 700; box-shadow: var(--shadow), inset 3px 0 0 var(--win); }
.md-feed p.md-whistle { font-weight: 800; }

.md-sect {
  margin: 20px 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.md-grounds {
  padding: 4px 12px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.md-grounds:empty { display: none; }
.md-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px;
  padding: 8px 4px; font-size: 14px; color: var(--ink-2);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.md-row:last-child { border-bottom: 0; }
.md-s { font-weight: 800; color: var(--ink); }
.md-r { text-align: right; }
.md-m { min-width: 2.6rem; text-align: right; font-size: 12px; color: var(--muted); }
.md-flash { color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-input); }
.md-flash .md-s { color: inherit; }
.md-stands {
  display: flex; justify-content: space-between; margin: 12px 0; padding: 12px 14px;
  font-weight: 700; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.md-after:not([hidden]) { display: grid; gap: 4px; margin: 12px 0 16px; }
.md-after a:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.md-next:not([hidden]) { display: inline-flex; }
.md-press { font-size: 14px; font-style: italic; color: var(--muted); }
.md-error, .md-saveerr { color: var(--loss); }
.md-table { list-style: none; margin: 0; padding: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.md-table li { padding: 6px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.md-table li.md-me { font-weight: 800; color: var(--club-ink); }
@media (prefers-reduced-motion: reduce) {
  .md-flash { color: inherit; background: none; }
}