@robotaccomplice/architext 1.0.0

package/docs/architext/src/styles.css

@@ -0,0 +1,1475 @@
+:root {
+  color-scheme: dark;
+  --bg: #0c0e11;
+  --surface: #111316;
+  --panel: #1a1c1f;
+  --panel-2: #1e2023;
+  --panel-3: #282a2d;
+  --ink: #e2e2e6;
+  --muted: #b9cacb;
+  --dim: #849495;
+  --line: #3b494b;
+  --line-strong: #849495;
+  --blue: #00dbe9;
+  --green: #2ff801;
+  --yellow: #fed639;
+  --red: #ffb4ab;
+  --purple: #9f8cff;
+  --cyan: #00dbe9;
+  --orange: #fed639;
+  --pink: #ff9db7;
+  --shadow: none;
+  --font-headline: "Hanken Grotesk", "Arial Narrow", Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-family: var(--font-body);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button,
+select,
+input {
+  color: var(--ink);
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 0;
+}
+
+button,
+select {
+  cursor: pointer;
+}
+
+button:hover,
+button:focus,
+select:hover,
+select:focus,
+input:focus {
+  border-color: var(--blue);
+  outline: 1px solid rgba(0, 219, 233, 0.32);
+  outline-offset: 1px;
+}
+
+.app {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr) 390px;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 8px;
+  padding: 8px;
+  overflow: hidden;
+}
+
+.app.left-collapsed {
+  grid-template-columns: 52px minmax(0, 1fr) 390px;
+}
+
+.app.right-collapsed {
+  grid-template-columns: 320px minmax(0, 1fr) 52px;
+}
+
+.app.left-collapsed.right-collapsed {
+  grid-template-columns: 52px minmax(0, 1fr) 52px;
+}
+
+.app.diagram-focused {
+  grid-template-columns: 52px minmax(0, 1fr) 52px;
+}
+
+.topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+
+.topbar h1,
+.topbar p,
+.diagram-header h2,
+.diagram-header p,
+.steps h2,
+.steps p,
+.details h2,
+.details p {
+  margin: 0;
+}
+
+.topbar > div:first-child {
+  min-width: 0;
+}
+
+.topbar > div:first-child p:not(.eyebrow) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topbar h1 {
+  font-family: var(--font-headline);
+  font-size: 22px;
+  letter-spacing: -0.02em;
+}
+
+.project-title-line,
+.diagram-title-line {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.project-title-line p,
+.diagram-title-line p {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topbar p,
+.diagram-header p,
+.steps p,
+.details p,
+.muted {
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.eyebrow {
+  color: var(--blue);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.topbar-actions button,
+.topbar-actions select {
+  min-height: 36px;
+  padding: 7px 10px;
+}
+
+.mode-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-content: flex-end;
+}
+
+.mode-tabs button {
+  min-width: 74px;
+  padding: 7px 9px;
+  border-color: transparent;
+  border-bottom-color: var(--line);
+  color: var(--muted);
+  background: transparent;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.05em;
+}
+
+.mode-tabs button.active {
+  border-color: transparent;
+  border-bottom-color: var(--blue);
+  color: var(--ink);
+  background: var(--panel-2);
+}
+
+.left-nav,
+.diagram-area,
+.details {
+  position: relative;
+  min-height: 0;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.diagram-area {
+  overflow: hidden;
+}
+
+.left-nav {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.diagram-area {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.details {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.left-nav {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.panel-rail {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  user-select: none;
+}
+
+.side-toggle {
+  position: absolute;
+  z-index: 20;
+  top: 16px;
+  width: 24px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border-radius: 0;
+  border: 1px solid var(--line);
+  color: var(--blue);
+  background: var(--surface);
+  box-shadow: none;
+  font-family: var(--font-mono);
+  font-weight: 900;
+  line-height: 1;
+}
+
+.side-toggle:hover {
+  background: var(--panel-3);
+  box-shadow: inset 0 0 0 1px rgba(0, 219, 233, 0.25);
+}
+
+.side-toggle::after {
+  position: absolute;
+  top: 50%;
+  min-width: max-content;
+  padding: 4px 6px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  color: var(--ink);
+  background: var(--bg);
+  box-shadow: none;
+  content: attr(data-tooltip);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition: opacity 0.12s ease;
+}
+
+.side-toggle:hover::after {
+  opacity: 1;
+}
+
+.left-side-toggle {
+  right: -12px;
+}
+
+.app.left-collapsed .left-side-toggle {
+  right: -12px;
+}
+
+.right-side-toggle {
+  left: -12px;
+}
+
+.app.right-collapsed .right-side-toggle {
+  left: -12px;
+}
+
+.left-side-toggle::after {
+  left: 36px;
+}
+
+.right-side-toggle::after {
+  right: 36px;
+}
+
+.panel-head {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.panel-head h2 {
+  margin: 0 0 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.panel-head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.panel-head input {
+  width: 100%;
+  min-height: 30px;
+  padding: 6px 8px;
+  border-width: 0 0 1px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.flow-list {
+  overflow: auto;
+}
+
+.flow-list {
+  padding: 8px;
+}
+
+.entity-list {
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.entity-list h3 {
+  margin: 8px 0 5px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.flow-card,
+.entity-card {
+  width: 100%;
+  display: grid;
+  gap: 4px;
+  margin-bottom: 6px;
+  padding: 8px;
+  text-align: left;
+  background: var(--panel-2);
+}
+
+.entity-card.passive {
+  cursor: default;
+}
+
+.flow-card.active,
+.entity-card.active {
+  border-color: var(--blue);
+  border-left: 4px solid var(--blue);
+  background: #102024;
+}
+
+.flow-card strong,
+.entity-card strong,
+.step-card strong,
+.node-card strong,
+.mini-record strong {
+  display: block;
+}
+
+.flow-card strong,
+.entity-card strong,
+.step-card strong,
+.node-card strong,
+.c4-node strong,
+.mini-record strong {
+  font-family: var(--font-mono);
+}
+
+.flow-card span,
+.entity-card span,
+.node-card span,
+.step-card span {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.diagram-area {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.diagram-header,
+.steps {
+  padding: 8px 10px;
+}
+
+.diagram-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.diagram-header h2 {
+  font-family: var(--font-headline);
+  font-size: 20px;
+  letter-spacing: -0.02em;
+}
+
+.diagram-header p {
+  font-size: 13px;
+}
+
+.diagram-controls {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.diagram-controls button {
+  min-height: 28px;
+  padding: 4px 7px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.diagram-controls span {
+  min-width: 44px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-align: center;
+}
+
+.legend {
+  position: relative;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.legend summary {
+  min-height: 28px;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  color: var(--blue);
+  list-style: none;
+  cursor: pointer;
+}
+
+.legend summary::-webkit-details-marker {
+  display: none;
+}
+
+.legend > div {
+  position: absolute;
+  z-index: 15;
+  right: 0;
+  top: calc(100% + 4px);
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  gap: 7px 10px;
+  min-width: 260px;
+  padding: 10px;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+}
+
+.legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 0;
+  background: var(--muted);
+}
+
+.diagram-viewport {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.map-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background:
+    radial-gradient(circle, rgba(59, 73, 75, 0.5) 1px, transparent 1px),
+    var(--bg);
+  background-size: 32px 32px;
+}
+
+.diagram-canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.flow-lines {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.flow-edge,
+.relationship-edge {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.flow-edge:focus,
+.relationship-edge:focus {
+  outline: none;
+}
+
+.flow-line {
+  fill: none;
+  stroke: var(--blue);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.9;
+}
+
+.structural-line {
+  fill: none;
+  stroke: var(--muted);
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 6 6;
+  opacity: 0.85;
+}
+
+.relationship-label {
+  fill: var(--muted);
+  paint-order: stroke;
+  stroke: #0b0f16;
+  stroke-width: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 800;
+  text-anchor: middle;
+}
+
+.relationship-edge.selected .structural-line,
+.relationship-edge.selected .c4-relationship {
+  stroke: var(--blue);
+}
+
+.flow-lines marker path {
+  fill: var(--blue);
+}
+
+#arrowhead-selected path,
+#sequence-arrowhead-selected path {
+  fill: var(--blue);
+}
+
+.flow-edge.selected .flow-line {
+  stroke: var(--blue);
+}
+
+.flow-edge.selected .flow-step-dot {
+  fill: var(--blue);
+}
+
+.flow-step-dot {
+  fill: var(--blue);
+  stroke: #002022;
+  stroke-width: 1;
+}
+
+.flow-step-label {
+  fill: #002022;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 900;
+  text-anchor: middle;
+  pointer-events: none;
+}
+
+.sequence-shell {
+  background:
+    radial-gradient(circle, rgba(59, 73, 75, 0.5) 1px, transparent 1px),
+    var(--bg);
+  background-size: 32px 32px;
+}
+
+.sequence-participant-rail {
+  position: sticky;
+  z-index: 8;
+  top: 0;
+  height: 58px;
+  min-width: 100%;
+  background: rgba(12, 14, 17, 0.94);
+  border-bottom: 1px solid var(--line);
+}
+
+.sequence-participant-card {
+  position: absolute;
+  top: 9px;
+  height: 38px;
+  display: grid;
+  gap: 1px;
+  padding: 5px 7px;
+  text-align: center;
+  background: var(--panel-2);
+  border-color: var(--line-strong);
+}
+
+.sequence-participant-card strong {
+  overflow: hidden;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sequence-participant-card span {
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+.sequence-canvas {
+  display: block;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.sequence-participant {
+  fill: var(--panel-2);
+  stroke: var(--line-strong);
+  stroke-width: 1.5;
+}
+
+.sequence-title {
+  fill: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+  text-anchor: middle;
+}
+
+.sequence-kind,
+.sequence-data {
+  fill: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-anchor: middle;
+}
+
+.lifeline {
+  stroke: var(--line-strong);
+  stroke-width: 1.5;
+  stroke-dasharray: 4 5;
+}
+
+.sequence-message {
+  cursor: pointer;
+}
+
+.sequence-line {
+  stroke: var(--blue);
+  stroke-width: 1.8;
+  stroke-linecap: round;
+}
+
+.sequence-message.async .sequence-line {
+  stroke-dasharray: 7 5;
+}
+
+.sequence-message.persistence .sequence-line {
+  stroke: var(--green);
+}
+
+.sequence-message.response .sequence-line {
+  stroke: var(--cyan);
+}
+
+.sequence-canvas marker path {
+  fill: var(--blue);
+}
+
+#sequence-arrowhead-response path {
+  fill: var(--cyan);
+}
+
+#sequence-arrowhead-persistence path {
+  fill: var(--green);
+}
+
+#sequence-arrowhead-selected path {
+  fill: var(--blue);
+}
+
+.sequence-step-dot {
+  fill: var(--blue);
+  stroke: #002022;
+  stroke-width: 1;
+}
+
+.sequence-step-label {
+  fill: #002022;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 900;
+  text-anchor: middle;
+}
+
+.sequence-action {
+  fill: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: #0b0f16;
+  stroke-width: 3px;
+}
+
+.sequence-message.selected .sequence-line {
+  stroke: var(--blue);
+}
+
+.sequence-message.selected .sequence-step-dot {
+  fill: var(--blue);
+}
+
+.lane-column {
+  position: absolute;
+  top: 14px;
+  border-left: 1px dashed var(--line);
+  pointer-events: none;
+}
+
+.lane-column h3 {
+  margin: 0;
+  padding-left: 8px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.node-card {
+  position: absolute;
+  display: grid;
+  align-content: center;
+  gap: 2px;
+  padding: 5px 7px;
+  text-align: left;
+  opacity: 0.45;
+  border-left-width: 3px;
+  overflow: hidden;
+  font-family: var(--font-mono);
+}
+
+.node-card strong,
+.c4-node strong {
+  font-size: 12px;
+  line-height: 1.15;
+}
+
+.node-card strong {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.node-card.in-flow {
+  opacity: 1;
+  border-color: var(--blue);
+}
+
+.node-card.selected {
+  background: #102024;
+  box-shadow: inset 0 0 0 1px rgba(0, 219, 233, 0.45);
+}
+
+.node-card.actor {
+  border-left-color: var(--pink);
+}
+
+.node-card.software-system {
+  border-left-color: var(--cyan);
+}
+
+.node-card.client {
+  border-left-color: var(--blue);
+}
+
+.node-card.service,
+.node-card.worker {
+  border-left-color: var(--purple);
+}
+
+.node-card.queue {
+  border-left-color: var(--orange);
+}
+
+.node-card.data-store {
+  border-left-color: var(--green);
+}
+
+.node-card.external-service {
+  border-left-color: var(--muted);
+}
+
+.c4-shell {
+  background: var(--bg);
+}
+
+.c4-canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.c4-boundary {
+  position: absolute;
+  inset: 54px 34px 34px 34px;
+  border: 1px dashed rgba(0, 219, 233, 0.26);
+  border-radius: 0;
+  pointer-events: none;
+}
+
+.c4-boundary span {
+  position: absolute;
+  top: -12px;
+  left: 18px;
+  padding: 2px 8px;
+  color: var(--cyan);
+  background: var(--bg);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.c4-lane-label {
+  position: absolute;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.c4-node {
+  position: absolute;
+  display: grid;
+  gap: 3px;
+  padding: 8px;
+  text-align: left;
+  border-color: var(--line-strong);
+  border-left-width: 3px;
+  background: var(--panel-2);
+}
+
+.c4-node.selected {
+  border-color: var(--blue);
+  background: #102024;
+}
+
+.c4-node small {
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.25;
+}
+
+.c4-relationship {
+  fill: none;
+  stroke: var(--muted);
+  stroke-width: 1.4;
+  stroke-dasharray: 6 6;
+  opacity: 0.76;
+}
+
+.c4-lines marker path {
+  fill: var(--muted);
+}
+
+#c4-arrowhead-selected path {
+  fill: var(--blue);
+}
+
+.c4-label {
+  fill: var(--ink);
+}
+
+.edge-strip {
+  position: sticky;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 8px;
+  border-top: 1px solid var(--line);
+  background: rgba(12, 14, 17, 0.95);
+  overflow: auto;
+}
+
+.edge-chip,
+.edge-count {
+  flex: 0 0 auto;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 0;
+  padding: 3px 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.edge-chip {
+  color: var(--blue);
+  background: transparent;
+}
+
+.edge-chip.active {
+  color: #002022;
+  background: var(--blue);
+  border-color: var(--blue);
+}
+
+.steps {
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.steps.collapsed {
+  padding-block: 6px;
+}
+
+.steps-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.steps-title-line {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.steps-head h2 {
+  flex: 0 0 auto;
+  font-family: var(--font-headline);
+  font-size: 18px;
+}
+
+.steps-title-line p {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.steps-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.step-list {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.step-card {
+  flex: 0 0 190px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  gap: 3px 8px;
+  min-height: 36px;
+  padding: 6px;
+  text-align: left;
+}
+
+.step-card strong {
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+}
+
+.step-card span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.step-card.active {
+  border-color: var(--blue);
+  background: #102024;
+}
+
+.step-number {
+  grid-row: 1 / span 2;
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 0;
+  color: #002022;
+  background: var(--blue);
+  font-family: var(--font-mono);
+  font-weight: 900;
+}
+
+.step-card .step-number {
+  color: #001719;
+  background: #7df4ff;
+}
+
+.details {
+  padding: 0;
+}
+
+.detail-content {
+  height: 100%;
+  overflow: auto;
+  padding: 0 12px 12px;
+}
+
+.detail-sticky {
+  position: sticky;
+  z-index: 5;
+  top: 0;
+  padding: 12px 0 8px;
+  border-bottom: 1px solid rgba(0, 219, 233, 0.32);
+  background:
+    linear-gradient(90deg, rgba(0, 219, 233, 0.11), transparent 34%),
+    rgba(26, 28, 31, 0.98);
+}
+
+.detail-content h2 {
+  margin: 4px 0 6px;
+  font-family: var(--font-headline);
+  font-size: 20px;
+  letter-spacing: -0.02em;
+}
+
+.badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 8px 0;
+}
+
+.detail-index {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.detail-index a {
+  flex: 0 0 auto;
+  --section-accent: var(--blue);
+  padding: 3px 6px;
+  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--line));
+  color: color-mix(in srgb, var(--section-accent) 70%, var(--muted));
+  background: color-mix(in srgb, var(--section-accent) 5%, transparent);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-decoration: none;
+}
+
+.detail-index a:hover,
+.detail-index a:focus {
+  color: var(--ink);
+  border-color: var(--section-accent, var(--blue));
+  background: color-mix(in srgb, var(--section-accent, var(--blue)) 12%, transparent);
+}
+
+.detail-index a[href="#summary"] {
+  --section-accent: var(--blue);
+}
+
+.detail-index a[href="#runtime"] {
+  --section-accent: var(--green);
+}
+
+.detail-index a[href="#interfaces"] {
+  --section-accent: var(--cyan);
+}
+
+.detail-index a[href="#data"] {
+  --section-accent: var(--purple);
+}
+
+.detail-index a[href="#security"] {
+  --section-accent: var(--yellow);
+}
+
+.detail-index a[href="#observability"] {
+  --section-accent: #7df4ff;
+}
+
+.detail-index a[href="#risks"] {
+  --section-accent: var(--red);
+}
+
+.detail-index a[href="#decisions"] {
+  --section-accent: #b9cacb;
+}
+
+.detail-index a[href="#verification"] {
+  --section-accent: var(--green);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  width: fit-content;
+  min-height: 18px;
+  margin-right: 4px;
+  margin-top: 4px;
+  padding: 2px 5px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  color: var(--muted);
+  background: var(--panel-2);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.badge::before {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  content: "";
+}
+
+.badge.implemented,
+.badge.low {
+  color: var(--green);
+  border-color: rgba(47, 248, 1, 0.45);
+}
+
+.badge.partial,
+.badge.medium {
+  color: var(--yellow);
+  border-color: rgba(254, 214, 57, 0.45);
+}
+
+.badge.planned,
+.badge.high {
+  color: var(--yellow);
+  border-color: rgba(254, 214, 57, 0.45);
+}
+
+.badge.critical {
+  color: var(--red);
+  border-color: rgba(255, 180, 171, 0.45);
+}
+
+.detail-section {
+  --section-accent: var(--line-strong);
+  position: relative;
+  padding: 10px 0 10px 10px;
+  border-top: 1px solid var(--line);
+  border-left: 2px solid color-mix(in srgb, var(--section-accent) 60%, transparent);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent) 7%, transparent), transparent 42%);
+}
+
+.detail-section#summary {
+  --section-accent: var(--blue);
+}
+
+.detail-section#runtime {
+  --section-accent: var(--green);
+}
+
+.detail-section#interfaces {
+  --section-accent: var(--cyan);
+}
+
+.detail-section#data {
+  --section-accent: var(--purple);
+}
+
+.detail-section#security {
+  --section-accent: var(--yellow);
+}
+
+.detail-section#observability {
+  --section-accent: #7df4ff;
+}
+
+.detail-section#risks {
+  --section-accent: var(--red);
+}
+
+.detail-section#decisions {
+  --section-accent: #b9cacb;
+}
+
+.detail-section#verification {
+  --section-accent: var(--green);
+}
+
+.detail-section h3 {
+  margin: 0 0 6px;
+  color: var(--section-accent);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.detail-section h3::before {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 7px;
+  background: currentColor;
+  content: "";
+}
+
+.detail-section ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.detail-section li {
+  margin: 3px 0;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.text-link {
+  display: block;
+  width: 100%;
+  margin: 4px 0;
+  padding: 6px;
+  text-align: left;
+}
+
+.mini-record,
+.data-class {
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--panel-2);
+}
+
+.mini-record p,
+.data-class p {
+  margin-top: 6px;
+}
+
+.path-pair {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 6px;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.path-pair button {
+  padding: 7px;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.filter-row button {
+  min-height: 24px;
+  padding: 3px 6px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.filter-row button.active {
+  color: #002022;
+  border-color: var(--blue);
+  background: var(--blue);
+}
+
+.loading,
+.fatal {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.fatal {
+  place-items: start;
+}
+
+.fatal pre {
+  max-width: 1100px;
+  overflow: auto;
+  padding: 16px;
+  border: 1px solid var(--red);
+  border-radius: 0;
+  color: var(--red);
+  background: #1d1014;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@media (max-width: 900px) {
+  .app,
+  .app.left-collapsed,
+  .app.right-collapsed,
+  .app.left-collapsed.right-collapsed {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto minmax(480px, 1fr) auto;
+    overflow: auto;
+  }
+
+  .left-nav,
+  .diagram-area,
+  .details {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .left-nav,
+  .details {
+    max-height: 420px;
+  }
+
+  .side-toggle {
+    display: none;
+  }
+
+  .topbar,
+  .diagram-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .mode-tabs,
+  .legend {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 760px) {
+  .app,
+  .app.left-collapsed,
+  .app.right-collapsed,
+  .app.left-collapsed.right-collapsed {
+    padding: 8px;
+    gap: 8px;
+  }
+
+  .app.left-collapsed,
+  .app.right-collapsed,
+  .app.left-collapsed.right-collapsed {
+    grid-template-rows: auto auto minmax(520px, 1fr) auto;
+  }
+
+  .app.left-collapsed .left-nav,
+  .app.right-collapsed .details {
+    min-height: 48px;
+    max-height: 56px;
+  }
+
+  .side-toggle {
+    display: grid;
+  }
+
+  .details {
+    max-height: 70vh;
+  }
+
+  .step-card {
+    flex-basis: 260px;
+  }
+
+  .diagram-controls {
+    flex-wrap: wrap;
+  }
+}