/* WHAT TO PLAY NEXT — the three-tile card, wherever a game ends.

   ONE STYLESHEET FOR FOURTEEN END SCREENS, which is the whole reason this is
   not living in one mode's file. It borrows its shape from .nm-next in
   nflmode.css deliberately: that card and this one are the same idea at two
   scales, and a player who has seen one should recognise the other.

   NO COLOUR LITERALS. Every value here is a theme.css token, which is what
   makes the card correct in light mode without a second rule — see the header
   of nflmode.css, whose light-mode bug this file is written to avoid.

   ONE COLOUR PER SLOT, AND THE COLOUR IS PART OF THE CLAIM. The three rows
   make three different kinds of statement — a fact about two games, a fact
   about other people, a ranked guess — and app/services/nextup.py refuses to
   print one slot's sentence over another's row. The chip is where a reader
   sees that distinction, so a row is never drawn without one. */
.nx-next{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;
  display:grid;gap:8px}
.nx-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nx-head b{font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.nx-head span{font-size:13px;color:var(--text-soft)}
/* AN ANCHOR, NOT A BUTTON — see the head of nextup.js on why every tile is a
   real link. So `text-decoration` and `color` are reset rather than inherited,
   which a <button> would not have needed. */
.nx-rec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;
  align-items:center;text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);text-decoration:none;cursor:pointer;
  transition:border-color .12s,background .12s}
.nx-rec:hover{border-color:var(--accent);background:var(--panel-2)}
.nx-recbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.nx-rectop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nx-rectitle{font:900 15px/1.2 var(--display)}
/* NO .nx-recwhy RULE, AND NOTHING IS MISSING. The row printed a sentence under
   the title until it did not; see the comment at that spot in nextup.js. The
   tile is now a name, a chip and two numbers, which is what a person reading
   it at the end of a game is actually choosing between. */
.nx-recmeta{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;
  font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.nx-recgo{font:900 22px/1 var(--display);color:var(--text-muted)}
/* ONE GROUND, THREE INKS, for the reason nflmode.css gives at .nm-recchip:
   three pale washes side by side compete for attention, where one neutral
   ground with three ink colours reads as one control in three states. */
.nx-recchip{font:700 8.5px/1.5 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  white-space:nowrap;background:var(--sheet-2)}
/* The class is the SLOT, not the source. Six sources can fill the related
   slot and they are all making the same kind of claim; colouring by source
   would put six hues on a card with three rows and say nothing extra. */
.nx-recchip.related{color:var(--mint)}
.nx-recchip.crowd{color:var(--gold)}
.nx-recchip.algo{color:var(--amber)}

/* A PHONE DROPS THE CHEVRON. The whole row is the link, so the arrow is
   decoration the moment width is short. The card itself does NOT collapse to
   fewer rows: three is already the whole of it, and the note in
   web/src/hilo.css about nobody scrolling to keep playing applies here with
   more force — this card exists to be the thing under a final score. */
@media (max-width:520px){
  .nx-rec{padding:11px 12px;align-items:start}
  .nx-recgo{display:none}
}