/* ============================================================================
   ARD Explorer — "PROBE" instrument console
   A diagnostic readout: neutral teal-ink chassis; saturated color is reserved
   strictly for meaning (severity / success). The operator's own actions use one
   non-semantic hue (violet). Single engineered superfamily: IBM Plex.
   ========================================================================== */

/* ---- Self-hosted fonts (strict CSP: style-src/font-src 'self') ------------ */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/ibm-plex-mono-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/ibm-plex-mono-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/ibm-plex-sans-700.woff2") format("woff2")}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  /* chassis (neutral, teal-ink) */
  --bg:#0A1416; --bg-2:#091113;
  --surface:#0E1C20; --surface-2:#13272C; --surface-3:#193439;
  --line:#21383D; --line-soft:#192C30;
  --ink:#DCE7E5; --ink-dim:#8DA3A3; --ink-faint:#5C7375;

  /* operator / brand (violet — NON-severity, = "your input / the instrument") */
  --brand:#9B8CFF; --brand-bright:#B8AEFF; --brand-dim:#6E62C0;
  --brand-soft:rgba(155,140,255,.14); --brand-line:rgba(155,140,255,.40);

  /* signals — the ONLY saturated colors; each one means something */
  --error:#FF6B5B; --error-soft:rgba(255,107,91,.13); --error-line:rgba(255,107,91,.42);
  --warn:#F4B740;  --warn-soft:rgba(244,183,64,.13);  --warn-line:rgba(244,183,64,.42);
  --info:#58C7E8;  --info-soft:rgba(88,199,232,.13);  --info-line:rgba(88,199,232,.42);
  --ok:#54D6A6;    --ok-soft:rgba(84,214,166,.13);    --ok-line:rgba(84,214,166,.42);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius:7px; --radius-sm:5px;
  --maxw:1000px;
  --eyebrow:.72rem; --label:.7rem;
}

/* ---- Reset / base --------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1100px 420px at 50% -160px, rgba(155,140,255,.10), transparent 70%),
    linear-gradient(var(--bg), var(--bg-2));
  background-attachment:fixed; min-height:100vh;
}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2{margin:0; line-height:1.2}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-bright)}
code{font-family:var(--mono); font-size:.86em}
.muted{color:var(--ink-faint); font-weight:400}
.hidden{display:none !important}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* shared eyebrow / section label treatment */
.eyebrow{
  font:500 var(--eyebrow)/1 var(--mono); text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink-faint); margin:0 0 16px; display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--brand); display:inline-block}

/* ---- Console bar (header) ------------------------------------------------- */
.console-bar{border-bottom:1px solid var(--line); background:rgba(9,17,19,.72); backdrop-filter:blur(8px)}
.bar-inner{display:flex; align-items:center; gap:18px; height:58px}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink)}
.brand-mark{
  width:16px; height:16px; flex:none; transform:rotate(45deg);
  border:2px solid var(--brand); border-radius:3px; position:relative;
}
.brand-mark::after{content:""; position:absolute; inset:3px; background:var(--brand); border-radius:1px}
.brand-word{font:600 1.02rem/1 var(--mono); letter-spacing:.02em}
.brand-sep{color:var(--brand)}
.bar-tag{
  margin:0 auto 0 4px; font:500 var(--label)/1 var(--mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-faint);
}
.bar-link{font:500 .82rem/1 var(--mono); color:var(--ink-dim); letter-spacing:.02em}
.bar-link:hover{color:var(--brand-bright)}
.bar-links{display:flex; align-items:center; gap:14px}
.bar-pitch{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); font:500 .74rem/1 var(--mono); color:var(--ink-dim); letter-spacing:.01em; white-space:nowrap; transition:border-color .15s, color .15s, background .15s}
.bar-pitch:hover{border-color:var(--brand-line); color:var(--ink); background:var(--surface-3)}
.bar-pitch strong{color:var(--brand-bright); font-weight:600}
.pitch-mark{width:8px; height:8px; flex:none; border-radius:50%; background:var(--brand); box-shadow:0 0 8px -1px var(--brand)}
.pitch-arrow{color:var(--ink-faint)}
.bar-pitch:hover .pitch-arrow{color:var(--brand-bright)}

/* ---- Probe console -------------------------------------------------------- */
.console{padding:60px 0 30px}
.probe-form{margin:0}
.probe-field{
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  overflow:hidden; transition:border-color .18s, box-shadow .18s;
}
.probe-field:focus-within{border-color:var(--brand-line); box-shadow:0 0 0 4px var(--brand-soft)}
.field-scheme{
  display:flex; align-items:center; padding:0 4px 0 18px;
  font:400 1rem/1 var(--mono); color:var(--ink-faint); user-select:none;
}
#host-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font:400 1.06rem/1 var(--mono); padding:20px 12px 20px 2px; letter-spacing:.01em;
}
#host-input::placeholder{color:var(--ink-faint); opacity:.85}
#explore-btn{
  flex:none; display:inline-flex; align-items:center; gap:.55em; border:0; cursor:pointer;
  margin:7px; padding:0 22px; border-radius:var(--radius-sm);
  background:var(--brand); color:#10121f;
  font:600 .9rem/1 var(--mono); text-transform:uppercase; letter-spacing:.12em;
  transition:background .15s, transform .05s;
}
#explore-btn:hover{background:var(--brand-bright)}
#explore-btn:active{transform:translateY(1px)}
#explore-btn:disabled{opacity:.55; cursor:progress}
.btn-caret{font-size:.8em; transform:translateY(.5px)}

.hint{margin:14px 2px 0; font-size:.86rem; color:var(--ink-dim)}
.hint code{color:var(--ink); background:var(--surface-2); padding:.12em .45em; border-radius:4px; border:1px solid var(--line-soft)}
.disc-note{margin-top:13px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:.83rem; line-height:1.55; color:var(--ink-dim)}
.disc-note p{margin:0}
.disc-lead strong{color:var(--ink); font-weight:600}
.disc-note ul{list-style:none; margin:9px 0; padding:0; display:grid; gap:7px}
.disc-note li{padding-left:15px; position:relative}
.disc-note li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--brand)}
.disc-note li strong{color:var(--ink); font-weight:600}
.disc-foot{margin-top:10px; color:var(--ink-faint)}
.disc-foot strong{color:var(--ink-dim); font-weight:600}
.disc-note code{color:var(--brand-bright); background:var(--surface-2); padding:.12em .42em; border-radius:4px; border:1px solid var(--line-soft); word-break:break-word}

.examples{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:22px}
.examples-label{font:500 var(--label)/1 var(--mono); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-faint); margin-right:2px}
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-dim);
  font:400 .82rem/1 var(--mono); padding:9px 13px; border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover{border-color:var(--brand-line); color:var(--ink); background:var(--surface-2)}
.chip-ghost{border-style:dashed; color:var(--ink-faint)}

.paste{margin-top:16px; display:grid; gap:10px; justify-items:start}
#paste-input{
  width:100%; resize:vertical; min-height:150px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius);
  font:400 .85rem/1.5 var(--mono); padding:14px 16px; outline:0;
}
#paste-input:focus{border-color:var(--brand-line); box-shadow:0 0 0 4px var(--brand-soft)}
#paste-btn{
  border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand-bright); cursor:pointer;
  font:600 .82rem/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; padding:11px 18px; border-radius:var(--radius-sm);
}
#paste-btn:hover{background:var(--brand);color:#10121f}

/* ---- SIGNATURE: the probe trace pipeline ---------------------------------- */
.trace-panel{
  margin-top:10px; padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(var(--surface),var(--bg-2));
}
.trace{list-style:none; margin:0; padding:0; display:flex; align-items:flex-start}
.stage{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
}
/* rail / connector — drawn from the previous lamp center to this lamp center */
.stage::before{
  content:""; position:absolute; top:10px; left:-50%; width:100%; height:2px;
  background:var(--line); z-index:0;
}
.stage:first-child::before{display:none}
.stage.is-pass::before,.stage.is-warn::before,.stage.is-fail::before,.stage.is-active::before{background:var(--brand-dim)}
.stage.is-skip::before{background:transparent; border-top:2px dashed var(--line-soft); height:0; top:11px}

.lamp{
  position:relative; z-index:1; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--ink-faint); background:transparent; transition:all .25s ease;
}
.stage.is-active .lamp{border-color:var(--brand); background:var(--brand-soft); animation:pulse 1.15s ease-in-out infinite}
.stage.is-pass .lamp{border-color:var(--ok); background:var(--ok); box-shadow:0 0 13px -2px var(--ok)}
.stage.is-warn .lamp{border-color:var(--warn); background:var(--warn); box-shadow:0 0 13px -2px var(--warn)}
.stage.is-fail .lamp{border-color:var(--error); background:var(--error); box-shadow:0 0 13px -2px var(--error)}
.stage.is-skip .lamp{border-style:dashed; opacity:.5}

.stage-verdict .lamp::after{position:absolute; inset:0; display:grid; place-items:center; font:700 12px/1 var(--mono); color:var(--bg)}
.stage-verdict.is-pass .lamp::after{content:"✓"}
.stage-verdict.is-warn .lamp::after{content:"!"}
.stage-verdict.is-fail .lamp::after{content:"✗"}
.stage-verdict.is-pass .lamp,.stage-verdict.is-warn .lamp,.stage-verdict.is-fail .lamp{box-shadow:0 0 0 5px var(--surface),0 0 0 6px currentColor}
.stage-verdict.is-pass .lamp{color:var(--ok-line)} .stage-verdict.is-warn .lamp{color:var(--warn-line)} .stage-verdict.is-fail .lamp{color:var(--error-line)}

.stage-label{font:500 var(--label)/1 var(--mono); text-transform:uppercase; letter-spacing:.13em; color:var(--ink-dim)}
.stage.is-idle .stage-label,.stage.is-skip .stage-label{color:var(--ink-faint)}
.stage-note{font:400 .6rem/1.2 var(--mono); color:var(--ink-faint); min-height:1em; letter-spacing:.04em}

.trace.is-live .stage .lamp{animation:lampIn .42s both}
.trace.is-live .stage:nth-child(1) .lamp{animation-delay:0s}
.trace.is-live .stage:nth-child(2) .lamp{animation-delay:.07s}
.trace.is-live .stage:nth-child(3) .lamp{animation-delay:.14s}
.trace.is-live .stage:nth-child(4) .lamp{animation-delay:.21s}
.trace.is-live .stage:nth-child(5) .lamp{animation-delay:.30s}

@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--brand-soft)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes lampIn{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- Verdict readout ------------------------------------------------------ */
.status{margin-top:18px}
.status-head{display:flex; align-items:center; flex-wrap:wrap; gap:14px}
.verdict{font:600 clamp(1.4rem,3.6vw,2.1rem)/1.1 var(--mono); letter-spacing:-.01em; color:var(--ink); display:inline-flex; align-items:center; gap:.5em}
.verdict::before{content:""; width:11px; height:11px; border-radius:50%; background:var(--ink-faint); box-shadow:0 0 12px -1px currentColor}
.verdict.ok{color:var(--ok)} .verdict.warn{color:var(--warn)} .verdict.bad{color:var(--error)}
.verdict.ok::before{background:var(--ok)} .verdict.warn::before{background:var(--warn)} .verdict.bad::before{background:var(--error)}
.counts{display:inline-flex; flex-wrap:wrap; gap:7px}
.status-source{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:11px; font:400 .8rem/1.4 var(--mono); color:var(--ink-faint)}
.status-source code{color:var(--ink-dim); background:var(--surface-2); padding:.18em .5em; border-radius:4px; border:1px solid var(--line-soft); word-break:break-all; min-width:0}
.source-method{flex:none; font:600 .6rem/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--brand-bright); background:var(--brand-soft); border:1px solid var(--brand-line); padding:4px 7px; border-radius:4px}

/* badges (counts + entry flags) */
.badge{
  font:500 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.09em;
  padding:5px 9px; border-radius:4px; border:1px solid var(--line); color:var(--ink-dim); background:var(--surface-2); white-space:nowrap;
}
.badge.error{color:var(--error); background:var(--error-soft); border-color:var(--error-line)}
.badge.warn{color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line)}
.badge.info{color:var(--info); background:var(--info-soft); border-color:var(--info-line)}
.badge.ok{color:var(--ok); background:var(--ok-soft); border-color:var(--ok-line)}

/* spinner */
.spinner{width:17px; height:17px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--brand); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Panels --------------------------------------------------------------- */
.panel{
  margin-top:26px; padding:22px 22px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.panel-title{
  font:500 .78rem/1 var(--mono); text-transform:uppercase; letter-spacing:.18em; color:var(--ink-dim);
  display:flex; align-items:center; gap:.7em;
}
.panel-title::before{content:""; width:14px; height:2px; background:var(--brand); display:inline-block}
.panel-title .muted{letter-spacing:.04em}
.panel > .panel-title{margin-bottom:16px}
.empty{margin:6px 2px 0; color:var(--ink-faint); font-size:.92rem}
.empty.ok{color:var(--ok)}

/* host card */
.host-card{}
.host-card h3{margin:0 0 14px; font:600 1.15rem/1.2 var(--sans); color:var(--ink)}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:7px 18px; margin:0}
.kv dt{font:500 var(--label)/1.6 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint)}
.kv dd{margin:0; font-family:var(--mono); font-size:.85rem; color:var(--ink); word-break:break-all}
.kv dd code{color:var(--brand-bright)}

/* ---- Resources grid ------------------------------------------------------- */
.entries-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
.entry{
  position:relative; padding:17px 17px 16px 19px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); overflow:hidden;
}
.entry::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line); }
.entry.has-error::before{background:var(--error)}
.entry.has-warn::before{background:var(--warn)}
.entry-top{display:block}
.entry-title{margin:0; font:600 1.02rem/1.25 var(--sans); color:var(--ink)}
.entry-type{display:inline-block; margin-top:9px; max-width:100%; font:400 .66rem/1.4 var(--mono); color:var(--ink-dim); background:var(--surface); border:1px solid var(--line); padding:3px 8px; border-radius:4px; word-break:break-all}
.entry-flags{display:flex; gap:6px; margin-top:10px}
.entry-id{margin-top:11px; font:400 .76rem/1.45 var(--mono); color:var(--brand-bright); word-break:break-all}
.entry-desc{margin:11px 0 0; font-size:.9rem; color:var(--ink-dim); line-height:1.5}
.entry-loc{margin-top:12px; font:400 .78rem/1.4 var(--mono); word-break:break-all}
.entry-loc a{color:var(--info)}
.entry-loc a:hover{color:var(--ink)}
.inline-tag{color:var(--ink-faint); border:1px dashed var(--line); padding:2px 8px; border-radius:4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:13px}
.tag{font:400 .7rem/1 var(--mono); color:var(--ink-dim); border:1px solid var(--line); padding:5px 9px; border-radius:4px}
.tag.cap{color:var(--ink); border-color:var(--brand-line); background:var(--brand-soft)}
.section-label{margin-top:15px; font:500 .62rem/1 var(--mono); text-transform:uppercase; letter-spacing:.15em; color:var(--ink-faint)}
.rq{list-style:none; margin:9px 0 0; padding:0; display:grid; gap:5px}
.rq li{font:400 .8rem/1.4 var(--sans); color:var(--ink-dim); padding-left:1.1em; position:relative}
.rq li::before{content:"›"; position:absolute; left:0; color:var(--brand); font-family:var(--mono)}
.entry-trust{
  margin-top:14px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); font:400 .74rem/1.45 var(--mono); color:var(--ink-dim); word-break:break-all;
}
.entry-trust code{color:var(--ok)}

/* ---- Findings ------------------------------------------------------------- */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filter-btn{
  font:500 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; cursor:pointer;
  padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--ink-dim);
  transition:opacity .15s, border-color .15s, color .15s;
}
.filter-btn[data-level="ERROR"]{color:var(--error); border-color:var(--error-line)}
.filter-btn[data-level="WARN"]{color:var(--warn); border-color:var(--warn-line)}
.filter-btn[data-level="INFO"]{color:var(--info); border-color:var(--info-line)}
.filter-btn[aria-pressed="false"]{opacity:.4; color:var(--ink-faint); border-color:var(--line); text-decoration:line-through}
.findings-list{display:grid; gap:10px}
.finding{
  position:relative; padding:14px 16px 15px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2);
}
.finding::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
.finding.error::before{background:var(--error)}
.finding.warn::before{background:var(--warn)}
.finding.info::before{background:var(--info)}
.finding-head{display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:8px}
.finding-path{font:500 .8rem/1.3 var(--mono); color:var(--ink); word-break:break-all}
.finding-code{font:400 .66rem/1 var(--mono); color:var(--ink-faint); background:var(--surface); border:1px solid var(--line); padding:4px 7px; border-radius:4px; text-transform:lowercase}
.finding-msg{font-size:.9rem; line-height:1.5; color:var(--ink-dim)}
.finding-fix{
  margin-top:11px; padding:10px 13px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--brand);
  font-size:.86rem; line-height:1.5; color:var(--ink);
}
.finding-fix b{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--brand-bright); font-weight:500}

/* ---- Footer --------------------------------------------------------------- */
.site-footer{margin-top:46px; border-top:1px solid var(--line); background:rgba(9,17,19,.5)}
.footer-inner{padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px 28px; flex-wrap:wrap}
.footer-inner p{margin:0; font-size:.82rem; color:var(--ink-faint)}
.footer-note{max-width:48ch}
.footer-inner strong{color:var(--ink-dim); font-weight:600}
.footer-credit{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap}
.footer-made{color:var(--ink-dim)}
.flag{width:20px; height:auto; vertical-align:-3px; margin:0 3px; border-radius:1.5px; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.footer-links{display:inline-flex; align-items:center; gap:15px}
.footer-links a{font:500 .8rem/1 var(--mono); color:var(--ink-dim); letter-spacing:.02em}
.footer-links a:hover{color:var(--brand-bright)}

/* ---- Focus ---------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:2px}
.chip:focus-visible,#explore-btn:focus-visible,#paste-btn:focus-visible,.filter-btn:focus-visible{outline-offset:3px}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:900px){ .bar-tag{display:none} }

@media (max-width:680px){
  .bar-inner{flex-wrap:wrap; height:auto; min-height:56px; padding:8px 0; gap:8px 12px}
  .bar-links{width:100%; gap:12px}
  .console{padding:38px 0 24px}
  .probe-field{flex-wrap:wrap}
  .field-scheme{padding:14px 0 0 16px}
  #host-input{flex:1 1 100%; padding:8px 16px 6px}
  #explore-btn{flex:1 1 100%; margin:8px; justify-content:center; padding:14px}
  .trace-panel{padding:22px 12px 18px}
  .stage{gap:9px}
  .stage-label{letter-spacing:.06em; font-size:.62rem}
  .stage-note{display:none}
  .entries-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr; gap:2px 0}
  .kv dt{margin-top:8px}
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .trace.is-live .stage .lamp{animation:none}
  .stage.is-active .lamp{animation:none}
}