/* public/ops-ds.css — the design system of the redesign canvas (artifact AqqiymHf9Nyh34jedjB6Qb,
   chawkidar.css), ported for production. GENERATED from canvas/chawkidar.css by build-ds.py:
   every class is prefixed ds- (style.css already owns .card/.btn/.tabs/.modal…, so the canvas
   names would collide) and every rule is scoped to html.ops-ui (nothing applies in classic).
   Shell rules (top bar, rail) are not here — ops-shell.css owns those. Dark mode at the end. */

/* Chawkidar ops UI: shared shell + components for every artboard */
html.ops-ui{--ink:#0f172a; --ink2:#475569; --ink3:#5f6e83; --line:#e2e8f0; --line2:rgba(203,213,225,.6);
  --bg:#f3f6f6; --card:#ffffff;
  --g900:#0b3d35; --g800:#0a5446; --g700:#0d7a62; --g600:#12937a; --g500:#22a585; --g100:#d5efe7; --g50:#e9f6f2;
  --amber:#b6400b; --amber50:#fff3ea;
  --violet:#6326c9; --violet50:#f2edfe;
  --red:#b42318; --red50:#fdecea;
  --blue:#1d5fd1; --blue50:#eaf1fd;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;}
html.ops-ui .ds-num{font-variant-numeric:tabular-nums}
html.ops-ui .ds-mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
html.ops-ui .ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- surfaces ---------- */
html.ops-ui .ds-card{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(249,251,251,.96));border:1px solid var(--line2);border-radius:22px;padding:22px}
html.ops-ui .ds-card-tint{background:radial-gradient(circle at 100% 0%,rgba(13,122,98,.09),rgba(13,122,98,0) 34%),linear-gradient(180deg,#fff,rgba(233,246,242,.45))}
html.ops-ui .ds-tile{background:linear-gradient(180deg,#fff,#f9fbfb);border:1px solid #e3e9ee;border-radius:14px;padding:12px 14px;box-shadow:inset 0 1px 0 #fff}
html.ops-ui .ds-kicker{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
html.ops-ui .ds-big{font-size:42px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
html.ops-ui .ds-mid{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html.ops-ui .ds-tile-l{font-size:13px;font-weight:600;color:var(--ink2)}
html.ops-ui .ds-tile-n{font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
html.ops-ui .ds-muted{color:var(--ink2)}
html.ops-ui .ds-small{font-size:12px}
html.ops-ui .ds-h2{font-size:17px;font-weight:700;margin:0}
html.ops-ui .ds-titlebar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
html.ops-ui .ds-titlebar h1{font-size:19px;font-weight:700;margin:0}
html.ops-ui .ds-crumbs{font-size:13px;color:var(--ink3)}
/* chips, pills */
html.ops-ui .ds-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:6px 10px}
html.ops-ui .ds-chip-up{background:var(--g50);color:var(--g700)}
html.ops-ui .ds-chip-down{background:var(--red50);color:var(--red)}
html.ops-ui .ds-chip-ghost{border:1px solid var(--line);background:#fff;color:var(--ink2)}
html.ops-ui .ds-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:6px;padding:4px 8px;white-space:nowrap}
html.ops-ui .ds-pill-green{background:var(--g50);color:var(--g700)}
html.ops-ui .ds-pill-amber{background:var(--amber50);color:var(--amber)}
html.ops-ui .ds-pill-violet{background:var(--violet50);color:var(--violet)}
html.ops-ui .ds-pill-red{background:var(--red50);color:var(--red)}
html.ops-ui .ds-pill-blue{background:var(--blue50);color:var(--blue)}
html.ops-ui .ds-pill-slate{background:#eef2f6;color:var(--ink2)}
html.ops-ui .ds-tag{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 8px;background:#eef2f6;color:var(--ink2)}
html.ops-ui .ds-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
/* buttons */
html.ops-ui .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none!important;white-space:nowrap}
html.ops-ui .ds-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.ops-ui .ds-btn-primary{background:var(--g700);color:#fff!important}
html.ops-ui .ds-btn-primary:hover{background:var(--g800)}
html.ops-ui .ds-btn-dark{background:var(--ink);color:#fff!important}
html.ops-ui .ds-btn-outline{background:#fff;color:var(--ink)!important;border-color:var(--line)}
html.ops-ui .ds-btn-outline:hover{border-color:#cbd5e1;background:#fafbfc}
html.ops-ui .ds-btn-soft{background:var(--g50);color:var(--g800)!important}
html.ops-ui .ds-btn-danger-o{background:#fff;color:var(--red)!important;border-color:#f3b8b2}
html.ops-ui .ds-btn-link{background:transparent;color:var(--blue)!important;padding:0 8px}
html.ops-ui .ds-btn-sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}
/* sub-nav column */
html.ops-ui .ds-split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
html.ops-ui .ds-subnav{flex:1 1 220px;max-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px}
html.ops-ui .ds-subnav-h{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding:4px 10px 10px}
html.ops-ui .ds-sn-item{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px;margin-bottom:4px;border-radius:10px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left}
html.ops-ui .ds-sn-item:hover{background:#f4f7f8}
html.ops-ui .ds-sn-item .ds-sn-n{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
html.ops-ui .ds-sn-item.is-on{background:var(--g900);color:#fff}
html.ops-ui .ds-sn-item.is-on .ds-sn-n{color:#bfe7da}
html.ops-ui .ds-sn-item.is-warn{background:var(--amber50);border-color:#f7d3b9;color:var(--amber);font-weight:600}
html.ops-ui .ds-sn-item.is-warn .ds-sn-n{color:var(--amber)}
html.ops-ui .ds-sn-item.is-violet{color:var(--violet);font-weight:600}
html.ops-ui .ds-sn-item.is-violet .ds-sn-n{color:var(--violet)}
html.ops-ui .ds-main-col{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
/* tabs + filter bar */
html.ops-ui .ds-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:0 4px;overflow-x:auto}
html.ops-ui .ds-tab{background:transparent;border:0;border-bottom:2.5px solid transparent;padding:12px 2px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap;min-height:44px}
html.ops-ui .ds-tab.is-on{border-bottom-color:var(--g700);color:var(--g700);font-weight:700}
html.ops-ui .ds-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#f6f8fa;border:1px solid var(--line);border-radius:12px;padding:10px}
html.ops-ui .ds-field{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;background:#fff;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--ink2)}
html.ops-ui .ds-field input,
html.ops-ui .ds-field select{border:0;outline:none;background:transparent;font-size:13px;color:var(--ink);min-width:0}
html.ops-ui .ds-field svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* tables */
html.ops-ui .ds-tbl-box{background:#fff;border:1px solid var(--line);border-radius:14px;overflow-x:auto}
html.ops-ui table.ds-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px}
html.ops-ui .ds-tbl th{background:#e9eef3;color:var(--ink2);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;text-align:left;padding:11px 12px;white-space:nowrap}
html.ops-ui .ds-tbl td{padding:12px;border-top:1px solid #edf1f4;vertical-align:top;font-weight:500}
html.ops-ui .ds-tbl tr:hover td{background:#fafcfc}
html.ops-ui .ds-tbl .ds-r{text-align:right}
html.ops-ui .ds-sub{display:block;font-size:12px;color:var(--ink3);font-weight:500;margin-top:3px}
html.ops-ui .ds-route{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
html.ops-ui .ds-route span{display:flex;align-items:center;gap:6px}
/* modal */
html.ops-ui .ds-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
html.ops-ui .ds-modal{width:min(880px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.3)}
html.ops-ui .ds-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
html.ops-ui .ds-tl{display:flex;flex-direction:column;gap:0}
html.ops-ui .ds-tl-row{display:flex;gap:12px;padding-bottom:16px;position:relative}
html.ops-ui .ds-tl-row:before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--g100)}
html.ops-ui .ds-tl-row:last-child:before{display:none}
html.ops-ui .ds-tl-dot{width:24px;height:24px;border-radius:50%;background:var(--g700);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
html.ops-ui .ds-tl-dot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html.ops-ui .ds-tl-dot.is-next{background:#fff;border:2px dashed #b8c4cf}
/* forms */
html.ops-ui .ds-form-sec{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
html.ops-ui .ds-form-sec-h{display:flex;align-items:center;gap:10px;background:#fbf6ee;padding:12px 18px;font-size:15px;font-weight:700;border-bottom:1px solid #f0e6d6}
html.ops-ui .ds-form-sec-h .ds-step{width:24px;height:24px;border-radius:50%;background:var(--g900);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
html.ops-ui .ds-form-sec-b{padding:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
html.ops-ui .ds-lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
html.ops-ui .ds-inp{height:44px;border:1px solid #d6dee6;border-radius:9px;padding:0 12px;font-size:14px;background:#fff;color:var(--ink);width:100%}
html.ops-ui .ds-inp.is-filled{background:#f7faf9}
html.ops-ui .ds-radio-card{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:#fff;text-align:left;width:100%}
html.ops-ui .ds-radio-card.is-on{border-color:var(--g700);background:var(--g50)}
html.ops-ui .ds-radio{width:18px;height:18px;border-radius:50%;border:2px solid #9aa8b6;flex:none;margin-top:2px}
html.ops-ui .ds-radio-card.is-on .ds-radio{border:5px solid var(--g700)}
html.ops-ui .ds-check{width:20px;height:20px;border-radius:6px;border:2px solid #9aa8b6;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff}
html.ops-ui .ds-check.is-on{background:var(--g700);border-color:var(--g700);color:#fff}
html.ops-ui .ds-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html.ops-ui .ds-sticky-foot{position:sticky;bottom:0;z-index:10;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:12px 24px;backdrop-filter:blur(6px)}
/* segmented control */
html.ops-ui .ds-seg-wrap{display:inline-flex;background:#eef2f5;border-radius:11px;padding:3px;gap:2px;align-self:flex-start}
html.ops-ui .ds-seg{border:0;background:transparent;border-radius:8px;padding:0 14px;min-height:40px;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer}
html.ops-ui .ds-seg.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.14)}
/* list rows inside cards */
html.ops-ui .ds-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #edf1f4}
html.ops-ui .ds-row:first-child{border-top:0}
html.ops-ui .ds-row-main{flex:1;min-width:0}
html.ops-ui .ds-row-t{font-size:14px;font-weight:600}
html.ops-ui .ds-row-s{font-size:12px;color:var(--ink3);margin-top:2px}
html.ops-ui .ds-ibtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--g700);cursor:pointer;flex:none}
html.ops-ui .ds-ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* bars */
html.ops-ui .ds-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:8px;align-items:end;height:190px}
html.ops-ui .ds-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
html.ops-ui .ds-bar i{display:block;width:100%;max-width:30px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--g500),var(--g700))}
html.ops-ui .ds-bar.is-today i{background:linear-gradient(180deg,#f59e5b,var(--amber))}
html.ops-ui .ds-bar b{font-size:11.5px;font-weight:700;color:var(--ink2)}
html.ops-ui .ds-bar-x{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:8px;font-size:11px;color:var(--ink3);text-align:center;margin-top:6px}
html.ops-ui .ds-meter{height:8px;border-radius:999px;background:#e8eef2;overflow:hidden}
html.ops-ui .ds-meter i{display:block;height:100%;border-radius:999px;background:var(--g600)}
/* filter chips + switches */
html.ops-ui .ds-chips{display:flex;flex-wrap:wrap;gap:8px}
html.ops-ui .ds-fchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer}
html.ops-ui .ds-fchip.is-on{background:var(--g900);border-color:var(--g900);color:#fff}
html.ops-ui .ds-fchip b{font-weight:700;color:inherit;opacity:.75}
html.ops-ui .ds-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
html.ops-ui .ds-switch i{width:38px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;display:inline-block;flex:none}
html.ops-ui .ds-switch i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
html.ops-ui .ds-switch.is-on i{background:var(--g700)}
html.ops-ui .ds-switch.is-on i:after{left:19px}
html.ops-ui .ds-status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
html.ops-ui .ds-status-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
html.ops-ui .ds-sel-row td{background:var(--g50)!important}
html.ops-ui .ds-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
html.ops-ui .ds-kv-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
html.ops-ui .ds-kv-v{font-size:14px;font-weight:600;margin-top:3px}
/* svg charts (strokes live here, not in attributes) */
html.ops-ui .ds-ch{width:100%;height:auto;display:block}
html.ops-ui .ds-ln-grid{stroke:#e2e8f0;stroke-width:1}
html.ops-ui .ds-ln-plan{fill:none;stroke:#94a3b8;stroke-width:2.5;stroke-dasharray:7 6}
html.ops-ui .ds-ln-act{fill:none;stroke:var(--g700);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
html.ops-ui .ds-ln-pace{fill:none;stroke:var(--g500);stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round}
html.ops-ui .ds-ln-mile{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 5}
html.ops-ui .ds-ar-act{fill:rgba(13,122,98,.10)}
html.ops-ui .ds-pt-act{fill:#fff;stroke:var(--g700);stroke-width:3}
html.ops-ui .ds-ax{font-family:Montserrat,system-ui,sans-serif;font-size:12px;fill:#5f6e83}
html.ops-ui .ds-ax-r{text-anchor:end}
html.ops-ui .ds-ax-m{text-anchor:middle}
html.ops-ui .ds-ax-tag{font-family:Montserrat,system-ui,sans-serif;font-size:12px;font-weight:700;fill:var(--amber)}
/* chat bubbles + stickers */
html.ops-ui .ds-bubble{max-width:85%;border-radius:14px;padding:10px 14px;font-size:13.5px;line-height:1.45}
html.ops-ui .ds-bubble-in{align-self:flex-start;background:#f1f5f9;border-top-left-radius:4px}
html.ops-ui .ds-bubble-out{align-self:flex-end;background:#dcf5ea;border-top-right-radius:4px}
html.ops-ui .ds-sticker{width:100%;aspect-ratio:2/1;background:#fff;border:1px dashed #b8c4cf;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between}
html.ops-ui .ds-sticker-bars{height:46%;background:repeating-linear-gradient(90deg,#0f172a 0 2px,transparent 2px 4px,#0f172a 4px 5px,transparent 5px 8px,#0f172a 8px 11px,transparent 11px 12px)}
/* ===================== hand-written additions (not in the canvas file) ===================== */
/* screen root: every redesigned screen renders <div class="ds-screen"><div class="ds-wrap">…</div></div>
   into #page-content. Owns font, colour and the page gutter (ops-shell.css owns the bar/rail offsets). */
html.ops-ui .ds-screen{font-family:var(--font);color:var(--ink);padding:4px 24px 40px;-webkit-font-smoothing:antialiased}
html.ops-ui .ds-screen *,html.ops-ui .ds-screen *:before,html.ops-ui .ds-screen *:after{box-sizing:border-box}
html.ops-ui .ds-screen a{color:var(--blue);text-decoration:none}
html.ops-ui .ds-screen a:hover{text-decoration:underline}
html.ops-ui .ds-screen button,html.ops-ui .ds-screen input,html.ops-ui .ds-screen select,html.ops-ui .ds-screen textarea{font-family:inherit}
html.ops-ui .ds-screen h1,html.ops-ui .ds-screen h2,html.ops-ui .ds-screen h3{color:var(--ink)}
html.ops-ui .ds-wrap{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
html.ops-ui .ds-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.ops-ui .ds-ic-sm{width:16px;height:16px}
html.ops-ui .ds-t-green{background:var(--g50);color:var(--g700)}
html.ops-ui .ds-t-blue{background:var(--blue50);color:var(--blue)}
html.ops-ui .ds-t-amber{background:var(--amber50);color:var(--amber)}
html.ops-ui .ds-t-violet{background:var(--violet50);color:var(--violet)}
html.ops-ui .ds-t-red{background:var(--red50);color:var(--red)}
html.ops-ui .ds-t-slate{background:#eef2f6;color:var(--ink2)}
html.ops-ui .ds-icon-tile{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
html.ops-ui .ds-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(var(--min,180px),1fr))}
html.ops-ui .ds-row-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
html.ops-ui .ds-spacer{flex:1}
html.ops-ui .ds-link-tile{display:block;color:inherit!important;text-decoration:none!important;cursor:pointer;text-align:left;font:inherit;width:100%}
html.ops-ui .ds-link-tile:hover{border-color:var(--g500)}
html.ops-ui .ds-empty{padding:28px 16px;text-align:center;color:var(--ink2);font-size:14px}
html.ops-ui .ds-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
html.ops-ui .ds-skel{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#edf1f4,#f6f8fa,#edf1f4);background-size:200% 100%;animation:ds-skel 1.2s infinite linear}
@keyframes ds-skel{to{background-position:-200% 0}}
html.ops-ui .ds-alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:13.5px;border:1px solid}
html.ops-ui .ds-alert-red{background:var(--red50);border-color:#f3b8b2;color:var(--red)}
html.ops-ui .ds-alert-amber{background:var(--amber50);border-color:#f7d3b9;color:var(--amber)}
html.ops-ui .ds-alert-green{background:var(--g50);border-color:var(--g100);color:var(--g800)}
html.ops-ui .ds-classic-link{font-size:12px;color:var(--ink3)!important;background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
html.ops-ui .ds-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(15,23,42,.25)}

/* phone width (the canvas Mobile board) */
@media (max-width:760px){
  html.ops-ui .ds-screen{padding:0 12px 24px}
  html.ops-ui .ds-subnav{max-width:none}
  html.ops-ui .ds-big{font-size:34px}
  html.ops-ui .ds-card{padding:16px;border-radius:18px}
  html.ops-ui .ds-titlebar h1{font-size:17px}
  html.ops-ui .ds-bars{height:150px;gap:4px}
}

/* dark mode: the canvas is light-only; these keep every component readable on the dark theme */
html.ops-ui[data-theme="dark"]{
  --ink:#e8eef4; --ink2:#b4c0cc; --ink3:#93a1b0; --line:#2a3644; --line2:rgba(60,76,94,.7);
  --bg:#0f161d; --card:#16202a;
  --g50:rgba(34,165,133,.16); --g100:rgba(34,165,133,.3); --g700:#22a585; --g800:#5fd0b2; --g900:#0d7a62;
  --amber50:rgba(245,158,91,.16); --amber:#f6a26b; --violet50:rgba(139,92,246,.18); --violet:#c4b5fd;
  --red50:rgba(240,82,82,.16); --red:#f58a8a; --blue50:rgba(96,140,230,.18); --blue:#8fb3f5;
}
html.ops-ui[data-theme="dark"] .ds-card,html.ops-ui[data-theme="dark"] .ds-card-tint,html.ops-ui[data-theme="dark"] .ds-tile,
html.ops-ui[data-theme="dark"] .ds-titlebar,html.ops-ui[data-theme="dark"] .ds-subnav,html.ops-ui[data-theme="dark"] .ds-tbl-box,
html.ops-ui[data-theme="dark"] .ds-field,html.ops-ui[data-theme="dark"] .ds-btn-outline,html.ops-ui[data-theme="dark"] .ds-btn-danger-o,
html.ops-ui[data-theme="dark"] .ds-form-sec,html.ops-ui[data-theme="dark"] .ds-inp,html.ops-ui[data-theme="dark"] .ds-fchip,
html.ops-ui[data-theme="dark"] .ds-modal,html.ops-ui[data-theme="dark"] .ds-radio-card,html.ops-ui[data-theme="dark"] .ds-ibtn,
html.ops-ui[data-theme="dark"] .ds-chip-ghost,html.ops-ui[data-theme="dark"] .ds-check,html.ops-ui[data-theme="dark"] .ds-sticker{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:none}
html.ops-ui[data-theme="dark"] .ds-tbl th{background:#1d2935;color:var(--ink2)}
html.ops-ui[data-theme="dark"] .ds-tbl td,html.ops-ui[data-theme="dark"] .ds-row{border-color:var(--line)}
html.ops-ui[data-theme="dark"] .ds-tbl tr:hover td{background:#1a2530}
html.ops-ui[data-theme="dark"] .ds-filters,html.ops-ui[data-theme="dark"] .ds-seg-wrap,html.ops-ui[data-theme="dark"] .ds-meter,
html.ops-ui[data-theme="dark"] .ds-pill-slate,html.ops-ui[data-theme="dark"] .ds-tag,html.ops-ui[data-theme="dark"] .ds-t-slate,html.ops-ui[data-theme="dark"] .ds-bubble-in{background:#1d2935;color:var(--ink2);border-color:var(--line)}
html.ops-ui[data-theme="dark"] .ds-seg.is-on{background:var(--card);color:var(--ink)}
html.ops-ui[data-theme="dark"] .ds-sn-item:hover,html.ops-ui[data-theme="dark"] .ds-btn-outline:hover{background:#1d2935}
html.ops-ui[data-theme="dark"] .ds-form-sec-h{background:#1d2935;border-color:var(--line)}
html.ops-ui[data-theme="dark"] .ds-bubble-out{background:rgba(34,165,133,.22)}
html.ops-ui[data-theme="dark"] .ds-ln-grid{stroke:#2a3644}
html.ops-ui[data-theme="dark"] .ds-ax{fill:#93a1b0}
html.ops-ui[data-theme="dark"] .ds-sticky-foot{background:rgba(22,32,42,.96);border-color:var(--line)}
html.ops-ui[data-theme="dark"] .ds-skel{background:linear-gradient(90deg,#1d2935,#243241,#1d2935);background-size:200% 100%}

/* fixes found while building the screens (7 Oct 2026) */
/* selected states must win over the dark-mode surface reset above (same specificity, later rule) */
html.ops-ui[data-theme="dark"] .ds-fchip.is-on{background:var(--g900);border-color:var(--g900);color:#fff}
html.ops-ui[data-theme="dark"] .ds-radio-card.is-on{border-color:var(--g700);background:var(--g50)}
html.ops-ui[data-theme="dark"] .ds-check.is-on{background:var(--g700);border-color:var(--g700);color:#fff}
html.ops-ui[data-theme="dark"] .ds-sn-item.is-on{background:var(--g900);color:#fff}
/* disabled buttons */
html.ops-ui .ds-btn:disabled,html.ops-ui .ds-btn[aria-disabled="true"],html.ops-ui .ds-ibtn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
/* a clickable tile is a <button>: lay its content out like the static tile (top-aligned, left) */
html.ops-ui .ds-link-tile{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}