/* ============================================================================
Commandery single stylesheet (app.css)
Loaded by every HTML page. Replaces the former three-file split
(shared.css, auth.css, style.css). See CLAUDE.md for the design system.
── @layer order ──
components : tokens (:root) + element resets ([hidden], html, body,
the universal reset) + all universal primitives +
auth-family components
page : main-app components (index.html — body.page-main scoped)
utilities : bounded .u-* one-off nudges
The page layer wins over components. Utilities wins over both. Source
order within each layer determines precedence for same-layer rules.
── Page-class scoping ──
The body styling is universal; per-page intent opts in via a body class:
body.page-main — index.html → font-size: 15px
body.page-narrow — auth-box pages → flex-centered
body.page-admin — admin.html → scopes admin rules
(no class) — pod-manage / profile / → default block layout
styleguide
── TOC ──
Components block (universal primitives + auth-family)
• :root tokens (colors, radius, spacing, type, motion)
• [hidden] reset
• Tags (.tag, .tag--*)
• Small buttons (.btn-sm, .btn-sm--{primary,ghost,danger})
• Extra-small buttons (.btn-xs, .btn-xs--{primary,danger})
• Icon buttons (.icon-btn, .icon-btn--{edit,delete,restore,resend})
• Spinner (.spinner, .spinner--{sm,muted}, @keyframes spin)
• Stat tiles (.pc-stats, .pc-stat, .pc-stat-label)
• Mana pips (.color-pips, .mana-pip)
• Section heads (.section-head, .section-title, .section-subtitle)
• Stat cards (.stat-cards, .stat-card, .stat-card-{val,label,sub})
• List-card rows (.list-card, .cmd-entry, .cmd-art, .game-num,
.cmd-name, .cmd-rate*, .cmd-wins-hero, .cmd-count-sub,
.cmd-last-played)
• Card hover tooltip (#card-tooltip, #card-tooltip-img)
• Generic tooltip (#tooltip)
• Toasts (.toast-stack, .toast, .toast--*, .toast-progress*,
@keyframes toast-tick/in/out)
• Native form controls (input[type=date|number], select)
• Date range (.range-inputs)
• Picker options (.picker-opt)
• Popup year row (.popup-year-row, .popup-custom)
• Popup chrome (.popup-overlay, .popup-box, .popup-header,
.popup-close-btn)
• Filter triggers (.btn-range-open, .custom-multiselect,
.custom-multiselect-{btn,panel}, .ms-{label,chevron})
• Apply button (.btn-apply)
Auth-family components block
• Body + reset + box-sizing
• Auth box (.auth-box, .auth-box--{sm,lg})
• Branding (.auth-logo, .auth-tagline, .auth-hero, .auth-heading)
• Form fields (.form-row, .form-group, .form-input, .form-checkbox)
• Custom select (.custom-select, .custom-select-{btn,panel,opt})
• Data table (.data-table-wrap, .data-table, .cell-name, .cell-sub,
.td-actions, .table-section-row)
• Password (.pw-wrap, .pw-toggle, .strength-{wrap,bar,fill,text})
• Field/form messages (.field-error, .form-msg, .form-msg--*)
• Primary button (.auth-btn)
• Links & footer (.auth-link, .auth-footer, .remember-me-row)
• Loading (.auth-loading)
• Pod list / cards (.pod-list, .pod-card, .pod-card-{body,name,meta,role})
• Invites (.invite-card, .invite-actions, .btn-accept, .btn-reject,
.inv-count)
• Section labels (.section-label, .section-heading, .form-section)
• Create pod (.btn-create-pod, .create-pod-{form,row})
• Profile card (.profile-card, .profile-field*)
• Utility classes (.logout-form, .auth-{centered,hint,btn--link},
.card-leaving, .row-fading)
• Page heading + header (.page-heading, .page-header)
• Tab bar (.tab-bar, .tab-btn, .tab-panel)
• Full-width page (.page-wrap, .page-card)
• Modal (.modal-overlay, .modal-box, .modal-{title,body,actions})
• Mobile (max-width: 600px) media query
Main-app components block (index.html — wrapped in @layer page)
• :root tokens (--rank1-gradient, --sp-section, etc.)
• Body + form-element font reset
• Header (.header-main, .header-meta)
• Global nav (.gnav, .gnav-link, .gnav-brand — defined near end of file)
• Section nav (#section-nav-wrap, .snav-*)
• Sticky filters (.snav-filters, .snav-chips, .snav-filter-sheet-btn,
.gf-cmd-search, .picker-input, .ms-mode-{toggle,btn})
• Main layout (main, .controls, .ng-label,
.sort-{wrap,btn,panel,opt})
• Filters (.custom-color-panel, .check-pill, .color-option,
input[type=checkbox])
• Player cards (#player-cards, .player-card, .pc-{identity,winrate,
form,color-pips}, .form-pip*, .streak-label)
• H2H (.h2h-layout, .h2h-nav, .h2h-opp-*, .h2h-detail-*)
• Cmd entry overrides (.cmd-entry, .cmd-name, .cmd-details)
• Game rows (.game-row, .commanders-cell, .result-pills)
• Empty states (.empty-state, .lb-error, .empty-clear-btn)
• Colour statistics (.color-stats-grid, .color-stat-*, .cs-donut*)
• Form timeline (#timeline-rows, .tl-*)
• Game log + session headers (.session-header, .session-date,
.session-rule, .game-num, .commanders-cell, .player-result)
• Modals (#new-game-modal, #pp-*-modal)
• Section loader, FAB (#new-game-fab, .fab-label, #data-panel,
.data-panel-btn, .nav-invite-badge)
• Speed-dial (.speed-dial-*)
• Players side panel (#players-panel, .players-panel-box, .pp-*)
• Card art skeleton + section skeleton (@keyframes skeleton-shimmer)
• New-game modal cards (.ng-pcard, .ng-add-card, .ng-trophy-btn,
.ng-cmd-*, .ng-partner-btn, .ng-unknown-*)
• Rich tooltips (#att-tooltip, #streak-tooltip, #skill-tooltip,
#bayesian-tooltip, .skill-tip-*)
• Mobile media queries (max-width: 900px, max-width: 600px)
============================================================================ */
@layer components, page, utilities;
/* ── Inter — self-hosted (GDPR: no Google Fonts CDN) ─────────────────────────
Two files of the Inter v20 VARIABLE font (weights 400–800 in one file),
downloaded from fonts.gstatic.com into /fonts. unicode-range keeps the
latin-ext file lazy — browsers fetch it only when a page actually renders
those characters. Pages preload /fonts/inter-latin.woff2 in .
@font-face must live at the top level, outside @layer. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cross-document view transitions. Because every authenticated page injects
the exact same .gnav bar, naming it (see .gnav { view-transition-name })
lets the browser hold the bar perfectly still while it crossfades only the
page body — an SPA-like "the nav didn't reload" feel with no client router.
Same-origin navigations only; unsupporting browsers just navigate normally.
Must live at the top level — @view-transition can't sit inside @layer. */
@view-transition { navigation: auto; }
/* Honour reduced-motion: keep the seamless swap, drop the animation. */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ RETIRED CLASSES — never use these ║
║ ║
║ Enforced by scripts/pre-commit. The replacements below all live in ║
║ this file; grep for the retired name to find the section that hosts ║
║ its replacement. ║
║ ║
║ btn-icon → icon-btn icon-btn--{modifier} ║
║ profile-edit-btn → icon-btn icon-btn--edit ║
║ pod-icon-btn → icon-btn icon-btn--{modifier} ║
║ admin-tabs → tab-bar ║
║ admin-tab → tab-btn ║
║ admin-loading → auth-loading ║
║ admin-table-wrap → data-table-wrap ║
║ admin-table → data-table ║
║ pod-leave-btn → btn-xs btn-xs--danger ║
║ game-edit-btn → icon-btn icon-btn--edit ║
║ game-delete-btn → icon-btn icon-btn--delete ║
║ game-restore-btn → btn-xs btn-xs--primary ║
║ game-perm-delete-btn → btn-xs btn-xs--danger ║
║ dd-select-wrap → custom-multiselect-btn (main app) ║
║ select-wrap → custom-select (auth pages) ║
║ auth-box--wide → auth-box / auth-box--sm / auth-box--lg ║
║ or page-card for full-width pages ║
║ tag--warn → tag--gold (one gold chip — warn IS gold; ║
║ the duplicate alias was collapsed) ║
║ panel-separator → border-top: 1px solid var(--divider) ║
║ btn-sm--accent → btn-sm--primary (primary buttons are now ║
║ neutral; the ember is reserved — never a ║
║ button fill) ║
║ btn-xs--accent → btn-xs--primary (xs affirmative action; ║
║ neutral fill, never ember) ║
║ tl-dot → tl-bar > tl-seg tl-seg--{win|loss} ║
║ (session bars replaced per-game dots) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ COMPONENTS — tokens (:root) + universal primitives ║
╚═══════════════════════════════════════════════════════════════════════╝ */
@layer components {
/* Ensure [hidden] always wins, even on flex/grid containers */
[hidden] { display: none !important; }
:root {
/* ── Color tokens ──
Near-monochrome cool-neutral ramp on a near-black base; a single warm
"spark" (--accent) is the only chromatic UI colour and appears at most
once or twice per screen. --win/--loss/--gold are functional status hues
only, never decoration. */
--bg: #0d0f11; /* page base — near-black, faintly cool */
--surface: #1e242b; /* cards, panels */
--surface-2: #2b323a; /* nested / elevated tier on top of --surface */
--surface-hover:#353d46; /* interactive surface hover */
--border: rgba(255,255,255,0.12); /* hairline rim — art tiles, colour boxes, floating overlays, fields. General surfaces are BORDERLESS (fill tier + shadow separate them) */
--divider: rgba(255,255,255,0.11); /* subtle section dividers */
--accent: #f2622e; /* the single spark — deep enough for white text/icons on top */
--accent-h: #ff7344;
--gold: #f0c040; /* rank-1 / milestones / hot streak — functional only */
--win: #4cc88f;
--loss: #e5484d;
--loss-h: #f25c60;
--loss-text: #ff8a8d; /* softer red for text/inline status */
--text: #edf0f2; /* primary text — near-white, faintly cool */
--muted: #9aa3ab; /* secondary text, labels — neutral grey */
--on-accent: #ffffff; /* white text/icons on the ember spark fills (FAB, badges) */
--on-loss: #ffffff; /* white text on solid red danger fills */
--on-light: #0d0f11; /* dark text on neutral near-white primary buttons */
--primary: #eef1f2; /* neutral high-contrast primary button fill */
--primary-h: #ffffff; /* primary button hover */
--scrim: rgba(6,8,10,0.82); /* modal / popup overlay */
--accent-soft: rgba(242,98,46,0.15); /* accent background tint */
--loss-soft: rgba(229,72,77,0.13);
--win-soft: rgba(76,200,143,0.12);
--warn-soft: rgba(240,192,64,0.14);
--muted-soft: rgba(154,163,171,0.18);
--gold-glow: rgba(240,192,64,0.45);
--loss-border: rgba(229,72,77,0.40);
--win-border: rgba(76,200,143,0.30);
--focus-ring: 0 0 0 2px rgba(242,98,46,0.60);
/* ── Radius scale ── (softer, larger — modern rounded rhythm) */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius: 16px;
--edge-gap: 1.5rem;
--gnav-h: 3.25rem; /* global-nav top app-bar height (desktop) */
--gnav-h-mobile: 4rem; /* global-nav bottom bar height (mobile) — taller than the
icon+label content so the centred active pill has clear
breathing room above/below (it's the slack, not padding) */
/* ── Spacing scale (padding, margin, gap only — NOT font-size, width, height) ── */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-7: 2rem;
--sp-8: 3rem;
/* ── Font stacks ── */
--font-ui: 'Inter', system-ui, -apple-system, sans-serif; /* everything, incl. the Commandery wordmark */
/* ── Letter-spacing tokens ──
All-caps is reserved for chips (.tag, .snav-chip) and avatar initials only.
--ls-caps is the gentle tracking those chips use; --ls-display slightly
tightens large sentence-case headings (Inter) the modern way. */
--ls-caps: 0.02em;
--ls-display: -0.01em;
/* ── Type scale ──
A LIST HEADING IS NEVER SMALLER THAN THE ROWS IT HEADS. When a label heads
a plain-text LIST or MENU — footer link columns, table columns, a stack of
text rows — it takes --sz-body (weight 700, --muted, --ls-caps); hierarchy
comes from weight + colour, not from shrinking the heading below its own
content. Members: .section-label, .data-table th, .table-section-row td,
.lp-footer-col-title. A new list/menu heading joins them.
This is DELIBERATELY narrow. --sz-label keeps every label that is not
heading a text list, and bumping those makes the surface top-heavy:
• labels riding on a card / box / graphic tile — .color-stat-label,
.session-date, .stat-card-label, .pc-winrate-label, .streak-label
• standalone label→value pairs — .profile-field-label
• control labels next to one input — .form-group label, .ng-label,
.snav-sheet-label, .popup-custom label
• meta/sub lines and chip/pill controls — .cell-sub, .pod-card-meta,
.invite-card-sub, .snav-link, .pod-card-role
If the thing below the label is boxes, art or a single value rather than
plain text rows, the label stays small. */
--sz-h1: 1.6rem;
--sz-h2: 1.25rem;
--sz-h3: 1.1rem;
--sz-body: 1rem;
--sz-sm: 0.85rem;
--sz-label: 0.75rem;
--sz-micro: 0.68rem;
/* ── Motion tokens ── */
--motion-fast: 150ms;
--motion-base: 220ms;
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
/* ── Elevation scale ── (drop shadows only — glows/rims are bespoke)
Two-layer, lower-opacity shadows: a tight contact layer + a soft ambient
layer. Reads as quiet depth rather than a heavy dark halo. */
--shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 3px 8px rgba(0,0,0,0.22); /* resting float — FABs, tooltips, small popovers */
--shadow-2: 0 4px 12px rgba(0,0,0,0.34), 0 12px 28px rgba(0,0,0,0.30); /* raised — dropdown panels, side panels, toasts */
--shadow-3: 0 8px 24px rgba(0,0,0,0.40), 0 24px 56px rgba(0,0,0,0.46); /* overlay — modals, popups, page/auth cards */
--shadow-lift: 0 2px 10px rgba(0,0,0,0.28); /* hover affordance — soft diffuse shadow, no positional shift */
}
/* ── Tags ─────────────────────────────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--sz-micro);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-caps);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-sm);
white-space: nowrap;
line-height: 1;
vertical-align: middle;
}
.tag--accent { color: var(--accent); background: var(--accent-soft); }
.tag--win { color: var(--win); background: var(--win-soft); }
.tag--loss { color: var(--loss-text); background: var(--loss-soft); }
/* One gold chip — rank-1, milestones, winner, unverified. There is no
.tag--warn alias; warn IS gold (see the Color cheat sheet in CLAUDE.md). */
.tag--gold { color: var(--gold); background: var(--warn-soft); }
.tag--muted { color: var(--muted); background: var(--muted-soft); }
/* ── Small inline buttons (.btn-sm) ───────────────────────────────────────── */
.btn-sm {
padding: var(--sp-2) var(--sp-4);
border: 1px solid transparent;
border-radius: var(--radius-lg);
font-family: inherit;
font-size: var(--sz-sm);
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.btn-sm:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Modifiers set fill + label only — the transparent border, focus ring and
disabled treatment all come from the .btn-sm base. */
.btn-sm--primary { background: var(--primary); color: var(--on-light); }
.btn-sm--primary:hover:not(:disabled) { background: var(--primary-h); }
.btn-sm--ghost { background: var(--surface); color: var(--text); }
.btn-sm--ghost:hover:not(:disabled) { background: var(--surface-hover); }
.btn-sm--danger { background: var(--surface); color: var(--loss-text); }
.btn-sm--danger:hover:not(:disabled) { background: var(--loss-soft); }
.btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }
/* Quiet controls rest ONE TIER ABOVE their local background (same
lighter-is-raised rule as the card model): --surface on the near-black
--bg body, stepped up to --surface-2 inside a --surface panel. Keep this
rule at 0,2,0 specificity and ABOVE the .btn-xs--primary and
.modal-box .btn-sm--danger overrides so those still win by source order. */
:is(.page-card, .modal-box, .popup-box, .auth-box, .players-panel-box, .list-card, .empty-state, .lb-error, .lp-hero, .lp-cta-box) :is(.btn-sm--ghost, .btn-sm--danger, .btn-xs) { background: var(--surface-2); }
/* ── Extra-small action buttons (.btn-xs) ─────────────────────────────────── */
/* Use inside .action-row inside a .td-actions cell (admin), or as standalone
row actions elsewhere. Mixed-case label — not uppercase. */
.btn-xs {
padding: var(--sp-1) var(--sp-2);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: var(--sz-label);
font-weight: 600;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
white-space: nowrap;
}
/* Hover shifts the FILL only — each modifier owns its label colour, so no
hover rule needs to restate it. The doubled .btn-xs.btn-xs--* selectors are
load-bearing: they must out-specify the :is() step-up rule above. */
.btn-xs:hover:not(:disabled) { background: var(--surface-hover); }
.btn-xs.btn-xs--danger { color: var(--loss-text); }
.btn-xs.btn-xs--danger:hover:not(:disabled) { background: var(--loss-soft); }
.btn-xs.btn-xs--primary { background: var(--primary); color: var(--on-light); }
.btn-xs.btn-xs--primary:hover:not(:disabled) { background: var(--primary-h); }
.btn-xs:disabled { opacity: 0.45; cursor: not-allowed; }
.action-row { display: flex; gap: var(--sp-1); align-items: center; justify-content: flex-end; }
/* ── Icon buttons (.icon-btn) ─────────────────────────────────────────────── */
/* Always pair with a semantic modifier. Hover backgrounds carry the colour. */
.icon-btn {
background: none;
border: none;
color: var(--muted);
width: 1.8rem;
height: 1.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
cursor: pointer;
line-height: 0;
flex-shrink: 0;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.icon-btn--delete:hover:not(:disabled) { background: var(--loss-soft); color: var(--loss-text); }
.icon-btn--edit:hover:not(:disabled),
.icon-btn--restore:hover:not(:disabled) { background: var(--muted-soft); color: var(--text); }
.icon-btn--resend:hover:not(:disabled) { background: var(--win-soft); color: var(--win); }
/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 0.4rem;
}
.spinner--sm { width: 10px; height: 10px; margin: 0; }
.spinner--muted { border-color: rgba(255,255,255,0.14); border-top-color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Stat tiles (.pc-stats > .pc-stat) ───────────────────────────────────────
Row of compact metric tiles — big value on top, small-caps label underneath.
A universal primitive (@layer components) so profile/auth-family pages can
reuse the same idiom the main app uses for player-card stats. Callers can
override the container (border-top, padding) when used outside a card. */
.pc-stats {
display: flex;
justify-content: center;
gap: var(--sp-7);
width: 100%;
padding: var(--sp-4) 0;
border-top: 1px solid var(--divider);
}
.pc-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
}
.pc-stat .stat-val { font-size: var(--sz-h2); font-weight: 800; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-stat-label {
font-size: var(--sz-micro);
letter-spacing: var(--ls-caps);
color: var(--muted);
}
/* ── Mana pips (WUBRG colour-identity swatches) ──────────────────────────────
The `img` carries the actual coloured SVG (Scryfall card-symbols). A universal
primitive (@layer components) so profile/auth pages can render colour
identities exactly the way the main app does. Context-specific size overrides
(e.g. `.pc-color-pips .mana-pip`, `.color-stat-box .mana-pip`) live in the
page layer. */
.color-pips {
display: inline-flex;
align-items: center;
gap: 1px;
margin-left: 5px;
vertical-align: middle;
}
.mana-pip {
width: 13px;
height: 13px;
display: inline-block;
}
/* ── Section header (.section-head > .section-head-main > .section-title + .section-subtitle)
A universal primitive (@layer components) so auth-family pages get the same
major heading idiom the main app uses for "Top Players", "Top Commanders",
etc. — display caps with a 3px accent bar on the left and an optional muted
subtitle underneath. */
.section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-6);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.section-head-main {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
}
.section-title {
font-size: var(--sz-h2);
line-height: 1.2;
font-weight: 700;
letter-spacing: var(--ls-display);
color: var(--text);
}
.section-head .section-title {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.section-head .section-title::before {
content: '';
display: inline-block;
width: 3px;
height: 1.1em;
background: var(--accent); /* ember heading tick — on the sanctioned spark list */
border-radius: 2px;
flex-shrink: 0;
}
.section-subtitle {
font-size: var(--sz-sm);
font-weight: 400;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
white-space: normal;
}
.section-head h2 {
white-space: nowrap;
padding-top: var(--sp-1);
}
/* Top-level stats sections stack vertically with a thin divider between
them. Mirrors the `main > section + section` rule the main app uses for
"Top Players → Form → H2H → Commanders → Colours → Games" — first
section sits flush, every subsequent one gets a 1px --divider line above
it and matching vertical breathing room. */
.stats-section + .stats-section {
margin-top: var(--sp-7);
border-top: 1px solid var(--divider);
padding-top: var(--sp-7);
}
/* ── Stat cards (.stat-cards > .stat-card)
Boxed metric tiles for dashboard overviews. Each card is a --surface box
with consistent padding and a fixed minimum height so a row of cards stays
aligned regardless of value length. Value on top (display-weight), small-caps
label underneath. Distinct from .pc-stats (which is a borderless row of
tile *contents* inside a parent card) — .stat-card stands on its own surface. */
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.stat-card {
background: var(--surface);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 6.5rem;
text-align: center;
}
/* Inside .page-card (which is --surface), nested tiles step UP to --surface-2
so they read as a lighter raised tile — borderless card model, same in
every context. */
.page-card .stat-card { background: var(--surface-2); }
.stat-card-val {
font-size: 1.9rem;
font-weight: 800;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.stat-card-val--sm { font-size: var(--sz-h3); }
.stat-card-label {
font-size: var(--sz-label);
font-weight: 700;
letter-spacing: var(--ls-caps);
color: var(--muted);
line-height: 1.2;
}
.stat-card-sub {
font-size: var(--sz-micro);
color: var(--muted);
letter-spacing: var(--ls-caps);
}
/* ── List-card row pattern (ol > li.list-card.cmd-entry)
Universal primitive (@layer components). The main app uses this for the Top
Commanders and H2H opponent lists; profile-page sections reuse it so their
leaderboards look identical instead of dropping into a tabular grid. .cmd-art
lives in the page layer because only the main app has Scryfall card art to
render. */
ol.list-stack {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: 0;
margin: 0; /* section gap + .btn-show-more margin own the rhythm, like main's ol */
}
.list-card {
background: var(--surface);
border-radius: var(--radius-md);
transition: background var(--motion-fast) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out);
}
/* Inside .page-card (which is --surface), rows step UP to --surface-2 so they
read as lighter raised rows (unified card model). The main-app click-to-expand
hover shadow (page layer) is suppressed here because most profile rows are
display-only — the expandable h2h opponents list opts back in (page layer,
next to the .h2h-opp-row rules). */
.page-card .list-card { background: var(--surface-2); }
.page-card .list-card:hover { background: var(--surface-2); box-shadow: none; }
/* Expandable-row chevron (markup + wiring: stats-markup.js rowChevronHtml /
wireExpandableRow). Sits in the trailing "chev" grid column spanning the
collapsed rows — so it stays centred on the header part when the detail
panel opens — and flips when the row is open. Wired rows are keyboard
buttons (tabindex), so they take the standard focus ring. */
.row-chevron {
grid-area: chev;
display: inline-flex;
align-items: center;
color: var(--muted);
transition: transform var(--motion-base) var(--ease-out);
}
.list-card.open > .row-chevron { transform: rotate(180deg); }
.list-card[tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmd-entry {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"num name stat"
"num meta sub";
align-items: center;
column-gap: var(--sp-3);
row-gap: var(--sp-1);
padding: var(--sp-3) var(--sp-4);
font-size: var(--sz-body);
}
.cmd-entry.cmd-entry--with-art {
grid-template-columns: auto auto 1fr auto;
grid-template-areas:
"num art name stat"
"num art meta sub";
}
/* Click-to-expand variant (main app) appends the chevron column; the profile's
display-only rows keep the base templates (no dead trailing gap). */
.cmd-entry.cmd-entry--expandable {
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
"num name stat chev"
"num meta sub chev";
}
.cmd-entry.cmd-entry--with-art.cmd-entry--expandable {
grid-template-columns: auto auto 1fr auto auto;
grid-template-areas:
"num art name stat chev"
"num art meta sub chev";
}
.cmd-entry > .game-num { grid-area: num; }
.cmd-entry > .cmd-art { grid-area: art; }
/* Scryfall card art crop on a list-card row. Both pages use the same size /
border / placement; the actual artwork is set via inline `background-image`
from the cached image URL (main: scryfallCache; profile: API response). */
.cmd-art {
width: 4.5rem;
min-height: 3rem;
align-self: stretch;
border-radius: var(--radius-sm);
background-color: var(--bg);
background-size: cover;
background-position: center 30%;
border: 1px solid var(--border);
}
.cmd-art--empty { background: var(--bg); }
/* ── Avatars ───────────────────────────────────────────────────────────────
Circular planeswalker portraits (lib/avatars.js). Used as the centred
profile identity (with an edit badge that opens the picker modal) and as
the head-to-head opponent thumbnail; `--mono` is the deterministic initials
fallback for players without a chosen avatar. Image files are 256×256
face-focused crops in /avatars/. Markup comes from avatarHtml() — never
hand-roll an .avatar; keep this the single source. */
.avatar {
box-sizing: border-box; /* selected ring thickens the border without changing diameter */
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
background-color: var(--bg);
border: 1px solid var(--border);
color: var(--text);
font-weight: 600;
line-height: 1;
user-select: none;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--mono { text-transform: uppercase; }
.avatar--sm { width: 2rem; height: 2rem; font-size: 0.7rem; }
.avatar--md { width: 3rem; height: 3rem; font-size: var(--sz-label); }
.avatar--lg { width: 4.5rem; height: 4.5rem; font-size: var(--sz-body); }
.avatar--xl { width: 6rem; height: 6rem; font-size: 1.6rem; }
/* Avatar identity (profile Account tab) — centred avatar with a corner edit
badge; clicking opens the picker modal (progressive disclosure). */
.profile-field--avatar {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
}
.avatar-edit-trigger {
position: relative;
padding: 0;
background: none;
border: 0;
cursor: pointer;
border-radius: 50%;
line-height: 0;
}
.avatar-edit-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-edit-trigger:hover .avatar { border-color: var(--text); }
.avatar-edit-badge {
position: absolute;
right: 0;
bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
border: 2px solid var(--surface);
transition: background var(--motion-fast) var(--ease-out);
}
.avatar-edit-trigger:hover .avatar-edit-badge { background: var(--accent-h); }
.avatar-identity-name { font-weight: 600; color: var(--text); }
/* Avatar picker gallery (inside the modal). Fixed-width tracks spread with
space-between so the left/right columns sit flush against the modal content
edges — i.e. the outer circles line up with the Cancel/Save buttons below.
Circles are a touch larger than the h2h size so the art is easy to read. */
.avatar-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 3.75rem);
justify-content: space-between;
gap: var(--sp-5) var(--sp-2);
max-height: 60vh;
overflow-y: auto;
padding-block: var(--sp-1);
}
.avatar-option {
width: 3.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
padding: 0;
background: none;
border: 0;
cursor: pointer;
color: var(--muted);
font: inherit;
transition: color var(--motion-fast) var(--ease-out);
}
.avatar-option .avatar { width: 3.75rem; height: 3.75rem; font-size: var(--sz-body); }
.avatar-option:hover { color: var(--text); }
.avatar-option:hover .avatar { border-color: var(--text); }
.avatar-option.selected { color: var(--text); }
.avatar-option.selected .avatar { border: 3px solid var(--accent); }
.avatar-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-option-name {
max-width: 100%;
font-size: var(--sz-label);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmd-entry > .cmd-name { grid-area: name; }
.cmd-entry > .cmd-win-group { grid-area: stat; justify-self: end; }
.cmd-entry > .cmd-last-played { grid-area: meta; }
.cmd-entry > .cmd-count-sub { grid-area: sub; justify-self: end; }
.game-num {
width: 2.5rem;
flex-shrink: 0;
font-size: var(--sz-label);
font-weight: 600;
color: var(--muted);
text-align: left;
}
.game-num--milestone { color: var(--gold); }
.cmd-entry .cmd-name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
color: var(--text);
font-weight: 600;
min-width: 0;
}
.cmd-entry .cmd-name.cmd-top { color: var(--gold); font-weight: 700; }
.cmd-win-group {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
}
.cmd-rate {
color: var(--muted);
font-size: var(--sz-sm);
font-weight: 400;
}
.cmd-entry .cmd-rate {
font-size: var(--sz-h3);
font-weight: 700;
}
.cmd-rate--hot { color: var(--gold); }
.cmd-rate--good { color: var(--win); }
.cmd-rate--avg { color: var(--text); }
.cmd-rate--cold { color: var(--loss-text); }
.cmd-wins-hero {
font-size: var(--sz-h3);
font-weight: 700;
color: var(--text);
}
.cmd-count-sub {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--muted);
font-size: var(--sz-sm);
font-weight: 400;
white-space: nowrap;
}
.cmd-last-played {
font-size: var(--sz-sm);
color: var(--muted);
}
/* ── Scryfall card hover tooltip (large card preview) ────────────────────────
Element pair:
Both pages position it via a mousemove listener following the cursor. */
#card-tooltip {
position: fixed;
pointer-events: none;
z-index: 1000;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
width: 200px;
}
#card-tooltip-img { display: block; width: 100%; height: auto; }
/* ── Generic tooltip ──────────────────────────────────────────────────────── */
#tooltip {
position: fixed;
pointer-events: none;
z-index: 1000;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-1) var(--sp-3);
font-size: var(--sz-sm);
color: var(--text);
white-space: pre-line;
box-shadow: var(--shadow-1);
max-width: 280px;
}
/* ── Toast notifications ──────────────────────────────────────────────────────
Universal action feedback. Anchored bottom-center, click-to-dismiss, auto-
dismiss when the circular progress ring completes. See toast.js. */
.toast-stack {
position: fixed;
bottom: var(--sp-6);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
z-index: 2000;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 0.65rem;
background: var(--surface);
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--radius);
padding: 0.6rem 0.85rem;
font-size: var(--sz-sm);
color: var(--text);
box-shadow: var(--shadow-2);
cursor: pointer;
pointer-events: auto;
max-width: min(420px, calc(100vw - var(--sp-7)));
animation: toast-in var(--motion-base) var(--ease-out);
}
.toast--leaving { animation: toast-out var(--motion-base) ease-in forwards; }
.toast--success { border-left-color: var(--win); }
.toast--error { border-left-color: var(--loss); }
.toast--info { border-left-color: var(--muted); }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-progress { width: 16px; height: 16px; flex-shrink: 0; transform: rotate(-90deg); }
.toast-progress-track { fill: none; stroke: var(--border); stroke-width: 2.5; }
.toast-progress-bar {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 62.83;
animation: toast-tick var(--toast-duration, 3000ms) linear forwards;
}
.toast--success .toast-progress-bar { stroke: var(--win); }
.toast--error .toast-progress-bar { stroke: var(--loss); }
.toast--info .toast-progress-bar { stroke: var(--muted); }
@keyframes toast-tick { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 62.83; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
/* ── Native form controls (cross-page) ─────────────────────────────────────
Universal primitives (@layer components) so auth-family pages get matching
date / number / select chrome without redefining them. */
input[type=date],
input[type=number],
select {
appearance: none;
-webkit-appearance: none;
color-scheme: dark;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-2) var(--sp-3);
color: var(--text);
font-size: var(--sz-sm);
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
select option { background: var(--surface); color: var(--text); }
input[type=date]:hover,
input[type=number]:hover,
select:hover { border-color: var(--muted); }
input[type=date]:focus,
input[type=number]:focus,
select:focus { outline: none; box-shadow: var(--focus-ring); }
input[type=date]::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(0.3);
cursor: pointer;
}
input[type=number] {
width: 70px;
text-align: center;
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button { display: none; }
/* ── Date range inputs (from – to row) ─────────────────────────────────── */
.range-inputs {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.range-inputs input[type=date] { flex: 1 1 0; min-width: 0; }
.range-inputs span { color: var(--muted); font-size: var(--sz-sm); flex: 0 0 auto; }
/* ── Picker options (selectable row inside a picker dropdown) ──────────── */
.picker-opt {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-sm);
border: 1px solid transparent;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
font-size: var(--sz-sm);
color: var(--text);
user-select: none;
transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.picker-opt:hover, .picker-opt:focus-visible {
background: var(--surface-hover);
outline: none;
}
.picker-opt.active {
border-color: var(--text);
background: var(--muted-soft);
color: var(--text);
}
/* ── Date-range popup inner layout ─────────────────────────────────────── */
.popup-year-row {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.popup-year-row > label,
.popup-custom label {
font-size: var(--sz-label);
font-weight: 600;
letter-spacing: var(--ls-caps);
color: var(--muted);
}
.popup-custom label { display: block; margin-bottom: var(--sp-2); }
/* ── Popup chrome (overlay + box + header + close) ─────────────────────── */
.popup-overlay { position: absolute; inset: 0; background: var(--scrim); cursor: pointer; }
.popup-box {
position: relative;
background: var(--surface);
border-radius: var(--radius);
padding: var(--sp-6);
width: min(380px, calc(100vw - 2 * var(--edge-gap)));
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
z-index: 1;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sp-4);
}
.popup-close-btn {
background: none;
border: none;
color: var(--muted);
font-size: 1.3rem;
cursor: pointer;
line-height: 1;
width: 2.4rem;
height: 2.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
padding: 0;
margin: calc(var(--sp-2) * -1);
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.popup-close-btn:hover { color: var(--text); background: var(--surface-hover); }
.popup-close-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ── Filter-trigger buttons (range trigger + multiselect trigger) ──────── */
.btn-range-open,
.custom-multiselect-btn {
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--radius-lg);
color: var(--text);
/* Explicit height, not line-height arithmetic — Firefox ignores line-height
on single-line , so a shared height is the only way the filter-bar
controls stay equal. Keep in sync with .sort-btn and .gf-cmd-search. */
height: 2.3rem;
padding: 0 var(--sp-4);
font-size: var(--sz-sm);
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.btn-range-open:hover,
.custom-multiselect-btn:hover { background: var(--surface-hover); }
.btn-range-open:focus-visible,
.custom-multiselect-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.custom-multiselect { position: relative; }
.custom-multiselect-btn { width: 220px; }
.ms-label {
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: 1.4em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
text-align: left;
}
.ms-chevron {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--muted);
line-height: 0;
}
.custom-multiselect-panel {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-2);
border-radius: var(--radius-lg);
padding: var(--sp-2);
z-index: 100;
flex-direction: column;
min-width: 220px;
gap: var(--sp-1);
max-height: 55vh;
overflow-y: auto;
}
.custom-multiselect-panel.open { display: flex; }
/* ── Apply button (inside filter popup) ────────────────────────────────── */
.btn-apply {
display: block;
width: 100%;
margin-top: var(--sp-3);
background: var(--primary);
border: none;
border-radius: var(--radius-lg);
color: var(--on-light);
padding: var(--sp-2) var(--sp-4);
font-size: var(--sz-sm);
font-weight: 700;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out);
}
.btn-apply:hover:not(:disabled) { background: var(--primary-h); }
.btn-apply:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-apply:disabled { opacity: 0.45; cursor: not-allowed; }
/* Filter triggers inside a .page-card sit on --surface; drop them to --bg
so they read as inset controls (matches the .page-card .stat-card and
.page-card .list-card pattern). */
.page-card .btn-range-open,
.page-card .custom-multiselect-btn { background: var(--bg); }
/* Year row inside a popup: full-width button + inline (non-overlay) panel
so the popup-box's overflow-y: auto can scroll without clipping it. */
.popup-year-row .custom-multiselect { width: 100%; }
.popup-year-row .custom-multiselect-btn { width: 100%; background: var(--bg); }
.popup-year-row .custom-multiselect-panel {
position: static;
width: 100%;
margin-top: var(--sp-1);
box-shadow: none;
}
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ COMPONENTS — auth-family + base resets (html, *, body) ║
║ Universal body styling; .page-narrow opts in to flex-centered layout. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
@layer components {
html {
overflow-x: clip;
/* iOS Safari inflates text it deems "primary" when no adjust is declared —
blows up labels inside tight components and reads as cramped. Type is
already sized responsively; opt out of the auto-inflation. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }
/* ── Body base (every page) ──────────────────────────────────────────────────
Universal body styling. Optional class modifiers tweak per-page intent:
.page-main — index.html (main app): font-size: 15px
.page-narrow — auth-box pages (login, signup, etc.): flex-centered
Other auth-family pages (admin, pod-manage, profile, styleguide) use the
bare body — default block layout, no centering, no font-size override. */
body {
font-family: var(--font-ui);
font-weight: 400;
font-variant-numeric: tabular-nums;
color-scheme: dark;
color: var(--text);
min-height: 100vh;
/* Faint static ember glow from the top — a consistent ambient warmth on every
page, with no image fetch. (On the main app it sits behind the header art.) */
background:
radial-gradient(160% 120% at 50% -20%, rgba(242,98,46,0.14) 0%, rgba(242,98,46,0.06) 38%, transparent 80%),
var(--bg);
background-repeat: no-repeat;
background-attachment: fixed;
}
body.page-narrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--sp-7) var(--edge-gap);
/* glow comes from the base body rule — no per-page background needed */
}
/* Force --font-ui on form elements — browsers override font-family by default */
button, input, select, textarea, option, optgroup {
font-family: var(--font-ui);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* ── Box ── */
.auth-box {
background: var(--surface);
border-radius: var(--radius);
padding: 2.1rem 2.25rem 1.9rem;
width: min(430px, 100%);
box-shadow: var(--shadow-3);
}
.auth-box--lg { width: min(720px, 100%); } /* long-form prose (legal pages) — comfortable reading measure */
.auth-box--sm { width: min(480px, 100%); } /* pod-select */
/* ── Branding ── */
.auth-logo {
font-family: var(--font-ui);
font-weight: 800;
font-size: var(--sz-h1);
color: var(--accent);
text-align: center;
letter-spacing: -0.02em;
margin: 0 0 0.15rem;
line-height: 1;
}
.auth-tagline {
font-size: var(--sz-label);
color: var(--muted);
text-align: center;
margin-bottom: 1.6rem;
letter-spacing: 0.03em;
}
/* ── Hero branding (login / signup) ── */
.auth-hero {
text-align: center;
margin-bottom: var(--sp-6);
}
.auth-hero .auth-logo {
font-size: 3.2rem;
margin-bottom: 0.35rem;
}
.auth-hero .auth-tagline {
font-size: var(--sz-body);
margin-bottom: 0;
}
.auth-heading {
font-size: var(--sz-h3);
line-height: 1.25;
font-weight: 700;
color: #fff;
margin-bottom: 1.1rem;
}
/* ── Form fields ── */
.form-row {
display: flex;
gap: 0.65rem;
}
.form-row .form-group { flex: 1; min-width: 0; }
.form-group {
margin-bottom: 0.9rem;
}
.form-group label {
display: block;
font-size: var(--sz-label);
font-weight: 600;
color: var(--muted);
letter-spacing: var(--ls-caps);
margin-bottom: var(--sp-2);
}
.form-input {
width: 100%;
padding: 0.6rem 0.95rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
color: var(--text);
font-family: inherit;
font-size: var(--sz-sm);
outline: none;
transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.form-input:focus { box-shadow: var(--focus-ring); outline: none; }
.form-input::placeholder { color: var(--muted); }
.form-input.invalid { box-shadow: 0 0 0 2px var(--loss-border); }
.form-checkbox {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--sz-sm);
color: var(--text);
cursor: pointer;
accent-color: var(--text);
}
.form-checkbox-hint { color: var(--muted); }
/* ── Custom single-select dropdown (no native