/* ui/ChassisToggle — the Ships / Tanks toggle. Contract: ./ChassisToggle.spec.md */

.qc-chassis {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--qc-line-strong);
  border-radius: 6px;
  background: var(--qc-space-1);
}

.qc-chassis__option {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 110px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--qc-text-dim);
  cursor: pointer;
  transition: background var(--qc-dur-fast, 120ms) ease, color var(--qc-dur-fast, 120ms) ease, box-shadow var(--qc-dur-fast, 120ms) ease;
}
.qc-chassis__option:disabled { cursor: default; opacity: 0.55; }
.qc-chassis__option:focus-visible { outline: 2px solid var(--qc-accent-2); outline-offset: 2px; }

.qc-chassis__label {
  font-family: var(--qc-font-display, var(--qc-font-ui));
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.qc-chassis__feel {
  font-family: var(--qc-font-mono);
  font-size: 10px;
  opacity: 0.8;
}

.qc-chassis__option[data-chassis="ship"][aria-pressed="true"] {
  --qc-lit: var(--qc-accent);
}
.qc-chassis__option[data-chassis="tank"][aria-pressed="true"] {
  --qc-lit: var(--qc-mode-tanks);
}
.qc-chassis__option[aria-pressed="true"] {
  color: var(--qc-text);
  border-color: var(--qc-lit);
  background: color-mix(in srgb, var(--qc-lit) 16%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--qc-lit) 35%, transparent);
}

/* The top bar's size: labels only, 40 px tall, inside a 48 px phone bar. */
.qc-chassis[data-size="compact"] { padding: 2px; gap: 2px; }
.qc-chassis[data-size="compact"] .qc-chassis__option { min-width: 52px; min-height: 36px; padding: 4px 8px; }
.qc-chassis[data-size="compact"] .qc-chassis__feel { display: none; }
/* On a phone the words sit closer, each its own width rather than the longer
   one's twice: "TANQUES", "CZOŁGI" and "КОРАБЛИ" run longer than TANKS, and
   the pilot readout beside the toggle shares the bar. */
@media (max-width: 899px) {
  .qc-chassis[data-size="compact"] { grid-template-columns: auto auto; }
  .qc-chassis[data-size="compact"] .qc-chassis__option { padding: 4px 6px; }
  .qc-chassis[data-size="compact"] .qc-chassis__label { font-family: var(--qc-font-ui); font-size: 12px; letter-spacing: 0.06em; }
}
.qc-chassis[data-size="compact"] .qc-chassis__label { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .qc-chassis__option { transition: none; }
}