/* SynapticSci component classes — v3.3, theme-aware. Sizes read --fs-*, --section-pad, --card-pad, --control-h from the active theme (core.css + theme-*.css).
   Every rule traces to a concept; see README. No shadows, no gradients (value-simplicity, value-robust). */

/* ── overlay: the one product-theme elevation step; none in commercial ── */
.ss-overlay{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--elevation-overlay);border:1px solid var(--rule)}

/* ── v1: masthead (cnt-006) — classic journal double hairline ── */
.site-masthead,.ss-masthead{border-bottom:1px solid var(--rule);box-shadow:var(--double-hairline);background:var(--paper)}
.masthead-inner,.ss-masthead-inner{max-width:var(--content-max);margin:0 auto;padding:var(--section-gap) var(--sp-5) var(--sp-4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.brand,.ss-brand{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;letter-spacing:0.01em;color:var(--ink);text-decoration:none}
.brand:hover,.ss-brand:hover{color:var(--primary)}
.site-nav,.ss-nav{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.site-nav a,.ss-nav a{font-size:var(--fs-caption);text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:var(--sp-1) 0;border-bottom:2px solid transparent}
.site-nav a:hover,.ss-nav a:hover{color:var(--primary)}
.site-nav a[aria-current="page"],.ss-nav a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary)}

/* ── v1: page shell (cnt-001) ── */
.page,.ss-page{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-5) calc(var(--section-pad) * 1.5)}
.page-hero,.ss-page-hero{padding:calc(var(--section-pad) * 1.5) 0 var(--section-pad);border-bottom:1px solid var(--rule)}
.page-hero h1,.ss-page-hero h1{font-family:var(--font-display);font-size:clamp(var(--fs-h1),5vw,var(--fs-hero));line-height:var(--lh-heading);font-weight:700;margin:0 0 var(--sp-5);max-width:22ch;text-wrap:balance}
.page-hero .section-body,.ss-page-hero .ss-section-body{font-size:var(--fs-lead);line-height:var(--lh-normal);max-width:58ch;color:var(--ink-soft)}
.page-section,.ss-section{padding:var(--section-pad) 0;border-bottom:1px solid var(--rule)}
.eyebrow,.ss-eyebrow{font-family:var(--font-label);font-size:var(--fs-label);text-transform:uppercase;color:var(--patina-deep);margin:0 0 var(--sp-3);letter-spacing:var(--track-label)}
.page-section h2,.ss-section h2{font-family:var(--font-heading,var(--font-display));font-size:clamp(var(--fs-h2),3.4vw,var(--fs-h1));line-height:var(--lh-heading);font-weight:700;margin:0 0 var(--sp-4);max-width:30ch;text-wrap:balance}
.section-body,.ss-section-body{margin:0 0 var(--sp-4);max-width:var(--measure)}

/* ── v1: need chip (cnt-005) ── */
.need-chip,.ss-need-chip{display:inline-block;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--surface);font-size:var(--fs-caption);letter-spacing:0.04em;color:var(--ink-soft)}

/* ── v1: index card (cnt-002) ── */
.card-grid,.ss-card-grid{margin:var(--sp-6) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4)}
.index-card,.ss-index-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-2)}
.index-card h3,.ss-index-card h3{font-family:var(--font-heading,var(--font-display));font-size:var(--fs-h3);margin:0}
.index-card h3 a,.ss-index-card h3 a{color:var(--ink);text-decoration:none}
.index-card h3 a:hover,.ss-index-card h3 a:hover{color:var(--primary);text-decoration:underline}
.index-card .card-meta,.ss-index-card .ss-card-meta{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);margin:0}
.index-card .card-detail,.ss-index-card .ss-card-detail{margin:0;color:var(--ink-soft);font-size:var(--fs-body);line-height:var(--lh-normal)}
.index-card .card-evidence,.ss-index-card .ss-card-evidence{margin:var(--sp-2) 0 0;font-size:var(--fs-caption);color:var(--patina-deep);font-weight:600}

/* ── v1: evidence line (cnt-003) — the signature mark; patina appears here and nowhere else ── */
.evidence-line,.ss-evidence-line{margin:var(--sp-5) 0 0;padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);border-left:2px solid var(--patina);font-size:var(--fs-caption);line-height:var(--lh-relaxed);color:var(--ink-soft);max-width:var(--content-note)}
.evidence-label,.ss-evidence-label{color:var(--patina-deep);font-weight:700;text-transform:uppercase;margin-right:var(--sp-2);letter-spacing:var(--track-caps)}
.evidence-refs,.ss-evidence-refs{font-family:var(--font-mono);font-size:var(--fs-caption)}

/* ── v1: governed empty note (cnt-004) ── */
.held-note,.ss-held-note{background:var(--held-bg);border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--card-pad);max-width:var(--content-note);font-size:var(--fs-body);color:var(--ink-soft)}

/* ── v1: footer + governance seal (cnt-007) ── */
.site-footer,.ss-footer{background:var(--ground-ink);color:var(--on-ink-text)}
.footer-inner,.ss-footer-inner{max-width:var(--content-max);margin:0 auto;padding:var(--sp-7) var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-caption);line-height:var(--lh-relaxed)}
.footer-inner .brand,.ss-footer-inner .ss-brand{color:var(--on-ink-text);font-size:var(--fs-h3)}
.footer-provenance,.ss-footer-provenance{max-width:48ch;color:var(--on-ink-text);margin:0}
.footer-provenance .evidence-label,.ss-footer-provenance .ss-evidence-label{display:block;margin:0 0 var(--sp-1);color:var(--on-ink-text)}
.governance-seal,.ss-governance-seal{max-width:48ch;margin:var(--sp-4) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--on-ink-rule);color:var(--on-ink-text);font-size:var(--fs-caption);line-height:var(--lh-relaxed)}
.governance-seal .evidence-label,.ss-governance-seal .ss-evidence-label{display:block;margin:0 0 var(--sp-1);color:var(--on-ink-text)}
.governance-seal .seal-version,.ss-governance-seal .ss-seal-version{font-family:var(--font-mono)}

/* ── v2: buttons — no true button existed in v1 (cnt-008 was link-based) ── */
.ss-btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-tight);min-height:var(--control-h);padding:0 var(--control-pad-x);transition:background var(--motion-fast),border-color var(--motion-fast);border-radius:var(--radius-control);border:1px solid transparent;cursor:pointer;text-decoration:none;background:none}
.ss-btn-primary,.ss-btn--primary{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.ss-btn-primary:hover,.ss-btn--primary:hover{background:var(--primary-deep);border-color:var(--primary-deep)}
.ss-btn-secondary,.ss-btn--secondary{background:var(--surface);color:var(--primary);border-color:var(--primary)}
.ss-btn-secondary:hover,.ss-btn--secondary:hover{background:var(--primary-wash)}
.ss-btn-quiet,.ss-btn--quiet{color:var(--primary);border-color:transparent;padding:0 var(--sp-4)}
.ss-btn-quiet:hover,.ss-btn--quiet:hover{background:var(--primary-wash)}
.ss-btn-primary:active,.ss-btn--primary:active{background:var(--primary-deep);border-color:var(--primary-deep)}
.ss-btn-secondary:active,.ss-btn-quiet:active,.ss-btn--secondary:active,.ss-btn--quiet:active{background:var(--primary-wash);border-color:var(--primary)}
.ss-btn[aria-busy="true"]{cursor:progress}
.ss-btn[aria-busy="true"]::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:ss-spin 800ms linear infinite}
@keyframes ss-spin{to{transform:rotate(360deg)}}
.ss-btn:disabled,.ss-btn[aria-disabled="true"]{background:var(--held-bg);color:var(--ink-soft);border-color:var(--rule);cursor:not-allowed}
.ss-btn-small,.ss-btn--small{font-size:var(--fs-caption);min-height:calc(var(--control-h) - var(--sp-2));padding:0 var(--sp-4)}

/* ── v2: forms ── */
.ss-field{display:flex;flex-direction:column;gap:var(--sp-2);max-width:48ch;margin:0 0 var(--section-gap)}
.ss-label{font-size:var(--fs-caption);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:var(--track-caps)}
.ss-help{font-size:var(--fs-caption);color:var(--ink-soft);margin:0}
.ss-error{font-size:var(--fs-caption);color:var(--danger-text);margin:0}
.ss-error::before{content:"Withheld — ";font-weight:700}
.ss-input,.ss-select,.ss-textarea{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-card);min-height:var(--control-h);padding:0 var(--sp-3)}
.ss-textarea{min-height:calc(var(--control-h) * 3);padding:var(--sp-3)}
.ss-input:hover,.ss-select:hover,.ss-textarea:hover{border-color:var(--ink-soft)}
.ss-input:focus-visible,.ss-select:focus-visible,.ss-textarea:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-color:var(--primary)}
.ss-input[aria-invalid="true"],.ss-select[aria-invalid="true"]{border-color:var(--danger-text)}
.ss-input:disabled,.ss-select:disabled,.ss-textarea:disabled{background:var(--held-bg);color:var(--ink-soft)}
.ss-choice{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body);color:var(--ink);cursor:pointer;max-width:48ch}
.ss-choice input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--primary);flex:none}
.ss-choice:hover input:not(:disabled){outline:1px solid var(--ink-soft);outline-offset:1px}
.ss-choice:has(input:disabled){color:var(--ink-soft);cursor:not-allowed}
.ss-choice input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-choice .ss-choice-help{display:block;font-size:var(--fs-caption);color:var(--ink-soft)}

/* ── v2: table — journal register: hairline rules, no zebra ── */
.ss-table{border-collapse:collapse;width:100%;font-size:var(--fs-body);line-height:var(--lh-normal)}
.ss-table caption{font-family:var(--font-heading,var(--font-display));font-size:var(--fs-body);text-align:left;padding:0 0 var(--sp-3);color:var(--ink)}
.ss-table th{font-family:var(--font-label);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-soft);font-weight:700;text-align:left;padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;border-bottom:1px solid var(--ink-soft)}
.ss-table td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ss-table td.ss-num,.ss-table th.ss-num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.ss-table tr:hover td{background:var(--primary-wash)}

/* ── v2: status badge — never color alone; label always present ── */
.ss-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--track-caps);font-weight:700;padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--surface);color:var(--ink-soft)}
.ss-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-soft)}
.ss-badge-ready,.ss-badge--ready{color:var(--status-ready)}.ss-badge-ready::before,.ss-badge--ready::before{background:var(--status-ready)}
.ss-badge-withheld,.ss-badge--withheld{color:var(--status-withheld)}.ss-badge-withheld::before,.ss-badge--withheld::before{background:var(--status-withheld)}
.ss-badge-review,.ss-badge--review{background:var(--status-review-bg)}
/* v3.1 product-theme statuses — mapped to existing hues, no new colors */
.ss-badge-running,.ss-badge--running{color:var(--status-running)}.ss-badge-running::before,.ss-badge--running::before{background:var(--status-running)}
.ss-badge-queued,.ss-badge--queued{color:var(--status-queued)}.ss-badge-queued::before,.ss-badge--queued::before{background:var(--status-queued)}
.ss-badge-failed,.ss-badge--failed{color:var(--status-failed)}.ss-badge-failed::before,.ss-badge--failed::before{background:var(--status-failed)}

/* ── v2: tabs ── */
.ss-tabs{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:thin}
.ss-tab{flex:none}
.ss-tab{font-family:var(--font-body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-soft);background:none;border:none;border-bottom:2px solid transparent;padding:var(--sp-2) 0 var(--sp-3);margin-bottom:-1px;cursor:pointer}
.ss-tab:hover{color:var(--primary)}
.ss-tab:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-tab[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}

/* ── v2: accordion ── */
.ss-accordion{border-top:1px solid var(--rule)}
.ss-accordion details{border-bottom:1px solid var(--rule)}
.ss-accordion summary{font-family:var(--font-heading,var(--font-display));font-size:var(--fs-h3);padding:var(--sp-4) 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4)}
.ss-accordion summary::-webkit-details-marker{display:none}
.ss-accordion summary::after{content:"+";color:var(--ink-soft);font-family:var(--font-body)}
.ss-accordion details[open] summary::after{content:"\2212"}
.ss-accordion summary:hover{color:var(--primary)}
.ss-accordion .ss-accordion-body{padding:0 0 var(--sp-5);max-width:var(--measure);color:var(--ink-soft)}

/* ── v2: breadcrumbs ── */
.ss-breadcrumbs{font-size:var(--fs-caption);color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.ss-breadcrumbs li{display:flex;gap:var(--sp-2);align-items:baseline}
.ss-breadcrumbs li+li::before{content:"/";color:var(--rule)}
.ss-breadcrumbs a{color:var(--ink-soft);text-decoration:none}
.ss-breadcrumbs a:hover{color:var(--primary);text-decoration:underline}
.ss-breadcrumbs [aria-current="page"]{color:var(--ink)}

/* ── v2: pagination ── */
.ss-pagination{display:flex;gap:var(--sp-2);list-style:none;margin:0;padding:0;align-items:center}
.ss-pagination a,.ss-pagination span{display:inline-flex;min-width:var(--control-h);height:var(--control-h);align-items:center;justify-content:center;padding:0 var(--sp-2);font-size:var(--fs-caption);color:var(--ink-soft);text-decoration:none;border:1px solid transparent;border-radius:var(--radius-card)}
.ss-pagination a:hover{color:var(--primary);border-color:var(--rule);background:var(--surface)}
.ss-pagination [aria-current="page"]{color:var(--surface);background:var(--primary);border-color:var(--primary)}

/* ── v3: callout — wash/heldBg logic; patina keyline marks brand-significant notes (never text) ── */
.ss-callout{border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--card-pad);max-width:var(--content-note);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink)}
.ss-callout-info,.ss-callout--info{background:var(--primary-wash);border-color:transparent}
.ss-callout-held,.ss-callout--held{background:var(--held-bg)}
.ss-callout-patina,.ss-callout--patina{background:var(--surface);border-left:3px solid var(--patina)}
.ss-callout-withheld,.ss-callout--withheld{background:var(--surface);border-left:3px solid var(--status-withheld)}
.ss-callout .ss-callout-title{display:block;font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-soft);margin:0 0 var(--sp-2)}

/* ── v2: dataviz — hairline axes, brand hues only, no chartjunk (value-insight) ── */
.ss-bar-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;gap:var(--sp-4);align-items:center;font-size:var(--fs-caption);color:var(--viz-label);padding:var(--sp-2) 0;border-bottom:1px solid var(--viz-axis)}
.ss-bar-track{height:12px;background:none;position:relative}
.ss-bar-fill{height:100%;background:var(--viz-1)}
.ss-bar-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── v2: CTA section (cnt-008, now with real buttons) ── */
.ss-cta{padding:var(--section-pad) 0;border-bottom:1px solid var(--rule)}
.ss-cta .ss-cta-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}

/* ── motion: commercial rise only; product gets 0ms so nothing choreographs ── */
@keyframes ss-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ss-rise{animation:ss-rise var(--motion-rise) ease-out both}
.ss-rise:nth-child(2){animation-delay:var(--motion-stagger)}.ss-rise:nth-child(3){animation-delay:calc(var(--motion-stagger) * 2)}.ss-rise:nth-child(4){animation-delay:calc(var(--motion-stagger) * 3)}.ss-rise:nth-child(5){animation-delay:calc(var(--motion-stagger) * 4)}
@media (prefers-reduced-motion:reduce){.ss-rise{animation:none}.ss-btn{transition:none}}

/* ════ v3.3 — decision board 2026-09-23/24, D115, D129, D130 ════ */

/* masthead: centred variant for the Commercial theme (the website); Product keeps the left-aligned head */
.site-masthead--centred,.ss-masthead--centred{border-bottom:3px double var(--ink);box-shadow:none}
.site-masthead--centred .masthead-inner,.ss-masthead--centred .ss-masthead-inner{flex-direction:column;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-3)}
.site-masthead--centred .site-nav,.ss-masthead--centred .ss-nav{justify-content:center}

/* hover and current on ink grounds and in nav popouts: patina (decision 2026-09-24). On paper, Ultramarine stays the interaction colour. */
.site-footer a,.ss-footer a{color:var(--on-ink-text);text-decoration:none}
.site-footer .footer-h,.site-footer small,.ss-footer .ss-footer-h,.ss-footer small{color:var(--on-ink-soft)}
.site-footer .footer-line,.ss-footer .ss-footer-line{color:var(--on-ink-label)}
.site-footer hr,.site-footer .footer-gov,.ss-footer hr,.ss-footer .ss-footer-gov{border-color:var(--on-ink-rule)}
.site-footer a:hover,.ss-footer a:hover{color:var(--on-ink-text);text-decoration:underline;text-decoration-color:var(--patina);text-underline-offset:4px}
.site-footer a[aria-current="page"],.ss-footer a[aria-current="page"]{color:var(--patina)}
.ss-popout a:hover{border-left-color:var(--patina)}

/* dark band: the page's one dark band; may carry the closing CTA; soft glow allowed here and only here */
.ss-band{position:relative;overflow:hidden;background:var(--band-bg);color:var(--band-text);padding:var(--section-pad) var(--sp-5);text-align:center}
.ss-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 90% at 50% 0%,var(--glow-patina),transparent 60%),radial-gradient(ellipse 50% 70% at 85% 100%,var(--glow-primary),transparent 70%)}
.ss-band > *{position:relative}
.ss-band h2{font-family:var(--font-display);font-size:clamp(var(--fs-h2),2.6vw,var(--fs-h1));line-height:var(--lh-heading);color:var(--band-text);margin:0 0 var(--sp-3);text-wrap:balance}
.ss-band p{color:var(--band-soft);max-width:52ch;margin:0 auto var(--sp-5)}
.ss-band .eyebrow,.ss-band .ss-eyebrow{color:var(--band-label)}
.ss-btn-paper,.ss-btn--paper{background:var(--band-action-bg);color:var(--band-action-text);border-color:var(--band-action-bg);font-weight:700}
.ss-btn-paper:hover,.ss-btn--paper:hover{background:var(--band-text);border-color:var(--band-text)}
.ss-btn-ghost,.ss-btn--ghost{color:var(--band-text);text-decoration:underline;text-underline-offset:3px;padding:0 var(--sp-3)}
.ss-cta--band{border-bottom:0}
.ss-cta--band .ss-cta-actions{justify-content:center}

/* layout (D115 A1, A2) */
.ss-wide{max-width:var(--content-wide);margin:0 auto;padding:0 var(--sp-5)}
.ss-grid-2{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:var(--sp-7);align-items:start}
@media (max-width:760px){.ss-grid-2{grid-template-columns:1fr;gap:var(--sp-5)}}
.ss-hero--figure{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-7);align-items:center;max-width:var(--content-wide);margin:0 auto}
@media (max-width:899px){.ss-hero--figure{grid-template-columns:1fr;gap:var(--sp-5)}}

/* figures: matted, numbered; paper objects may lift and tilt (decision 2026-09-24) */
.ss-fig{margin:0}
.ss-fig .matte,.ss-matte{background:var(--surface);border:1px solid var(--ink);padding:var(--sp-2)}
.ss-fig img,.ss-fig svg{display:block;width:100%;height:auto}
.ss-fig figcaption,.ss-figcap{font-size:var(--fs-caption);color:var(--ink-soft);margin-top:var(--sp-2);max-width:var(--measure)}
.ss-fig .fign,.ss-fign{font-family:var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--patina-deep);font-weight:700;margin-right:var(--sp-2)}
.ss-fig svg text{font-size:max(var(--figure-text-min),1em)}
.ss-paper{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--elevation-paper);transform:rotate(var(--tilt-paper))}
.ss-hand{font-family:var(--font-hand);color:var(--pen);font-size:1.5em;line-height:var(--lh-solid)}

/* demonstration motion: loops allowed only inside a figure that shows a process; off under reduced motion */
@keyframes ss-scan{from{top:-70px}to{top:100%}}
.ss-scan{position:absolute;left:-4px;right:-4px;height:58px;top:-70px;pointer-events:none;background:linear-gradient(to bottom,var(--scan-edge),var(--scan-mid) 45%,var(--scan-core) 50%,var(--scan-mid) 55%,var(--scan-edge));animation:ss-scan var(--motion-scan) linear infinite}
.ss-scan::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--patina)}
@keyframes ss-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ss-pulse{animation:ss-pulse var(--motion-pulse) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ss-scan,.ss-pulse{animation:none}.ss-scan{display:none}}

/* then/now (D115 A3, D130): archive first; dwell-and-wipe; hand flip; the "now" half is always labelled */
.ss-thennow{position:relative;display:block;cursor:pointer;background:var(--surface);border:1px solid var(--ink);padding:var(--sp-2)}
.ss-thennow:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-thennow .tn-frame{position:relative;overflow:hidden}
.ss-thennow .tn-then img{filter:grayscale(1)}
.ss-thennow img{display:block;width:100%;height:auto}
.ss-thennow .tn-now{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path var(--motion-wipe) cubic-bezier(.45,0,.2,1)}
.ss-thennow.alive .tn-now{clip-path:inset(0 0 0 0)}
.ss-thennow.leaving .tn-now{transition-duration:var(--motion-wipe-back)}
.ss-thennow .tn-now img{width:100%;height:100%;object-fit:cover}
.ss-thennow .tn-say{position:absolute;z-index:2;top:var(--sp-2);max-width:calc(50% - 16px);font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:var(--lh-snug);padding:var(--sp-1) 10px;border-radius:var(--radius-control);transition:opacity var(--motion-fade)}
.ss-thennow .tn-say--then{left:var(--sp-2);background:var(--paper);color:var(--ink)}
.ss-thennow .tn-say--now{right:var(--sp-2);background:var(--ground-ink);color:var(--on-ink-text)}
.ss-thennow.alive .tn-say--then{opacity:0}
.ss-thennow .tn-badge{position:absolute;z-index:2;right:var(--sp-2);bottom:var(--sp-2);font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;background:var(--paper);color:var(--ink-soft);padding:2px 6px;opacity:0;transition:opacity var(--motion-fade)}
.ss-thennow.alive .tn-badge{opacity:1}
.ss-tn-invite{display:inline-block;min-height:var(--control-h);padding:var(--sp-3) 0;background:none;border:0;font:inherit;color:var(--patina-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ss-thennow .tn-now{transition:none}}

/* proof card (D115 A4, D121): name, their own words, why they chose us; evidence footer */
.ss-proof-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));list-style:none;margin:0;padding:0}
.ss-proof-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-2)}
.ss-proof-card .pc-kicker{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.ss-proof-card .pc-who{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-heading);margin:0}
.ss-proof-card blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:var(--fs-body);line-height:var(--lh-normal)}
.ss-proof-card .pc-why{margin:0;color:var(--ink-soft);font-size:var(--fs-body)}
.ss-proof-card .pc-ev{margin-top:auto;border-top:1px solid var(--rule);padding-top:var(--sp-2);font-size:var(--fs-caption);color:var(--ink-soft);display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.ss-proof-card .pc-ev .evidence-label,.ss-proof-card .pc-ev .ss-evidence-label{margin-right:var(--sp-2)}
.ss-anon{font-size:var(--fs-caption);color:var(--ink-soft);max-width:var(--measure);margin:var(--sp-3) 0 0}

/* problem picker (D115 A4): chips over one answer; without script every answer shows */
.ss-problem-picker .pp-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:0;list-style:none}
.ss-problem-picker .pp-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--control-h);padding:0 var(--sp-3) 0 var(--sp-2);border:1px solid var(--rule);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-caption);cursor:pointer}
.ss-problem-picker .pp-chip:hover{border-color:var(--primary)}
.ss-problem-picker .pp-chip[aria-expanded="true"]{border-color:var(--primary);background:var(--primary-wash);color:var(--primary-deep);font-weight:600}
.ss-problem-picker .pp-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-problem-picker .pp-answer{border-top:1px solid var(--rule);padding-top:var(--sp-3)}
.ss-problem-picker .pp-answer h3{font-size:var(--fs-h3);margin:0 0 var(--sp-2)}
.ss-problem-picker .pp-answer p{margin:0 0 var(--sp-2);color:var(--ink-soft);max-width:var(--measure)}

/* problem icons (full icon system, decision 2026-09-23/24): 32px grid, 1.8px round strokes, Ultramarine + patina-deep, ink-soft connectors */
.ss-icon{display:inline-block;width:32px;height:32px;flex:none;--ic-a:var(--primary);--ic-b:var(--patina-deep);--ic-c:var(--ink-soft);--ic-w:var(--status-withheld)}
.ss-icon--sm{width:20px;height:20px}
.ss-icon svg{display:block;width:100%;height:100%}

/* price summary (D115 A4, D91/D111): method always; a figure only from a signed price record */
.price-summary .terms,.ss-price-summary .terms{margin:var(--sp-4) 0 var(--sp-3);padding:0;border-top:1px solid var(--rule);max-width:38em}
.price-summary dt,.ss-price-summary dt{font-weight:600;padding-top:var(--sp-3)}
.price-summary dd,.ss-price-summary dd{margin:2px 0 var(--sp-3);padding:0 0 var(--sp-3);color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.price-summary .price[data-state="unsigned"],.ss-price-summary .price[data-state="unsigned"]{color:var(--ink-soft);font-style:italic}

/* sticky CTA (D115 A4): phones only, after the hero's button scrolls away */
.ss-cta-sticky{display:none}
@media (max-width:760px){
  .ss-cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform var(--motion-base,200ms)}
  .ss-cta-sticky.shown{transform:none}
  .ss-cta-sticky .ss-btn{min-height:48px;width:100%;justify-content:center}
}

/* on-page rail (D129): sections, then the page's one booking action */
.ss-rail{font-family:var(--font-body)}
.ss-rail .rail-h{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--patina-deep);margin:0 0 6px;padding-left:14px}
.ss-rail ul{list-style:none;margin:0;padding:0}
.ss-rail a:not(.ss-btn){display:block;padding:5px 0 5px 14px;border-left:1px solid var(--rule);color:var(--ink-soft);text-decoration:none;font-size:var(--fs-caption);line-height:var(--lh-snug)}
.ss-rail a:not(.ss-btn):hover{color:var(--primary-deep);border-left-color:var(--ink-soft)}
.ss-rail a:not(.ss-btn)[aria-current]{color:var(--ink);border-left:2px solid var(--patina-deep);padding-left:13px;font-weight:600}
.ss-rail .rail-cta{margin:var(--sp-4) 0 0 14px}
.ss-rail .rail-cta a{display:inline-flex;border-left:0;padding:0 var(--sp-4);color:var(--surface);font-weight:600}
.ss-rail .rail-cta a:hover{color:var(--surface);background:var(--primary-deep)}

/* ════ v3.4 — audit 2026-09-25: the components that had styles but no component ════ */

/* Footer: the ink slab — columns of links, identity, the governance seal. Text on it uses --on-ink-* only. */
.ss-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6) var(--sp-5);max-width:var(--content-wide,var(--content-max));margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-6)}
@media (max-width:900px){.ss-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ss-footer-grid{grid-template-columns:1fr}}
.site-footer .footer-h,.ss-footer .ss-footer-h{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;margin:0 0 var(--sp-3)}
.site-footer .footer-list,.ss-footer .ss-footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.site-footer .footer-line,.ss-footer .ss-footer-line{margin:0 0 var(--sp-2);font-size:var(--fs-caption)}
.site-footer .footer-gov,.ss-footer .ss-footer-gov{max-width:var(--content-wide,var(--content-max));margin:0 auto;padding:var(--sp-4) var(--sp-5) var(--sp-5);border-top:1px solid;font-size:var(--fs-caption);color:var(--on-ink-soft)}

/* Nav menu: a disclosure in the masthead — button with aria-expanded, a panel of links. Hover and current in patina (decision 2026-09-24). */
.ss-nav-item{position:relative}
.ss-nav-button{font:inherit;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-soft);background:none;border:0;border-bottom:2px solid transparent;min-height:var(--control-h);padding:0 var(--sp-3);cursor:pointer}
.ss-nav-button:hover,.ss-nav-button[aria-expanded="true"]{color:var(--primary)}
.ss-nav-button::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px var(--sp-2);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.ss-nav-button[aria-expanded="true"]::after{transform:rotate(225deg);margin-bottom:-2px}
.ss-popout{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:60;min-width:300px;max-width:420px;background:var(--paper);border:1px solid var(--ink);border-top:3px double var(--ink);padding:var(--sp-2) 0;text-align:left}
.ss-popout[hidden]{display:none}
.ss-popout ul{list-style:none;margin:0;padding:0}
.ss-nav .ss-popout a,.ss-popout a{display:block;padding:var(--sp-2) var(--sp-5);font-size:var(--fs-body);text-transform:none;letter-spacing:normal;color:var(--ink);text-decoration:none;border-bottom:0;border-left:3px solid transparent}
.ss-nav .ss-popout a:hover,.ss-popout a:hover,.ss-popout a:focus-visible{background:var(--surface);border-left-color:var(--patina)}
.ss-nav .ss-popout a[aria-current="page"],.ss-popout a[aria-current="page"]{color:var(--ink);border-left-color:var(--primary)}
.ss-popout .pop-label{display:block;font-weight:600;line-height:var(--lh-snug)}
.ss-popout .pop-desc{display:block;font-size:var(--fs-caption);color:var(--ink-soft);line-height:var(--lh-normal)}
.ss-popout .pop-group{margin:0;padding:var(--sp-2) var(--sp-5) 2px;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.ss-popout ul + .pop-group{margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--rule)}
@media (max-width:760px){.ss-popout{position:static;transform:none;min-width:0;max-width:none;border:0;border-left:2px solid var(--rule)}}

/* Textarea: an Input that grows downward; same border, focus and invalid states as .ss-input */
.ss-textarea{resize:vertical;line-height:var(--lh-normal)}

/* Figure and Band are components as of 3.4 (Figure.jsx, Band.jsx); their classes are .ss-fig and .ss-band above. */

/* ===== v3.5 — mode switch, feedback and overlays ===================================================== */
/* ModeSwitch: Auto / Light / Dark as native radios in a fieldset, so arrows move between them for free.
   Writes <html data-mode>; the choice is kept per browser under localStorage "ss-mode". */
.ss-mode-switch{display:inline-flex;align-items:center;gap:var(--sp-3);border:0;margin:0;padding:0;min-width:0}
.ss-mode-switch legend{float:left;margin:0 var(--sp-3) 0 0;padding:0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);line-height:var(--control-h)}
.ss-mode-options{display:inline-flex;border:1px solid var(--border-control);border-radius:var(--radius-control);overflow:hidden}
.ss-mode-switch label{position:relative;display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 var(--sp-4);font-family:var(--font-body);font-size:var(--fs-caption);color:var(--ink-soft);cursor:pointer;background:var(--surface)}
.ss-mode-switch label+label{border-left:1px solid var(--border-control)}
.ss-mode-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ss-mode-switch label:hover{color:var(--ink);background:var(--primary-wash)}
.ss-mode-switch label:has(input:checked){color:var(--primary-deep);background:var(--primary-wash);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
.ss-mode-switch label:has(input:focus-visible){outline:var(--focus-ring);outline-offset:calc(-1 * var(--focus-offset) - 2px);z-index:1}
/* On the ink slab (the footer): same control, slab colours; current turns patina as in footer links. */
.ss-mode-switch--on-ink legend{color:var(--on-ink-soft)}
.ss-mode-switch--on-ink .ss-mode-options,.ss-mode-switch--on-ink label+label{border-color:var(--on-ink-soft)}
.ss-mode-switch--on-ink label{background:transparent;color:var(--on-ink-label)}
.ss-mode-switch--on-ink label:hover{background:transparent;color:var(--on-ink-text)}
.ss-mode-switch--on-ink label:has(input:checked){background:transparent;color:var(--on-ink-text);box-shadow:inset 0 -2px 0 var(--patina)}
.ss-mode-switch--on-ink label:has(input:focus-visible){outline-color:var(--on-ink-text)}
/* Mode-aware content (logos, diagrams drawn for one ground): mode-dark.css reveals .ss-when-dark. */
.ss-when-dark{display:none}

/* Notice: a message the system sends in answer to something (saved, sent, failed, held). Announced; may be
   dismissed; may carry one action. Callout is authored content and stays static. Tone is always spelled out
   in the title with a dot, never carried by colour alone. */
.ss-notice{position:relative;display:grid;gap:var(--sp-2);max-width:var(--content-note);padding:var(--sp-4) var(--sp-5);padding-right:calc(var(--sp-5) + var(--control-h));background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--notice-keyline,var(--primary));border-radius:var(--radius-card);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-normal)}
.ss-notice:not(:has(.ss-notice-close)){padding-right:var(--sp-5)}
.ss-notice-title{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700;color:var(--notice-tone,var(--primary))}
.ss-notice-title::before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.ss-notice-body{margin:0}
.ss-notice-body>:first-child{margin-top:0}.ss-notice-body>:last-child{margin-bottom:0}
.ss-notice-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2)}
.ss-notice-close{position:absolute;top:0;right:0;width:var(--control-h);height:var(--control-h);display:grid;place-items:center;border:0;background:none;color:var(--ink-soft);font-size:var(--fs-lead);line-height:var(--lh-solid);cursor:pointer;border-radius:var(--radius-control)}
.ss-notice-close:hover{color:var(--ink)}
.ss-notice-close:focus-visible,.ss-dialog-close:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--focus-offset) - 2px)}
.ss-notice--info{--notice-keyline:var(--primary);--notice-tone:var(--primary)}
.ss-notice--ready{--notice-keyline:var(--status-ready);--notice-tone:var(--status-ready)}
.ss-notice--held{--notice-keyline:var(--ink-soft);--notice-tone:var(--ink-soft);background:var(--held-bg)}
.ss-notice--withheld{--notice-keyline:var(--status-withheld);--notice-tone:var(--status-withheld)}
.ss-notice[hidden],.ss-mode-switch[hidden]{display:none}

/* ErrorSummary: top of a form after a failed submit. Receives focus; each line links to its field. */
.ss-error-summary{max-width:var(--content-note);margin:0 0 var(--section-gap,var(--sp-6));padding:var(--sp-4) var(--sp-5);background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--status-withheld);border-radius:var(--radius-card)}
.ss-error-summary:focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-error-summary-title{margin:0 0 var(--sp-3);font-family:var(--font-heading);font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:600;color:var(--ink)}
.ss-error-summary-title::before{content:"Withheld — ";color:var(--status-withheld)}
.ss-error-summary ul{margin:0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2)}
.ss-error-summary a{color:var(--primary);font-size:var(--fs-body)}
.ss-error-summary a:hover{color:var(--primary-deep)}
/* A field with an error: keyline beside the whole field, so the error is found by scanning the form. */
.ss-field:has(.ss-error){border-left:3px solid var(--status-withheld);padding-left:var(--sp-4)}
.ss-input[aria-invalid="true"],.ss-select[aria-invalid="true"],.ss-textarea[aria-invalid="true"]{border-color:var(--status-withheld);box-shadow:inset 0 0 0 1px var(--status-withheld)}

/* FormStatus: the live line beside a form's submit button. Always rendered, so screen readers hear changes. */
.ss-form-status{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--control-h);margin:0;font-size:var(--fs-caption);line-height:var(--lh-snug);color:var(--ink-soft)}
.ss-form-status:empty{min-height:0}
.ss-form-status::before{flex:none}
.ss-form-status[data-state="sending"]::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:ss-spin 800ms linear infinite}
.ss-form-status[data-state="sent"]{color:var(--status-ready)}
.ss-form-status[data-state="failed"]{color:var(--status-withheld)}
.ss-form-status[data-state="sent"]::before,.ss-form-status[data-state="failed"]::before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:currentColor}
.ss-form-status .ss-form-status-retry{margin-left:var(--sp-2);color:var(--primary);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;min-height:var(--control-h)}
@media (prefers-reduced-motion:reduce){.ss-form-status[data-state="sending"]::before{animation:none;border-right-color:currentColor;opacity:.5}}

/* Dialog: the native <dialog>, opened with showModal() (focus trap, Escape and the top layer come free).
   The only raised surface in the system. "media" is the photograph enlargement: the ink slab, the picture, its caption. */
.ss-dialog{width:min(var(--content-dialog),calc(100vw - 2 * var(--sp-4)));max-height:calc(100dvh - 2 * var(--sp-5));padding:0;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);box-shadow:var(--elevation-overlay,none);overflow:auto}
.ss-dialog::backdrop{background:var(--scrim)}
.ss-dialog[open]{display:flex;flex-direction:column;animation:ss-dialog-in var(--motion-fast) ease-out}
@keyframes ss-dialog-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.ss-dialog[open]{animation:none}}
html:has(.ss-dialog[open]){overflow:hidden}
.ss-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-3) 0 var(--sp-5)}
.ss-dialog-title{margin:var(--sp-2) 0 0;font-family:var(--font-heading);font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:600}
.ss-dialog-close{flex:none;width:var(--control-h);height:var(--control-h);display:grid;place-items:center;border:0;background:none;color:var(--ink-soft);font-size:var(--fs-lead);line-height:var(--lh-solid);cursor:pointer;border-radius:var(--radius-control)}
.ss-dialog-close:hover{color:var(--ink);background:var(--primary-wash)}
.ss-dialog-body{padding:var(--sp-4) var(--sp-5);overflow:auto;font-size:var(--fs-body);line-height:var(--lh-body)}
.ss-dialog-body>:first-child{margin-top:0}.ss-dialog-body>:last-child{margin-bottom:0}
.ss-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) var(--sp-5);border-top:1px solid var(--rule)}
.ss-dialog--media{width:min(var(--content-max),calc(100vw - 2 * var(--sp-4)));background:var(--ground-ink);color:var(--on-ink-text);border-color:var(--on-ink-rule)}
.ss-dialog--media .ss-dialog-close{color:var(--on-ink-label)}
.ss-dialog--media .ss-dialog-close:hover{color:var(--on-ink-text);background:transparent}
.ss-dialog--media .ss-dialog-body img{display:block;max-width:100%;max-height:calc(100dvh - 220px);margin:0 auto;object-fit:contain}
.ss-dialog--media figcaption{margin-top:var(--sp-3);font-size:var(--fs-caption);color:var(--on-ink-label)}
@media print{.ss-dialog,.ss-mode-switch{display:none}}

/* ===== v3.6 — content patterns from the website: steps, people, boundaries, workflow map =============== */
/* Steps: an ordered list between hairlines. Numerals come from a CSS counter (01, 02…), so the order is real
   list order for screen readers. --plain drops the numerals for phases whose order is shown by the words. */
.ss-steps{list-style:none;margin:var(--sp-5) 0 0;padding:0;counter-reset:ss-step;border-top:1px solid var(--rule);max-width:var(--content-note)}
.ss-steps>li{counter-increment:ss-step;display:grid;grid-template-columns:var(--sp-8) minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-5) 0;border-bottom:1px solid var(--rule)}
.ss-steps>li::before{content:counter(ss-step,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--fs-lead);line-height:var(--lh-tight);color:var(--primary)}
.ss-steps .ss-step-title{margin:0 0 var(--sp-1);font-family:var(--font-heading);font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:600;color:var(--ink)}
.ss-steps .ss-step-body{margin:0;font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink-soft)}
.ss-steps .ss-step-body>:first-child{margin-top:0}.ss-steps .ss-step-body>:last-child{margin-bottom:0}
.ss-steps--plain>li{grid-template-columns:minmax(0,1fr);padding:var(--sp-3) 0}
.ss-steps--plain>li::before{content:none}
@media (max-width:520px){.ss-steps:not(.ss-steps--plain)>li{grid-template-columns:var(--sp-7) minmax(0,1fr);gap:var(--sp-3)}}

/* People: a grid of PersonCards. Hairline above each person; square photo on a hairline; serif name; role as a
   label (patina-deep, like every label); optional one-line bio. --compact is the three-up home-page grid. */
.ss-people{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-6) var(--sp-6);margin:var(--sp-5) 0 0;padding:0}
.ss-person{margin:0;padding-top:var(--sp-4);border-top:1px solid var(--rule)}
.ss-person-photo{display:block;width:100%;max-width:150px;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule);background:var(--surface);margin:0 0 var(--sp-3)}
.ss-person-name{margin:0 0 var(--sp-1);font-family:var(--font-heading);font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--ink)}
.ss-person-name a{color:inherit;text-decoration:none}
.ss-person-name a:hover{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}
.ss-person-role{margin:0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:var(--lh-snug);color:var(--patina-deep)}
.ss-person-bio{margin:var(--sp-2) 0 0;font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink-soft)}
.ss-people--compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
.ss-people--compact .ss-person-photo{max-width:104px}
.ss-people--compact .ss-person-name{font-size:var(--fs-body);font-weight:600}
@media (max-width:600px){.ss-people{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-5) var(--sp-5)}.ss-people--compact{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Boundaries: what a product or practice does not do, one plain sentence per line, each marked with the
   withheld dash. The dash is decoration; the sentence carries the "not". */
.ss-bounds{list-style:none;margin:var(--sp-5) 0 0;padding:0;border-top:1px solid var(--rule);max-width:var(--content-note)}
.ss-bounds>li{position:relative;padding:var(--sp-3) 0 var(--sp-3) var(--sp-5);border-bottom:1px solid var(--rule);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink)}
.ss-bounds>li::before{content:"";position:absolute;left:0;top:calc(var(--sp-3) + .75em);width:9px;height:2px;background:var(--status-withheld)}

/* WorkflowMap: the dendrite figure — stages as somas on one path, what touches each stage lettered beneath,
   a two-column key. Generated SVG; colours are tokens, so it follows the theme and dark mode. The impulse
   is demonstration motion inside a figure (§6) and stops under prefers-reduced-motion. */
.ss-wf{display:block;width:100%;height:auto;font-kerning:normal}
.ss-wf .wf-ground{fill:var(--paper)}
.ss-wf .wf-path{fill:none;stroke:var(--ink);stroke-opacity:.32;stroke-width:1.8;stroke-linecap:round}
.ss-wf .wf-twig{fill:none;stroke:var(--ink);stroke-opacity:.2;stroke-width:1.2;stroke-linecap:round}
.ss-wf .wf-syn,.ss-wf .wf-impulse{fill:var(--patina)}
.ss-wf .wf-soma{fill:var(--primary)}
.ss-wf .wf-ring{fill:none;stroke:var(--primary);stroke-opacity:.35;stroke-width:1.2}
.ss-wf .wf-receptor{fill:none;stroke:var(--primary);stroke-width:1.8}
.ss-wf .wf-rule{stroke:var(--ink);stroke-opacity:.25;stroke-width:1}
.ss-wf .wf-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;fill:var(--patina-deep)}
.ss-wf .wf-name{font-family:var(--font-display);font-weight:600;font-size:24px;fill:var(--ink)}
.ss-wf .wf-gloss{font-family:var(--font-display);font-style:italic;font-size:17px;fill:var(--patina-deep)}
.ss-wf .wf-letters,.ss-wf .wf-key{font-family:var(--font-mono);font-size:15px;letter-spacing:.06em;fill:var(--primary)}
.ss-wf .wf-head{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;fill:var(--patina-deep)}
.ss-wf .wf-mod{font-family:var(--font-body);font-size:15px;fill:var(--ink)}
@media (max-width:600px){.ss-wf .wf-num{font-size:20px}.ss-wf .wf-name{font-size:28px}.ss-wf .wf-gloss,.ss-wf .wf-letters,.ss-wf .wf-head,.ss-wf .wf-key,.ss-wf .wf-mod{font-size:22px}}
@media (prefers-reduced-motion:reduce){.ss-wf .wf-impulse{display:none}}

/* v3.9 — the figure palette (decision 2026-10-06, figure-palette). Three levels on any figure or any container of figures:
   data-figure absent or "restrained" (the default: ink, Ultramarine and Patina, as drawn), "wash" (hues as tints and outlines,
   for a figure with categories inside a text column) and "feature" (the same hues at full strength, for the one figure a section
   leads with). Four hues in a fixed order — Ultramarine, Gold, Patina, Cadmium — every pair checked for colour-blind separation
   in both modes. Marks .fig-1…4; the lighter weight (series five to eight) .fig-1-light…; fields .fig-field-1…; SVG strokes
   .fig-stroke-1…; keylines .fig-key-1…; hue borders .fig-border-1…; the dark band .fig-band; .fig-colour-only is shown only at a
   coloured level. The rules carry !important on purpose: a level must override the colours a figure was drawn with (inline fills
   in an SVG, a restrained stylesheet), so one drawing serves all three levels. Restrained is the absence of rules, so nothing
   already built changes. Inside a coloured field the label tokens remap to ink so captions keep the contrast floor. */
.fig-colour-only{display:none}
:is([data-figure="wash"],[data-figure="feature"]) .fig-colour-only{display:revert}
.fig-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rule);vertical-align:middle;margin-right:var(--sp-2)}
/* shared by both coloured levels */
:is([data-figure="wash"],[data-figure="feature"]) .fig-field-1{background:var(--fig-tint-1)!important;fill:var(--fig-tint-1)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-field-2{background:var(--fig-tint-2)!important;fill:var(--fig-tint-2)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-field-3{background:var(--fig-tint-3)!important;fill:var(--fig-tint-3)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-field-4{background:var(--fig-tint-4)!important;fill:var(--fig-tint-4)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-stroke-1{stroke:var(--fig-hue-1)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-stroke-2{stroke:var(--fig-hue-2)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-stroke-3{stroke:var(--fig-hue-3)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-stroke-4{stroke:var(--fig-hue-4)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-border-1{border-color:var(--fig-hue-1)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-border-2{border-color:var(--fig-hue-2)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-border-3{border-color:var(--fig-hue-3)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-border-4{border-color:var(--fig-hue-4)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-key-1{border-top:3px solid var(--fig-hue-1)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-key-2{border-top:3px solid var(--fig-hue-2)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-key-3{border-top:3px solid var(--fig-hue-3)!important}
:is([data-figure="wash"],[data-figure="feature"]) .fig-key-4{border-top:3px solid var(--fig-hue-4)!important}
:is([data-figure="wash"],[data-figure="feature"]) :is(.fig-field-1,.fig-field-2,.fig-field-3,.fig-field-4){--fig-label-soft:var(--ink)}
/* wash: marks become a wash field with the hue as outline; the lighter weight is the outline alone */
[data-figure="wash"] .fig-1{background:var(--fig-wash-1)!important;fill:var(--fig-wash-1)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-1)!important;color:var(--ink)!important}
[data-figure="wash"] .fig-2{background:var(--fig-wash-2)!important;fill:var(--fig-wash-2)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-2)!important;color:var(--ink)!important}
[data-figure="wash"] .fig-3{background:var(--fig-wash-3)!important;fill:var(--fig-wash-3)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-3)!important;color:var(--ink)!important}
[data-figure="wash"] .fig-4{background:var(--fig-wash-4)!important;fill:var(--fig-wash-4)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-4)!important;color:var(--ink)!important}
[data-figure="wash"] .fig-1-light{background:var(--surface)!important;fill:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-1)!important}
[data-figure="wash"] .fig-2-light{background:var(--surface)!important;fill:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-2)!important}
[data-figure="wash"] .fig-3-light{background:var(--surface)!important;fill:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-3)!important}
[data-figure="wash"] .fig-4-light{background:var(--surface)!important;fill:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-4)!important}
[data-figure="wash"] .fig-band{background:var(--primary-wash)!important}
/* feature: solid marks with the on-colour for any text in them; the lighter weight is a tint with the hue as outline; fields step
   up to wash strength with the hue as outline, keylines double, hue borders and strokes thicken — so a figure built from fields and
   keylines alone (a ledger, lanes, strata) changes level as visibly as one built from marks. Gold sits below 3:1 on paper, so it
   carries a faint ink edge in light mode (--fig-edge; transparent in dark). Inside a feature field both label tokens are ink. */
[data-figure="feature"] .fig-1{background:var(--fig-hue-1)!important;fill:var(--fig-hue-1)!important;color:var(--fig-on-1)!important}
[data-figure="feature"] .fig-2{background:var(--fig-hue-2)!important;fill:var(--fig-hue-2)!important;color:var(--fig-on-2)!important;box-shadow:inset 0 0 0 1px var(--fig-edge)!important}
[data-figure="feature"] .fig-3{background:var(--fig-hue-3)!important;fill:var(--fig-hue-3)!important;color:var(--fig-on-3)!important}
[data-figure="feature"] .fig-4{background:var(--fig-hue-4)!important;fill:var(--fig-hue-4)!important;color:var(--fig-on-4)!important}
[data-figure="feature"] .fig-1-light{background:var(--fig-tint-1)!important;fill:var(--fig-tint-1)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-1)!important}
[data-figure="feature"] .fig-2-light{background:var(--fig-tint-2)!important;fill:var(--fig-tint-2)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-2)!important}
[data-figure="feature"] .fig-3-light{background:var(--fig-tint-3)!important;fill:var(--fig-tint-3)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-3)!important}
[data-figure="feature"] .fig-4-light{background:var(--fig-tint-4)!important;fill:var(--fig-tint-4)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-4)!important}
[data-figure="feature"] .fig-field-1{background:var(--fig-wash-1)!important;fill:var(--fig-wash-1)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-1)!important}
[data-figure="feature"] .fig-field-2{background:var(--fig-wash-2)!important;fill:var(--fig-wash-2)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-2)!important}
[data-figure="feature"] .fig-field-3{background:var(--fig-wash-3)!important;fill:var(--fig-wash-3)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-3)!important}
[data-figure="feature"] .fig-field-4{background:var(--fig-wash-4)!important;fill:var(--fig-wash-4)!important;box-shadow:inset 0 0 0 1px var(--fig-hue-4)!important}
[data-figure="feature"] :is(.fig-field-1,.fig-field-2,.fig-field-3,.fig-field-4){--fig-label:var(--ink);--fig-label-soft:var(--ink)}
[data-figure="feature"] .fig-key-1{border-top-width:6px!important}
[data-figure="feature"] .fig-key-2{border-top-width:6px!important}
[data-figure="feature"] .fig-key-3{border-top-width:6px!important}
[data-figure="feature"] .fig-key-4{border-top-width:6px!important}
[data-figure="feature"] :is(.fig-border-1,.fig-border-2,.fig-border-3,.fig-border-4){border-width:2px!important}
[data-figure="feature"] :is(.fig-stroke-1,.fig-stroke-2,.fig-stroke-3,.fig-stroke-4){stroke-width:2.5px!important}
[data-figure="feature"] .fig-band{background:var(--band-bg)!important;color:var(--band-text)!important;--fig-label:var(--band-label);--fig-label-soft:var(--band-soft)}
/* SVG marks: box-shadow does not reach them, so the outline is a stroke */
[data-figure="wash"] :is(circle,rect,ellipse,path,polygon):is(.fig-1,.fig-1-light){stroke:var(--fig-hue-1)!important;stroke-width:1px}
[data-figure="wash"] :is(circle,rect,ellipse,path,polygon):is(.fig-2,.fig-2-light){stroke:var(--fig-hue-2)!important;stroke-width:1px}
[data-figure="wash"] :is(circle,rect,ellipse,path,polygon):is(.fig-3,.fig-3-light){stroke:var(--fig-hue-3)!important;stroke-width:1px}
[data-figure="wash"] :is(circle,rect,ellipse,path,polygon):is(.fig-4,.fig-4-light){stroke:var(--fig-hue-4)!important;stroke-width:1px}
[data-figure="feature"] :is(circle,rect,ellipse,path,polygon):is(.fig-1-light){stroke:var(--fig-hue-1)!important;stroke-width:1px}
[data-figure="feature"] :is(circle,rect,ellipse,path,polygon):is(.fig-2-light){stroke:var(--fig-hue-2)!important;stroke-width:1px}
[data-figure="feature"] :is(circle,rect,ellipse,path,polygon):is(.fig-3-light){stroke:var(--fig-hue-3)!important;stroke-width:1px}
[data-figure="feature"] :is(circle,rect,ellipse,path,polygon):is(.fig-4-light){stroke:var(--fig-hue-4)!important;stroke-width:1px}
[data-figure="feature"] :is(circle,rect,ellipse,path,polygon).fig-2{stroke:var(--fig-edge)!important;stroke-width:1px}

/* ===== v3.15 — notebooks: the Lab Notes shelf and the Out on a LIMS reading room (decision 2026-10-08 notebooks) ========= */
/* Bindings: a notebook's binding is a physical colour (tokens --notebook-binding-*), set on any element with data-binding="<name>". It gives
   --nb-binding and the text colour that reads on it, --nb-on-binding (both checked in check-contrast). Never a practice's colour. */
[data-binding="faded-green"]{--nb-binding:var(--notebook-binding-faded-green);--nb-on-binding:var(--notebook-on-light)}
[data-binding="ultramarine"]{--nb-binding:var(--notebook-binding-ultramarine);--nb-on-binding:var(--notebook-on-dark)}
[data-binding="rust"]{--nb-binding:var(--notebook-binding-rust);--nb-on-binding:var(--notebook-on-dark)}
[data-binding="teal"]{--nb-binding:var(--notebook-binding-teal);--nb-on-binding:var(--notebook-on-dark)}
[data-binding="charcoal"]{--nb-binding:var(--notebook-binding-charcoal);--nb-on-binding:var(--notebook-on-dark)}
[data-binding="plum"]{--nb-binding:var(--notebook-binding-plum);--nb-on-binding:var(--notebook-on-dark)}
[data-binding="field-yellow"]{--nb-binding:var(--notebook-binding-field-yellow);--nb-on-binding:var(--notebook-on-light)}
[data-binding="marbled"]{--nb-binding:var(--notebook-binding-marbled);--nb-on-binding:var(--notebook-on-dark)}
.ss-nb-bound{background:var(--nb-binding);color:var(--nb-on-binding)} /* a ground in its binding: a cover, a spine edge */

/* NotebookShelf: the rendered shelf photograph (register: notebook-shelf) with a button over each spine and the notebook's name
   typeset on its blank label. Spots and labels are placed from the register's geometry as percentages of the image, so they
   track the photograph at any width. Below 760px of shelf the spots and labels give way to the chips; the photograph stays. */
.ss-nb-shelf{container:nb-shelf / inline-size}
.ss-nb-shelf-fig{margin:0}
.ss-nb-shelf-photo{position:relative;container:nb-photo / inline-size;background:var(--surface);border:1px solid var(--ink);padding:0;overflow:hidden}
.ss-nb-shelf-photo img{display:block;width:100%;height:auto}
.ss-nb-spot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:rotate(var(--r,0deg));margin:0;padding:0;background:none;
  border:3px solid transparent;border-radius:var(--radius-control);cursor:pointer;font:inherit}
/* DS-2: a spine invites pressing. Hover and keyboard focus light the spine with a paper wash and a 2px inset edge and
   raise its tag (name and count) just above it; pressed, every other spot dims (--nb-dim) so the chosen spine stands lit, with
   the two-tone ring. Fades over --motion-fade; no motion under reduced motion. */
.ss-nb-spot{transition:background-color var(--motion-fade),box-shadow var(--motion-fade)}
.ss-nb-spot:hover,.ss-nb-spot:focus-visible{background:var(--nb-lift);box-shadow:inset 0 0 0 2px var(--surface)}
.ss-nb-spot[aria-pressed="true"]{border-color:var(--surface);outline:3px solid var(--primary);outline-offset:0}
.ss-nb-shelf-photo:has(.ss-nb-spot[aria-pressed="true"],.ss-nb-spot[data-lit]) .ss-nb-spot:not([aria-pressed="true"]):not([data-lit]){background:var(--nb-dim)}
.ss-nb-shelf-photo:has(.ss-nb-spot[aria-pressed="true"],.ss-nb-spot[data-lit]) .ss-nb-spot:not([aria-pressed="true"]):not([data-lit]):is(:hover,:focus-visible){background:var(--nb-lift)}
.ss-nb-shelf-photo:has(.ss-nb-spot[aria-pressed="true"],.ss-nb-spot[data-lit]) .ss-nb-spot:not([aria-pressed="true"]):not([data-lit])+.ss-spine-label{opacity:.55}
.ss-spine-label{transition:opacity var(--motion-fade)}
.ss-nb-spot:is(:hover,:focus-visible){z-index:2}
.ss-nb-tag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,calc(-1 * var(--sp-2))) rotate(calc(-1 * var(--r,0deg)));
  padding:var(--sp-1) var(--sp-2);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-card);
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:var(--lh-tight);white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity var(--motion-fade),visibility var(--motion-fade)}
.ss-nb-spot:is(:hover,:focus-visible) .ss-nb-tag{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.ss-nb-spot,.ss-nb-tag,.ss-spine-label{transition:none}}
.ss-nb-chip{position:relative} /* the hidden count stays inside its chip, so a scrolling chip row never widens the page */
.ss-nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ss-nb-spot:focus-visible{border-color:var(--surface);outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-nb-spot[aria-pressed="true"]:focus-visible{outline-width:3px}
.ss-nb-badge{position:absolute;right:var(--sp-2);bottom:var(--sp-2);font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;background:var(--paper);color:var(--ink-soft);padding:2px 6px;pointer-events:none}
/* SpineLabel: live text on a blank spine label. Typeset in the display face (name) and the label face (note), at or above
   --figure-text-min; behaviors.js (or fitSpineLabels) sizes it to the label and drops the note, then the text, rather than go
   under the floor. A drawn label stands in where the photograph has none (the composition book). Never handwriting. */
.ss-spine-label{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:rotate(var(--r,0deg));display:flex;align-items:center;
  justify-content:center;overflow:hidden;pointer-events:none;color:var(--notebook-label-ink)}
.ss-spine-label--drawn{background:var(--notebook-label)}
.ss-spine-text{writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap;line-height:1.15;
  font-size:max(var(--figure-text-min),calc(var(--wn,2) * .4cqi))}
.ss-spine-text b{font-family:var(--font-display);font-weight:600;letter-spacing:.01em}
.ss-spine-text small{font-family:var(--font-label);font-size:1em;letter-spacing:.04em}
.ss-spine-label[data-fit="name"] small{display:none}
.ss-spine-label[data-fit="none"] .ss-spine-text{visibility:hidden}
@container nb-shelf (max-width: 759px){.ss-nb-spot,.ss-spine-label{display:none}}
/* DS-1: below 760px a shelf marked --crop shows the register's crop "books" (a <picture> source) and places each label
   from the crop's geometry (--cx…); the labels stay blank where they would fall under --figure-text-min (fitSpines). */
@media (max-width: 759px){
  .ss-nb-shelf--crop .ss-spine-label{display:flex;left:var(--cx);top:var(--cy);width:var(--cw);height:var(--ch)}
  .ss-nb-shelf--crop .ss-nb-badge{font-size:var(--fs-label);letter-spacing:0;padding:var(--sp-1) var(--sp-2);right:var(--sp-1);top:var(--sp-1);bottom:auto} /* over the shelf board, clear of the books */
}
/* NotebookChip: the filter chip, with the notebook's binding as a swatch. Pressed = the notebook shown. The swatch has a control
   border so a dark binding reads on a dark card and yellow on white; the name carries the meaning. */
.ss-nb-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:0}
.ss-nb-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--control-h);padding:0 var(--sp-3);border:1px solid var(--rule);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-caption);cursor:pointer}
.ss-nb-chip:hover{border-color:var(--primary)}
.ss-nb-chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-wash);color:var(--primary-deep);font-weight:600}
.ss-nb-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ss-nb-swatch{flex:none;display:inline-block;width:10px;height:16px;border-radius:var(--radius-control);background:var(--nb-binding);border:1px solid var(--border-control)}
.ss-nb-chip-count{font-family:var(--font-label);font-size:var(--fs-label);color:inherit}
.ss-nb-shelf--chips-phone .ss-nb-chips{display:none}
@container nb-shelf (max-width: 759px){.ss-nb-shelf--chips-phone .ss-nb-chips{display:flex}}
.ss-nb-status{margin:var(--sp-3) 0 0;font-size:var(--fs-caption);color:var(--ink-soft);max-width:var(--measure)}
.ss-nb-status:empty{display:none}

/* ReturnBar: the slim ink slab over every reading-room page — the notebook, who keeps it, the next step and the way back. */
.ss-return-bar{background:var(--ground-ink);color:var(--on-ink-text);font-size:var(--fs-caption)}
.ss-return-bar-inner{max-width:var(--content-wide);margin:0 auto;padding:var(--sp-1) var(--sp-5);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--sp-1) var(--sp-5)}
.ss-return-bar .rb-who{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3)}
.ss-return-bar .rb-notebook{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body)}
.ss-return-bar .rb-keeper{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-ink-label)}
.ss-return-bar .rb-acts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-4)}
.ss-return-bar a{display:inline-flex;align-items:center;min-height:var(--control-h);color:var(--on-ink-text);text-underline-offset:3px}
.ss-return-bar a:hover{text-decoration-color:var(--patina)}
.ss-return-bar a:focus-visible{outline:2px solid var(--on-ink-text);outline-offset:2px}
.ss-return-bar .rb-next{padding:0 var(--sp-4);background:var(--on-ink-text);color:var(--ground-ink);border-radius:var(--radius-control);font-weight:600;text-decoration:none}
.ss-return-bar .rb-next:hover{text-decoration:underline;text-decoration-color:var(--ground-ink)}
/* DS-6: a brandmark slot (the site's mark, inline SVG in currentColor, aria-hidden), a quiet next step (a text link on ink, not a
   button), and a compact phone row (the brandmark, the keeper and the way back; the next step moves to the page). One row, the
   control height. */
.ss-return-bar .rb-mark{display:inline-flex;align-items:center;align-self:center;color:var(--on-ink-text)}
.ss-return-bar .rb-mark svg{display:block;width:var(--sp-4);height:var(--sp-4)}
.ss-return-bar-inner{min-height:var(--control-h)}
.ss-return-bar--quiet .ss-return-bar-inner{padding-block:0}
.ss-return-bar--quiet .rb-next{padding:0;background:none;color:var(--on-ink-text);border-radius:0;font-weight:400;text-decoration:underline;text-decoration-thickness:1px}
.ss-return-bar--quiet .rb-next:hover,.ss-return-bar--quiet .rb-return:hover{color:var(--patina);text-decoration-color:var(--patina)}
@media (max-width:759px){
  .ss-return-bar--compact .ss-return-bar-inner{flex-wrap:nowrap;padding-inline:var(--sp-4);gap:var(--sp-3)}
  .ss-return-bar--compact .rb-notebook,.ss-return-bar--compact .rb-next{display:none}
  .ss-return-bar--compact .rb-who{flex-wrap:nowrap;align-items:center;gap:var(--sp-2)}
  .ss-return-bar--compact .rb-acts{flex-wrap:nowrap}
}

/* ArchiveLine: the "published as written" line under an archive entry's title. */
.ss-archive-line{margin:0;max-width:var(--content-note);padding:var(--sp-2) var(--sp-3);background:var(--held-bg);border-left:2px solid var(--rule);
  color:var(--ink-soft);font-size:var(--fs-caption);line-height:var(--lh-normal)}
.ss-archive-line b{color:var(--ink);font-weight:600}

/* ClosedThread: a read-only conversation as it stood on the original site. Display names only. v2 (DS-5): an optional summary line,
   optional day rules where the date changes (each comment then shows its name only), replies indented without a rule, and the
   author's replies set apart: a 2px primary rule and the name in the display face. */
.ss-closed-thread{max-width:var(--measure);margin:var(--sp-7) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--rule)}
.ss-closed-thread .ct-title{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:var(--lh-heading);margin:0 0 var(--sp-3)}
.ss-closed-thread .ct-list{list-style:none;margin:0;padding:0}
.ss-closed-thread .ct-comment{padding:var(--sp-4) 0 0;border-top:1px solid var(--rule)}
.ss-closed-thread .ct-comment article{padding-bottom:var(--sp-4)}
.ss-closed-thread .ct-replies{margin:0 0 0 var(--sp-6);padding-left:0;border-left:0}
.ss-closed-thread .ct-replies .ct-comment{border-top:0;padding-top:0}
.ss-closed-thread .ct-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-2)}
.ss-closed-thread .ct-name{font-weight:600;color:var(--ink)}
.ss-closed-thread .ct-role{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--patina-deep)}
.ss-closed-thread .ct-date{font-family:var(--font-label);font-size:var(--fs-label);color:var(--ink-soft)}
.ss-closed-thread .ct-body{font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--ink);overflow-wrap:anywhere}
.ss-closed-thread .ct-body>:first-child{margin-top:0}.ss-closed-thread .ct-body>:last-child{margin-bottom:0}
.ss-closed-thread .ct-closed{margin:var(--sp-4) 0 0;padding:var(--sp-3);background:var(--held-bg);color:var(--ink-soft);font-size:var(--fs-caption)}
.ss-closed-thread .ct-summary{margin:0 0 var(--sp-5);color:var(--ink-soft);font-size:var(--fs-body);line-height:var(--lh-normal)}
.ss-closed-thread .ct-day{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-3)}
.ss-closed-thread .ct-day::after{content:"";flex:1;border-top:1px solid var(--rule)}
.ss-closed-thread .ct-day .ct-date{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.ss-closed-thread .ct-comment:has(> .ct-day){border-top:0;padding-top:0}
.ss-closed-thread .ct-comment--author>article{border-left:2px solid var(--primary);padding-left:var(--sp-4)}
.ss-closed-thread .ct-comment--author>article .ct-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lead)}
@media (max-width:520px){.ss-closed-thread .ct-replies{margin-left:var(--sp-4);padding-left:0}}

/* NotebookMasthead: the blog's name, the "Notes from…" line and an attributed quotation. The quotation is set verbatim (the marks
   are drawn by CSS, not typed into the words); its attribution is part of the figure, wraps rather than truncates, and is never hidden. */
.ss-nb-masthead{max-width:var(--content-max);margin:0 auto;padding:var(--section-pad) var(--sp-5) var(--sp-6);text-align:center;border-bottom:1px solid var(--rule)}
.ss-nb-masthead--left{text-align:left}
.ss-nb-masthead .nbm-title{font-family:var(--font-display);font-size:clamp(var(--fs-h1),5vw,var(--fs-hero));line-height:var(--lh-heading);font-weight:700;margin:0 0 var(--sp-3);text-wrap:balance}
.ss-nb-masthead .nbm-from{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--ink-soft);margin:0 auto var(--sp-5);max-width:52ch}
.ss-nb-masthead--left .nbm-from,.ss-nb-masthead--left .ss-nb-quote{margin-left:0}
.ss-nb-quote{margin:0 auto;max-width:56ch}
.ss-nb-quote blockquote{margin:0;quotes:"\201C" "\201D";font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--ink)}
.ss-nb-quote blockquote p{margin:0}
.ss-nb-quote blockquote p::before{content:open-quote}
.ss-nb-quote blockquote p::after{content:close-quote}
.ss-nb-quote figcaption{display:block;margin-top:var(--sp-2);text-wrap:pretty;font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--ink-soft);font-style:normal;white-space:normal;overflow:visible}
.ss-nb-quote figcaption::before{content:"\2014\00a0"}
.ss-nb-quote cite{font-style:italic}

/* The notebook sheet (DS-4, kept by Doug's decision of 2026-10-12): an archive entry's page ground, the graph at --primary 7% (5% in dark) on an 18px pitch,
   for archive entry sheets only (.rr-entry on outonalims.com). A scoped, written exception to "no patterns" (guidelines/notebooks.md). */
.ss-nb-sheet{background-image:linear-gradient(var(--nb-sheet-graph) 1px,transparent 1px),linear-gradient(90deg,var(--nb-sheet-graph) 1px,transparent 1px);
  background-size:var(--nb-sheet-grid) var(--nb-sheet-grid)}