/* jumble-solver/page.css — route-local, because a rule in sieve.css is paid
   for by eight routes to serve one (solvers.js's budget). The rack input, note
   overlay, reserved results panel, .len-group rows, disclosure and working line
   are already there; this adds the four-box form and the strip's boxes, invents
   no token, and reserves no new region — the rows sit inside .results, fixed at
   18rem and scrolling internally, above a form of static markup. */

/* A grid, so wrap points come from column width rather than label length: four
   across, two on a tablet, one on a phone, and static either way. */
.jumbles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.55rem 1.2rem;
  margin: 0 0 0.7rem;
}

.jumble { display: flex; align-items: center; gap: 0.5rem; }

/* sieve.css sizes .rack-input for one 15-character rack (18ch); here it is one
   of four in a grid, so it takes its cell — min-width: 0 being what stops a
   flex item refusing to shrink below its content width. */
.jumble .rack-input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 1.1rem; }

.rack-form .rack-hint { margin: 0; }   /* it shares the button's row */

/* A3.11 — every variable value is boxed to the widest content it can hold, so
   the strip's wrap never depends on the values. Bounds recomputed by drive.js:
   "N of 4" is 6 characters and no fifth box exists; a box is ONE anagram key,
   so it returns at most the busiest key's 12 words and four cap at 48, which is
   also why the 1,500 render cap is unreachable here; a search SIZE is one
   shard's key count, largest shard-08 at 25,434, so four boxes read 101,736. */
#r-jumbles, #r-solved, #r-answers, #r-keys { display: inline-block; }
#r-jumbles, #r-solved { min-width: 6ch; }
#r-answers { min-width: 3ch; }
#r-keys { min-width: 7ch; }