/* The run: controls, agent network, work log, stage panel; checkpoints; findings; under the hood. */

/* ---------- head of the run section ---------- */
.run-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: .92rem;
  color: var(--text-2);
}
.source-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.source-chip[data-mode="live"] .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.source-chip[data-mode="custom"] { border-color: color-mix(in srgb, var(--warm) 40%, #fff); color: var(--text); }
.source-chip[data-mode="custom"] .dot { background: var(--warm); box-shadow: 0 0 0 4px var(--warm-soft); }
.fixture-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 900px;
  margin: -24px 0 32px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.6;
}
.fixture-banner .icon { color: var(--cool); margin-top: 3px; }

/* ---------- controls ---------- */
.run-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: sticky;
  top: calc(var(--head-h) + 10px);
  z-index: var(--z-sticky);
  scroll-margin-top: 0;
}
/* masks the strip between the top bar and the stuck controls, so nothing scrolls visibly through it */
.run-controls::before {
  content: "";
  position: absolute;
  inset-inline: -2px;
  bottom: 100%;
  height: 12px;
  background: var(--bg-soft);
}
.rc-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-transport { gap: 8px; }
/* the options: always open on wide screens (the summary is hidden there), a disclosure on phones */
.rc-more { margin-inline-start: auto; }
.rc-more > summary { display: none; list-style: none; cursor: pointer; }
.rc-more > summary::-webkit-details-marker { display: none; }
/* the run instrument (controls, status, network and panel) is wider than the text column at 1440 and
   up, like a figure; the heading and the prose above it stay on the page grid */
@media (min-width: 1440px) {
  .run-controls, .live-status, .run-stage { margin-inline: -80px; }
}
.rc-steps { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; position: relative; }
.rc-steps::before { content: ""; position: absolute; inset-inline: 14px; top: 50%; height: 1px; background: var(--line-2); z-index: 0; }
.rc-steps li { position: relative; z-index: 1; }
.rc-steps button {
  --hue: var(--cool);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--hue) 45%, #fff);
  background: #fff;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 500;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background-color 160ms, border-color 160ms, transform 160ms var(--ease);
}
.rc-steps button[data-cp] { border-radius: var(--radius-xs); transform: rotate(45deg) scale(.82); border-color: var(--warm); color: var(--warm-ink); font-family: var(--f-body); font-weight: 700; }
.rc-steps button[data-cp] > span { transform: rotate(-45deg); }
.rc-steps button[data-blind] { border-style: dashed; }
.rc-steps button.is-done { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 10%, #fff); }
/* white numerals need a deeper fill than the raw hue (stage 3's hue is 4.0:1 against white) */
.rc-steps button[aria-current="step"] { background: color-mix(in srgb, var(--hue) 80%, #000); border-color: color-mix(in srgb, var(--hue) 80%, #000); color: #fff; border-style: solid; }
.rc-steps button[data-cp][aria-current="step"] { background: var(--warm-ink); border-color: var(--warm-ink); color: #fff; }
.rc-steps button:disabled { opacity: .35; }
.rc-steps button:hover:not(:disabled):not([aria-current]) { border-color: var(--hue); }

.live-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--cool-soft);
  color: var(--text);
  font-size: .97rem;
}
.live-status.is-error { background: var(--danger-soft); color: var(--text); }
/* the loading indicator is the signature axis: a hairline with a point travelling along it */
.live-status .spinner {
  position: relative;
  flex: none;
  width: 44px;
  height: 8px;
  background: linear-gradient(var(--line-2), var(--line-2)) center / 100% 1px no-repeat;
}
.live-status .spinner::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cool);
  animation: travel 1.2s var(--ease) infinite alternate;
}
@keyframes travel { from { inset-inline-start: 0; } to { inset-inline-start: calc(100% - 6px); } }
@media (prefers-reduced-motion: reduce) {
  .live-status .spinner::after { animation: none; inset-inline-start: calc(50% - 3px); }
}
.err-detail { flex-basis: 100%; font-size: .85rem; color: var(--text-2); }
.err-detail summary { cursor: pointer; }
.err-detail code { display: block; margin-top: 4px; white-space: pre-wrap; word-break: break-word; text-align: left; }

/* ---------- stage layout ---------- */
.run-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}
.run-side { position: sticky; top: calc(var(--head-h) + 104px); display: grid; gap: 14px; }

/* Phones and tablets: a compact toolbar that sticks under the top bar, full width. Row 1: back, play,
   next, and the options disclosure; row 2: the step pills, scrolling sideways. The network comes first,
   then the panel, then the work log (hidden while it is empty). */
@media (max-width: 1023px) {
  .run-stage { grid-template-columns: minmax(0, 1fr); }
  .run-side { display: contents; }
  .network-wrap { order: 1; }
  .run-panel { order: 2; }
  .log { order: 3; }
  .log:has(.log-body:empty) { display: none; }
  .run-controls {
    position: sticky;
    top: var(--head-h);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "transport more" "steps steps";
    gap: 8px 10px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter);
    border-radius: 0;
    border-inline: 0;
    box-shadow: 0 6px 16px rgba(22, 24, 29, .05);
  }
  .run-controls::before { display: none; }
  .rc-transport { grid-area: transport; }
  .rc-transport .icon-btn-main { width: 48px; height: 48px; }
  .rc-more { grid-area: more; justify-self: end; margin: 0; }
  .rc-more > summary { display: inline-flex; }
  .rc-more[open] > summary { background: var(--cool-soft); border-color: var(--cool); color: var(--cool-ink); }
  .rc-more[open] .rc-options {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 12px var(--gutter) 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(22, 24, 29, .08);
  }
  .rc-steps {
    grid-area: steps;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 4px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .rc-steps::-webkit-scrollbar { display: none; }
  .rc-steps::before { display: none; }
  .rc-steps li { flex: none; }
  .rc-steps button { width: 44px; height: 44px; }
}

/* ---------- network ---------- */
.network-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px;
}
.network { width: 100%; height: auto; overflow: visible; direction: ltr; }
.net-ring { fill: none; stroke: var(--line-2); stroke-width: 1.25; }
.net-arc { fill: none; stroke: var(--line-2); stroke-width: 1.25; transition: stroke 400ms, stroke-width 400ms; }
.net-arc.is-lit { stroke: var(--hue); stroke-width: 2; }
.net-beam {
  fill: none;
  stroke: var(--hue);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0.1 999.9;
  stroke-dashoffset: 0;
  opacity: 0;
}
.net-beam.is-on { opacity: 1; animation: beam var(--beam-ms, 1500ms) var(--ease) forwards; }
@keyframes beam {
  0% { stroke-dashoffset: 1000; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: 0.1; opacity: 0; }
}
.net-spoke { fill: none; stroke: var(--line); stroke-width: 1.25; transition: stroke 300ms; }
.net-spoke.blind { stroke-dasharray: 4 5; }
.net-spoke.is-open { stroke: color-mix(in srgb, var(--hue) 55%, #fff); stroke-width: 1.6; }
.net-seal rect { fill: #fff; stroke: var(--line-2); stroke-width: 1.2; }
.net-seal .glyph { stroke: var(--text-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.net-seal.is-active rect { stroke: var(--text); }
.net-seal.is-active .glyph { stroke: var(--text); }

.archive .doc { fill: var(--paper); stroke: var(--paper-line); stroke-width: 1.2; }
.archive .doc-line { stroke: rgba(22, 24, 29, .28); stroke-width: 2; stroke-linecap: round; }
.archive .glass { fill: rgba(255, 255, 255, .42); stroke: var(--line-2); stroke-width: 1.2; opacity: 0; transition: opacity 500ms var(--ease); }
.archive .docs-g { transition: filter 500ms; }
.archive .seal-eye { opacity: 0; transition: opacity 400ms; }
.archive .seal-eye .glyph { stroke: var(--text); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.archive .seal-eye circle { fill: #fff; stroke: var(--line-2); stroke-width: 1.2; }
.archive.is-sealed .glass { opacity: 1; }
.archive.is-sealed .docs-g { filter: url(#net-blur); }
.archive.is-sealed .seal-eye { opacity: 1; }
.archive.is-reading .doc { stroke: color-mix(in srgb, var(--warm) 60%, #fff); }
.archive.is-reading .hl-line { opacity: 1; }
.archive .hl-line { stroke: var(--warm); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity 400ms; }
.archive.is-human .doc { stroke: var(--warm); }
/* Label sizes are in viewBox units; the viewBox is cropped to the drawing (network.js), so at 1440 they
   render at about 13-16px. */
.arch-label { font-family: var(--f-body); font-size: 26px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.arch-sub { font-family: var(--f-body); font-size: 21px; fill: var(--text-2); text-anchor: middle; }

.net-node { cursor: pointer; outline: none; transition: opacity 300ms var(--ease); }
.net-node .halo { fill: color-mix(in srgb, var(--hue) 20%, #fff); stroke: none; opacity: 0; transition: opacity 400ms var(--ease); }
.net-node .ring { fill: #fff; stroke: color-mix(in srgb, var(--hue) 50%, #fff); stroke-width: 1.5; transition: fill 400ms, stroke 300ms, stroke-width 300ms; }
.net-node .emblem-g { color: var(--hue); }
.net-node .num-badge circle { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.net-node .num-badge text { font-family: var(--f-mono); font-size: 13px; fill: var(--text-2); text-anchor: middle; dominant-baseline: central; }
.net-node .persona { font-family: var(--f-body); font-weight: 700; font-size: 22px; letter-spacing: .05em; fill: color-mix(in srgb, var(--hue) 78%, #000); }
.net-node .role { font-family: var(--f-body); font-weight: 600; font-size: 24px; fill: var(--text-2); }
.net-node .num-big { display: none; font-family: var(--f-mono); font-size: 30px; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.net-node:hover .ring { stroke: var(--hue); }
.net-node.is-done .ring { stroke: var(--hue); }
.net-node.is-active .ring { fill: color-mix(in srgb, var(--hue) 12%, #fff); stroke: var(--hue); stroke-width: 3.5; }
.net-node.is-active { --medal-bg: color-mix(in srgb, var(--hue) 12%, #fff); }
.net-node.is-active .halo { opacity: 1; }
.net-node.is-active .role { fill: var(--text); }
/* while a step is shown, the agents still ahead of it step back */
.network[data-step] .net-node:not(.is-active):not(.is-done):not(.is-working) { opacity: .45; }
/* live: the agent whose stage is running on the server */
.net-node.is-working .ring { stroke: var(--hue); stroke-width: 3; }
.net-node.is-working .halo { animation: halo-pulse 1.6s ease-in-out infinite; }
@keyframes halo-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.net-beam.is-looping { opacity: 1; animation: beam 1.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .net-node.is-working .halo { animation: none; opacity: 1; fill: none; stroke: var(--hue); stroke-width: 2; stroke-dasharray: 5 5; }
}
.net-node:focus-visible .ring { stroke: var(--cool); stroke-width: 3; stroke-dasharray: 4 3; }
.net-node .blind-tag circle { fill: #fff; stroke: var(--text-2); stroke-width: 1.1; }
.net-node .blind-tag .glyph { stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.net-cp { cursor: pointer; outline: none; }
.net-cp .dia { fill: #fff; stroke: var(--warm); stroke-width: 2; transition: fill 300ms; }
.net-cp text { font-family: var(--f-body); font-size: 23px; font-weight: 700; fill: var(--warm-ink); }
.net-cp.is-done .dia { fill: var(--warm-soft); }
.net-cp.is-active .dia { fill: var(--warm); }
.net-cp:focus-visible .dia { stroke: var(--cool); stroke-width: 3; }

@media (max-width: 700px) {
  .net-node .persona, .net-node .role, .net-node .emblem-g, .net-node .num-badge, .arch-sub { display: none; }
  .net-node .num-big { display: block; }
  .net-cp text { font-size: 28px; }
  .arch-label { font-size: 30px; }
}

/* ---------- work log ---------- */
.log {
  --log-hue: var(--cool);
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px 14px;
  padding-inline-start: 22px;
  min-height: 132px;
  cursor: pointer;
  overflow: hidden;
}
.log::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--log-hue); }
.log-head { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--text-3); margin-bottom: 8px; }
.log-agent { font-family: var(--f-body); font-weight: 700; font-size: .74rem; letter-spacing: .06em; color: color-mix(in srgb, var(--log-hue) 78%, #000); direction: ltr; }
.log-agent.is-cp { direction: rtl; letter-spacing: 0; font-size: .82rem; color: var(--warm-ink); }
.log-body p { margin: 0 0 4px; font-size: .95rem; line-height: 1.55; color: var(--text-2); }
.log-body p:last-child { color: var(--text); }
.caret { display: inline-block; width: 7px; height: 1.05em; margin-inline-start: 2px; vertical-align: -0.15em; background: var(--log-hue); animation: blink 900ms steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- stage panel ---------- */
.run-panel {
  --hue: var(--cool);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(20px, 2.6vw, 34px);
  min-height: 420px;
}
.run-panel:focus { outline: none; }
.pn-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pn-medal {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--hue);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
  color: var(--hue);
}
.pn-medal .emblem { width: 40px; height: 40px; }
.pn-medal.is-cp { border-radius: var(--radius); transform: rotate(45deg) scale(.86); border-color: var(--warm); background: var(--warm-soft); color: var(--warm-ink); }
.pn-medal.is-cp > * { transform: rotate(-45deg); font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; }
.pn-medal.is-idle { border-color: var(--line-2); background: var(--bg-soft); color: var(--text); }
.pn-medal { --medal-bg: color-mix(in srgb, var(--hue) 8%, #fff); }
/* before the first step the medal is the play button itself */
button.pn-medal { padding: 0; font: inherit; cursor: pointer; transition: background-color 160ms, border-color 160ms, color 160ms; }
button.pn-medal.is-idle { background: var(--cool); border-color: var(--cool); color: #fff; }
button.pn-medal.is-idle:hover { background: var(--cool-ink); border-color: var(--cool-ink); }
button.pn-medal .icon { width: 24px; height: 24px; }

/* A stage change is a scene change: the new panel slides in. RTL: forward content enters from the
   left; going back, from the right. No motion with "no animation" or reduced motion. */
.run-panel > * { animation: pn-in 420ms var(--ease) both; }
.run-panel > .pn-block:nth-of-type(2) { animation-delay: 60ms; }
.run-panel > .pn-block:nth-of-type(3) { animation-delay: 120ms; }
.run-panel[data-dir="back"] > * { animation-name: pn-in-back; }
.run-panel.is-still > * { animation: none; }
@keyframes pn-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes pn-in-back { from { opacity: 0; transform: translateX(14px); } }
.cp-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0; }
.cp-turn p { margin: 0; flex: 1 1 260px; }
.pn-kicker { margin: 0; font-size: .88rem; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pn-kicker .persona { font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: .06em; color: color-mix(in srgb, var(--hue) 78%, #000); direction: ltr; }
.pn-head h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); }
.pn-intro { color: var(--text-2); }
.pn-block { margin-top: 26px; }
.pn-block:first-of-type { margin-top: 0; }
.pn-h { display: flex; align-items: center; gap: 9px; font-family: var(--f-body); font-size: 1.02rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.pn-h .icon { color: var(--hue); width: 20px; height: 20px; }
.pn-h .icon.is-blind { color: var(--text); }
.pn-empty { color: var(--text-3); }
.recv-line { margin: 12px 0 8px; color: var(--text-2); font-size: .97rem; }
.out-group { margin-bottom: 18px; }
.out-group-h { font-family: var(--f-body); font-size: .98rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.unit-list { list-style: none; margin: 0; padding: 0; }
.unit-list li { margin-bottom: 10px; }
.unit-list .q { margin-bottom: 2px; }
.unit-why { margin: 0; font-size: .88rem; color: var(--text-3); display: flex; gap: 8px; align-items: baseline; }
.frag-list { display: flex; flex-direction: column; gap: 6px; }
.frag { display: block; padding: 7px 12px; border-radius: var(--radius-xs); background: var(--paper); font-family: var(--f-display); font-size: .95rem; color: var(--text); border-inline-start: 2px solid var(--paper-line); }
.frag-more { font-size: .88rem; color: var(--text-3); }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tag { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.tag-label { font-weight: 700; margin-bottom: 2px; }
.tag-meta { font-size: .84rem; color: var(--text-3); }
.tag details summary { font-size: .86rem; color: var(--cool); cursor: pointer; margin-top: 4px; min-height: 32px; display: flex; align-items: center; }
.pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pair-note { margin: 6px 0 0; font-size: .9rem; color: var(--text-2); }
.summary-counts { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.count-card { flex: 1; min-width: 120px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.count-card strong { display: block; font-family: var(--f-display); font-size: 2rem; line-height: 1.1; }
.count-card span { font-size: .9rem; color: var(--text-2); }
.count-card.ok strong { color: var(--ok); }
.count-card.bad strong { color: var(--danger); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.res { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.res.is-dropped { background: var(--bg-soft); }
.res.is-dropped .pair-b { background: #fff; color: var(--text-2); border: 1px dashed var(--line-2); font-weight: 400; }
.res.is-removed { border-color: var(--warm); box-shadow: inset 0 0 0 1px var(--warm); }
.res-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.res-note { margin: 8px 0 0; font-size: .92rem; color: var(--text-2); }
.axis-block { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.axis-block-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.axis-dim { margin: 10px 0 0; font-size: .95rem; color: var(--text-2); }
.hypo-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hypo-list li { padding: 4px 10px; border-radius: var(--radius-xs); border: 1px dashed var(--line-2); font-size: .88rem; color: var(--text-2); }
.pt-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pt-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; }
.pt-pos { font-family: var(--f-mono); font-size: .78rem; color: var(--warm-ink); background: var(--warm-soft); border-radius: var(--radius-xs); padding: 3px 0; text-align: center; margin-top: 12px; direction: ltr; }
/* the quote card's number, the same number as its dot on the axis above */
.pt-item { grid-template-columns: 28px minmax(0, 1fr); }
.pt-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--warm);
  color: var(--warm-ink);
  font-family: var(--f-mono);
  font-size: .72rem;
  cursor: help;
}
.pt-note { margin: 0; font-size: .88rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cand-list li { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.cand-list p { margin: 4px 0 0; font-size: .92rem; color: var(--text-2); }
.cand-name { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--text); }
.nm-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel-item { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.rel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.rel-note { margin: 6px 0 0; font-size: .94rem; color: var(--text-2); }
.rel-type { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--a8); padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--a8) 9%, #fff); }
[dir="rtl"] .rel-glyph { transform: scaleX(-1); }
.rel-glyph { width: 30px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rel-provisional { font-size: .8rem; font-weight: 600; color: var(--text-2); border: 1px dashed var(--line-2); border-radius: 999px; padding: 1px 9px; }
.axis-name { font-weight: 700; color: var(--text); background: linear-gradient(transparent 62%, var(--warm-soft) 62%); border-radius: 2px; transition: background-color 300ms; }
/* inside running prose a name is a quiet underline, so four names in two lines do not shout; the full
   marker stays on headings and on the checkpoint-B line */
:is(.rel-note, .lp-claim, .lp-analysis, .structure, .s8-structure, .claim-list li, .ms-reflexive p, .callout p) .axis-name {
  background: none;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--warm) 60%, transparent);
}
.axis-name.flash { animation: name-flash 900ms var(--ease); }
@keyframes name-flash { 0% { background-color: #F8D59A; } 100% { background-color: transparent; } }
svg .axis-name { background: none; fill: var(--text); font-family: var(--f-body); }
.to-section { margin-top: 14px; }
.s8-structure { font-size: .97rem; margin-top: 12px; }
.claim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.claim-list li { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); font-family: var(--f-display); font-size: 1.02rem; line-height: 1.6; border-inline-start: 2px solid var(--a9); }
.prov-card { margin-top: 6px; }
.prov-card dl { margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; }
.prov-card dt { font-size: .8rem; color: var(--text-3); }
.prov-card dd { margin: 0; font-size: .92rem; word-break: break-word; }
.layer-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- checkpoints ---------- */
.checkpoint .section-head h2 { max-width: 24ch; }
.cp-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--warm-ink); margin-bottom: 14px; }
.cp-diamond { width: 12px; height: 12px; border-radius: 2px; background: var(--warm); transform: rotate(45deg); }
.cp-warning { font-size: .96rem; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--warm-wash); border-inline-start: 3px solid var(--warm); color: var(--text); }
.cpa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.cpa-col > h3 { display: flex; align-items: baseline; gap: 12px; font-size: 1.35rem; margin-bottom: 16px; }
.cpa-col .n { font-size: 2.4rem; line-height: 1; }
.cpa-kept .n { color: var(--ok); }
.cpa-dropped .n { color: var(--danger); }
.res-remove { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: .94rem; color: var(--text-2); }
.res-remove input { accent-color: var(--warm); }
.cpa-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); margin-top: clamp(28px, 4vw, 44px); }
.voice { padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.voice h3, .voice h4 { display: flex; align-items: center; gap: 9px; font-family: var(--f-body); font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
/* the two voices: a short rule before the heading in the voice's ink, not a coloured top border */
.voice-agent h3 .icon { color: var(--cool); }
.voice-human { background: var(--warm-wash); }
.voice-human h3 .icon, .voice-human h4 .icon { color: var(--warm); }
.voice-agent :is(h3, h4)::before, .voice-human :is(h3, h4)::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--cool);
}
.voice-human :is(h3, h4)::before { background: var(--warm); }
.voice .by { margin-top: 10px; font-size: .84rem; color: var(--text-3); }
.yours { margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.yours > h3 { margin-bottom: 8px; }
.yours .field { margin-top: 16px; }
.setaside-note { margin-top: 14px; }
.live-cp-actions, .cpb-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
@media (max-width: 899px) { .cpa-grid, .cpa-lower { grid-template-columns: minmax(0, 1fr); } }

.nm-axis { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: clamp(18px, 3vw, 32px); margin: 0 0 22px; min-width: 0; }
.nm-axis > legend { font-family: var(--f-mono); font-size: .8rem; color: var(--text-3); padding: 0 8px; }
.nm-def { font-size: 1.02rem; color: var(--text-2); max-width: 46em; }
.nm-current { margin: 14px 0 16px; font-size: 1rem; color: var(--text-2); }
.nm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 16px; font-size: .92rem; color: var(--text-2); }
.nm-status:empty { display: none; }
.nm-status .icon { color: var(--cool); }
.deleted-note { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.deleted-note .icon { color: var(--cool); }
.nm-current .axis-name { font-family: var(--f-display); font-size: 1.3rem; }
.nm-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nm-opt { position: relative; display: block; cursor: pointer; }
.nm-opt > input[type="radio"] { position: absolute; top: 18px; inset-inline-start: 16px; width: 20px; height: 20px; margin: 0; accent-color: var(--warm); cursor: pointer; }
.nm-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px 16px;
  padding-inline-start: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: #fff;
  transition: border-color 160ms, background-color 160ms, box-shadow 160ms;
}
.nm-opt:hover .nm-card { border-color: var(--text-2); }
.nm-opt > input:checked ~ .nm-card, .nm-opt > input:checked + .nm-card { border-color: var(--warm); background: var(--warm-wash); box-shadow: inset 0 0 0 1px var(--warm); }
.nm-name { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.nm-p { font-size: .92rem; color: var(--text-2); line-height: 1.55; }
.nm-custom .tx { margin-top: 10px; }
.nm-custom .nm-card { height: auto; }
@media (max-width: 767px) { .nm-options { grid-template-columns: minmax(0, 1fr); } }

/* ---------- findings ---------- */
.findings-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -20px 0 36px; }
.findings-actions .form-status { flex-basis: 100%; }
.axis-map { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); }
.axis-card { padding: clamp(20px, 3vw, 34px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.axis-card.is-setaside { border-style: dashed; }
.axis-card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 6px; }
.axis-card-h h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin-inline-end: 4px; }
.axis-card-h h3 .axis-name { background: none; }
.axis-def { color: var(--text-2); max-width: 48em; }
.axis-card .axis { margin-top: 20px; }
.brittle-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--text-2); font-size: .94rem; }
.brittle-note .icon { margin-top: 4px; }
.relations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.relations h3 { margin-bottom: 8px; }
.relations .rel-list { margin-top: 16px; }
.structure { margin-top: 14px; font-size: .97rem; }
.rel-svg { width: 100%; height: auto; overflow: visible; }
.rel-svg .edge { stroke: var(--a8); stroke-width: 1.8; fill: none; }
.rel-svg .edge.orthogonal { stroke-dasharray: 6 5; }
.rel-svg .edge.is-provisional { stroke-opacity: .45; }
.rel-svg .etype { font-family: var(--f-body); font-size: 14px; fill: var(--a8); text-anchor: middle; }
@media (max-width: 599px) {
  .rel-svg .axis-name { font-size: 22px; }
  .rel-svg .etype { font-size: 18px; }
  .rel-svg .nid { font-size: 16px; }
}
.rel-figure { margin: 0; }
/* what the marks in the diagram mean */
.rel-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .85rem; color: var(--text-2); }
.rel-legend .lg-item { display: inline-flex; align-items: center; gap: 7px; }
.lg-mark { display: inline-block; flex: none; }
.lg-mark.dashed-circle, .lg-mark.core-circle { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--text); }
.lg-mark.core-circle { border: 2px solid var(--warm); background: var(--warm-soft); }
.lg-mark.dashed-line, .lg-mark.faint-line, .lg-mark.arrow-line { width: 24px; border-top: 1.8px dashed var(--a8); }
.lg-mark.faint-line { border-top-style: solid; opacity: .45; }
.lg-mark.arrow-line { position: relative; border-top-style: solid; }
.lg-mark.arrow-line::after { content: ""; position: absolute; inset-inline-end: -2px; top: -5px; border: 4px solid transparent; border-inline-end: 0; border-inline-start: 7px solid var(--a8); }
.lg-mark.double-line { width: 24px; height: 6px; border-block: 1.8px solid var(--a8); }
.rel-svg .node circle { fill: #fff; stroke: var(--text); stroke-width: 1.5; }
.rel-svg .node.core circle { fill: var(--warm-soft); stroke: var(--warm); stroke-width: 2.5; }
.rel-svg .node.brittle circle { stroke-dasharray: 4 3; }
.rel-svg .nid { font-family: var(--f-mono); font-size: 13px; text-anchor: middle; fill: var(--text-2); }
.rel-svg .axis-name { font-size: 16px; font-weight: 700; text-anchor: middle; }
@media (max-width: 899px) { .relations { grid-template-columns: minmax(0, 1fr); } }

.manuscript {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.ms-kicker { font-size: .9rem; color: var(--text-3); margin-bottom: 10px; }
.ms-title { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.25; margin-bottom: 28px; }
.ms-title .axis-name { background: none; }
.manuscript > h4 { font-size: 1.35rem; margin: 34px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.lp { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; margin-bottom: 26px; }
.lp-tag { font-size: .78rem; font-weight: 700; color: var(--text-3); padding-top: 6px; }
.lp-claim { font-family: var(--f-display); font-size: 1.14rem; line-height: 1.65; color: var(--text); margin: 0; }
.lp-analysis { margin: 0; color: var(--text-2); }
.lp .q { margin: 2px 0; }
.ms-reflexive { margin-top: 30px; padding: 18px 20px; border-radius: var(--radius); background: var(--warm-wash); border-inline-start: 3px solid var(--warm); }
.ms-reflexive h4 { font-size: 1.1rem; margin-bottom: 8px; }
@media (max-width: 599px) {
  .lp { grid-template-columns: minmax(0, 1fr); }
  .lp-tag { padding-top: 10px; }
}

/* ---------- under the hood ---------- */
.run-meta { margin-bottom: 40px; }
.run-meta dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0; }
.run-meta dl > div { padding: 14px 16px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.run-meta dt { font-size: .8rem; color: var(--text-3); }
.run-meta dd { margin: 2px 0 0; font-size: .96rem; word-break: break-word; }
@media (max-width: 599px) { .run-meta dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .run-meta dl > div { padding: 10px 12px; } .run-meta dd { font-size: .88rem; } }
.hood-h { font-size: 1.45rem; margin: 44px 0 16px; }
.hood-sub { color: var(--text-2); max-width: 46em; margin-bottom: 16px; }
.prov { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.prov caption { caption-side: top; text-align: start; padding: 12px 16px; color: var(--text-3); font-size: .86rem; }
.prov th, .prov td { padding: 10px 12px; text-align: start; border-top: 1px solid var(--line); vertical-align: middle; }
.prov thead th { font-size: .8rem; font-weight: 600; color: var(--text-3); background: var(--bg-soft); }
.prov .num { font-family: var(--f-mono); font-size: .8rem; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.prov td .persona { white-space: nowrap; }
.prov .call-n { margin-inline-start: 0; }
/* the numeral in the agent's ink, deepened so small text passes AA on white (the ring keeps the hue) */
.stage-chip { --hue: var(--cool); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--hue); color: color-mix(in srgb, var(--hue) 78%, #000); font-family: var(--f-mono); font-size: .78rem; font-weight: 500; }
.gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gate { padding: 18px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.gate-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.gate-h h4 { font-family: var(--f-body); font-size: 1.05rem; }
.gate > p { font-size: .92rem; color: var(--text-2); }
.gate ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.gate li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); }
.gate li .icon { color: var(--ok); margin-top: 3px; }
.gate li.bad .icon { color: var(--danger); }
.gate li.warn .icon { color: var(--warm); }
.gate-read { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: .8rem; color: var(--text-3); }
.gate-read div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.gate-read dt { font-weight: 600; }
.gate-read dd { margin: 0; word-break: break-word; }
.gate-read code { font-size: .95em; color: var(--text-2); }
.prov-explain { margin-top: 12px; font-size: .92rem; }
@media (max-width: 1023px) { .gates { grid-template-columns: minmax(0, 1fr); } }
.prompts .fold > summary .stage-chip { flex: none; }
.prompts .fold > summary .ttl { display: flex; flex-direction: column; line-height: 1.3; }
.prompts .fold > summary .ttl small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .05em; color: var(--text-3); font-weight: 400; direction: ltr; text-align: start; }

/* ---------- long lists on a real run (disclose.js) ----------
   A real run has dozens of units, labels, pairs and axes. Each list shows its first items; the rest wait
   behind one quiet pill button. Rows that used to print every quote now keep the quotes one fold away. */
.more-box { display: flex; flex-direction: column; min-width: 0; }
.more-rest { min-width: 0; }
.more-rest > .more-list { margin-top: 12px; }
.more-rest > .chips { margin-top: 8px; }
.more-rest > .tag-grid { margin-top: 10px; }
.more-rest > .pair-list { margin-top: 14px; }
.more-rest > .unit-list, .more-rest > .axis-blocks { margin-top: 0; }
.more-rest > .axis-list { margin-top: 20px; }
.more-rest > .nm-list { margin-top: 18px; }
.more-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 8px 18px 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--cool-ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}
.more-btn:hover { border-color: var(--cool); background: var(--cool-soft); }
.more-btn .icon { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease); }
.more-btn.is-open .icon { transform: rotate(180deg); }
.more-count { color: var(--text-3); font-weight: 400; font-size: .86rem; }
.more-count:empty { display: none; }

/* a quiet fold inside a row: the evidence of a result, the quotes of an axis, the names of an axis */
:is(.res-fold, .pts-fold, .nm-choose) > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--cool-ink);
  font-size: .94rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
:is(.res-fold, .pts-fold, .nm-choose) > summary::-webkit-details-marker { display: none; }
:is(.res-fold, .pts-fold, .nm-choose) > summary .icon { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease); }
:is(.res-fold, .pts-fold, .nm-choose)[open] > summary .icon { transform: rotate(180deg); }
:is(.res-fold, .pts-fold, .nm-choose) > summary:hover > span:not(.badge) { text-decoration: underline; text-underline-offset: 3px; }
:is(.res-fold, .pts-fold, .nm-choose) > summary > span:not(.badge) { flex: 0 1 auto; min-width: 0; }
:is(.res-fold, .pts-fold, .nm-choose) > summary > .badge { flex: none; }
.res.is-compact { padding: 12px 16px; }
/* on a phone the interview cards a stage received sit two to a row, with a two-line excerpt */
@media (max-width: 599px) {
  .open-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .open-card .ex { -webkit-line-clamp: 2; }
}
/* the stage-9 text: a short list of its sections at the top */
.ms-toc { margin: -8px 0 8px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.ms-toc-h { font-size: .84rem; font-weight: 700; color: var(--text-3); margin: 0 0 6px; }
.ms-toc ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.ms-toc li { line-height: 1.45; }
.ms-toc a { color: var(--text); text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.ms-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-toc a .axis-name { background: none; font-weight: inherit; }
.res.is-compact .res-top { margin-bottom: 8px; }
.res-fold { margin-top: 4px; }
.res-fold-body { padding-bottom: 4px; }
.res.is-compact .res-remove { margin-top: 4px; padding-top: 8px; }

/* checkpoint B: one row per axis, the name in use as its headline */
.nm-lead { margin: 0 0 18px; max-width: 46em; }
.nm-list { display: grid; gap: 18px; }
.nm-list > .nm-axis { margin: 0; padding: clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 30px); }
.nm-axis .nm-current { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 8px; }
.nm-current-k { font-size: .82rem; color: var(--text-3); }
.nm-axis .nm-current .axis-name { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.35; }
.nm-axis .nm-status { margin: 0 0 8px; }
.nm-axis .nm-def { margin: 0 0 2px; font-size: .98rem; }
.nm-choose { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.nm-choose > .nm-options { margin: 10px 0 4px; }

/* findings: core axes first, then the rest */
.axis-map { display: block; }
.axis-list { display: grid; gap: 20px; }
.axis-group-h { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 0 0 4px; }
.axis-group-h ~ .axis-group-h { margin-top: clamp(44px, 5vw, 64px); }
.axis-group-sub { margin: 0 0 18px; max-width: 46em; }
.axis-card.is-core { border-color: color-mix(in srgb, var(--warm) 38%, var(--line)); }
.pts-fold { margin-top: 12px; }
.pts-fold > .pt-list { margin-top: 4px; }

/* relations: the list beside a diagram that stays in view while the list scrolls */
.relations { align-items: start; }
@media (min-width: 900px) { .rel-figure { position: sticky; top: calc(var(--head-h) + 24px); } }
/* inline, not flex: a long name that wraps keeps its highlight band per line instead of one heavy block */
.rel-end { display: inline; }
/* the id is a left-to-right element, so a logical start margin would land on its far side; both sides */
.rel-end .id { font-size: .76rem; margin-inline: 6px; white-space: nowrap; }
.rel-svg.is-ids .nid { font-size: 13px; fill: var(--text); font-weight: 500; }
.rel-svg.is-ids .node.core .nid { fill: var(--warm-ink); }
.rel-left { flex-basis: 100%; color: var(--text-3); }
.rel-cons, .structure-box { margin-top: 26px; }
:is(.rel-cons, .structure-box) h4 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.rel-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel-cons li { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); font-weight: 700; }
.rel-cons li .rel-note { font-weight: 400; }
.cons-names { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cons-names > .rel-end + .rel-end::before { content: "+"; margin-inline-end: 4px; color: var(--text-3); font-weight: 400; }
.structure-box .structure { margin-top: 0; }