/* ============================================================================
LocalPod 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--{accent,ghost,danger})
• Extra-small buttons (.btn-xs, .btn-xs--{accent,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,md})
• 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 (--header-img, --rank1-gradient, --sp-section, etc.)
• Body + form-element font reset
• Header (.header-main, .header-actions, .header-action-btn)
• 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;
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ 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--accent ║
║ 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--md ║
║ or page-card for full-width pages ║
║ panel-separator → border-top: 1px solid var(--divider) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ COMPONENTS — tokens (:root) + universal primitives ║
╚═══════════════════════════════════════════════════════════════════════╝ */
@layer components {
/* Ensure [hidden] always wins, even on flex/grid containers */
[hidden] { display: none !important; }
:root {
/* ── Color tokens ── */
--bg: #1a2224;
--surface: #263032;
--surface-hover:#2e3c3e;
--border: #3a5558;
--divider: rgba(58,85,88,0.3); /* --border at 30% opacity */
--accent: #d4732e;
--accent-h: #f48d4f;
--gold: #f0c040;
--win: #5dc99e;
--loss: #c94040;
--loss-h: #e05555;
--loss-text: #ec7a7a;
--text: #d8e8e8;
--muted: #80a8a8;
--on-accent: #fff;
--scrim: rgba(10,16,18,0.75);
--accent-soft: rgba(212,115,46,0.16);
--loss-soft: rgba(201,64,64,0.12);
--win-soft: rgba(93,201,158,0.12);
--warn-soft: rgba(240,192,64,0.15);
--muted-soft: rgba(128,168,168,0.20);
--gold-glow: rgba(240,192,64,0.5);
--loss-border: rgba(201,64,64,0.4);
--win-border: rgba(93,201,158,0.3);
--focus-ring: 0 0 0 2px rgba(212,115,46,0.5);
/* ── Radius scale ── */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius: 10px;
--edge-gap: 1.5rem;
/* ── 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;
/* ── Letter-spacing tokens ── */
--ls-caps: 0.06em;
--ls-display: 0.1em;
/* ── Type scale ── */
--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);
}
/* ── 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); }
.tag--warn,
.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 0.15s, border-color 0.15s, color 0.15s;
}
.btn-sm:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-sm--accent { background: var(--accent); color: var(--on-accent); }
.btn-sm--accent:hover:not(:disabled) { background: var(--accent-h); }
.btn-sm--accent:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm--ghost { background: none; border: 1px solid var(--border); color: var(--muted); }
.btn-sm--ghost:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.btn-sm--danger { background: none; border: 1px solid var(--loss-border); color: var(--loss); }
.btn-sm--danger:hover:not(:disabled) { background: var(--loss-soft); border-color: var(--loss); }
/* ── 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 var(--border);
border-radius: var(--radius-sm);
background: none;
color: var(--muted);
font-family: inherit;
font-size: var(--sz-label);
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
white-space: nowrap;
}
.btn-xs:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.btn-xs.btn-xs--danger { border-color: var(--loss-border); color: var(--loss); }
.btn-xs.btn-xs--danger:hover:not(:disabled) { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); }
.btn-xs.btn-xs--accent:hover:not(:disabled) { border-color: var(--accent-h); color: var(--accent-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 0.15s, color 0.15s;
}
.icon-btn--delete:hover:not(:disabled) { background: rgba(201,64,64,0.18); color: var(--loss); }
.icon-btn--restore:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-h); }
.icon-btn--edit:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-h); }
.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(106,142,142,0.4); 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.
Promoted from style.css 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); }
.pc-stat-label {
font-size: var(--sz-micro);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--muted);
}
/* ── Mana pips (WUBRG colour-identity swatches) ──────────────────────────────
The `img` carries the actual coloured SVG (Scryfall card-symbols). Promoted
from style.css 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`) stay in style.css. */
.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)
Promoted from style.css 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);
font-weight: 700;
text-transform: uppercase;
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);
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, the surrounding card is --surface; drop the inner
stat tile to --bg so it reads as a darker inset block without needing
a border. */
.page-card .stat-card { background: var(--bg); }
.stat-card-val {
font-size: 1.9rem;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.stat-card-val--sm { font-size: var(--sz-h3); }
.stat-card-label {
font-size: var(--sz-label);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--muted);
line-height: 1.2;
}
.stat-card-sub {
font-size: var(--sz-micro);
color: var(--muted);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
}
/* ── List-card row pattern (ol > li.list-card.cmd-entry)
Promoted from style.css. 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 stays in style.css
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 0 var(--sp-6) 0;
}
.list-card {
background: var(--surface);
border-radius: var(--radius-md);
transition: background 0.15s, border-color 0.15s;
}
/* Inside .page-card, the surrounding card is --surface so a --surface
row would vanish. Drop to --bg — darker inset block, no border. The
click-to-expand hover lift from style.css (main app) is suppressed
here because profile rows aren't expandable. */
.page-card .list-card { background: var(--bg); }
.page-card .list-card:hover { background: var(--bg); }
.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";
}
.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); }
.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: 0 4px 12px rgba(0,0,0,0.35);
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: 0 6px 20px rgba(0,0,0,0.4);
cursor: pointer;
pointer-events: auto;
max-width: min(420px, calc(100vw - var(--sp-7)));
animation: toast-in 180ms ease-out;
}
.toast--leaving { animation: toast-out 220ms 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) ─────────────────────────────────────
Lifted from style.css 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 0.15s, box-shadow 0.15s;
}
select option { background: var(--surface); color: var(--text); }
input[type=date]:hover,
input[type=number]:hover,
select:hover { border-color: var(--border); }
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 0.15s, background 0.15s;
}
.picker-opt:hover, .picker-opt:focus-visible {
border-color: var(--border);
background: var(--surface-hover);
outline: none;
}
.picker-opt.active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
/* ── 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;
text-transform: uppercase;
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 0.15s, color 0.15s;
}
.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);
padding: var(--sp-2) var(--sp-4);
font-size: var(--sz-sm);
cursor: pointer;
transition: border-color 0.15s;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.btn-range-open:hover,
.custom-multiselect-btn:hover { border-color: var(--border); }
.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);
}
.custom-multiselect-panel {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: var(--surface);
border: 1px solid var(--border);
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(--accent);
border: none;
border-radius: var(--radius-lg);
color: var(--on-accent);
padding: var(--sp-2) var(--sp-4);
font-size: var(--sz-sm);
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.btn-apply:hover:not(:disabled) { background: var(--accent-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; }
*, *::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: 'Poppins', system-ui, sans-serif;
font-weight: 400;
font-variant-numeric: tabular-nums;
color-scheme: dark;
color: var(--text);
min-height: 100vh;
background: var(--bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transition: background-image 0.7s ease;
}
body.page-narrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--sp-7) var(--edge-gap);
}
/* Force Poppins on form elements — browsers override font-family by default */
button, input, select, textarea, option, optgroup {
font-family: 'Poppins', system-ui, sans-serif;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* ── Box ── */
.auth-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2.1rem 2.25rem 1.9rem;
width: min(430px, 100%);
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.auth-box--md { width: min(560px, 100%); }
.auth-box--sm { width: min(480px, 100%); }
/* ── Branding ── */
.auth-logo {
font-family: 'Metal Mania', 'Poppins', system-ui, sans-serif;
font-size: var(--sz-h1);
color: var(--accent);
text-align: center;
letter-spacing: 0.03em;
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);
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);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
margin-bottom: 0.3rem;
}
.form-input {
width: 100%;
padding: 0.55rem 0.8rem;
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 0.15s, box-shadow 0.15s;
}
.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(--accent);
}
.form-checkbox-hint { color: var(--muted); }
/* ── Custom single-select dropdown (no native