/* ==========================================================================
   V1.2 — the visual intelligence layer.

   Everything here exists to replace reading, not to decorate it: a chain of
   nodes instead of a paragraph describing a sequence, a bracket instead of a
   sentence saying the guarantee sits outside the stack, a symbol instead of a
   colour doing the work alone.
   ========================================================================== */

/* ------------------------------------------------------------------ icons */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}
.icon-muted { color: var(--text-muted); }
.icon.flip { transform: rotate(180deg); }
.icon-gold  { color: var(--accent-text); }
.icon-green { color: var(--green); }

/* Icons sitting next to a label share its baseline rather than its box.
   min-width lets a long title wrap instead of squeezing the symbol out. */
.with-icon { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.with-icon > *:not(.icon) { min-width: 0; }

/* ------------------------------------------------------- chains and paths */
/* One grammar for "this leads to that", used by the Overview model, the
   journey detail, and every financing route. */
/* Never wrapped: a wrapped chain leaves an arrow pointing at the end of a
   line, which reads as a broken diagram. It stays on one row until there is
   not enough width, then becomes a column. */
.chain {
  display: flex; flex-wrap: nowrap; align-items: stretch;
}
.chain-node {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s4) var(--s4) var(--s4) 0;
}
.chain-node-head { display: flex; align-items: center; gap: 8px; color: var(--green); }
.chain-label {
  font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.chain-value {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.45; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.chain-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.chain-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--line-strong); padding: 0 var(--s3);
  transition: color var(--t) var(--ease);
}
.chain:hover .chain-arrow { color: var(--sage); }

/* The Overview model: the same grammar, tightened. */
.model {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s3) 0;
}
.model .chain-node { padding: var(--s3) var(--s3) var(--s3) 0; }
.model .chain-arrow { padding: 0 var(--s2); }
.model .chain-value { font-size: var(--fs-sm); }
.model-start .chain-node-head { color: var(--accent-text); }

/* Seven nodes need more room than three, so the model turns vertical sooner. */
@media (max-width: 1180px) {
  .model .chain { flex-direction: column; align-items: stretch; }
  .model .chain-node { padding: var(--s3) 0; }
  .model .chain-arrow { padding: 0; justify-content: flex-start; }
  .model .chain-arrow .icon { transform: rotate(90deg); }
}

@media (max-width: 880px) {
  .chain { flex-direction: column; align-items: stretch; }
  .chain-node { min-width: 0; padding: var(--s3) 0; }
  .chain-arrow { padding: 0; justify-content: flex-start; }
  .chain-arrow .icon { transform: rotate(90deg); }
}

/* ------------------------------------------------------------ at a glance */
/* Four or five signals, answered before any prose starts. */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: var(--s6) 0;
}
.glance-cell {
  padding: var(--s4) var(--s5) var(--s4) 0;
  display: flex; flex-direction: column; gap: 5px;
  border-right: 1px solid var(--hairline);
}
.glance-cell:last-child { border-right: 0; }
.glance-label {
  font-size: 0.5938rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.glance-value {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.45; font-weight: 500;
  display: flex; align-items: flex-start; gap: 7px;
}
.glance-value .icon { margin-top: 2px; }
.glance-value > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.glance-value .icon { color: var(--green); }
.glance-negative .glance-value { color: var(--text-soft); }
.glance-negative .glance-value .icon { color: var(--text-muted); }

@media (max-width: 620px) {
  .glance { grid-template-columns: 1fr 1fr; }
  .glance-cell { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: var(--s4); }
  .glance-cell:nth-last-child(-n+1) { border-bottom: 0; }
}

/* --------------------------------------------------------------- callouts */
/* A learning point, not an alert. Thin rail, one symbol, one sentence. */
.callout {
  display: flex; align-items: flex-start; gap: var(--s4);
  border-left: 2px solid var(--accent);
  padding: var(--s3) 0 var(--s3) var(--s5);
  margin: var(--s5) 0;
}
.callout .icon { color: var(--accent-text); margin-top: 1px; }
.callout-body { min-width: 0; }
.callout-claim {
  font-family: var(--serif); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.006em; display: block; margin-bottom: 3px;
}
.callout p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.callout-quiet { border-left-color: var(--line-strong); }
.callout-quiet .icon { color: var(--text-muted); }

/* --------------------------------------------------------- journey as flow */
.journey-flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.journey-node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: var(--s3) 4px var(--s3);
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted);
  transition: color var(--t) var(--ease);
}
.journey-node:hover { color: var(--text); }

/* The rail runs behind the markers, drawn per node so it stops at the ends. */
.journey-node::before,
.journey-node::after {
  content: ""; position: absolute; top: calc(var(--s3) + 18px); height: 1.5px;
  background: var(--line); z-index: 0;
}
.journey-node::before { left: 0; right: 50%; }
.journey-node::after  { left: 50%; right: 0; }
.journey-node:first-child::before,
.journey-node:last-child::after { background: transparent; }
/* The rail behind you reads as travelled; the rail ahead stays quiet. */
.journey-node.is-past::before,
.journey-node.is-past::after,
.journey-node.is-active::before { background: var(--line-strong); }
.journey-node.is-future::before,
.journey-node.is-future::after { background: var(--hairline); }

.journey-marker {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page); border: 1px solid var(--line);
  color: var(--text-muted);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease);
}
.journey-node:hover .journey-marker { border-color: var(--line-strong); color: var(--text-soft); }
.journey-node.is-past .journey-marker { color: var(--sage); }
/* The selected node has to be unmistakable at a glance across the rail: a dark
   fill, a gold mark, and a ring that separates it from its neighbours. */
.journey-node.is-active .journey-marker {
  background: var(--deep); border-color: var(--deep); color: var(--gold);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.journey-node.is-future .journey-marker { border-color: var(--hairline); opacity: 0.82; }
.journey-node.is-future .journey-marker .icon { opacity: 0.75; }
.journey-name-node {
  font-family: var(--serif); font-size: var(--fs-sm); font-weight: 600;
  text-align: center; line-height: 1.25; color: inherit;
}
.journey-node.is-active .journey-name-node { color: var(--text); font-weight: 700; }
.journey-node.is-future .journey-name-node { color: var(--text-muted); }

/* A milestone is a decision, not a phase: square the marker off. */
.journey-node[data-milestone="true"] .journey-marker { border-radius: var(--radius-sm); }

/* The one distinction the whole product turns on, drawn on the rail between
   the two nodes it separates rather than announced in a box. */
.journey-break {
  position: absolute; top: calc(var(--s3) + 8px); left: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page); color: var(--accent-text);
  z-index: 2;
}
.journey-break .icon { stroke-width: 1.9; }

/* Nine nodes in one row stop being readable well before the layout breaks, and
   a meeting-room tablet is exactly where that matters. Two rows of five keeps
   the labels legible without turning the lifecycle into a list. */
@media (min-width: 721px) and (max-width: 1080px) {
  .journey-flow {
    grid-auto-flow: row dense;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--s4);
  }
  .journey-node::before, .journey-node::after { display: none; }
  .journey-node {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: var(--s3) var(--s2);
  }
  .journey-node.is-active { border-color: var(--deep); background: var(--panel-alt); }
  .journey-break { top: 4px; left: 4px; }
}

@media (max-width: 720px) {
  .journey-flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .journey-node { flex-direction: row; align-items: center; gap: var(--s4); padding: 9px 0; }
  .journey-node::before { left: calc(var(--s4) - 1px); right: auto; top: 0; bottom: 50%; width: 1px; height: auto; }
  .journey-node::after  { left: calc(var(--s4) - 1px); right: auto; top: 50%; bottom: 0; width: 1px; height: auto; }
  .journey-name-node { text-align: left; }
  .journey-break { top: -10px; left: 8px; }
  .journey-node { min-height: 44px; }
}

/* ---------------------------------------------------------- status ladder */
.track { margin-bottom: var(--s6); }
.track-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.track-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; }
.track-node { display: flex; flex-direction: column; gap: 7px; align-items: center; padding-bottom: var(--s2); }
.track-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--page);
}
.track-node.is-reached .track-dot { background: var(--green); border-color: var(--green); }
.track-node.is-implied .track-dot { border-color: var(--sage); }
.track-node.is-unknown .track-dot { border-style: dashed; }
.track-name { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; max-width: 96px; line-height: 1.35; }
.track-node.is-reached .track-name { color: var(--text); font-weight: 600; }
.track-link { flex: 0 0 26px; height: 1px; background: var(--line); margin-top: 5px; }
.track-link.is-passed { background: var(--sage); }
.track-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s3); line-height: 1.5; }

@media (max-width: 620px) {
  .track-nodes { flex-direction: column; align-items: flex-start; }
  .track-node { flex-direction: row; gap: var(--s3); align-items: center; }
  .track-name { text-align: left; max-width: none; }
  .track-link { width: 1px; height: 14px; flex: none; margin: 0 0 0 5px; }
}

/* ---------------------------------------------------- capital stack cover */
/* The guarantee is not a tranche, so it is not drawn as one: it sits outside
   the column, bracketed to the layers it actually protects. */
/* Each layer is its own grid row, so the cover can be bracketed to exactly the
   rows it protects instead of floating beside the column. */
.stack-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  column-gap: var(--s5); row-gap: 3px; align-items: stretch;
}
.stack-grid > .stack-layer { grid-column: 1; }
.stack-cover {
  position: relative;
  grid-column: 2;
  padding: var(--s3) 0 var(--s3) var(--s5);
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
  cursor: pointer; border: 0; background: none; text-align: left;
}
/* The bracket is the argument: it points at what the cover actually protects. */
.stack-cover::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 9px; border: 1px solid var(--accent-line); border-right: 0;
  border-radius: 4px 0 0 4px;
  transition: border-color var(--t) var(--ease);
}
.stack-cover-label {
  font-size: 0.5938rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-text);
  display: flex; align-items: center; gap: 6px;
}
.stack-cover-name { font-family: var(--serif); font-size: var(--fs-sm); font-weight: 600; }
.stack-cover-amount { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-muted); }
.stack-cover.is-active::before { border-color: var(--gold); border-width: 1.5px; border-right: 0; }
.stack-cover.is-active .stack-cover-name { color: var(--accent-text); }
.stack-cover:hover::before { border-color: var(--ochre); }
/* A cover that names no layer gets no bracket: an unanchored bracket would
   claim a protection the content never declared. */
.stack-cover[data-linked="0"]::before { border-color: transparent; }
.stack-cover[data-linked="0"] { align-self: start; }
/* A second bracket for the same cover repeats the name, not the money. */
.stack-cover[data-continued="1"] .stack-cover-label { opacity: 0.55; }

.stack-direction {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 0.5938rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
  writing-mode: vertical-rl;
}
.stack-rails { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s3); }
.stack-rail {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  color: var(--text-muted); padding: var(--s2) 0;
}
.stack-rail-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .stack-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .stack-cover { padding-left: var(--s4); }
  .stack-rails { grid-template-columns: minmax(0, 1fr); }
  .stack-rail { display: none; }
}

/* ------------------------------------------------------- financing routes */
.route-path { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: var(--s4); }
.route-step {
  flex: 1 1 0; min-width: 128px;
  display: flex; flex-direction: column; gap: 5px;
  padding-right: var(--s4);
}
.route-step-label {
  font-size: 0.5938rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.route-step-value { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.45; }
.route-step-value a { color: var(--text); font-weight: 600; text-decoration: none; }
.route-step-value a:hover { text-decoration: underline; text-underline-offset: 3px; }
.route-step .icon { color: var(--sage); }
.route-step-verify .icon { color: var(--warn); }

@media (max-width: 700px) {
  .route-path { flex-direction: column; }
  .route-step { padding: var(--s3) 0 0; }
  .route-path .chain-arrow { justify-content: flex-start; padding: 0; }
  .route-path .chain-arrow .icon { transform: rotate(90deg); }
}

/* ------------------------------------------------------------ five lenses */
.lens-mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--green);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dimension:hover .lens-mark { border-color: var(--sage); }
.dimension:nth-child(4) .lens-mark,
.dimension:nth-child(5) .lens-mark { color: var(--accent-text); border-color: var(--accent-line); }

/* --------------------------------------------------------- see connections */
.connections { display: flex; flex-direction: column; gap: var(--s3); }
.connection {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-soft);
  padding: var(--s3) 0; border-top: 1px solid var(--hairline);
}
.connection:first-child { border-top: 0; }
.connection .icon { color: var(--sage); }
.connection-verb { font-size: var(--fs-xs); color: var(--text-muted); }
.connection a { color: var(--text); font-weight: 600; text-decoration: none; }
.connection a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A drawn connection must never make weak evidence look stronger. */
.connection .fit { margin-left: auto; }

/* ------------------------------------------------------------- timelines */
.tl { list-style: none; position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: var(--s5); }
.tl-mark {
  position: absolute; left: -30px; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page); border: 1px solid var(--line);
  color: var(--text-muted);
}
.tl-item[data-kind="contracted"] .tl-mark { color: var(--green); border-color: var(--sage); }
.tl-item[data-kind="operational"] .tl-mark { color: var(--ok); border-color: var(--ok); }
.tl-item[data-kind="did-not-happen"] .tl-mark { color: var(--stop); border-style: dashed; border-color: var(--stop); }
.tl-label { font-size: var(--fs-sm); font-weight: 600; }
.tl-item[data-kind="did-not-happen"] .tl-label { color: var(--stop); }
.tl-when { font-size: var(--fs-xs); color: var(--text-muted); }
.tl-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-top: 3px; max-width: var(--measure); }

/* --------------------------------------------------------- empty states */
.state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding: var(--s6) 0;
  color: var(--text-muted);
}
.state .icon { color: var(--line-strong); }
.state-title { font-size: var(--fs-base); color: var(--text-soft); font-weight: 600; }
.state p { font-size: var(--fs-sm); margin: 0; max-width: 46ch; }

/* ------------------------------------------------ icons inside chrome */
.nav a { display: flex; align-items: center; gap: 10px; }
.nav a .icon { color: currentColor; opacity: 0.72; transition: opacity var(--t) var(--ease); }
.nav a:hover .icon, .nav a.is-active .icon { opacity: 1; }

.palette-item .icon { color: var(--text-muted); }
.palette-item.is-cursor .icon, .palette-item:hover .icon { color: var(--green); }
.palette-action .icon { color: var(--accent-text); }

.rel-list a { align-items: center; }
.rel-list .icon { color: var(--text-muted); opacity: 0.7; }

.claim-type { display: inline-flex; align-items: center; gap: 6px; }
.legend-item b { display: flex; align-items: center; gap: 7px; }

.detail-title-row { display: flex; align-items: center; gap: var(--s4); }
.entity-mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: var(--sunk); color: var(--green);
}
.entity-mark-gold { color: var(--accent-text); }

/* ------------------------------------------------------------ verification */
/* Every scope states its own case. There is no aggregate badge, because a
   record with one checked scope and one unchecked one is not "verified", and
   a single tick at the top would say it was. */
.verify-list { display: flex; flex-direction: column; gap: 2px; }
.verify-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--s3); align-items: start;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--line);
  background: var(--panel-alt);
}
.verify-row + .verify-row { border-top: 1px solid var(--line); }
.verify-mark { display: flex; align-items: center; justify-content: center; padding-top: 1px; }
.verify-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.verify-scope { font-size: var(--fs-sm); font-weight: 600; }
.verify-when { font-size: var(--fs-xs); color: var(--text-muted); }
.verify-state { font-weight: 700; letter-spacing: 0.02em; }
.verify-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.verify-source {
  font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; width: fit-content;
}

/* The left edge carries the state, so a column of rows reads as a column of
   states before any of it is read as words. */
.verify-row[data-state="verified"] { border-left-color: var(--ok); }
.verify-row[data-state="verified"] .verify-state { color: var(--ok); }
.verify-row[data-state="ageing"]   { border-left-color: var(--gold); }
.verify-row[data-state="ageing"] .verify-state { color: var(--accent-text); }
.verify-row[data-state="stale"]    { border-left-color: var(--ochre); }
.verify-row[data-state="stale"] .verify-state { color: var(--warn); }
.verify-row[data-state="unverified"] { border-left-color: var(--line-strong, var(--line)); }
.verify-row[data-state="blocked"]  { border-left-color: var(--ochre); }
.verify-row[data-state="blocked"] .verify-state { color: var(--warn); }
.verify-row[data-state="moved"]    { border-left-color: var(--stop); }
.verify-row[data-state="moved"] .verify-state { color: var(--stop); }

/* ============================================================ context panel */
/* The V1.4 primitive. One shape for a stage, a route, an instrument — so the
   second panel a reader meets is already familiar. */
.ctx {
  border: 1px solid var(--line);
  border-left: 3px solid var(--deep);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s4) var(--s5) var(--s4);
  margin-top: var(--s4);
  animation: fade-in var(--t-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) { .ctx { animation: none; } }

.ctx-head { display: flex; align-items: flex-start; gap: var(--s3); }
.ctx-mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--deep); color: var(--gold);
}
.ctx-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctx-title {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.2; margin: 0;
}
.ctx-lede {
  color: var(--text-soft); max-width: 64ch; margin-top: var(--s3);
  font-size: var(--fs-base); line-height: 1.55;
}

/* Facts, not paragraphs. The label column is narrow and fixed so a column of
   panels lines up and can be scanned down rather than read across. */
.ctx-facts {
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  margin-top: var(--s4); border-top: 1px solid var(--hairline);
}
.ctx-fact { display: contents; }
.ctx-fact dt {
  display: flex; align-items: center; gap: 7px;
  padding: 10px var(--s4) 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.ctx-fact dd {
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5; min-width: 0;
}
.ctx-fact.is-negative dt { color: var(--warn); }
.ctx-fact-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.ctx-fact-list li { position: relative; padding-left: 15px; color: var(--text-soft); }
.ctx-fact-list li::before {
  content: ""; position: absolute; left: 1px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--sage);
}
.ctx-fact.is-negative .ctx-fact-list li::before { background: var(--ochre); border-radius: 1px; }

.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.ctx-action { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); }
.ctx .disclose { margin-top: var(--s4); }

@media (max-width: 640px) {
  .ctx { padding: var(--s4); }
  .ctx-facts { grid-template-columns: minmax(0, 1fr); }
  .ctx-fact dt { border-bottom: 0; padding-bottom: 2px; }
  .ctx-fact dd { padding-top: 0; }
}

/* ------------------------------------------------------------- note strip */
/* A point worth remembering, stated in one line, with the argument behind a
   link rather than printed underneath it. */
.note-strip {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s4);
  background: var(--accent-wash);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--s4) 0;
}
.note-mark { color: var(--accent-text); display: flex; flex: none; }
.note-body { min-width: 0; font-size: var(--fs-sm); line-height: 1.45; }
.note-body b { font-weight: 700; color: var(--text); }
.note-body span { color: var(--text-soft); margin-left: 7px; }
.note-more {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text);
  text-decoration: none; white-space: nowrap;
}
.note-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .note-strip { flex-wrap: wrap; }
  .note-body span { margin-left: 0; display: block; }
  .note-more { margin-left: 0; }
}

/* ----------------------------------------------------------- context strip */
/* The mental model, stated once, quietly. Not breadcrumbs: nothing here is a
   link to where you have been. */
.ctx-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: var(--s3);
  font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; color: var(--text-muted);
}
.ctx-strip-step { white-space: nowrap; }
.ctx-strip-step + .ctx-strip-step::before {
  content: "→"; margin-right: 5px; color: var(--line-strong); font-weight: 400;
}
.ctx-strip-step.is-here { color: var(--accent-text); font-weight: 700; }
.ctx-strip-step.is-past { color: var(--text-soft); }

/* On a narrow screen the context panel is placed inside the rail, directly
   under the node it belongs to. It must span the full width there. */
@media (max-width: 720px) {
  .journey-flow > #stageDetail { grid-column: 1 / -1; margin: 0 0 var(--s4); }
  .journey-flow > #stageDetail .ctx { margin-top: var(--s2); }
}