/* mode.css · the header switch "Mass Acceleration | ONE" (shared/mode.js), the same in both halves of the app.
   Layer: presentation · Pillar: 05 Marketing & Brand, 06 Technology & Systems · Owner: COO · Rev 0.1 · 2026-10-29
   Consumes: brand.css colour tokens (--ma-*)  Produces: .mode-switch, a two-part pill; the current part carries the accent */
.mode-switch { display: inline-flex; flex: none; padding: 3px; gap: 2px; border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-sm); background: var(--ma-surface); font-family: var(--ma-font); }
.mode-opt { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
  border-radius: 6px; color: var(--ma-text); font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mode-opt:hover { background: var(--ma-surface-2); }
.mode-opt[aria-current="page"] { background: var(--ma-accent); color: var(--ma-accent-text); }
.mode-opt:focus-visible { outline: 3px solid var(--ma-focus); outline-offset: 2px; }
@media (max-width: 799px) {
  .mode-switch { order: -1; flex-basis: 100%; }
  .mode-opt { flex: 1; min-height: 40px; }
}