/* [split 1/9] servbg.com stylesheet: base, tokens, reset. Split from style.css on 2026-10-12 (lines 1-88 of the original); the nine css/*.css parts load in numbered order, then the terminal css/app.css. See style.css stub. */
/* SERVBG Tools Portal - Green Terminal Theme v2 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Skip link (site-chrome spec "Skip link on every page"): hidden until keyboard focus. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10000; background: var(--bg-secondary, #161b22); color: var(--accent, #3fb950); border: 1px solid var(--accent, #3fb950); border-radius: 6px; padding: 8px 14px; font: 600 14px var(--font-ui, sans-serif); text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: 8px; outline: 2px solid var(--accent, #3fb950); outline-offset: 2px; }
#main:focus, #dosTerminal:focus { outline: none; }
:root {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-card: #1c2128;
  --bg-console: #0a0c10;
  --border-color: #30363d;
  --border-hover: #484f58;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #8b949e; /* 2026-09-17: was #6e7681 (3.9:1) */
  --accent: #3fb950;
  --accent-hover: #56d364;
  --accent-dim: rgba(63, 185, 80, 0.15);
  --accent-border: rgba(63, 185, 80, 0.4);
  --warning: #d29922;
  --warning-dim: rgba(210, 153, 34, 0.15);
  --error: #f85149;
  --error-dim: rgba(248, 81, 73, 0.1);
  --info: #58a6ff;
  --info-dim: rgba(88, 166, 255, 0.1);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* 2026-10-04: was var(--font-ui) (Inter) — nothing asking for mono actually rendered mono; see docs/DESIGN.md */

  /* Radius identity (2026-09-26). The sheet had 3/4/5/6/7/8/10/12/20px scattered
     across equivalent controls with no stated rule. These four steps are the ones
     the UI actually renders, so swapping a literal for its token changes nothing
     on screen; new work picks a step instead of inventing a number.
       sm  chips, badges, small inputs, compact buttons
       md  buttons, inputs, tabs, list rows
       lg  cards, modals, answer/level buttons
       xl  flyouts, stat cards, achievement tiles */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Stacking scale. ONE ladder for the whole site: js/app.js reads these tokens
     at startup and publishes them as window.SBG_Z, which js/dos.js reads for its
     fullscreen overlays. Before 2026-09-26 the JS kept its own 2500/9999/10000/
     10001 numbers while this block claimed to have replaced them, so a toast
     silently outranked every layer named here. The values below are the ones
     actually shipping, so naming them changed no order:
       raised   10     small lifts inside a card
       sticky   100    sticky headers, the in-panel #biosOverlay
       flyout   1200   rail flyouts, the employer drawer (1201) and submodal (1300)
       banner   2000   cookie consent
       modal    2100   .modal-overlay, above the cookie banner
       duel     2500   the ?duel=1 challenge strip (js/app.js)
       modal-top 3000  the maximized terminal, employer sub-dialogs
       toast    9999   sbgToast + the sign-in banners (js/app.js). 9999, not the
                       4000 this block used to claim: a toast fired during a
                       fullscreen game has always drawn over the canvas, and
                       lowering it to 4000 would have changed that.
       fullscreen 9999 dos.js full-viewport canvases (matrix, Sopwith, DOOM)
       fs-controls 10000 touch zones and the exit button drawn over the canvas
       fs-buttons  10001 round FIRE / quit buttons, above the touch zones */
  --z-raised: 10;
  --z-sticky: 100;
  --z-flyout: 1200;
  --z-banner: 2000;
  --z-modal: 2100;
  --z-duel-banner: 2500;
  --z-modal-top: 3000;
  --z-toast: 9999;
  --z-fullscreen: 9999;
  --z-fs-controls: 10000;
  --z-fs-buttons: 10001;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}