/*
 * L2ET Research - enhancements.css (v92)
 * Additive only. Every rule is scoped under `.l2et-x-*` so nothing in the
 * existing design system is overridden. State classes layer on top of v92
 * element classes (.trust-pro-layer, .reactor-pro-node, .spine-pro-v92 li,
 * .cockpit-pro-meter, .radar-card-v92, .rail-grid-v92 article[data-step]).
 */

:root {
  --x-ink:        var(--ink, #e6e8ee);
  --x-ink-soft:   var(--ink-soft, rgba(230, 232, 238, 0.66));
  --x-ink-mute:   var(--ink-mute, rgba(230, 232, 238, 0.42));
  --x-line:       var(--line, rgba(255, 255, 255, 0.08));
  --x-line-strong:var(--line-strong, rgba(255, 255, 255, 0.16));
  --x-surface:    var(--surface, rgba(255, 255, 255, 0.03));
  --x-cyan:       var(--accent-cyan, #5fd0ff);
  --x-green:      var(--accent-green, #7CFFB2);
  --x-violet:     var(--accent-violet, #9b8cff);
  --x-amber:      var(--accent-amber, #ffc56b);
  --x-red:        var(--accent-red, #ff7085);
  --x-radius:     12px;
  --x-radius-sm:  8px;
  --x-mono:       var(--font-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
}

/* generic helpers */
.l2et-x-pulse {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--x-green);
  box-shadow: 0 0 0 0 rgba(124,255,178,0.6);
  animation: l2etXPulse 2s ease-out infinite;
}
@keyframes l2etXPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,255,178,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(124,255,178,0); }
}
.l2et-x-clickable { cursor: pointer; }
.l2et-x-clickable:focus-visible { outline: 2px solid var(--x-cyan); outline-offset: 2px; border-radius: 6px; }

/* build status strip */
.l2et-x-build-strip {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  font-family: var(--x-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--x-ink-soft);
  border-top: 1px solid var(--x-line);
  border-bottom: 1px solid var(--x-line);
  background: linear-gradient(90deg, transparent, rgba(95,208,255,0.04), transparent);
}
.l2et-x-build-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================================================
 * Trust observatory (v92)
 * ====================================================== */

/* trust stack - v92 layers are clickable */
.trust-pro-layer.l2et-x-clickable { position: relative; }
.trust-pro-layer.l2et-x-clickable::after {
  content: '+'; position: absolute; right: 14px; top: 18px;
  color: var(--x-ink-mute);
  font-family: var(--x-mono); font-size: 14px; transition: transform .2s;
}
.trust-pro-layer.l2et-x-open::after { content: '−'; }
.l2et-x-stack-signals {
  display: none; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  width: 100%;
  border-top: 1px dashed var(--x-line);
}
.trust-pro-layer.l2et-x-open .l2et-x-stack-signals { display: flex; }
.l2et-x-stack-signals code {
  padding: 2px 8px; border-radius: 4px;
  background: rgba(95,208,255,0.08);
  color: var(--x-cyan);
  font-size: 10px; letter-spacing: 0.02em;
}

/* ------------------------------------------------------
 * Evidence reactor - same hex grid layout as the Assurance Radar
 * 4 rows × 3 cols, central core spans middle two rows, with
 * concentric dotted rings emanating from the core.
 *
 * Row 1 (top, centered):     Inputs
 * Row 2 (shoulder):          Controls   · CORE ·  Evidence
 * Row 3 (hip):               Monitoring · CORE ·  Decision
 * Row 4 (bottom, centered):  Risk
 * ------------------------------------------------------ */
.reactor-pro-v92.l2et-x-reactor-grid {
  display: grid !important;
  grid-template-columns: 1fr minmax(220px, 280px) 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    ".          inputs      ."
    "controls   core        evidence"
    "monitoring core        decision"
    ".          risk        .";
  gap: 16px;
  padding: 28px;
  position: relative;
  isolation: isolate;
  align-items: stretch;
}
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-core-v92          { grid-area: core; align-self: stretch; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.inputs       { grid-area: inputs; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.controls     { grid-area: controls; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.evidence     { grid-area: evidence; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.monitoring   { grid-area: monitoring; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.decision     { grid-area: decision; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.risk         { grid-area: risk; }
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node,
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-core-v92 {
  margin: 0 !important; position: relative !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  transform: none !important;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 92px;
  z-index: 2;
}
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-core-v92 {
  min-height: 220px;
  text-align: center; align-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(155,140,255,0.18), transparent 55%),
    rgba(4,10,24,.96) !important;
  border-color: rgba(155,140,255,0.45) !important;
  box-shadow: 0 0 40px rgba(155,140,255,0.18), inset 0 0 30px rgba(95,208,255,0.06) !important;
}
/* Top and bottom centered cards take just the middle column (narrower visual weight) */
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.inputs,
.reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.risk {
  max-width: 280px; justify-self: center; width: 100%;
  text-align: center; align-items: center;
}

/* Concentric dotted rings centered on the reactor core - same treatment as the radar */
.reactor-pro-v92.l2et-x-reactor-grid::before,
.reactor-pro-v92.l2et-x-reactor-grid::after {
  content: ''; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(155, 140, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.reactor-pro-v92.l2et-x-reactor-grid::before { width: 360px; height: 360px; }
.reactor-pro-v92.l2et-x-reactor-grid::after  { width: 540px; height: 540px; border-color: rgba(95,208,255,0.07); }

/* reactor active node - preserved */
.reactor-pro-node.l2et-x-active {
  filter: drop-shadow(0 0 8px var(--x-green));
  color: var(--x-green) !important;
  border-color: rgba(124,255,178,0.45) !important;
}
.l2et-x-reactor-meta {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 12px; font-size: 10px;
  color: var(--x-ink-mute); letter-spacing: 0.05em;
}
.l2et-x-reactor-meta b { color: var(--x-green); font-weight: 600; }

/* control spine - v92 list items, sequenced "done" markers */
.l2et-x-mini-btn {
  margin-top: 12px; padding: 5px 12px;
  font-family: var(--x-mono); font-size: 11px; letter-spacing: 0.04em;
  background: transparent; color: var(--x-cyan);
  border: 1px solid var(--x-line-strong); border-radius: 999px;
  cursor: pointer; transition: background .2s, color .2s;
}
.l2et-x-mini-btn:hover:not(:disabled) { background: rgba(95,208,255,0.08); }
.l2et-x-mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.spine-pro-v92 li.l2et-x-done span {
  background: var(--x-green) !important;
  color: #05060F !important;
  box-shadow: 0 0 8px rgba(124,255,178,0.4);
}

/* cockpit - v92 scenario picker + log */
.l2et-x-scenario-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--x-line);
}
.l2et-x-scenario {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  font-family: var(--x-mono); font-size: 10px; letter-spacing: 0.04em;
  background: transparent; color: var(--x-ink-soft);
  border: 1px solid var(--x-line); border-radius: 4px;
  cursor: pointer; transition: all .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l2et-x-scenario:hover { color: var(--x-ink); border-color: var(--x-line-strong); }
.l2et-x-scenario.is-active {
  background: rgba(95,208,255,0.1);
  color: var(--x-cyan); border-color: var(--x-cyan);
}
.l2et-x-cockpit-log {
  margin-top: 10px; padding: 10px 12px;
  font-size: 11px; line-height: 1.5;
  color: var(--x-ink-soft);
  background: rgba(0,0,0,0.2); border-radius: var(--x-radius-sm);
  border-left: 2px solid var(--x-cyan);
}

/* ======================================================
 * Assurance radar (v92)
 * Premium assurance layout: 4-column grid
 * Col 1 = legend (with "How to read the radar" + 4 bullets)
 * Col 2 = Evidence, Agentic Risk (left flank)
 * Col 3 = Governance, AI Workflow (center, span 2 rows), Human Gate
 * Col 4 = Security, Resilience (right flank)
 * ====================================================== */
.radar-board-v92.l2et-x-radar-grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "legend .         governance   ."
    "legend evidence  workflow     security"
    "legend agentic   workflow     resilience"
    "legend .         human        .";
  gap: 16px;
  padding: 28px;
  position: relative;
  isolation: isolate;
  align-items: stretch;
}
.radar-board-v92.l2et-x-radar-grid .radar-legend-v92            { grid-area: legend; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.governance   { grid-area: governance; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.evidence     { grid-area: evidence; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.security     { grid-area: security; }
.radar-board-v92.l2et-x-radar-grid .radar-core-v92              { grid-area: workflow; align-self: stretch; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.agentic      { grid-area: agentic; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.resilience   { grid-area: resilience; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92.human        { grid-area: human; }
.radar-board-v92.l2et-x-radar-grid .radar-card-v92,
.radar-board-v92.l2et-x-radar-grid .radar-core-v92 {
  margin: 0 !important; position: relative !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  transform: none !important;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 110px;
  z-index: 2;
}
.radar-board-v92.l2et-x-radar-grid .radar-core-v92 { min-height: 220px; }

/* Concentric dotted rings centered on the workflow card */
.radar-board-v92.l2et-x-radar-grid::before,
.radar-board-v92.l2et-x-radar-grid::after {
  content: ''; position: absolute;
  left: calc(64%); top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(155, 140, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.radar-board-v92.l2et-x-radar-grid::before { width: 360px; height: 360px; }
.radar-board-v92.l2et-x-radar-grid::after  { width: 540px; height: 540px; border-color: rgba(95,208,255,0.07); }

/* Legend block - left column with structured bullets */
.radar-board-v92.l2et-x-radar-grid .radar-legend-v92 {
  align-self: start;
  padding: 22px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  z-index: 3;
}
.radar-board-v92.l2et-x-radar-grid .radar-legend-v92 .mono { display: none; }
.radar-board-v92.l2et-x-radar-grid .radar-legend-v92 p     { display: none; }
.l2et-x-legend-title {
  font-size: 13px; font-weight: 600;
  color: var(--x-ink);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.l2et-x-legend-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.l2et-x-legend-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.4;
}
.l2et-x-legend-list li > div { display: flex; flex-direction: column; gap: 2px; }
.l2et-x-legend-list li b { color: var(--x-ink); font-weight: 600; font-size: 12.5px; }
.l2et-x-legend-list li .sub {
  color: var(--x-ink-mute); font-size: 11.5px; line-height: 1.35;
}
.l2et-x-legend-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
.l2et-x-legend-dot.dot-green  { background: var(--x-green);  box-shadow: 0 0 8px rgba(124,255,178,0.55); }
.l2et-x-legend-dot.dot-cyan   { background: var(--x-cyan);   box-shadow: 0 0 8px rgba(95,208,255,0.55); }
.l2et-x-legend-dot.dot-violet { background: var(--x-violet); box-shadow: 0 0 8px rgba(155,140,255,0.55); }
.l2et-x-legend-dot.dot-amber  { background: var(--x-amber);  box-shadow: 0 0 8px rgba(255,197,107,0.55); }

/* threat palette - picks which threat to highlight */
.l2et-x-threat-palette {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 20px; padding: 12px 14px;
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  background: var(--x-surface);
}
.l2et-x-threat-intro {
  display: block; width: 100%;
  font-size: 11px; color: var(--x-ink-mute); letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.l2et-x-threat {
  padding: 7px 12px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--x-ink-soft);
  background: transparent;
  border: 1px solid var(--x-line-strong);
  border-radius: 999px;
  cursor: pointer; transition: all .18s;
}
.l2et-x-threat:hover { color: var(--x-ink); border-color: var(--x-violet); }
.l2et-x-threat.is-active {
  color: var(--x-violet);
  background: rgba(155,140,255,0.12);
  border-color: var(--x-violet);
  box-shadow: inset 0 0 0 1px rgba(155,140,255,0.4);
}
.radar-card-v92.l2et-x-bound {
  animation: l2etXRadarBound 0.55s ease-out both;
  animation-delay: var(--bind-delay, 0ms);
  position: relative;
}
.radar-card-v92.l2et-x-primary {
  box-shadow: 0 0 0 1px var(--x-violet), 0 0 18px rgba(155,140,255,0.35);
}
.radar-card-v92.l2et-x-secondary {
  box-shadow: 0 0 0 1px var(--x-cyan), 0 0 10px rgba(95,208,255,0.25);
}
@keyframes l2etXRadarBound {
  0%   { transform: scale(0.96); opacity: 0.6; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1;   }
}
.l2et-x-radar-bindings {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; line-height: 1.4;
}
.l2et-x-radar-bindings li {
  padding: 6px 8px; border-radius: var(--x-radius-sm);
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--x-cyan);
}
.l2et-x-radar-bindings b {
  display: inline-block; min-width: 90px;
  color: var(--x-cyan); font-size: 10px; letter-spacing: 0.05em;
}

/* Radar responsive - collapse to single column on narrow viewports */
@media (max-width: 1080px) {
  .radar-board-v92.l2et-x-radar-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "legend     legend     legend"
      ".          governance     ."
      "evidence   workflow   security"
      "agentic    workflow   resilience"
      ".          human          .";
    padding: 22px;
  }
  .radar-board-v92.l2et-x-radar-grid::before,
  .radar-board-v92.l2et-x-radar-grid::after { left: 50%; }
}
@media (max-width: 760px) {
  .radar-board-v92.l2et-x-radar-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "legend"
      "governance"
      "evidence"
      "workflow"
      "security"
      "agentic"
      "resilience"
      "human";
    padding: 18px;
  }
  .radar-board-v92.l2et-x-radar-grid::before,
  .radar-board-v92.l2et-x-radar-grid::after { display: none; }
}

/* Reactor responsive - same breakpoints as the radar */
@media (max-width: 1024px) {
  .reactor-pro-v92.l2et-x-reactor-grid {
    grid-template-columns: 1fr minmax(180px, 220px) 1fr;
    padding: 22px;
  }
  .reactor-pro-v92.l2et-x-reactor-grid::before { width: 280px; height: 280px; }
  .reactor-pro-v92.l2et-x-reactor-grid::after  { width: 420px; height: 420px; }
}
@media (max-width: 760px) {
  .reactor-pro-v92.l2et-x-reactor-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "inputs"
      "controls"
      "evidence"
      "core"
      "monitoring"
      "decision"
      "risk";
    padding: 18px;
  }
  .reactor-pro-v92.l2et-x-reactor-grid::before,
  .reactor-pro-v92.l2et-x-reactor-grid::after { display: none; }
  .reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.inputs,
  .reactor-pro-v92.l2et-x-reactor-grid .reactor-pro-node.risk { max-width: none; }
}

/* ======================================================
 * Workflow rail (v92) - attack simulator
 * NEW: scenario brief panel + outcome summary panel +
 *      improved per-step visual state differentiation.
 * ====================================================== */

/* Scenario brief - shown above the rail */
.l2et-x-rail-brief {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-cyan);
  border-radius: var(--x-radius);
  background: var(--x-surface);
  display: flex; flex-direction: column; gap: 10px;
}
.l2et-x-brief-label {
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-ink-mute);
}
.l2et-x-brief-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px;
  align-items: start;
  font-size: 13px; line-height: 1.5;
  color: var(--x-ink-soft);
}
.l2et-x-brief-row > div { color: var(--x-ink); }
.l2et-x-brief-tag {
  display: inline-block; padding: 3px 8px;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--x-cyan);
  background: rgba(95,208,255,0.08);
  border: 1px solid rgba(95,208,255,0.25);
  border-radius: 4px;
  height: fit-content;
}

/* Toolbar with dynamic run button */
.l2et-x-rail-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 14px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
}
.l2et-x-run-btn {
  padding: 8px 16px;
  font-family: var(--x-mono); font-size: 12px; letter-spacing: 0.04em;
  color: #05060F; background: var(--x-cyan);
  border: 0; border-radius: var(--x-radius-sm);
  cursor: pointer; transition: all .15s;
}
.l2et-x-run-btn:hover:not(:disabled) {
  background: var(--x-green); box-shadow: 0 0 16px rgba(95,208,255,0.4);
}
.l2et-x-run-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.l2et-x-rail-hint {
  font-size: 11px; color: var(--x-ink-mute); letter-spacing: 0.03em;
}

/* Per-step state visuals - distinct enough to read at a glance */
.rail-grid-v92 article[data-step] {
  transition: box-shadow .25s, background .25s, color .25s, transform .25s, border-color .25s;
  position: relative;
}
.rail-grid-v92 article[data-step].l2et-x-active {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--x-cyan), 0 8px 24px rgba(95,208,255,0.18);
}
/* corner status dot */
.rail-grid-v92 article[data-step].l2et-x-state-ok::after,
.rail-grid-v92 article[data-step].l2et-x-state-watching::after,
.rail-grid-v92 article[data-step].l2et-x-state-flagged::after,
.rail-grid-v92 article[data-step].l2et-x-state-blocked::after,
.rail-grid-v92 article[data-step].l2et-x-state-halted::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
}
.rail-grid-v92 article[data-step].l2et-x-state-ok::after       { background: var(--x-green); box-shadow: 0 0 6px var(--x-green); }
.rail-grid-v92 article[data-step].l2et-x-state-watching::after { background: var(--x-cyan);  box-shadow: 0 0 6px var(--x-cyan);  }
.rail-grid-v92 article[data-step].l2et-x-state-flagged::after  { background: var(--x-amber); box-shadow: 0 0 6px var(--x-amber); }
.rail-grid-v92 article[data-step].l2et-x-state-blocked::after  { background: var(--x-red);   box-shadow: 0 0 6px var(--x-red);   }
.rail-grid-v92 article[data-step].l2et-x-state-halted::after   { background: var(--x-red);   box-shadow: 0 0 12px var(--x-red);  }

/* state-specific borders / background tints - make non-OK steps obviously different */
.rail-grid-v92 article[data-step].l2et-x-state-ok       { border-color: rgba(124,255,178,0.20) !important; }
.rail-grid-v92 article[data-step].l2et-x-state-watching { border-color: rgba(95,208,255,0.40) !important;  background: rgba(95,208,255,0.04) !important; }
.rail-grid-v92 article[data-step].l2et-x-state-flagged  { border-color: rgba(255,197,107,0.55) !important; background: rgba(255,197,107,0.07) !important; }
.rail-grid-v92 article[data-step].l2et-x-state-blocked  { border-color: rgba(255,112,133,0.60) !important; background: rgba(255,112,133,0.07) !important; }
.rail-grid-v92 article[data-step].l2et-x-state-halted   {
  border-color: rgba(255,112,133,0.80) !important;
  background: rgba(255,112,133,0.10) !important;
  box-shadow: 0 0 0 1px rgba(255,112,133,0.45), 0 0 22px rgba(255,112,133,0.18);
}

/* Outcome summary panel - appears after a run */
.l2et-x-rail-outcome {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  background: var(--x-surface);
  display: flex; flex-direction: column; gap: 12px;
}
.l2et-x-outcome-label {
  font-size: 10px; letter-spacing: 0.06em; color: var(--x-ink-mute);
}
.l2et-x-outcome-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.l2et-x-outcome-stats .stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-family: var(--x-mono); font-size: 11px; letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--x-line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--x-ink);
  transition: opacity .2s;
}
.l2et-x-outcome-stats .stat::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--x-ink-mute);
}
.l2et-x-outcome-stats .stat.stat-ok       { color: var(--x-green);  border-color: rgba(124,255,178,0.40); }
.l2et-x-outcome-stats .stat.stat-ok::before       { background: var(--x-green); box-shadow: 0 0 6px var(--x-green); }
.l2et-x-outcome-stats .stat.stat-watching { color: var(--x-cyan);   border-color: rgba(95,208,255,0.40); }
.l2et-x-outcome-stats .stat.stat-watching::before { background: var(--x-cyan); box-shadow: 0 0 6px var(--x-cyan); }
.l2et-x-outcome-stats .stat.stat-flagged  { color: var(--x-amber);  border-color: rgba(255,197,107,0.50); }
.l2et-x-outcome-stats .stat.stat-flagged::before  { background: var(--x-amber); box-shadow: 0 0 6px var(--x-amber); }
.l2et-x-outcome-stats .stat.stat-blocked  { color: var(--x-red);    border-color: rgba(255,112,133,0.55); }
.l2et-x-outcome-stats .stat.stat-blocked::before  { background: var(--x-red); box-shadow: 0 0 6px var(--x-red); }
.l2et-x-outcome-stats .stat.stat-halted   { color: var(--x-red);    border-color: rgba(255,112,133,0.70); background: rgba(255,112,133,0.08); }
.l2et-x-outcome-stats .stat.stat-halted::before   { background: var(--x-red); box-shadow: 0 0 10px var(--x-red); }
.l2et-x-outcome-stats .stat.is-zero { opacity: 0.35; }
.l2et-x-rail-outcome p {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--x-ink);
}

/* Log header */
.l2et-x-rail-log-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; margin-bottom: 6px;
  font-size: 10px; letter-spacing: 0.06em; color: var(--x-ink-mute);
}
.l2et-x-rail-log-hint { color: var(--x-ink-mute); font-style: italic; }
.l2et-x-rail-log {
  padding: 14px 16px;
  max-height: 240px; overflow: auto;
  font-size: 11px; line-height: 1.6;
  color: var(--x-ink-soft);
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  white-space: pre-wrap; word-break: break-word;
}

/* ======================================================
 * Classifier wizard (unchanged)
 * ====================================================== */
.l2et-x-quiz-card { padding: 22px; border-radius: var(--x-radius); }
.l2et-x-quiz-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; color: var(--x-ink-mute); letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.l2et-x-quiz-card h3 { margin: 0 0 16px; font-size: 17px; line-height: 1.35; }
.l2et-x-quiz-opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.l2et-x-quiz-opt {
  text-align: left; padding: 12px 14px;
  font: inherit; font-size: 13px;
  color: var(--x-ink);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--x-line-strong);
  border-radius: var(--x-radius-sm);
  cursor: pointer; transition: all .15s;
}
.l2et-x-quiz-opt:hover { background: rgba(95,208,255,0.06); border-color: var(--x-cyan); }
.l2et-x-quiz-opt.is-selected {
  background: rgba(95,208,255,0.1);
  border-color: var(--x-cyan);
  color: var(--x-cyan);
}
.l2et-x-quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--x-line);
}
.l2et-x-quiz-progress { display: flex; gap: 4px; margin-left: auto; }
.l2et-x-quiz-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--x-line-strong); }
.l2et-x-quiz-dot.is-done { background: var(--x-cyan); }
.l2et-x-quiz-dot.is-cur  { background: var(--x-violet); box-shadow: 0 0 6px var(--x-violet); }
.l2et-x-result-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.l2et-x-result-tier { padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; }
.l2et-x-result-tier.is-high {
  color: var(--x-amber); background: rgba(255,197,107,0.1);
  border: 1px solid rgba(255,197,107,0.4);
}
.l2et-x-result-tier.is-limited {
  color: var(--x-green); background: rgba(124,255,178,0.08);
  border: 1px solid rgba(124,255,178,0.3);
}
.l2et-x-tag {
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-violet); background: rgba(155,140,255,0.1);
  border: 1px solid rgba(155,140,255,0.3);
}
.l2et-x-result-score { margin-bottom: 16px; }
.l2et-x-score-bar {
  position: relative; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 6px;
}
.l2et-x-score-bar span {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--x-green), var(--x-cyan), var(--x-violet), var(--x-amber));
  transition: width .6s ease-out;
}
.l2et-x-result-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin-bottom: 16px;
}
.l2et-x-result-cols h4 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: 0.06em;
  color: var(--x-cyan); font-weight: 600; text-transform: uppercase;
}
.l2et-x-result-list { list-style: none; margin: 0; padding: 0; }
.l2et-x-result-list li {
  padding: 6px 0; font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px dashed var(--x-line);
}
.l2et-x-result-list li:last-child { border-bottom: 0; }
.l2et-x-result-list.mono { font-family: var(--x-mono); font-size: 11px; }
.l2et-x-result-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--x-line);
}

/* ======================================================
 * Standards crosswalk
 * ====================================================== */
.l2et-x-crosswalk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.l2et-x-crosswalk-tab {
  padding: 7px 14px;
  font: inherit; font-size: 12px;
  color: var(--x-ink-soft);
  background: transparent;
  border: 1px solid var(--x-line-strong);
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.l2et-x-crosswalk-tab:hover { color: var(--x-ink); border-color: var(--x-cyan); }
.l2et-x-crosswalk-tab.is-active {
  color: var(--x-cyan); background: rgba(95,208,255,0.1);
  border-color: var(--x-cyan);
}
.l2et-x-crosswalk-body { padding: 0; overflow: hidden; border-radius: var(--x-radius); }
.l2et-x-crosswalk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.l2et-x-crosswalk-table th, .l2et-x-crosswalk-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--x-line);
}
.l2et-x-crosswalk-table th {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--x-ink-mute); font-weight: 600;
  background: rgba(255,255,255,0.02);
}
.l2et-x-crosswalk-table tr:last-child td { border-bottom: 0; }
.l2et-x-crosswalk-table td.mono { color: var(--x-cyan); white-space: nowrap; width: 200px; }

/* ======================================================
 * Post-quantum readiness
 * ====================================================== */
.l2et-x-pq-controls { padding: 16px; border-radius: var(--x-radius); }
.l2et-x-pq-presets {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--x-line);
  font-size: 11px; color: var(--x-ink-mute); letter-spacing: 0.05em;
}
.l2et-x-pq-preset {
  padding: 4px 10px; font: inherit; font-size: 11px;
  color: var(--x-ink-soft);
  background: transparent;
  border: 1px solid var(--x-line-strong);
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.l2et-x-pq-preset:hover {
  color: var(--x-violet); border-color: var(--x-violet);
  background: rgba(155,140,255,0.08);
}
.l2et-x-pq-algos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
}
.l2et-x-pq-algo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  font: inherit; text-align: left;
  color: var(--x-ink-soft);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-sm);
  cursor: pointer; transition: all .15s;
}
.l2et-x-pq-algo:hover { color: var(--x-ink); border-color: var(--x-line-strong); }
.l2et-x-pq-algo.is-on {
  background: rgba(95,208,255,0.08);
  border-color: var(--x-cyan);
  color: var(--x-ink);
}
.l2et-x-pq-tag {
  padding: 2px 7px; border-radius: 4px;
  font-family: var(--x-mono); font-size: 9px; font-style: normal;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.l2et-x-pq-tag.tag-classical { color: var(--x-red);   background: rgba(255,112,133,0.1); }
.l2et-x-pq-tag.tag-reduced   { color: var(--x-amber); background: rgba(255,197,107,0.1); }
.l2et-x-pq-tag.tag-pq-safe   { color: var(--x-green); background: rgba(124,255,178,0.1); }
.l2et-x-pq-out { margin-top: 16px; }
.l2et-x-pq-verdict { padding: 14px 16px; margin-bottom: 14px; border-radius: var(--x-radius); }
.l2et-x-pq-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.05em; color: var(--x-ink-mute);
  margin-bottom: 10px;
}
.l2et-x-pq-bar {
  display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.04); margin-bottom: 10px;
}
.l2et-x-pq-bar .seg { transition: width .4s; }
.l2et-x-pq-bar .seg.high   { background: var(--x-red);   }
.l2et-x-pq-bar .seg.medium { background: var(--x-amber); }
.l2et-x-pq-bar .seg.safe   { background: var(--x-green); }
.l2et-x-pq-verdict p { margin: 0; font-size: 13px; color: var(--x-ink); }
.l2et-x-pq-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: var(--x-surface); border-radius: var(--x-radius); overflow: hidden;
}
.l2et-x-pq-table th, .l2et-x-pq-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--x-line); vertical-align: top;
}
.l2et-x-pq-table th {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--x-ink-mute); background: rgba(255,255,255,0.02);
}
.l2et-x-pq-table tr.risk-high   td:first-child { border-left: 2px solid var(--x-red); }
.l2et-x-pq-table tr.risk-medium td:first-child { border-left: 2px solid var(--x-amber); }
.l2et-x-pq-table tr.risk-low    td:first-child { border-left: 2px solid var(--x-green); }
.l2et-x-pq-foot {
  margin-top: 10px; font-size: 10px; letter-spacing: 0.05em;
  color: var(--x-ink-mute); text-align: right;
}
.l2et-x-empty {
  padding: 20px; text-align: center; color: var(--x-ink-mute);
  border: 1px dashed var(--x-line); border-radius: var(--x-radius);
}

/* ======================================================
 * Prompt-injection sandbox (rebuilt)
 * NEW: doc preview with inline pattern highlights,
 *      detection grid with per-pattern excerpts + decoded payloads,
 *      pane headline + structured action lists,
 *      side-by-side naive vs control trace logs.
 * ====================================================== */
.l2et-x-sandbox-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.l2et-x-sandbox-tab {
  padding: 7px 12px;
  font: inherit; font-size: 12px;
  color: var(--x-ink-soft);
  background: transparent;
  border: 1px solid var(--x-line-strong);
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.l2et-x-sandbox-tab:hover { color: var(--x-ink); border-color: var(--x-violet); }
.l2et-x-sandbox-tab.is-active {
  color: var(--x-violet); background: rgba(155,140,255,0.1);
  border-color: var(--x-violet);
}
.l2et-x-sandbox-inputs {
  padding: 16px; margin-bottom: 14px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
}
.l2et-x-sandbox-inputs label {
  display: block; margin: 8px 0 4px;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-ink-mute);
}
.l2et-x-sandbox-input {
  width: 100%; padding: 10px 12px;
  font-family: var(--x-mono); font-size: 12px; line-height: 1.5;
  color: var(--x-ink);
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-sm);
  resize: vertical;
  box-sizing: border-box;
}
.l2et-x-sandbox-input:focus {
  outline: 2px solid var(--x-cyan); outline-offset: 1px;
  border-color: var(--x-cyan);
}
.l2et-x-sandbox-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.l2et-x-sandbox-note { font-size: 10px; color: var(--x-ink-mute); letter-spacing: 0.04em; }

/* Doc preview with inline highlights */
.l2et-x-doc-block {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
}
.l2et-x-doc-label {
  display: block;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-ink-mute);
  margin-bottom: 10px;
}
.l2et-x-doc-preview {
  padding: 12px 14px;
  font-family: var(--x-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--x-ink-soft);
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-sm);
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
}
.l2et-x-mark {
  padding: 1px 3px; border-radius: 3px;
  color: var(--x-ink); font-weight: 500;
  border-bottom: 2px solid currentColor;
}
.l2et-x-mark.kind-role   { background: rgba(255,112,133,0.18); color: var(--x-red);   }
.l2et-x-mark.kind-tool   { background: rgba(255,197,107,0.18); color: var(--x-amber); }
.l2et-x-mark.kind-exfil  { background: rgba(255,112,133,0.22); color: var(--x-red);   }
.l2et-x-mark.kind-leak   { background: rgba(155,140,255,0.20); color: var(--x-violet);}
.l2et-x-mark.kind-obfusc { background: rgba(95,208,255,0.18);  color: var(--x-cyan);  }

/* Detection grid - per-pattern cards */
.l2et-x-detections {
  margin-bottom: 14px;
}
.l2et-x-det-head {
  display: block;
  margin-bottom: 8px;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-ink-mute);
}
.l2et-x-det-empty {
  padding: 14px 16px;
  font-size: 12px; color: var(--x-green);
  background: rgba(124,255,178,0.06);
  border: 1px dashed rgba(124,255,178,0.3);
  border-radius: var(--x-radius);
  letter-spacing: 0.03em;
}
.l2et-x-det-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.l2et-x-det-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-line-strong);
  border-radius: var(--x-radius-sm);
}
.l2et-x-det-item.kind-role   { border-left-color: var(--x-red);   }
.l2et-x-det-item.kind-tool   { border-left-color: var(--x-amber); }
.l2et-x-det-item.kind-exfil  { border-left-color: var(--x-red);   }
.l2et-x-det-item.kind-leak   { border-left-color: var(--x-violet);}
.l2et-x-det-item.kind-obfusc { border-left-color: var(--x-cyan);  }
.l2et-x-det-tag {
  display: inline-block;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--x-ink);
  text-transform: uppercase;
}
.l2et-x-det-item.kind-role   .l2et-x-det-tag { color: var(--x-red);   }
.l2et-x-det-item.kind-tool   .l2et-x-det-tag { color: var(--x-amber); }
.l2et-x-det-item.kind-exfil  .l2et-x-det-tag { color: var(--x-red);   }
.l2et-x-det-item.kind-leak   .l2et-x-det-tag { color: var(--x-violet);}
.l2et-x-det-item.kind-obfusc .l2et-x-det-tag { color: var(--x-cyan);  }
.l2et-x-det-excerpt {
  padding: 6px 8px;
  font-size: 11px; line-height: 1.4;
  color: var(--x-ink-soft);
  background: rgba(0,0,0,0.28);
  border-radius: 4px;
  word-break: break-all;
}
.l2et-x-det-decoded {
  padding: 6px 8px;
  font-size: 11px; line-height: 1.4;
  color: var(--x-amber);
  background: rgba(255,197,107,0.06);
  border: 1px dashed rgba(255,197,107,0.25);
  border-radius: 4px;
  word-break: break-all;
}
.l2et-x-decoded-label {
  display: inline-block;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--x-amber);
  text-transform: uppercase;
  margin-right: 4px;
}
.l2et-x-det-why {
  font-size: 11.5px; line-height: 1.45;
  color: var(--x-ink-mute);
}

/* Side-by-side panes */
.l2et-x-sandbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 880px) {
  .l2et-x-sandbox-grid { grid-template-columns: 1fr; }
}
.l2et-x-sandbox-pane {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--x-radius);
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  transition: border-color .25s, box-shadow .25s;
}
.l2et-x-sandbox-pane.is-bad  { border-color: rgba(255,112,133,0.45); box-shadow: 0 0 24px rgba(255,112,133,0.08); }
.l2et-x-sandbox-pane.is-good { border-color: rgba(124,255,178,0.4);  box-shadow: 0 0 18px rgba(124,255,178,0.06); }
.l2et-x-sandbox-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--x-line);
}
.l2et-x-pane-label { color: var(--x-ink); }
.l2et-x-pane-status {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--x-ink-mute);
}
.l2et-x-sandbox-pane.is-bad  .l2et-x-pane-status { color: var(--x-red);   background: rgba(255,112,133,0.1); border: 1px solid rgba(255,112,133,0.3); }
.l2et-x-sandbox-pane.is-good .l2et-x-pane-status { color: var(--x-green); background: rgba(124,255,178,0.1); border: 1px solid rgba(124,255,178,0.3); }
.l2et-x-pane-headline {
  padding: 8px 10px;
  font-size: 12px; letter-spacing: 0.02em; line-height: 1.4;
  color: var(--x-ink);
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--x-line-strong);
  border-radius: 4px;
}
.l2et-x-sandbox-pane.is-bad  .l2et-x-pane-headline { border-left-color: var(--x-red);   color: var(--x-red);   background: rgba(255,112,133,0.06); }
.l2et-x-sandbox-pane.is-good .l2et-x-pane-headline { border-left-color: var(--x-green); color: var(--x-green); background: rgba(124,255,178,0.05); }
.l2et-x-pane-actions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.l2et-x-pane-actions li {
  position: relative;
  padding: 6px 8px 6px 18px;
  font-size: 12px; line-height: 1.45;
  color: var(--x-ink-soft);
  border-bottom: 1px dashed var(--x-line);
}
.l2et-x-pane-actions li:last-child { border-bottom: 0; }
.l2et-x-pane-actions li::before {
  content: ''; position: absolute; left: 4px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%;
}
.l2et-x-sandbox-pane.is-bad  .l2et-x-pane-actions li::before { background: var(--x-red);   box-shadow: 0 0 4px var(--x-red); }
.l2et-x-sandbox-pane.is-good .l2et-x-pane-actions li::before { background: var(--x-green); box-shadow: 0 0 4px var(--x-green); }
.l2et-x-pane-divider {
  margin-top: 4px;
  padding-top: 8px;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--x-ink-mute);
  border-top: 1px dashed var(--x-line);
}
.l2et-x-sandbox-log {
  max-height: 220px; overflow: auto;
  padding: 10px 12px;
  font-size: 11px; line-height: 1.6;
  color: var(--x-ink-soft);
  background: rgba(0,0,0,0.34);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-sm);
  white-space: pre-wrap; word-break: break-word;
}

/* ======================================================
 * Command palette (⌘K)
 * ====================================================== */
.l2et-x-palette {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 16vh;
}
.l2et-x-palette[hidden] { display: none; }
.l2et-x-palette-back {
  position: fixed; inset: 0;
  background: rgba(5,6,15,0.7);
  backdrop-filter: blur(6px);
}
.l2et-x-palette-card {
  position: relative; width: min(560px, 92vw);
  padding: 0; overflow: hidden;
  border-radius: var(--x-radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,140,255,0.2);
}
.l2et-x-palette-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 18px;
  font-family: var(--x-mono); font-size: 13px; letter-spacing: 0.02em;
  color: var(--x-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--x-line);
}
.l2et-x-palette-input:focus { outline: none; }
.l2et-x-palette-list {
  list-style: none; margin: 0; padding: 6px;
  max-height: 50vh; overflow: auto;
}
.l2et-x-palette-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--x-radius-sm);
  font-size: 13px; color: var(--x-ink); cursor: pointer;
}
.l2et-x-palette-item.is-active {
  background: rgba(155,140,255,0.12); color: var(--x-violet);
}
.l2et-x-palette-section {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--x-ink-mute);
}
.l2et-x-palette-empty {
  padding: 20px; text-align: center; color: var(--x-ink-mute);
  font-family: var(--x-mono); font-size: 12px;
}
body.l2et-x-palette-open { overflow: hidden; }
.l2et-x-palette-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--x-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--x-ink-mute);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--x-line);
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.l2et-x-palette-hint:hover {
  color: var(--x-violet); border-color: var(--x-violet);
  background: rgba(155,140,255,0.08);
}
.l2et-x-palette-hint kbd {
  padding: 1px 5px; font-family: inherit; font-size: 9px;
  color: var(--x-ink-soft);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--x-line-strong);
  border-radius: 3px;
}


/* reduced motion accommodations */
@media (prefers-reduced-motion: reduce) {
  .l2et-x-pulse { animation: none; }
  .radar-card-v92.l2et-x-bound { animation: none; }
  .l2et-x-score-bar span { transition: none; }
  .rail-grid-v92 article[data-step].l2et-x-active { transform: none; }
  .l2et-x-sandbox-pane { transition: none; }
}


/* Method log extracted styles */

/* Method log specific layout - additive, no design-token changes */
.l2et-x-log-list { list-style: none; margin: 32px 0 0; padding: 0; }
.l2et-x-log-entry {
  position: relative;
  padding: 20px 22px 18px 28px;
  margin-bottom: 14px;
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  background: var(--x-surface);
}
.l2et-x-log-entry::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 2px; background: var(--x-cyan); border-radius: 2px;
}
.l2et-x-log-entry.kind-publication::before { background: var(--x-green); }
.l2et-x-log-entry.kind-framework::before   { background: var(--x-violet); }
.l2et-x-log-entry.kind-incident::before    { background: var(--x-amber); }
.l2et-x-log-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 6px;
}
.l2et-x-log-date {
  font-family: var(--x-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--x-ink-mute);
}
.l2et-x-log-kind {
  padding: 3px 9px;
  font-family: var(--x-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
  color: var(--x-cyan);
  background: rgba(95,208,255,0.08);
  border: 1px solid rgba(95,208,255,0.25);
}
.kind-publication .l2et-x-log-kind { color: var(--x-green); background: rgba(124,255,178,0.08); border-color: rgba(124,255,178,0.25); }
.kind-framework   .l2et-x-log-kind { color: var(--x-violet); background: rgba(155,140,255,0.1); border-color: rgba(155,140,255,0.3); }
.kind-incident    .l2et-x-log-kind { color: var(--x-amber); background: rgba(255,197,107,0.1); border-color: rgba(255,197,107,0.3); }
.l2et-x-log-confidence {
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--x-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--x-ink-soft);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--x-line);
}
.l2et-x-log-entry h3 { margin: 4px 0 6px; font-size: 16px; line-height: 1.35; }
.l2et-x-log-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--x-ink-soft); }
.l2et-x-log-refs {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--x-line);
  font-family: var(--x-mono); font-size: 11px;
  color: var(--x-ink-mute);
}
.l2et-x-log-refs strong { color: var(--x-ink-soft); font-weight: 500; }
.l2et-x-log-hash {
  display: inline-block; margin-left: 4px;
  font-family: var(--x-mono); font-size: 10px;
  color: var(--x-ink-mute); letter-spacing: 0.02em;
}
.l2et-x-log-foreword {
  padding: 18px 22px; border-radius: var(--x-radius);
  background: rgba(95,208,255,0.04);
  border-left: 2px solid var(--x-cyan);
}
.l2et-x-log-foreword p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--x-ink-soft); }
.l2et-x-log-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 24px 0 4px;
}
.l2et-x-log-filter {
  padding: 6px 12px;
  font: inherit; font-size: 12px;
  color: var(--x-ink-soft);
  background: transparent;
  border: 1px solid var(--x-line-strong);
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.l2et-x-log-filter:hover { color: var(--x-ink); border-color: var(--x-cyan); }
.l2et-x-log-filter.is-active {
  color: var(--x-cyan); background: rgba(95,208,255,0.1);
  border-color: var(--x-cyan);
}
.l2et-x-log-entry[hidden] { display: none; }


.l2et-x-method-hero{padding-top:80px}.l2et-x-mt-24{margin-top:24px}.l2et-x-mt-32{margin-top:32px}


/* L2ET v101 - research/advisory content structure and observatory tool pages */
.display-three-line { line-height: .95; padding-bottom: .06em; }
.display-three-line span { display:block; }
.hero-research-led .hero-copy { max-width: 1180px; }
.tool-launch-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.35rem); }
.tool-launch-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-launch-card { position:relative; display:block; padding: 1.35rem; min-height: 230px; border-radius: 24px; overflow:hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.tool-launch-card::before { content:''; position:absolute; inset:auto 1.2rem 1rem 1.2rem; height:1px; background:linear-gradient(90deg, transparent, rgba(87,255,34,.42), transparent); opacity:.5; }
.tool-launch-card:hover { transform: translateY(-4px); border-color: rgba(87,255,34,.45); box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 40px rgba(87,255,34,.08); }
.tool-launch-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:1rem; background:rgba(87,255,34,.08); color:var(--signal,#57ff22); border:1px solid rgba(87,255,34,.22); }
.tool-launch-icon i { font-size:1.7rem; }
.tool-launch-card h3 { margin:.35rem 0 .7rem; color:var(--txt,#fff); }
.tool-launch-card p { color:var(--muted,#a6b0ce); line-height:1.55; }
.tool-launch-card .mono { display:inline-block; margin-top:.7rem; color:var(--signal,#57ff22); }
.news-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1.25rem; }
.news-card { padding:1.5rem; border-radius:24px; }
.news-card .mono { color:var(--signal,#57ff22); }
.news-card h3 { margin:.7rem 0; }
.news-card a { display:inline-block; margin-top:.8rem; color:var(--signal,#57ff22); }
.colloquium-layout { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:1.5rem; align-items:start; }
.colloquium-panel { padding:1.6rem; border-radius:24px; }
.topic-chip-grid { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.25rem; }
.topic-chip { display:inline-flex; border:1px solid rgba(45,227,194,.22); color:var(--muted,#a6b0ce); border-radius:999px; padding:.45rem .75rem; font: .78rem/1.1 var(--font-mono, monospace); background:rgba(45,227,194,.05); }
.colloquium-form { margin:0; }
.evidence-reactor-standalone { min-height: 760px; max-width: 1120px; margin: 0 auto; }
@media (max-width: 1100px) { .tool-launch-grid, .tool-launch-grid-wide, .news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .colloquium-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .tool-launch-grid, .tool-launch-grid-wide, .news-grid { grid-template-columns: 1fr; } .tool-launch-card { min-height: 0; } }


/* v101 research/advisory tools */
.l2et-tool-shell{padding:clamp(1.2rem,2vw,1.8rem);border-radius:28px;min-height:240px;}
.l2et-tool-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.25fr);gap:1rem;align-items:start;}
.l2et-tool-form{display:grid;gap:.85rem;}
.l2et-tool-form label{display:grid;gap:.38rem;color:var(--txt);font-weight:650;}
.l2et-tool-form input,.l2et-tool-form select,.l2et-tool-form textarea{width:100%;border:1px solid rgba(122,151,255,.18);background:rgba(2,6,23,.74);border-radius:14px;color:var(--txt);padding:.78rem .9rem;}
.l2et-tool-form .check-row{display:flex;gap:.55rem;align-items:flex-start;font-weight:500;color:var(--muted);}
.l2et-tool-form .check-row input{width:auto;margin-top:.25rem;}
.l2et-tool-output{padding:1rem;border:1px solid rgba(85,255,34,.18);border-radius:22px;background:linear-gradient(180deg,rgba(8,18,40,.78),rgba(3,8,22,.62));}
.l2et-score-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin:.4rem 0 1rem;background:conic-gradient(var(--signal) calc(var(--score,0)*1%),rgba(74,144,255,.14) 0);box-shadow:0 0 45px rgba(87,255,34,.18);}
.l2et-score-ring span{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:#050b1b;font:800 2rem var(--font-mono);color:var(--txt);}
.l2et-tool-badges{display:flex;gap:.45rem;flex-wrap:wrap;margin:.7rem 0;}
.l2et-tool-badge{border:1px solid rgba(122,151,255,.2);border-radius:999px;padding:.28rem .55rem;color:var(--muted);font:700 .72rem var(--font-mono);}
.l2et-tool-badge.ok{border-color:rgba(87,255,34,.35);color:var(--signal)}
.l2et-tool-badge.warn{border-color:rgba(255,191,91,.38);color:#ffbf5b}
.l2et-tool-badge.risk{border-color:rgba(255,90,122,.38);color:#ff5a7a}
.l2et-tool-table{width:100%;border-collapse:collapse;font-size:.9rem;overflow:hidden;border-radius:18px;}
.l2et-tool-table th,.l2et-tool-table td{border-bottom:1px solid rgba(122,151,255,.12);padding:.62rem;text-align:left;vertical-align:top;}
.l2et-tool-table th{color:var(--signal);font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;}
.l2et-tool-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.85rem;}
.l2et-mini-roadmap{display:grid;gap:.65rem;counter-reset:phase;}
.l2et-mini-roadmap article{counter-increment:phase;border:1px solid rgba(122,151,255,.16);border-radius:18px;padding:.85rem;background:rgba(4,10,24,.62);}
.l2et-mini-roadmap article:before{content:'0' counter(phase);font:800 .78rem var(--font-mono);color:var(--signal);}
.l2et-mini-roadmap h4{margin:.2rem 0;color:var(--txt);}
.l2et-guide-chat{display:grid;gap:.8rem;}
.l2et-guide-answer{white-space:pre-wrap;line-height:1.65;}
.l2et-source-link{word-break:break-word;}
.news-grid-wide{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:980px){.l2et-tool-grid,.news-grid-wide{grid-template-columns:1fr}.tool-launch-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.tool-launch-grid-wide{grid-template-columns:1fr}.l2et-tool-shell{padding:1rem}.l2et-score-ring{width:128px;height:128px}.l2et-score-ring span{width:94px;height:94px}}


/* v108 stability pass: content-visibility removed to avoid intermittent paint placeholders on the live site. */
.logo-img,
.foot-logo-img,
.founder-photo {
  image-rendering: auto;
}
@media (max-width: 760px) {
  .ai-holo-canvas { opacity: .42; }
}

/* v108 Protocol Pressure Map polish */
.l2et-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .9rem;margin:.45rem 0 1rem;}
.l2et-protocol-tool fieldset{border:1px solid rgba(120,140,220,.18);border-radius:18px;padding:1rem;margin:0 0 1rem;background:rgba(4,10,26,.34);}
.l2et-protocol-tool legend{padding:0 .4rem;color:var(--signal);font-family:var(--font-mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;}
.l2et-tool-table td small{display:block;color:var(--muted);margin-top:.25rem;line-height:1.45;}
.l2et-tool-table tr.pressure-high td:nth-child(2){color:#ffbf5b;font-weight:800;}
.l2et-tool-table tr.pressure-mediumhigh td:nth-child(2){color:#2de3c2;font-weight:800;}
.l2et-tool-table tr.pressure-medium td:nth-child(2){color:#57ff22;font-weight:800;}
@media (max-width:720px){.l2et-check-grid{grid-template-columns:1fr;}}

/* v108 tool form polish */
.l2et-tool-fieldset{border:1px solid rgba(95,144,255,.18);border-radius:18px;padding:1rem;margin:0;display:grid;gap:.55rem;background:rgba(4,10,24,.36)}
.l2et-tool-fieldset legend{padding:0 .5rem;color:var(--accent-green,#57ff22);font-family:var(--mono,monospace);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}


/* v108 functional polish for protocol map and research guide */
.l2et-tool-presets .is-active{border-color:rgba(87,255,34,.72)!important;color:var(--signal)!important;box-shadow:0 0 0 1px rgba(87,255,34,.16),0 0 24px rgba(87,255,34,.13);}
.l2et-guide-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:.35rem 0 .85rem;}
.l2et-guide-links{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem;}
.l2et-guide-answer h3{margin:0 0 .55rem;}
.l2et-guide-answer p{margin:.55rem 0;}

/* v110 header parity guard:
   enhancements.css is an additive layer; it must not change global top-menu metrics.
   These rules mirror the final main.css navigation sizing so pages that load
   enhancements.css and pages that do not load it render the header identically. */
@media (min-width: 1181px) {
  .site-nav .nav-links {
    font-size: clamp(12px, .78vw, 13.5px);
    gap: clamp(.45rem, .74vw, .95rem);
  }
  .site-nav .nav-links .nav-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.05;
  }
  .site-nav .nav-links .nav-link.active {
    font-size: inherit;
    font-weight: inherit;
  }
}
@media (min-width: 1181px) and (max-width: 1420px) {
  .site-nav .nav-links {
    font-size: clamp(11.5px, .72vw, 13px);
    gap: clamp(.36rem, .58vw, .72rem);
  }
}



/* Protected instrument engine status */
.instrument-engine-status {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .01em;
}
.instrument-engine-status[data-status="ready"] { color: var(--signal, #36ff9c); }
.instrument-engine-status[data-status="busy"] { color: var(--accent, #9d7bff); }
.instrument-engine-status[data-status="error"] { color: #ffb4b4; }