/* ops-ui.css — shared look for the ops tools (tokens + tool switcher strip + opt-in components).
   Source of truth: shared/ops-ui.css. Each tool ships a copy in its static/; run shared/sync-ui.sh after editing.
   Tools keep their own layout CSS and map their colours onto these tokens. */
:root{
  --ops-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --ops-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ops-r-sm:4px;--ops-r:6px;--ops-r-md:8px;--ops-r-lg:12px;
  --ops-strip-h:26px;
}
:root,[data-theme=light]{
  color-scheme:light;
  --ops-bg:#f7f7f5;--ops-surface:#ffffff;--ops-surface-2:#f0f0ed;--ops-surface-3:#e8e8e4;
  --ops-field:#ffffff;
  --ops-ink:#1c1d21;--ops-ink-2:#55575e;--ops-mute:#72747b;--ops-faint:#c2c4c9;
  --ops-line:rgba(20,22,28,.11);--ops-line-soft:rgba(20,22,28,.06);--ops-line-strong:rgba(20,22,28,.22);
  --ops-acc:#2563eb;--ops-acc-ink:#1d4fd0;--ops-acc-bg:#e8effd;--ops-on-acc:#ffffff;
  --ops-good:#15803d;--ops-good-bg:#e7f4ec;--ops-good-line:#a7d8b9;--ops-good-fill:#4ade80;
  --ops-poor:#be123c;--ops-poor-bg:#fbe8ed;--ops-poor-line:#f3b6c5;--ops-poor-fill:#f87171;
  --ops-pend:#a35a07;--ops-pend-bg:#fbf0de;--ops-pend-line:#efcf95;
  --ops-inv:#5f6168;--ops-inv-bg:#ececea;--ops-inv-fill:#a3a6ad;
  --ops-miss:#6d3fd1;--ops-miss-bg:#efe9fc;
  --ops-stage:#0b0c0e;--ops-stage-ink:#c9ccd2;
  --ops-shadow-pop:0 8px 24px rgba(15,17,22,.14),0 2px 6px rgba(15,17,22,.08);
  --ops-shadow-dock:0 -6px 16px rgba(15,17,22,.07);
}
[data-theme=dark]{
  color-scheme:dark;
  --ops-bg:#131417;--ops-surface:#1b1d21;--ops-surface-2:#23262b;--ops-surface-3:#2b2e34;
  --ops-field:#16181b;
  --ops-ink:#e7e8eb;--ops-ink-2:#a9adb5;--ops-mute:#7a7f88;--ops-faint:#4a4e56;
  --ops-line:rgba(255,255,255,.09);--ops-line-soft:rgba(255,255,255,.05);--ops-line-strong:rgba(255,255,255,.18);
  --ops-acc:#5b93ff;--ops-acc-ink:#8db4ff;--ops-acc-bg:rgba(91,147,255,.15);--ops-on-acc:#0b1222;
  --ops-good:#4cc287;--ops-good-bg:rgba(76,194,135,.13);--ops-good-line:rgba(76,194,135,.35);--ops-good-fill:#3aa86f;
  --ops-poor:#f2668b;--ops-poor-bg:rgba(242,102,139,.13);--ops-poor-line:rgba(242,102,139,.35);--ops-poor-fill:#d9536f;
  --ops-pend:#e7a447;--ops-pend-bg:rgba(231,164,71,.13);--ops-pend-line:rgba(231,164,71,.35);
  --ops-inv:#9a9ea6;--ops-inv-bg:rgba(255,255,255,.07);--ops-inv-fill:#5c6068;
  --ops-miss:#a98bf5;--ops-miss-bg:rgba(169,139,245,.14);
  --ops-stage:#000000;--ops-stage-ink:#a9adb5;
  --ops-shadow-pop:0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  --ops-shadow-dock:0 -6px 16px rgba(0,0,0,.35);
}

/* tool switcher strip (injected by ops-ui.js) */
.ops-strip{flex:none;display:flex;align-items:center;gap:2px;height:var(--ops-strip-h);padding:0 10px;
  background:var(--ops-surface-2);border-bottom:1px solid var(--ops-line);font:11px/1 var(--ops-font);
  color:var(--ops-mute);overflow-x:auto;white-space:nowrap;scrollbar-width:none;position:relative;z-index:40}
.ops-strip::-webkit-scrollbar{display:none}
.ops-strip .ops-home{color:var(--ops-ink-2);font-weight:600;text-decoration:none;margin-right:8px;letter-spacing:.3px}
.ops-strip .ops-t{color:var(--ops-mute);text-decoration:none;padding:4px 7px;border-radius:var(--ops-r-sm)}
.ops-strip .ops-t b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ops-faint);margin-right:4px}
.ops-strip a.ops-t:hover{color:var(--ops-ink);background:var(--ops-line-soft)}
.ops-strip .ops-t.on{color:var(--ops-ink);background:var(--ops-surface);box-shadow:inset 0 0 0 1px var(--ops-line)}
.ops-strip .ops-t.on b{color:var(--ops-acc)}
.ops-strip .ops-sp{flex:1}
.ops-strip button{font:inherit;color:var(--ops-mute);background:none;border:0;padding:4px 7px;border-radius:var(--ops-r-sm);cursor:pointer}
.ops-strip button:hover{color:var(--ops-ink);background:var(--ops-line-soft)}
.ops-strip :focus-visible{outline:2px solid var(--ops-acc);outline-offset:-2px}

/* opt-in components */
.ops-v{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:var(--ops-r-sm);font-size:11px;font-weight:500;line-height:18px;white-space:nowrap}
.ops-v::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ops-v.good{color:var(--ops-good);background:var(--ops-good-bg)}
.ops-v.poor{color:var(--ops-poor);background:var(--ops-poor-bg)}
.ops-v.pend{color:var(--ops-pend);background:var(--ops-pend-bg)}
.ops-v.inv{color:var(--ops-inv);background:var(--ops-inv-bg)}
.ops-v.miss{color:var(--ops-miss);background:var(--ops-miss-bg)}
.ops-v.acc{color:var(--ops-acc-ink);background:var(--ops-acc-bg)}
.ops-num{font-variant-numeric:tabular-nums}