.subjectbar {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--ground-2), var(--ground));
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px);
}
.subjectbar-inner {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5); flex-wrap: wrap;
  width: 100%; min-width: 0;
  max-width: calc(var(--ex-content-max) + var(--ex-rail) + var(--s5) * 2); margin: 0 auto;
}
.subjectbar-inner > * { max-width: 100%; }
.subject-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.subject-id b { font-size: var(--fs-md); font-weight: 660; letter-spacing: -0.01em; }
.subject-rev { min-width: 0; max-width: 100%; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.subject-rev b { min-width: 0; max-width: 100%; color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; word-break: break-word; }

.explorer {
  display: grid; grid-template-columns: var(--ex-rail) minmax(0, 1fr);
  width: 100%; min-width: 0;
  min-height: calc(100vh - 58px);
  max-width: calc(var(--ex-content-max) + var(--ex-rail) + var(--s5) * 2); margin: 0 auto;
}
@media (max-width: 960px) { .explorer { grid-template-columns: 1fr; } }



.rail {
  border-right: 1px solid var(--rule); background: var(--ground-2);
  padding: var(--s4) var(--s3) var(--s5); display: flex; flex-direction: column; gap: var(--s4);
  position: sticky; top: 58px; align-self: start;
  max-height: calc(100vh - 58px); overflow-y: auto;
}
@media (max-width: 960px) {
  .rail { position: static; width: 100%; min-width: 0; max-width: 100%; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s3) var(--s4); }
  .rail-list { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); }
  .rail-group-label { display: none; }
  .rail-foot { display: none; }
  .rail-sub { display: flex; gap: var(--s2); margin: 0 0 0 var(--s2); padding: 0; border: 0; }
}
.rail-list { display: grid; gap: 2px; }
.rail a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 7px var(--s3); border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: var(--ex-body);
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rail a:hover { background: var(--panel); color: var(--ink); }
.rail a[aria-current="page"] {
  background: var(--panel-2); color: var(--ink);
  border-color: var(--rule-strong); box-shadow: inset 2px 0 0 var(--select);
}
.rail a b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-xs); color: var(--ink-semantic-muted); }
.rail a[aria-current="page"] b { color: var(--select); }
.rail a[data-synthetic="true"] { color: var(--st-refused); }
.rail-group-label { font-size: var(--fs-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-semantic-muted); padding: var(--s3) var(--s3) var(--s2); }
.rail-sub { display: grid; gap: 2px; margin-left: var(--s4); padding-left: var(--s3); border-left: 1px solid var(--rule); }
.rail-sub a { font-size: var(--fs-xs); padding: 5px var(--s3); }
.rail-foot { margin-top: auto; font-size: var(--fs-xxs); color: var(--ink-semantic-muted); line-height: 1.6; display: grid; gap: var(--s2); }



.workspace { min-width: 0; display: flex; flex-direction: column; }
.c6 { grid-column: span 6; min-width: 0; }
@media (max-width: 1080px) { .c6 { grid-column: 1 / -1; } }
main#view {
  padding: var(--s5) var(--ex-gutter) var(--s8);
  min-width: 0; display: grid; gap: var(--s5); align-content: start;
  max-width: var(--ex-content-max);
}
@media (max-width: 700px) { main#view { padding: var(--s4) var(--s4) var(--s7); } }

.view-head { display: grid; gap: var(--s2); max-width: 92ch; }
.view-head-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.view-head h1 { font-size: var(--ex-h1); line-height: 1.2; letter-spacing: -0.015em; font-weight: 660; }
.view-head p { color: var(--ink-2); font-size: var(--ex-body); }



.focus-capsule {
  display: grid; gap: var(--s2);
  padding: var(--s3) var(--ex-gutter);
  background: var(--select-wash); border-bottom: 1px solid var(--select-dim);
  position: sticky; top: 58px; z-index: 30; backdrop-filter: blur(8px);
}
.focus-capsule[hidden] { display: none; }
.focus-id { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.focus-label { font-size: var(--ex-body); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.focus-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.focus-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); padding: 4px var(--s3);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--ground-2); color: var(--ink-2);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.focus-chip:hover:not(:disabled) { border-color: var(--select); color: var(--ink); }
.focus-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.focus-chip b { font-variant-numeric: tabular-nums; color: var(--ink-4); font-weight: 600; }
.focus-clear { border-style: dashed; }
.focus-why { color: var(--ink-3); max-width: 90ch; }
.focus-why b { color: var(--ink-2); }


.focus-hint {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--ink-3);
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3); background: var(--ground-2);
}
.focus-hint b { color: var(--ink-2); }



.panel-title { font-size: var(--ex-h2); font-weight: 640; letter-spacing: -0.01em; }
.panel-head { padding: var(--s3) var(--s4); }
.panel > .grid-root { border-top: 0; }
.pane-scroll { max-height: 60vh; overflow: auto; }




.inspector {
  position: sticky; top: 120px; display: grid; gap: var(--s4);
  background: var(--panel); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: var(--s4);
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.inspector-head h2 { font-size: var(--ex-h2); font-weight: 650; }
.inspector-path { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.scope-recovery-path { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.inspector-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.inspector-actions > * {
  flex: 0 1 auto; width: auto; max-width: 100%; white-space: normal;
}
.inspector.inspector-empty { position: static; max-height: none; align-content: start; }

.metricgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); overflow: hidden;
}
.metricgrid > div { background: var(--panel-2); padding: var(--s3); display: grid; gap: 2px; }
.metricgrid b { font-size: 1.1rem; font-weight: 670; font-variant-numeric: tabular-nums; }
.metricgrid span { font-size: var(--fs-xxs); color: var(--ink-3); letter-spacing: 0.03em; }
.inspector .metricgrid.complexity-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metricgrid.hotspot-metrics { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.stats.stats-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.stats-three > :nth-child(3):last-child { grid-column: 1 / -1; }
.inspector-badges { align-items: center; }
.attention-badge { color: var(--ink); }


.population-summary { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.population-scope {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2);
  color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45;
}
.population-scope + .population-scope {
  padding-left: var(--s4); border-left: 1px solid var(--rule-strong);
}
.population-scope b {
  color: var(--ink); font-size: var(--fs-xxs); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.population-note {
  flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45;
}
.legend-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px var(--s3); }
.attention-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: 0; padding: 0; list-style: none;
}
.attention-legend-item {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--ink-2); font-size: var(--fs-xs);
}
.attention-legend-item b { color: var(--ink); font-weight: 660; }
.attention-shape[data-shape="diamond"] { border-radius: 1px; transform: rotate(45deg) scale(0.82); }
.attention-shape[data-shape="square"] { border-radius: 1px; }
.attention-shape[data-shape="circle"] { border-radius: 50%; }
.attention-shape[data-shape="triangle"] { border-radius: 0; clip-path: polygon(50% 4%, 98% 96%, 2% 96%); }


@media (max-width: 1080px) {
  .inspector {
    position: fixed; inset: auto 0 0 0; top: auto; height: 86vh;
    max-height: none; border-radius: var(--radius) var(--radius) 0 0;
    z-index: 60; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
  }
  .inspector[data-sheet="closed"] { display: none; }
  .inspector.inspector-empty {
    position: static; inset: auto; height: auto; max-height: none;
    border-radius: var(--radius); box-shadow: none;
  }
}
@media (max-width: 480px) {
  .inspector .metricgrid {
    --metric-cell-min: 104px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--metric-cell-min)), 1fr));
  }
  .inspector .metricgrid.hotspot-metrics { --metric-cell-min: 132px; }
  .inspector .metricgrid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .inspector .stats,
  .inspector .inspector-metric-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .population-scope + .population-scope {
    flex-basis: 100%; padding-left: 0; border-left: 0;
  }
}



.map { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: var(--s4); }
.map a {
  text-decoration: none; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s2); align-content: start;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.map a:hover { border-color: var(--select-dim); transform: translateY(-2px); }
.map b { font-size: 1.3rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.map em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-2); }
.map small { color: var(--ink-4); font-size: var(--fs-xs); }




.mode-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.mode-card {
  display: grid; gap: var(--s2); align-content: start; text-decoration: none;
  padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.mode-card:hover { border-color: var(--select-dim); }
.mode-card[aria-current="page"] { border-color: var(--select); background: var(--select-wash); }
.mode-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.mode-card h2 { font-size: var(--ex-h2); font-weight: 650; }
.mode-card .mode-count { font-size: 1.25rem; font-weight: 690; font-variant-numeric: tabular-nums; }
.mode-card p { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }



.sequence { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); }
.sequence b { color: var(--ink); font-weight: 620; }
.sequence span[aria-hidden] { color: var(--ink-4); }



.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--s3); }
.glossary div { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--s3); background: var(--panel); display: grid; gap: 4px; }
.glossary code { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.glossary p { font-size: var(--fs-xs); color: var(--ink-2); }



.synthetic-banner {
  border: 1px solid var(--st-refused);
  background: repeating-linear-gradient(135deg, rgba(255,117,148,0.07) 0 10px, transparent 10px 20px);
  border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s2);
}



.load-failure {
  border: 1px solid var(--st-partial); background: rgba(243, 182, 74, 0.06);
  border-radius: var(--radius); padding: var(--s5); display: grid; gap: var(--s3); max-width: 62ch;
}
.load-failure h1, .load-failure h2 { font-size: var(--ex-h1); font-weight: 650; }
.load-failure code {
  font-family: var(--mono); font-size: var(--fs-xs); display: block;
  background: var(--ground-2); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: var(--s2) var(--s3);
}


main#view:focus, main#view:focus-visible { outline: none; }



.surface-root[hidden] { display: none; }
.surface-backdrop {
  position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: rgba(3, 7, 10, 0.72);
}
.detail-close { flex: none; }
.stage-switch { gap: var(--s2); }
.stage-button, .trace-tab {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--ground-2); color: var(--ink-2); padding: 6px var(--s3);
  font: inherit; font-size: var(--fs-xs);
}
.stage-button[aria-selected="true"], .trace-tab[aria-selected="true"] {
  border-color: var(--select); color: var(--ink); background: var(--select-wash);
}

.trace-drawer {
  position: fixed; z-index: 90; inset: 0 0 0 auto; width: min(560px, 44vw);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--panel); border: 0; border-left: 1px solid var(--rule-strong);
  box-shadow: -24px 0 56px rgba(0, 0, 0, 0.55); color: var(--ink);
}
#trace-surface-root .surface-backdrop { z-index: 85; }
.trace-head, .trace-foot { padding: var(--s4); border-bottom: 1px solid var(--rule); }
.trace-head { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.trace-foot { border-top: 1px solid var(--rule); border-bottom: 0; }
.trace-tabs { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.trace-body { overflow-y: auto; padding: var(--s4); display: grid; gap: var(--s4); }
.trace-sec { display: grid; gap: var(--s3); }
.trace-sec h3 { font-size: var(--ex-h2); }
.digest { overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--fs-xs); }

.swatch[data-attention="high_attention"] { background: var(--att-high); }
.swatch[data-attention="moderate_attention"] { background: var(--att-moderate); }
.swatch[data-attention="low_attention"] { background: var(--att-low); }
.swatch[data-attention="unclassified"] { background: var(--att-unclassified); }
.privacy-dot.is-present { background: var(--st-partial); }
.privacy-dot.is-absent { background: var(--measured-dim); }
.refusal-copy { flex: 1; }
.projection-disclosure {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--ground-2); color: var(--ink-2);
}
.projection-disclosure > summary {
  cursor: pointer; padding: var(--s3) var(--s4); font-size: var(--fs-xs);
}
.projection-disclosure > summary b { color: var(--ink); }
.projection-disclosure > .projection { margin: 0 var(--s3) var(--s3); }

@media (max-width: 1080px) {
  
  body[data-detail-open], body[data-trace-open] {
    overflow-x: visible;
    overflow-y: clip;
    overscroll-behavior: contain;
  }
  .inspector { z-index: 60; }
  .trace-drawer {
    inset: 0; width: 100vw; height: 100dvh; border-left: 0;
  }
}

@media (max-width: 960px) {
  
  .rail-list { display: flex; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .rail-sub { display: flex; flex: none; }
  .rail a { min-height: 40px; }
}

@media (max-width: 640px) {
  .subjectbar-inner { gap: var(--s3); padding-inline: var(--s4); }
  .subject-id { flex: 1 1 100%; }
  .focus-chip, .detail-close, .trace-tab, .stage-button { min-height: 40px; }
  .inspector { width: 100%; max-width: 100vw; min-width: 0; }
  .inspector > *, .trace-drawer > * { min-width: 0; }
  .inspector-head { flex-wrap: wrap; }
  .inspector-head > * { min-width: 0; max-width: 100%; }
  .inspector .mono, .digest, .inspector-path, .focus-label {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
  }
}

@media (forced-colors: active) {
  .rail a[aria-current="page"], .stage-button[aria-selected="true"],
  .trace-tab[aria-selected="true"], .plot-svg:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}