/* layout.css — Page structure, containers, responsive */
/* ── Cross-document view transitions: REMOVED, deliberately ───────
There used to be `@view-transition { navigation: auto; }` here. It made the
browser photograph the outgoing page, hold the photo while the next one
loaded, then cross-fade. The job was to cover the gap between a click and
the new document's first paint.
The splash now covers that gap, and covers it better: it is static markup
with a CSS-driven ring, so it is drawn and already moving in the very first
frame, and it says what is being waited for instead of showing a dead copy
of the screen you just left.
Two mechanisms for one job is one too many, and these two actively fought:
a view-transition photo is a STILL IMAGE, so whenever the new document took
longer than the splash's reveal delay, the splash was already on screen when
the photo was taken. The user then saw a FROZEN splash, that photo swapped
out, and the live splash start animating — one splash that read unmistakably
as two. It was reported as "the animation rises, switches off, and rises
again", and it is exactly what the timing above produces.
Do not reinstate this without solving that: any snapshot-based transition
must be guaranteed to complete before the splash can become visible. If a
white flash ever shows up on some device, fix it with something that cannot
capture the splash — not with a page-wide snapshot. */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
/* Fluid typography: smoothly scales between ≡13px (mobile) and ≡15px (desktop)
at browser default 16px. Uses em (not px) so it respects user font-size preference. */
font-size: clamp(0.8125em, calc(0.75em + 0.3vw), 0.9375em);
scroll-behavior: smooth;
/* Stop mobile browsers (iOS Safari / Android Chrome) from auto-"boosting"
text in wide or nowrap containers to a size they pick themselves. Without
this, the analytics click-log's Click-target column (nowrap cells) jumped
to a much larger font on phones once the table grew wide — e.g. after
un-checking "Exclude my own traffic" added more rows. Set globally on the
root so every table/page is covered, not just that one column. 100% = keep
the size the CSS actually specifies. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-main);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
min-height: 100vh;
}
/* Form controls otherwise default to UA fonts (Arial on Chromium, system-control
on others) which breaks visual parity with surrounding text. Opt them back
into normal inheritance so buttons/inputs/selects/textareas all render with
the page's font, size, weight, and line-height. */
button, input, select, textarea {
font: inherit;
}
/* ── Canonical search / filter field ─────────────────────────────────────
Single source of truth for every "type a query here" input across the
site: sidebar global search, opponent matchup, dashboard player lookup,
What-If predictor, and the admin match/round filters. The WHOLE BOX lives
here — padding, border, radius, colours, focus ring — not just the font.
It has to. Each field used to restate the box in its own file and they
drifted: 7px/12px with a 1.5px border here, `--space-xs`/`--space-sm` (4px/
8px) with a 1px border there, and the two chart pickers matched a rule that
covers `select` and `button` but not `input`, so on conversion they fell back
to the browser's own 2px inset border and zero padding. That is invisible
until something has to align to the field's text — the identity flag does
(combobox.js measures this padding to place it), and it made the same flag
sit 12px into one field and flush against the border of another.
Callers keep only LAYOUT: width, flex, min-width. A deliberate skin may still
override — the sidebar's dark glass and its 30px inset for the magnifier icon
are the one intended exception. Broad rules that would otherwise capture a
search field opt out explicitly (see `.form-group input:not(.app-search-input)`
in admin.css) rather than winning by accident of specificity.
6px/12px with a 1px border matches `.dash-controls select` and `button`, so a
search field standing in a row of controls reads as one of them.
On touch devices these inline fields are never focused (a tap opens the 16px
search sheet instead — see js/render/searchOverlay.js), so no coarse-pointer
anti-zoom rule is needed. */
/* Width: a FLOOR only, and one that yields.
A field with no width rule of its own gets the browser's default `size=20`,
which came out at 200px — measured on four of them (the per-chart pickers and
the admin round filter). That is not a decision, and it is not enough: once a
player is picked the box also carries their flag on the left and title badges
on the right, and 200px leaves the name squeezed between them. Widest real
name (`Danny_kondrea`, 93px) + flag side (34px) + badge side (58px) = 185px of
content in a 200px box.
300px gives that content room. It is written as `width`, NOT `min-width`, and
the difference is the whole fix: `min-width` FORBIDS shrinking, so it dragged
every phone-width field up to 300 too and burst the 240px sidebar rail. A
plain `width` is only a default — any call site that states its own width
(the sidebar rail, the admin form rows) still wins, and `max-width: 100%`
lets a narrow container win as well. So this reaches exactly the fields that
never declared a width and were sitting on the browser's `size=20`, and
nothing else. Deliberately no ceiling: capping the wide admin fields is a
separate decision, and this change is only about fields too narrow to hold
their own contents. */
.app-search-input {
width: 300px;
max-width: 100%;
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-main);
font-size: var(--fs-090);
box-sizing: border-box;
outline: none;
}
.app-search-input:focus {
border-color: var(--color-accent);
}
/* ── Canonical combobox dropdown ─────────────────────────────────────────
Replaces every native ` +