/* perfume-autopsy.css - the Perfume Autopsy on the teaching accord pages (2026-09-30). Tokens and roles only (roles.css). The pickers and
   the comparison sit in the house Tool archetype (a parchment-card island, .rp-tool) with the comparison as an engraved panel
   (.rp-result), the same family as the Causal Debugger above it; labels in Plex Mono with a boxed "MODELED" mark; A and B as two columns
   of engraved bars (B's changed lines solid); the dry-down as an engraved line (A dashed, B solid with hatching under it) and the
   top / heart / base balance told by hatch DENSITY plus words, never by colour alone (DESIGN_SYSTEM §5, §10). Nothing animates under
   prefers-reduced-motion, and nothing animates on load at all. */
.ap{margin:var(--rp-space-scale-12) 0 var(--rp-space-scale-8);scroll-margin-top:6rem}
.ap>.rp-h3{margin-top:0}
.ap-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)}
.ap .rp-notice{margin-top:var(--rp-space-scale-4)}
.ap-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)}
/* the versions, and why each exists (on the page ground) */
.ap-versions{margin:0 0 var(--rp-space-scale-6);padding:0;list-style:none;border-top:1px solid var(--rp-hair)}
.ap-versions>li{margin:0;padding:var(--rp-space-scale-3) 0;border-bottom:1px solid var(--rp-hair);font-size:inherit;line-height:inherit}
.ap-v-h{margin:0 0 .3em;font:400 var(--rp-body-size)/1.4 var(--rp-body);color:var(--rp-text)}
.ap-v-h b{font-weight:600}
.ap-tag{display:inline-block;margin-left:.4em;padding:.05em .45em;border:1px solid var(--rp-text-muted);font:500 .62rem/1.5 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted);vertical-align:.1em}
.ap-v-why{margin:0 0 .3em;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-text)}
.ap-v-basis{font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.06em;color:var(--rp-text-muted)}
.ap-versions .ap-links{margin:.4em 0 0;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.ap-versions .ap-links a{color:var(--rp-text-muted);min-height:24px;line-height:24px}
.ap-versions .ap-links .ap-k{font-size:inherit}
.ap-versions a,.ap-table a{color:var(--rp-on-accent);text-decoration:underline;text-decoration-color:var(--rp-on-rule);text-underline-offset:.2em}
.ap-versions .rp-evidence{display:inline-block;margin:0 .4em 0 .2em;vertical-align:baseline}
.ap-versions .rp-evidence[open]{display:block}
/* every version's parts: one column per version; numbers in tabular figures; fits 390 without a sideways scroll */
.ap-table-wrap{margin:0 0 var(--rp-space-scale-8);max-width:100%}
.ap-table{width:100%;border-collapse:collapse;font:400 var(--rp-type-scale-small)/1.5 var(--rp-body);color:var(--rp-text)}
.ap-table caption{caption-side:top;text-align:left;margin:0 0 .5em;font:500 var(--rp-type-scale-label)/1.5 var(--rp-mono);letter-spacing:.06em;color:var(--rp-text-muted)}
.ap-table th,.ap-table td{padding:.35em .5em;border-bottom:1px solid var(--rp-hair);text-align:right;vertical-align:baseline}
.ap-table th[scope="row"],.ap-table thead th:first-child{text-align:left;padding-left:0;font-weight:400;overflow-wrap:anywhere}
.ap-table thead th{font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;color:var(--rp-text-muted);border-bottom:1px solid var(--rp-text-muted)}
.ap-table td{font-family:var(--rp-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-k{font:400 .68rem/1.4 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
/* the tool: two pickers side by side from 600 px, the comparison under them, one column always */
.ap .ap-tool{grid-template-columns:minmax(0,1fr);gap:var(--rp-space-scale-4)}
@media (min-width:900px){.ap .ap-tool{padding:var(--rp-space-scale-8)}}
.ap-form{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ap-form .rp-field{margin-bottom:var(--rp-space-scale-3)}
.ap-form .rp-select{width:100%}
.ap-note{margin:0}
.ap .ap-result{min-height:9rem}
.ap-empty{margin:0;font:400 var(--rp-type-scale-small)/1.6 var(--rp-body);color:var(--rp-ink-2)}
.ap-pair{display:flex;flex-wrap:wrap;gap:.2em .5em;align-items:baseline;margin:0 0 var(--rp-space-scale-4);font:500 var(--rp-type-scale-h3)/1.25 var(--rp-display);color:var(--rp-ink)}
.ap-pair:focus{outline:none}
.ap-to{font-family:var(--rp-mono);color:var(--rp-ink-2)}
.ap-layer{margin:0;padding:var(--rp-space-scale-4) 0;border-top:1px solid var(--rp-ink-2)}
.ap-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)}
.ap-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}
.ap-line{margin:0;font:400 var(--rp-type-scale-small)/1.65 var(--rp-body);color:var(--rp-ink)}
.ap-line+.ap-line{margin-top:.4em}
.ap-read{font-style:italic}
.ap-result .ap-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)}
.ap-result .ap-links li,.ap-why li{margin:0 0 .2em;font-size:inherit;line-height:inherit}
.ap-result a{color:var(--rp-ink);text-decoration:underline;text-decoration-color:var(--rp-ink-2);text-underline-offset:.2em}
.ap-result .ap-links a{display:inline-block;min-height:24px;line-height:24px}
.ap-chips{margin:.3em 0 0}
.ap-result .rp-evidence{display:inline-block;margin:.3em .8em 0 0;vertical-align:top}
.ap-result .rp-evidence[open]{display:block}
/* A and B side by side: two columns of engraved bars on one scale (aria-hidden; the numbers are in the text line) */
.ap-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}
.ap-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)}
.ap-bar{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);align-items:center;gap:.5em;margin:0 0 .25em;font:400 .7rem/1.3 var(--rp-mono);color:var(--rp-ink)}
.ap-bar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-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)}
.ap-bar i.z{min-width:0;border:0;background:none}
.ap-bar.is-hot{font-weight:600}
@media (min-width:900px){.ap-bar{grid-template-columns:minmax(0,10.5em) minmax(0,1fr)}}
.ap-what{margin:0;padding:0 0 0 1.1em;font:400 var(--rp-type-scale-small)/1.6 var(--rp-body);color:var(--rp-ink)}
.ap-what li{margin:0 0 .25em;font-size:inherit;line-height:inherit}
.ap-bar.is-hot i{background:var(--rp-ink)}
/* an absent component or word draws no bar (vision check 20260930-2026: is-hot used to paint it full width) */
.ap-bar i.z,.ap-bar.is-hot i.z{width:0;min-width:0;border:0;background:none}
/* the dry-down */
.ap-curve{display:block;width:100%;max-width:26rem;height:auto;margin:.2em 0 .5em;color:var(--rp-ink);overflow:visible}
.ap-curve text{font:400 11px var(--rp-mono);fill:var(--rp-ink-2);letter-spacing:.06em}
.ap-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)}
.ap-balance>div{display:flex;height:.9em;border:1px solid var(--rp-ink-2)}
.ap-balance b{display:block;height:100%;font-weight:400}
.ap-balance b+b{border-left:1px solid var(--rp-ink)}
.ap-balance .t{background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 8px)}
.ap-balance .h{background:repeating-linear-gradient(-35deg,var(--rp-ink) 0 1px,transparent 1px 3px)}
.ap-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)}
.ap-legend{margin:0 0 .4em;font:400 .68rem/1.5 var(--rp-mono);letter-spacing:.04em;color:var(--rp-ink-2)}
/* why could it smell different? */
.ap-why{margin:var(--rp-space-scale-4) 0 0;padding:var(--rp-space-scale-4) 0 0;border-top:3px double var(--rp-ink)}
.ap-why>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4em;list-style:none;font:500 var(--rp-type-scale-h3)/1.2 var(--rp-display);color:var(--rp-ink)}
.ap-why>summary::-webkit-details-marker{display:none}
.ap-why>summary::before{content:"+" / "";flex:0 0 1em;font-family:var(--rp-mono);color:var(--rp-ink-2)}
.ap-why[open]>summary::before{content:"\2212" / ""}
.ap-why>summary:focus-visible{outline:var(--rp-focus-ring);outline-offset:3px}
.ap-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)}
.ap-why li{margin:0 0 .8em}
.ap-why li::marker{font-family:var(--rp-display)}
.ap-why .ap-refs{margin:.3em 0 0;padding:0;list-style:none}
.ap-why .ap-refs li{margin:0}
.ap-why .rp-evidence{margin-left:0}
.ap-err{margin:0 0 var(--rp-space-scale-4);font:500 var(--rp-type-scale-small)/1.5 var(--rp-body);color:var(--rp-error)}
@media (prefers-reduced-motion:no-preference){.ap-result.rp-result-update{animation:rp-result-in var(--rp-dur-base) var(--rp-ease-act) both}}
@media (prefers-reduced-motion:reduce){.ap-result,.ap-result *{animation:none!important;transition:none!important}}
/* a phone: A above B, each with room for the names */
@media (max-width:600px){.ap-ba{grid-template-columns:minmax(0,1fr)}.ap-bar{grid-template-columns:minmax(0,11em) minmax(0,1fr)}}

/* L1 (gate 7 MOBILE): the links under each version are 44 px tap targets */
.ap-links a,.ap a[href^="/molecule/"],.ap a[href^="/material/"]{display:inline-flex;align-items:center;min-height:44px}
.ap .ap-links a{min-height:44px!important;display:inline-flex;align-items:center}