/* apiGuard — redesign layer «Operations Console» (2026-10-20, r2).
   Loaded LAST. RESPECTS workbench.css token architecture (light default,
   dark via [data-theme=dark] + prefers-color-scheme; accent = blue family).
   Adds only theme-independent tokens + component craft. DOM/JS unchanged.
   No colour-token overrides → theming stays intact. Fully reversible. */

/* ─── Theme-independent tokens (motion, radii, elevation) ────────────── */
:root{
  --dur-1:120ms; --dur-2:200ms; --dur-3:300ms; --ease:cubic-bezier(.2,.65,.25,1);
  --r-sm:6px; --r:8px; --r-lg:12px;
  --spine:2px;
  --ring:2px solid var(--accent);
  --elev-pop:0 1px 2px #0000000f,0 12px 40px -16px #0000002e;
}
:root[data-theme=dark]{ --elev-pop:0 1px 2px #0006,0 20px 60px -24px #000a; }
@media(prefers-color-scheme:dark){:root:not([data-theme]){ --elev-pop:0 1px 2px #0006,0 20px 60px -24px #000a; }}

/* ─── Typography polish ──────────────────────────────────────────────── */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{letter-spacing:-.03em}
.summary-strip strong,.stat-number,.chain-summary strong,.guardrail strong,.entity-overview strong{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mono,code{font-feature-settings:"ss01","cv05"}

/* ─── Motion (opt-in, interruptible, transform/opacity only) ─────────── */
.nav a,.filter-chip,.host-line,.entity-card,.summary-strip>div,.tab,.command-results>button,.zone,.route-node,button{
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
@keyframes ag-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ag-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* entrance plays ONCE on initial load (:root.ag-first), not on every 15s re-render */
:root.ag-first .content>*{animation:ag-rise var(--dur-3) var(--ease) both}
:root.ag-first .content>*:nth-child(2){animation-delay:30ms}:root.ag-first .content>*:nth-child(3){animation-delay:60ms}
:root.ag-first .content>*:nth-child(4){animation-delay:90ms}:root.ag-first .content>*:nth-child(n+5){animation-delay:120ms}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .content>*{animation:none}
}

/* ─── Focus: single consistent ring (WCAG 2.4.7) ─────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible,
.host-open:focus-visible,.filter-chip:focus-visible,.zone:focus-visible,.entity-card:focus-visible{
  outline:var(--ring);outline-offset:2px;border-radius:var(--r-sm)}

/* ─── Sidebar nav: signal-spine on active ────────────────────────────── */
.nav a{position:relative;font-weight:500}
.nav a.active{color:var(--text)}
.nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:var(--spine);
  border-radius:0 2px 2px 0;background:var(--accent)}
@media (max-width:1023px){.nav a.active::before{left:-8px}}
.brand .icon{color:var(--accent)}
.command-launch{border:1px solid var(--line);border-radius:var(--r-sm)}
.command-launch:hover{background:var(--raised);border-color:var(--slate-8)}

/* ─── Topbar: quiet depth + live dot pulse ───────────────────────────── */
.topbar{background:color-mix(in oklab,var(--bg) 80%,transparent);backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px)}
.live .dot.green{box-shadow:0 0 0 3px color-mix(in oklab,var(--green-9) 20%,transparent)}
/* pulse ONLY while a check is actively running (concrete meaning), never for idle-healthy */
.live.is-checking .dot.green,.live[data-checking=true] .dot.green{animation:ag-pulse 2.6s var(--ease) infinite}

/* ─── Buttons: crisper primary ───────────────────────────────────────── */
.primary{box-shadow:0 1px 0 #ffffff14 inset,0 6px 18px -10px color-mix(in oklab,var(--accent) 55%,transparent)}
.primary:active{transform:translateY(.5px)}

/* ─── KPI summary strip: accent rail + lift ──────────────────────────── */
.summary-strip,.stats,.chain-summary{position:relative;overflow:hidden}
.summary-strip::before,.chain-summary::before{content:"";position:absolute;inset:0 auto auto 0;height:var(--spine);width:100%;
  background:linear-gradient(90deg,var(--accent),transparent 42%);opacity:.7}
.summary-strip>div,.chain-summary .card{transition:background var(--dur-2) var(--ease)}
.summary-strip>div:hover,.chain-summary .card:hover{background:var(--raised)}
/* clickable KPI tiles (→ filter); the spare-IP tile stays non-interactive */
[data-page=monitor] .summary-strip>.tone-warn,[data-page=monitor] .summary-strip>.tone-down,
[data-page=monitor] .summary-strip>div:first-child{cursor:pointer}
[data-page=monitor] .summary-strip>.tone-warn:hover,[data-page=monitor] .summary-strip>.tone-down:hover,
[data-page=monitor] .summary-strip>div:first-child:hover{box-shadow:inset 0 0 0 1px var(--line-strong,var(--slate-8))}
.summary-strip .tone-warn strong{color:var(--status-warn)}
.summary-strip .tone-down strong{color:var(--red-11)}

/* ─── Host tools / search / filter chips ─────────────────────────────── */
.search:focus-within{border-color:var(--blue-8);box-shadow:0 0 0 3px color-mix(in oklab,var(--blue-8) 16%,transparent)}
.filter-chip{border-radius:999px;font-weight:500}
.filter-chip:hover{background:var(--slate-3);color:var(--text)}
.filter-chip.selected{background:color-mix(in oklab,var(--accent) 14%,transparent);border-color:color-mix(in oklab,var(--accent) 36%,transparent);color:var(--accent)}

/* ─── Host rows: hover affordance + chevron motion ───────────────────── */
.host-line{transition:background var(--dur-1) var(--ease)}
.host-line:hover{background:var(--panel)}
.host-line:hover .host-arrow .icon{transform:translateX(2px);color:var(--accent)}
.host-arrow .icon{transition:transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ip-dot{border-radius:2px}
.host-availability .entity-badge{font-weight:600}
/* living status dot on healthy rows only */
/* healthy status dots are calm (static) — no idle pulse */

/* ─── Tables: clearer header + row hover ─────────────────────────────── */
th{letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;color:var(--slate-11)}
tbody tr{transition:background var(--dur-1) var(--ease)}
tbody tr:hover{background:var(--raised)}

/* ─── TAME THE 8000px SCROLL: cap the banned / pool lists ─────────────── */
.entity-pools .card{display:flex;flex-direction:column}
@media(min-width:768px){.entity-pools .entity-list{max-height:min(66vh,640px);overflow:auto;overscroll-behavior:contain}}
.entity-pools .entity-caption{flex:none}
/* refined scrollbars */
.entity-list::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.command-results::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:10px;height:10px}
.entity-list::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.command-results::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{
  background:var(--slate-7);border-radius:999px;border:3px solid var(--panel);background-clip:padding-box}
.entity-list::-webkit-scrollbar-thumb:hover{background:var(--slate-8);background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:var(--slate-7) transparent}
.entity-list-row{transition:background var(--dur-1) var(--ease)}
.entity-list-row:hover{background:var(--raised)}

/* ─── DNS: sticky zone rail with its own scroll (kills the 5800px list) ─ */
@media(min-width:1024px){
  [data-page=dns] .zone-layout{align-items:start}
  [data-page=dns] .zone-layout>.card:first-child{position:sticky;top:72px;max-height:calc(100dvh - 92px);
    display:flex;flex-direction:column;overflow:hidden}
  [data-page=dns] .zone-layout>.card:first-child .card-head{flex:none}
  [data-page=dns] .zone-list{overflow:auto;min-height:0;overscroll-behavior:contain}
}
.zone{border-radius:var(--r-sm);position:relative}
.zone.selected{background:color-mix(in oklab,var(--accent) 12%,transparent);color:var(--accent)}
.zone.selected::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:var(--spine);border-radius:0 2px 2px 0;background:var(--accent)}

/* ─── Entity cards: quiet lift ───────────────────────────────────────── */
.entity-card:hover{transform:translateY(-1px)}

/* ─── Dialog / toast / command palette depth ─────────────────────────── */
dialog{box-shadow:var(--elev-pop)}
#toast{box-shadow:var(--elev-pop)}
#command{box-shadow:var(--elev-pop)}
.command-results>button[aria-selected=true]{box-shadow:inset var(--spine) 0 0 var(--accent)}

/* ─── Chains: turn text blocks into a compact flow diagram ───────────── */
.chain-lane{margin-bottom:12px}
.chain-lane>.card-head{min-height:auto;padding:11px 16px}
.chain-lane h2{font-size:13.5px;gap:8px}
.chain-lane .card-head small{font-size:11px;color:var(--muted)}
.chain-track{padding:16px;gap:0;align-items:stretch}
/* connector: a line with an arrowhead instead of a bare "→" */
.chain-arrow{align-self:center;min-width:40px;display:flex;align-items:center;justify-content:center;
  color:var(--slate-8);font-size:0;position:relative}
.chain-arrow::before{content:"";height:2px;width:100%;background:
  linear-gradient(90deg,color-mix(in oklab,var(--accent) 45%,var(--line)),color-mix(in oklab,var(--accent) 15%,var(--line)))}
.chain-arrow::after{content:"";position:absolute;right:6px;width:6px;height:6px;border-top:2px solid color-mix(in oklab,var(--accent) 40%,var(--line));
  border-right:2px solid color-mix(in oklab,var(--accent) 40%,var(--line));transform:rotate(45deg)}
/* nodes: diagram tiles with a status spine */
.chain-node.entity-card{padding:12px 14px;border-left:var(--spine) solid var(--entity-color);border-radius:var(--r)}
.chain-node .entity-card-top{margin-bottom:8px}
.chain-node .entity-kind{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chain-node .entity-title{font-size:13px}
.chain-node .entity-body{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.chain-ip{align-items:baseline}
.chain-ip>span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;min-width:38px}
.chain-ip code{font-size:11.5px;color:var(--text)}
.chain-node .entity-footer{margin-top:10px;padding-top:9px}
.chain-note{padding:9px 16px;font-size:11px;background:color-mix(in oklab,var(--panel) 60%,var(--bg))}
.chain-summary .card{padding:13px 18px}
.chain-summary strong{font-size:22px}
/* 2-up lane grid on wide screens — fills the empty right half, ~halves page height */
@media(min-width:1280px){
  [data-page=chains]{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:start}
  [data-page=chains]>.page-title,[data-page=chains]>.entity-legend,[data-page=chains]>.chain-summary,
  [data-page=chains]>.notice,[data-page=chains]>.chain-filters,[data-page=chains]>.empty{grid-column:1/-1}
  [data-page=chains]>.chain-lane{margin-bottom:0;align-self:stretch}
}
@media(prefers-reduced-motion:no-preference){.chain-node{transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}.chain-node:hover{transform:translateY(-1px)}}

/* ─── Click-to-copy affordance + micro-toast ─────────────────────────── */
code,.mono,.ag2-ipv,.ag2-hd-addr{cursor:copy}
button code,button .mono,a code,[data-action] code,[data-action] .mono,.host-open .mono,.host-open code,
.chain-node code,.chain-node .mono,label code,input,textarea{cursor:inherit}
#ag-microtoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  font:500 12px var(--font-ui);color:var(--text);box-shadow:var(--elev-pop);opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);z-index:200;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#ag-microtoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── Saved views menu + density (injected by redesign.js) ───────────── */
.ag-views{position:relative;display:inline-flex}
.ag-views-btn{white-space:nowrap}
.ag-views-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:260px;max-width:min(340px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--elev-pop);padding:6px;
  animation:ag-rise var(--dur-2) var(--ease)}
.ag-views-sec{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.ag-local{color:var(--faint,var(--muted));text-transform:none;letter-spacing:0}
.ag-views-empty{padding:6px 8px 10px;font-size:12px;color:var(--muted)}
.ag-views-sep{height:1px;background:var(--line);margin:6px 2px}
.ag-view-row{display:flex;align-items:stretch;gap:2px}
.ag-view-apply{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;background:transparent;border:0;border-radius:var(--r-sm);padding:7px 8px}
.ag-view-apply:hover{background:var(--raised)}
.ag-view-apply span{font-size:13px;font-weight:500;color:var(--text)}
.ag-view-apply small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.ag-view-del{flex:none;width:30px;background:transparent;border:0;color:var(--muted);border-radius:var(--r-sm)}
.ag-view-del:hover{background:var(--bad-bg,var(--redbg));color:var(--red)}
.ag-view-save,.ag-view-reset{width:100%;justify-content:flex-start;background:transparent;border:0;border-radius:var(--r-sm);padding:8px;color:var(--text);font-size:13px}
.ag-view-save{color:var(--accent)}
.ag-view-save:hover,.ag-view-reset:hover{background:var(--raised)}
.ag-dens-row{display:flex;gap:4px;padding:2px 2px 6px}
.ag-dens{flex:1;font-size:12px;min-height:30px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--r-sm)}
.ag-dens.on{background:color-mix(in oklab,var(--accent) 14%,transparent);border-color:color-mix(in oklab,var(--accent) 36%,transparent);color:var(--accent)}

/* sticky column header on the host table (labels stay visible while scrolling) */
[data-page=monitor] .host-table{overflow:clip}
[data-page=monitor] .host-table-head{position:sticky;top:56px;z-index:5;
  background:var(--panel);box-shadow:0 1px 0 var(--line)}
@media(max-width:767px){[data-page=monitor] .host-table-head{top:56px}}

/* search clear (✕) button (injected) */
.ag-clear{flex:none;width:22px;height:22px;min-height:0;padding:0;border:0;background:transparent;color:var(--muted);
  border-radius:999px;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ag-clear:hover{background:var(--raised);color:var(--text);filter:none}
.ag-clear[hidden]{display:none}

/* checkers filter toolbar (injected) */
.ag-cardtools{margin:0 0 18px;flex-wrap:wrap}
.ag-cardtools .host-search{flex:1;min-width:min(360px,100%)}
.ag-cardtools .ag-chk-filters{margin:0}
.ag-cardtools .ag-chk-count{margin-left:auto;padding:0;white-space:nowrap}

/* density: compact host rows + lists */
body.ag-compact .host-line{min-height:50px}
body.ag-compact .host-open{min-height:48px;padding:6px 0}
body.ag-compact .host-identity strong{line-height:1.35}
body.ag-compact .host-domain{margin-top:1px}
body.ag-compact .entity-list-row{min-height:auto;padding:8px 16px}
body.ag-compact .chain-node.entity-card{padding:10px 12px}
@media(max-width:767px){.ag-views-menu{right:auto;left:0}body.ag-compact .host-line{min-height:92px}}

/* ─── A11y + mobile polish (batch B) ─────────────────────────────────── */
/* interactive KPI tiles keyboard focus */
.summary-strip>[role="button"]{border-radius:0}
.summary-strip>[role="button"]:focus-visible{outline:var(--ring);outline-offset:-2px;border-radius:var(--r-sm)}
/* auto-DNS toggle: adequate hit-area without enlarging the checkbox visual */
.host-auto{min-width:44px;min-height:44px}
/* dashboard inline alert links: real target + affordance */
.checkline a{padding:6px;border-radius:var(--r-sm);min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.checkline a:hover{background:var(--raised)}
/* timeline rows: visible separator + leading icon square (was 20×24) */
.timeline .event{border-bottom:1px solid var(--slate-7)}
.event-icon{width:24px;height:24px}
.ag-empty-reset,.ag-chk-reset{margin-top:4px}
@media(max-width:767px){
  /* touch targets ≥44px */
  .topbar button,.top-actions button,.top-actions .icon-button{min-width:44px;min-height:44px}
  .host-tools button,.host-tools .small,.host-tools .ghost,.ag-views-btn,.automation-line button{min-height:44px}
  .checkline a{min-width:44px;min-height:44px}
  /* drawer = single scroll surface: don't nest evidence scrollers on mobile */
  .logic-evidence,.ag2-evidence,.drawer .logic-evidence{max-height:none;overflow:visible}
}

/* ─── Dashboard: duplicate-alert pill + checker-health KPI tone ───────── */
.ag-dup-count{display:inline-flex;align-items:center;margin-left:8px;font-size:11px;font-weight:600;padding:0 7px;min-height:18px;line-height:1;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--muted);vertical-align:middle;cursor:pointer}
.ag-dup-count:hover{color:var(--text);border-color:var(--line-strong,var(--slate-8));filter:none}
.ag-dup-count.open{background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent);border-color:color-mix(in oklab,var(--accent) 36%,transparent)}
.stats .stat.tone-warn .stat-number,.stat-number.ag-warn-num{color:var(--status-warn,var(--amber-11))}

/* ─── Settings: unsaved bar + dirty-field highlight (batch C) ─────────── */
.ag-settings-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;
  display:none;align-items:center;gap:12px;padding:9px 12px 9px 18px;border:1px solid var(--line-strong,var(--slate-8));
  border-radius:999px;background:var(--panel);box-shadow:var(--elev-pop)}
.ag-settings-bar.show{display:flex;animation:ag-rise var(--dur-2) var(--ease)}
.ag-sb-txt{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.ag-field-dirty{border-color:var(--accent)!important;box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 18%,transparent)}
@media(max-width:767px){.ag-settings-bar{left:12px;right:12px;bottom:12px;transform:none;border-radius:var(--r);justify-content:space-between;flex-wrap:wrap}.ag-settings-bar.show{animation:none}}

/* ─── DNS: zone record counts / managed badge / zone filter (batch C) ── */
.zone .ag-zone-meta{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-size:10px;font-variant-numeric:tabular-nums;flex:none}
.ag-zone-meta .ag-zc{color:var(--muted)}
.ag-zone-meta .ag-zm{color:var(--accent);font-weight:600}
.ag-zone-search{margin:0 8px 10px;width:auto;display:flex}
.ag-zone-search input{height:34px;min-height:34px}

/* ─── History: journal filter + capped timeline (batch C) ────────────── */
.ag-journal-filters{margin:4px 0 2px;padding:0 16px}
.ag-journal-count{margin-left:auto;padding:0;align-self:center}
/* cap event timelines on desktop (history journal + dashboard alerts); mobile flows naturally */
@media(min-width:768px){.content .timeline{max-height:clamp(360px,54vh,580px);overflow:auto;overscroll-behavior:contain}}

/* ─── Boot skeleton: refined shimmer ─────────────────────────────────── */
.boot-brand{letter-spacing:-.03em}
.skeleton{background:linear-gradient(90deg,var(--slate-3),var(--slate-4),var(--slate-3));background-size:200% 100%;animation:ag-shim 1.5s linear infinite}
@keyframes ag-shim{to{background-position:-200% 0}}

/* ─── Wave 3: history CSV export + settings scroll-spy nav ───────────── */
.ag-csv{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.settings-nav button.ag-nav-active{background:var(--accent);border-color:var(--accent);color:#fff}
.settings-nav button.ag-nav-active:hover{background:var(--accent);color:#fff}
.settings-nav button.ag-nav-added{font-style:normal}