/* builder — the club-design component's own sheet.
 *
 * Two surfaces load this: Rally's front door (/build and /assistant) and Rally
 * HQ (the marks studio and "Design it here"). It assumes nothing about the page
 * around it except the host's chrome tokens (--paper, --paper-2, --ink, --ink-2,
 * --line, --shadow-1, --shadow-2), each read with a fallback; HQ redefines them
 * for its dark theme, so the chrome follows the theme with no second set here.
 *
 * Three families of rule live in this file, and they never borrow from each
 * other:
 *
 *   - the CHROME (toolbar, sheet, toast): set in --bx-font-ui and
 *     --bx-font-label, which the front door points at its own Archivo and
 *     "Oswald Front" (D30), so no kit face is fetched to draw a button;
 *   - the MOCK: a picture of a CLUB's site, set in the club-site families
 *     (Anton, Barlow, Barlow Condensed) and the club's two colors, which arrive
 *     as --club-primary and --club-deep on the root. brand/README.md §7b: those
 *     faces appear on a Rally surface only inside the preview;
 *   - the EDIT SYSTEM: green, and green means "yours to change" and nothing
 *     else (SPEC §6.2). Lines on a slot are its outline (so they never move a
 *     glyph), tints are the opacity of its ::before (so they animate on the
 *     compositor), and the selected ring is drawn in a screen-space overlay so
 *     2px stays 2px at any scale (D13). Inside the scaled mock every width is
 *     divided by --bx-z, the zoom, for the same reason.
 *
 * www/lib/builder.css is a GENERATED COPY of this file: edit this one and run
 * `npm run sync:shared`.
 *
 * Fonts are self-hosted on both origins (www/assets/fonts, rally/assets/fonts)
 * because both CSPs are font-src 'self', and because a lockup drawn in the
 * wrong face is not the lockup.
 */

@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bangers"; src: url("/assets/fonts/bangers-400.d9df4c73.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url("/assets/fonts/kaushan-script-400.a313c49d.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* The thirty-one faces the typeface picker offers (rally/lib/lockup.js LOCKUP_FACES), one weight each, latin only, fetched
   only when a tile or the stage is set in one. Both origins ship every file at this path; a test holds the three copies equal. */
@font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue-400.aac9aea6.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Staatliches"; src: url("/assets/fonts/staatliches-400.d0990ae4.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fjalla One"; src: url("/assets/fonts/fjalla-one-400.814dcb77.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/assets/fonts/oswald-400.d2357daf.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Teko"; src: url("/assets/fonts/teko-400.11ed85a8.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-400.9255071a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Passion One"; src: url("/assets/fonts/passion-one-400.0e26078a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Changa One"; src: url("/assets/fonts/changa-one-400.87dde57e.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Racing Sans One"; src: url("/assets/fonts/racing-sans-one-400.d4144aea.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("/assets/fonts/bungee-400.82b268c2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Black Ops One"; src: url("/assets/fonts/black-ops-one-400.ff5e5c7f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Squada One"; src: url("/assets/fonts/squada-one-400.73c85926.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Graduate"; src: url("/assets/fonts/graduate-400.a6ca5e18.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url("/assets/fonts/alfa-slab-one-400.5b246275.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bevan"; src: url("/assets/fonts/bevan-400.e7584b9d.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bowlby One"; src: url("/assets/fonts/bowlby-one-400.b244dddc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Holtwood One SC"; src: url("/assets/fonts/holtwood-one-sc-400.9ad931d3.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rye"; src: url("/assets/fonts/rye-400.fc76d782.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sancreek"; src: url("/assets/fonts/sancreek-400.e7c33d05.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url("/assets/fonts/abril-fatface-400.5232e286.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rozha One"; src: url("/assets/fonts/rozha-one-400.78289f89.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-400.b1169519.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-400.53c77b9b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lobster"; src: url("/assets/fonts/lobster-400.225dc1e4.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("/assets/fonts/pacifico-400.9f9bc71b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yesteryear"; src: url("/assets/fonts/yesteryear-400.85d50ec6.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courgette"; src: url("/assets/fonts/courgette-400.00b0fb62.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Norican"; src: url("/assets/fonts/norican-400.b433c3fb.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oleo Script"; src: url("/assets/fonts/oleo-script-400.c6554325.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Damion"; src: url("/assets/fonts/damion-400.63a0a2fc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chango"; src: url("/assets/fonts/chango-400.983b9ce9.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }


/* ---- tokens ------------------------------------------------------------- */
.bx-root {
  /* The host's chrome, each with a fallback so a bare host still reads. */
  --bx-paper: var(--paper, #FFFFFF);
  --bx-floor: var(--paper-2, #F3F1EC);
  --bx-ink: var(--ink, #171512);
  --bx-ink-2: var(--ink-2, #5E574B);
  --bx-line: var(--line, #E2DDD2);
  --bx-shadow-1: var(--shadow-1, 0 1px 2px rgba(23, 21, 18, .06), 0 18px 40px -22px rgba(23, 21, 18, .35));
  --bx-shadow-2: var(--shadow-2, 0 2px 6px rgba(23, 21, 18, .08), 0 30px 60px -28px rgba(23, 21, 18, .4));
  /* Chrome type (D30). The front door points these at its own Archivo and "Oswald Front". */
  --bx-font-ui: "Barlow", system-ui, sans-serif;
  --bx-font-label: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Green means editable, and nothing else (SPEC §6.2). */
  --edit: #22C55E;
  --edit-strong: #15803D;
  --edit-ink: #052E16;
  --edit-mint: #86EFAC;
  /* Every editable surface of the mock is dark (masthead, hero, footer, page
   * header), so the tint is the dark ground's .14; --edit-tint-light is the
   * .10 a light ground takes. The numbers beside them are the same tints as
   * opacities of --edit, which is how a slot's ::before draws them. */
  --edit-tint: rgba(34, 197, 94, .14);
  --edit-tint-light: rgba(34, 197, 94, .10);
  --edit-hover: .08;
  --edit-drag: .16;
  --edit-flash: .24;
  --edit-rest: rgba(34, 197, 94, .65);
  --edit-rest-fill: rgba(34, 197, 94, .06);
  --bx-a-tint: .14;
  --bx-a-rest: .06;
  --bx-a-graphic: .08;

  /* Motion (SPEC §6.7). Only transform and opacity animate. */
  --m-press: 100ms;
  --m-ring: 150ms;
  --m-ring-ease: cubic-bezier(.2, 0, 0, 1);
  --m-pop-in: 180ms;
  --m-pop-out: 120ms;
  --m-sheet-in: 300ms;
  --m-sheet-out: 220ms;
  --m-in-ease: cubic-bezier(.05, .7, .1, 1);
  --m-out-ease: cubic-bezier(.3, 0, .8, .15);
  --m-crossfade: 200ms;
  --m-flash: 1000ms;
  --m-toast-in: 200ms;
  --m-toast-out: 150ms;

  /* The club's own, set from the state on every paint. NEUTRAL until chosen (D17). */
  --club-primary: #5B6470;
  --club-deep: #17191D;
  --club-ink: #F4F3F0;
  --club-line: rgba(244, 243, 240, .13);
  --club-paper: #0B0B0D;
  --club-glow: rgba(91, 100, 112, .26);
  --bx-display: "Anton", system-ui, sans-serif;
  --bx-body: "Barlow", system-ui, sans-serif;
  --bx-tight: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* Where the pane starts at scroll 0, measured by the host before first paint
   * (54 Rally bar + 56 toolbar + 16 floor + 32 strip when it does not), and
   * the sticky offset the toolbar stops at. */
  --bx-above: 158px;
  --bx-top: 54px;

  position: relative;
  display: block;
  min-width: 0;
  color: var(--bx-ink);
  font-family: var(--bx-font-ui);
  -webkit-tap-highlight-color: transparent;
}
.bx-root *, .bx-root *::before, .bx-root *::after { box-sizing: border-box; }
.bx-root [hidden] { display: none !important; }
:where(.bx-root) button { font: inherit; color: inherit; }
.bx-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the toolbar -------------------------------------------------------- */
.bx-bar {
  position: sticky; top: var(--bx-top); z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 16px;
  background: var(--bx-paper); border-bottom: 1px solid var(--bx-line);
  white-space: nowrap;
}
.bx-bar-region { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bx-bar-region:empty { display: none; }
/* The host's checklist keeps its width: shrunk, it slid under Undo at 768px. */
[data-bx="bar-start"] { flex: none; }
.bx-bar-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--bx-line); flex: none; }
.bx-spacer { flex: 1 1 auto; min-width: 8px; }
.bx-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bx-floor); flex: none; }
.bx-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 30px; padding: 0 12px; border-radius: 7px;
  font: 600 13px/1 var(--bx-font-ui); color: var(--bx-ink-2);
  transition: transform var(--m-press) ease-out, opacity var(--m-press) ease-out;
}
.bx-seg button[aria-pressed="true"] { background: var(--bx-paper); color: var(--bx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--bx-line); }
.bx-seg button:active { transform: scale(.97); }
.bx-seg .bx-dev { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.bx-ibtn, .bx-tbtn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--bx-ink); cursor: pointer; flex: none;
  font: 600 13px/1 var(--bx-font-ui);
  transition: transform var(--m-press) ease-out;
}
.bx-ibtn { padding: 0; width: 36px; }
.bx-ibtn:disabled { opacity: .35; cursor: default; }
.bx-tbtn[aria-pressed="true"] { background: var(--bx-ink); color: var(--bx-paper); }
.bx-tbtn[aria-expanded="true"] { background: var(--bx-floor); }
.bx-ibtn:not(:disabled):active, .bx-tbtn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .bx-ibtn:not(:disabled):hover, .bx-tbtn:hover { background: var(--bx-floor); }
  .bx-tbtn[aria-pressed="true"]:hover { background: var(--bx-ink); opacity: .9; }
  .bx-seg button:hover { color: var(--bx-ink); }
}
.bx-ico { width: 18px; height: 18px; display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bx-dots { display: inline-flex; flex: none; }
.bx-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bx-paper); }
.bx-dots i + i { margin-left: -5px; }
/* The picker is the one toolbar item that may give up width: in a system face wider than the one measured, the end of
 * its label is clipped rather than the host's ⋯ being pushed past the window (it ran 7px past 320). */
.bx-pagepick { display: none; position: relative; min-width: 0; }
.bx-pagepick select {
  appearance: none; max-width: 100%; height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--bx-line); border-radius: 9px;
  background: var(--bx-paper); color: var(--bx-ink); font: 600 14px/1 var(--bx-font-ui);
}
.bx-pagepick::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); pointer-events: none; }
.bx-root button:focus-visible, .bx-root select:focus-visible, .bx-root input:focus-visible, .bx-root [role="button"]:focus-visible { outline: 2px solid var(--bx-ink); outline-offset: 2px; }

/* ---- the floor, the frame and the pane ------------------------------------ */
.bx-floor { position: relative; padding: 16px 24px 24px; background: var(--bx-floor); }
.bx-frame {
  position: relative; margin: 0 auto; max-width: 100%;
  border: 1px solid var(--bx-line); border-radius: 12px; overflow: hidden;
  background: var(--club-paper); box-shadow: var(--bx-shadow-1);
}
.bx-chrome {
  display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 12px;
  background: var(--bx-paper); border-bottom: 1px solid var(--bx-line);
}
.bx-chrome-dots { display: inline-flex; gap: 6px; flex: none; }
.bx-chrome-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bx-line); }
.bx-tab {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 280px; height: 24px; padding: 0 12px 0 8px;
  border-radius: 7px; background: var(--bx-floor); font: 500 12px/1 var(--bx-font-ui); color: var(--bx-ink);
}
.bx-tab-ico { width: 16px; height: 16px; flex: none; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.bx-tab-ico img, .bx-tab-ico svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.bx-tab-ico:empty { background: var(--bx-line); }
.bx-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-tab-title.bx-unset { color: var(--bx-ink-2); }
.bx-pane {
  position: relative;
  height: var(--bx-pane-h, max(420px, calc(100dvh - var(--bx-above) - 24px)));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--club-paper);
}
.bx-scale { position: relative; overflow: hidden; margin: 0 auto; }
.bx-mock {
  --bx-z: 1;
  --bx-u: calc(1px / var(--bx-z));
  position: relative; transform-origin: top left; width: 1280px;
  color: var(--club-ink); background: var(--club-paper); font-family: var(--bx-body);
}
/* The phone view on a desktop: the page at 1:1 in a phone's outline, on the floor. */
.bx-root[data-view="phone"]:not([data-layout="phone"]) .bx-chrome { display: none; }
.bx-root[data-view="phone"]:not([data-layout="phone"]) .bx-pane { height: calc(var(--bx-pane-h, max(420px, calc(100dvh - var(--bx-above) - 24px))) + 32px); background: var(--bx-floor); padding: 20px 0 28px; }
.bx-root[data-view="phone"]:not([data-layout="phone"]) .bx-frame { background: var(--bx-floor); }
.bx-root[data-view="phone"]:not([data-layout="phone"]) .bx-device { width: max-content; margin: 0 auto; padding: 10px; border-radius: 40px; background: #121316; box-shadow: var(--bx-shadow-2); }
.bx-root[data-view="phone"]:not([data-layout="phone"]) .bx-device > .bx-scale { border-radius: 30px; }

/* ---- the overlay: rings, names, why-labels -------------------------------- */
.bx-overlay { position: absolute; z-index: 20; overflow: hidden; pointer-events: none; }
.bx-ring {
  position: absolute; border-radius: 8px;
  box-shadow: 0 0 0 1px var(--halo, #FFFFFF), 0 0 0 3px var(--edit), 0 0 0 4px var(--halo, #FFFFFF);
  outline: 2px solid transparent;
  animation: bx-ring-in var(--m-ring) var(--m-ring-ease) both;
}
.bx-ring.bx-on-photo { box-shadow: 0 0 0 2px var(--edit-mint), 0 0 0 4px var(--edit-ink), 0 0 0 5px var(--edit); }
.bx-ring.bx-still { animation: none; }
.bx-ring.bx-focus { box-shadow: 0 0 0 1px var(--halo, #FFFFFF), 0 0 0 3px var(--edit), 0 0 0 4px var(--halo, #FFFFFF); }
@keyframes bx-ring-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.bx-tagname {
  position: absolute; height: 20px; padding: 0 6px; border-radius: 4px;
  font: 600 11px/20px var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #FFFFFF; background: var(--edit-strong);
  animation: bx-ring-in var(--m-ring) var(--m-ring-ease) both;
}
.bx-tagname.bx-still { animation: none; }
.bx-whylabel {
  position: absolute; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 600 12px/20px var(--bx-font-ui); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis;
  color: #FFFFFF; background: var(--edit-ink);
  animation: bx-why 3250ms linear both;
}
@keyframes bx-why { 0% { opacity: 0; } 5% { opacity: 1; } 92.3% { opacity: 1; } 100% { opacity: 0; } }
/* The just-changed tint: 24% green fading to nothing over a second (SPEC §6.3), drawn over the slot in screen space. */
.bx-flashbox { position: absolute; border-radius: 6px; background: var(--edit); opacity: 0; animation: bx-flashbox var(--m-flash) ease-out both; }
@keyframes bx-flashbox { from { opacity: var(--edit-flash); } to { opacity: 0; } }
.bx-reveal { position: absolute; inset: 0; animation: bx-reveal 1350ms linear both; }
.bx-reveal i { position: absolute; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--edit); }
/* 200ms in (ease-out), 900ms held, 250ms out (SPEC §6.3). */
@keyframes bx-reveal { 0% { opacity: 0; animation-timing-function: ease-out; } 14.8% { opacity: 1; } 81.5% { opacity: 1; } 100% { opacity: 0; } }

/* ---- the edit system on the mock ------------------------------------------- */
/* A slot's LINE is its outline (it never moves a glyph and follows the radius),
 * its TINT is the opacity of its ::before, and on a coarse pointer its ::after
 * stretches the hit area to 44px as rendered. Widths are divided by the zoom. */
.bx-slot {
  --bx-lw: calc(1.5px / var(--bx-z));
  --bx-lc: var(--edit-rest);
  --bx-lo: 4px;
  --bx-tint: var(--bx-a-rest);
  --bx-reach: 0px;
  position: relative; isolation: isolate; cursor: pointer; border-radius: 6px;
  outline: var(--bx-lw) solid var(--bx-lc); outline-offset: var(--bx-lo);
  transition: outline-color 120ms ease-out;
}
.bx-slot::before {
  content: ""; position: absolute; inset: calc(-1 * var(--bx-lo)); z-index: -1; border-radius: inherit;
  background: var(--edit); opacity: var(--bx-tint); pointer-events: none;
  transition: opacity 120ms ease-out;
}
/* Under the slot's own content (z-index -1 inside its isolated stack): the extra reach takes a tap the
 * content does not, and never covers a team chip or the caret of the field being typed in. Each axis reaches
 * only as far as makes the target --bx-reach as rendered (a percentage of the slot's own size, per axis), so
 * a wide name grows only up and down and a neighbour loses no more of its own reach than it must. */
.bx-slot::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--bx-reach)) / 2)); z-index: -1; }
.bx-slot:focus-visible { outline: var(--bx-lw) solid var(--bx-lc); outline-offset: var(--bx-lo); }
.bx-slot[data-kind="text"][data-state="empty"] { --bx-lc: var(--edit); --bx-tint: var(--bx-a-tint); }
.bx-slot[data-kind="graphic"], .bx-slot[data-kind="photos"] { --bx-lo: calc(-1 * var(--bx-lw)); border-radius: 8px; }
.bx-slot[data-kind="graphic"][data-state="empty"] { outline-color: transparent; --bx-tint: var(--bx-a-graphic); }
.bx-slot[data-kind="graphic"][data-ghost] { outline-color: transparent; --bx-tint: var(--bx-a-graphic); }
@media (hover: hover) and (pointer: fine) {
  .bx-slot:hover { --bx-lw: calc(2px / var(--bx-z)); --bx-lc: var(--edit); --bx-tint: calc(var(--bx-a-rest) + var(--edit-hover)); transition: none; }
  .bx-slot:hover::before { transition: none; }
  .bx-slot[data-kind="text"][data-state="empty"]:hover { --bx-tint: calc(var(--bx-a-tint) + var(--edit-hover)); }
  .bx-slot[data-kind="graphic"][data-state="empty"]:hover, .bx-slot[data-kind="graphic"][data-ghost]:hover { outline-color: transparent; --bx-tint: calc(var(--bx-a-graphic) + var(--edit-hover)); }
  .bx-slot[data-kind="text"] { cursor: text; }
}
/* Selected or being typed in: the overlay draws the ring, so the slot's own line and tint step aside. */
.bx-slot[data-on] { outline-color: transparent; --bx-tint: 0; }
.bx-slot.bx-drag { --bx-lw: calc(3px / var(--bx-z)); --bx-lo: calc(-3px / var(--bx-z)); outline-color: var(--edit) !important; --bx-tint: var(--edit-drag) !important; }
/* A coarse pointer: every slot is a 44px target where it is drawn (D36): 46 here, so rounding never takes it under. */
@media (pointer: coarse) {
  .bx-slot { --bx-reach: calc(46px / var(--bx-z)); }
}
.bx-ghost { opacity: .4; }
.bx-dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bx-dash rect { fill: none; stroke: var(--edit); stroke-width: calc(4px / var(--bx-z)); stroke-dasharray: calc(6px / var(--bx-z)) calc(4px / var(--bx-z)); }
.bx-plus {
  display: grid; place-items: center; width: calc(44 * var(--bx-u)); height: calc(44 * var(--bx-u)); border-radius: 50%;
  background: rgba(34, 197, 94, .16); color: var(--edit-mint);
}
.bx-plus svg { width: calc(24 * var(--bx-u)); height: calc(24 * var(--bx-u)); stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.bx-empty-cap { font: 600 calc(14 * var(--bx-u))/1.2 var(--bx-font-ui); color: #E6F9EC; text-align: center; letter-spacing: 0; text-transform: none; }
.bx-droplabel { display: none; position: absolute; inset: 0; z-index: 2; place-items: center; font: 600 calc(14 * var(--bx-u))/1.2 var(--bx-font-ui); color: #FFFFFF; text-align: center; }
.bx-slot.bx-drag .bx-droplabel { display: grid; }
.bx-slot.bx-drag > :not(.bx-droplabel):not(.bx-dash) { opacity: .25; }
.bx-in-graphic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--bx-u)); padding: 6%; }
/* A graphic is contained and centred in its slot, never cropped and never past its edge (SPEC §6.8 Fit). */
.bx-in-graphic > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; animation: bx-fade-in var(--m-crossfade) ease-out both; }
.bx-in-graphic > svg.bx-mono-svg { display: block; width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; }
.bx-ghostcap { font: 600 calc(12 * var(--bx-u))/1.25 var(--bx-font-ui); color: #E6F9EC; text-align: center; max-width: 92%; }
.bx-skel { position: absolute; inset: 8%; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: bx-shimmer 1200ms linear infinite; }
@keyframes bx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* The sample regions: mock constants, never green (SPEC §6.12). */
[data-sample] { position: relative; }
.bx-sample {
  appearance: none; position: absolute; z-index: 3; top: calc(8 * var(--bx-u)); left: calc(8 * var(--bx-u));
  height: calc(18 * var(--bx-u)); padding: 0 calc(7 * var(--bx-u)); border: 0; border-radius: 999px; cursor: pointer;
  font: 600 calc(11 * var(--bx-u))/calc(18 * var(--bx-u)) var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--bx-ink-2); background: color-mix(in srgb, var(--bx-paper) 70%, transparent);
}
.bx-sample::after { content: ""; position: absolute; inset: calc(-3 * var(--bx-u)) calc(-2 * var(--bx-u)); }
@media (pointer: coarse) { .bx-sample::after { inset: calc(-13 * var(--bx-u)) calc(-6 * var(--bx-u)); } }
.bx-ticker .bx-sample { position: relative; top: auto; left: auto; flex: none; }

/* ---- the masthead, on every page ----------------------------------------- */
.bx-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; height: 62px; padding: 0 20px; background: rgba(11, 11, 13, .92); border-bottom: 1px solid var(--club-line); }
.bx-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.bx-navmark { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 8px; }
.bx-navmark .bx-in-graphic { padding: 8%; }
.bx-navmark .bx-plus { width: 60%; height: 60%; background: transparent; }
.bx-navmark .bx-plus svg { width: 100%; height: 100%; }
.bx-mono-svg { display: block; width: 100%; height: 100%; }
.bx-word { --bx-lo: 4px; display: inline-block; max-width: 420px; font: 400 20px/1.1 var(--bx-display); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
/* The ellipsis clips the words, not the slot: on the slot it cut the slot's own tint and reach, and Anton's ink,
 * which hangs a pixel past its advance (a D read as an O). 2px of padding the margin gives back holds the ink. */
.bx-word > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: inherit; padding-inline: 2px; margin-inline: -2px; }
.bx-word.bx-long { font-size: 14px; white-space: normal; line-height: 1.05; }
.bx-links { --bx-lo: 6px; display: flex; gap: 20px; margin-left: auto; font: 600 14px/1 var(--bx-tight); letter-spacing: .09em; text-transform: uppercase; color: #A7ABB3; }
.bx-links i { font-style: normal; white-space: nowrap; }
.bx-links i[aria-current="page"] { color: var(--club-ink); box-shadow: 0 14px 0 -11px var(--club-primary); }
.bx-root:not([data-pages]) .bx-mock [data-slot="pages"] { outline: none; cursor: default; isolation: auto; }
.bx-root:not([data-pages]) .bx-mock [data-slot="pages"]::before { display: none; }
.bx-season { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex: none; }
.bx-season small { font: 600 10px/1 var(--bx-tight); letter-spacing: .18em; text-transform: uppercase; color: #7A7E87; }
.bx-season b { --bx-lo: 3px; display: inline-block; font: 400 15px/1.1 var(--bx-display); text-transform: uppercase; white-space: nowrap; font-weight: 400; }
.bx-burger { display: none; margin-left: auto; font: 600 13px/1 var(--bx-tight); letter-spacing: .16em; text-transform: uppercase; }

.bx-ticker { display: flex; gap: 20px; align-items: center; height: 40px; padding: 0 16px; overflow: hidden; background: rgba(0, 0, 0, .55); border-bottom: 1px solid var(--club-line); white-space: nowrap; cursor: default; }
.bx-ticker span { display: inline-flex; align-items: baseline; gap: 7px; }
.bx-ticker small { font: 600 11px/1 var(--bx-tight); letter-spacing: .16em; text-transform: uppercase; color: #7A7E87; }
.bx-ticker b { font: 600 13px/1 var(--bx-tight); letter-spacing: .1em; }
.bx-ticker b.w { color: #4CB871; }
.bx-ticker b.l { color: #D9534F; }
.bx-ticker i { font: 600 13px/1 var(--bx-tight); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }

/* ---- the home hero ---------------------------------------------------------- */
.bx-page[hidden] { display: none; }
.bx-hero { position: relative; min-height: 620px; display: grid; background: linear-gradient(180deg, var(--club-deep), var(--club-paper)); overflow: hidden; }
.bx-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.bx-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
/* What the site draws behind the hero with no photos on the Field ground: the
 * page header's picture (or the mark on the dark color), covering, blurred and
 * dimmed — hero-bg.webp is a 14px blur at .38 brightness (scripts/client-art.py). */
.bx-hero-bg .bx-atmos { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; opacity: 1; filter: blur(14px) brightness(.38); transition: none; }
.bx-atmos-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: blur(14px) brightness(.38); }
.bx-atmos-mark > img, .bx-atmos-mark > svg { display: block; width: auto; height: 46%; max-width: 46%; object-fit: contain; }
.bx-band .bx-atmos-mark { filter: blur(12px) brightness(.34); }
.bx-band .bx-atmos-mark > img, .bx-band .bx-atmos-mark > svg { height: 64%; }
.bx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 30%, var(--club-glow), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .72)); }
.bx-hero[data-ground="pinstripe"] { background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(244, 243, 240, .07) 22px 24px), linear-gradient(180deg, var(--club-deep), var(--club-paper)); }
.bx-hero[data-ground="diamond"] { background-color: var(--club-deep); background-size: cover; background-position: center bottom; }
.bx-hero[data-ground="stripes"], .bx-hero[data-ground="infield"], .bx-hero[data-ground="lights"] { background-color: var(--club-deep); background-size: cover; background-position: center; background-blend-mode: luminosity; }
/* One column no wider than the hero: a wide graphic in the lettering (3:1, 1500px) otherwise stretched it past a phone. */
.bx-hero-ink { position: relative; z-index: 1; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding: 64px 40px 56px; text-align: center; }
.bx-hero-edit {
  --bx-lo: calc(-1 * var(--bx-lw)); --bx-tint: 0;
  position: absolute; z-index: 3; top: calc(16 * var(--bx-u)); right: calc(16 * var(--bx-u));
  display: inline-flex; align-items: center; gap: calc(6 * var(--bx-u)); height: calc(32 * var(--bx-u)); padding: 0 calc(14 * var(--bx-u)) 0 calc(11 * var(--bx-u));
  border-radius: 999px; background: rgba(11, 11, 13, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 calc(13 * var(--bx-u))/1 var(--bx-font-ui); color: #F4F3F0; white-space: nowrap;
}
.bx-hero-edit svg { width: calc(16 * var(--bx-u)); height: calc(16 * var(--bx-u)); stroke: var(--edit-mint); fill: none; stroke-width: 2; stroke-linecap: round; }
/* The hero logo: a 200px box to drop a graphic in while empty, the graphic contained while filled. */
.bx-heromark { display: grid; place-items: center; width: 200px; height: 200px; }
.bx-heromark[data-state="filled"] { width: 320px; height: 220px; }
.bx-heromark[data-state="filled"].bx-initials { width: 220px; height: 220px; border-radius: 50%; }
.bx-heromark .bx-in-graphic { padding: 8%; }
/* The lettering: the drawn lockup, with its three parts laid over it as slots. */
.bx-lockup { position: relative; width: min(680px, 100%); }
/* The drawing sits over its parts (taps pass through it), so a part's green tint and hover show around the letters
 * and never wash over the club's own colors; the part being typed in comes up over it for its caret. */
.bx-lockup-art { position: relative; z-index: 1; pointer-events: none; }
.bx-lockup-art svg { display: block; width: 100%; height: auto; }
.bx-heroname img { display: block; }
.bx-parts { position: absolute; inset: 0; }
.bx-part { --bx-lo: 2px; position: absolute; display: block; border-radius: 6px; }
.bx-part.bx-editing { z-index: 2; }
.bx-part .bx-inline { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; text-align: center; color: transparent; }
.bx-addpart {
  --bx-lo: 2px; position: absolute; left: 50%; display: inline-flex; align-items: center; height: calc(28 * var(--bx-u)); padding: 0 calc(12 * var(--bx-u));
  transform: translateX(-50%); border-radius: 999px; white-space: nowrap;
  font: 600 calc(13 * var(--bx-u))/1 var(--bx-font-ui); color: #E6F9EC;
}
/* Just left of the big word, level with its top and its bottom (builder.js writes where the word is): above and
 * below the lettering they sat on the hero logo, the name chip and the buttons. The desk page has 300px of hero
 * either side of it; a phone page shows none (the sheet's part switch adds them there). */
.bx-addpart[data-slot="eyebrow"] { top: var(--bx-wt, 0%); }
.bx-addpart[data-slot="tag"] { top: calc(var(--bx-wb, 100%) - 28 * var(--bx-u)); }
.bx-addpart[data-slot] { left: auto; right: calc(100% - var(--bx-wl, 0%) + 16 * var(--bx-u)); transform: none; }
.bx-addpart .bx-inline { font: inherit; color: var(--club-ink); text-align: center; min-width: 10ch; }
.bx-heroname { position: relative; width: min(680px, 100%); aspect-ratio: 1600 / 430; display: grid; place-items: center; }
/* Contained in the lettering's own box (SPEC §6.8 Fit), whatever its shape: sized by percentages of a box whose
 * height came from its content, a 4:3 graphic grew the box (and its ring) to its own height. */
.bx-heroname img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
/* First run: the hero holds one box, the club's name, at lettering size. */
.bx-namebox { --bx-lo: 6px; width: min(680px, 100%); min-height: 132px; display: grid; place-items: center; padding: 18px 24px; font: 400 64px/1.05 var(--bx-display); text-transform: uppercase; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.bx-namebox .bx-inline { width: 100%; text-align: center; }
.bx-namebox.bx-leaving { animation: bx-fade-out var(--m-crossfade) ease-out both; }
.bx-lockup.bx-arriving { animation: bx-fade-in var(--m-crossfade) ease-out both; }
@keyframes bx-fade-in { from { opacity: 0; } }
@keyframes bx-fade-out { to { opacity: 0; } }
.bx-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bx-btn { padding: 15px 26px; border: 1px solid var(--club-line); border-radius: 4px; font: 600 14px/1 var(--bx-tight); letter-spacing: .16em; text-transform: uppercase; }
.bx-btn-solid { background: var(--club-primary); border-color: var(--club-primary); }
.bx-cta [data-page] { cursor: pointer; }
/* The hero line as a club's site sets it: one small line under the buttons
 * (assets/site.css `.hero-content .tagline`, 17px over 58ch). */
.bx-tagline { --bx-lo: 4px; margin: 0; max-width: 58ch; min-width: 12ch; font: 400 17px/1.5 var(--bx-body); color: #C9CCD2; }
.bx-badges { --bx-lo: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 26px; }
.bx-badges span { padding: 6px 11px; border: 1px solid var(--club-line); border-radius: 999px; font: 600 12px/1 var(--bx-tight); letter-spacing: .14em; text-transform: uppercase; color: #C9CCD2; }
.bx-badges .bx-addchip { border-style: solid; border-color: transparent; color: #E6F9EC; letter-spacing: 0; text-transform: none; font: 600 calc(13 * var(--bx-u))/1 var(--bx-font-ui); padding: calc(6 * var(--bx-u)) calc(10 * var(--bx-u)); }
.bx-strap { display: flex; align-items: baseline; gap: 12px; padding: 22px 40px; border-top: 1px solid var(--club-line); }
/* In the flow, ahead of NEXT UP: pinned at a fixed spot it kept its size as the strap scaled down and covered it. */
.bx-strap .bx-sample { position: relative; top: auto; left: auto; flex: none; align-self: center; }
.bx-strap span { font: 600 11px/1 var(--bx-tight); letter-spacing: .18em; text-transform: uppercase; color: var(--club-primary); filter: brightness(1.6); }
.bx-strap b { font: 400 22px/1 var(--bx-display); font-weight: 400; }

/* ---- roster and calendar ---------------------------------------------------- */
.bx-band { --bx-lo: calc(-1 * var(--bx-lw)); position: relative; display: grid; place-items: center; height: 220px; overflow: hidden; border-radius: 0; background: var(--club-deep); }
.bx-band-bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(12px) brightness(.34); }
.bx-band h2 { position: relative; margin: 0; font: 400 52px/1 var(--bx-display); text-transform: uppercase; }
.bx-band .bx-dash { border-radius: 0; }
.bx-band-add {
  position: absolute; z-index: 2; right: calc(16 * var(--bx-u)); bottom: calc(16 * var(--bx-u));
  display: inline-flex; align-items: center; gap: calc(6 * var(--bx-u)); height: calc(32 * var(--bx-u)); padding: 0 calc(14 * var(--bx-u)) 0 calc(11 * var(--bx-u));
  border-radius: 999px; background: rgba(11, 11, 13, .62); font: 600 calc(13 * var(--bx-u))/1 var(--bx-font-ui); color: #F4F3F0; white-space: nowrap;
}
.bx-band-add svg { width: calc(16 * var(--bx-u)); height: calc(16 * var(--bx-u)); stroke: var(--edit-mint); fill: none; stroke-width: 2; stroke-linecap: round; }
.bx-band .bx-ghostcap { position: absolute; left: 0; right: 0; bottom: calc(56 * var(--bx-u)); }
/* Over the sample grid that follows it (and its SAMPLE tag), so the reach of its chips on a phone is not covered. */
.bx-squads { z-index: 4; --bx-lo: 6px; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 40px 0; padding: 0; width: fit-content; max-width: calc(100% - 80px); border-radius: 8px; }
.bx-team { appearance: none; position: relative; display: inline-flex; padding: 9px 14px; border: 1px solid var(--club-line); border-radius: 999px; background: transparent; cursor: pointer; font: 600 12px/1 var(--bx-tight) !important; letter-spacing: .14em; text-transform: uppercase; color: #C9CCD2 !important; white-space: nowrap; max-width: 220px; }
.bx-team > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bx-team::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--bx-team-reach, 0px)) / 2)); }
.bx-team.on { background: var(--club-deep); border-color: var(--club-primary); color: var(--club-ink) !important; }
.bx-team.bx-addchip { border-color: transparent; letter-spacing: 0; text-transform: none; font: 600 calc(13 * var(--bx-u))/1 var(--bx-font-ui) !important; color: #E6F9EC !important; }
.bx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 40px 40px 22px; }
.bx-grid > div { padding: 18px; border: 1px solid var(--club-line); border-radius: 8px; background: linear-gradient(180deg, var(--club-deep), transparent); }
.bx-grid b { display: block; font: 400 30px/1 var(--bx-display); font-weight: 400; }
.bx-grid small { display: block; margin-top: 6px; font: 600 11px/1 var(--bx-tight); letter-spacing: .14em; text-transform: uppercase; color: #A7ABB3; }
.bx-rows { padding: 44px 40px 40px; }
.bx-rows > div { display: grid; grid-template-columns: 90px 1fr 90px 90px; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--club-line); }
.bx-rows b { font: 400 20px/1 var(--bx-display); font-weight: 400; }
.bx-rows span { font-size: 16px; }
.bx-rows small { font: 600 11px/1 var(--bx-tight); letter-spacing: .14em; text-transform: uppercase; color: #A7ABB3; }
.bx-rows i { font: 600 13px/1 var(--bx-tight); font-style: normal; letter-spacing: .1em; text-align: right; }
.bx-rows i.w { color: #4CB871; }
.bx-rows i.l { color: #D9534F; }
.bx-fine { margin: 0; padding: 0 40px 36px; font-size: 13px; line-height: 1.45; color: #7A7E87; }

/* ---- the footer, on every page ---------------------------------------------- */
.bx-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 36px 40px 28px; background: var(--club-deep); border-top: 1px solid var(--club-line); }
.bx-foot .bx-navmark { grid-row: 1 / span 2; width: 44px; height: 44px; }
.bx-foot-name { --bx-lo: 3px; justify-self: start; max-width: 100%; font: 400 22px/1.1 var(--bx-display); font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; }
.bx-foot-line { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; font: 400 15px/1.4 var(--bx-body); color: #A7ABB3; }
.bx-foot-line > [data-slot] { --bx-lo: 3px; color: #C9CCD2; }
.bx-foot-season { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; gap: 8px; align-items: baseline; font: 600 11px/1 var(--bx-tight); letter-spacing: .16em; text-transform: uppercase; color: #7A7E87; }
.bx-foot-season b { --bx-lo: 3px; font: 400 15px/1.1 var(--bx-display); letter-spacing: 0; color: var(--club-ink); font-weight: 400; }
.bx-foot-links { grid-column: 3; grid-row: 2; display: flex; gap: 16px; justify-self: end; font: 600 12px/1 var(--bx-tight); letter-spacing: .12em; text-transform: uppercase; color: #A7ABB3; }
.bx-foot-links i { font-style: normal; }
.bx-foot-copy { grid-column: 1 / -1; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--club-line); font: 400 13px/1.4 var(--bx-body); color: #7A7E87; }

/* ---- the phone view of the mock ----------------------------------------------- */
.bx-root[data-view="phone"] .bx-links,
.bx-root[data-view="phone"] .bx-season { display: none; }
.bx-root[data-view="phone"] .bx-burger { display: inline-block; }
.bx-root[data-view="phone"] .bx-nav { height: 56px; padding: 0 14px; gap: 12px; }
.bx-root[data-view="phone"] .bx-navmark { width: 36px; height: 36px; }
.bx-root[data-view="phone"] .bx-word { font-size: 18px; max-width: 210px; }
.bx-root[data-view="phone"] .bx-word.bx-long { font-size: 13px; white-space: nowrap; }
.bx-root[data-view="phone"] .bx-hero { min-height: 560px; }
.bx-root[data-view="phone"] .bx-hero-ink { padding: 56px 18px 36px; gap: 16px; }
.bx-root[data-view="phone"] .bx-heromark { width: 128px; height: 128px; }
.bx-root[data-view="phone"] .bx-heromark[data-state="filled"] { width: 200px; height: 128px; }
.bx-root[data-view="phone"] .bx-heromark[data-state="filled"].bx-initials { width: 128px; height: 128px; }
.bx-root[data-view="phone"] .bx-namebox { font-size: 36px; min-height: 88px; padding: 14px 16px; }
.bx-root[data-view="phone"] .bx-tagline { font-size: 15px; line-height: 1.45; max-width: 36ch; }
.bx-root[data-view="phone"] .bx-strap { flex-direction: column; gap: 6px; padding: 18px 18px 18px 18px; }
.bx-root[data-view="phone"] .bx-strap .bx-sample { position: relative; top: auto; left: auto; transform: none; align-self: flex-start; margin-bottom: 4px; }
.bx-root[data-view="phone"] .bx-strap b { font-size: 18px; }
.bx-root[data-view="phone"] .bx-cta { flex-direction: column; align-self: stretch; }
.bx-root[data-view="phone"] .bx-btn { text-align: center; }
.bx-root[data-view="phone"] .bx-band { height: 140px; }
.bx-root[data-view="phone"] .bx-band h2 { font-size: 34px; }
.bx-root[data-view="phone"] .bx-squads { margin: 18px 18px 0; max-width: calc(100% - 36px); }
.bx-root[data-view="phone"] .bx-grid,
.bx-root[data-view="phone"] .bx-rows,
.bx-root[data-view="phone"] .bx-fine { padding-left: 18px; padding-right: 18px; }
.bx-root[data-view="phone"] .bx-grid { grid-template-columns: repeat(2, 1fr); padding-top: 34px; }
.bx-root[data-view="phone"] .bx-rows { padding-top: 38px; }
.bx-root[data-view="phone"] .bx-rows > div { grid-template-columns: 62px 1fr 74px; }
.bx-root[data-view="phone"] .bx-rows small { display: none; }
/* The phone footer: the name beside its logo, then the town and the season each on a row of its own, 46px apart,
 * so each is a whole 44px target that no neighbour's reach covers (the season used to sit under the town's). */
.bx-root[data-view="phone"] .bx-foot { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 20px 18px 24px; }
.bx-root[data-view="phone"] .bx-foot .bx-navmark { grid-row: 1; width: 36px; height: 36px; }
.bx-root[data-view="phone"] .bx-foot-name { grid-column: 2; grid-row: 1; align-self: center; }
.bx-root[data-view="phone"] .bx-foot > .bx-navmark { margin: 5px 0; }
.bx-root[data-view="phone"] .bx-foot-line { grid-column: 2; grid-row: 2; min-height: 46px; align-items: center; }
.bx-root[data-view="phone"] .bx-foot-season { grid-column: 2; grid-row: 3; min-height: 46px; justify-self: start; align-items: center; }
.bx-root[data-view="phone"] .bx-foot-links { grid-column: 1 / -1; grid-row: auto; justify-self: start; flex-wrap: wrap; margin-top: 10px; }
.bx-root[data-view="phone"] .bx-badges { margin-top: 8px; }

/* ---- the sheet: one container, a popover on a wide fine-pointer stage and a
 *      bottom sheet everywhere else (SPEC §6.10) ----------------------------- */
.bx-sheet {
  position: absolute; z-index: 40; top: 0; left: 0; width: 320px; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--bx-paper); color: var(--bx-ink); border-radius: 12px;
  box-shadow: var(--bx-shadow-2), 0 0 0 1px var(--bx-line);
  font: 400 15px/1.45 var(--bx-font-ui);
  transform-origin: var(--bx-origin, 50% 0);
}
.bx-sheet[data-wide] { width: 360px; }
.bx-sheet.bx-in { animation: bx-pop-in var(--m-pop-in) var(--m-in-ease) both; }
.bx-sheet.bx-out { animation: bx-pop-out var(--m-pop-out) var(--m-out-ease) both; pointer-events: none; }
.bx-sheet.bx-swap .bx-sh-body { animation: bx-fade-in 120ms ease-out both; }
@keyframes bx-pop-in { from { opacity: 0; transform: scale(.96); } }
@keyframes bx-pop-out { to { opacity: 0; transform: scale(.96); } }
.bx-arrow { position: absolute; width: 12px; height: 12px; background: var(--bx-paper); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--bx-line); pointer-events: none; }
.bx-arrow::after { content: ""; position: absolute; inset: -1px; background: var(--bx-paper); }
.bx-sheet[data-side="below"] .bx-arrow { top: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bx-sheet[data-side="above"] .bx-arrow { bottom: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bx-sheet[data-side="right"] .bx-arrow { left: -6px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.bx-sheet[data-side="left"] .bx-arrow { right: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bx-sh-grab { display: none; }
.bx-sh-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 76px 4px 16px; flex: none; }
.bx-sh-title { margin: 0; font: 600 12px/1.2 var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--bx-ink-2); }
.bx-done {
  position: absolute; top: 8px; right: 8px;
  appearance: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 14px/1 var(--bx-font-ui); color: var(--bx-ink);
}
.bx-done:hover { background: var(--bx-floor); }
/* The way back from a page of the sheet (a phone's Style & typeface). */
.bx-sh-back { appearance: none; display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -8px 0 -12px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--bx-ink); cursor: pointer; }
.bx-sh-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bx-sheet:focus { outline: none; }
.bx-sh-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; min-height: 0; }
/* Rows keep their size and the body scrolls: a short popover squashed the 48px Upload button to a sliver. */
.bx-sh-body > *, .bx-sh-body .bx-live > * { flex-shrink: 0; }
.bx-sh-sub { margin: -8px 0 0; font-size: 13px; line-height: 1.45; color: var(--bx-ink-2); }
.bx-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bx-ink-2); }
.bx-note.bx-warn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: #B45309; }
.bx-err { margin: 0; font-size: 13px; line-height: 1.45; color: #9F1C1C; }
.bx-group { display: flex; flex-direction: column; gap: 8px; }
.bx-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; }
.bx-label { margin: 0; font: 600 11px/1.2 var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--bx-ink-2); }
.bx-hide { appearance: none; position: relative; width: 32px; height: 32px; margin: -8px -8px -8px 0; border: 0; border-radius: 8px; background: transparent; color: var(--bx-ink-2); cursor: pointer; display: grid; place-items: center; }
.bx-hide svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.bx-hide:hover { background: var(--bx-floor); color: var(--bx-ink); }
.bx-chipgroups { display: flex; flex-direction: column; gap: 14px; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-chip {
  appearance: none; position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  height: 32px; padding: 0 12px; border: 1px solid var(--bx-line); border-radius: 8px; background: var(--bx-paper); cursor: pointer;
  font: 500 15px/1 var(--bx-font-ui); color: var(--bx-ink); white-space: nowrap;
  transition: transform var(--m-press) ease-out;
}
/* The words clip, not the chip: clipped on the chip, the ellipsis cut its own 44px reach to the chip's 32 or 36. */
.bx-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bx-chip::after { content: ""; position: absolute; inset: -6px 0; }
.bx-chip:active { transform: scale(.97); }
.bx-chip[aria-selected="true"], .bx-chip.on { border-color: var(--bx-ink); box-shadow: inset 0 0 0 1px var(--bx-ink); }
@media (hover: hover) and (pointer: fine) { .bx-chip:hover { border-color: var(--bx-ink-2); } }
.bx-chip-face { font-family: var(--bx-chip-face, inherit); }
.bx-quiet { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bx-ink-2); }
.bx-primary {
  appearance: none; width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--bx-ink); color: var(--bx-paper); font: 600 15px/1 var(--bx-font-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform var(--m-press) ease-out;
}
.bx-primary svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bx-primary:active { transform: scale(.98); }
.bx-secondary { appearance: none; height: 36px; padding: 0 14px; border: 1px solid var(--bx-line); border-radius: 9px; background: var(--bx-paper); cursor: pointer; font: 600 14px/1 var(--bx-font-ui); color: var(--bx-ink); flex: none; }
.bx-secondary:hover { border-color: var(--bx-ink-2); }
.bx-textbtn { appearance: none; position: relative; padding: 0; border: 0; background: none; cursor: pointer; font: 600 14px/1.4 var(--bx-font-ui); color: var(--bx-ink); text-decoration: underline; text-decoration-color: var(--bx-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bx-textbtn::after { content: ""; position: absolute; inset: -10px -4px; }
.bx-textbtn:hover { text-decoration-color: currentColor; }
.bx-textbtn.bx-danger { color: #9F1C1C; }
.bx-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.bx-row.bx-between { justify-content: space-between; flex-wrap: nowrap; }
.bx-sep { height: 1px; margin: 0; border: 0; background: var(--bx-line); }
.bx-follow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--bx-line); font-size: 13px; color: var(--bx-ink-2); }
.bx-follow b { color: var(--bx-ink); font-weight: 600; }

/* A field in the sheet: 16px, always (the phone's own zoom stays shut). */
.bx-field { display: flex; flex-direction: column; gap: 6px; }
.bx-field > span { font: 600 11px/1.2 var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--bx-ink-2); }
.bx-field input, .bx-field select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--bx-ink-2); border-radius: 9px;
  background: var(--bx-paper); color: var(--bx-ink); font: 400 16px/1.2 var(--bx-font-ui);
}
.bx-field input:focus, .bx-field select:focus { outline: 2px solid var(--bx-ink); outline-offset: 1px; }
.bx-count { font-size: 12px; color: var(--bx-ink-2); }

/* The in-place input: the slot's own type, a caret, nothing else. */
.bx-inline {
  appearance: none; display: inline-block; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none !important;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  caret-color: var(--edit-mint); width: 100%; min-width: 1ch; max-width: 100%;
  field-sizing: content;
}
.bx-inline::placeholder { color: inherit; opacity: .4; }
.bx-inline::selection { background: rgba(34, 197, 94, .35); }
.bx-editing { cursor: text; }
.bx-tabhint { position: absolute; top: 50%; left: calc(100% + 8 * var(--bx-u)); transform: translateY(-50%); display: inline-grid; place-items: center; height: calc(20 * var(--bx-u)); padding: 0 calc(6 * var(--bx-u)); border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35); font: 600 calc(11 * var(--bx-u))/1 var(--bx-font-ui); letter-spacing: 0; text-transform: none; color: #E6F9EC; white-space: nowrap; pointer-events: none; }
/* "+ Line above" and "+ Tag" stand just left of the big word: their cap goes on their own left, not into the word. */
.bx-addpart .bx-tabhint { left: auto; right: calc(100% + 8 * var(--bx-u)); }
/* At the pane's right edge (the masthead's season) the cap goes under the slot's right end, clear of the name chip. */
.bx-tabhint.bx-tabhint-left { left: auto; right: 0; top: calc(100% + 10 * var(--bx-u)); transform: none; }

/* The tray and graphic tiles. */
.bx-tray { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-thumb {
  appearance: none; position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 4px;
  border: 1px solid var(--bx-line); border-radius: 10px; cursor: pointer; overflow: visible;
  background-color: #FFFFFF;
  background-image: conic-gradient(#E9E6E0 25%, transparent 0 50%, #E9E6E0 0 75%, transparent 0);
  background-size: 12px 12px;
}
.bx-thumb img, .bx-thumb svg { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 4px; }
.bx-thumb.on { border-color: var(--bx-ink); box-shadow: inset 0 0 0 1px var(--bx-ink); }
.bx-thumb.on::before { content: ""; position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bx-thumb-new { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; background: var(--bx-ink); color: var(--bx-paper); font: 600 10px/1.2 var(--bx-font-ui); white-space: nowrap; }
.bx-thumb-name { display: block; margin-top: 4px; font: 500 11px/1.2 var(--bx-font-ui); color: var(--bx-ink-2); text-align: center; }
/* Positioned, so a thumbnail's hover ✕ sits on its own corner and not on the popover's, where it read as Close. */
.bx-thumb-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.bx-del { appearance: none; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--bx-ink); color: var(--bx-paper); display: none; place-items: center; cursor: pointer; }
.bx-del svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .bx-thumb-wrap:hover .bx-del, .bx-thumb-wrap:focus-within .bx-del { display: grid; } }
.bx-markrow { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 4px 12px 4px 4px; border: 1px solid var(--bx-line); border-radius: 12px; background: var(--bx-paper); color: var(--bx-ink); cursor: pointer; text-align: left; font: 500 15px/1.3 var(--bx-font-ui); transition: transform var(--m-press) ease-out; }
.bx-markrow:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .bx-markrow:hover { border-color: var(--bx-ink-2); } }
.bx-fallback-art { display: grid; place-items: center; width: 100%; height: 100%; padding: 3px; background: var(--club-deep); }
.bx-fallback-art svg { width: 100%; height: auto; }
.bx-markrow .bx-thumb { flex: none; background: var(--club-deep); border-color: transparent; border-radius: 50%; padding: 0; }
.bx-fallback { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bx-floor); }
.bx-fallback > span:first-child { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #17191D; display: grid; place-items: center; }
.bx-fallback > span:first-child img, .bx-fallback > span:first-child svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.bx-fallback p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--bx-ink-2); }
.bx-fallback p b { display: block; color: var(--bx-ink); font-weight: 600; }

/* Segmented choices inside a sheet. */
.bx-choice { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bx-floor); align-self: flex-start; }
.bx-choice button { appearance: none; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font: 600 13px/1 var(--bx-font-ui); color: var(--bx-ink-2); }
.bx-choice button[aria-pressed="true"] { background: var(--bx-paper); color: var(--bx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--bx-line); }

/* The lettering's finishes and typefaces, each drawn in the club's own word. */
.bx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bx-tile { appearance: none; display: grid; gap: 4px; justify-items: center; padding: 4px 4px 6px; border: 1px solid var(--bx-line); border-radius: 9px; background: var(--bx-paper); cursor: pointer; }
.bx-tile.on { border-color: var(--bx-ink); box-shadow: inset 0 0 0 1px var(--bx-ink); }
.bx-tile-art { display: block; width: 100%; height: 48px; border-radius: 6px; overflow: hidden; background: var(--club-deep); }
.bx-tile-art svg { display: block; width: 100%; height: 100%; }
.bx-tile small { font: 500 12px/1.2 var(--bx-font-ui); color: var(--bx-ink-2); }
.bx-faces { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.bx-face { appearance: none; flex: none; width: 88px; display: grid; gap: 4px; justify-items: center; padding: 4px 4px 6px; border: 1px solid var(--bx-line); border-radius: 9px; background: var(--bx-paper); cursor: pointer; scroll-snap-align: start; }
.bx-face.on { border-color: var(--bx-ink); box-shadow: inset 0 0 0 1px var(--bx-ink); }
.bx-face-art { display: grid; place-items: center; width: 100%; height: 48px; overflow: hidden; white-space: nowrap; border-radius: 6px; background: var(--club-deep); color: var(--club-ink); font-size: 22px; line-height: 1; font-weight: 400; }
/* A tile names its face only once it is in view inside an open lettering sheet (the JS adds .bx-live), so a shut sheet fetches no font. */
.bx-face.bx-live .bx-face-art { font-family: var(--bx-face); }
.bx-face small { font: 500 11px/1.2 var(--bx-font-ui); color: var(--bx-ink-2); }
.bx-grounds { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px 8px; }
.bx-ground { appearance: none; display: grid; gap: 4px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.bx-ground-art { display: block; width: 72px; height: 44px; border-radius: 8px; border: 1px solid var(--bx-line); background-color: var(--club-deep); background-image: linear-gradient(180deg, var(--club-deep), var(--club-paper)); background-size: cover; background-position: center; }
.bx-ground.on .bx-ground-art { border-color: var(--bx-ink); box-shadow: 0 0 0 2px var(--bx-ink); }
.bx-ground small { font: 500 12px/1.2 var(--bx-font-ui); color: var(--bx-ink-2); }
.bx-ground-art[data-ground="pinstripe"] { background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(244, 243, 240, .1) 5px 6px), linear-gradient(180deg, var(--club-deep), var(--club-paper)); }
.bx-ground-art[data-ground="stripes"], .bx-ground-art[data-ground="infield"], .bx-ground-art[data-ground="lights"] { background-blend-mode: luminosity; }
.bx-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-photo { position: relative; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--bx-floor); }
.bx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-photo .bx-del { display: grid; top: 4px; right: 4px; width: 20px; height: 20px; }

/* Colors. */
.bx-pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-presets { display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; }
.bx-pair { appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bx-line); border-radius: 10px; background: var(--bx-paper); cursor: pointer; }
.bx-pair i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bx-paper); }
.bx-pair i + i { margin-left: -4px; }
.bx-pair.on { border-color: var(--bx-ink); box-shadow: inset 0 0 0 1px var(--bx-ink); }
.bx-pair-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--bx-ink); color: var(--bx-paper); font: 500 12px/1.2 var(--bx-font-ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.bx-pair:hover .bx-pair-tip, .bx-pair:focus-visible .bx-pair-tip { opacity: 1; }
.bx-wells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-well { display: flex; flex-direction: column; gap: 6px; }
.bx-well > span { font: 600 11px/1.2 var(--bx-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--bx-ink-2); }
.bx-well-row { display: flex; gap: 8px; align-items: center; }
.bx-well input[type="color"] { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--bx-line); border-radius: 10px; background: var(--bx-paper); cursor: pointer; }
.bx-well input[type="text"] { min-width: 0; width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--bx-ink-2); border-radius: 9px; background: var(--bx-paper); color: var(--bx-ink); font: 400 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }

/* Switches (pages, apps). */
.bx-switches { display: flex; flex-direction: column; }
.bx-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--bx-line); cursor: pointer; font-size: 15px; }
.bx-switch:last-child { border-bottom: 0; }
.bx-switch input { appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--bx-line); cursor: pointer; transition: background-color 150ms; }
.bx-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 150ms var(--m-ring-ease); }
.bx-switch input:checked { background: var(--bx-ink); }
.bx-switch input:checked::after { transform: translateX(16px); }
.bx-switch.bx-locked { color: var(--bx-ink-2); cursor: default; }
.bx-switch.bx-locked small { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--bx-font-ui); }
.bx-switch.bx-locked svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Ages. */
.bx-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.bx-age { appearance: none; height: 44px; border: 1px solid var(--bx-line); border-radius: 10px; background: var(--bx-paper); cursor: pointer; font: 600 15px/1 var(--bx-font-ui); color: var(--bx-ink); }
.bx-age[aria-pressed="true"] { background: var(--bx-ink); border-color: var(--bx-ink); color: var(--bx-paper); }

/* The offers after an upload. */
.bx-offer { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bx-line); border-radius: 12px; }
.bx-offer p { margin: 0; font-weight: 600; font-size: 14px; }
.bx-befaft { display: flex; align-items: center; gap: 8px; }
.bx-befaft span { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background-color: #FFFFFF; background-image: conic-gradient(#E9E6E0 25%, transparent 0 50%, #E9E6E0 0 75%, transparent 0); background-size: 10px 10px; }
.bx-befaft img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bx-befaft svg.bx-arrowr { width: 16px; height: 16px; stroke: var(--bx-ink-2); fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---- the toast and the live line ------------------------------------------- */
.bx-toast {
  position: fixed; z-index: 60; left: 50%; bottom: var(--bx-toast-bottom, 24px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(560px, calc(100vw - 32px)); min-height: 44px; padding: 10px 10px 10px 16px;
  border-radius: 12px; background: var(--bx-ink); color: var(--bx-paper); box-shadow: var(--bx-shadow-2);
  font: 500 14px/1.35 var(--bx-font-ui);
  animation: bx-toast-in var(--m-toast-in) var(--m-in-ease) both;
}
.bx-toast.bx-out { animation: bx-toast-out var(--m-toast-out) var(--m-out-ease) both; }
.bx-toast button { appearance: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: inherit; cursor: pointer; font: 600 14px/1 var(--bx-font-ui); flex: none; }
.bx-toast button:hover { background: rgba(255, 255, 255, .22); }
/* On a phone with a sheet up, a toast that would cover the slot it is about is a row of the sheet under its header. */
.bx-sheet > .bx-toast.bx-toast-row {
  position: static; flex: none; transform: none; width: auto; max-width: none; margin: 0 16px 8px; min-height: 44px; padding: 4px 4px 4px 14px;
  border-radius: 10px; box-shadow: none; background: var(--bx-floor); color: var(--bx-ink); font-size: 14px;
  animation: bx-fade-in var(--m-toast-in) ease-out both;
}
.bx-sheet > .bx-toast.bx-toast-row button { height: 36px; background: var(--bx-paper); color: var(--bx-ink); box-shadow: 0 0 0 1px var(--bx-line); }
.bx-sheet > .bx-toast.bx-toast-row.bx-out { animation: bx-fade-out var(--m-toast-out) ease-out both; }
@keyframes bx-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes bx-toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }
/* Back to editing, pinned at the pane's top right (SPEC §6.6) as part of the frame's browser strip, so it never
 * covers the club's own menu (a small amendment: §6.6 drew it over the pane). With no strip (the phone view on a
 * desk) it sits on the floor beside the phone; a phone's own toolbar Preview button says it instead. */
.bx-back {
  appearance: none; position: absolute; z-index: 25; top: 3px; right: 8px; height: 26px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--bx-ink); color: var(--bx-paper); cursor: pointer;
  font: 600 12px/1 var(--bx-font-ui);
}
.bx-back::after { content: ""; position: absolute; inset: -3px -2px; }
.bx-root[data-view="phone"] .bx-back { top: 12px; right: 12px; height: 36px; padding: 0 14px; background: var(--bx-paper); color: var(--bx-ink); box-shadow: var(--bx-shadow-1), 0 0 0 1px var(--bx-line); font-size: 13px; }
.bx-upload { display: none; }
/* Room under the page while a bottom sheet is up (sized in builder.js), so the footer's slots scroll above it. */
.bx-room { pointer-events: none; }

/* ---- Preview: the published site, nothing of the edit system ---------------- */
.bx-root[data-preview] .bx-slot { outline: none !important; cursor: default; }
.bx-root[data-preview] .bx-slot::before, .bx-root[data-preview] .bx-slot::after { display: none; }
.bx-root[data-preview] .bx-sample, .bx-root[data-preview] .bx-dash, .bx-root[data-preview] .bx-plus,
.bx-root[data-preview] .bx-empty-cap, .bx-root[data-preview] .bx-ghostcap, .bx-root[data-preview] .bx-addchip,
.bx-root[data-preview] .bx-addpart, .bx-root[data-preview] .bx-hero-edit, .bx-root[data-preview] .bx-band-add,
.bx-root[data-preview] .bx-ghost, .bx-root[data-preview] .bx-overlay { display: none !important; }
.bx-root[data-preview] .bx-links i[data-page] { cursor: pointer; }
.bx-mock.bx-cross { animation: bx-fade-in 150ms ease-out both; }

/* ---- layout follows the root's width, never the pointer (D36) --------------- */
.bx-root[data-layout="tablet"] .bx-collapse .bx-lbl { display: none; }
.bx-root[data-layout="tablet"] .bx-collapse { width: 36px; padding: 0; }
/* Tablet takes the phone's page picker too: the three tabs (212px) and the host's least chrome ran ~70px past 768. */
.bx-root[data-layout="tablet"] .bx-tabs { display: none; }
.bx-root[data-layout="tablet"] .bx-pagepick { display: inline-block; }
/* A touch tablet's Undo and Redo are 44px: the toolbar's gaps give back what that takes (it ran 22px past 768). */
@media (pointer: coarse) { .bx-root[data-layout="tablet"] .bx-bar { gap: 4px; padding: 0 10px; } }
.bx-root[data-layout="phone"] .bx-bar { height: 52px; padding: 0 8px; gap: 4px; }
/* The phone toolbar, [Home ▾] ↶ ●● ◉ ⋯ (SPEC §6.16), has 304px at 320. Its regions take no room of their own: the start
 * region holds only the host's absolutely placed hint here, and as a box of 0px it still cost a gap. What the host puts
 * in them keeps its width; the spacer may close to the two gaps around it; the picker's padding is 6px tighter. */
.bx-root[data-layout="phone"] .bx-bar-region { display: contents; }
.bx-root[data-layout="phone"] .bx-bar-region > * { flex: none; }
.bx-root[data-layout="phone"] .bx-spacer { min-width: 0; }
.bx-root[data-layout="phone"] .bx-tabs, .bx-root[data-layout="phone"] .bx-devs, .bx-root[data-layout="phone"] .bx-bar-sep, .bx-root[data-layout="phone"] [data-bx="redo"] { display: none; }
.bx-root[data-layout="phone"] .bx-pagepick { display: inline-block; }
/* A field under 16px makes iPhone Safari zoom the page in on focus (SPEC §6.9). */
.bx-root[data-layout="phone"] .bx-pagepick select { height: 44px; font-size: 16px; padding: 0 26px 0 10px; }
.bx-root[data-layout="phone"] .bx-pagepick::after { right: 10px; }
.bx-root[data-layout="phone"] .bx-collapse .bx-lbl { display: none; }
.bx-root[data-layout="phone"] .bx-collapse { width: 44px; height: 44px; padding: 0; }
/* Previewing on a phone: the toolbar's Preview button says so in words and is the way back (the pinned pill would sit
 * on the club's own Menu); Undo and Colors step aside for it, as the rest of the edit system does. */
.bx-root[data-layout="phone"][data-preview] [data-bx="preview"] { width: auto; padding: 0 14px 0 12px; }
.bx-root[data-layout="phone"][data-preview] [data-bx="preview"] .bx-lbl { display: inline; }
.bx-root[data-layout="phone"][data-preview] [data-bx="undo"], .bx-root[data-layout="phone"][data-preview] [data-bx="colors"], .bx-root[data-layout="phone"] .bx-back { display: none; }
.bx-root[data-layout="phone"] .bx-floor { padding: 0; }
.bx-root[data-layout="phone"] .bx-frame { border: 0; border-radius: 0; box-shadow: none; }
.bx-root[data-layout="phone"] .bx-chrome { display: none; }
.bx-root[data-layout="phone"] .bx-pane { height: var(--bx-pane-h, max(360px, calc(100svh - var(--bx-above) - 64px - env(safe-area-inset-bottom)))); }

/* Compact: the phone layout or a coarse pointer gets the bottom sheet. */
.bx-root[data-compact] .bx-sheet {
  position: fixed; top: auto; left: 0; right: 0; bottom: var(--bx-kb, 0px); width: auto; max-width: 640px; margin: 0 auto;
  max-height: var(--bx-sheet-max, 50vh); border-radius: 16px 16px 0 0; transform-origin: 50% 100%;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18), 0 0 0 1px var(--bx-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bx-root[data-compact] .bx-sheet.bx-in { animation: bx-sheet-in var(--m-sheet-in) var(--m-in-ease) both; }
.bx-root[data-compact] .bx-sheet.bx-out { animation: bx-sheet-out var(--m-sheet-out) var(--m-out-ease) both; }
@keyframes bx-sheet-in { from { transform: translateY(100%); } }
@keyframes bx-sheet-out { to { transform: translateY(100%); } }
.bx-root[data-compact] .bx-arrow { display: none; }
.bx-root[data-compact] .bx-sh-grab { display: grid; place-items: center; height: 20px; flex: none; touch-action: none; cursor: grab; }
.bx-root[data-compact] .bx-sh-grab::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: var(--bx-line); }
.bx-root[data-compact] .bx-sh-head { min-height: 52px; padding: 0 88px 0 16px; touch-action: none; }
.bx-root[data-compact] .bx-done { top: 24px; right: 4px; height: 44px; padding: 0 16px; }

@media (pointer: coarse) {
  .bx-pagepick select { height: 44px; font-size: 16px; }
  .bx-ibtn { width: 44px; height: 44px; }
  .bx-chip { height: 36px; }
  .bx-chip::after { inset: -5px 0; }
  .bx-chips { gap: 10px 8px; }
  .bx-hide { width: 44px; height: 44px; margin: -14px -12px -14px 0; }
  .bx-thumb::after { content: ""; position: absolute; inset: -4px; }
  /* Every control in a sheet is a 44px target on a touch screen (SPEC §6.14), the team chips on the page too. */
  .bx-choice button, .bx-secondary { height: 44px; }
  .bx-textbtn::after { inset: -12px -4px; }
  .bx-toast button { position: relative; }
  .bx-toast button::after { content: ""; position: absolute; inset: -6px 0; }
  .bx-team { --bx-team-reach: calc(46px / var(--bx-z)); }
  .bx-squads { row-gap: 14px; }
}

/* ---- reduced motion: fades only, and the flash and reveal stay ------------- */
@media (prefers-reduced-motion: reduce) {
  .bx-ring, .bx-tagname { animation-name: bx-fade-in; animation-duration: 1ms; }
  .bx-sheet.bx-in, .bx-root[data-compact] .bx-sheet.bx-in { animation: bx-fade-in 150ms linear both; }
  .bx-sheet.bx-out, .bx-root[data-compact] .bx-sheet.bx-out { animation: bx-fade-out 150ms linear both; }
  .bx-toast, .bx-toast.bx-out { animation-name: bx-fade-in; }
  .bx-toast.bx-out { animation-name: bx-fade-out; }
  .bx-hero-bg img { transition: none; }
  .bx-skel { animation: none; }
  .bx-seg button:active, .bx-chip:active, .bx-primary:active, .bx-ibtn:active, .bx-tbtn:active { transform: none; }
}

/* ---- forced colors: rings fall back to their transparent outline ------------ */
@media (forced-colors: active) {
  .bx-ring { box-shadow: none; outline: 2px solid Highlight; }
  .bx-slot { outline-color: CanvasText !important; }
  .bx-plus svg, .bx-hero-edit svg, .bx-band-add svg { stroke: currentColor; }
  .bx-dash rect { stroke: CanvasText; }
}