:root {
  /* Shared show language. Color names are tape mappings, not status meanings. */
  --drum-caixa: #F2761B;
  --drum-repique: #E02A2A;
  --drum-surdo1: #2A4FC7;
  --drum-surdo2: #2EB54E;
  --drum-dobra: #F2D21F;
  --drum-spare: #8A8A8A;
  --drum-surdo: var(--drum-surdo1);
  --drum-repi: var(--drum-repique);
  --focus-ring: #FFFFFF;
  --touch-target: 44px;
}

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --landscape-control-height: 44px; }
  button, .btn, .mobile-tabbar a { min-height: var(--landscape-control-height); }
}