/* Shared switch chrome; the two page stylesheets remain independent. */
.ui-version-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ui-version-switch:hover { background: var(--surface-2); }
.ui-version-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
body[data-ui-version="legacy"] .topbar { flex-wrap: wrap; height: auto; min-height: 72px; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
body[data-ui-version="legacy"] .nav-links { flex-wrap: wrap; min-width: 0; }
body[data-ui-version="legacy"] .top-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .top-actions { flex-wrap: wrap; }
  .topbar .brand { min-width: 0; }
  .ui-version-switch { padding: 7px 9px; }
}