/* Classic / Next interface switch (app/ui-mode.js) — the ONLY addition visible in Classic. Desktop: a quiet two-way segmented
   control in the top bar. Phone: the top bar has no room (it would widen the page), so the switch is one compact item at the
   end of the bottom navigation bar. Own classes only; app.css / tokens.css stay the Classic baseline. */
.ui-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--inset); flex: 0 0 auto; }
.ui-switch button { min-height: 24px; padding: 0 9px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--muted); font: 600 11.5px var(--sans); cursor: pointer; white-space: nowrap; }
.ui-switch button:hover { color: var(--text); }
.ui-switch button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.ui-switch.compact { display: none; }
[data-ui="classic"] .brand-logo { display: none; } /* Next's provisional logo, if inserted before switching back */
@media (max-width: 640px) {
  .topbar .ui-switch { display: none; }
  .bottombar:has(.ui-switch) { grid-template-columns: repeat(4, minmax(0, 1fr)) 58px; }
  .bottombar .ui-switch.compact { display: grid; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
  .bottombar .ui-switch.compact button { display: grid; justify-items: center; gap: 2px; min-height: 40px; padding: 6px 2px; font: 600 10.5px var(--sans); color: var(--muted); }
  .bottombar .ui-switch.compact svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}