/* Linear pipeline: stages that happen one after another. */
.semantic-pipeline {
  display: grid;
  grid-template-columns: repeat(var(--pipeline-count, 4), minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.semantic-pipeline li {
  position: relative;
  min-width: 0;
  padding: .9rem 1.25rem 1rem;
  border-left: 1px solid var(--line-strong);
}

.semantic-pipeline li:last-child { border-right: 1px solid var(--line-strong); }
.semantic-pipeline span { display: block; color: var(--ink-faint, var(--muted)); font: 500 var(--fs-micro)/1 var(--font-mono); }
.semantic-pipeline strong { display: block; margin-top: .9rem; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.semantic-pipeline small { display: block; margin-top: .4rem; color: var(--ink-dim); font-size: .78rem; line-height: 1.6; }
.semantic-pipeline i { position: absolute; z-index: 1; top: 50%; right: -4px; width: 7px; height: 7px; background: var(--signal); transform: rotate(45deg); }
.semantic-pipeline li:last-child i { display: none; }

/* Fan-in: several sources feed one result. */
.pipeline-fan-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, .82fr);
  align-items: center;
}

.fan-in-sources {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fan-in-sources li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  padding: .7rem .9rem;
  border: 1px solid var(--line-strong);
}

.fan-in-sources li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1.375rem - 1px);
  width: 1.375rem;
  border-top: 1px solid var(--line-strong);
}

.fan-in-sources span { color: var(--ink-faint, var(--muted)); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.fan-in-sources strong { font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.fan-in-sources small { grid-column: 2; margin-top: .2rem; color: var(--ink-dim); font-size: .76rem; line-height: 1.6; }

.fan-in-join {
  position: relative;
  align-self: stretch;
}

/* The spine runs from the first source's centre to the last one's. */
.fan-in-sources li::before {
  content: "";
  position: absolute;
  top: calc(-.25rem - 1px);
  bottom: calc(-.25rem - 1px);
  right: calc(-1.375rem - 1px);
  border-right: 1px solid var(--line-strong);
}
.fan-in-sources li:first-child::before { top: 50%; }
.fan-in-sources li:last-child::before { bottom: 50%; }

.fan-in-join::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.375rem;
  width: calc(1.375rem - 4px);
  border-top: 1px solid var(--signal);
}

.fan-in-join::before {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  left: calc(2.75rem - 8px);
  width: 7px;
  height: 7px;
  background: var(--signal);
  transform: rotate(45deg);
}

.fan-in-target {
  display: grid;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
  background: var(--signal-soft);
}

.fan-in-target strong { font-size: .95rem; line-height: 1.5; }
.fan-in-target small { color: var(--ink-dim); font-size: .76rem; line-height: 1.6; }

/* AK-47 identity stack */
.identity-stack {
  display: grid;
  gap: 1rem;
}

.identity-weapon-3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ice) 9%, var(--panel)) 0%, var(--panel) 72%);
  border: 1px solid var(--line);
}

.identity-3d-canvas-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
}

.identity-3d-canvas-container:active { cursor: grabbing; }

.identity-weapon-fallback {
  position: absolute;
  inset: 6% 12%;
  display: grid;
  place-items: center;
}

.identity-weapon-fallback img { width: 100%; height: 100%; object-fit: contain; }
.identity-weapon-fallback[hidden], .identity-3d-load[hidden], .identity-3d-hud-dock[hidden], .identity-3d-toolbar[hidden] { display: none; }
.identity-3d-toolbar { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; gap: 4px; }

.identity-3d-toolbar button,
.identity-3d-load {
  min-width: 44px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  font: 500 .76rem/1.3 var(--font-sans);
  cursor: pointer;
}

.identity-3d-load { position: absolute; bottom: 12px; left: 50%; z-index: 4; transform: translateX(-50%); }

.identity-3d-toolbar button:focus-visible,
.identity-3d-load:focus-visible,
.identity-3d-canvas-container canvas:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }

/* Per-step controls appear between the model and the step list. */
.identity-3d-hud-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  min-height: 2.25rem;
}

.identity-3d-hud-dock .hud-label { color: var(--amber); font: 500 .76rem/1.4 var(--font-sans); }
.identity-3d-hud-dock .hud-hint { color: var(--ink-dim); font: 500 .74rem/1.4 var(--font-sans); }

.identity-3d-hud-dock .hud-pill {
  min-height: 32px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font: 500 .74rem/1 var(--font-sans);
  cursor: pointer;
}

.identity-3d-hud-dock .hud-pill:hover { color: var(--ink); border-color: var(--ink-dim); }
.identity-3d-hud-dock .hud-pill[aria-pressed="true"] { color: var(--signal-text); border-color: var(--signal); background: var(--signal-soft); }
.identity-3d-hud-dock .hud-pill:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.identity-stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.identity-stage-list button {
  display: grid;
  gap: .3rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .7rem .5rem .6rem;
  border: 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.identity-stage-list button > span { color: var(--ink-faint, var(--muted)); font: 500 var(--fs-micro)/1 var(--font-mono); }
.identity-stage-list button strong { font-size: .84rem; font-weight: 500; line-height: 1.35; }
.identity-stage-list button small { display: none; }
.identity-stage-list button:hover { color: var(--ink); }
.identity-stage-list button[aria-pressed="true"] { color: var(--ink); border-top-color: var(--signal); }
.identity-stage-list button[aria-pressed="true"] > span { color: var(--signal-text); }
.identity-stage-list button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.identity-stack-status {
  display: grid;
  grid-template-columns: minmax(7rem, .22fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  color: var(--ink-dim);
  font-size: .86rem;
  line-height: 1.7;
}

.identity-stack-status strong { color: var(--ink); font-weight: 600; }

/* Odds ladder: bar length follows the published case odds. */
.odds-ladder {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.odds-rows { margin: 0; padding: 0; list-style: none; }

.odds-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1.4fr) 3.75rem;
  gap: .75rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: .45rem .5rem .45rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.odds-row:hover { color: var(--ink); }
.odds-row[aria-pressed="true"] { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 12%, transparent), transparent 70%); }
.odds-row:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.odds-name { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.odds-name i { flex: 0 0 auto; align-self: center; width: 8px; height: 8px; background: var(--tier); }
.odds-name strong { font-size: .86rem; font-weight: 500; white-space: nowrap; }
.odds-track { position: relative; height: 6px; background: var(--line); }
.odds-track > span { position: absolute; inset: 0 auto 0 0; min-width: 2px; background: var(--tier); }
.odds-value { font: 500 .78rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

.odds-inspector { margin: 0; }

.odds-inspector-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 7%, var(--panel)) 0%, var(--panel) 70%);
  border: 1px solid var(--line);
}

.odds-inspector-media img { width: 86%; height: 86%; object-fit: contain; }
.odds-inspector figcaption { display: grid; gap: .25rem; margin-top: .8rem; font-size: .84rem; line-height: 1.65; }
.odds-inspector figcaption strong { font-size: .95rem; }
.odds-example { color: var(--ink); }
.odds-detail { color: var(--ink-dim); }
.odds-detail[hidden] { display: none; }
.semantic-block .odds-note { margin: 1rem 0 0; color: var(--ink-dim); font-size: .8rem; line-height: 1.7; }

@media (max-width: 760px) {
  .semantic-pipeline { display: block; }
  /* Keep the rail inset so its diamonds are not clipped at the column edge. */
  html .semantic-block .semantic-pipeline { margin-left: 6px; }
  .semantic-pipeline li { padding: .8rem 0 .8rem 1.1rem; border: 0; border-left: 1px solid var(--line-strong); }
  .semantic-pipeline li:last-child { border-right: 0; }
  .semantic-pipeline strong { margin-top: .35rem; }
  .semantic-pipeline i { top: auto; right: auto; bottom: -4px; left: -4px; }

  .pipeline-fan-in { grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, .75fr); }
  .fan-in-sources li { grid-template-columns: 1fr; padding: .6rem .7rem; }
  .fan-in-sources small { grid-column: 1; }
  .fan-in-sources li::after { right: calc(-1.125rem - 1px); width: 1.125rem; }
  .fan-in-sources li::before { right: calc(-1.125rem - 1px); }
  .fan-in-join::after { left: 1.125rem; width: calc(1.125rem - 4px); }
  .fan-in-join::before { left: calc(2.25rem - 8px); }
  .fan-in-target { padding: .8rem .75rem; }

  .identity-weapon-3d-stage { aspect-ratio: 16 / 10; }
  .identity-stage-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .identity-stack-status { grid-template-columns: 1fr; gap: .2rem; }

  .odds-ladder { grid-template-columns: 1fr; gap: 1rem; }
  .odds-row { grid-template-columns: minmax(5.5rem, .8fr) minmax(0, 1fr) 3.6rem; gap: .6rem; }
  .odds-inspector { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .9rem; align-items: center; }
  .odds-inspector figcaption { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .identity-stage-list button, .odds-row { transition: none; }
}

/* A new tier or stage is captured into the readout (class set by registry.js). */
@media (prefers-reduced-motion: no-preference) {
  .odds-inspector.is-retuning .odds-inspector-media img { animation: odds-capture .5s cubic-bezier(.16, 1, .3, 1) both; }
  .odds-inspector.is-retuning figcaption,
  .identity-stack-status.is-retuning > * { animation: odds-readout .42s cubic-bezier(.16, 1, .3, 1) both; }
  .odds-inspector.is-retuning figcaption,
  .identity-stack-status.is-retuning > :last-child { animation-delay: 60ms; }
}

@keyframes odds-capture { from { opacity: 0; scale: .9; translate: 0 6px; } }
@keyframes odds-readout { from { opacity: 0; translate: 0 6px; } }

@media print {
  .semantic-pipeline i, .fan-in-join, .identity-weapon-3d-stage, .identity-3d-hud-dock { display: none; }
  .semantic-pipeline { display: block; }
  .semantic-pipeline li { border: 0; border-top: 1px solid #aaa; }
  .pipeline-fan-in { display: block; }
  .identity-stage-list button small { display: block; color: #444; }
}
.odds-inspector .odds-en { margin-left: .5rem; color: var(--ink-faint, var(--muted)); font: 500 var(--fs-micro)/1 var(--font-mono); }