/* DevInt operator docs — design system mirrored from web-ui (docs/08). Self-
   contained (no Tailwind/CDN at runtime), so the docs match "The Console" look:
   dark, mono-forward, cyan accent, uppercase micro-labels, animated grid. */
:root{
  --bg:#080b12; --surface:#0e1420; --surface-2:#141c2b; --line:#1c2637;
  --text:#e6f0f7; --muted:#7f90a8; --cyan:#22d3ee; --green:#34e5a0;
  --violet:#a78bfa; --amber:#f5c542; --orange:#ff9d4d; --red:#ff3b5c;
  --sev-critical:#ff3b5c; --sev-high:#ff9d4d; --sev-medium:#f5c542;
  --sev-low:#5cc8ff; --sev-info:#34e5a0;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.15;animation:grid-drift 18s linear infinite}
@keyframes grid-drift{0%{background-position:0 0}100%{background-position:44px 44px}}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);
  padding:.1em .4em;border-radius:4px;color:var(--cyan)}
pre{font-family:var(--mono);font-size:.82rem;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto;line-height:1.5}
pre code{background:none;padding:0;color:var(--green)}

/* layout: sticky sidebar + content */
.wrap{position:relative;z-index:1;display:grid;grid-template-columns:250px 1fr;
  gap:0;max-width:1200px;margin:0 auto;min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:1.5rem 1rem;border-right:1px solid var(--line)}
.brand{font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(52,229,160,.6);animation:pulse-dot 2.4s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,229,160,.6)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(52,229,160,0)}}
.side .tag{font-family:var(--mono);font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.25rem}
.side nav{display:flex;flex-direction:column;gap:.1rem}
.side .grp{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.16em;margin:1rem 0 .35rem .4rem}
.side a{color:var(--muted);padding:.32rem .5rem;border-radius:7px;font-size:.86rem;
  border-left:2px solid transparent}
.side a:hover{color:var(--text);background:var(--surface);text-decoration:none}
.main{padding:2.25rem 2.5rem 6rem;min-width:0}

/* typography */
h1{font-size:1.9rem;font-weight:650;margin:.2em 0 .3em;letter-spacing:-.01em}
h2{font-size:1.35rem;font-weight:600;margin:2.4rem 0 .5rem;padding-top:.6rem;scroll-margin-top:1rem}
h3{font-size:1.05rem;font-weight:600;margin:1.5rem 0 .35rem;color:var(--text)}
.microlabel{font-family:var(--mono);font-size:.62rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.16em}
.lead{color:var(--muted);font-size:1.05rem;max-width:70ch}
p,li{max-width:74ch}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* panels / cards */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem 1.25rem;box-shadow:0 1px 0 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.9);margin:1rem 0}
.panel > .microlabel{display:block;margin-bottom:.6rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.chip{display:inline-block;font-family:var(--mono);font-size:.7rem;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem;color:var(--muted)}
.badge{display:inline-block;font-family:var(--mono);font-size:.68rem;border-radius:6px;
  padding:.08rem .45rem;border:1px solid}
.sev-critical{color:var(--sev-critical);border-color:var(--sev-critical)}
.sev-high{color:var(--sev-high);border-color:var(--sev-high)}
.sev-medium{color:var(--sev-medium);border-color:var(--sev-medium)}
.sev-low{color:var(--sev-low);border-color:var(--sev-low)}
.sev-info{color:var(--sev-info);border-color:var(--sev-info)}
.btn{display:inline-block;font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);border-radius:8px;padding:.4rem .8rem}
.btn-primary{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 24px -6px rgba(34,211,238,.5)}

/* tables */
table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.88rem}
th{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);text-align:left;font-weight:400;padding:.4rem .6rem;border-bottom:1px solid var(--line)}
td{padding:.45rem .6rem;border-bottom:1px solid rgba(28,38,55,.5);vertical-align:top}
td code{white-space:nowrap}

/* screenshots */
figure{margin:1.25rem 0}
figure img{width:100%;display:block;border:1px solid var(--line);border-radius:10px;
  background:var(--surface)}
figure .ph{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:220px;border:1px dashed var(--line);border-radius:10px;background:
  repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px);
  color:var(--muted);font-family:var(--mono);font-size:.8rem;padding:1rem}
figcaption{font-size:.8rem;color:var(--muted);margin-top:.5rem;font-style:italic}

.callout{border-left:3px solid var(--cyan);background:var(--surface);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;margin:1.1rem 0;font-size:.92rem}
.callout.warn{border-left-color:var(--orange)}
.note{color:var(--muted);font-size:.9rem}
@media (max-width:820px){.wrap{grid-template-columns:1fr}.side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.main{padding:1.5rem 1.25rem 4rem}}