/* Shared progressive UI/UX layer — applied to every public route. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body { overflow-x: clip; }
.commercial p { text-wrap: pretty; }
.commercial :is(button, summary, a) { touch-action: manipulation; }

.commercial .theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
}
.commercial .theme-toggle:hover { background: var(--accent-soft); }
.commercial .language-switch a { min-width: 44px; min-height: 44px; }

.commercial :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px var(--surface);
}

@media (max-width: 650px) {
  body.commercial .theme-toggle {
    min-width: 38px !important;
    width: 38px !important;
    min-height: 38px !important;
    padding: 4px !important;
    font-size: 18px !important;
  }
  body.commercial .language-switch a {
    min-width: 34px !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }
  body.commercial .header-row {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  body.commercial .mobile-menu[open] > nav {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .commercial *, .commercial *::before, .commercial *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  .commercial { --line: currentColor; }
  .commercial :is(.button, .btn, .theme-toggle, .settings-group) { border-width: 2px; }
}

@media (forced-colors: active) {
  .commercial :is(.button, .btn, .theme-toggle, summary) { border: 1px solid ButtonText !important; }
  .commercial :is(a, button, summary):focus-visible { outline-color: Highlight !important; }
}