/* ═══════════════════════════════════════════════════════════════════════
   SHELL — system switcher + chrome shared between General Law and
   State Treasury. Relies on the color tokens already defined in
   law.styles.css (loaded first), so this file only adds what's new.

   Those tokens are remapped onto the Oceanview palette by the
   `data-ov-bridge="statecivic"` block in oceanview.css, so `var(--gold)` here
   resolves to the in-game blue rather than to brass. Anything below that was
   written as a literal colour could not be reached by that remap and has been
   moved onto a variable; the couple of places where the legacy vocabulary has
   no token for what is needed reach for the --ov-* token directly, with the
   legacy value as the fallback so this file still stands alone.
   ═══════════════════════════════════════════════════════════════════════ */

.system-switch{
  display:flex; align-items:center; gap:4px;
  margin-left: 18px;
  /* both of these were literal colours the remap could not reach: a white
     overlay that disappears on the light theme's light header plate, and a
     brass hairline rgba(217,182,112,0.18) that stayed gold around a blue
     control. Both now follow the theme. */
  background: var(--surface-wash);
  border: 1px solid var(--header-line);
  border-radius: 10px;
  padding: 3px;
}
.system-tab{
  font-family: var(--sans); font-size:12.5px; font-weight:600;
  /* An inactive tab is de-emphasised with a real colour step, not with
     opacity — opacity pushes text under the contrast floor, and this label is
     12.5px. --ov-text-secondary is a measured 8.4:1. */
  color: var(--ov-text-secondary, var(--header-fg));
  padding: 7px 14px; border-radius: 7px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.system-tab:hover{ color: var(--ov-text-primary, var(--header-fg)); background: var(--ov-surface-active, rgba(255,255,255,0.05)); }
.system-tab.active{
  background: var(--gold);
  /* --header-bg on the accent blue is only 4.30:1 — under the floor for a
     12.5px label. --ov-text-on-accent is the token for text on an accent fill
     and is not to be tinted. The legacy fallback keeps the brass palette's
     dark-on-gold reading if oceanview.css is absent. */
  color: var(--ov-text-on-accent, var(--header-bg));
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

@media (max-width: 880px){
  .system-switch{ margin-left: auto; }
  .system-tab{ padding: 7px 10px; font-size:11.5px; }
}
@media (max-width: 620px){
  .header-title{ display:none; }
  .system-switch{ margin-left: 8px; }
}