/* bridgeops custom styles (the sonde look, the UI reference). Tailwind
   covers ~all of layout/typography/color; this file holds what it cannot. */

/* ==== docs/THEME.md: body typography + kill the stock browser chrome ====
   OS widgets read as an unfinished webpage next to the app's own
   controls. Values verbatim from THEME.md. */

/* Inter variable font, self-hosted (operator choice, 2026-08-02;
   rsms/inter v4.1, SIL OFL). First webfont in the app -- the THEME.md
   "system stack only" rule is superseded for the sans face. */
@font-face {
  font-family: 'InterVariable';
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  /* cv11: single-storey a; ss01: alternate digits -- real Inter
     feature axes now, not just hopeful hints to system fonts. */
  font-feature-settings: 'cv11', 'ss01';
}

/* UI scale (2026-08-02). Every size and spacing value is rem-based,
   so the root font size scales the whole app like browser zoom. 16px
   is the browser default; 17px ≈ the operator's GitHub-at-125%
   reference feel (text-sm 14 -> ~14.9px, text-xs 12 -> ~12.75px).
   Tune this one number to taste. */
html {
  font-size: 17px;
}

/* Number inputs: no native spinner arrows — type instead. */
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Checkboxes, radios, ranges pick up the app accent. */
input[type='checkbox'], input[type='radio'], input[type='range'] { accent-color: #2563eb; }

/* Selects: replace the browser arrow with a quiet inline-SVG chevron. */
select.input {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d5b54' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center; padding-right: 1.9rem;
}
.dark select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Themed scrollbars everywhere: thin, rounded, muted, transparent track. */
* { scrollbar-width: thin; scrollbar-color: rgba(120,128,140,0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(120,128,140,0.35); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(120,128,140,0.55); }
.dark * { scrollbar-color: rgba(148,155,170,0.28) transparent; }
.dark *::-webkit-scrollbar-thumb { background: rgba(148,155,170,0.28); }
.dark *::-webkit-scrollbar-thumb:hover { background: rgba(148,155,170,0.45); }

/* ==== Sidebar below md: an off-canvas drawer ====
   Fixed, slid out by default, brought in by html.sidebar-open
   (sidebar.js toggles it; backdrop click / Escape / nav click close).
   At md+ it is a plain 14rem column. */
@media (max-width: 767.98px) {
  [data-sidebar] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16rem;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 150ms ease;
  }
  html.sidebar-open [data-sidebar] { transform: translateX(0); }
  [data-sidebar-backdrop] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.5);
  }
  html.sidebar-open [data-sidebar-backdrop] { display: block; }
}

@media (min-width: 768px) {
  /* Desktop collapse = icon rail: never fully hidden; brand stays,
     labels drop, icons centre, tooltips via the items' title attrs.
     State in sessionStorage, applied pre-paint from base.html <head>. */
  html.sidebar-collapsed [data-app-grid] { grid-template-columns: 4rem 1fr; }
  html.sidebar-collapsed [data-sidebar] .nav-label { display: none; }
  html.sidebar-collapsed [data-sidebar] nav a {
    justify-content: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
  html.sidebar-collapsed [data-brand-row] {
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  html.sidebar-collapsed [data-brand] .nav-label { display: none; }
  html.sidebar-collapsed [data-brand] .brand-short { display: inline; }
  html.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
  html.sidebar-collapsed [data-sidebar] .sidebar-version { display: none; }
}

/* Sidebar (2026-09-19): pinned to the viewport; it still scrolls when
   the nav is taller than the window, but without a visible bar. */
[data-sidebar] { scrollbar-width: none; }
[data-sidebar]::-webkit-scrollbar { display: none; }

/* Sim page action tabs: the picked tab takes its section's colour
   (help green, chaos amber, admin red); stated here so the dark
   muted-text safety net cannot override it. */
.tab[data-tab="help"][aria-selected="true"] { color: #16a34a; }
.tab[data-tab="chaos"][aria-selected="true"] { color: #d97706; }
.tab[data-tab="admin"][aria-selected="true"] { color: #dc2626; }

/* Con-floor screens (2026-10-15): pinned to the TVs' 1920x1080. The
   frame is a size container, so the boards size in cqh/cqw and look
   the same on a 1080p TV (where the frame is the whole screen) and in
   a bigger window, where it sits centred with a border. */
.screen-frame {
  width: 1920px;
  height: 1080px;
  flex: none;
  margin: auto;
  padding: 2.5rem;
  overflow: hidden;
  container-type: size;
  /* 1920x1080 in device pixels: screen.js sets --screen-zoom to
     1/devicePixelRatio, so OS scaling or browser zoom cannot inflate
     the frame past the TV's real size. */
  zoom: var(--screen-zoom, 1);
}
/* screen.js adds html.screen-framed when the window is bigger than the
   frame in device pixels. */
html.screen-framed .screen-frame { border: 1px solid #414957; border-radius: 0.75rem; }