/* ---------- QB Mode ----------
   The board of squares, the quarterback picker, and nothing else.

   LOADED AFTER nflmode.css, which is the cascade and is deliberate: this screen
   IS a GeoGauntlet board — .gg-wrap, .gg-bar, .gg-main, .gg-form, .gg-input,
   .gg-sugg, .gg-go — and what
   follows either adds furniture no other mode has (a grid of up to 737 squares)
   or overrides one rule of it.

   NOTHING HERE HARD-CODES A COLOUR, with ONE deliberate exception: the squares
   themselves are painted from an inline hsl() computed per receiver in
   qbmode.js, because ninety-eight distinct colours cannot be written down as
   tokens. Everything else is a token out of theme.css, so light mode is free.
   The empty square is a token for exactly that reason — it is the one square
   colour the theme owns. */

.qb-wrap{max-width:900px}
/* ROOM FOR THE BAR. It is fixed, so it is out of flow and would otherwise sit
   on top of the last season and the receiver chips. */
.qb-wrap{padding-bottom:132px}
@media(max-width:700px){ .qb-wrap{padding-bottom:150px} }

/* ---- the picker ---------------------------------------------------------- */
/* NO CLASS HERE MAY BE A PREFIX OF ANOTHER — the rule nflmode.css records, and
   it is enforced by tests/test_a11y.py with a \b word-boundary match that a
   hyphen does not stop. `qb-pick` and `qb-pn`/`qb-pm`/`qb-py` are named apart
   for that reason rather than qb-pick-name and friends. */
.qb-picks{display:grid;gap:9px;margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.qb-pick{display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:12px 14px;border-radius:var(--radius);cursor:pointer;
  background:var(--sheet);border:1px solid var(--border);color:var(--text)}
.qb-pick:hover{background:var(--sheet-2);border-color:var(--gold)}
.qb-pn{font:900 17px/1.15 var(--display);letter-spacing:-.01em}
.qb-pm{font-size:12.5px;color:var(--text-soft)}
.qb-pm b{color:var(--gold)}
.qb-py{font:700 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-soft);opacity:.75}

/* ---- the head and the score --------------------------------------------- */
.qb-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-top:6px}
.qb-name{font:900 clamp(22px,3vw,32px)/1.05 var(--display);letter-spacing:-.02em;
  margin:0;color:var(--text)}
.qb-line{font-size:13px;color:var(--text-soft);margin-top:3px}
.qb-score{text-align:right}
.qb-pts{font:900 30px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.qb-of{font:700 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft)}

/* The bar is the score made visible, so it is the same ratio and not a second
   idea of progress: width is found ÷ total, which is score ÷ 1000. */
.qb-prog{height:6px;border-radius:999px;background:var(--sheet-2);overflow:hidden;
  margin:12px 0 6px}
.qb-prog span{display:block;height:100%;background:var(--gold);
  transition:width .45s ease}
.qb-count{font-size:12.5px;color:var(--text-soft)}
.qb-count b{color:var(--text)}

/* ---- the ask ------------------------------------------------------------- */
/* The ask is the kit's gg-form + gg-row, so there is nothing to style here
   beyond the space above it. Give up borrows .gg-stand, which is already the
   quiet button beside a loud one everywhere else on the site. */
.qb-ask{margin:14px 0 4px}

/* ---- the board ----------------------------------------------------------- */
.qb-grid{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.qb-yr{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start}
.qb-yl{font:700 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--text-soft);
  text-align:right;padding-top:2px}
/* The count under the year is the season's own total. Quieter than the year:
   it is context for the block beside it, not a second label. */
.qb-yl span{display:block;font-size:9.5px;opacity:.6}

/* THE SQUARES. `auto-fill` with a fixed cell rather than a fixed column count:
   a season is anywhere from 1 touchdown to 55, and the row has to be as wide as
   it needs on a laptop and wrap on a phone without either being told a number.
   14px is the smallest a square can be and still read as a colour rather than a
   dot — checked against the 98-colour palette, which is the hardest case. */
.qb-sqs{display:grid;gap:3px;
  grid-template-columns:repeat(auto-fill,minmax(14px,1fr));
  max-width:100%}
.qb-sq{display:block;aspect-ratio:1;border-radius:2px;
  background:var(--sheet-2);border:1px solid var(--border)}
.qb-sq.on{border-color:transparent}

/* ---- who has been named -------------------------------------------------- */
.qb-found{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.qb-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;
  padding:3px 9px;border-radius:999px;background:var(--sheet);
  border:1px solid var(--border);font-size:12.5px;color:var(--text)}
.qb-chip i{width:10px;height:10px;border-radius:2px;flex:none}
.qb-chip b{color:var(--gold);font-variant-numeric:tabular-nums}
/* A miss is struck through rather than red: it is a name that was not on this
   board, which is not an error — it is the game. The same treatment
   GeoGauntlet gives a country that was not in the round. */
.qb-chip.miss{color:var(--text-soft);text-decoration:line-through;opacity:.7}

/* ---- the end ------------------------------------------------------------- */
.qb-done{margin-top:18px;padding:16px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--border)}
.qb-dt{font:900 19px/1.2 var(--display);color:var(--text)}
.qb-missed{margin-top:12px}
.qb-ml{font:700 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:6px}
.qb-mr{display:flex;flex-wrap:wrap;gap:6px}
/* THE THREE WAYS ON, as one row. `.qb-done .gg-go` set a top margin on the one
   button that used to be here; the margin belongs to the row now, or three
   buttons each carry it and the wrapped line sits too far down.

   NOT flex:1. The labels are "All Broncos", "Another quarterback" and "Home",
   and stretching three buttons of such different lengths to one width makes
   Home enormous and the row read as a segmented control rather than as three
   choices. Same padding, same font, same height — natural widths, wrapping on
   a narrow screen.

   THE LABEL FLIPS WITH THE THEME, which --on-accent deliberately does not do.
   That token is #fff in both, and its own note says why: it is for text on a
   surface that keeps its colour across themes. The accent is not such a
   surface. It is --gold, which is #B8E62B in the dark theme and #4A6E0B in the
   light one — a bright lime and a deep olive — so one label colour cannot
   serve both. Black on the lime, white on the olive: 14.6:1 and 5.48:1, where
   white on the lime would have been 1.8:1 and unreadable.

   Dark is the bare :root here because that is how theme.css is built — dark is
   the default and html[data-theme="light"] overrides it. */
.qb-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.qb-nav .gg-go{margin-top:0;color:#000}
html[data-theme="light"] .qb-nav .gg-go{color:var(--on-accent)}

/* ---- the phone ----------------------------------------------------------- */
@media(max-width:700px){
  .qb-yr{grid-template-columns:40px 1fr;gap:7px}
  .qb-sqs{grid-template-columns:repeat(auto-fill,minmax(12px,1fr));gap:2px}
  .qb-picks{grid-template-columns:1fr}
  .qb-pts{font-size:25px}

  /* THREE LINKS, NOT THREE BUTTONS. Side by side on a desktop they are one
     row; stacked on a phone they were three filled slabs 43px tall with 10px
     between them, which is 149px of card spent on three words. As text they
     stack tight and still read as the three ways on.

     THE ARROW IS DOING THE WORK the box used to. Without it a bare accent word
     under a list of receiver chips is just more text; "All Broncos →" is
     plainly somewhere to go. It points forward because these lead onward,
     where .gg-back's arrow points back.

     THE COLOUR RULE ABOVE HAS TO BE UNDONE HERE, both halves of it. Black and
     white are label colours for text sitting ON the accent; once the fill is
     gone they are a black word on a dark panel and a white word on a cream
     one. The selector repeats the [data-theme] half so it can outrank it —
     a plain .qb-nav .gg-go would lose to it in light mode and leave the link
     white on cream. */
  .qb-nav{flex-direction:column;align-items:flex-start;gap:0;margin-top:8px}
  /* SET LIKE .gg-back, which is the site's other text link: 13px, weight 700,
     and NO font-family — so it inherits the body face instead of the display
     one. That last part is what makes it thin. --display is Archivo Black,
     which has one weight and is heavy at any size; asking it for 700 gets
     Archivo Black anyway, and three lines of it under the receiver list read
     as three headings rather than three things to tap. The body face at the
     same size is a link. 22px a row, against the filled button's 43. */
  .qb-nav .gg-go,
  html[data-theme="light"] .qb-nav .gg-go{
    background:none;border:0;border-radius:0;padding:4px 0;
    color:var(--accent);font-family:inherit;font-size:13px;font-weight:700;
    line-height:1.25;text-align:left}
  .qb-nav .gg-go::after{content:" →"}
}

/* Asked not to animate: the bar arrives at its width instead of growing to it.
   Nothing here is invisible until it moves, so there are no exceptions. */
@media (prefers-reduced-motion: reduce){
  .qb-prog span{transition:none}
}

/* A SQUARE THAT WAS REVEALED RATHER THAN EARNED. Same colour, so the receiver
   reads as one person across the board, but hollowed out — the fill is knocked
   back and the receiver's colour survives as the ring. The difference has to be
   visible at 14px and without relying on hue, because the palette already uses
   every hue there is. */
/* `border-color:inherit` cannot work here — the colour is an INLINE background
   on the square itself, not a property anything inherits — so the difference is
   made with size and weight instead. Scaled down and knocked back: the hue is
   still the receiver's, and the square reads as "theirs, but you did not get
   it" at 14px without depending on a colour difference the palette has already
   spent. */
.qb-sq.lost{opacity:.4;transform:scale(.66)}

/* THE ANSWER BAR STICKS TO THE BOTTOM OF THE WINDOW.
   A board is up to 737 squares and eighteen seasons tall — well past a screen —
   so an input that simply sat under it would mean scrolling the whole board to
   type and scrolling back to see what filled in. Sticky keeps both: the board
   scrolls behind it, the answer is always where your hands are, and the squares
   that just changed are the ones on screen.

   `bottom:0` with the page's own background under it, because the squares run
   right up to it and translucent would put a colour grid behind the text. */
/* FIXED, NOT STICKY, and that is forced rather than preferred. `.wrap` — the
   app's own container, every screen on the site is inside it — carries
   `overflow:hidden`, and an ancestor with any overflow but visible switches
   position:sticky off entirely. The bar simply scrolled away with the board.
   Changing .wrap's overflow to fix one mode's footer would be reaching into
   every other screen's containing block to do it. */
.qb-ask{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px;
  background:var(--page);border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(0,0,0,.28)}
/* The bar spans the window; what is IN it lines up with the board above. */
.qb-askin{max-width:900px;margin:0 auto}
/* The dropdown opens UPWARD out of a bar at the bottom of the screen — the same
   decision the Gauntlet boards made for the same reason. Downward, it would
   open off the bottom of the window. */
.qb-ask .gg-sugg{top:auto;bottom:100%;margin-bottom:6px}
.qb-ask .gg-row{margin-top:8px}

/* ---- the leaderboard on the result card ---------------------------------- */
.qb-lbwrap{margin-top:18px}
.qb-lb{width:100%;border-collapse:collapse;margin-top:8px}
.qb-lb td{padding:7px 8px;border-bottom:1px solid var(--hair);font-size:13.5px}
.qb-lb tr:last-child td{border-bottom:0}
.qb-lb tr.me td{background:var(--sheet-2)}
.qb-lbr{width:34px;color:var(--text-soft);font:700 12px/1 var(--mono)}
.qb-lbn{font-weight:700}
.qb-lbf{color:var(--text-soft);text-align:right;white-space:nowrap}
.qb-lbs{width:74px;text-align:right;color:var(--gold);font-weight:900;
  font-variant-numeric:tabular-nums}

/* THE NAME BOX ON A PHONE. Same floor as NFL Mode's: 52px is a thumb target,
   and 16px text is what stops Safari zooming the page on focus and never
   zooming back. The fixed bar is what a whole round is played through, so this
   is the single most important hit target in the mode. */
@media(max-width:700px){
  .qb-ask .gg-input{min-height:52px;font-size:16px}
  .qb-ask .gg-go, .qb-ask .gg-stand{min-height:48px}
  .qb-ask .gg-sugg > div{min-height:46px;display:flex;align-items:center}
}