/* BDE Surgeon Cell tools — shared design language for every page on the site.
   Operations-board look: olive-grey ground, deep teal accent, condensed display type, mono for data.
   Pages keep only their own layout CSS and take every colour and font from these tokens. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root{
  color-scheme:light;
  --bg:#EEF0EA; --surface:#FBFCF9; --surface-2:#F3F5EF; --sunk:#E4E7DF;
  --fg:#1A1E19; --ink-2:#3F473D; --muted:#5A6256;
  --line:#CDD2C6; --line-2:#E0E4DA; --line-strong:#7E8679;
  --accent:#2B5C55; --accent-fg:#FFFFFF; --accent-soft:#DCEAE6;
  --ok:#2E7536; --ok-bg:#DFEEDF; --warn:#9A620A; --warn-bg:#F6E8CC; --warn-fill:#D9A21B; --crit:#B3261E; --crit-bg:#F7DEDA;
  --ok-fill:#2E7536; --crit-fill:#B3261E; --on-fill:#FFFFFF; --on-warn:#1B1400;
  --off:#6A7266; --off-bg:#E4E7DF;
  --ai:#6A4FA3; --ai-soft:#EEE9F7; --next:#7A3FB0;
  --bar:#1A1E19; --bar-fg:#F1F3EE; --cell:#D3D8CB;
  --cls:#007A33; --cls-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(20,30,20,.06),0 4px 14px rgba(20,30,20,.05);
  --f-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:6px;

  /* aliases so every page reads the same palette under the names it already uses */
  --ink:var(--fg); --rule:var(--line); --rule-2:var(--line-2); --sheet:var(--surface);
  --accent-ink:var(--accent-fg); --focus:var(--accent);
  --go:var(--ok); --go-soft:var(--ok-bg); --nogo:var(--crit); --nogo-soft:var(--crit-bg);
  --no:var(--off); --no-soft:var(--off-bg); --warn-soft:var(--warn-bg);
  --display:var(--f-disp); --sans:var(--f-body); --mono:var(--f-mono);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101310; --surface:#181C17; --surface-2:#1E231D; --sunk:#232922;
    --fg:#E3E7DF; --ink-2:#BEC5B9; --muted:#98A192;
    --line:#2F362D; --line-2:#262C25; --line-strong:#5F685B;
    --accent:#7DBBAE; --accent-fg:#0D1512; --accent-soft:#1D2D29;
    --ok:#6CC27A; --ok-bg:#1B2D1E; --warn:#E5AB49; --warn-bg:#33270F; --warn-fill:#C8921A; --crit:#F27B70; --crit-bg:#3B1A17;
    --ok-fill:#2F7A3A; --crit-fill:#B9372D;
    --off:#98A192; --off-bg:#262C25;
    --ai:#B9A2E8; --ai-soft:#2A2438; --next:#B98BE6;
    --bar:#2A3128; --bar-fg:#EEF1EA; --cell:#2C3329;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101310; --surface:#181C17; --surface-2:#1E231D; --sunk:#232922;
  --fg:#E3E7DF; --ink-2:#BEC5B9; --muted:#98A192;
  --line:#2F362D; --line-2:#262C25; --line-strong:#5F685B;
  --accent:#7DBBAE; --accent-fg:#0D1512; --accent-soft:#1D2D29;
  --ok:#6CC27A; --ok-bg:#1B2D1E; --warn:#E5AB49; --warn-bg:#33270F; --warn-fill:#C8921A; --crit:#F27B70; --crit-bg:#3B1A17;
  --ok-fill:#2F7A3A; --crit-fill:#B9372D;
  --off:#98A192; --off-bg:#262C25;
  --ai:#B9A2E8; --ai-soft:#2A2438; --next:#B98BE6;
  --bar:#2A3128; --bar-fg:#EEF1EA; --cell:#2C3329;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font:600 11.5px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r);padding:0 14px;min-height:38px;
  font:500 13.5px/1 var(--f-body);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07);background:var(--accent)}
.btn.ai{background:var(--ai);color:#fff;border-color:var(--ai)}
.btn.small{min-height:32px;padding:0 11px;font-size:12.5px}
.btn.danger{color:var(--crit);border-color:var(--crit);background:transparent}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--surface-2)}

/* ---------- app bar (same on every page) ---------- */
.ab{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ab-brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;min-width:0}
.ab-brand svg{flex:none}
.ab-brand b{display:block;font:700 18px/1 var(--f-disp);letter-spacing:.04em;text-transform:uppercase}
.ab-brand small{display:block;font:500 11px/1.2 var(--f-body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.ab-tabs{display:flex;gap:2px;align-items:stretch;overflow-x:auto;scrollbar-width:none;min-width:0}
.ab-tabs::-webkit-scrollbar{display:none}
.ab-tab{font:600 15px/1 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 12px 9px;border-radius:var(--r);white-space:nowrap;border-bottom:3px solid transparent}
.ab-tab:hover{color:var(--fg);background:var(--surface-2)}
.ab-tab[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent);border-radius:var(--r) var(--r) 0 0}
.ab-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-who{font-size:12.5px;color:var(--muted)} .ab-who b{color:var(--fg);font-weight:600}
.syncstat{font:500 11.5px/1 var(--f-mono);color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.syncstat .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.syncstat.pending .dot{background:var(--warn-fill)} .syncstat.err .dot{background:var(--crit)} .syncstat.err{color:var(--crit)}
@media (max-width:820px){
  .ab{position:static}
  .ab-tabs{order:3;width:100%}
  .ab-brand small{display:none}
}

/* ---------- page header (title row under the app bar) ---------- */
.pagehead{display:flex;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;padding-bottom:12px;border-bottom:3px solid var(--accent);margin-bottom:16px}
.pagehead h1{margin:2px 0 0;font:700 32px/1 var(--f-disp);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.pagehead .lead{margin:6px 0 0;color:var(--ink-2);font-size:14px;max-width:72ch}
.pagehead .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- classification / handling banners ---------- */
.clsbar{background:var(--cls);color:var(--cls-fg);text-align:center;font:600 12px/1 var(--f-body);letter-spacing:.14em;padding-block:7px;text-transform:uppercase}
.clsbar.cui{background:#502B85;color:#FFFFFF}

/* ---------- sign-in (same on every page) ---------- */
.lock{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto}
.lockcard{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 24px;width:100%;max-width:380px;display:flex;flex-direction:column}
.lockcard h1{margin:6px 0 4px;font:700 34px/1 var(--f-disp);letter-spacing:.02em;text-transform:uppercase}
.lockcard p{margin:0 0 14px;color:var(--ink-2);font-size:14px}
.lockcard label{display:block;font:600 11.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:12px 0 5px}
.lockcard input{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:0 12px;font-size:15px}
.lockcard input:focus{outline:0;border-color:var(--accent);background:var(--surface)}
.lockcard .btn{width:100%;margin-top:18px;min-height:44px;font-size:14.5px}
.lockmsg{color:var(--crit);font-size:13px;min-height:20px;margin-top:10px}
.lockcard .fine{margin:12px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:70;max-width:calc(100% - 32px)}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

.sitefoot{margin:36px auto 0;max-width:1320px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding-inline:16px}

/* ---------- unit eval tabs (added at run time by /appbar.js) ---------- */
.ab-r1{display:contents}
.ab-add{background:none;border:1px dashed var(--line);border-bottom:1px dashed var(--line);cursor:pointer;color:var(--muted);margin-left:4px;align-self:center;padding:7px 10px 6px}
.ab-add:hover{border-color:var(--accent);color:var(--accent)}
.r1dlg{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);background:var(--surface);color:var(--fg);padding:0;width:min(440px,calc(100% - 32px));box-shadow:var(--shadow)}
.r1dlg::backdrop{background:rgba(10,14,10,.45)}
.r1dlg form{padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px}
.r1dlg h2{margin:0;font:700 24px/1.1 var(--f-disp);letter-spacing:.02em;text-transform:uppercase}
.r1dlg p{margin:0;color:var(--ink-2);font-size:13.5px}
.r1dlg label{font:600 11.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.r1dlg input{height:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:0 12px;font-size:15px}
.r1dlg input:focus{outline:0;border-color:var(--accent);background:var(--surface)}
.r1dlg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.r1dlg .msg{color:var(--crit);font-size:13px;min-height:18px}
.r1dlg .sugg{display:flex;flex-wrap:wrap;gap:6px}
.r1dlg .sugg button{font:500 12.5px/1 var(--f-mono);border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 10px;cursor:pointer}
.r1dlg .sugg button:hover{border-color:var(--accent);color:var(--accent)}