/* =============================================================
   KAIROS·1 — Sequence Chamber · interior
   =============================================================
   The chamber is composed of two surfaces:

     LEFT  (the inquiry)  — Socratic dialogue. Question
                            arrives slowly. Reader responds.
                            Observations accumulate downward.

     RIGHT (the topology) — living execution graph. Nodes
                            appear as actions are named.
                            Transitions thicken as confirmation
                            arrives. Friction warms toward
                            heat-amber. The governing constraint
                            pulses on the ambient breath.

   The atmosphere is observatory: graphite ground, thin lines,
   precise type, slow easings. No bounce. No snap. No badge.

   ============================================================= */

/* =============================================================
   CHAMBER SHELL
   ============================================================= */
.chamber {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--gr-1);
}

/* Top — chamber identity & telemetry */
.c-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 20px 48px;
  border-bottom: 1px solid var(--rule);
  background: var(--gr-1);
  opacity: 0;
  animation: k-fade 1800ms 200ms ease-out forwards;
}
.c-top .c-breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-top .c-breadcrumb a {
  color: var(--ink-3);
  transition: color var(--medium);
}
.c-top .c-breadcrumb a:hover { color: var(--heat); }
.c-top .c-breadcrumb .sep { color: var(--ink-4); }

.c-top .c-name {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.c-top .c-name em { color: var(--heat); font-style: normal; }

.c-top .c-telemetry {
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.c-top .c-telemetry .tcell { display: inline-flex; align-items: center; gap: 8px; }
.c-top .c-telemetry .tcell em { color: var(--ink-2); font-style: normal; font-weight: 500; }
.c-top .c-telemetry .tcell.phase em { color: var(--heat); }

/* =============================================================
   CHAMBER BODY — split: inquiry rail | topology canvas
   ============================================================= */
.c-body {
  display: grid;
  grid-template-columns: minmax(360px, 38%) 1fr;
  min-height: 0;
  position: relative;
}

@media (max-width: 980px) {
  .c-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* =============================================================
   LEFT — THE INQUIRY
   ============================================================= */
.c-inquiry {
  border-right: 1px solid var(--rule);
  background: var(--gr-1);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  position: relative;
  opacity: 0;
  animation: k-fade 2400ms 1200ms ease-out forwards;
}

.c-inquiry-stream {
  overflow-y: auto;
  padding: 56px 44px 80px;
  scroll-behavior: smooth;
}
.c-inquiry-stream::-webkit-scrollbar { width: 4px; }
.c-inquiry-stream::-webkit-scrollbar-track { background: transparent; }
.c-inquiry-stream::-webkit-scrollbar-thumb { background: var(--rule); }

.c-inquiry-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.c-inquiry-eyebrow em { color: var(--heat); font-style: normal; }

.c-inquiry-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-2);
  margin-bottom: 56px;
  line-height: 1.45;
  letter-spacing: 0.002em;
}

/* Each exchange in the stream */
.c-turn {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(8px);
  animation: c-arrive 1600ms ease-out forwards;
}

.c-turn-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.c-turn-label em { color: var(--heat); font-style: normal; }
.c-turn[data-kind="observation"] .c-turn-label em { color: var(--tele); }
.c-turn[data-kind="settle"] .c-turn-label em { color: var(--ink-2); }

/* Runtime utterance — large serif, the voice of the chamber */
.c-turn[data-role="runtime"] .c-turn-body {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.38;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.005em;
}
.c-turn[data-role="runtime"][data-kind="observation"] .c-turn-body {
  font-style: italic;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.55;
  border-left: 1px solid var(--tele-2);
  padding-left: 22px;
}
.c-turn[data-role="runtime"][data-kind="settle"] .c-turn-body {
  font-style: italic;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.55;
  border-left: 1px solid var(--heat-3);
  padding-left: 22px;
}

/* Reader utterance — quieter, italic, indented as response */
.c-turn[data-role="reader"] .c-turn-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  padding-left: 22px;
  border-left: 1px solid var(--ink-4);
  white-space: pre-wrap;
}

/* The doctrinal observation, once shown, weathers into
   architectural inscription — dimmer, no animation, like
   text carved into rock. Refinement 07. */
.c-turn[data-kind="doctrine-aged"] .c-turn-body {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-4);
  font-size: 16px;
  line-height: 1.55;
  border-left: 1px solid var(--ink-4);
  padding-left: 22px;
  opacity: 0.7;
  letter-spacing: 0.005em;
}
.c-turn[data-kind="doctrine-aged"] .c-turn-label em {
  color: var(--ink-3);
}

/* The chamber's thinking indicator — two slow dots */
.c-thinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 8px;
}
.c-thinking .dot {
  width: 4px; height: 4px;
  background: var(--heat);
  border-radius: 50%;
  animation: c-pulse 2800ms ease-in-out infinite;
}
.c-thinking .dot:nth-child(2) { animation-delay: 600ms; }

/* =============================================================
   CYCLE DECISION — the hybrid-sovereignty affordance
   =============================================================
   Appears only under the latest `settle` turn from the runtime.
   The runtime observes structural stillness; the reader decides.
   Intentionally hesitant typography — italic, dotted underline,
   no button styling. The reader is being invited, not asked.
   ============================================================= */
.c-cycle-decision {
  margin-top: 22px;
  padding-left: 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.005em;
  opacity: 0;
  animation: c-decision-arrive 1800ms 600ms ease-out forwards;
}
@keyframes c-decision-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.c-cycle-close {
  background: transparent;
  border: 0;
  font: inherit;
  font-family: var(--serif);
  font-style: italic;
  color: var(--heat-2);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px dotted var(--heat-3);
  transition: color var(--medium), border-bottom-color var(--medium);
}
.c-cycle-close em { font-style: italic; font-weight: 400; }
.c-cycle-close:hover {
  color: var(--heat);
  border-bottom-color: var(--heat);
}
.c-cycle-or {
  color: var(--ink-4);
  font-size: 12.5px;
}

/* =============================================================
   EMPTY-CYCLE DARK MARKER — silence on fresh entry
   =============================================================
   On the first paint of a fresh chamber (no prior turns), the
   page holds in darkness for ~1500ms before the chamber
   emerges. The reader's first impression is space, not content.
   ============================================================= */
.chamber.is-fresh-entry {
  animation: c-fresh-hold 2400ms ease-out forwards;
}
@keyframes c-fresh-hold {
  0%   { opacity: 0; }
  60%  { opacity: 0; }   /* held darkness */
  100% { opacity: 1; }
}

/* Composer — fixed at the bottom of the inquiry rail */
.c-composer {
  border-top: 1px solid var(--rule);
  background: var(--gr-1);
  padding: 22px 44px 26px;
  position: relative;
}
.c-composer::before {
  content: "";
  position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--gr-1));
  pointer-events: none;
}

.c-composer-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.c-composer-hint .pacing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-4);
}

.c-composer-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
.c-textarea {
  width: 100%;
  background: var(--gr-2);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  padding: 14px 18px;
  resize: none;
  min-height: 60px;
  max-height: 200px;
  outline: none;
  transition: border-color var(--medium);
}
.c-textarea:focus { border-color: var(--heat-3); }
.c-textarea::placeholder { color: var(--ink-4); font-style: italic; }
.c-textarea:disabled { opacity: 0.4; }

.c-send {
  background: transparent;
  border: 1px solid var(--ink-4);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 16px 22px;
  cursor: pointer;
  transition: all var(--medium);
  white-space: nowrap;
}
.c-send:hover:not(:disabled) {
  border-color: var(--heat);
  color: var(--heat);
}
.c-send:disabled { opacity: 0.3; cursor: not-allowed; }
.c-send .arrow { font-family: var(--serif); font-style: italic; font-size: 13px; margin-left: 8px; }

/* =============================================================
   RIGHT — THE TOPOLOGY
   ============================================================= */
.c-topology {
  position: relative;
  background:
    radial-gradient(ellipse 800px 600px at 50% 40%, rgba(217,148,102,0.018) 0%, transparent 70%),
    var(--gr-1);
  overflow: hidden;
  opacity: 0;
  animation: k-fade 2400ms 1600ms ease-out forwards;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.c-topology-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 36px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.c-topology-head em { color: var(--ink-2); font-style: normal; }
.c-topology-head .right { display: flex; gap: 22px; }

.c-topology-stage {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The empty-state pre-topology — appears before any actions exist */
.c-topology-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.c-topology-empty .glyph {
  width: 88px; height: 88px;
  border: 1px dashed var(--ink-4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: c-pulse-slow 5500ms ease-in-out infinite;
}
.c-topology-empty .glyph::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--heat);
  opacity: 0.6;
  animation: c-pulse-slow 5500ms ease-in-out infinite;
}
.c-topology-empty .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.c-topology-empty .hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-3);
  max-width: 360px;
  line-height: 1.65;
}

/* When only landmarks exist (no active topology yet), let the
   landmark SVG sit above the empty-state without disturbing it. */
.c-topology-svg-landmarks-only {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* =============================================================
   LANDMARKS — faded remains of prior cycles
   =============================================================
   Per the meta-layer commitment: landmarks are not labels in a
   sidebar. They are terrain. They sit at the periphery of the
   active topology, dimmer than the current cycle, dashed to
   suggest aged structure. Tiered by recency. They breathe on
   the slow ambient clock but never demand attention.
   ============================================================= */
.landmark .landmark-circle {
  fill: var(--gr-1);
  stroke: var(--ink-3);
  stroke-width: 0.7;
  stroke-dasharray: 2 3;
  transition: stroke var(--medium), fill var(--medium);
}
.landmark .landmark-id {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ink-4);
  pointer-events: none;
}
.landmark .landmark-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  text-anchor: middle;
  fill: var(--ink-4);
  opacity: 0;
  transition: opacity var(--medium);
  pointer-events: none;
}
.landmark:hover .landmark-label { opacity: 0.85; }
.landmark:hover .landmark-circle { stroke: var(--heat-2); fill: var(--gr-2); }
.landmark:hover .landmark-id { fill: var(--heat-2); }

/* Geological tiers — the older a landmark, the dimmer it sits. */
.landmark-tier-1 { opacity: 0.55; animation: landmark-breath var(--rhythm-breath) ease-in-out infinite; }
.landmark-tier-2 { opacity: 0.38; animation: landmark-breath var(--rhythm-breath) ease-in-out infinite; animation-delay: 800ms; }
.landmark-tier-3 { opacity: 0.24; animation: landmark-breath var(--rhythm-breath) ease-in-out infinite; animation-delay: 1600ms; }
.landmark-tier-4 { opacity: 0.15; animation: landmark-breath var(--rhythm-breath) ease-in-out infinite; animation-delay: 2400ms; }
.landmark:hover { opacity: 0.95 !important; animation-play-state: paused; }

@keyframes landmark-breath {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}

/* =============================================================
   LINEAGE THREADS — attention-revealed recurrence
   =============================================================
   Per Refinement 04: threads appear ONLY when the reader
   hovers/focuses the source action. Default state is invisible
   so the topology remains calm. Recurrence surfaces from
   underground only when the reader rests attention.

   The peak opacity is set per-thread via --lineage-peak,
   based on the lineage score.
   ============================================================= */
.lineage-thread {
  fill: none;
  stroke: var(--heat-2);
  stroke-width: 0.6;
  stroke-dasharray: 3 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1);
}
.lineage-thread.is-active {
  opacity: var(--lineage-peak, 0.5);
  filter: drop-shadow(0 0 3px rgba(217,148,102,0.35));
  animation: lineage-pulse var(--rhythm-lineage) ease-in-out infinite;
}
@keyframes lineage-pulse {
  0%, 100% { stroke-opacity: 0.7; }
  50%      { stroke-opacity: 1; }
}

/* When a node is focused, brighten its outline subtly. The
   threads do most of the work; the node need not announce. */
.tn-action.is-focused .tn-action-circle {
  stroke: var(--heat-2);
  filter: drop-shadow(0 0 6px rgba(217,148,102,0.35));
}
.pt-node.is-focused .pt-node-circle {
  stroke: var(--heat-2);
  filter: drop-shadow(0 0 6px rgba(217,148,102,0.35));
}

/* =============================================================
   UNRESOLVED PRESENCE — cycles closed without governing surfaced
   =============================================================
   When a prior cycle has no governing limit named, its landmark
   carries an "unresolved" treatment: broken outline, a slower
   uneven breath, faint heat tint. The reader senses unfinished
   structure haunting the chamber.
   ============================================================= */
.landmark.is-unresolved .landmark-circle {
  stroke: var(--heat-3);
  stroke-dasharray: 1.5 4.5;
  stroke-width: 0.5;
}
.landmark.is-unresolved .landmark-id { fill: var(--heat-3); }
.landmark.is-unresolved {
  animation: landmark-haunt var(--rhythm-haunt) ease-in-out infinite !important;
}
@keyframes landmark-haunt {
  0%, 100% { filter: brightness(0.85); }
  35%      { filter: brightness(1.4); }
  60%      { filter: brightness(1.1); }
  80%      { filter: brightness(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .landmark-tier-1, .landmark-tier-2, .landmark-tier-3, .landmark-tier-4,
  .lineage-thread { animation: none !important; }
}

/* =============================================================
   COMPOSER — SILENCE STATES
   ============================================================= */
.c-composer-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.c-rest-trigger {
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-4);
  letter-spacing: 0.005em;
  text-transform: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--medium);
  border-bottom: 1px dotted transparent;
}
.c-rest-trigger:hover:not(:disabled) {
  color: var(--heat-2);
  border-bottom-color: var(--heat-3);
}
.c-rest-trigger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Held composer — the chamber is asking the reader to sit before responding */
.c-composer-held {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-4);
  letter-spacing: 0.005em;
  opacity: 0;
  animation: c-held-arrive 1200ms 200ms ease-out forwards;
}
@keyframes c-held-arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Rest state — the chamber holds. Composer recedes; topology remains. */
.c-composer.is-resting {
  padding: 0;
  background: transparent;
  border-top: 0;
  position: relative;
}
.c-composer.is-resting::before { display: none; }

.c-rest-state {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  justify-items: center;
  align-items: center;
  padding: 52px 44px 56px;
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 480px 200px at 50% 50%, rgba(217,148,102,0.025) 0%, transparent 70%),
    var(--gr-1);
  cursor: pointer;
  outline: none;
  text-align: center;
  animation: c-rest-arrive 1400ms ease-out forwards;
}
@keyframes c-rest-arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.c-rest-state:focus-visible { outline: 1px solid var(--heat-3); outline-offset: -2px; }
.c-rest-glyph {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  position: relative;
  animation: c-pulse-slow var(--breath) ease-in-out infinite;
}
.c-rest-glyph::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--heat);
  opacity: 0.55;
  animation: c-pulse-slow var(--breath) ease-in-out infinite;
}
.c-rest-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  line-height: 1.55;
}
.c-rest-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* When the chamber is at rest, the topology breathes more slowly
   and the inquiry stream dims slightly. The composer is replaced
   by the rest state. Nothing happens. */
.chamber.is-resting .c-inquiry-stream { opacity: 0.7; transition: opacity var(--slow); }
.chamber.is-resting .c-topology { opacity: 0.95; }

.c-topology-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Topology footer — read-out of the current diagnostic state */
.c-topology-foot {
  padding: 14px 36px 22px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.c-topology-foot .cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-topology-foot .cell .label { color: var(--ink-4); }
.c-topology-foot .cell .value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-2);
}
.c-topology-foot .cell .value em { color: var(--heat); font-style: normal; }
.c-topology-foot .cell.high .value { color: var(--heat); }

/* =============================================================
   TOPOLOGY SVG ELEMENTS
   ============================================================= */
/* Outcome node — top of the graph */
.tn-outcome {
  fill: var(--gr-2);
  stroke: var(--ink-3);
  stroke-width: 1;
  transition: all var(--slow);
}
.tn-outcome-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}
.tn-outcome-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  fill: var(--ink-4);
  text-anchor: middle;
  text-transform: uppercase;
}

/* Action node */
.tn-action-circle {
  fill: var(--gr-2);
  stroke: var(--ink-3);
  stroke-width: 1;
  transition: stroke var(--slow), stroke-width var(--slow), fill var(--slow), r var(--slow), filter var(--slow);
}
.tn-action-text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}
.tn-action-id {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.32em;
  fill: var(--ink-4);
  text-anchor: middle;
}
.tn-action-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  fill: var(--ink-2);
  text-anchor: middle;
}
.tn-action-completion {
  font-family: var(--serif);
  font-style: italic;
  font-size: 10.5px;
  fill: var(--ink-3);
  text-anchor: middle;
}
.tn-action.is-governing .tn-action-circle {
  stroke: var(--heat);
  stroke-width: 1.4;
  fill: var(--heat-4);
  filter: drop-shadow(0 0 12px rgba(217,148,102,0.5));
  animation: c-pulse-slow var(--rhythm-breath) ease-in-out infinite;
}
.tn-action.is-governing .tn-action-id {
  fill: var(--heat);
}
.tn-action.is-avoided .tn-action-circle {
  stroke-dasharray: 3 3;
  stroke: var(--ink-4);
}

/* Transition arc — friction-encoded */
.tt-arc {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 0.8;
  transition: stroke var(--slow), stroke-width var(--slow);
}
.tt-arrow {
  fill: var(--ink-4);
  transition: fill var(--slow);
}
/* Stability bands: low stability → thicker, warmer */
.tt-arc[data-stab="high"]   { stroke: var(--ink-3); stroke-width: 0.9; }
.tt-arc[data-stab="mid"]    { stroke: var(--ink-2); stroke-width: 1.2; }
.tt-arc[data-stab="low"]    { stroke: var(--heat-2); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(217,148,102,0.4)); }
.tt-arc[data-stab="break"]  { stroke: var(--heat);   stroke-width: 2.2; stroke-dasharray: 4 3; filter: drop-shadow(0 0 8px rgba(217,148,102,0.6)); }

.tt-arrow[data-stab="high"]  { fill: var(--ink-3); }
.tt-arrow[data-stab="mid"]   { fill: var(--ink-2); }
.tt-arrow[data-stab="low"]   { fill: var(--heat-2); }
.tt-arrow[data-stab="break"] { fill: var(--heat); }

.tt-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: var(--ink-4);
  text-anchor: middle;
}
.tt-label[data-stab="break"] { fill: var(--heat); }

/* The "friction halo" around a high-friction action */
.tn-action-halo {
  fill: none;
  stroke: var(--heat);
  stroke-width: 0.6;
  opacity: 0;
  transition: opacity var(--slow), r var(--slow);
}
.tn-action.is-friction .tn-action-halo {
  opacity: 0.5;
  animation: c-halo 4400ms ease-in-out infinite;
}
.tn-action.is-friction .tn-action-circle {
  stroke: var(--heat-2);
}

/* =============================================================
   ACTIONS BAR — small affordances at the bottom of the inquiry
   for marking, resetting, exporting (lightweight in v1)
   ============================================================= */
.c-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 44px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.c-actions a, .c-actions button {
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--ink-4);
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: 0.32em;
  transition: color var(--medium);
}
.c-actions a:hover, .c-actions button:hover { color: var(--heat); }

/* Center cell of the footer — strata link + error notes */
.c-actions-center {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.c-strata-link {
  background: transparent;
  border: 0;
  font-family: var(--mono) !important;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px dotted var(--ink-4);
  transition: all var(--medium);
}
.c-strata-link:hover {
  color: var(--heat) !important;
  border-bottom-color: var(--heat-3);
}
.c-strata-link em {
  color: var(--ink-2);
  font-style: normal;
  font-weight: 500;
}
.c-strata-link:hover em { color: var(--heat); }
.c-strata-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes c-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes c-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
@keyframes c-pulse-slow {
  0%, 100% { opacity: 0.55; transform: scale(1); transform-origin: center; }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes c-halo {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  .c-top { padding: 14px 20px; grid-template-columns: 1fr 1fr; gap: 12px; }
  .c-top .c-name { display: none; }
  .c-inquiry { border-right: 0; border-bottom: 1px solid var(--rule); }
  .c-inquiry-stream { padding: 36px 24px 64px; }
  .c-composer { padding: 18px 24px 22px; }
  .c-topology-head { padding: 16px 20px 0; }
  .c-topology-stage { min-height: 420px; }
  .c-topology-foot { padding: 12px 20px 18px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .c-actions { padding: 10px 24px; flex-wrap: wrap; gap: 12px; }
  .c-turn[data-role="runtime"] .c-turn-body { font-size: 20px; }
}

/* Phones: the telemetry row (phase · actions · transitions · spine) is
   wider than the screen, and 1fr grid tracks grow to fit it, which widened
   the whole chamber past the viewport. Let the tracks shrink and wrap the
   header onto two rows. */
@media (max-width: 640px) {
  .c-body { grid-template-columns: minmax(0, 1fr); }
  .c-body > * { min-width: 0; }
  .c-top { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px; }
  .c-top .c-breadcrumb { letter-spacing: 0.22em; gap: 8px; flex-wrap: wrap; }
  .c-top .c-telemetry {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 14px;
    letter-spacing: 0.16em;
  }
  .c-top .c-telemetry .c-spine-glyph { margin-left: auto; }
  .c-inquiry-stream { padding: 28px 18px 48px; }
  .c-composer { padding: 16px 18px 20px; }
  .c-turn, .c-turn-body { overflow-wrap: anywhere; }
  .c-composer-wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .c-composer-wrap > button { justify-self: end; }
  .c-topology-head { flex-wrap: wrap; gap: 8px 16px; }
  .c-composer-hint { flex-direction: column; align-items: flex-start; gap: 6px; letter-spacing: 0.28em; }
  .c-composer-actions { flex-wrap: wrap; gap: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tn-action.is-governing .tn-action-circle,
  .c-topology-empty .glyph,
  .c-topology-empty .glyph::before { animation: none !important; }
}