/* word-maker/page.css — route-local, for solvers.js's reason: a rule in
   sieve.css is paid for by eight routes to serve one. No new tokens.
   A3.11 §1: #r-rack (15ch) and #r-words (7ch) are sieve.css's, reused by id so
   their reservations travel; the box this route adds is bounded by measurement
   — the highest score among the 168,548 indexed words is razzamatazzes at 51,
   two digits. */
#r-top { display: inline-block; min-width: 3ch; }

/* The table is DRAWN from WordSolvers.LETTER_SCORES, so the copy cannot
   disagree with the sort, and a region filled after load keeps its geometry by
   ARITHMETIC: 26 tiles over 13 columns is 2 rows, over 7 is 4, the row height
   fixed here. JavaScript off leaves the full height, per the noscript. */
.tiles {
  display: grid; grid-template-columns: repeat(13, 1fr);
  grid-auto-rows: 1.5rem; gap: 0.25rem; height: 3.25rem;
  margin: 0 0 0.9rem; padding: 0; list-style: none;
}

@media (max-width: 599px) {
  .tiles { grid-template-columns: repeat(7, 1fr); height: 6.75rem; }
}

.tile {
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
  font-family: var(--mono); font-size: 0.78rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--panel);
}

.tile .tl { text-transform: uppercase; }
.tile .tv { color: var(--ink-soft); }

/* One row per word inside sieve.css's reserved, scrolling 18rem panel: a grid,
   so 1,500 rows share one geometry and the bars a baseline. Columns: the 51's
   two digits, then MAX_LEN 15 plus the “?” marking a blank-spending word. */
.score-list { margin: 0; padding: 0; list-style: none; }

.word-row {
  display: grid; grid-template-columns: 3ch 17ch 1fr; gap: 0.6rem;
  align-items: center; height: 1.5rem;
  font-family: var(--mono); font-size: 0.9rem;
}

.word-row .pts { text-align: right; font-weight: 600; }
.word-row .blank { color: var(--ink-soft); }

/* TWENTY CLASSES, NO INLINE STYLE: style-src is 'self' with no
   'unsafe-inline', so a computed width in a style attribute loads in jsdom and
   is refused in a browser. Nothing else is reserved — disclosure 215 / 262
   against sieve.css's 215 / 267, longest refusal noWords at 218. */
.bar { height: 0.5rem; border-radius: 2px; background: var(--accent); }

.b1{width:5%}.b2{width:10%}.b3{width:15%}.b4{width:20%}.b5{width:25%}
.b6{width:30%}.b7{width:35%}.b8{width:40%}.b9{width:45%}.b10{width:50%}
.b11{width:55%}.b12{width:60%}.b13{width:65%}.b14{width:70%}.b15{width:75%}
.b16{width:80%}.b17{width:85%}.b18{width:90%}.b19{width:95%}.b20{width:100%}