/* from DS 3.15.0 (pre-release), replace with the vendored file after tag.
   Copied from SynapticSci-Design-System ds-v3.15.0 @ 437c0ef: tokens/core.css (the v3.15 notebooks block) and
   components/components.css (the v3.15 notebooks section), unchanged. The site vendors DS 3.13.0 (draft-site/ds/), which
   has every token these rules use; once 3.15.0 is tagged and vendored, link draft-site/ds/ and delete this file. */

/* v3.15 — notebooks (decision 2026-10-08 notebooks, D-4). The bindings of the notebooks on the Lab Notes shelf, matched to the
   rendered shelf photograph (assets/photos/register.json, notebook-shelf). Names follow the notebook registry (SynSci-Curiosity
   content/notebooks.json, "binding"). A binding belongs to a notebook, the object: it is never a practice's, product's or
   sub-brand's colour anywhere else. Bindings and spine labels are physical colours, so they hold their values in dark mode, as
   photographs do. Text on a binding uses its on-colour; every pair is in check-contrast. */
:root{
  --notebook-binding-faded-green:#759175;  /* decision 2026-10-08 notebooks — faded green cloth, the three Out on a LIMS volumes; ink text */
  --notebook-binding-ultramarine:#264892;  /* decision 2026-10-08 notebooks — ultramarine blue cloth; paper text */
  --notebook-binding-rust:#9c4632;         /* decision 2026-10-08 notebooks — rust red cloth; paper text */
  --notebook-binding-teal:#2c5855;         /* decision 2026-10-08 notebooks — dark teal green cloth; paper text */
  --notebook-binding-charcoal:#494c52;     /* decision 2026-10-08 notebooks — charcoal grey cloth; paper text */
  --notebook-binding-plum:#60354b;         /* decision 2026-10-08 notebooks — methods plum cloth; paper text */
  --notebook-binding-field-yellow:#d9ab43; /* decision 2026-10-08 notebooks — field notebook yellow; ink text */
  --notebook-binding-marbled:#1e1e1f;      /* decision 2026-10-08 notebooks — bench composition book, black cloth spine; paper text */
  --notebook-on-dark:#fcfaf4;              /* decision 2026-10-08 notebooks — text on a dark binding (paper, in both modes) */
  --notebook-on-light:#221f1a;             /* decision 2026-10-08 notebooks — text on a light binding (ink, in both modes) */
  --notebook-label:#d3ccb6;                /* decision 2026-10-08 notebooks — the cream spine label as photographed; a drawn label's fill */
  --notebook-label-ink:#221f1a;            /* decision 2026-10-08 notebooks — typeset text on a spine label (10.2:1) */
  /* lane PR (2026-10-09, DS-4, for 3.15.0): the rule down an archive entry's margin; a neutral rule, never Madder */
  --nb-margin-rule:var(--rule);
}

/* ===== 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}
.ss-nb-spot:hover{border-color:var(--surface)}
.ss-nb-spot[aria-pressed="true"]{border-color:var(--surface);outline:3px solid var(--primary);outline-offset: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}}
/* 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)}

/* 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; replies nest one hairline in. */
.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-h3);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-5);padding-left:var(--sp-4);border-left:1px solid var(--rule)}
.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)}
@media (max-width:520px){.ss-closed-thread .ct-replies{margin-left:var(--sp-2);padding-left:var(--sp-3)}}

/* 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}

/* ===== lane PR (2026-10-09) — proposed for 3.15.0 (listed in notebooks/pr/DS-CHANGES.md). Tokens only. ================== */
/* DS-6 ReturnBar: a brandmark slot, 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:16px;height:16px}
.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}
}
/* DS-5 ClosedThread v2: a summary line, day rules where the date changes (each comment then shows its name only), and
   the author's replies set apart: indented, a primary rule, the name in the display face. */
.ss-closed-thread .ct-title{font-size:var(--fs-h2)}
.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)}
.ss-closed-thread .ct-replies{margin-left:var(--sp-6);padding-left:0;border-left:0}
@media (max-width:520px){.ss-closed-thread .ct-replies{margin-left:var(--sp-4);padding-left:0}}
/* DS-4 the notebook sheet: an archive entry's page ground, the graph at --primary 7% (5% in dark), for archive entry
   sheets only, a written exception to "no patterns". Doug decides; the alternative is a flat sheet with the margin rule. */
.ss-nb-sheet{--nb-graph:color-mix(in srgb,var(--primary) 7%,transparent);
  background-image:linear-gradient(var(--nb-graph) 1px,transparent 1px),linear-gradient(90deg,var(--nb-graph) 1px,transparent 1px);background-size:18px 18px}
@media screen and (prefers-color-scheme:dark){:root:not([data-mode="light"]) .ss-nb-sheet{--nb-graph:color-mix(in srgb,var(--primary) 5%,transparent)}}