:root{
  --bg:#0e1014; --bg2:#15181f; --bg3:#1c2029; --line:#272c38;
  --fg:#e6e9ef; --fg2:#9aa3b2; --fg3:#6b7484;
  --acc:#5b8cff; --ok:#3fbf7f; --warn:#e0a33e; --err:#e0574a; --run:#5b8cff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{--bg:#fbfcfd;--bg2:#fff;--bg3:#f2f4f7;--line:#dfe3ea;
        --fg:#131722;--fg2:#5b6472;--fg3:#8b94a3;}
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;
     -webkit-font-smoothing:antialiased;height:100vh;overflow:hidden}
#app{display:grid;grid-template-columns:232px 1fr;height:100vh}
/* An id rule setting `display` outranks the UA stylesheet's [hidden]{display:none}, so without
   this the hidden attribute above does nothing at all. Third time this has bitten. */
#app[hidden]{display:none}

/* ── sidebar ─────────────────────────────────────────────────── */
.sidebar{background:var(--bg2);border-right:1px solid var(--line);
         display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 20px}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--acc),#8b5bff);
      display:grid;place-items:center;color:#fff;font-size:15px;flex-shrink:0}
.brand-name{font-weight:600;font-size:13.5px;line-height:1.3}
.brand-org{color:var(--fg3);font-size:11px;font-family:var(--mono)}
nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav{display:flex;gap:10px;align-items:center;padding:8px 10px;border:0;border-radius:7px;
     background:transparent;color:var(--fg2);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.nav span{opacity:.65;font-size:12px;width:14px}
.nav:hover{background:var(--bg3);color:var(--fg)}
.nav.active{background:var(--bg3);color:var(--fg);font-weight:550}
.nav.active span{opacity:1;color:var(--acc)}
.sidebar-foot{border-top:1px solid var(--line);padding:12px 10px 2px;font-size:11px;line-height:1.6}
.who{color:var(--fg2)}
.model{color:var(--fg3);font-family:var(--mono);font-size:10px;word-break:break-all}

/* ── layout ──────────────────────────────────────────────────── */
main{overflow:hidden;display:flex;flex-direction:column;min-height:0}
.view{display:none;flex-direction:column;height:100vh;overflow:hidden;min-height:0}
.view.active{display:flex}

/* The investigations view scrolls as ONE page: overview, then the list/detail card.
   It previously did not scroll at all. `.overview` is flex-shrink:0 and grew past the viewport
   once the stat tiles, chart and three panels were there, so `.board` was squeezed to nothing and
   `.view`'s overflow:hidden clipped the list entirely — invisible and unreachable. */
#view-investigations{overflow-y:auto}
#view-investigations .topbar{position:sticky;top:0;z-index:5;background:var(--bg)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
        padding:16px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
h1{font-size:16px;font-weight:600}
.actions{display:flex;gap:8px;align-items:center}
/* `min-height:0` on every flex/grid child that scrolls.
   Without it a flex item refuses to shrink below its content height, so .split grew past the
   viewport and .view's overflow:hidden clipped the rest — the detail pane was simply cut off with
   nothing to scroll. This is the fix, not a workaround. */
/* Exactly one viewport tall, minus the sticky topbar. Scrolling past the charts therefore lands
   the list and detail filling the screen, which is what you want when reading an investigation.
   `flex:1` was wrong -- it sized against the overview and left the list permanently short. */
.board{display:flex;padding:14px 22px 22px;height:calc(100vh - 66px);flex-shrink:0}
.list-col{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);
          background:var(--bg2)}
.list-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
           padding:10px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.list-title{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
            font-weight:600}
.list-head select{padding:4px 8px;font-size:11px}
.split{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;
       border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2)}
.list{overflow-y:auto;min-height:0;background:var(--bg2);flex:1}
.detail{overflow-y:auto;min-height:0;padding:22px;background:var(--bg)}
.pad{padding:22px;overflow-y:auto;flex:1}
.banner{padding:9px 22px;background:var(--bg3);border-bottom:1px solid var(--line);
        font-size:11.5px;color:var(--fg2)}

/* ── login ────────────────────────────────────────────────────── */
#login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:100;
       padding:20px}
#login[hidden]{display:none}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:13px;
            padding:30px 28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:11px}
.login-logo{width:38px;height:38px;border-radius:10px;
            background:linear-gradient(135deg,var(--acc),#8b5bff);display:grid;place-items:center;
            color:#fff;font-size:18px;margin-bottom:4px}
.login-card h1{font-size:17px;font-weight:650}
.login-card .muted{margin-bottom:6px}
.login-card input{width:100%;padding:9px 11px;font-size:13px}
.login-card button{margin-top:4px;padding:9px}
.who-row{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ── overview: stats + chart ──────────────────────────────────── */
/* Overview and the list/detail card share the same 22px inset, so they read as one block
   rather than a padded chart sitting above a full-bleed list. */
.overview{padding:18px 22px 0;flex-shrink:0}
.overview.collapsed .chart-card,.overview.collapsed .stat-row,
.overview.collapsed .panels{display:none}
/* Collapsed, the section must take no space at all, or it leaves a padded gap above the list. */
.overview.collapsed{padding:0}
.ov-toggle{border:0;background:transparent;color:var(--fg3);font:inherit;font-size:11px;
           cursor:pointer;padding:2px 6px;border-radius:5px}
.ov-toggle:hover{background:var(--bg3);color:var(--fg)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;
          margin-bottom:14px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
            font-weight:600}
.stat-value{font-size:22px;font-weight:650;margin-top:5px;font-variant-numeric:tabular-nums}
.stat-sub{font-size:11px;color:var(--fg3);margin-top:2px}
.stat-value.ok{color:var(--ok)} .stat-value.err{color:var(--err)}

.chart-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
            flex-wrap:wrap;margin-bottom:10px}
.chart-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
             font-weight:600}
.chart-controls{display:flex;gap:8px}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--fg3);font:inherit;font-size:11px;
            padding:4px 10px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--bg3);color:var(--fg);font-weight:550}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px;
        margin-top:11px}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.panel h4{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
          font-weight:600;margin-bottom:9px}
.panel .hint{font-size:11px;color:var(--fg3);margin-top:8px;line-height:1.5}
.brow{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;
      padding:4px 0;font-size:12px}
.brow-bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--bg3);overflow:hidden}
.brow-bar>div{height:100%;border-radius:2px}
.brow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);
           font-size:11.5px}
.brow-n{color:var(--fg3);font-size:11px;font-variant-numeric:tabular-nums}
.tool-warn{color:var(--err);font-weight:600}
.tool-ok{color:var(--fg3)}
.overview.collapsed .panels{display:none}

.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--fg2)}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:2px;border-radius:2px;display:inline-block}
.chart-empty{color:var(--fg3);font-size:12.5px;padding:26px 0;text-align:center}
svg .grid{stroke:var(--line);stroke-width:1}
svg .axis{fill:var(--fg3);font-size:9.5px;font-family:var(--mono)}
svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg .pt{stroke:var(--bg2);stroke-width:1.5}
svg .hover-band{fill:transparent}
svg .hover-band:hover{fill:var(--bg3);opacity:.5}

/* ── controls ────────────────────────────────────────────────── */
.btn{padding:7px 13px;border-radius:7px;border:1px solid var(--line);background:var(--bg3);
     color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer}
.btn:hover{border-color:var(--fg3)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:550}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger{color:var(--err);border-color:transparent}
.btn.danger:hover{border-color:var(--err)}
.btn:disabled{opacity:.5;cursor:default}
input,select,textarea{padding:7px 10px;border-radius:7px;border:1px solid var(--line);
     background:var(--bg);color:var(--fg);font:inherit;font-size:12.5px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--acc)}
textarea{resize:none;font-family:var(--sans);line-height:1.5}

/* ── list rows ───────────────────────────────────────────────── */
.row{padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.row:hover{background:var(--bg3)}
.row.sel{background:var(--bg3);box-shadow:inset 2px 0 0 var(--acc)}
.row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row-title{font-size:13px;font-weight:530;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta{font-size:11px;color:var(--fg3);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}

.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.dot.running{background:var(--run);animation:pulse 1.4s ease-in-out infinite}
.dot.done{background:var(--ok)} .dot.failed{background:var(--err)}
.dot.queued{background:var(--fg3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.pill{padding:2px 7px;border-radius:20px;font-size:10.5px;background:var(--bg);
      border:1px solid var(--line);color:var(--fg2);font-family:var(--mono)}

/* ── empty ───────────────────────────────────────────────────── */
.empty{padding:22px;color:var(--fg3);font-size:12.5px}
.empty.big{display:flex;flex-direction:column;align-items:center;justify-content:center;
           height:100%;text-align:center;gap:7px;max-width:420px;margin:0 auto}
.empty-icon{font-size:30px;opacity:.28;margin-bottom:6px}
.muted{color:var(--fg3);font-size:11.5px;line-height:1.6}
code{font-family:var(--mono);font-size:.92em;background:var(--bg3);padding:1px 5px;border-radius:4px}

/* ── investigation detail ────────────────────────────────────── */
.inv-head{margin-bottom:18px}
.inv-title{font-size:17px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.inv-sub{color:var(--fg3);font-size:11.5px;display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono)}

.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
      padding:15px 17px;margin-bottom:14px}
.card h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
         font-weight:600;margin-bottom:9px}
.rootcause{font-size:14px;line-height:1.65}

/* pipeline */
.pipeline{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap}
.stage{flex:1;min-width:76px;padding:8px 6px;border-radius:7px;background:var(--bg2);
       border:1px solid var(--line);text-align:center;font-size:10px;color:var(--fg3);
       font-family:var(--mono);transition:.25s}
.stage.active{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--bg2))}
.stage.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok)}

/* timeline — paired tool calls with inline arguments */
.timeline{display:flex;flex-direction:column}
.tl-step{display:flex;align-items:center;gap:10px;margin:14px 0 8px;
         font-size:10px;font-family:var(--mono);color:var(--fg3);text-transform:uppercase;
         letter-spacing:.08em}
.tl-step:first-child{margin-top:0}
.tl-step:after{content:"";flex:1;height:1px;background:var(--line)}
.tl-row{display:grid;grid-template-columns:18px 1fr;gap:9px;padding:6px 0;align-items:start}
.tl-ico{color:var(--ok);font-size:11px;text-align:center;padding-top:2px}
.tl-row.bad .tl-ico{color:var(--err)}
.tl-body{min-width:0}
.tl-line{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.tl-tool{font-family:var(--mono);font-size:12px;background:transparent;padding:0;
         color:var(--acc);font-weight:550}
.tl-stage{font-size:12.5px;font-weight:550}
.tl-detail{font-size:12px;color:var(--fg2)}
.arg{font-family:var(--mono);font-size:10.5px;background:var(--bg3);border:1px solid var(--line);
     border-radius:5px;padding:1px 6px;color:var(--fg2);white-space:nowrap;
     max-width:100%;overflow:hidden;text-overflow:ellipsis}
.arg i{color:var(--fg3);font-style:normal;margin-right:4px}
.tl-out{font-size:11.5px;color:var(--fg2);margin-top:3px}
.tl-out.bad{color:var(--err)}
.spin{display:inline-block;width:8px;height:8px;border-radius:50%;
      border:1.5px solid var(--line);border-top-color:var(--acc);
      animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ev-detail{margin-top:4px}
.ev-detail summary{cursor:pointer;color:var(--fg3);font-size:10.5px;list-style:none;
                   font-family:var(--mono)}
.ev-detail summary::-webkit-details-marker{display:none}
.ev-detail summary:before{content:"▸ ";display:inline-block;transition:.2s}
.ev-detail[open] summary:before{transform:rotate(90deg)}
.ev-detail pre{margin-top:6px;padding:11px;background:var(--bg);border:1px solid var(--line);
    border-radius:7px;font-family:var(--mono);font-size:10.5px;line-height:1.6;
    overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:340px;
    overflow-y:auto;color:var(--fg2)}

/* claims */
.claim{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.55}
.claim:last-child{border-bottom:0}
.claim-mark{flex-shrink:0;font-size:11px;padding-top:2px}
.v-confirmed{color:var(--ok)} .v-refuted{color:var(--err)} .v-inconclusive{color:var(--warn)}

/* score */
.score{display:flex;align-items:baseline;gap:7px}
.score-n{font-size:24px;font-weight:650;font-family:var(--mono)}
.bar{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden;margin-top:9px}
.bar > div{height:100%;border-radius:3px;background:var(--acc)}

/* ── chat ────────────────────────────────────────────────────── */
.chat-detail{display:flex;flex-direction:column;padding:0;overflow:hidden}
.messages{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:min(760px,88%);padding:11px 15px;border-radius:12px;line-height:1.65;
     font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);
     border-bottom-left-radius:4px}
.msg-meta{font-size:10px;color:var(--fg3);margin-top:7px;font-family:var(--mono)}
/* markdown inside an assistant message */
.msg.assistant code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-size:.92em}
.msg.assistant pre{background:var(--bg);border:1px solid var(--line);border-radius:7px;
                   padding:10px 12px;overflow-x:auto;margin:8px 0}
.msg.assistant pre code{background:none;padding:0}
.msg.assistant strong{font-weight:650}
.msg.assistant ul,.msg.assistant ol{margin:6px 0 6px 20px}
.msg.assistant li{margin:2px 0}
.msg.assistant h3{font-size:13px;font-weight:650;margin:10px 0 4px}
.msg.assistant p{margin:6px 0}
.msg.assistant p:first-child{margin-top:0}
.msg.assistant p:last-child{margin-bottom:0}
.msg-tools{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.msg-tools .pill{font-size:10px}

/* memory origin */
.mem-origin{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;
            border-radius:20px;font-weight:600}
.mem-origin.system{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.mem-origin.agent{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.mem-origin.edited{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}

/* sidebar footer */
.sidebar-foot{border-top:1px solid var(--line);padding:12px 10px 4px;font-size:11px}
.who-chip{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
          cursor:default}
.who-chip:hover{background:var(--bg3)}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--bg3);border:1px solid var(--line);
        display:grid;place-items:center;font-size:10px;font-weight:650;color:var(--fg2);
        flex-shrink:0;text-transform:uppercase}
.who-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
          color:var(--fg2);font-size:11.5px}
.icon-btn{border:0;background:transparent;color:var(--fg3);cursor:pointer;padding:3px 5px;
          border-radius:6px;font-size:12px;line-height:1}
.icon-btn:hover{background:var(--bg3);color:var(--fg)}
.model-chip{display:flex;align-items:center;gap:7px;margin-top:4px;padding:5px 8px;
            border-radius:8px;cursor:default}
.model-chip:hover{background:var(--bg3)}
/* Endpoint tooltip. The chip is the last thing in the sidebar, so it opens upward and is
   anchored left; `pointer-events:none` keeps it from eating the hover that spawned it. */
.model-chip{position:relative}
.model-tip{position:absolute;bottom:calc(100% + 6px);left:0;z-index:60;
           max-width:min(420px,60vw);padding:7px 9px;border-radius:8px;
           background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
           font-family:var(--mono);font-size:10.5px;line-height:1.5;word-break:break-all;
           box-shadow:0 8px 24px rgba(0,0,0,.35);
           opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none}
.model-chip:hover .model-tip{opacity:1;visibility:visible}
.signout-btn{width:100%;margin-top:8px;padding:7px 8px;border:1px solid var(--line);
             background:transparent;color:var(--fg2);border-radius:8px;cursor:pointer;
             font-size:11.5px;font-family:inherit}
.signout-btn:hover{background:var(--bg3);color:var(--fg)}
.signout-btn[hidden]{display:none}
.model-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.model-name{font-family:var(--mono);font-size:10px;color:var(--fg3);overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}

/* schedule: actions on the right, under the badges */
.sched-card{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:start}
.sched-main{min-width:0}
.sched-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.sched-side .sched-badges{justify-content:flex-end}
.sched-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin:0}
.composer{display:flex;gap:9px;padding:14px 22px;border-top:1px solid var(--line);
          background:var(--bg2);align-items:flex-end}
.composer textarea{flex:1;max-height:150px}
.typing{align-self:flex-start;color:var(--fg3);font-size:12.5px;display:flex;gap:5px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--fg3);animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ── playground ──────────────────────────────────────────────── */
.pg-wrap{max-width:820px}
.pg-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pg-chips-label{font-size:11.5px;color:var(--fg3)}
.pg-chip{border:1px solid var(--line);background:var(--bg2);color:var(--fg2);border-radius:20px;
         padding:4px 12px;font:inherit;font-size:11.5px;cursor:pointer}
.pg-chip:hover{border-color:var(--acc);color:var(--fg)}
.pg-chip.on{background:var(--bg3);color:var(--fg);border-color:var(--acc)}
#pgCustom{width:100%;min-height:290px;font-family:var(--mono);font-size:12px;line-height:1.55}
.pg-actions{display:flex;gap:9px;align-items:center;margin-top:11px}

/* schedules */
.sched-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
            padding:15px 17px;margin-bottom:12px}
.sched-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sched-name{font-size:14px;font-weight:600}
.sched-badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sched-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.sched-prompt{font-size:12.5px;color:var(--fg2);margin-top:11px;line-height:1.6;
              white-space:pre-wrap;border-left:2px solid var(--line);padding-left:11px}
.sched-actions{display:flex;gap:7px;margin-top:13px;align-items:center;flex-wrap:wrap}
.sched-off{opacity:.6}
.sched-off .sched-name{text-decoration:line-through;text-decoration-color:var(--fg3)}

/* toggle */
.sw{position:relative;width:34px;height:19px;flex-shrink:0;border:0;padding:0;cursor:pointer;
    border-radius:20px;background:var(--line);transition:.18s}
.sw.on{background:var(--ok)}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
          background:#fff;transition:.18s}
.sw.on:after{transform:translateX(15px)}

/* cron builder */
.cron-modes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.cron-modes button{border:1px solid var(--line);background:var(--bg);color:var(--fg3);
                   border-radius:7px;padding:5px 10px;font:inherit;font-size:11.5px;cursor:pointer}
.cron-modes button.on{background:var(--bg3);color:var(--fg);border-color:var(--acc);font-weight:550}
.cron-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--fg2)}
.cron-row input,.cron-row select{width:auto;min-width:70px}
.cron-next{margin-top:9px;font-size:11.5px;color:var(--fg3);font-family:var(--mono);line-height:1.7}
.dow{display:flex;gap:4px}
.dow button{border:1px solid var(--line);background:var(--bg);color:var(--fg3);border-radius:6px;
            width:34px;padding:5px 0;font:inherit;font-size:11px;cursor:pointer}
.dow button.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* chart tooltip */
.chart-tip{position:fixed;pointer-events:none;background:var(--bg2);border:1px solid var(--line);
           border-radius:8px;padding:8px 11px;font-size:11.5px;box-shadow:0 6px 22px rgba(0,0,0,.18);
           z-index:60;white-space:nowrap}
.chart-tip b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:10.5px;
             color:var(--fg3)}
.chart-tip .k{display:flex;align-items:center;gap:6px;line-height:1.6}
.chart-tip i{width:9px;height:2px;border-radius:2px;display:inline-block}
svg .hit{cursor:pointer}
.filter-note{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--bg3);
             border-bottom:1px solid var(--line);font-size:11.5px;color:var(--fg2)}
/* A class rule beats the UA stylesheet's [hidden]{display:none}. Without this the note stayed
   visible after "clear" even though the filter itself had been reset. Same mistake as the modal
   backdrop earlier, so there is now a test for it. */
.filter-note[hidden]{display:none}

.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:13px;
             max-width:1000px}
.preset{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:16px;
        text-align:left;cursor:pointer;font:inherit;color:var(--fg);transition:.16s;
        display:flex;flex-direction:column;gap:8px}
.preset:hover{border-color:var(--acc);transform:translateY(-1px)}
.preset:disabled{opacity:.55;cursor:default;transform:none;border-color:var(--line)}
.preset-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.preset-name{font-weight:600;font-size:13.5px}
.preset-sev{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:20px;
            border:1px solid var(--line);flex-shrink:0}
.preset-sev.critical{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
.preset-sev.warning{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.preset-sev.info{color:var(--fg3)}
.preset-desc{font-size:12px;color:var(--fg2);line-height:1.55}
.preset-labels{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.preset-go{font-size:11px;color:var(--acc);font-weight:550;margin-top:2px}

/* ── table ───────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;padding:9px 12px;color:var(--fg3);font-size:10.5px;text-transform:uppercase;
   letter-spacing:.06em;border-bottom:1px solid var(--line);font-weight:600}
td{padding:11px 12px;border-bottom:1px solid var(--line)}
tr:hover td{background:var(--bg2)}

/* ── modal ───────────────────────────────────────────────────── */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;
            backdrop-filter:blur(3px);padding:20px}
/* A class rule beats the UA stylesheet's [hidden]{display:none}, so without this the
   backdrop stays laid out over the whole page and silently eats every click. */
.modal-back[hidden]{display:none}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:22px;
       width:100%;max-width:600px;max-height:88vh;overflow-y:auto}
.modal h2{font-size:15px;margin-bottom:15px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;color:var(--fg2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%}
.field textarea{min-height:110px;font-family:var(--mono);font-size:12px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.err{color:var(--err);font-size:12px;margin-top:9px}

/* Alert payload on the investigation detail. `pre` scrolls on its own so a long JSON payload
   cannot push the page sideways. */
.alert-kind{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
            color:var(--fg3);border:1px solid var(--line);border-radius:5px;padding:2px 6px;
            margin-bottom:9px}
.alert-raw{margin-top:11px}
.alert-raw summary{cursor:pointer;font-size:11.5px;color:var(--fg3);user-select:none}
.alert-raw summary:hover{color:var(--fg2)}
.alert-raw pre{margin:9px 0 0;padding:10px;background:var(--bg);border:1px solid var(--line);
               border-radius:8px;font-family:var(--mono);font-size:11px;line-height:1.55;
               overflow-x:auto;max-height:340px;overflow-y:auto;white-space:pre}

/* The dot was flush against the status word in the schedule run history. */
.run-status{display:inline-flex;align-items:center;gap:7px}

/* A long scheduled instruction printed in full and pushed the card open. Collapsed to a
   one-line preview; the full text is one click away rather than hidden in the edit modal,
   because reading what a schedule asks for is the common case and editing it is not. */
.sched-prompt-wrap{margin-top:7px}
.sched-prompt-wrap summary{cursor:pointer;color:var(--fg2);font-size:12px;line-height:1.55;
                           user-select:none}
.sched-prompt-wrap summary:hover{color:var(--fg)}
.sched-prompt-full{margin-top:8px;white-space:pre-wrap}