/* page-synthetics.css — form for the synthetics page (N55 anti-generative
   grammar): the layout is the theory's own shape, not decoration. Two set
   pieces — the synthetic decomposition drawn as a static sorting diagram
   beside the premise, and the result ladder as a connected vertical spine.
   Both read fully AT REST: no scroll-grown reveals, no animation loops. The
   only interaction is a precision aid — hover/focus a channel or an italicised
   term lights the prose↔diagram correspondence. Self-contained, no network
   references. */

/* ============================================================
   1 · THE SYNTHETIC DECOMPOSITION — premise + sorting diagram
   ============================================================ */

.syn-premise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* the three terms in the prose are the diagram's three channels */
.syn-term {
  font-style: italic;
  color: var(--text-secondary);
  border-bottom: 1px dashed transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  cursor: help;
}
.syn-term[data-term="null"].is-lit    { color: var(--text-primary); border-bottom-color: var(--text-muted); }
.syn-term[data-term="cost"].is-lit    { color: var(--accent-light); border-bottom-color: var(--accent); }
.syn-term[data-term="residue"].is-lit { color: #d98b80; border-bottom-color: var(--refused); }

/* the figure column */
.syn-figure {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  margin: 0;
}

.syn-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* input trajectories: a lawful world of many paths — static, consistent weight */
.syn-input {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.32;
}

/* the finite aperture — the description */
.syn-aperture {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.9;
}
.syn-aperture-core { fill: var(--accent-dim); }

/* orientation labels (input / aperture), quiet */
.syn-orient {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--text-muted);
  letter-spacing: -0.01em;
}

/* the three output channels — one consistent stroke weight; colour and dash
   carry the meaning, not thickness */
.syn-channel { cursor: pointer; }
.syn-channel:focus { outline: none; }

.syn-channel-path {
  fill: none;
  stroke-width: 1.6;
  transition: stroke-width var(--transition-fast), opacity var(--transition-fast);
}
.syn-channel[data-channel="null"]    .syn-channel-path { stroke: var(--text-muted); opacity: 0.5; }
.syn-channel[data-channel="cost"]    .syn-channel-path { stroke: var(--accent); }
.syn-channel[data-channel="residue"] .syn-channel-path { stroke: var(--refused); stroke-dasharray: 6 5; }

.syn-channel-hit {
  fill: transparent;
  stroke: none;
}

/* channel endpoint markers */
.syn-node { transition: r var(--transition-fast), opacity var(--transition-fast); }
.syn-channel[data-channel="null"]    .syn-node { fill: var(--text-muted); opacity: 0.55; }
.syn-channel[data-channel="cost"]    .syn-node { fill: var(--accent); }
.syn-channel[data-channel="residue"] .syn-node { fill: var(--refused); }

/* the residue's structured points */
.syn-residue-scatter circle { fill: var(--refused); opacity: 0.75; }

/* channel labels — mono, evidence register, legible without hover */
.syn-label {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: -0.02em;
  fill: var(--evidence);
  transition: fill var(--transition-fast);
}
.syn-label-tag {
  font-family: var(--font-mono);
  font-size: 14.5px;
  letter-spacing: -0.01em;
  fill: var(--text-muted);
}

/* lit state (hover / focus / matched from prose) — a precision highlight */
.syn-channel.is-lit .syn-channel-path { stroke-width: 2.6; opacity: 1; }
.syn-channel.is-lit .syn-node { r: 6; opacity: 1; }
.syn-channel[data-channel="null"].is-lit    .syn-label { fill: var(--text-primary); }
.syn-channel[data-channel="cost"].is-lit    .syn-label { fill: var(--accent-light); }
.syn-channel[data-channel="residue"].is-lit .syn-label { fill: #d98b80; }

/* ============================================================
   2 · THE RESULT LADDER — five drafts on one connected spine.
        The spine is complete at rest; rungs read top to bottom.
   ============================================================ */

.syn-ladder {
  position: relative;
  margin-top: var(--space-xl);
  padding-left: 2.75rem;
}

/* the spine — a static gradient from foundation (accent) through to the
   experimental draft (refused); present in full, no scroll growth */
.syn-rail {
  position: absolute;
  left: 0.75rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-warm-2) 58%, var(--refused) 100%);
  opacity: 0.7;
}

.syn-rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.syn-rung { position: relative; }

/* the node on the spine */
.syn-rung::before {
  content: '';
  position: absolute;
  left: -2.34rem;
  top: 1.15rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--text-muted);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  z-index: 2;
}
/* the connector stub from spine to card */
.syn-rung::after {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 1.48rem;
  width: 1.55rem;
  height: 1px;
  background: var(--border-glass);
  transition: background var(--transition-base);
  z-index: 1;
}

/* the foundation rung — larger node, the base the rest spend against */
.syn-rung.is-foundation::before {
  width: 15px;
  height: 15px;
  left: -2.45rem;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* the experimental rung — dashed, an open laboratory */
.syn-rung.is-open::before {
  border-style: dashed;
  border-color: var(--refused);
}

/* hover / focus-within: the rung joins the argument (colour only, no motion) */
.syn-rung:hover::before,
.syn-rung:focus-within::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.syn-rung:hover::after,
.syn-rung:focus-within::after { background: var(--accent); }

.syn-rung .pub-item { margin: 0; }

.syn-rung-index {
  position: absolute;
  left: -2.75rem;
  top: -0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* the ledger axis note running alongside the spine */
.syn-ladder-axis {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: left center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================
   MOBILE — 375px must be clean: stack, simplify, no overflow
   ============================================================ */
@media (max-width: 720px) {
  .syn-premise-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .syn-figure { position: static; order: 2; }
  /* thin the densest input lines so the small figure stays legible */
  .syn-input.syn-input-extra { display: none; }
  /* bump the SVG type so the scaled-down figure stays readable */
  .syn-label { font-size: 21px; }
  .syn-label-tag { font-size: 16px; }
  .syn-orient { font-size: 15px; }
  .syn-ladder-axis { display: none; }
  .syn-ladder { padding-left: 2.25rem; }
  .syn-rung-index { left: -2.25rem; }
}

@media (max-width: 480px) {
  .syn-ladder { padding-left: 2rem; }
  .syn-rung::before { left: -1.85rem; }
  .syn-rung.is-foundation::before { left: -1.95rem; }
  .syn-rung::after { left: -1.45rem; width: 1.1rem; }
  .syn-rung-index { left: -2rem; }
}

/* ============================================================
   MOTION — there is almost nothing to reduce; hold the highlight
   transitions still under the reduced-motion preference.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .syn-node, .syn-channel-path, .syn-rung::before, .syn-rung::after { transition: none; }
}