/* ImmersiveInspector (§5,§6,§11–§15) — drawer content styling.
   Follows app.css visual language: cards (.detail-block), eyebrow kickers, mono numbers, pills.
   Knowledge-state chips follow §24: OBSERVED solid, DERIVED badge, INFERRED dashed/provisional, UNKNOWN grey. */

.insp-root{font-size:10px}
.insp-root .detail-block h3{font-size:10.5px}
.insp-bignum{font-family:var(--mono);font-size:22px;font-weight:850;letter-spacing:-.6px;margin-top:4px}
.insp-dim{color:var(--muted);font-size:9px;line-height:1.5}
.insp-link{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-size:inherit;text-align:left}
.insp-link:hover{text-decoration:underline}

/* ── knowledge-state chips ── */
.insp-chip{display:inline-block;border-radius:999px;padding:2px 7px;font-size:8px;font-weight:820;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.insp-chip.s-observed{background:var(--green-soft);color:var(--green);border:1px solid #bfe4d2}
.insp-chip.s-derived{background:var(--accent-soft);color:var(--accent);border:1px solid #c9dbfa}
.insp-chip.s-inferred{background:transparent;color:var(--violet);border:1.2px dashed var(--violet);opacity:.85}
.insp-chip.s-unknown{background:#f0f3f6;color:#7f8d9d;border:1px solid var(--line)}
.insp-mix{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:9px;color:var(--muted)}

/* ── derived/honesty banners ── */
.insp-banner{margin-top:10px;padding:9px 11px;border-radius:10px;border:1px solid #ead5ac;background:var(--amber-soft);color:#7d5915;font-size:9.3px;line-height:1.5;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.insp-banner-note{border-style:dashed;background:#fdfaf2}

/* ── cost structure rows ── */
.insp-cost{display:grid;gap:4px}
.insp-costrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:6px 2px;border-bottom:1px dashed #eef1f4;font-size:10px}
.insp-costrow:last-child{border-bottom:0}
.insp-costrow.insp-total{border-top:1px solid var(--line);border-bottom:0;padding-top:8px;font-size:10.6px}
.insp-costlbl{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-size:inherit;text-align:left;font-weight:750}
.insp-costlbl:hover{text-decoration:underline}

/* ── construction steps ── */
.insp-steps{display:grid;gap:6px}
.insp-step{border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 11px;cursor:pointer;text-align:left;transition:.15s;display:grid;gap:5px}
.insp-step:hover{border-color:#c7d3df;box-shadow:var(--shadow-sm)}
.insp-step-head{display:flex;gap:9px;align-items:center}
.insp-step-kind{font-weight:800;font-size:10.2px}
.insp-step-cost{margin-left:auto;font-weight:750}
.insp-step-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:9px}
.insp-step-note{color:var(--faint);font-size:8.8px;line-height:1.45;border-left:2px solid var(--line);padding-left:8px}

/* ── drill-down rows (cost debugger, aggregation, traceability) ── */
.insp-drilllist{display:grid}
.insp-drill{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:8px 4px;border:0;border-bottom:1px solid #eef1f4;background:none;cursor:pointer;text-align:left;font-size:10px;color:inherit;
  content-visibility:auto;contain-intrinsic-block-size:auto 30px}
.insp-drill:last-child{border-bottom:0}
.insp-drill:hover{background:var(--surface-2)}
.insp-drill > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-drill-static{cursor:default}
.insp-drill-static:hover{background:none}

/* ── breadcrumbs ── */
.insp-crumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:8.6px;letter-spacing:.9px;font-weight:850;text-transform:uppercase;color:#8391a2;padding:2px 0 4px}
.insp-crumb-sep{color:#b3bec9;font-style:normal}
.insp-crumb-label{color:var(--ink-2)}
.insp-crumb-link{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.insp-crumb-link:hover{text-decoration:underline}

/* ── evidence rows ── */
.insp-evrow{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px dashed #eef1f4;font-size:9.6px}
.insp-evrow:last-child{border-bottom:0}
.insp-evkind{font-size:8px;letter-spacing:.6px;font-weight:850;text-transform:uppercase;color:#75869a;background:#f4f6f8;border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.insp-evrow .mono{color:var(--ink-2);word-break:break-all}

/* §15: clickable evidence rows — fact chip + filename + locator */
.insp-evbtn{display:flex;flex-wrap:wrap;gap:6px 9px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px dashed #eef1f4;padding:6px 4px;font-size:9.6px;
  cursor:pointer;border-radius:6px;color:inherit}
.insp-evbtn:hover{background:#f4f7fb}
.insp-evbtn.active{background:#fff6e6;box-shadow:inset 0 0 0 1px rgba(214,146,20,.35)}
.insp-evbtn:disabled{cursor:default;opacity:.85}
.insp-evbtn .mono{color:var(--ink-2);word-break:break-all}
.insp-eveloc{flex-basis:100%}
.insp-fact{font-size:8px;letter-spacing:.6px;font-weight:850;text-transform:uppercase;color:#8a6d2f;
  background:#fdf3dc;border:1px solid #ecd9a8;border-radius:6px;padding:2px 6px}
.insp-everr{flex-basis:100%;color:#b3472f;font-size:9.3px}

/* ── explode: cost-structure stack (§6) ── */
.insp-stackwrap{overflow:hidden}
.insp-stack{display:grid;gap:6px;perspective:900px}
.insp-layer{border:1px solid var(--line-strong);border-radius:12px;background:#fff;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer;text-align:left;font-size:10.5px;font-weight:800;box-shadow:0 1px 4px rgba(20,32,49,.05);transform:translateY(calc(var(--i) * -3px)) scale(calc(1 - var(--i) * .01));transition:transform .35s cubic-bezier(.2,.7,.3,1.05),box-shadow .2s,border-color .2s}
.insp-stack.exploded .insp-layer{transform:translateY(calc(var(--i) * 6px)) translateX(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .008));box-shadow:0 6px 18px rgba(20,32,49,.08)}
.insp-layer:hover{border-color:var(--accent)}
.insp-layer.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.insp-layer-name{display:flex;align-items:center;gap:8px}
.insp-layer-detail,.insp-layerdetail{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.insp-layerdetail .eyebrow{margin-bottom:6px}

@media(max-width:560px){
  .insp-bignum{font-size:18px}
  .insp-step-meta{gap:8px}
  .insp-drill{grid-template-columns:1fr auto}
  .insp-drill > .insp-dim{display:none}
}

/* ── Dark drawer variant (2026-09-08, FIX 4) — cinema theme for the global
   #drawer ONLY while body.immersive-mode is set (immersive workspace active).
   CSS-only; openDrawer in app.js is untouched. ── */
body.immersive-mode #drawer{width:min(440px,94vw);background:#11151d;color:#dce4ef;
  border-left:1px solid rgba(122,140,168,.26);box-shadow:-24px 0 80px rgba(0,0,0,.55)}
body.immersive-mode #drawer .drawer-head{border-bottom-color:rgba(122,140,168,.2);background:rgba(13,19,32,.5)}
body.immersive-mode #drawer .drawer-head h2{color:#f2f6fb}
body.immersive-mode #drawer .drawer-head .eyebrow{color:#7d8fae}
body.immersive-mode #drawer .icon-button{background:#1a2130;border-color:rgba(122,140,168,.3);color:#aab9cf}
body.immersive-mode #drawer .icon-button:hover{border-color:#f5b04c;color:#ffcf87}
body.immersive-mode #drawer .detail-block{background:#161c27;border-color:rgba(122,140,168,.2);color:#dce4ef;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
body.immersive-mode #drawer .detail-block h3{color:#e8eef7}
body.immersive-mode #drawer .detail-block p{color:#93a2ba}
body.immersive-mode #drawer .kv-mini .k{color:#7d8fae}
body.immersive-mode #drawer .mono{color:#dbe4f0}
body.immersive-mode #drawer .btn{background:#1c2433;border-color:rgba(122,140,168,.34);color:#dbe4f0}
body.immersive-mode #drawer .btn:hover{border-color:rgba(245,176,76,.5);box-shadow:0 8px 26px rgba(0,0,0,.35)}
body.immersive-mode #drawer .btn.primary{background:#2f5f9e;border-color:#4779bd;color:#fff}
body.immersive-mode #drawer .btn.primary:hover{background:#3a6eb2}
body.immersive-mode #drawer .btn.accent{background:#2869d6;border-color:#2869d6;color:#fff}
body.immersive-mode #drawer .btn.ghost{background:transparent;border-color:transparent}
body.immersive-mode #drawer .section-total{border-bottom-color:rgba(122,140,168,.14)}
body.immersive-mode #drawer .risk-row h3{color:#e8eef7}
body.immersive-mode #drawer .candidate-row{border-bottom-color:rgba(122,140,168,.18)}
body.immersive-mode #drawer table{background:#161c27}
body.immersive-mode #drawer th{background:#131a26;color:#7d8fae;border-bottom-color:rgba(122,140,168,.2)}
body.immersive-mode #drawer td{border-bottom-color:rgba(122,140,168,.12);color:#c6d2e2}
body.immersive-mode #drawer .table-wrap{border-color:rgba(122,140,168,.22)}
body.immersive-mode #drawer .pill-button{background:#1c2433;border-color:rgba(122,140,168,.3);color:#c6d2e2}
body.immersive-mode #drawer .pill-button.good{color:#70d6a7;border-color:rgba(94,208,148,.4)}
body.immersive-mode #drawer .pill.good{color:#70d6a7;border-color:rgba(94,208,148,.45)}
body.immersive-mode #drawer .pill.warn{color:#f3c969;border-color:rgba(243,201,105,.45)}
body.immersive-mode #drawer .pill.neutral{color:#93a2ba;border-color:rgba(122,140,168,.3)}

/* inspector panel innards — dark cinema cards, knowledge-state chips keep §24 semantics */
body.immersive-mode #drawer .insp-dim{color:#7d8fae}
body.immersive-mode #drawer .insp-bignum{color:#ffdf9e;text-shadow:0 0 24px rgba(245,176,76,.22)}
body.immersive-mode #drawer .insp-link{color:#75a7ff}
body.immersive-mode #drawer .insp-chip.s-observed{background:rgba(94,208,148,.14);color:#70d6a7;border-color:rgba(94,208,148,.45)}
body.immersive-mode #drawer .insp-chip.s-derived{background:rgba(117,167,255,.14);color:#8fb7ff;border-color:rgba(117,167,255,.42)}
body.immersive-mode #drawer .insp-chip.s-inferred{color:#c4a8ff;border-color:#b98cff;background:transparent}
body.immersive-mode #drawer .insp-chip.s-unknown{background:#1c2433;color:#8b9dbb;border-color:rgba(122,140,168,.35)}
body.immersive-mode #drawer .insp-mix{color:#7d8fae}
body.immersive-mode #drawer .insp-banner{background:rgba(243,201,105,.09);border-color:rgba(243,201,105,.4);color:#e6c37a}
body.immersive-mode #drawer .insp-banner-note{background:rgba(243,201,105,.05)}
body.immersive-mode #drawer .insp-costrow{border-bottom-color:rgba(122,140,168,.14);color:#c6d2e2}
body.immersive-mode #drawer .insp-costrow.insp-total{border-top-color:rgba(122,140,168,.3);color:#f2f6fb}
body.immersive-mode #drawer .insp-costlbl{color:#75a7ff}
body.immersive-mode #drawer .insp-step{background:#161c27;border-color:rgba(122,140,168,.22);color:#dce4ef}
body.immersive-mode #drawer .insp-step:hover{border-color:rgba(245,176,76,.45);box-shadow:0 8px 26px rgba(0,0,0,.35)}
body.immersive-mode #drawer .insp-step-kind{color:#e8eef7}
body.immersive-mode #drawer .insp-step-meta{color:#7d8fae}
body.immersive-mode #drawer .insp-step-note{color:#6f8098;border-left-color:rgba(122,140,168,.3)}
body.immersive-mode #drawer .insp-drill{border-bottom-color:rgba(122,140,168,.14);color:#c6d2e2}
body.immersive-mode #drawer .insp-drill:hover{background:#1a2130}
body.immersive-mode #drawer .insp-drill-static:hover{background:none}
body.immersive-mode #drawer .insp-crumb{color:#5f6f88}
body.immersive-mode #drawer .insp-crumb-label{color:#dce4ef}
body.immersive-mode #drawer .insp-crumb-link{color:#75a7ff}
body.immersive-mode #drawer .insp-evrow{border-bottom-color:rgba(122,140,168,.14)}
body.immersive-mode #drawer .insp-evkind{background:#131a26;color:#7d8fae;border-color:rgba(122,140,168,.25)}
body.immersive-mode #drawer .insp-layer{background:#161c27;border-color:rgba(122,140,168,.28);color:#dce4ef;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
body.immersive-mode #drawer .insp-stack.exploded .insp-layer{box-shadow:0 8px 24px rgba(0,0,0,.4)}
body.immersive-mode #drawer .insp-layer:hover{border-color:#75a7ff}
body.immersive-mode #drawer .insp-layer.active{border-color:#75a7ff;box-shadow:0 0 0 2px rgba(117,167,255,.25)}
body.immersive-mode #drawer .insp-layer-detail,body.immersive-mode #drawer .insp-layerdetail{border-top-color:rgba(122,140,168,.22)}