/* Trust Cell page. Builds on base.css tokens and the shared pieces in pages.css (page-hero, split, chip). */

/* ---------- anatomy: diagram + picker ---------- */

.anatomy__layout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.anatomy__figure { margin: 0; position: sticky; top: 2rem; }

.cell-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.cell-text { font: 600 15px var(--font-mono); letter-spacing: 0.08em; fill: var(--paper); pointer-events: none; }
.cell-text--small { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; fill: var(--mute); }

.cell-part { cursor: pointer; }
/* wide invisible stroke/fill so thin shapes are easy to click */
.cell-part__hit { fill: transparent; stroke: transparent; stroke-width: 28; }

.cell-membrane { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.7; }
.cell-membrane--inner { stroke-dasharray: none; stroke-width: 1; opacity: 0.35; }
.cell-receptor rect { fill: var(--ink); stroke: var(--brand-cyan); stroke-width: 1.5; }
.cell-plate { fill: var(--graphite); stroke: var(--line-strong); }
.cell-core { fill: rgb(255 138 36 / 0.08); stroke: var(--amber); stroke-width: 1.5; }
.cell-core__ring { fill: none; stroke: var(--amber); stroke-dasharray: 3 6; opacity: 0.6; transform-origin: 300px 290px; animation: cell-spin 40s linear infinite; }
.cell-chain { stroke: var(--line-strong); stroke-width: 2; }
.cell-block { fill: var(--graphite); stroke: var(--teal); stroke-width: 1.2; }
.cell-block--new { stroke-dasharray: 3 3; }
.cell-link { fill: none; stroke: var(--brand-green); stroke-width: 1.5; stroke-dasharray: 5 5; }
.cell-child { fill: var(--ink); stroke: var(--brand-green); stroke-width: 1.5; stroke-dasharray: 2 5; }
.cell-child__core { fill: rgb(255 138 36 / 0.15); stroke: var(--amber); }

.cell-part > :not(.cell-part__hit):not(text) { transition: opacity var(--duration) var(--ease-out), filter var(--duration) var(--ease-out); }
/* a selection dims everything else and lights the chosen part */
[data-anatomy][data-part] .cell-part:not(.is-active) > :not(.cell-part__hit) { opacity: 0.5; }
[data-anatomy][data-part] .cell-part:not(.is-active):hover > :not(.cell-part__hit) { opacity: 0.85; }
.cell-part.is-active > :not(.cell-part__hit):not(text) { filter: drop-shadow(0 0 8px rgb(69 227 166 / 0.55)); }
.cell-part.is-active text { fill: var(--paper); }

@keyframes cell-spin { to { transform: rotate(360deg); } }

.part-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.part-picker__option {
  display: grid; gap: 0.3rem; justify-items: start; padding: 0.8rem 0.9rem; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--mute);
  font: 500 var(--text-label) / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.part-picker__option span { color: var(--teal); font-size: 0.62rem; }
.part-picker__option:hover { border-color: var(--line-strong); color: var(--paper); }
.part-picker__option[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-dim); color: var(--paper); }

.part-panel[hidden] { display: none; }
.part-panel { display: grid; gap: 0.9rem; margin-top: 1.6rem; padding: 1.6rem; border: 1px solid var(--line-strong); background: var(--graphite); }
.part-panel h3 { font-size: var(--text-h3); }
.part-panel__lede { color: var(--paper); font-size: var(--text-lead); }
.part-panel ul { list-style: none; display: grid; gap: 0.7rem; }
.part-panel li { position: relative; padding-left: 1.2rem; color: var(--paper-soft); font-size: 0.97rem; }
.part-panel li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--teal); }
.part-panel code, .formula code, .fork__outcomes code { font-family: var(--font-mono); font-size: 0.88em; color: var(--brand-cyan); }
.part-panel a { color: var(--teal); }
.ops li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; padding-left: 0; }
.ops li::before { display: none; }
.ops code { color: var(--amber); }
.part-panel__guard { padding: 0.9rem 1rem; border-left: 2px solid var(--amber); background: var(--amber-dim); color: var(--paper); font-size: 0.95rem; }

@media (max-width: 959px) {
  .anatomy__layout { grid-template-columns: minmax(0, 1fr); }
  .anatomy__figure { position: static; max-width: 34rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 479px) {
  .part-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ---------- input pipeline ---------- */

.pipeline {
  list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.pipeline__step { display: grid; align-content: start; gap: 0.6rem; padding: 1.5rem; background: var(--ink); position: relative; }
.pipeline__step h3 { font-size: 1.15rem; }
.pipeline__step p { color: var(--mute); font-size: 0.95rem; }
.pipeline__step:not(:last-child)::after {
  content: "→"; position: absolute; right: -0.55rem; top: 1.4rem; z-index: 1;
  color: var(--teal); background: var(--ink); font-family: var(--font-mono);
}
.pipeline__ok, .pipeline__no { display: block; font: 500 var(--text-label) / 1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.pipeline__ok { color: var(--teal); }
.pipeline__no { color: var(--signal); }
.formula { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border: 1px dashed var(--line-strong); overflow-x: auto; }
.formula code { color: var(--paper); font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem); white-space: nowrap; }

@media (max-width: 899px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline__step::after { display: none; }
}
@media (max-width: 479px) { .pipeline { grid-template-columns: minmax(0, 1fr); } }

/* ---------- forks ---------- */

.fork { display: grid; gap: 1.2rem; margin: 0; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line-strong); background: var(--graphite); }
.fork__svg { width: 100%; height: auto; }
.fork__line { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.fork__line--a, .fork__line--b { stroke: var(--brand-cyan); stroke-dasharray: 5 5; }
.fork__gen { fill: var(--ink); stroke: var(--teal); stroke-width: 1.4; }
.fork__gen--parent { stroke: var(--amber); fill: var(--amber-dim); }
.fork__gen--branch { stroke: var(--brand-cyan); }
.fork__text { font: 500 12px var(--font-mono); fill: var(--mute); letter-spacing: 0.06em; }
.fork figcaption { color: var(--paper-soft); font-size: 0.95rem; }
.fork__outcomes { display: grid; gap: 0.5rem; }
.fork__outcomes > div { display: grid; gap: 0.4rem; padding: 0.9rem 1rem; background: var(--ink); border-left: 3px solid var(--line-strong); }
.fork__outcomes dd { color: var(--mute); font-size: 0.95rem; }
.fork__outcomes .tone-invalid { color: var(--signal); }
.fork__outcomes .tone-authority { color: var(--brand-cyan); }
.fork__outcomes > div:first-child { border-left-color: var(--signal); }
.fork__outcomes > div:last-child { border-left-color: var(--brand-cyan); }

/* ---------- four statements ---------- */

.statements { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.statements__group { display: grid; gap: 0.8rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); border-top: 3px solid var(--teal); }
.statements__group--authority { border-top-color: var(--brand-cyan); background: linear-gradient(rgb(34 200 239 / 0.06), transparent 60%); }
.statement { display: grid; gap: 0.35rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.statement h3 { font-size: 1.15rem; }
.statement p { color: var(--mute); }
@media (max-width: 759px) { .statements { grid-template-columns: minmax(0, 1fr); } }

/* ---------- offline drill ---------- */

.drill {
  list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.drill__step { display: grid; align-content: start; gap: 0.6rem; padding: 1.5rem; background: var(--ink); }
.drill__num { font: 500 0.8rem / 1 var(--font-mono); color: var(--teal); }
.drill__step h3 { font-size: 1.2rem; }
.drill__step p { color: var(--mute); font-size: 0.95rem; }
.drill__step--kill { background: linear-gradient(rgb(255 95 82 / 0.12), var(--ink) 80%); }
.drill__step--kill .drill__num, .drill__step--kill h3 { color: var(--signal); }
@media (max-width: 899px) { .drill { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 499px) { .drill { grid-template-columns: minmax(0, 1fr); } }

.cutoff { margin-top: 2rem; display: grid; gap: 0.9rem; }
.cutoff__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- rendered art ---------- */

.cell-render { padding-bottom: clamp(2rem, 4vw, 3rem); }
.cell-render__figure { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; display: grid; gap: 0.8rem; }
.cell-render__figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); background: #000;
  box-shadow: 0 40px 120px -40px rgb(69 227 166 / 0.18);
}
.cell-render__figure figcaption { color: var(--amber); }
.part-panel__render { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #000; }

/* ---------- 3D viewer (progressive enhancement over the diagram) ---------- */

.cell-viewer[hidden] { display: none; }
.has-viewer .cell-diagram { display: none; }
.cell-viewer { display: grid; gap: 0.8rem; }
.cell-viewer__stage {
  position: relative; aspect-ratio: 6 / 5; width: 100%;
  background: radial-gradient(closest-side, rgb(69 227 166 / 0.1), transparent 75%);
  border: 1px solid var(--line); touch-action: pan-y;
}
.cell-viewer__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cell-viewer__stage canvas:active { cursor: grabbing; }
.cell-viewer[data-viewer-state="loading"] .cell-viewer__stage::after {
  content: "Loading model…"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 var(--text-label) var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.cell-viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cell-viewer__hint { margin: 0; }
.cell-viewer__toggle {
  padding: 0.6rem 0.9rem; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--paper);
  font: 500 var(--text-label) / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.cell-viewer__toggle:hover { border-color: var(--teal); }
.cell-viewer__toggle[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-dim); }
.cell-viewer__toggle:focus-visible, .part-picker__option:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }