/* Premier League Mode — the club picker, the year picker, and the match.

   THE PREFIX IS `pm-` AND THE SERVER'S IS `pl`, which is a split worth stating
   once rather than leaving to be discovered. The API is /api/pl/*, the table
   is pl_season_game and the admin kind is `pls`; the CLIENT is `pm-` in this
   sheet and `pm` in web/src/premmode.js, because web/src/console.css already
   owns `.pl-bar`, `.pl-pace` and `.pl-today` and web/src/console_players.js
   already owns `plTick()` and `PL_TICK`. Those live on the console page and
   could never collide at runtime — but a grep for a Premier League class that
   lands on the admin dashboard's pace bar costs somebody an afternoon, and
   `pm-` is free everywhere. Nothing else in this repo uses it.

   IT BORROWS nflmode.css's SHAPE AND NOT ITS SHEET. The screens are the same
   screens — a year picker, a fixture, a record along the top, an end card —
   so the measurements here are that file's, arrived at over a mode that has
   been played. What is NOT borrowed is the stage, which is the one place the
   two games differ, and the difference is a whole button.

   AFTER gauntlet.css AND AFTER nflmode.css in web/index.html, for the reason
   both of those carry: the play screen is a .gg-* board and this overrides
   pieces of it. */

/* ---- the club picker ------------------------------------------------------
   FORTY-SIX CLUBS, which is where this screen parts company with NFL Mode's
   thirty-two and NBA Mode's thirty. Those two draw a crest grid; this draws a
   name list, because there are no Premier League crests in images/teams and
   forty-six of anything is a scroll on a phone whatever it is made of.

   SORTED BY NAME AND NOT BY SEASONS, deliberately. Ranking them by how many
   years they have on file would put the six ever-presents at the top and bury
   Blackpool at the bottom, which is a leaderboard nobody asked for; a person
   looking for their club looks for its NAME. The season count is on the tile
   because it is the honest thing to say about a club with one. */
.pm-clubs{display:grid;gap:10px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.pm-club{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  text-align:left;padding:14px 16px;border-radius:var(--radius);cursor:pointer;
  color:var(--text);background:var(--sheet);border:1px solid var(--border);
  font-family:inherit}
.pm-club:hover{background:var(--sheet-2);border-color:var(--gold)}
.pm-clubn{font:900 17px/1.15 var(--display);letter-spacing:-.01em;
  overflow-wrap:anywhere}
.pm-clubm{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---- the year picker ------------------------------------------------------
   THE TILE IS WIDER THAN NFL MODE'S 170px because the number on it is wider:
   "2003-04" is seven characters where "2025" is four, and at the 36px display
   face the football tile's width would wrap it. */
.pm-years{display:grid;gap:12px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pm-year{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:18px 20px;border-radius:var(--radius);cursor:pointer;
  color:var(--text);background:var(--sheet);border:1px solid var(--border);
  font-family:inherit}
.pm-year:hover{background:var(--sheet-2);border-color:var(--gold)}
.pm-yn{font:900 30px/1 var(--display);letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.pm-ym{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
/* THE TICK, and it needs a rule of its own — .nm-tick is nflmode.css's and a
   class this sheet does not define renders as bare text. 17px, smaller than
   the number beside it, because it is a state and not a control. */
.pm-tick{flex:0 0 17px;width:17px;height:17px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:900 10px/1 var(--display);background:var(--gold);color:var(--ink-2)}
.pm-ybest{display:flex;align-items:center;gap:7px;
  font:900 13px/1 var(--display);color:var(--mint);
  font-variant-numeric:tabular-nums}
.pm-yfresh{font:700 9.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}

.pm-wrap{max-width:900px}
.pm-head{display:flex;align-items:center;gap:14px;margin:6px 0 2px}
.pm-title{font:900 clamp(22px,4.5vw,30px)/1.1 var(--display);
  letter-spacing:-.02em;margin:0}
/* `pm-subtag` AND NOT `pm-club-tag`, which is a naming rule rather than a
   taste. tests/test_a11y.py finds every class the JS binds a click to and
   checks what the markup builds under it, matching the class name with a WORD
   BOUNDARY — and pm-club followed by a hyphen still satisfies that boundary,
   because a hyphen is not a word character. So a span classed pm-club-tag was
   read as the pm-club BUTTON rendered as a span, and the suite failed on a
   control that was never broken.

   Nothing under this sheet may extend a clickable class's name with a hyphen.
   Suffix it with a letter (pm-clubn, pm-clubm) or give it its own stem.

   AND NO COMMENT HERE MAY SPELL A TAG OUT, which is the second half of the
   same lesson: tests/pagesrc.py pastes this sheet into the page before that
   suite reads it, so an angle-bracketed example in prose is markup as far as
   the scanner is concerned. Writing this note the obvious way failed the suite
   a second time. */
.pm-subtag{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---- the match ------------------------------------------------------------
   WIDER THAN NFL MODE'S 720px, because there are three buttons on the stage
   rather than two. At 720 the draw column squeezed the two club buttons to the
   point where "Wolverhampton Wanderers" wrapped to four lines. */
.pm-scwrap{max-width:780px}
.pm-schud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 8px}
.pm-screc{display:flex;align-items:baseline;gap:10px}
.pm-scn{font:900 30px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pm-sccap{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.pm-scgame{margin-left:auto;font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-soft);font-variant-numeric:tabular-nums}

/* ONE TICK A MATCH along the top: what is done, what is next, what is left.
   THIRTY-EIGHT OF THEM, which is more than either twin's strip carries and is
   why `max-width` comes down from NFL Mode's 22px to 14px — at 22 a 38-match
   season wrapped to two rows on a 390px phone, and a progress strip that
   reflows as you play reads as a layout bug. */
.pm-scdots{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:20px}
.pm-scdots span{flex:1 1 6px;max-width:14px;height:6px;border-radius:3px;
  background:var(--sheet-3)}
.pm-scdots span.now{background:var(--gold)}
.pm-scdots span.ok{background:var(--mint)}
.pm-scdots span.bad{background:var(--rust)}

.pm-scweek{font:700 11px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);text-align:center}
/* THE FIXTURE IS THE QUESTION and it is set like one — the same face and about
   the same size as .gg-prompt. A shade smaller than NFL Mode's because English
   club names are longer: "Wolverhampton Wanderers v Nottingham Forest" at 36px
   is three lines on a phone. */
.pm-scmatch{font:900 clamp(23px,4.8vw,32px)/1.12 var(--display);
  letter-spacing:-.02em;text-align:center;margin:8px 0 4px;color:var(--text)}
.pm-scask{text-align:center;font-size:15px;color:var(--text-soft);margin-bottom:16px}

/* ---- THE STAGE, and the one thing in this file that is not a borrowed
   measurement.

   THREE COLUMNS, NOT TWO, and the middle one is a BUTTON rather than the word
   "vs". That is the whole mode: a quarter of Premier League matches end level,
   so the draw is an answer somebody gives and it has to be as pressable as the
   two clubs are.

   IT IS NARROWER THAN THEY ARE — 0.62fr against 1fr — and that is a statement
   about the game rather than about the space. A draw is one outcome of three
   and the two clubs are the other two; three equal columns would read as three
   equally likely answers, which they are not (45.7% home, 29.5% away, 24.8%
   draw across the 9,880 matches on file). It is also the button with the least
   in it: no crest, no home-or-away line, one word.

   IT KEEPS ITS FULL HEIGHT. `align-items:stretch` on the grid and no min-height
   of its own, so the draw button is exactly as tall as the club buttons beside
   it and the row reads as one control with three parts rather than a pair with
   something wedged between them. */
.pm-scstage{display:grid;grid-template-columns:1fr .62fr 1fr;gap:10px;
  align-items:stretch;padding:14px;border-radius:16px;background:var(--sheet);
  transition:background .15s}
.pm-scstage.ok{background:color-mix(in srgb,var(--mint) 16%,transparent)}
.pm-scstage.bad{background:color-mix(in srgb,var(--rust) 18%,transparent)}

/* The two clubs and the draw share every rule but their colour, so they share
   the class and the draw takes a modifier. */
.pm-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:146px;padding:18px 12px;border-radius:14px;border:0;
  cursor:pointer;font-family:inherit;color:var(--on-accent);
  background:var(--m-prem);box-shadow:0 5px 0 var(--m-prem-sh);
  transition:transform .1s,box-shadow .1s,opacity .15s}
/* `background` AND `transform` RESTATED ON HOVER, and neither is redundant:
   base.css still carries a generic `button:hover{background:#2c3c68;
   transform:translateY(-1px)}` that outranks a bare class, so without this the
   pressed club went navy under the cursor and floated a pixel off its lip. The
   same note .nm-pick carries in nflmode.css and .theme-btn in theme.css. */
.pm-pick:hover{background:var(--m-prem);transform:none}
.pm-pick:hover:not(:disabled){box-shadow:0 7px 0 var(--m-prem-sh)}
.pm-pick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--m-prem-sh)}
.pm-pick:disabled{cursor:default;opacity:.55}
/* The one that was pressed keeps its full strength and a gold ring through the
   hold, so the verdict line reads against a visible choice. */
.pm-pick.chosen{opacity:1;outline:3px solid var(--gold);outline-offset:2px}
.pm-pickn{font:900 19px/1.1 var(--display);letter-spacing:-.01em;text-align:center;
  overflow-wrap:anywhere}
.pm-pickw{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.8}
.pm-crest{width:48px;height:48px;object-fit:contain}
.pm-pick .pm-crest{width:48px;height:48px}

/* THE DRAW IS THE SAME BUTTON IN A DIFFERENT COLOUR, and the colour is the
   sheet rather than a third accent. Two clarets and a third bright hue would
   make the draw the loudest thing on a screen where it is the least likely
   answer; the muted middle says "the outcome between these two" without
   arguing for itself. It keeps the lip, so it is visibly pressable. */
.pm-pick.pm-draw{background:var(--sheet-3);color:var(--text);
  box-shadow:0 5px 0 var(--border)}
.pm-pick.pm-draw:hover{background:var(--sheet-3)}
.pm-pick.pm-draw:hover:not(:disabled){box-shadow:0 7px 0 var(--border)}
.pm-pick.pm-draw:active:not(:disabled){transform:translateY(3px);
  box-shadow:0 2px 0 var(--border)}
.pm-drawn{font:900 17px/1.1 var(--display);letter-spacing:-.01em}
/* The score a draw would be — "X-X" — under the word, in the mono face the
   rest of the strip uses. It is not a hint: every draw is X-X and the number
   is not named. It is there because the button is otherwise one short word in
   a row of two tall ones. */
.pm-drawh{font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}

/* The verdict — the score, in the colour of how it went. Space is held for it
   so the buttons do not jump when it lands. Two lines' worth rather than NFL
   Mode's one: a Premier League verdict names a scoreline and both clubs. */
.pm-scverdict{min-height:44px;text-align:center;margin-top:14px;
  font:900 16px/1.35 var(--display)}
.pm-scverdict.ok{color:var(--mint)}
.pm-scverdict.bad{color:var(--rust-text)}

/* ---- the end of the season ----------------------------------------------- */
.pm-scword{text-align:center;font:900 clamp(20px,4vw,26px)/1.2 var(--display);
  color:var(--gold);margin:-6px 0 18px;letter-spacing:-.01em}
.pm-scxp{text-align:center;font-size:13px;color:var(--text-soft);margin:-8px 0 16px}
.pm-scxp b{color:var(--gold)}
/* The recap borrows the answer table. Its first column holds a matchday number
   and nothing longer, so 34px does it — narrower than NFL Mode's 40, which has
   to fit "Conf". */
.pm-screcap{margin-top:20px}
.pm-screcap .gg-brow{grid-template-columns:34px minmax(0,1fr) auto auto}
.pm-screcap .gg-brow.ok .pts{color:var(--mint)}
.pm-screcap .gg-brow.bad .pts{color:var(--rust-text)}
.pm-screcap .gg-brow .val{white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-det{color:var(--text-muted);font-size:11px}

.pm-next{margin-top:18px}
.pm-nexthead{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.pm-nexthead b{font:900 15px/1 var(--display)}
.pm-nexthead span{font-size:13px;color:var(--text-soft)}
.pm-share .pm-sq{font-size:15px;line-height:1.5;word-break:break-all;
  margin-bottom:10px}
.pm-signup .pm-su-t{font-weight:700;margin-bottom:8px}
.pm-signup .pm-su-b{display:flex;gap:8px;flex-wrap:wrap}

/* ---- the phone ------------------------------------------------------------
   THE STAGE STAYS THREE ACROSS. Stacking it would put the draw under the two
   clubs, which is both a scroll and a lie about the shape of the choice — the
   three answers are one row of three whatever the screen is. What comes down
   instead is everything inside the buttons: the crest, the two type sizes and
   the padding. Measured at 390px, where the row is 358px wide and the draw
   column takes 96px of it. */
@media(max-width:700px){
  .pm-years{grid-template-columns:repeat(2,1fr);gap:8px}
  .pm-year{padding:12px 14px;gap:4px}
  .pm-yn{font-size:24px}
  .pm-clubs{grid-template-columns:repeat(2,1fr);gap:8px}
  .pm-club{padding:11px 12px}
  .pm-clubn{font-size:15px}
  .pm-scstage{grid-template-columns:1fr .58fr 1fr;gap:7px;padding:10px}
  .pm-pick{min-height:120px;padding:13px 7px;gap:6px}
  .pm-pick .pm-crest{width:36px;height:36px}
  .pm-pickn{font-size:15px}
  .pm-drawn{font-size:14px}
  .pm-pickw,.pm-drawh{font-size:8.5px;letter-spacing:.1em}
  .pm-scdots{gap:2px;margin-bottom:16px}
  .pm-scdots span{max-width:10px;height:5px}
}