/* Shared layout and accessibility; hardware visualizations keep their own styles. */
:root {
  --muted: #abb9cd; --muted-2: #9eafc7;
  --suite-link-bg: linear-gradient(145deg, #202838, #172030);
  --suite-link-shadow: 3px 3px 7px rgba(0,0,0,.45), -3px -3px 7px rgba(255,255,255,.06);
}
:root[data-theme="light"] {
  --muted: #46566d; --muted-2: #50617a; --blue: #1565d8;
  --button-text: #33465f; --text-dim: #435670; --label: #3d506b; --label-strong: #23344d;
  --suite-link-bg: linear-gradient(145deg, #ffffff, #e9eef6);
  --suite-link-shadow: 3px 3px 7px rgba(20,30,50,.12), -3px -3px 7px rgba(255,255,255,.9);
}
:root[data-theme="light"] .brand-name { color: #23344d; }
:root[data-theme="light"] .video-frame .start-card p,
:root[data-theme="light"] .visualizer-shell .start-card p { color: #bbc8d9; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { overflow-x: visible; }
.app { min-width: 0; max-width: 1640px; }
.app > *, .topbar > *, .panel > *, .stats-grid > *, .settings > *, .side > * { min-width: 0; }
.topbar { grid-template-columns: minmax(220px,auto) minmax(0,1fr) auto; }
.toolbar, .modebar, .settings, .settings-row { flex-wrap: wrap; max-width: 100%; }
.toolbar, .modebar { overflow: visible; }
.topbar .toolbar, .topbar .modebar { height: auto; min-height: 58px; }
.settings { width: auto; }
.settings-row { justify-content: center; }
.scale-row input { min-width: 0; }
.suite-nav {
  display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px;
  margin: 0 0 16px; padding: 8px 9px; border-radius: 18px;
  background: var(--panel-bg); border: 1px solid var(--border-soft);
  box-shadow: 0 10px 22px var(--shadow), inset 0 1px 0 var(--inset-hi-soft);
}
.suite-nav-link {
  min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--suite-link-bg); border: 1px solid var(--border-soft);
  box-shadow: var(--suite-link-shadow), inset 0 1px 0 var(--inset-hi-soft);
  color: var(--button-text); text-decoration: none;
  font: 800 12px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing: .3px;
  white-space: nowrap; transition: color .12s, transform .08s, box-shadow .12s, filter .12s;
}
.suite-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.suite-nav-link:hover { color: var(--blue); filter: brightness(1.06); }
.suite-nav-link:active { transform: translateY(1px); }
.suite-nav-link[aria-current="page"] {
  color: var(--blue); border-color: var(--blue);
  box-shadow: inset 0 0 20px rgba(47,140,255,.12), var(--suite-link-shadow);
}
.suite-page-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.suite-skip { position: fixed; top: -100px; left: 16px; z-index: 100000; padding: 12px 18px; border-radius: 8px; background: #122843; color: white; }
.suite-skip:focus { top: 12px; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:where(button,a,input,select,summary,[tabindex]):focus-visible { outline: 3px solid var(--blue,#69a8ff); outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
dialog { max-width: min(640px,calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.toast, #toast { pointer-events: none; max-width: calc(100vw - 32px); width: max-content; }
.seo-about { overflow-wrap: anywhere; }
.seo-about a { text-underline-offset: 3px; }
.stats-card .val { overflow-wrap: anywhere; }
html[data-tool="Keyboard"] .keyboard-shell { width: 100%; max-width: 100%; overflow-x: auto; margin: 0; overscroll-behavior-x: contain; scrollbar-color: var(--blue) transparent; }
html[data-tool="Keyboard"] .keyboard-grid { margin-inline: auto; }
html[data-tool="Keyboard"] .toolbar { gap: 8px; }
html[data-tool="Keyboard"] .toolbar button { min-height: 40px; padding: 10px 12px; font-size: 12px; white-space: nowrap; }
#captureBtn { min-width: 154px; }
#captureBtn[aria-pressed="true"] { color: var(--green); }
html[data-tool="index"] .topbar { grid-template-columns: 200px minmax(0,1fr) auto; }
@media (max-width: 1300px) {
  .topbar { grid-template-columns: auto minmax(0,1fr); }
  .topbar > .settings { justify-content: center; }
  .topbar > .modebar { justify-content: center; }
}
@media (max-width: 980px) {
  body { padding: 12px; }
  .app { width: 100%; min-width: 0; }
  .topbar { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .toolbar, .modebar, .settings { justify-content: center; }
  .suite-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .toolbar-divider { display: none; }
  .drag-layout, .poll-layout, .vis-layout, .gamut-layout, .wheel-layout { grid-template-columns: minmax(0,1fr); }
  .panel, .side, .visualizer-shell, .video-frame { min-width: 0; }
  .view-tabs { flex-wrap: wrap; }
  html[data-tool="Keyboard"] .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-tool="Keyboard"] .stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .suite-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .suite-nav-link { min-height: 44px; }
  .topbar .toolbar, .topbar .modebar, .topbar .settings { padding: 10px; }
  .topbar .modebar { gap: 6px; padding: 6px; }
  .topbar .modebar .tab { padding: 10px 9px; font-size: 12px; }
  .settings { gap: 8px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .panel-buttons { padding: 12px; }
  .mouse-visual { min-height: 340px; }
  .mouse-svg { max-width: 100%; }
  .poll-stats, .rollover-metrics, .pedals-grid, .gamut-grid { grid-template-columns: minmax(0,1fr); }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric { min-width: 0; padding: 10px; }
  .metric span { overflow-wrap: anywhere; }
  html[data-tool="Keyboard"] .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-tool="Keyboard"] .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seo-about { padding: 18px !important; }
  .floating-controls { max-width: calc(100vw - 24px); flex-wrap: wrap; }
  #test-info { display: none; }
  #controllerPills { display: flex; flex-wrap: wrap; gap: 6px; }
  .ctrl-info { flex-wrap: wrap; }
  .ctrl-id-block { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ctrl-id-block .ctrl-name { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .ctrl-status-block { flex-wrap: wrap; min-width: 0; }
  .vis-svg-shell, .wheel-svg-shell { min-height: 260px; padding: 12px; }
  .log-shell, .scroll-list-shell { height: 280px; }
  .panel-drag .stats-grid, .panel-poll .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .drag-control-group { flex-wrap: wrap; }
  .color-swatch { padding: 0; flex: 0 0 30px; width: 30px; height: 30px; }
  .panel-drag, .panel-poll { padding: 14px; }
  html[data-tool="index"] .topbar { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (forced-colors: active) {
  button, a, .panel, .key { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
}

/* ===== BeogradPC navigation in the same row as the test links (as on Garden / Finance) =====
   The shared bpc-navigation.js replaces the #bpc-no-legacy placeholder at the start of
   .suite-nav (test pages) and .quick-nav (index) with its beogradpc.com / Previous page /
   Back to top group. Breakpoints follow the width of the nav row itself (container queries),
   because Monitor's layout is narrower than the other pages at the same screen width. */
.suite-nav, .quick-nav { container: bpcnav / inline-size; }
.suite-nav { display: flex; flex-wrap: wrap; align-items: center; }
.suite-nav > .suite-nav-link { flex: 1 1 auto; }
.quick-nav { flex-wrap: wrap; height: auto; min-height: 58px; align-items: stretch; }
.suite-nav > #bpc-navigation, .quick-nav > #bpc-navigation { flex: 0 0 auto; align-self: center; margin-right: 3px; }
/* Tight row: the home control keeps only its icon (label stays in title / aria-label). */
@container bpcnav (max-width: 1170px) {
  :is(.suite-nav, .quick-nav) > #bpc-navigation .bpc-nav-home span { display: none; }
  :is(.suite-nav, .quick-nav) > #bpc-navigation .bpc-nav-home { width: 40px; padding: 0; }
}
/* Too narrow for one row: the BeogradPC group takes its own line inside the same panel. */
@container bpcnav (max-width: 1050px) {
  :is(.suite-nav, .quick-nav) > #bpc-navigation { flex: 0 0 100%; margin: 0 0 2px; }
  :is(.suite-nav, .quick-nav) > #bpc-navigation .bpc-nav-home span { display: inline; }
  :is(.suite-nav, .quick-nav) > #bpc-navigation .bpc-nav-home { width: auto; padding: 0 11px; }
}
@container bpcnav (max-width: 900px) { .suite-nav > .suite-nav-link { flex: 1 1 calc(25% - 6px); } }
@container bpcnav (max-width: 545px) { .suite-nav > .suite-nav-link { flex: 1 1 calc(50% - 4px); } }