/* causal-debugger.css - the Olfactory Causal Debugger on the teaching accord pages (Lane 22, 2026-09-30). Tokens and roles only
   (roles.css); the tool is the house Tool archetype (a parchment-card island, .rp-tool, where every role flips to ink on paper) with
   its result as an engraved panel (.rp-result); labels in Plex Mono; the dry-down curve is an engraved line with hatching under it,
   and the top / heart / base balance is told by hatch DENSITY (sparse, close, crossed) plus words, never by colour alone
   (DESIGN_SYSTEM §5, §10). Nothing animates under prefers-reduced-motion; nothing animates on load at all. */
.cd{margin:var(--rp-space-scale-12) 0 var(--rp-space-scale-8)}
.cd>.rp-h3{margin-top:0}
.cd-kicker{display:block;margin:.5em 0 0;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rp-brass)}
.cd .rp-notice{margin-top:var(--rp-space-scale-4)}
/* one column always: the result needs the whole plate for before -> after */
.cd .cd-tool{grid-template-columns:minmax(0,1fr);gap:var(--rp-space-scale-4)}
@media (min-width:900px){.cd .cd-tool{padding:var(--rp-space-scale-8)}}
.cd-form .rp-field{margin-bottom:var(--rp-space-scale-4)}
.cd-form .rp-fieldset{margin-bottom:var(--rp-space-scale-2)}
.cd-ops{display:flex;flex-wrap:wrap;gap:0 var(--rp-space-scale-4)}
.cd-ops .rp-check{min-height:44px}
.cd-ops input:disabled+span{opacity:.55}
.cd-note{margin:0}
.cd .cd-result{min-height:9rem}
.cd-empty{margin:0;font:400 var(--rp-type-scale-small)/1.6 var(--rp-body);color:var(--rp-ink-2)}
.cd-change{margin:0 0 var(--rp-space-scale-4);font:500 var(--rp-type-scale-h3)/1.2 var(--rp-display);color:var(--rp-ink)}
.cd-change:focus{outline:none}
.cd-layer{margin:0;padding:var(--rp-space-scale-4) 0;border-top:1px solid var(--rp-ink-2)}
.cd-layer h4{margin:0 0 .5em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rp-ink)}
/* the "modeled" mark on every computed output: a Plex Mono label on a hairline box, the plate's own caption style */
.cd-m{display:inline-block;margin-left:.6em;padding:.05em .45em;border:1px solid var(--rp-ink-2);font:500 .62rem/1.5 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-ink-2);vertical-align:.1em}
.cd-line{margin:0;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-ink)}
.cd-line+.cd-line{margin-top:.4em}
/* Lane 27: the row that holds a layer's chips and its "no … on record" notes (a div: a <details> may not sit in a <p>) takes the
   layer's own size; the notes inherited the body's 17.5 px */
.cd-chips{margin:.4em 0 0;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-ink)}
.cd-chips .rp-null{font-size:inherit;margin-right:.8em}
.cd-read{font-style:italic}
.cd-links{margin:.5em 0 0;padding:0;list-style:none;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-ink-2)}
.cd-links li{margin:0 0 .2em}
/* the archetype sets every li in a section to the body size (a :where rule, zero specificity): the lists here keep their own */
.cd-links li,.cd-why li,.cd-dl li{font-size:inherit;line-height:inherit}
.cd-links a,.cd-line a,.cd-why a{color:var(--rp-ink);text-decoration:underline;text-decoration-color:var(--rp-ink-2);text-underline-offset:.2em}
.cd-result .rp-evidence{display:inline-block;margin:.3em .8em 0 0;vertical-align:top}
.cd-result .rp-evidence[open]{display:block}
/* before -> after, side by side: two columns of engraved bars (aria-hidden; the numbers are in the text line) */
.cd-ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--rp-space-scale-2) var(--rp-space-scale-4);margin:.2em 0 .7em}
.cd-ba-k{margin:0 0 .3em;font:500 .62rem/1.4 var(--rp-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rp-ink-2)}
/* Lane 27: a long name wraps ("2-phenylethyl / alcohol") instead of being cut with an ellipsis; the bar sits level with its first line */
.cd-bar{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);align-items:start;gap:.5em;margin:0 0 .35em;font:400 .7rem/1.3 var(--rp-mono);color:var(--rp-ink)}
.cd-bar>span:first-child{white-space:normal;overflow-wrap:break-word;hyphens:manual}
.cd-bar i{margin-top:.38em}
.cd-bar i{display:block;height:.55em;min-width:1px;background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 3px);border-right:1px solid var(--rp-ink)}
.cd-bar.is-changed{font-weight:600}
.cd-bar.is-changed i{background:var(--rp-ink)}
/* the dry-down curve: the engraved line (after) over the dashed line (as written), hatching under the line after the change */
.cd-curve{display:block;width:100%;max-width:26rem;height:auto;margin:.2em 0 .5em;color:var(--rp-ink);overflow:visible}
.cd-curve text{font:400 11px var(--rp-mono);fill:var(--rp-ink-2);letter-spacing:.06em}
.cd-balance{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em .6em;align-items:center;max-width:26rem;margin:.2em 0 .6em;font:400 .68rem/1.3 var(--rp-mono);color:var(--rp-ink-2)}
.cd-balance>div{display:flex;height:.9em;border:1px solid var(--rp-ink-2)}
.cd-balance b{display:block;height:100%;font-weight:400}
.cd-balance b+b{border-left:1px solid var(--rp-ink)}
.cd-balance .t{background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 8px)}
.cd-balance .h{background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 3px)}
.cd-balance .b{background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 3px),repeating-linear-gradient(35deg,var(--rp-ink) 0 1px,transparent 1px 3px)}
.cd-legend{margin:0 0 .4em;font:400 .68rem/1.5 var(--rp-mono);letter-spacing:.04em;color:var(--rp-ink-2)}
/* why did this change matter? */
.cd-why{margin:var(--rp-space-scale-4) 0 0;padding:var(--rp-space-scale-4) 0 0;border-top:3px double var(--rp-ink)}
.cd-why>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 var(--rp-type-scale-h3)/1.2 var(--rp-display);color:var(--rp-ink)}
.cd-why>summary:focus-visible{outline:var(--rp-focus-ring);outline-offset:3px}
.cd-why ol{margin:.5em 0 0;padding-left:1.4em;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-ink)}
.cd-why li{margin:0 0 .8em}
.cd-why li::marker{font-family:var(--rp-display)}
.cd-result[data-state="error"] .cd-err{margin:0;font:500 var(--rp-type-scale-small)/1.5 var(--rp-body);color:var(--rp-error)}
@media (prefers-reduced-motion:no-preference){.cd-result.rp-result-update{animation:rp-result-in var(--rp-dur-base) var(--rp-ease-act) both}}
@media (prefers-reduced-motion:reduce){.cd-result,.cd-result *{animation:none!important;transition:none!important}}
/* the HTML equivalent: every single change, worked out */
.cd-h{margin:var(--rp-space-scale-8) 0 var(--rp-space-scale-3);font:500 var(--rp-type-scale-h3)/1.2 var(--rp-display);color:var(--rp-text)}
.cd-cases{margin:var(--rp-space-scale-3) 0 var(--rp-space-scale-4);border-top:1px solid var(--rp-hair)}
.cd-case{border-bottom:1px solid var(--rp-hair)}
.cd-case>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.6em;padding:.4em 0;font:400 var(--rp-body-size)/1.4 var(--rp-body);color:var(--rp-text)}
.cd-case>summary::marker{color:var(--rp-brass)}
.cd-case>summary:focus-visible{outline:var(--rp-focus-ring);outline-offset:2px}
.cd-dl{margin:0 0 var(--rp-space-scale-4);display:grid;gap:.5em}
.cd-dl dt,.cd-inputs dt{margin:0;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted)}
.cd-dl dd,.cd-inputs dd{margin:0;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-text)}
.cd-dl ol{margin:.2em 0 0;padding-left:1.3em}
.cd-inputs{margin:0;display:grid;gap:var(--rp-space-scale-3)}
.cd-inputs dt a,.cd-inputs dd a{color:var(--rp-on-accent);text-decoration:underline;text-decoration-color:var(--rp-on-rule);text-underline-offset:.2em}
.cd-inputs .rp-evidence{display:inline-block;margin:0 .4em 0 .3em}
.cd-inputs .rp-evidence[open]{display:block}
/* anchors and scripted scrolls land below the sticky top bar */
.cd,.cd-result,.cd-why,.cd-cases{scroll-margin-top:6rem}
/* WCAG 2.2 target size (2.5.8): a list line that is one link gets a 24 px target */
.cd-links a{display:inline-block;min-height:24px;line-height:24px}
.cd-links .rp-evidence,.cd-why .rp-evidence{margin-left:.6em}
/* a phone: "as written" above "after", each with room for the names */
@media (max-width:600px){.cd-ba{grid-template-columns:minmax(0,1fr)}.cd-bar{grid-template-columns:minmax(0,11em) minmax(0,1fr)}}
/* the disclosure mark of a summary laid out as flex (the list-item marker is gone): + closed, − open; hidden from speech (the
   summary already says expanded / collapsed) */
.cd-case>summary{list-style:none}.cd-case>summary::-webkit-details-marker,.cd-why>summary::-webkit-details-marker{display:none}
.cd-case>summary::before,.cd-why>summary::before{content:"+" / "";flex:0 0 1em;font-family:var(--rp-mono);color:var(--rp-brass)}
.cd-why>summary::before{color:var(--rp-ink-2)}
.cd-case[open]>summary::before,.cd-why[open]>summary::before{content:"\2212" / ""}
.cd-why>summary{list-style:none;gap:.4em}
/* the station strip on a teaching accord page: the deferred legacy `p{max-width:68ch}` (styles.css) wrapped the long "You are here"
   line at 1440 after first paint (a 0.126 layout shift, measured with and without this block; Lane 20's pages have it too). The
   proper home of this rule is spine-nav.css (a one-line diff for main in docs/plan/LANE22_REPORT.md); it sits here so the accord
   pages hold still meanwhile */
.rp-spine-here,.rp-spine-steps{max-width:none}