/* Decision System: home surface, index and the seven-stage decision page. */

/* ---------- shared atoms ---------- */
.mark { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; flex: none; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; line-height: 1; border: 1px solid var(--ink); border-radius: 2px; vertical-align: 0.05em; }
.mark-fact { background: var(--ink); color: var(--paper); }
.mark-assumption { background: transparent; color: var(--ink); }
.mark-inference { background: transparent; color: var(--ink); border-style: dashed; }
.mark-unknown { background: var(--accent); border-color: var(--accent); color: #fff; }
.auth { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; line-height: 1.2; color: var(--ink-2); }
.auth-level { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border: 1px solid var(--ink); border-radius: 50%; font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.auth-human_required { color: var(--ink); font-weight: 600; }
.auth-human_required .auth-level { background: var(--ink); color: var(--paper); }
.count { font-family: var(--sans); font-size: 0.8rem; color: var(--mute); font-variant-numeric: tabular-nums; margin-left: 0.4rem; }
.table-scroll { overflow-x: auto; }

/* ---------- home surface ---------- */
.surface { display: grid; gap: 1.5rem; }
.surface :focus-visible, .map-band :focus-visible { outline-color: var(--accent-on-dark); }
.surface-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-on-dark); border: 1px solid var(--rule-on-dark); align-self: start; }
.surface-tabs button { display: flex; gap: 0.75rem; align-items: baseline; text-align: left; background: var(--ink); border: 0; padding: 0.85rem 0.9rem; color: var(--on-dark-mute); min-height: 3.25rem; }
.surface-tabs button:hover { color: var(--on-dark); }
.surface-tabs button[aria-selected="true"] { color: var(--on-dark); background: var(--ink-2); box-shadow: inset 3px 0 0 var(--accent-on-dark); }
.tab-n { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--on-dark-mute); }
.tab-text { display: grid; gap: 0.1rem; min-width: 0; }
.tab-context { font-weight: 500; font-size: 0.95rem; line-height: 1.25; }
.tab-short { font-size: 0.82rem; line-height: 1.3; color: var(--on-dark-mute); display: none; }
.surface-panel { border: 1px solid var(--rule-on-dark); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.surface-context { font-size: 0.88rem; color: var(--accent-on-dark); }
.surface-title { font-size: var(--step-2); letter-spacing: -0.015em; }
.surface-question { font-family: var(--serif); font-size: var(--step-1); line-height: 1.4; color: var(--on-dark); opacity: 0.86; max-width: 36em; }
.surface-pressures { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.chip { background: transparent; border: 1px solid var(--rule-on-dark); color: var(--on-dark); border-radius: 2px; padding: 0.5rem 0.9rem; font-size: 0.92rem; min-height: 2.75rem; text-align: left; }
.chip:hover { border-color: var(--on-dark); }
.chip[aria-pressed="true"] { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--ink); font-weight: 500; }
.surface-result { min-height: 8rem; }
.surface-hint, .surface-detail { color: var(--on-dark-mute); max-width: 40em; }
.surface-steps { margin-top: 1rem; border-top: 1px solid var(--rule-on-dark); }
.surface-steps li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.15rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-on-dark); font-size: 0.95rem; animation: stepIn 0.45s both; animation-delay: calc(var(--i) * 140ms); }
.ss-kind { font-size: 0.8rem; color: var(--accent-on-dark); padding-top: 0.15rem; }
.ss-body strong { font-weight: 500; }
.ss-values { color: var(--accent-on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 0.4rem; }
.ss-fn { grid-column: 2; font-size: 0.8rem; color: var(--on-dark-mute); }
.surface-summary { margin-top: 1rem; font-size: 0.92rem; color: var(--on-dark-mute); }
.surface-enter { margin-top: 0.5rem; }
.surface-fallback { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
@keyframes stepIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .surface { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; }
  .surface-tabs { grid-template-columns: 1fr; }
  .tab-short { display: block; }
  .surface-steps li { grid-template-columns: 7rem minmax(0, 1fr) 9rem; }
  .ss-fn { grid-column: auto; text-align: right; padding-top: 0.15rem; }
}

/* ---------- index ---------- */
.decision-cards { display: grid; gap: 0; border-top: 1px solid var(--ink); counter-reset: none; }
.decision-cards a { display: grid; gap: 0.35rem 2rem; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.decision-cards a:hover { color: inherit; }
.decision-cards a:hover .dc-title { color: var(--accent); }
.dc-n { font-size: 0.85rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.dc-context { font-size: 0.9rem; color: var(--accent); }
.dc-title { font-family: var(--serif); font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.dc-q { color: var(--ink-2); max-width: 42em; }
.dc-caps { font-size: 0.85rem; color: var(--mute); }
@media (min-width: 900px) {
  .decision-cards a { grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto; }
  .dc-n { grid-row: 1 / 4; padding-top: 0.2rem; }
  .dc-context { grid-column: 2; }
  .dc-title { grid-column: 2; grid-row: 2 / 4; }
  .dc-q { grid-column: 3; grid-row: 1 / 3; }
  .dc-caps { grid-column: 3; grid-row: 3; }
}
.two-col { display: grid; gap: 3rem; padding-block: clamp(3.5rem, 8vw, 6rem); }
.two-col h2, .method-note h2 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.two-col p { color: var(--ink-2); margin-bottom: 1.25rem; max-width: 36em; }
.spine-list, .authority-list { display: grid; border-top: 1px solid var(--rule); }
.spine-list li, .authority-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.spine-list { counter-reset: s; }
.spine-list li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; }
.spine-list li::before { content: counter(s); font-size: 0.85rem; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 0.1rem; }
.spine-list li > * , .spine-list li { }
.spine-list strong, .authority-list strong { color: var(--ink); font-weight: 600; }
.authority-list li { display: grid; grid-template-columns: 2rem 1fr; align-items: start; }
.authority-list .auth-level { margin-top: 0.15rem; }
.is-off { color: var(--mute) !important; }
.is-off strong { color: var(--mute) !important; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.method-note { border-top: 1px solid var(--rule); padding-top: clamp(2.5rem, 5vw, 4rem); }
.method-note p { max-width: 46em; color: var(--ink-2); }

/* ---------- decision head and rail ---------- */
.d-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem); }
.d-context { margin-top: 1.75rem; color: var(--accent); font-weight: 500; }
.d-head h1 { font-size: var(--step-4); letter-spacing: -0.028em; line-height: 1; margin-top: 0.5rem; max-width: 15em; }
.d-line { font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; color: var(--ink-2); margin-top: 1.25rem; max-width: 32em; }
.d-illustrative { margin-top: 1.5rem; font-size: 0.9rem; color: var(--mute); }

.rail { position: sticky; top: 0; z-index: 20; background: var(--paper); border-block: 1px solid var(--rule); }
.rail-row { display: flex; align-items: center; gap: 0.25rem 2rem; flex-wrap: wrap; min-height: 3.25rem; }
.rail ol { display: flex; gap: 0; margin-left: -0.75rem; }
.rail a { display: flex; align-items: center; gap: 0.45rem; padding: 0.9rem 0.75rem; font-size: 0.92rem; text-decoration: none; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rail a.is-reached, .rail a:hover { color: var(--ink); }
.rail a[aria-current="step"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.rail-n { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--mute); }
.rail-now { display: none; font-size: 0.92rem; font-weight: 500; padding-block: 0.9rem; }
.condition { font-size: 0.85rem; color: var(--ink-2); margin-left: auto; padding-block: 0.4rem; }
.condition-label { color: var(--mute); }
@media (max-width: 899px) {
  .rail ol { display: none; }
  .rail-now { display: block; }
  .condition { margin-left: 0; flex-basis: 100%; padding-top: 0; }
}

/* ---------- stages ---------- */
.stage { border-bottom: 1px solid var(--rule); }
.stage-head { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.25rem; align-items: baseline; padding-block: clamp(2.25rem, 5vw, 4rem) 0; }
.stage-n { font-size: 0.95rem; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.stage-head h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
.stage-head h2:focus { outline: none; }
.stage-line { grid-column: 2; color: var(--mute); }
.stage-body { padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4.5rem); }
.stage-intro { max-width: 46em; color: var(--ink-2); margin-bottom: 2rem; }
.next { margin-top: clamp(2rem, 4vw, 3rem); }
.system-ready .stage.is-locked .stage-body { display: none; }
.system-ready .stage.is-locked .stage-head { padding-block: 1.5rem; }
.system-ready .stage.is-locked .stage-head h2 { font-size: var(--step-2); color: var(--mute); }

/* Frame */
.scenario { max-width: 40em; }
.list-label { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; margin-top: 1.75em !important; }
.asks { margin-top: 0.6rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
.asks li { padding: 0.65rem 0 0.65rem 1.4rem; border-bottom: 1px solid var(--rule); position: relative; }
.asks li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 0.55rem; height: 1px; background: var(--ink); }
.question { font-family: var(--serif); font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.02em; max-width: 24em; margin-block: clamp(2.5rem, 5vw, 4rem); padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 3px solid var(--accent); text-wrap: balance; }
.frame-grid { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.frame-grid > div { padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--rule); }
.frame-grid dt { font-size: 0.85rem; color: var(--mute); margin-bottom: 0.35rem; }
.frame-grid dd { max-width: 34em; }
.frame-grid dd li + li { margin-top: 0.3rem; }
.frame-grid strong { font-weight: 600; }
@media (min-width: 800px) { .frame-grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* Observe */
.evidence { display: grid; gap: 2.5rem 3rem; }
.ev-group h3 { font-size: var(--step-1); padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink); }
.ev { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.ev .mark { margin-top: 0.15rem; }
.ev-meta { font-size: 0.82rem; color: var(--mute); margin-top: 0.2rem; }
.ev-group-unknown h3 { border-bottom-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) { .evidence { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Model: controls */
.controls { display: grid; gap: 2rem; margin-bottom: 2rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.75rem; }
.pressure-list, .counterfactuals { display: grid; gap: 0.6rem; }
.pressure { display: block; position: relative; cursor: pointer; }
.pressure input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pressure > span { display: grid; gap: 0.2rem; height: 100%; padding: 0.9rem 1rem 1rem 2.6rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); transition: border-color 0.15s; }
.pressure > span::before { content: ""; position: absolute; left: 0.95rem; top: 1.1rem; width: 0.95rem; height: 0.95rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
.pressure strong { font-weight: 600; line-height: 1.3; }
.pressure em { font-style: normal; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.pressure:hover > span { border-color: var(--ink); }
.pressure input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pressure input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--paper); }
.pressure input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 700px) { .pressure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .counterfactuals { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
@media (min-width: 1100px) { .pressure-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adjust label { font-size: 0.95rem; color: var(--ink-2); }
.adjust label strong { color: var(--ink); font-weight: 600; }
.adjust-row { display: flex; align-items: center; gap: 1.25rem; margin-top: 0.6rem; max-width: 34rem; }
.adjust output { font-family: var(--serif); font-size: var(--step-2); min-width: 5.5em; font-variant-numeric: tabular-nums; line-height: 1; }
.adjust-note { font-size: 0.82rem; color: var(--mute); margin-top: 0.4rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 2.75rem; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); margin-top: calc(-0.7rem + 1px); }
input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); }

/* Model: the map */
.map-band { background: var(--ink); color: var(--on-dark); padding: clamp(1rem, 2.5vw, 2rem); border-radius: 3px; }
.map { position: relative; display: none; }
.map-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
.edge { fill: none; stroke: var(--accent-on-dark); stroke-width: 1.5; opacity: 0.9; }
.edge-threshold { stroke-dasharray: 3 4; }
.edge.is-drawing { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 0.55s ease-out var(--delay, 0ms); }
.edge-threshold.is-drawing { stroke-dasharray: 3 4 !important; animation: fadeIn 0.4s both; animation-delay: var(--delay, 0ms); transition: none; }
.map-grid { display: grid; grid-template-columns: 6.5rem repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.map-head, .map-corner { font-size: 0.78rem; color: var(--on-dark-mute); padding: 0 0.5rem 0.75rem; border-bottom: 1px solid var(--rule-on-dark); }
.map-lane { font-size: 0.82rem; font-weight: 500; padding: 0.9rem 0.5rem 0.9rem 0; border-bottom: 1px solid var(--rule-on-dark); color: var(--on-dark); }
.map-cell { display: grid; gap: 0.5rem; align-content: center; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule-on-dark); border-left: 1px dashed var(--rule-on-dark); min-width: 0; }
.node { position: relative; z-index: 2; display: grid; gap: 0.1rem; padding: 0.5rem 0.6rem 0.55rem; border: 1px solid rgba(244, 241, 234, 0.28); border-radius: 2px; background: var(--ink); min-width: 0; transition: opacity 0.4s; }
.node-label { font-size: 0.74rem; line-height: 1.25; color: var(--on-dark-mute); }
.node-value { font-size: 0.98rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.node-was { font-size: 0.72rem; color: var(--on-dark-mute); font-variant-numeric: tabular-nums; }
.node-still { opacity: 0.62; }
.node-change { border-color: var(--accent-on-dark); background: var(--accent-on-dark); color: var(--ink); }
.node-change .node-label, .node-change .node-was { color: var(--ink-2); }
.node-moved { border-color: var(--accent-on-dark); }
.node-moved .node-value { color: var(--accent-on-dark); }
.node-threshold { border-style: dashed; }
.node-threshold .node-value { font-size: 0.8rem; font-weight: 400; color: var(--on-dark-mute); }
.node-threshold.is-on { border-style: solid; border-color: var(--on-dark); }
.node-threshold.is-on .node-value { color: var(--on-dark); font-weight: 600; }
.node-threshold.is-on .node-value::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; background: currentColor; border-radius: 50%; margin-right: 0.4rem; }
.node-flipped { border-color: var(--accent-on-dark) !important; box-shadow: 0 0 0 1px var(--accent-on-dark); }
.node-flipped .node-value { color: var(--accent-on-dark) !important; }
.map.is-live .node[data-order] { animation: nodeIn 0.5s both; animation-delay: var(--delay, 0ms); }
@keyframes nodeIn { from { opacity: 0.15; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } }
.map-empty, .prop-empty { margin-top: 1.25rem; color: var(--on-dark-mute); font-size: 0.95rem; }
.map + .propagation .prop-empty { display: block; }

.propagation .prop-title { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--on-dark-mute); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-on-dark); }
.prop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-on-dark); }
.prop-kind { font-size: 0.78rem; color: var(--accent-on-dark); }
.prop-fn { font-size: 0.78rem; color: var(--on-dark-mute); }
.prop-body strong { font-weight: 500; }
.prop-values { color: var(--accent-on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 0.35rem; }
.prop-note { display: block; font-size: 0.9rem; color: var(--on-dark-mute); margin-top: 0.15rem; line-height: 1.45; }
.prop-change { border-left: 3px solid var(--accent-on-dark); padding-left: 0.8rem; }
.prop-threshold .prop-body strong, .prop-escalation .prop-body strong { color: var(--on-dark); font-weight: 600; }
.unmoved { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--accent-on-dark); border-radius: 2px; font-size: 0.95rem; max-width: 46em; }
@media (min-width: 640px) { .prop { grid-template-columns: 9.5rem 8rem minmax(0, 1fr); gap: 1rem; } }
@media (min-width: 1000px) {
  .map { display: block; }
  .map + .propagation { margin-top: 1.75rem; }
  .map + .propagation .prop-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .map + .propagation :is(.prop-change, .prop-direct, .prop-second, .prop-threshold, .prop-cleared) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
  .map + .propagation .prop-empty { display: none; }
  .map + .propagation ol { border-top: 1px solid var(--rule-on-dark); }
  .map + .propagation ol:not(:has(.prop-conflict, .prop-evidence, .prop-escalation)) { border-top: 0; }
}

/* Contest */
.positions { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .positions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } }
.position { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: 0.9rem; align-content: start; }
.position header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.position h4 { font-size: var(--step-2); }
.stance { font-size: 0.82rem; color: var(--ink-2); padding: 0.15rem 0.55rem; border: 1px solid var(--rule); border-radius: 2px; }
.stance-for { border-color: var(--ink); }
.stance-against { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rec { font-family: var(--serif); font-size: var(--step-1); line-height: 1.45; }
.position dl { display: grid; gap: 0; border-top: 1px solid var(--rule); font-size: 0.93rem; }
.position dl > div { display: grid; gap: 0.2rem; padding: 0.65rem 0; border-bottom: 1px solid var(--rule); }
.position dt { font-size: 0.8rem; color: var(--mute); }
@media (min-width: 560px) { .position dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; } }
.cites { display: grid; gap: 0.4rem; }
.cites li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; color: var(--ink-2); line-height: 1.4; }
.cites .mark { width: 1.1rem; height: 1.1rem; font-size: 0.62rem; margin-top: 0.1rem; }
.position footer { display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: center; }
.conf { font-size: 0.82rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.45rem; }
.conf::before { content: ""; width: 2.1rem; height: 0.4rem; border: 1px solid var(--ink); background: linear-gradient(to right, var(--ink) var(--fill), transparent var(--fill)); }
.conf-low { --fill: 33%; } .conf-medium { --fill: 66%; } .conf-high { --fill: 100%; }

.cards { display: grid; gap: 1px; margin-top: 3rem; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--paper); padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: 0.5rem; align-content: start; font-size: 0.95rem; }
.card-kind { font-size: 0.8rem; color: var(--mute); display: flex; gap: 0.45rem; align-items: center; }
.card h4 { font-size: var(--step-1); }
.card-between { font-size: 0.85rem; font-weight: 600; }
.card-note { font-size: 0.85rem; color: var(--mute); }
.conflict-card { box-shadow: inset 3px 0 0 var(--accent); }
.conflict-card .card-kind { color: var(--accent); font-weight: 600; }
.state-value { font-family: var(--serif); font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.state-was { font-size: 0.85rem; color: var(--accent); }
.gate-card { background: var(--ink); color: var(--on-dark); }
.gate-card .card-kind { color: var(--on-dark-mute); }
.gate-card .auth { color: var(--on-dark); }
.gate-card .auth-level { border-color: var(--on-dark); background: var(--on-dark); color: var(--ink); }

.critic, .synthesis { margin-top: clamp(2.5rem, 5vw, 4rem); }
.critic h3, .synthesis h3 { font-size: var(--step-2); }
.critic-intro { color: var(--ink-2); margin-top: 0.5rem; max-width: 46em; }
.critic ul { margin-top: 1.5rem; border-top: 1px solid var(--ink); }
.finding { display: grid; gap: 0.2rem 1.5rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--rule); }
.finding-type { font-weight: 600; font-size: 0.92rem; }
.finding-fns { font-size: 0.82rem; color: var(--mute); }
.finding p { color: var(--ink-2); max-width: 48em; }
.finding-contradiction .finding-type, .finding-missing_evidence .finding-type { color: var(--accent); }
@media (min-width: 800px) { .finding { grid-template-columns: 14rem minmax(0, 1fr); } .finding-fns { grid-column: 1; } .finding p { grid-column: 2; grid-row: 1 / 3; } }
.synth-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.synth-grid > div { border-top: 1px solid var(--ink); padding-top: 0.9rem; }
.synth-grid h4 { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.synth-grid li + li { margin-top: 0.6rem; }
.synth-grid li, .synth-grid p { color: var(--ink-2); font-size: 0.97rem; }
.synth-dissent { border-top: 2px solid var(--accent) !important; }
.synth-dissent h4 { color: var(--accent); }
.synth-dissent strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .synth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.synth-note { margin-top: 1.75rem; font-family: var(--serif); font-size: var(--step-1); font-style: italic; }
.live { margin-top: 2.5rem; padding: 1.25rem; border: 1px dashed var(--rule); font-size: 0.92rem; color: var(--ink-2); display: grid; gap: 0.75rem; max-width: 46em; }
.live-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.live-status:empty { display: none; }

/* Decide */
.options { display: grid; gap: 1rem; }
@media (min-width: 900px) { .options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option-body { display: grid; gap: 0.6rem; align-content: start; height: 100%; padding: 1.4rem 1.3rem 1.5rem; border: 1px solid var(--rule); border-radius: 2px; transition: border-color 0.15s; }
.option-body > strong { font-family: var(--serif); font-weight: 500; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.option-summary { color: var(--ink-2); }
.carried { display: block; margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); }
.carried-label { display: block; font-size: 0.8rem; color: var(--mute); margin-bottom: 0.4rem; }
.carried li { padding-left: 1rem; position: relative; }
.carried li + li { margin-top: 0.3rem; }
.carried li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.45rem; height: 1px; background: var(--ink); }
.option:hover .option-body { border-color: var(--ink); }
.option input:focus-visible + .option-body { outline: 2px solid var(--accent); outline-offset: 3px; }
.option input:checked + .option-body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option input:checked + .option-body::after { content: "Your choice"; justify-self: start; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; background: var(--ink); color: var(--paper); padding: 0.2rem 0.6rem; border-radius: 2px; }
.reveal-row { margin-top: 1.5rem; }
html:not(.system-ready) .reveal-row { display: none; }

.signed { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--paper-2); border-left: 3px solid var(--accent); display: grid; gap: 1.1rem; animation: signedIn 0.5s both; }
@keyframes signedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.compare { font-size: 0.98rem; color: var(--ink-2); padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); max-width: 46em; }
.compare strong { color: var(--ink); font-weight: 600; }
.signed-kicker { font-size: 0.9rem; color: var(--accent); font-weight: 500; }
.signed-label { font-size: 0.82rem; color: var(--mute); margin: 0 0 0.4rem; font-family: var(--sans); }
.signed h3 { font-size: var(--step-3); letter-spacing: -0.02em; max-width: 20em; }
.signed h3:focus { outline: none; }
.signed-state { max-width: 44em; color: var(--ink-2); }
.signed-body { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; max-width: 40em; display: grid; gap: 0.9em; margin-top: 0.5rem; }
.signed-choice { font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.01em; }
.signed-grid { display: grid; gap: 0; border-top: 1px solid var(--ink); margin-top: 1rem; }
.signed-grid > div { padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--rule); }
.signed-grid dt { font-size: 0.82rem; color: var(--mute); margin-bottom: 0.3rem; }
.signed-grid dd { max-width: 36em; }
@media (min-width: 800px) { .signed-grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } .signed-grid .wide { grid-column: 1 / -1; } }
.principle { font-family: var(--serif); font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.01em; max-width: 28em; margin-top: 1rem; }
.signature { font-family: var(--serif); font-style: italic; font-size: var(--step-2); margin-top: 0.5rem; }
.signature span { border-top: 1px solid var(--ink); padding-top: 0.5rem; display: inline-block; padding-right: 2.5rem; }
.signed-note { font-size: 0.85rem; color: var(--mute); max-width: 46em; }

/* Act */
.act-lead { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.act-lead h3 { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0; color: var(--mute); margin-bottom: 0.4rem; }
.act-lead p { font-family: var(--serif); font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.01em; max-width: 24em; }
@media (min-width: 800px) { .act-lead { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.actions { border-top: 1px solid var(--ink); counter-reset: a; }
.actions li { counter-increment: a; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.3rem 0; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.actions li::before { content: counter(a); font-size: 0.85rem; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 0.1rem; }
.action-meta { grid-column: 2; display: flex; gap: 0.4rem 1.5rem; flex-wrap: wrap; align-items: center; }
.owner { font-size: 0.82rem; color: var(--mute); min-width: 7rem; }
@media (min-width: 800px) { .actions li { grid-template-columns: 2rem minmax(0, 6fr) minmax(0, 5fr); align-items: baseline; } .action-meta { grid-column: 3; } }
.ladder { margin-top: 2rem; font-size: 0.95rem; }
.ladder summary { cursor: pointer; color: var(--accent); padding-block: 0.5rem; }
.ladder ol { margin-top: 0.75rem; display: grid; gap: 0.6rem; max-width: 46em; color: var(--ink-2); }
.ladder li { display: grid; grid-template-columns: 2rem 1fr; }
.ladder li strong { font-weight: 600; color: var(--ink); }
.ladder li > .auth-level { grid-row: 1 / 3; margin-top: 0.15rem; }

/* Learn */
.outcome { margin-top: 2rem; }
.outcome:not(.outcome-empty) { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--ink); display: grid; gap: 0.75rem; animation: signedIn 0.45s both; }
.outcome-kind { font-family: var(--serif); font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.02em; max-width: 20em; }
.outcome-robust .outcome-kind { color: var(--ink); }
.outcome-threshold .outcome-kind, .outcome-objective .outcome-kind, .outcome-insufficient .outcome-kind { color: var(--accent); }
.outcome-explain { color: var(--ink-2); }
.outcome-compare { display: grid; gap: 1.5rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.oc-label { font-size: 0.82rem; color: var(--mute); margin-bottom: 0.3rem; }
.oc-head { font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; margin-bottom: 0.5rem; }
.outcome-compare p:not(.oc-label):not(.oc-head) { color: var(--ink-2); font-size: 0.97rem; }
@media (min-width: 800px) { .outcome-compare { grid-template-columns: 4fr 7fr; gap: 3rem; } }
.moved { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.moved caption { text-align: left; font-size: 0.82rem; color: var(--mute); padding-bottom: 0.5rem; }
.moved th, .moved td { text-align: left; padding: 0.55rem 1rem 0.55rem 0; border-top: 1px solid var(--rule); font-weight: 400; vertical-align: top; }
.moved thead th { font-size: 0.8rem; color: var(--mute); border-top-color: var(--ink); }
.moved td:last-child { color: var(--accent); font-weight: 500; }

/* End of decision */
.d-end { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem) !important; }
.d-end-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.d-end-grid > * { background: var(--paper); padding: 1.5rem; display: grid; gap: 0.35rem; align-content: start; text-decoration: none; }
.d-end-grid span { font-size: 0.82rem; color: var(--mute); }
.d-end-grid strong { font-family: var(--serif); font-weight: 500; font-size: var(--step-1); line-height: 1.25; }
.d-end-grid em { font-style: normal; font-size: 0.9rem; color: var(--ink-2); }
.d-next:hover { color: inherit; }
.d-next:hover strong { color: var(--accent); }
.d-contact p { font-size: 0.95rem; color: var(--ink-2); }
@media (min-width: 900px) { .d-end-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Method dialog */
dialog { border: 0; padding: 0; background: var(--paper); color: var(--ink); width: min(46rem, calc(100vw - 2rem)); max-height: min(85vh, 60rem); border-radius: 3px; box-shadow: 0 1.5rem 4rem rgba(21, 19, 15, 0.35); }
dialog::backdrop { background: rgba(21, 19, 15, 0.62); }
.dialog-body { padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: 1rem; font-size: 0.97rem; }
.dialog-body h2 { font-size: var(--step-2); }
.dialog-body h3 { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; margin-top: 0.75rem; }
.dialog-body ul { display: grid; gap: 0.7rem; color: var(--ink-2); }
.dialog-body ul strong { color: var(--ink); font-weight: 600; }
.dialog-body p { color: var(--ink-2); }
.formulas { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 30rem; }
.formulas th, .formulas td { text-align: left; font-weight: 400; padding: 0.5rem 1rem 0.5rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.formulas thead th { color: var(--mute); font-size: 0.78rem; border-top: 0; }
.formulas tbody th { font-weight: 500; }
.method-version { font-size: 0.8rem; color: var(--mute) !important; }