/* ══════════════════════════════════════════════════════════════════════
   FOOSBALL  ·  the wordmark

   Dresses the SVG that js/foosball/wordmark.js draws. Loaded after
   css/app.css and alongside it; every value below is an app.css token or a
   CSS-wide keyword, so all ten themes get a mark that belongs to them.

   The mark has exactly two materials and this file's whole job is naming
   them. The ROD AND THE MEN are the word, so they are currentColor — the
   colour of whatever text the mark stands among, for the reasons
   css/gravity-wordmark.css lays out at length (a wordmark gets dropped
   into buttons, headers, inverted strips; the right ink there is always
   the surrounding text's, which is what currentColor means and --ink does
   not). THE TWO BALLS are the game's moving piece and the mark's one
   permitted second material: they take the theme's --accent, so the eye
   finds the ball before it reads the word — which is the right order, in
   foosball. The markup bakes currentColor fallbacks for both variables,
   so a copy of the string with no stylesheet at all is a clean one-colour
   silhouette.

   ── SIZE ────────────────────────────────────────────────────────────────
   The mark's legibility floor is a HEIGHT — 24px, the header row, where
   the whole box is 155px wide, the rod is 2.4px, the ball counters are
   6.7px with that rod as a chord through them, the B's waist step is 4.3px
   and the rod's tail past the final L is 5.3px. The smallest cue in the
   mark is the S's counter, 2.9px, and it is what caps the S's weight; the
   step and the tail are both bought at 4px BECAUSE under 3px was not
   enough — the B read as an 8 in this row, and a rod stopping flush with
   the last L made that letter a lowercase t. js/foosball/wordmark.js
   carries the renders, and its metricsFor().atFloor quotes every number
   above. CSS can only guard a width, so the guard is the floor multiplied
   by the aspect ratio the module publishes on the <svg> itself
   (--fwm-aspect, ~6.47 — the box is the letters' ink plus that overhang).
   min-inline-size rather than a container query so a page that ignores the
   floor overflows visibly instead of degrading quietly — the same rule the
   gravity mark and css/deadon-logo.css follow, for the same reason.

   The floor lives on the <svg> and not a wrapper because --fwm-aspect is
   published there and custom properties inherit DOWNWARD: a holder rule
   would resolve the calc() against the fallback on every page, silently.

   ── MOTION ──────────────────────────────────────────────────────────────
   None here. The beat is authored in js/foosball/wordmark.js as WAAPI
   keyframes (data-fwm-* on the markup is its data), it honours both
   motion switches at beat time, and the kicked ball is clipped by the
   svg's own inline overflow:hidden — CSS has nothing to add and a rule
   that does nothing is a rule somebody will eventually build on.
   ══════════════════════════════════════════════════════════════════════ */

.fwm{
  display:block;
  inline-size:min(100%, var(--fwm-size, 100%));
  block-size:auto;
  min-inline-size:calc(var(--fwm-min-height, 24px) * var(--fwm-aspect, 6.47));

  /* the two materials — named here so a page can override either in one
     place; unset, the markup's own currentColor fallbacks win */
  --fwm-ink:currentColor;
  --fwm-ball:var(--accent, currentColor);
}

/* ══ THE RING ═════════════════════════════════════════════════════════
   Two rules for a mark that is not supposed to be focusable at all, and
   they are here because CHROMIUM'S SVG UA SHEET RINGS `:focus`, NOT
   `:focus-visible`. Any SVG element carrying a focus-family listener
   becomes mouse-focusable in Blink (SVG 1.1 legacy), and the moment it
   does, a mouse click paints `outline:auto 5px` and leaves it there —
   which is exactly what Austin saw on this mark and on gravity's.
   js/foosball/wordmark.js no longer attaches that listener to the mark,
   so the manufactured focusability is gone at the source; this pair is
   the standing rule underneath it, for the next caller who gives the mark
   a tabindex or a focus handler without reading either file.

   NOT `outline:none` alone. A mark CAN legitimately be made focusable —
   drop it in a button, hang it off a tabindex — and a keyboard user who
   lands on it must see where they are. So the ring is not removed, it is
   MOVED: never from a click, always from a keyboard landing, in the
   site's own focus tokens (app.css names them; the fallbacks keep this
   file standalone). The same shape as every other control on the site,
   `.btn:focus-visible` at app.css:402 being the reference. */
.fwm:focus{outline:none}
.fwm:focus-visible{
  outline:var(--focus-w, 2px) solid var(--focus, currentColor);
  outline-offset:3px;
}

/* ══ forced colours ═══════════════════════════════════════════════════
   One silhouette. The accent ball is a courtesy the forced palette does
   not owe anybody: --accent may map to something unreadable against the
   forced canvas, and a two-colour system has no slot for "the fun one".
   CanvasText for everything — the rod chord through each ball's counter
   still says which two letters are the balls. */
@media (forced-colors:active){
  .fwm{--fwm-ink:CanvasText; --fwm-ball:CanvasText}
}

/* ══ print ════════════════════════════════════════════════════════════
   Paper is white and four of the ten themes have near-white ink; pin the
   whole mark to black or it prints as nothing. The balls go black too —
   a printed logo is a stamp, not a screenshot of a theme. */
@media print{
  .fwm{--fwm-ink:black; --fwm-ball:black}
}