/* Components. Class names are BEM-ish and framework-neutral; each block maps to one Vue component.
   Needs tokens.css, fonts/fonts.css, base.css. */

/* ---------- button ---------- */
.btn {
  --btn-bg: rgb(var(--fg-rgb) / 0.06);
  --btn-fg: var(--c-text);
  --btn-line: var(--c-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  border: 1px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--fs-body)/1 var(--font-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { --btn-bg: rgb(var(--fg-rgb) / 0.11); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn .ico { width: 20px; height: 20px; }

/* primary = the one action colour (gold in option D, orange in the RocketCode themes) */
.btn--primary { --btn-bg: var(--fill-primary); --btn-fg: var(--c-on-primary); --btn-line: var(--c-primary); box-shadow: var(--sh-primary); }
.btn--primary:hover { --btn-bg: var(--fill-primary-hover); box-shadow: var(--sh-primary-hover); }
.btn--primary:active { --btn-bg: var(--c-primary-pressed); }
.btn--secondary { --btn-bg: transparent; }
.btn--danger { --btn-bg: rgb(var(--danger-rgb) / 0.12); --btn-fg: var(--c-danger); --btn-line: rgb(var(--danger-rgb) / 0.6); }
.btn--danger:hover { --btn-bg: rgb(var(--danger-rgb) / 0.2); }
.btn--ghost { --btn-bg: transparent; --btn-line: transparent; }
.btn--ghost:hover { --btn-bg: rgb(var(--fg-rgb) / 0.07); }
.btn--icon { width: var(--tap); padding: 0; border-radius: 50%; }
.btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-small); border-radius: var(--r-sm); }
.btn--sm.btn--icon { width: 36px; }
.btn--lg { min-height: 56px; padding: 0 var(--sp-7); font-size: var(--fs-body-lg); border-radius: var(--r-lg); }
.btn--block { display: flex; width: 100%; }

/* ---------- panel (glass) ---------- */
.panel {
  position: relative;
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-inset-line);
  padding: var(--sp-4);
}
.panel--solid { background: var(--c-glass-strong); }
.panel--active { border-color: var(--c-line-strong); box-shadow: var(--sh-2), 0 0 0 1px rgb(var(--signal-rgb) / 0.25); }
.panel__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.panel__title { font: 500 var(--fs-h3)/var(--lh-h3) var(--font-display); }

/* ---------- modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--sp-4);
  background: var(--c-scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-scrim--inline { position: relative; inset: auto; min-height: 320px; border-radius: var(--r-lg); }
.modal {
  width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--c-void-raised); border: 1px solid var(--c-line-strong); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: var(--sp-5);
}
.modal__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.modal__title { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-display); flex: 1; }
.modal__body { color: var(--c-text-2); }
.modal__actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 480px) { .modal__actions .btn { flex: 1; } }

/* ---------- toast ---------- */
.toast-stack { position: fixed; z-index: var(--z-toast); left: 50%; top: max(var(--sp-3), env(safe-area-inset-top)); transform: translateX(-50%);
  display: grid; gap: var(--sp-2); width: min(420px, calc(100% - 24px)); pointer-events: none; }
.toast-stack--inline { position: static; transform: none; width: min(420px, 100%); }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); pointer-events: auto;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--c-glass-strong); border: 1px solid var(--c-line); box-shadow: var(--sh-2);
  font-size: var(--fs-small);
}
.toast .ico { width: 20px; height: 20px; }
.toast--success { border-color: rgb(var(--success-rgb) / 0.5); } .toast--success .ico { color: var(--c-success); }
.toast--error { border-color: rgb(var(--danger-rgb) / 0.55); } .toast--error .ico { color: var(--c-danger); }
.toast--warning { border-color: rgb(var(--warning-rgb) / 0.55); } .toast--warning .ico { color: var(--c-warning); }
.toast__text { flex: 1; min-width: 0; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-line-neutral); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; min-height: var(--tap); padding: 0 var(--sp-4); border: 0; background: none;
  color: var(--c-text-2); font: 500 var(--fs-small)/1 var(--font-body); white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--c-text); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px;
  background: var(--c-gold); border-radius: 2px; box-shadow: 0 0 10px rgb(var(--signal-rgb) / 0.6);
}

/* segmented control (mode and option pickers) */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-md); background: rgb(var(--fg-rgb) / 0.05); border: 1px solid var(--c-line-neutral); }
.seg button { min-height: 38px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text-2); font: 500 var(--fs-small) var(--font-body); }
.seg button[aria-pressed="true"] { background: var(--c-gold); color: var(--c-text-on-gold); }

/* ---------- toggle ---------- */
.toggle { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track {
  position: relative; width: 46px; height: 26px; flex: none; border-radius: var(--r-pill);
  background: rgb(var(--fg-rgb) / 0.12); border: 1px solid var(--c-line-neutral);
  transition: background var(--dur-fast) var(--ease-standard);
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-pearl); box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-spring);
}
.toggle input:checked + .toggle__track { background: var(--c-gold); border-color: var(--c-gold); }
.toggle input:checked + .toggle__track::after { transform: translateX(20px); background: var(--c-void); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ---------- slider ---------- */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); background: none; margin: 0;
  --pct: 50%; }
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-gold) var(--pct), rgb(var(--fg-rgb) / 0.16) var(--pct)); }
.slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(var(--fg-rgb) / 0.16); }
.slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--c-gold); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--c-pearl); border: 3px solid var(--c-gold); box-shadow: 0 0 12px rgb(var(--signal-rgb) / 0.5); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c-pearl); border: 3px solid var(--c-gold); }

/* ---------- progress (hairline with glowing head) ---------- */
.progress { --value: 0.5; --bar: var(--c-gold); position: relative; height: 4px; border-radius: 2px; background: rgb(var(--fg-rgb) / 0.1); }
.progress__fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--value) * 100%); border-radius: inherit; background: var(--bar);
  transition: width var(--dur-slow) var(--ease-standard);
}
.progress__fill::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--bar); box-shadow: 0 0 10px var(--bar), 0 0 3px var(--bar);
}
.progress--thin { height: 2px; }
.progress--indeterminate { overflow: hidden; }
.progress--indeterminate .progress__fill { width: 30%; animation: progress-slide 1400ms var(--ease-linear) infinite; }
@keyframes progress-slide { from { left: -30%; } to { left: 100%; } }

/* ---------- badge and chip ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-text-on-gold);
  font: 500 var(--fs-caption)/1 var(--font-mono);
}
.badge--outline { background: none; color: var(--c-gold); border: 1px solid var(--c-line-strong); }
.badge--danger { background: var(--c-danger); color: var(--c-void); }
.chip {
  --chip: var(--c-text-2);
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 6px;
  border-radius: var(--r-pill); border: 1px solid var(--chip); color: var(--chip);
  background: rgb(var(--bg-rgb) / 0.85); font: 500 var(--fs-small)/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.chip .ico { width: 16px; height: 16px; --icon-stroke: 2; }
.chip--alloy { --chip: var(--c-alloy); }
.chip--power { --chip: var(--c-power); }
.chip--ordnance { --chip: var(--c-ordnance); }
.chip--armour { --chip: var(--c-pearl); }
.chip--short { border-style: dashed; opacity: 0.9; }

/* ---------- tooltip ---------- */
.tip { position: relative; display: inline-flex; }
.tip__bubble {
  position: absolute; z-index: var(--z-overlay); bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: max-content; max-width: 240px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--c-pearl); color: var(--c-void); font: 500 var(--fs-label)/1.35 var(--font-body);
  box-shadow: var(--sh-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--c-pearl); }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble, .tip--open .tip__bubble { opacity: 1; transform: translate(-50%, 0); }

/* ---------- avatar ---------- */
.avatar {
  --size: 44px;
  position: relative; width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2f63, var(--c-obsidian)); color: var(--c-text);
  display: grid; place-items: center; font: 500 calc(var(--size) * 0.38)/1 var(--font-display);
  box-shadow: 0 0 0 2px var(--c-void), 0 0 0 3.5px var(--seat);
}
.avatar:not([data-seat]) { --seat: var(--c-gold); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar__emblem {
  position: absolute; right: -4px; bottom: -4px; width: calc(var(--size) * 0.42); height: calc(var(--size) * 0.42); min-width: 14px; min-height: 14px;
  padding: 2px; border-radius: 50%; background: var(--c-void); color: var(--seat);
}
.avatar__emblem svg { width: 100%; height: 100%; }
.avatar--xs { --size: 24px; }
.avatar--sm { --size: 32px; }
.avatar--lg { --size: 72px; }
.avatar--active { box-shadow: 0 0 0 2px var(--c-void), 0 0 0 3.5px var(--seat), 0 0 16px 2px rgb(var(--seat-rgb, 255 210 122) / 0.6); }

/* ---------- form field ---------- */
.field { display: grid; gap: 6px; }
.field__label { font: 500 var(--fs-small)/1.3 var(--font-body); color: var(--c-text-2); }
.field__input {
  min-height: 48px; padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--c-line-neutral);
  background: rgb(var(--bg-rgb) / 0.7); color: var(--c-text); font-size: 16px; /* 16px stops iOS zoom */
}
.field__input::placeholder { color: var(--c-text-3); }
.field__input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgb(var(--signal-rgb) / 0.18); }
.field--error .field__input { border-color: var(--c-danger); }
.field__hint { font-size: var(--fs-label); color: var(--c-text-3); }
.field--error .field__hint { color: var(--c-danger); }
.code-input { display: flex; gap: var(--sp-2); }
.code-input input { width: 0; flex: 1; min-width: 0; height: 56px; text-align: center; font: 500 22px var(--font-mono); padding: 0; }

/* ---------- list rows ---------- */
.list { display: grid; }
.list__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line-neutral); }
.list__row:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
.list__sub { font-size: var(--fs-label); color: var(--c-text-3); }

/* ---------- top bar used by menu screens ---------- */
.topbar { display: flex; align-items: center; gap: var(--sp-2); min-height: 56px; padding: var(--sp-2) var(--sp-3); }
.topbar__title { flex: 1; font: 500 var(--fs-h3)/1.2 var(--font-display); text-align: center; }
.tip--start .tip__bubble { left: 0; transform: translate(0, 4px); }
.tip--start .tip__bubble::after { left: 18px; }
.tip--start:hover .tip__bubble, .tip--start:focus-within .tip__bubble, .tip--start.tip--open .tip__bubble { transform: none; }