/* =========================================================================
   Crowvio base + shared components. Requires tokens.css first.
   Components: icon, btn, card, badge, status-dot, field/input, switch,
   segmented, meter, toast, empty, skip-link, sr-only, kbd, stat.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg-gradient) fixed, var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary-text); text-underline-offset: 3px; }
[hidden], .hidden { display: none !important; }

/* focus: always visible for keyboard users, 3:1 against every surface */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
:focus:not(:focus-visible) { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--primary); color: var(--on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 600; }
.skip-link:focus { top: var(--space-4); }

/* ---------- icon ---------- */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: currentColor; vertical-align: -0.25em; }
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.5em; height: 1.5em; }

/* ---------- buttons ---------- */
.btn {
  --_bg: var(--surface); --_fg: var(--text); --_border: var(--border-strong); --_bg-hover: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-height); min-width: var(--touch-min); padding: 0 var(--space-5);
  border: 1px solid var(--_border); border-radius: var(--btn-radius);
  background: var(--_bg); color: var(--_fg);
  font-weight: 600; font-size: var(--text-base); line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-instant);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.btn:hover { background: var(--_bg-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { --_bg: var(--primary); --_fg: var(--on-primary); --_border: transparent; --_bg-hover: var(--primary-hover); box-shadow: var(--glow-primary); }
.btn-accent { --_bg: var(--accent); --_fg: var(--on-accent); --_border: transparent; --_bg-hover: var(--accent-hover); }
.btn-success { --_bg: var(--success); --_fg: var(--on-success); --_border: transparent; --_bg-hover: var(--success); }
.btn-danger { --_bg: var(--danger); --_fg: var(--on-danger); --_border: transparent; --_bg-hover: var(--danger); }
.btn-danger-quiet { --_fg: var(--danger); --_border: var(--border); }
.btn-ghost { --_bg: transparent; --_border: transparent; --_bg-hover: var(--surface-sunken); }
.btn-soft { --_bg: var(--primary-soft); --_fg: var(--on-primary-soft); --_border: transparent; --_bg-hover: var(--primary-soft); }
.btn-sm { min-height: var(--btn-height-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-lg { min-height: var(--btn-height-lg); padding: 0 var(--space-6); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: var(--btn-height); }
.btn-icon.btn-sm { width: var(--btn-height-sm); }
.btn[aria-pressed='true'], .btn.is-live { --_border: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); --_bg: var(--primary-soft); --_fg: var(--on-primary-soft); }
.btn .spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ---------- card ---------- */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--space-5); }
.card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title { font-size: var(--text-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-2); }
.card-title .icon { color: var(--primary-text); }
.card-sub { color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- badges & status ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; background: var(--chip-bg); color: var(--text-muted); white-space: nowrap; }
.badge-primary { background: var(--primary-soft); color: var(--on-primary-soft); }
.badge-live { background: var(--live-soft); color: var(--live); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-count { min-width: 22px; justify-content: center; background: var(--accent); color: var(--on-accent); }
.badge-count.is-zero { background: var(--chip-bg); color: var(--text-muted); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex-shrink: 0; }
.status-dot.live { background: var(--live-dot); box-shadow: 0 0 0 0 var(--live-dot); animation: live-pulse 2s var(--ease-out) infinite; }
.status-dot.ok { background: var(--success); }
.status-dot.warn { background: var(--warning); }
.status-dot.bad { background: var(--danger); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-4); }
.label { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.hint { font-size: var(--text-sm); color: var(--text-muted); }
.field-error { font-size: var(--text-sm); color: var(--danger); font-weight: 600; display: flex; gap: var(--space-1); align-items: center; }
.field-error:empty { display: none; }
.input, .select, .textarea {
  width: 100%; min-height: var(--btn-height); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--text);
  font-size: var(--text-base); /* 16px stops iOS zoom-on-focus */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent); }
.input[aria-invalid='true'] { border-color: var(--danger); }
.textarea { min-height: 112px; resize: vertical; line-height: var(--leading-normal); }
.select { appearance: none; padding-right: var(--space-10); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.input-sm { min-height: var(--btn-height-sm); padding: var(--space-2) var(--space-3); }

.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); line-height: 1.45; cursor: pointer; min-height: var(--touch-min); padding: var(--space-2) 0; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); flex-shrink: 0; }

/* switch: a styled checkbox (role is still checkbox, so state is announced) */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--touch-min); cursor: pointer; font-size: var(--text-sm); }
.switch input { appearance: none; position: relative; width: 44px; height: 26px; flex-shrink: 0; margin: 0; border-radius: var(--radius-full); background: var(--border-strong); transition: background-color var(--dur-fast); cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-spring); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(18px); }

/* segmented control: radio group */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ---------- meter ---------- */
.meter { height: 12px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; border: 1px solid var(--border); }
.meter-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width var(--dur-base) var(--ease-out); }

/* ---------- stat (KPI) ---------- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  transform: translateX(-50%); width: min(92vw, 440px);
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--text); color: var(--text-inverse);
  font-weight: 600; box-shadow: var(--shadow-lg); animation: rise var(--dur-base) var(--ease-out);
}

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); }
.empty .icon { width: 32px; height: 32px; color: var(--text-subtle); }

.kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-muted); }

.offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) var(--space-2); background: var(--danger); color: var(--on-danger); font-weight: 600; font-size: var(--text-sm); }

.snow-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* trivia answer shape colours (shared by phone + arena) */
.ans-0 { --_ans: var(--ans-0); --_on: var(--on-ans-0); }
.ans-1 { --_ans: var(--ans-1); --_on: var(--on-ans-1); }
.ans-2 { --_ans: var(--ans-2); --_on: var(--on-ans-2); }
.ans-3 { --_ans: var(--ans-3); --_on: var(--on-ans-3); }

/* ---------- motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes enter { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live-dot) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 6px var(--highlight)); } 50% { filter: drop-shadow(0 0 22px var(--highlight)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}