/* ==========================================================================
   Integration Lab — shared design system
   Tokens, base type, and the components every module page uses.
   Page-specific rules stay inline in each page.
   ========================================================================== */

:root{
  --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#E9ECF1; --surface-3:#DFE3EA;
  --ink:#111823; --ink-2:#465063; --ink-3:#6E7889;
  --rule:#DBE0E8; --rule-2:#C2C9D6;
  --accent:#B4530A; --accent-2:#8E4007; --accent-soft:#FAEEE3;
  --ok:#0F766E; --warn:#A16207; --crit:#BE123C;
  --shadow:0 1px 2px rgba(17,24,35,.05), 0 8px 24px -12px rgba(17,24,35,.18);

  /* console surfaces stay dark in both themes — deliberate */
  --con-bg:#0C111A; --con-bg-2:#141C27; --con-ink:#D8DEE8; --con-ink-2:#8994A6;
  --con-rule:#222B39; --con-ok:#34D399; --con-warn:#FBBF24; --con-crit:#FB7185; --con-acc:#F0A44F;

  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"IBM Plex Serif",ui-serif,Georgia,"Times New Roman",serif;
  --wrap:1140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0A0E14; --surface:#101720; --surface-2:#161F2A; --surface-3:#1D2733;
    --ink:#E7ECF3; --ink-2:#A4AEBE; --ink-3:#798494;
    --rule:#212A37; --rule-2:#2E3947;
    --accent:#F0A44F; --accent-2:#F6BE7C; --accent-soft:#2A1B0D;
    --ok:#2DD4BF; --warn:#FBBF24; --crit:#FB7185;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0E14; --surface:#101720; --surface-2:#161F2A; --surface-3:#1D2733;
  --ink:#E7ECF3; --ink-2:#A4AEBE; --ink-3:#798494;
  --rule:#212A37; --rule-2:#2E3947;
  --accent:#F0A44F; --accent-2:#F6BE7C; --accent-soft:#2A1B0D;
  --ok:#2DD4BF; --warn:#FBBF24; --crit:#FB7185;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16px;
  line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600; line-height:1.18; letter-spacing:-.012em}
p{margin:0}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
code{font-family:var(--mono); font-size:.92em}
img{max-width:100%}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.lab{font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; color:var(--ink-3); font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.scroller{overflow-x:auto}
.stack{display:flex; flex-direction:column; gap:12px}
.btnrow{display:flex; flex-wrap:wrap; gap:8px}

/* ---------------------------------------------------------------- header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--rule)}
.topin{display:flex; align-items:center; gap:16px; height:56px}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; letter-spacing:-.02em;
  font-size:.95rem; color:var(--ink); text-decoration:none; flex:none}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); flex:none}
.crumb{color:var(--ink-3); font-size:.85rem; font-family:var(--mono)}
.chip{margin-left:auto; flex:none; font-family:var(--mono); font-size:.65rem; letter-spacing:.06em;
  text-transform:uppercase; border:1px solid currentColor; padding:3px 7px; border-radius:3px}
.chip.live{color:var(--ok)} .chip.pending{color:var(--warn)} .chip.proto{color:var(--warn)}
@media (max-width:640px){ .crumb{display:none} }

/* ---------------------------------------------------------------- sections */
section{padding-block:clamp(34px,4.5vw,64px); border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.shead{max-width:62ch; margin-bottom:clamp(20px,3vw,30px)}
.shead h2{font-size:clamp(1.3rem,1.05rem+1vw,1.8rem); margin-top:8px}
.shead p{margin-top:10px; color:var(--ink-2)}
h1{font-size:clamp(1.85rem,1.3rem+2.2vw,2.8rem); letter-spacing:-.028em}
.lede{margin-top:14px; color:var(--ink-2); font-size:1.0625rem; max-width:60ch}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:6px; font-size:.9rem; font-weight:500;
  border:1px solid transparent; cursor:pointer; text-decoration:none; font-family:var(--sans)}
.btn.p{background:var(--accent); color:#fff; border-color:var(--accent)}
:root[data-theme="dark"] .btn.p{color:#1A1004}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn.p{color:#1A1004} }
.btn.p:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.s{background:var(--surface); color:var(--ink); border-color:var(--rule-2)}
.btn.s:hover{border-color:var(--accent); color:var(--accent)}
.btn.d{background:transparent; color:var(--crit); border-color:currentColor}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:7px 12px; font-size:.82rem}

/* ---------------------------------------------------------------- panels */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:18px}
.note{background:var(--surface-2); border:1px solid var(--rule);
  border-left:2px solid var(--accent); border-radius:0 7px 7px 0;
  padding:12px 15px; font-size:.84rem; color:var(--ink-2)}
.note.warn{border-left-color:var(--warn)}
.note b{color:var(--ink)}
.note + .note{margin-top:10px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.84rem;
  font-family:var(--mono); align-items:baseline}
.kv dt{color:var(--ink-3)} .kv dd{margin:0; color:var(--ink); word-break:break-all}

/* ---------------------------------------------------------------- console */
.console{background:var(--con-bg); border:1px solid var(--con-rule); border-radius:10px;
  overflow:hidden; box-shadow:var(--shadow)}
.conhead{display:flex; align-items:center; gap:10px; padding:9px 13px;
  background:var(--con-bg-2); border-bottom:1px solid var(--con-rule)}
.conhead .t{font-family:var(--mono); font-size:.73rem; color:var(--con-ink-2)}
.conhead .t b{color:var(--con-ink); font-weight:500}
.dotstate{margin-left:auto; display:flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--con-ink-2)}
.dotstate i{width:6px; height:6px; border-radius:50%; background:var(--con-ink-2); flex:none}
.dotstate.on{color:var(--con-ok)} .dotstate.on i{background:var(--con-ok)}
.dotstate.warn{color:var(--con-warn)} .dotstate.warn i{background:var(--con-warn)}
.dotstate.bad{color:var(--con-crit)} .dotstate.bad i{background:var(--con-crit)}
.conbody{padding:13px; overflow-x:auto; max-height:340px; overflow-y:auto}
.trace{font-family:var(--mono); font-size:.78rem; line-height:1.8; color:var(--con-ink);
  white-space:pre-wrap; word-break:break-word; margin:0}
.trace .m{color:var(--con-ink-2)} .trace .ok{color:var(--con-ok)}
.trace .wn{color:var(--con-warn)} .trace .cr{color:var(--con-crit)} .trace .ac{color:var(--con-acc)}

.meters{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--con-rule); border-top:1px solid var(--con-rule)}
.meters.three{grid-template-columns:repeat(3,1fr)}
.meter{background:var(--con-bg-2); padding:9px 12px; min-width:0}
.meter .l{font-family:var(--mono); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--con-ink-2)}
.meter .v{font-family:var(--mono); font-size:.9rem; color:var(--con-ink);
  font-variant-numeric:tabular-nums; margin-top:2px; overflow:hidden; text-overflow:ellipsis}
.meter .v.g{color:var(--con-ok)} .meter .v.w{color:var(--con-warn)} .meter .v.c{color:var(--con-crit)}

/* ---------------------------------------------------------------- tables */
table{width:100%; border-collapse:collapse; font-size:.87rem}
th{text-align:left; font-weight:600; color:var(--ink-3); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.07em; padding:0 14px 9px 0;
  border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:11px 14px 11px 0; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td code{color:var(--ink); background:var(--surface-2); padding:1px 5px; border-radius:3px}
.scroller table{min-width:620px}

/* ---------------------------------------------------------------- prose */
.prose{font-family:var(--serif); font-size:1.0625rem; line-height:1.68; color:var(--ink-2); max-width:64ch}
.prose p+p{margin-top:14px}
.prose strong{color:var(--ink); font-weight:600}

/* ---------------------------------------------------------------- diagrams */
.diagram{overflow-x:auto; padding-bottom:6px}
.dbox{fill:var(--surface); stroke:var(--rule-2)}
.dbox-a{fill:var(--accent-soft); stroke:var(--accent)}
.dlab{fill:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:500}
.dsub{fill:var(--ink-3); font-family:var(--mono); font-size:9.5px}
.dttl{fill:var(--ink-3); font-family:var(--mono); font-size:9px; letter-spacing:.09em}
.dline{stroke:var(--rule-2); fill:none; stroke-width:1.4}
.dline-a{stroke:var(--accent); fill:none; stroke-width:1.6}
.dline-d{stroke:var(--rule-2); fill:none; stroke-width:1.3; stroke-dasharray:4 3}
.dgrid{stroke:var(--rule); fill:none; stroke-width:1}

/* ---------------------------------------------------------------- footer */
footer{padding-block:30px 40px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:.82rem}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}