/* ============================================================================
   RL Trajectory Auditor — Inspector
   Dev-tool aesthetic: warm light shell + dark "console" trace pane, oxblood
   accent, self-hosted JetBrains Mono / IBM Plex Sans / Fraunces.
   ========================================================================== */

@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-display:swap; src:url('fonts/jetbrains-mono-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:600; font-display:swap; src:url('fonts/fraunces-600.woff2') format('woff2'); }

:root {
  --paper:#f4efe6; --paper-2:#ece4d6; --card:#fbf8f1;
  --ink:#1c1714; --ink-soft:#5b5048; --rule:#d8cdb9;
  --oxblood:#7b2d26; --oxblood-2:#9c4339;

  /* console (dark) */
  --con-bg:#1b1714; --con-bg-2:#231d19; --con-line:#332a24; --con-fg:#d9cfc2;
  --con-dim:#8a7c6e;
  --r-system:#8a7c6e; --r-user:#6fb3a8; --r-assistant:#d9a44a; --r-tool:#84b06a;
  --hl:#c2563f;
  --add:#74a262; --del:#c2563f;

  /* diagnosis hues */
  --d-TRAINING:#b8503f; --d-HARNESS:#4a9b8e; --d-PRODUCT:#d2a44a;
  --d-BOTH:#9d7bb0; --d-CLEAN:#7aa863;

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Fraunces',Georgia,serif;
}

* { box-sizing:border-box; }
/* the hidden attribute must win over .landing/.overlay-sc display rules below,
   or a skipped (empty) overlay would cover the whole page */
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
::selection { background:rgba(123,45,38,0.2); }
button { font-family:inherit; cursor:pointer; }

.app { display:grid; grid-template-rows:auto 1fr; height:100vh; }

/* ---- Top strip: masthead + finding ------------------------------------- */
.topbar {
  display:flex; align-items:center; gap:26px; padding:12px 20px;
  border-bottom:2px solid var(--ink); background:var(--paper);
  flex-wrap:wrap;
}
.brand { display:flex; flex-direction:column; line-height:1; }
.brand .k { font-family:var(--mono); font-size:9.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--oxblood); }
.brand h1 { font-family:var(--display); font-weight:600; font-size:21px; margin:3px 0 0; letter-spacing:-0.01em; }
.brand h1 em { font-style:italic; color:var(--oxblood); }

.metric { display:flex; flex-direction:column; gap:1px; padding-left:22px; border-left:1px solid var(--rule); }
.metric .lab { font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.metric .v { font-family:var(--display); font-weight:600; font-size:22px; line-height:1; }
.metric .v small { font-family:var(--mono); font-size:11px; color:var(--ink-soft); font-weight:400; }
.metric.judge .v { color:var(--oxblood); }
.metric .v b { color:var(--oxblood); }
.topbar .grow { flex:1; }
.topbar .src { font-family:var(--mono); font-size:10px; color:var(--ink-soft); text-align:right; line-height:1.6; }
.topbar .src b { color:var(--ink); }

/* ---- Body: rail + inspector -------------------------------------------- */
.body { display:grid; grid-template-columns:300px 1fr; min-height:0; }
@media (max-width:860px){ .body { grid-template-columns:1fr; } .rail { display:none; } }

/* left rail */
.rail { border-right:1px solid var(--rule); background:var(--paper-2); display:flex; flex-direction:column; min-height:0; }
.rail .search { padding:10px; border-bottom:1px solid var(--rule); }
.rail .search input {
  width:100%; padding:8px 10px; border:1px solid var(--rule); background:var(--card);
  font-family:var(--mono); font-size:12px; color:var(--ink); border-radius:3px;
}
.rail .search input:focus { outline:1.5px solid var(--oxblood); border-color:var(--oxblood); }
.rail .filters { display:flex; gap:5px; flex-wrap:wrap; padding:10px; border-bottom:1px solid var(--rule); }
.fchip {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--rule); background:transparent; color:var(--ink-soft); border-radius:2px;
}
.fchip:hover { border-color:var(--ink-soft); color:var(--ink); }
.fchip.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.list { overflow-y:auto; flex:1; min-height:0; }
.tnav {
  display:block; width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--rule); padding:11px 12px; color:var(--ink);
}
.tnav:hover { background:var(--card); }
.tnav.active { background:var(--card); box-shadow:inset 3px 0 0 var(--oxblood); }
.tnav .t-task { font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:-0.01em; }
.tnav .t-repo { font-family:var(--mono); font-size:10px; color:var(--ink-soft); margin-top:2px; }
.tnav .t-tags { display:flex; align-items:center; gap:6px; margin-top:7px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.t-vs { font-family:var(--mono); font-size:9px; color:var(--ink-soft); }
.t-mark { font-family:var(--mono); font-size:9px; padding:1px 5px; border-radius:8px; letter-spacing:0.04em; }
.t-mark.dis { background:rgba(184,80,63,0.16); color:var(--oxblood); }
.t-mark.agr { background:rgba(122,168,99,0.18); color:#5d7d4a; }
.rail .count { font-family:var(--mono); font-size:10px; color:var(--ink-soft); padding:8px 12px; border-top:1px solid var(--rule); }

/* ---- Inspector main ----------------------------------------------------- */
.insp { display:flex; flex-direction:column; min-height:0; min-width:0; }

.insp .hd { padding:14px 22px; border-bottom:1px solid var(--rule); background:var(--card); }
.insp .hd .task { font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-0.01em; }
.insp .hd .sub { font-family:var(--mono); font-size:11px; color:var(--ink-soft); display:flex; gap:16px; margin-top:3px; }
.insp .hd .sub b { color:var(--ink); }

.faceoff { display:flex; align-items:center; gap:14px; margin-top:13px; flex-wrap:wrap; }
.chipv { display:inline-flex; flex-direction:column; gap:3px; padding:7px 12px; border:1.5px solid; border-radius:3px; background:rgba(255,255,255,0.4); }
.chipv .who { font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.chipv .dg { font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:0.02em; }
.chipv .ct { font-family:var(--sans); font-size:11px; color:var(--ink-soft); font-style:italic; }
.vmark { font-family:var(--mono); font-size:10px; padding:5px 10px; border-radius:12px; letter-spacing:0.05em; text-transform:uppercase; }
.vmark.dis { background:rgba(184,80,63,0.15); color:var(--oxblood); }
.vmark.agr { background:rgba(122,168,99,0.2); color:#5d7d4a; }
.ts { display:flex; gap:7px; margin-left:auto; }
.tsb { font-family:var(--mono); font-size:10px; padding:4px 9px; border:1px solid var(--rule); background:var(--paper-2); }
.tsb b { color:var(--ink); } .tsb.bad b{ color:var(--oxblood); } .tsb.good b{ color:#5d7d4a; }

.d-TRAINING{ color:var(--d-TRAINING); border-color:var(--d-TRAINING);}
.d-HARNESS { color:var(--d-HARNESS);  border-color:var(--d-HARNESS);}
.d-PRODUCT { color:var(--d-PRODUCT);  border-color:var(--d-PRODUCT);}
.d-BOTH    { color:var(--d-BOTH);     border-color:var(--d-BOTH);}
.d-CLEAN   { color:var(--d-CLEAN);    border-color:var(--d-CLEAN);}

/* teaching annotation */
.teach { display:flex; gap:10px; align-items:flex-start; margin-top:13px; padding:10px 13px;
  background:rgba(123,45,38,0.06); border-left:3px solid var(--oxblood); border-radius:0 3px 3px 0; }
.teach .icn { font-family:var(--display); color:var(--oxblood); font-size:18px; line-height:1; }
.teach .tx { font-size:13px; line-height:1.5; }
.teach .tx b { color:var(--oxblood); }
.teach .x { margin-left:auto; background:none; border:0; color:var(--ink-soft); font-size:15px; }

/* control bar */
.ctrl { display:flex; align-items:center; gap:10px; padding:8px 22px; border-bottom:1px solid var(--rule);
  background:var(--paper); flex-wrap:wrap; }
.ctrl button { font-family:var(--mono); font-size:11px; padding:5px 10px; border:1px solid var(--rule);
  background:var(--card); color:var(--ink); border-radius:3px; }
.ctrl button:hover { background:var(--ink); color:var(--paper); }
.ctrl button.on { background:var(--oxblood); color:#fff; border-color:var(--oxblood); }
.ctrl .seg { display:flex; gap:0; }
.ctrl .seg button { border-radius:0; border-right:0; }
.ctrl .seg button:first-child{ border-radius:3px 0 0 3px; } .ctrl .seg button:last-child{ border-radius:0 3px 3px 0; border-right:1px solid var(--rule);}
.ctrl .rolef { display:flex; gap:4px; }
.ctrl .rolef .rf { font-size:9.5px; padding:4px 7px; text-transform:uppercase; letter-spacing:0.06em; }
.ctrl .tsearch { margin-left:auto; }
.ctrl .tsearch input { font-family:var(--mono); font-size:11px; padding:5px 9px; border:1px solid var(--rule);
  background:var(--card); border-radius:3px; width:160px; }
.ctrl .tsearch input:focus { outline:1.5px solid var(--oxblood); }

/* minimap */
.minimap { display:flex; gap:1.5px; padding:7px 22px; background:var(--paper); border-bottom:1px solid var(--rule);
  align-items:center; height:30px; overflow:hidden; }
.mm { flex:1; height:14px; min-width:1px; opacity:0.45; cursor:pointer; border-radius:1px; transition:opacity .1s, transform .1s; }
.mm:hover { opacity:1; transform:scaleY(1.4); }
.mm.r-system{ background:var(--r-system);} .mm.r-user{ background:var(--r-user);}
.mm.r-assistant{ background:var(--r-assistant);} .mm.r-tool{ background:var(--r-tool);}
.mm.off { background:var(--hl); opacity:1; box-shadow:0 0 0 1.5px var(--ink); }
.mm.cursor { outline:2px solid var(--ink); opacity:1; }

/* ---- the console (trace) ------------------------------------------------ */
.console {
  flex:1; min-height:0; overflow-y:auto; background:var(--con-bg); color:var(--con-fg);
  font-family:var(--mono); font-size:12.5px; line-height:1.55;
  padding:14px 0 60px;
  background-image:linear-gradient(var(--con-bg-2) 0 0);
  background-size:100% 0;
}
.turn { padding:0 22px; border-left:3px solid transparent; }
.turn + .turn { margin-top:2px; }
.turn .gutter { display:flex; align-items:center; gap:10px; padding:7px 0 4px; color:var(--con-dim); user-select:none; }
.turn .ix { font-size:10px; min-width:34px; }
.turn .role { font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; padding:1px 6px; border-radius:2px; }
.turn.r-system  { border-color:var(--r-system); }   .turn.r-system  .role{ color:var(--r-system); background:rgba(138,124,110,0.13);}
.turn.r-user    { border-color:var(--r-user); }      .turn.r-user    .role{ color:var(--r-user); background:rgba(111,179,168,0.13);}
.turn.r-assistant{ border-color:var(--r-assistant); }.turn.r-assistant .role{ color:var(--r-assistant); background:rgba(217,164,74,0.14);}
.turn.r-tool    { border-color:var(--r-tool); }      .turn.r-tool    .role{ color:var(--r-tool); background:rgba(132,176,106,0.13);}
.turn .toggle { font-size:10px; color:var(--con-dim); background:none; border:1px solid var(--con-line); padding:1px 6px; border-radius:2px; }
.turn .toggle:hover{ color:var(--con-fg); }
.turn .body { white-space:pre-wrap; word-break:break-word; padding:2px 0 10px 44px; color:var(--con-fg); }
.turn .body.clamp { max-height:118px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); }
.turn .body.empty { color:var(--con-dim); font-style:italic; }

/* tool call block */
.tool { margin:5px 0 8px 44px; border:1px solid var(--con-line); border-radius:4px; background:var(--con-bg-2); overflow:hidden; }
.tool .th { display:flex; gap:8px; align-items:center; padding:5px 9px; background:rgba(217,164,74,0.08); border-bottom:1px solid var(--con-line); }
.tool .th .gear { color:var(--r-assistant); }
.tool .th .name { color:var(--r-assistant); font-weight:700; font-size:11.5px; }
.tool .args { padding:7px 11px; white-space:pre-wrap; word-break:break-word; color:#cdc3b4; font-size:11.5px; }

/* diff / patch coloring */
.diff .ln { display:block; padding:0 4px; }
.diff .add { background:rgba(116,162,98,0.14); color:#c4dcae; }
.diff .del { background:rgba(194,86,63,0.16); color:#e3a99a; }
.diff .hh  { color:var(--con-dim); }
mark { background:var(--hl); color:#1b1714; border-radius:1px; padding:0 1px; }

/* offending */
.turn.off { background:rgba(194,86,63,0.1); border-color:var(--hl); box-shadow:inset 0 0 0 1px rgba(194,86,63,0.3); }
.turn.off .role { box-shadow:0 0 0 1px var(--hl); }
.off-flag { font-size:9px; color:var(--hl); letter-spacing:0.1em; text-transform:uppercase; }

/* dimmed for playback */
.turn.future { opacity:0.16; }
.turn.rolehide { display:none; }

/* readout footer (judge reasoning / evidence) — floats above console bottom */
.readout { border-top:1px solid var(--rule); background:var(--card); display:grid; grid-template-columns:1.3fr 1fr; }
@media (max-width:680px){ .readout { grid-template-columns:1fr; } }
.readout .blk { padding:13px 22px; }
.readout .blk + .blk { border-left:1px solid var(--rule); }
.readout h3 { font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 7px; }
.readout .reason { font-family:var(--sans); font-size:14px; line-height:1.5; font-style:italic; }
.readout .reason::before{ content:'“'; font-family:var(--display); color:var(--oxblood); font-size:26px; line-height:0; vertical-align:-7px; margin-right:2px;}
.readout ul { margin:0; padding:0; list-style:none; }
.readout li { font-family:var(--mono); font-size:11px; color:var(--ink-soft); padding:3px 0 3px 15px; position:relative; }
.readout li::before{ content:'›'; position:absolute; left:0; color:var(--oxblood);}
.readout li.none{ font-family:var(--sans); font-style:italic; }

.empty { display:grid; place-items:center; height:100%; color:var(--ink-soft); font-family:var(--display); font-style:italic; font-size:20px; }

/* scrollbars */
.console::-webkit-scrollbar,.list::-webkit-scrollbar{ width:10px; }
.console::-webkit-scrollbar-thumb{ background:#3a302a; border-radius:5px; }
.list::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:5px; }

/* ---- live inspection panel (audit-along) -------------------------------- */
.work { display:grid; grid-template-columns:1fr 340px; flex:1; min-height:0; }
@media (max-width:820px){ .work { grid-template-columns:1fr; } .inspect{ display:none; } }
.work .console { height:100%; }

.inspect { border-left:1px solid var(--rule); background:var(--card); overflow-y:auto; min-height:0; padding:14px 15px 50px; }
.inspect h3 { font-family:var(--mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin:17px 0 8px; display:flex; align-items:center; gap:7px; }
.inspect h3:first-child { margin-top:0; }
.inspect h3 .live { width:7px; height:7px; border-radius:50%; background:var(--oxblood); animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

.dets { display:flex; flex-direction:column; gap:6px; }
.det { --c:var(--ink-soft); display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center;
  padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); opacity:0.5; transition:opacity .25s, border-color .25s, box-shadow .25s; }
.det .ic { width:9px; height:9px; border-radius:50%; background:var(--ink-soft); transition:all .25s; }
.det .nm { font-family:var(--mono); font-size:11.5px; }
.det .st { font-family:var(--mono); font-size:8.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.1em; }
.det.fired { opacity:1; border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); }
.det.fired .ic { background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.det.fired .nm { color:var(--c); font-weight:700; }
.det.fired .st { color:var(--c); }
.det.flash { animation:detflash .7s ease-out; }
@keyframes detflash { 0%{ transform:scale(1.04); box-shadow:inset 0 0 0 2px var(--c), 0 0 16px -2px var(--c); } 100%{ transform:none; } }
.det .help { cursor:help; }

.tape { font-family:var(--mono); font-size:10.5px; line-height:1.55; border:1px solid var(--con-line);
  background:var(--con-bg); color:var(--con-fg); border-radius:4px; padding:9px 10px; max-height:160px; overflow-y:auto; }
.tape .ev { padding:2px 0; animation:slidein .3s; }
@keyframes slidein { from{ opacity:0; transform:translateX(-6px);} to{ opacity:1; } }
.tape .ev .at { color:var(--con-dim); }
.tape .ev .dt { font-weight:700; }
.tape .idle { color:var(--con-dim); font-style:italic; }

/* verdict builder */
.vbuild { border:1px solid var(--rule); border-radius:5px; overflow:hidden; }
.vstep { padding:9px 11px; border-bottom:1px solid var(--rule); transition:background .2s; }
.vstep:last-child { border-bottom:0; }
.vstep .q { font-size:11.5px; line-height:1.4; }
.vstep .a { font-family:var(--mono); font-size:10px; margin-top:4px; color:var(--ink-soft); }
.vstep.hit { background:rgba(123,45,38,0.06); }
.vstep.hit .a { color:var(--oxblood); font-weight:700; }
.vstep .n { font-family:var(--mono); font-size:9px; color:var(--ink-soft); margin-right:6px; }

.vfinal { display:flex; flex-direction:column; gap:8px; margin-top:11px; }
.vrow { display:flex; align-items:center; gap:11px; padding:9px 12px; border:1.5px solid; border-radius:4px; background:rgba(255,255,255,0.4); }
.vrow .who { font-family:var(--mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); min-width:62px; }
.vrow .dg { font-family:var(--mono); font-weight:700; font-size:15px; }
.vrow .ct { font-size:11px; font-style:italic; color:var(--ink-soft); }
.vconj { text-align:center; font-family:var(--display); font-style:italic; font-size:13px; color:var(--ink-soft); }
.vreason { font-size:12.5px; font-style:italic; line-height:1.5; padding:6px 2px 0; }
.vreason::before { content:'“'; font-family:var(--display); color:var(--oxblood); font-size:22px; line-height:0; vertical-align:-6px; margin-right:1px; }
.locked { opacity:0.4; }
.locked .dg { filter:blur(4px); }
.unlock-note { font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); text-align:center; padding:4px; }

/* tooltip */
.tip { position:fixed; z-index:50; max-width:240px; background:var(--con-bg); color:var(--con-fg);
  font-family:var(--sans); font-size:11.5px; line-height:1.45; padding:8px 10px; border-radius:5px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.5); pointer-events:none; opacity:0; transition:opacity .12s; }
.tip.on { opacity:1; }

/* tour overlay */
.tour { position:fixed; inset:0; z-index:60; background:rgba(28,23,20,0.55); display:grid; place-items:center; }
.tourcard { background:var(--card); max-width:440px; border:1px solid var(--ink); box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); }
.tourcard .tc-hd { padding:16px 20px; border-bottom:1px solid var(--rule); }
.tourcard .tc-k { font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--oxblood); }
.tourcard h2 { font-family:var(--display); font-weight:600; font-size:22px; margin:5px 0 0; }
.tourcard .tc-bd { padding:16px 20px; font-size:14px; line-height:1.55; }
.tourcard .tc-ft { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--rule); }
.tourcard .dots { display:flex; gap:5px; }
.tourcard .dots i { width:7px; height:7px; border-radius:50%; background:var(--rule); }
.tourcard .dots i.on { background:var(--oxblood); }
.tourcard .grow { flex:1; }
.tourcard button { font-family:var(--mono); font-size:11px; padding:6px 13px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:3px; }
.tourcard button.ghost { background:transparent; color:var(--ink); }
.helpbtn { font-family:var(--mono); font-size:11px; padding:5px 10px; border:1px solid var(--rule); background:var(--card); border-radius:3px; }

/* prominent Run button + inspect hint */
.ctrl button.run { background:var(--oxblood); color:#fff; border-color:var(--oxblood); font-weight:700; padding:5px 14px; }
.ctrl button.run:hover { background:var(--oxblood-2); color:#fff; }
.ctrl button.run.on { background:var(--ink); border-color:var(--ink); }
.inspect .hint { font-size:11.5px; line-height:1.45; color:var(--ink-soft); background:rgba(123,45,38,0.06);
  border-left:3px solid var(--oxblood); border-radius:0 3px 3px 0; padding:7px 10px; margin-bottom:11px; }
.inspect .hint b { color:var(--oxblood); }

/* ---- mode toggle + Simple-mode narration guide ------------------------- */
.modetoggle { font-family:var(--mono); font-size:11px; padding:6px 12px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); border-radius:3px; white-space:nowrap; }
.modetoggle:hover { background:var(--oxblood); border-color:var(--oxblood); }

.guide { display:none; }
body.simple .guide { display:block; padding:16px 22px 18px; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--card),var(--paper)); }
.narr-step { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.narr-main { font-family:var(--display); font-weight:600; font-size:22px; line-height:1.32; margin:0; letter-spacing:-0.01em; max-width:60ch; }
.narr-aud { font-family:var(--sans); font-size:14.5px; line-height:1.5; margin:11px 0 0; padding:9px 13px; max-width:62ch;
  background:rgba(123,45,38,0.07); border-left:3px solid var(--oxblood); border-radius:0 4px 4px 0; color:var(--ink); }
.narr-aud::before { content:'🔍  '; }
.guide-nav { display:flex; align-items:center; gap:9px; margin-top:15px; flex-wrap:wrap; }
.guide-nav button { font-family:var(--mono); font-size:12.5px; padding:8px 15px; border:1px solid var(--ink);
  background:var(--card); color:var(--ink); border-radius:4px; }
.guide-nav button:hover { background:var(--ink); color:var(--paper); }
.guide-nav button.run { background:var(--oxblood); color:#fff; border-color:var(--oxblood); margin-left:4px; font-weight:700; }
.guide-nav button.run:hover { background:var(--oxblood-2); }
.beat { font-family:var(--mono); font-size:11px; color:var(--ink-soft); min-width:96px; text-align:center; }

/* Simple mode hides the dense expert chrome */
body.simple .ctrl, body.simple .minimap, body.simple .inspect { display:none; }
body.simple .work { grid-template-columns:1fr; }
body.simple .console { font-size:13px; }
body.simple .teach { display:none; }   /* the narration replaces the static teaching strip */

/* ---- top-bar buttons --------------------------------------------------- */
.topbtn { font-family:var(--mono); font-size:10.5px; padding:6px 10px; border:1px solid var(--rule);
  background:var(--card); color:var(--ink-soft); border-radius:3px; white-space:nowrap; }
.topbtn:hover { border-color:var(--ink-soft); color:var(--ink); }
.topbtn.on { background:var(--oxblood); color:#fff; border-color:var(--oxblood); }

/* ---- front-door landing ------------------------------------------------ */
.landing { position:fixed; inset:0; z-index:70; overflow-y:auto;
  background:radial-gradient(1100px 560px at 78% -8%, rgba(123,45,38,0.10), transparent 60%), var(--paper);
  display:grid; place-items:start center; padding:5vh 22px 60px; }
.land-card { max-width:760px; width:100%; }
.land-k { font-family:var(--mono); font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--oxblood); margin-bottom:14px; }
.land-h { font-family:var(--display); font-weight:600; font-size:clamp(32px,5.5vw,58px); line-height:1.02; letter-spacing:-0.02em; margin:0; }
.land-sub { font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:54ch; margin:18px 0 26px; }
.land-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px; }
@media (max-width:620px){ .land-stats { grid-template-columns:1fr; } }
.ls { border:1px solid var(--rule); border-left:3px solid var(--oxblood); background:var(--card); padding:16px 18px; border-radius:0 5px 5px 0; }
.ls-v { font-family:var(--display); font-weight:700; font-size:40px; line-height:1; color:var(--oxblood); }
.ls-v .arr { color:var(--ink-soft); font-weight:400; } .ls-v b { color:var(--oxblood); }
.ls-l { font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:9px; } .ls-l b { color:var(--ink); }
.land-dist { border:1px solid var(--rule); background:var(--card); border-radius:5px; padding:16px 18px; }
.land-dist-h { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.lrow { display:grid; grid-template-columns:130px 1fr 42px; align-items:center; gap:11px; margin-bottom:8px; }
.lrow .ln { font-size:13px; } .lrow .lt { height:13px; background:var(--paper-2); border:1px solid var(--rule); position:relative; overflow:hidden; }
.lrow .lf { position:absolute; inset:0 auto 0 0; background:repeating-linear-gradient(45deg,var(--oxblood) 0 5px,var(--oxblood-2) 5px 10px); }
.lrow .lp { font-family:var(--mono); font-size:11.5px; text-align:right; color:var(--ink-soft); }
.land-take { font-family:var(--display); font-style:italic; font-size:18px; line-height:1.45; color:var(--ink); margin:24px 0; max-width:50ch; }
.land-go { font-family:var(--mono); font-size:14px; font-weight:700; padding:13px 26px; border:0; background:var(--oxblood); color:#fff; border-radius:4px; box-shadow:0 14px 30px -12px rgba(123,45,38,0.6); }
.land-go:hover { background:var(--oxblood-2); }
.land-foot { font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); margin-top:22px; }

/* ---- extras row: patch + fork links ------------------------------------ */
.extras { display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.extrabtn { align-self:flex-start; font-family:var(--mono); font-size:11.5px; padding:7px 13px; border:1px solid var(--ink);
  background:var(--card); color:var(--ink); border-radius:4px; }
.extrabtn:hover { background:var(--ink); color:var(--paper); }
.forkbox { border:1px solid var(--rule); border-left:3px solid var(--d-BOTH); background:rgba(157,123,176,0.06); border-radius:0 5px 5px 0; padding:11px 13px; }
.fork-h { font-size:13px; font-weight:600; margin-bottom:7px; }
.fork-seq { display:inline-block; font-family:var(--mono); font-size:11px; color:var(--d-BOTH); background:var(--paper-2); padding:3px 7px; border-radius:3px; margin-bottom:9px; word-break:break-word; }
.fork-links { display:flex; flex-wrap:wrap; gap:6px; }
.forklink { font-family:var(--mono); font-size:10.5px; padding:5px 9px; border:1px solid var(--rule); background:var(--card); color:var(--ink); border-radius:3px; }
.forklink:hover { border-color:var(--d-BOTH); color:var(--d-BOTH); }

/* ---- challenge mode ---------------------------------------------------- */
.guess-chip { border-style:dashed !important; border-color:var(--ink-soft) !important; color:var(--ink-soft) !important; }
.guess-chip .dg { font-size:22px; }
.vmark.q { background:var(--paper-2); color:var(--ink-soft); }
.guessbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.guessbar:empty { display:none; }
.gb-q { font-family:var(--display); font-style:italic; font-size:15px; margin-right:4px; }
.gb { font-family:var(--mono); font-weight:700; font-size:12px; padding:8px 13px; border:1.5px solid; border-radius:4px; background:rgba(255,255,255,0.5); }
.gb:hover { color:#fff; }
.gb.d-HARNESS:hover { background:var(--d-HARNESS); border-color:var(--d-HARNESS); }
.gb.d-TRAINING:hover { background:var(--d-TRAINING); border-color:var(--d-TRAINING); }
.gb.d-PRODUCT:hover { background:var(--d-PRODUCT); border-color:var(--d-PRODUCT); }
.gb.d-CLEAN:hover { background:var(--d-CLEAN); border-color:var(--d-CLEAN); }
.gb.d-BOTH:hover { background:var(--d-BOTH); border-color:var(--d-BOTH); }

/* ---- overlay cards (shortcuts + patch modal) --------------------------- */
.overlay-sc { position:fixed; inset:0; z-index:65; background:rgba(28,23,20,0.5); display:grid; place-items:center; padding:24px; }
.sc-card { background:var(--card); max-width:560px; width:100%; max-height:84vh; overflow-y:auto; border:1px solid var(--ink); box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); border-radius:6px; }
.sc-hd { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--rule); }
.sc-hd h2 { font-family:var(--display); font-weight:600; font-size:20px; margin:0; }
.sc-x { background:none; border:0; font-size:20px; color:var(--ink-soft); line-height:1; }
.sc-x:hover { color:var(--oxblood); }
.sc-list { list-style:none; margin:0; padding:16px 20px; }
.sc-list li { font-size:13.5px; line-height:1.6; padding:5px 0; border-bottom:1px dashed var(--rule); }
.sc-list li:last-child { border-bottom:0; } .sc-list .dim { color:var(--ink-soft); }
kbd { font-family:var(--mono); font-size:11px; padding:2px 7px; border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; background:var(--paper-2); }

/* patch modal */
.pm { max-width:760px; }
.pm-banner { font-family:var(--mono); font-size:12px; padding:10px 20px; }
.pm-banner.ok { background:rgba(122,168,99,0.15); color:#4a6b3f; } .pm-banner.bad { background:rgba(123,45,38,0.1); color:var(--oxblood); }
.pm-diff { padding:14px 18px; background:var(--con-bg); color:var(--con-fg); font-family:var(--mono); font-size:12px; line-height:1.5; overflow-x:auto; }
.pm-empty { color:var(--ink-soft); font-style:italic; padding:20px; }

/* toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:80;
  font-family:var(--mono); font-size:12px; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:6px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.5); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- bring-your-own trajectory ----------------------------------------- */
.topbtn.import { border-color:var(--oxblood); color:var(--oxblood); font-weight:700; }
.topbtn.import:hover { background:var(--oxblood); color:#fff; }
.t-mark.loc { background:rgba(68,82,92,0.15); color:#44525c; letter-spacing:0.08em; }
.im { max-width:600px; }
.im-bd { padding:16px 20px 20px; }
.im-p { font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; }
.im-p b { color:var(--ink); } .im-p a { color:var(--oxblood); }
.im-drop { border:2px dashed var(--rule); border-radius:6px; padding:22px; text-align:center;
  font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--paper-2); transition:all .15s; }
.im-drop.over { border-color:var(--oxblood); background:rgba(123,45,38,0.06); color:var(--oxblood); }
.im-drop .dim { font-size:10px; }
.im-file { display:inline-block; margin-top:6px; padding:6px 13px; border:1px solid var(--ink);
  border-radius:3px; background:var(--card); color:var(--ink); cursor:pointer; font-family:var(--mono); font-size:11px; }
.im-file:hover { background:var(--ink); color:var(--paper); }
.im-text { width:100%; min-height:110px; margin-top:12px; padding:10px 12px; border:1px solid var(--rule);
  border-radius:4px; background:var(--con-bg); color:var(--con-fg); font-family:var(--mono); font-size:11px; resize:vertical; }
.im-text:focus { outline:1.5px solid var(--oxblood); }
.im-foot { display:flex; align-items:center; gap:12px; margin-top:13px; }
.im-err { font-family:var(--mono); font-size:11px; color:var(--oxblood); flex:1; }
.im-go { padding:10px 20px !important; font-size:12.5px !important; box-shadow:none !important; }

/* ---- rail sections: your imports vs audited corpus --------------------- */
.railsec { font-family:var(--mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); padding:9px 12px 6px; background:var(--paper-2);
  border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:2; }
.tnav.local { background:rgba(123,45,38,0.05); border-left:3px solid var(--oxblood); padding-left:9px; }
.tnav.local:hover { background:rgba(123,45,38,0.1); }
.tnav.local.active { background:var(--card); box-shadow:inset 3px 0 0 var(--oxblood); }
.t-mark.loc { background:var(--oxblood); color:#fff; letter-spacing:0.08em; font-weight:700; }
.t-x { margin-left:auto; font-family:var(--mono); font-size:13px; line-height:1; color:var(--ink-soft);
  padding:1px 6px; border-radius:3px; cursor:pointer; }
.t-x:hover { background:var(--oxblood); color:#fff; }
.srclink { color:var(--oxblood); text-decoration:none; border-bottom:1px solid rgba(123,45,38,0.3); }

/* ---- landing primer: trajectories, evals, the audit --------------------- */
.prim-jump { display:inline-block; margin-left:10px; font-family:var(--mono); font-size:11.5px;
  color:var(--oxblood); text-decoration:none; border-bottom:1px dashed rgba(123,45,38,0.4); }
.prim-divider { display:flex; align-items:center; gap:14px; margin:46px 0 8px; }
.prim-divider::before, .prim-divider::after { content:""; flex:1; border-top:1px solid var(--rule); }
.prim-divider span { font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--oxblood); }

.prim-sec { margin:30px 0 6px; }
.prim-h { font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-0.01em; margin:0 0 8px; display:flex; align-items:baseline; gap:11px; }
.prim-n { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--paper); background:var(--oxblood); width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; transform:translateY(-2px); }
.prim-p { font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:62ch; margin:0 0 16px; }
.prim-p b { color:var(--ink); }

.diagram { border:1px solid var(--rule); background:var(--card); border-radius:6px; padding:18px 20px; }

/* chips + arrows */
.dg-row, .dg-gates-row { display:flex; align-items:center; gap:0; flex-wrap:wrap; row-gap:14px; }
.dg-chip { display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.05em;
  padding:10px 16px; border:1.5px solid; border-radius:5px; background:rgba(255,255,255,0.5); }
.dg-chip small { font-family:var(--sans); font-size:10.5px; font-weight:400; font-style:italic; color:var(--ink-soft); letter-spacing:0; }
.c-user  { color:#2f7d72; border-color:#2f7d72; }
.c-asst  { color:#a3742a; border-color:#a3742a; }
.c-tool  { color:#5d7d4a; border-color:#5d7d4a; }
.c-patch { color:var(--ink); border-color:var(--ink); }
.dg-arrow { position:relative; flex:0 0 54px; height:2px; margin:0 6px;
  background:repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 11px); background-size:22px 2px;
  animation:dgflow 1.2s linear infinite; }
.dg-arrow::after { content:"▸"; position:absolute; right:-7px; top:50%; transform:translateY(-54%); color:var(--ink-soft); font-size:13px; }
.dg-arrow[data-lbl]::before { content:attr(data-lbl); position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em; color:var(--ink-soft); white-space:nowrap; }
@keyframes dgflow { to { background-position:22px 0; } }
@media (prefers-reduced-motion: reduce){ .dg-arrow { animation:none; } }

.dg-return { margin:10px 0 4px 8px; }
.dg-return-lbl { font-family:var(--mono); font-size:10.5px; color:#5d7d4a; }
.dg-return-lbl b { color:var(--ink); }

.dg-strip { display:flex; align-items:center; gap:2px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--rule); }
.dg-strip-lbl { font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-right:8px; }
.mmx { width:16px; height:13px; border-radius:1.5px; opacity:0.75; }
.m-user{ background:var(--r-user);} .m-asst{ background:var(--r-assistant);} .m-tool{ background:var(--r-tool);}
.m-off { background:var(--hl); opacity:1; box-shadow:0 0 0 1.5px var(--ink); animation:pulse 1.4s infinite; }

.dg-tie { font-size:12.5px; font-style:italic; color:var(--ink-soft); margin:12px 0 0; }
.dg-tie b { color:var(--oxblood); }

/* gates (evals) */
.dg-gates { display:flex; flex-direction:column; gap:8px; flex:1; min-width:230px; }
.dg-gate { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  border:1.5px solid; border-radius:5px; padding:8px 13px; background:rgba(255,255,255,0.5); }
.dg-gate-name { font-family:var(--mono); font-size:11.5px; font-weight:700; }
.dg-gate-res { font-family:var(--mono); font-size:12px; font-weight:700; }
.dg-gate-note { font-size:10.5px; font-style:italic; color:var(--ink-soft); }
.dg-gate.ok  { color:#5d7d4a; border-color:#7aa863; }
.dg-gate.bad { color:var(--oxblood); border-color:var(--oxblood); background:rgba(123,45,38,0.05); }
.dg-gate.bad .dg-gate-res { animation:pulse 1.4s infinite; }
.dg-eq { font-family:var(--mono); font-size:12px; margin-top:14px; padding:9px 13px;
  background:rgba(123,45,38,0.07); border-left:3px solid var(--oxblood); border-radius:0 4px 4px 0; }
.dg-eq b { color:var(--oxblood); }

/* triage (the audit) */
.dg-q { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:13px; padding:9px 0; }
.dg-q + .dg-q { border-top:1px dashed var(--rule); }
.dg-q-txt { font-size:13.5px; }
.dg-q-no { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--ink-soft); white-space:nowrap; }
.dg-verdict { display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; padding:6px 12px;
  border:1.5px solid; border-radius:4px; min-width:96px; background:rgba(255,255,255,0.5); }
.dg-verdict small { font-family:var(--sans); font-size:9.5px; font-weight:400; font-style:italic; color:var(--ink-soft); }
.v-HARNESS { color:var(--d-HARNESS); border-color:var(--d-HARNESS); }
.v-TRAINING{ color:var(--d-TRAINING); border-color:var(--d-TRAINING); }
.v-CLEAN   { color:var(--d-CLEAN); border-color:var(--d-CLEAN); }

.land-card > .land-go + .primer { margin-top:8px; }
#land-go2 { margin-top:26px; }
@media (max-width:560px){ .dg-q { grid-template-columns:1fr; gap:5px; } .dg-q-no { display:none; } }

/* ---- feature pack: quiz, map, diff, ask --------------------------------- */
.land-alt { display:inline-block; margin-left:18px; font-family:var(--mono); font-size:12px;
  color:var(--ink-soft); text-decoration:none; border-bottom:1px dashed var(--rule); }
.land-alt:hover { color:var(--oxblood); border-color:var(--oxblood); }

#quiz-hud { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--ink); color:var(--paper);
  border-radius:8px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.55); font-family:var(--mono); font-size:12px; }
#quiz-hud .qz-label { font-weight:700; letter-spacing:0.03em; }
#quiz-hud .qz-tip { color:#b9ab9c; font-size:11px; font-style:italic; }
#quiz-hud button { font-family:var(--mono); font-size:11.5px; padding:6px 12px; border-radius:4px;
  border:1px solid var(--oxblood-2); background:var(--oxblood); color:#fff; }
#quiz-hud button:hover { background:var(--oxblood-2); }
#quiz-hud #qz-quit { background:transparent; border-color:#564a3f; color:#b9ab9c; padding:6px 9px; }

.qz-card { max-width:480px; text-align:center; }
.qz-bd { padding:20px; }
.qz-grid { font-size:34px; letter-spacing:4px; margin:6px 0 12px; }
.qz-sub { font-size:13px; color:var(--ink-soft); font-style:italic; }
.qz-actions { display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.ghostbtn { font-family:var(--mono); font-size:11.5px; padding:9px 14px; border:1px solid var(--rule);
  background:transparent; color:var(--ink); border-radius:4px; }
.ghostbtn:hover { border-color:var(--oxblood); color:var(--oxblood); }

/* failure map */
.map-card { max-width:880px; width:94vw; }
.map-legend { display:flex; gap:14px; flex-wrap:wrap; padding:12px 20px 4px; }
.map-key { font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.map-key i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.map-wrap { position:relative; padding:8px 20px 0; }
#map-canvas { width:100%; display:block; background:var(--paper-2); border:1px solid var(--rule); border-radius:5px; }
.map-tip { position:absolute; display:none; pointer-events:none; background:var(--con-bg); color:var(--con-fg);
  font-family:var(--mono); font-size:10.5px; line-height:1.5; padding:7px 10px; border-radius:5px; max-width:170px; z-index:5; }
.map-tip .dim { color:var(--con-dim); }
.map-axes { display:flex; justify-content:space-between; padding:7px 22px 0; font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); }
.map-note { font-size:12.5px; color:var(--ink-soft); padding:8px 20px 18px; margin:0; font-style:italic; }
.map-note b { color:var(--ink); }

/* trajectory diff */
.df-card { max-width:760px; }
.df-bd { padding:16px 20px 20px; }
.df-sum { font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; }
.df-sum b { color:var(--oxblood); }
.df-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .df-cols { grid-template-columns:1fr; } }
.df-col { border:1px solid var(--rule); border-radius:5px; background:var(--card); padding:12px; }
.df-name { font-family:var(--mono); font-size:11.5px; font-weight:700; margin-bottom:9px; }
.df-name small { color:var(--ink-soft); font-weight:400; }
.df-seq { display:flex; flex-wrap:wrap; gap:4px; }
.df-chip { font-family:var(--mono); font-size:10px; padding:3px 7px; border-radius:3px; border:1px solid var(--rule); color:var(--ink-soft); background:var(--paper-2); }
.df-chip.shared { opacity:0.55; }
.df-chip.mine { border-color:var(--oxblood); color:var(--oxblood); background:rgba(123,45,38,0.06); }
.df-chip.other { border-color:var(--d-HARNESS); color:var(--d-HARNESS); background:rgba(74,155,142,0.07); }
.df-chip.first { font-weight:700; box-shadow:0 0 0 1.5px currentColor; }
.df-more { font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); align-self:center; }
.forkpair { display:inline-flex; gap:2px; }
.fork-diff { font-family:var(--mono); font-size:10.5px; padding:5px 7px; border:1px solid var(--rule); background:var(--card); color:var(--d-BOTH); border-radius:3px; }
.fork-diff:hover { background:var(--d-BOTH); color:#fff; border-color:var(--d-BOTH); }

/* ask the trace */
.ask-card { max-width:600px; }
.ask-bd { padding:16px 20px 20px; }
.ask-key { width:100%; font-family:var(--mono); font-size:11.5px; padding:9px 11px; margin-bottom:10px;
  border:1px solid var(--rule); border-radius:4px; background:var(--card); }
.ask-key:focus { outline:1.5px solid var(--oxblood); }
.ask-a { margin-top:14px; padding:13px 15px; background:var(--paper-2); border-left:3px solid var(--oxblood);
  border-radius:0 5px 5px 0; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.fork-hint { font-weight:400; font-size:11.5px; color:var(--ink-soft); font-style:italic; }
.fork-hint b { color:var(--d-BOTH); font-style:normal; }
.fork-diff { font-weight:700; }

/* ---- glossary ----------------------------------------------------------- */
.hd-gl { display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px;
  color:var(--oxblood); text-decoration:none; border-bottom:1px dashed rgba(123,45,38,0.4); }
.hd-gl:hover { border-bottom-style:solid; }
.gl-card { max-width:680px; }
.gl-bd { padding:6px 22px 22px; }
.gl-h { font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--oxblood); margin:20px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
.gl-row { display:grid; grid-template-columns:172px 1fr; gap:14px; padding:8px 0; border-bottom:1px dashed var(--rule); }
.gl-row:last-child { border-bottom:0; }
@media (max-width:560px){ .gl-row { grid-template-columns:1fr; gap:3px; } }
.gl-l { display:flex; align-items:center; gap:8px; }
.gl-dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.gl-term { font-family:var(--mono); font-size:11.5px; }
.gl-chip { border:1.5px solid var(--ink); border-radius:3px; padding:3px 8px; }
.gl-badge { border:1px solid var(--rule); background:var(--paper-2); padding:3px 8px; font-weight:400; }
.gl-d { font-size:13px; line-height:1.55; color:var(--ink-soft); }
.gl-d b { color:var(--ink); } .gl-d i { color:var(--ink); }

/* ---- whole-column scrolling -------------------------------------------- */
/* The inspector column scrolls as one page; the trace console grows to its
   full content height instead of trapping scroll in a short inner window. */
.insp { overflow-y:auto; }
.work { flex:none; min-height:0; align-items:start; }
.work .console { height:auto; }
.console { overflow:visible; flex:none; min-height:55vh; }
.stickybar { position:sticky; top:0; z-index:6; background:var(--paper); box-shadow:0 6px 14px -12px rgba(28,23,20,0.5); }
body.simple .stickybar { position:static; box-shadow:none; }
.inspect { position:sticky; top:92px; align-self:start; max-height:calc(100vh - 150px); overflow-y:auto; border-bottom:1px solid var(--rule); }
.insp::-webkit-scrollbar { width:10px; }
.insp::-webkit-scrollbar-thumb { background:var(--rule); border-radius:5px; }