/* 42 Beirut design tokens and shared components for every Lockdown page.
   Load after common/fonts.css and before the page's own stylesheet. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0b121d;              /* page */
  --bg-inset: #0f1621;        /* editor, code, ticker, wells, inputs */
  --surface: #151b24;         /* panels, rows, cards, dialogs, drawer */
  --surface-2: #1c222b;       /* table head, keypad keys, hover */
  --surface-3: #262d38;       /* pressed, empty milestone segment */
  --border: #282e38;          /* hairlines */
  --border-strong: #3d4757;   /* inputs, table-head rule, dialog edge */
  --scrim: rgba(7, 11, 20, .88);

  /* text */
  --text: #e1e5ea;            /* 14.8:1 on --bg */
  --text-strong: #ffffff;
  --muted: #9aa4b2;           /* 7.4:1 */
  --faint: #6e7681;           /* disabled, empty-value glyph, credit line only */

  /* brand */
  --primary: #04809f;         /* fills, rules, bars, large text */
  --primary-hover: #036a84;   /* button hover (white 6.2:1) and hero shadow */
  --primary-text: #1aa0bf;    /* small teal text and links (6.1:1) */
  --primary-bright: #6bcde9;  /* final milestone, SQL keywords, first-in-act (10.3:1) */
  --primary-dim: rgba(4, 128, 159, .16);
  --primary-surface: #112d38; /* selected/own/top row, active tile */
  --on-primary: #ffffff;
  --focus: #6bcde9;

  /* status */
  --success: #46b06a;  --success-dim: rgba(70, 176, 106, .14);  --success-deep: #1f7a45;
  --warning: #d99a2b;  --warning-dim: rgba(217, 154, 43, .14);  --warning-deep: #6b4a0e;
  --danger:  #fc5950;  --danger-dim:  rgba(252, 89, 80, .14);   --danger-deep:  #a83232;

  /* admin heatmap: time on level vs median (admin/logic.js stuckBucket) */
  --heat-0: var(--primary);        --heat-0-ink: #ffffff;  /* < 0.75x  ahead   */
  --heat-1: var(--border-strong);  --heat-1-ink: #ffffff;  /* < 1.25x  on pace */
  --heat-2: var(--warning);        --heat-2-ink: #0b121d;  /* < 2x     slow    */
  --heat-3: var(--danger-deep);    --heat-3-ink: #ffffff;  /* >= 2x    stuck   */

  /* CodeMirror (cm-s-lockdown) */
  --cm-bg: var(--bg-inset);  --cm-gutter: var(--faint);
  --cm-active: rgba(4, 128, 159, .08);  --cm-sel: rgba(4, 128, 159, .32);  --cm-cursor: var(--focus);
  --cm-kw: #6bcde9;  --cm-type: #8ca1b7;  --cm-str: #9fd4a3;  --cm-num: #f0b866;
  --cm-atom: #f0b866; --cm-com: #6e7681;  --cm-op: #9aa4b2;

  /* type */
  --font-heading: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --radius: 0;
  --rule: 3px;                                   /* ruled-block left rule */
  --bar-w: 48px; --bar-h: 4px;                   /* accent bar under a heading */
  --shadow-hard: 8px 8px 0 0 rgba(4, 128, 159, .18);
  --shadow-hero: 5px 5px 0 var(--primary-hover);
  --shadow-menu: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .35);

  /* space: 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms; --t: 200ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-inset: #f7f9fa; --surface: #ffffff; --surface-2: #f0f6f8; --surface-3: #e2e5e8;
  --border: #c9ced4; --border-strong: #8a929c; --scrim: rgba(11, 28, 44, .72);
  --text: #0f171f; --text-strong: #0b1c2c; --muted: #3c434d; --faint: #6b727e;
  --primary: #04809f; --primary-hover: #036a84; --primary-text: #036a84; --primary-bright: #04809f;
  --primary-dim: rgba(4, 128, 159, .10); --primary-surface: #edf6f8; --focus: #04809f;
  --success: #1f7a45;  --success-dim: rgba(47, 158, 82, .12);  --success-deep: #1f7a45;
  --warning: #8f5d06;  --warning-dim: rgba(200, 134, 10, .12); --warning-deep: #6b4a0e;
  --danger:  #c10007;  --danger-dim:  rgba(220, 38, 38, .08);  --danger-deep:  #a83232;
  --heat-1: #c9ced4; --heat-1-ink: #0f171f;
  --heat-2: #d99a2b; --heat-2-ink: #0f171f;
  --cm-active: rgba(4, 128, 159, .06); --cm-sel: rgba(4, 128, 159, .18); --cm-cursor: #036a84;
  --cm-kw: #036a84; --cm-type: #3c4f66; --cm-str: #1f7a45; --cm-num: #8f5d06;
  --cm-atom: #8f5d06; --cm-com: #6b727e; --cm-op: #3c434d;
  --shadow-hero: 5px 5px 0 #c1e6ed;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font: 400 15px/1.55 var(--font-sans); font-variant-numeric: tabular-nums; }
body { margin: 0; background: var(--bg); color: var(--text); text-wrap: pretty; }
h1, h2, h3, .heading { font-family: var(--font-heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; margin: 0; }
code, kbd, .mono { font-family: var(--font-mono); }
/* JetBrains Mono's code ligatures draw <> >= != ->> as glyphs players can't type. !important
   because screen rules set mono through the font shorthand, which resets ligatures, and
   CodeMirror turns them back on for its lines. */
*, ::before, ::after { font-variant-ligatures: none !important; }
a { color: var(--primary-text); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Logo: size it per screen with --logo-h */
.logo { height: var(--logo-h, 28px); width: auto; display: block; flex: none; color: var(--text-strong); }

/* Page shell and top bar */
.shell { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; align-items: center; gap: var(--s-4); height: 56px;
  padding: 0 var(--s-4); background: var(--bg); border-bottom: 2px solid var(--primary); }
.topbar .sep { width: 1px; align-self: stretch; margin: var(--s-3) 0; background: var(--border); }
.product { font: 700 15px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--text-strong); }
.screen-name { font: 500 14px/1 var(--font-sans); color: var(--muted); }
.topbar .end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

/* Accent bar and eyebrow (one eyebrow per screen at most) */
.accent-bar::after { content: ""; display: block; width: var(--bar-w); height: var(--bar-h);
  background: var(--primary); margin-top: 10px; }
.eyebrow { font: 500 13px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--primary-text); margin: 0 0 var(--s-3); }

/* Panel */
.panel { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.panel-head { display: flex; align-items: center; gap: var(--s-2); min-height: 44px;
  padding: 0 var(--s-4); border-bottom: 1px solid var(--border); }
.panel-title { font: 700 14px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--text-strong); }
.panel-count { font: 400 13px/1 var(--font-sans); color: var(--muted); }
.panel-body { padding: var(--s-4); overflow: auto; }

/* Stat strip: hairline cells */
.stats { display: grid; grid-auto-flow: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stat { background: var(--surface); padding: var(--s-2) var(--s-4); }
.stat-label { font: 500 12px/1.2 var(--font-sans); color: var(--muted); }
.stat-value { font: 700 18px/1.2 var(--font-mono); color: var(--text-strong); }

/* Table */
.table-wrap { background: var(--surface); border: 1px solid var(--border); overflow: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left;
  font: 700 11.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border-strong); }
.t td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover { background: var(--surface-2); }
.t .num { text-align: right; font-family: var(--font-mono); }
.t tr.sel { background: var(--primary-surface); box-shadow: inset 3px 0 0 var(--primary); }

/* Buttons: one .primary per view */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-4); border: 1px solid var(--border-strong); border-radius: 0;
  background: var(--surface-2); color: var(--text);
  font: 700 13px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--primary); color: var(--text-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.secondary { background: transparent; border-color: var(--primary); color: var(--primary-text); }
.btn.secondary:hover { background: var(--primary-dim); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text-strong); border-color: var(--border); }
.btn.small { height: 28px; padding: 0 var(--s-3); font-size: 11.5px; }
.btn.big { height: 48px; padding: 0 var(--s-5); font-size: 15px; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.small { width: 28px; }

/* Inputs */
.field { display: grid; gap: 6px; }
.field > span, .label { font: 500 13px/1.3 var(--font-sans); color: var(--muted); }
.input, select.input, textarea.input { height: 38px; padding: 0 var(--s-3); border: 1px solid var(--border-strong);
  border-radius: 0; background: var(--bg-inset); color: var(--text-strong); font: 400 15px/1 var(--font-sans); }
textarea.input { height: auto; padding: var(--s-2) var(--s-3); line-height: 1.5; }
.input.mono { font-family: var(--font-mono); }
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* Tag (.pill keeps its name; it is square) */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 0;
  font: 700 11.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em;
  background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok    { background: var(--success-dim); color: var(--success); }
.pill.warn  { background: var(--warning-dim); color: var(--warning); }
.pill.bad   { background: var(--danger-dim);  color: var(--danger); }
.pill.info  { background: var(--primary-dim); color: var(--primary-text); }
.pill.solid { background: var(--primary); color: var(--on-primary); }
.pill .dot { width: 6px; height: 6px; background: currentColor; }

/* Tabs (underline) and segmented filter */
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--border); }
.tab { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted);
  font: 700 12.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.tab:hover { color: var(--text-strong); }
.tab[aria-selected="true"], .tab.active { color: var(--text-strong); border-bottom-color: var(--primary); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); }
.segmented > button { height: 30px; padding: 0 var(--s-3); border: 0; background: none; color: var(--muted);
  font: 700 11.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.segmented > button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* Ruled block: banners, notices, errors, empty states. Empty states: one plain sentence. */
.ruled, .empty { border-left: var(--rule) solid var(--primary); padding: var(--s-2) 0 var(--s-2) var(--s-4); }
.ruled.ok { border-color: var(--success); }
.ruled.warn { border-color: var(--warning); }
.ruled.bad { border-color: var(--danger); background: var(--danger-dim); }
.ruled-title { font: 700 14px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
.empty { color: var(--muted); }

/* Connection banner (screens .conn-lost, console #conn-banner) */
.conn-lost { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 36px; display: grid; place-items: center;
  background: var(--danger-deep); color: #fff; font: 600 14px/1 var(--font-sans); }

/* Toast */
#toasts, .toasts { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 70; display: grid; gap: var(--s-2);
  width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--surface); border: 1px solid var(--border-strong); border-left: var(--rule) solid var(--primary);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-menu); font-size: 14px;
  animation: toast-in var(--t) var(--ease-out); }
.toast.ok { border-left-color: var(--success); }
.toast.warn { border-left-color: var(--warning); }
.toast.bad { border-left-color: var(--danger); }
.toast-title { font: 700 13px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Dialog: Cancel is .btn.ghost, then .btn.primary or .btn.danger */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--s-4); background: var(--scrim); }
.modal-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-hard); padding: var(--s-5); display: grid; gap: var(--s-4); }
.modal-card.wide { width: min(760px, 100%); }
.modal-title { font: 700 18px/1.15 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--text-strong); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

/* Login */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-4);
  grid-template-rows: 1fr auto; }
.login-card { align-self: center; width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--border); padding: var(--s-6); display: grid; gap: var(--s-4); }
.login-card .logo { --logo-h: 56px; }
.login-card > .eyebrow { margin-bottom: calc(-1 * var(--s-2)); }
.login-card h1 { font-size: 30px; color: var(--text-strong); }
.credit { font: 400 12px/1.4 var(--font-mono); color: var(--faint); text-align: center; padding: var(--s-4) 0; }

/* Icons: Lucide SVGs as CSS masks, painted with currentColor */
.i { display: inline-block; width: 1.1em; height: 1.1em; background: currentColor; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-menu          { --i: url(/static/vendor/lucide-static-1.55.0/menu.svg); }
.i-play          { --i: url(/static/vendor/lucide-static-1.55.0/play.svg); }
.i-chevron-down  { --i: url(/static/vendor/lucide-static-1.55.0/chevron-down.svg); }
.i-chevron-right { --i: url(/static/vendor/lucide-static-1.55.0/chevron-right.svg); }
.i-x             { --i: url(/static/vendor/lucide-static-1.55.0/x.svg); }
.i-delete        { --i: url(/static/vendor/lucide-static-1.55.0/delete.svg); }
.i-flag          { --i: url(/static/vendor/lucide-static-1.55.0/flag.svg); }
.i-arrow-up      { --i: url(/static/vendor/lucide-static-1.55.0/arrow-up.svg); }
.i-arrow-down    { --i: url(/static/vendor/lucide-static-1.55.0/arrow-down.svg); }
.i-lock          { --i: url(/static/vendor/lucide-static-1.55.0/lock.svg); }
.i-check         { --i: url(/static/vendor/lucide-static-1.55.0/check.svg); }
.i-copy          { --i: url(/static/vendor/lucide-static-1.55.0/copy.svg); }
.i-history       { --i: url(/static/vendor/lucide-static-1.55.0/history.svg); }
.i-log-out       { --i: url(/static/vendor/lucide-static-1.55.0/log-out.svg); }
.i-sun           { --i: url(/static/vendor/lucide-static-1.55.0/sun.svg); }
.i-moon          { --i: url(/static/vendor/lucide-static-1.55.0/moon.svg); }
.i-circle-alert  { --i: url(/static/vendor/lucide-static-1.55.0/circle-alert.svg); }

/* CodeMirror theme (editor.js sets theme: "lockdown") */
.cm-s-lockdown.CodeMirror { background: var(--cm-bg); color: var(--text); font-family: var(--font-mono); }
.cm-s-lockdown .CodeMirror-gutters { background: var(--cm-bg); border-right: 1px solid var(--border); }
.cm-s-lockdown .CodeMirror-linenumber { color: var(--cm-gutter); padding: 0 8px 0 6px; }
.cm-s-lockdown .CodeMirror-cursor { border-left: 2px solid var(--cm-cursor); }
.cm-s-lockdown .CodeMirror-selected, .cm-s-lockdown.CodeMirror-focused .CodeMirror-selected { background: var(--cm-sel); }
.cm-s-lockdown .CodeMirror-line::selection, .cm-s-lockdown .CodeMirror-line > span::selection,
.cm-s-lockdown .CodeMirror-line > span > span::selection { background: var(--cm-sel); }
.cm-s-lockdown .CodeMirror-activeline-background { background: var(--cm-active); }
.cm-s-lockdown .cm-keyword { color: var(--cm-kw); font-weight: 500; }
.cm-s-lockdown .cm-builtin, .cm-s-lockdown .cm-type { color: var(--cm-type); }
.cm-s-lockdown .cm-string, .cm-s-lockdown .cm-string-2 { color: var(--cm-str); }
.cm-s-lockdown .cm-number { color: var(--cm-num); }
.cm-s-lockdown .cm-atom { color: var(--cm-atom); }
.cm-s-lockdown .cm-comment { color: var(--cm-com); font-style: italic; }
.cm-s-lockdown .cm-operator { color: var(--cm-op); }
.cm-s-lockdown .cm-variable-2, .cm-s-lockdown .cm-bracket { color: var(--text); }
.cm-s-lockdown .CodeMirror-matchingbracket { color: var(--text-strong) !important; background: var(--primary-dim); outline: 0; }
/* beats vendor .CodeMirror pre.CodeMirror-line-like { color: inherit } */
.cm-s-lockdown.CodeMirror pre.CodeMirror-placeholder { color: var(--faint); }
.CodeMirror-hints { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
  box-shadow: var(--shadow-menu); font: 13.5px/1.4 var(--font-mono); }
.CodeMirror-hint { color: var(--text); border-radius: 0; padding: 2px 10px; }
li.CodeMirror-hint-active { background: var(--primary); color: var(--on-primary); }