/* sc-library.css — The Library section + the Second Brain Kit wizard.
   Loads AFTER /css/sc-v2.css and /css/sc-water-wood-skin.css and only
   uses their tokens. Cobalt is what you click; green is what grows. */

:root {
  --lib-green: #5ecc85;
  --lib-green-deep: #3da864;
  --lib-green-dim: rgba(94, 204, 133, 0.14);
  --lib-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  /* Readable-on-dark variants (shell pass 2026-09-11). The skin's --text-dim (alpha .44)
     sits at 3.7:1 on every Library ground and --accent cobalt at 3.7:1 as *text*; WCAG AA
     text needs 4.5:1. --lib-dim is the same ink at .58 (≥5.3:1 on deep, surface, sunken and
     the #111d35 chrome). --lib-link is cobalt one tint up for text and hairlines only —
     filled buttons keep --accent, where white on #3161f2 is 5.1:1. Diagram strokes and
     labels stay on --text-dim; Lighthouse does not read SVG text and the pictures are tuned. */
  --lib-dim: rgba(223, 231, 244, 0.58);
  --lib-link: var(--accent-amber-hover);
}

/* ── icons ─────────────────────────────────────────────── */
.ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex: none; }
.lib-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── the diagram (shared by tile and entry hero) ───────── */
.lib-diagram { width: 100%; }
.lib-diagram svg { width: 100%; height: auto; display: block; font-family: var(--lib-mono); }
.sb-note { fill: var(--surface); stroke: var(--line); }
.sb-note-line { stroke: var(--text-dim); stroke-width: 1.5; stroke-linecap: round; }
.sb-chip rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.sb-chip text { fill: var(--text-primary); font-size: 12px; }
.sb-chip .ic-f { stroke: var(--text-muted); fill: none; stroke-width: 1.5; }
.sb-chip.dim rect { stroke-dasharray: 3 3; } .sb-chip.dim text { fill: var(--text-dim); }
.sb-label { fill: var(--text-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--f-sans); }
.sb-bubble rect { fill: var(--bg-sunken); stroke: var(--line); }
.sb-bubble text { fill: var(--text-primary); font-family: var(--f-sans); font-size: 13px; font-style: italic; }
.sb-arrow { stroke: var(--text-dim); stroke-width: 1.5; fill: none; }
.sb-link { stroke: var(--lib-green); stroke-width: 1.6; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; animation: sbLink 8s ease-out infinite; }
.sb-fly { animation: sbFly 8s ease-in-out infinite; }
.sb-know rect { animation: sbPulse 8s infinite; }
@keyframes sbFly { 0%, 8% { transform: translate(0, 0); opacity: 1; } 32% { transform: translate(262px, -96px); opacity: 1; } 38%, 100% { transform: translate(262px, -96px); opacity: 0; } }
@keyframes sbLink { 0%, 36% { stroke-dashoffset: 300; opacity: 1; } 58%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sbPulse { 0%, 48%, 72%, 100% { stroke: var(--line); fill: var(--surface); } 56% { stroke: var(--lib-green); fill: var(--lib-green-dim); } }
@media (prefers-reduced-motion: reduce) {
  .sb-link, .sb-fly, .sb-know rect { animation: none; }
  .sb-link { stroke-dashoffset: 0; } .sb-fly { display: none; }
}

/* ── 002 diagram: tabs → one ticked page ────────────────── */
.rb-tabbar { stroke: var(--line); stroke-width: 1.2; }
.rb-sheet { fill: var(--surface); stroke: var(--line); }
.rb-chip { fill: var(--lib-green-dim); stroke: var(--lib-green-deep); }
.rb-chiptext { fill: var(--lib-green); font-size: 11px; letter-spacing: .08em; }
.rb-name { fill: var(--text-primary); font-size: 12px; }
.rb-bar { stroke: var(--lib-green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: rbBar 8s ease-out infinite; }
.rb-tick { fill: var(--lib-green-dim); stroke: var(--lib-green); stroke-width: 1.2; opacity: 0; animation: rbTick 8s ease-out infinite; }
.rb-tickmark { fill: none; stroke: var(--lib-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: rbTick 8s ease-out infinite; }
.rb-foot { fill: var(--text-dim); font-size: 11px; }
.rb-fly { animation: rbFly 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rb-fly-2 { animation-delay: .5s; } .rb-fly-3 { animation-delay: 1s; }
.rb-row:nth-child(2) .rb-bar, .rb-row:nth-child(2) .rb-tick, .rb-row:nth-child(2) .rb-tickmark { animation-delay: .35s; }
.rb-row:nth-child(3) .rb-bar, .rb-row:nth-child(3) .rb-tick, .rb-row:nth-child(3) .rb-tickmark { animation-delay: .7s; }
@keyframes rbFly { 0%, 6% { transform: translate(0, 0) scale(1); opacity: 1; } 30% { transform: translate(300px, -20px) scale(.55); opacity: 1; } 36%, 100% { transform: translate(300px, -20px) scale(.55); opacity: 0; } }
@keyframes rbBar { 0%, 38% { stroke-dashoffset: 220; } 56%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rbTick { 0%, 54% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb-bar, .rb-tick, .rb-tickmark, .rb-fly { animation: none; } .rb-bar { stroke-dashoffset: 0; } .rb-tick, .rb-tickmark { opacity: 1; } .rb-fly { display: none; } }

/* ── 003 diagram: inbox → desk scores and drafts → you send ── */
.ld-env { fill: var(--surface); stroke: var(--line); }
.ld-envflap { fill: none; stroke: var(--text-dim); stroke-width: 1.2; }
.ld-desk { fill: var(--surface); stroke: var(--line); }
.ld-pill { stroke-width: 1.2; }
.ld-pill.hi { fill: var(--lib-green-dim); stroke: var(--lib-green); } .ld-pill.lo { fill: none; stroke: var(--line); stroke-dasharray: 3 3; }
.ld-pilltext { font-size: 11px; letter-spacing: .06em; } .ld-pill.hi + .ld-pilltext { fill: var(--lib-green); } .ld-pill.lo + .ld-pilltext { fill: var(--text-dim); }
.ld-draft { stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: ldDraft 8s ease-out infinite; }
.ld-draft:nth-of-type(2) { animation-delay: .25s; } .ld-draft:nth-of-type(3) { animation-delay: .5s; }
.ld-you rect { fill: var(--accent); } .ld-you text { fill: var(--text-on-amber); font-family: var(--f-sans); font-weight: 600; font-size: 12px; }
.ld-you { animation: ldYou 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ld-fly { animation: ldFly 8s ease-in-out infinite; }
.ld-fly-2 { animation-delay: .4s; }
@keyframes ldFly { 0%, 6% { transform: translate(0, 0); opacity: 1; } 28% { transform: translate(228px, 6px); opacity: 1; } 34%, 100% { transform: translate(228px, 6px); opacity: 0; } }
@keyframes ldDraft { 0%, 40% { stroke-dashoffset: 160; } 58%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ldYou { 0%, 62% { transform: scale(1); } 70% { transform: scale(1.08); } 78%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ld-draft, .ld-you, .ld-fly { animation: none; } .ld-draft { stroke-dashoffset: 0; } .ld-fly { display: none; } }

/* ── 004 diagram: chat bubbles → desk → you reply on their app ── */
.la-bub { fill: var(--surface); stroke: var(--line); }
.la-bub-line { stroke: var(--text-dim); stroke-width: 1.5; stroke-linecap: round; }
.la-phone { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 1.2; }
.la-reply { fill: var(--accent); }
.la-reply-line { stroke: var(--text-on-amber); stroke-width: 1.4; stroke-linecap: round; }

/* ── 005 diagram: three hats pass one page along ─────────── */
.th-hat { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.th-hat.on { stroke: var(--lib-green); fill: var(--lib-green-dim); }
.th-hatic { stroke: var(--text-primary); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.th-name { fill: var(--text-primary); font-size: 12px; }
.th-rule { fill: var(--text-dim); font-size: 10.5px; font-family: var(--f-sans); }
.th-page { fill: var(--surface); stroke: var(--line); }
.th-src { fill: var(--lib-green); }
.th-line { stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; }
.th-tick { fill: none; stroke: var(--lib-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.th-move { animation: thMove 9s ease-in-out infinite; }
.th-stage-1 { animation: thStage1 9s infinite; } .th-stage-2 { animation: thStage2 9s infinite; } .th-stage-3 { animation: thStage3 9s infinite; }
.th-hat.h1 { animation: thHat1 9s infinite; } .th-hat.h2 { animation: thHat2 9s infinite; } .th-hat.h3 { animation: thHat3 9s infinite; }
@keyframes thMove { 0%, 22% { transform: translate(0, 0); } 33%, 55% { transform: translate(230px, 0); } 66%, 92% { transform: translate(460px, 0); } 100% { transform: translate(460px, 0); opacity: 0; } }
@keyframes thStage1 { 0%, 8% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes thStage2 { 0%, 40% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes thStage3 { 0%, 72% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes thHat1 { 0%, 4% { stroke: var(--line); fill: var(--surface); } 8%, 26% { stroke: var(--lib-green); fill: var(--lib-green-dim); } 33%, 100% { stroke: var(--line); fill: var(--surface); } }
@keyframes thHat2 { 0%, 36% { stroke: var(--line); fill: var(--surface); } 40%, 58% { stroke: var(--lib-green); fill: var(--lib-green-dim); } 66%, 100% { stroke: var(--line); fill: var(--surface); } }
@keyframes thHat3 { 0%, 68% { stroke: var(--line); fill: var(--surface); } 72%, 92% { stroke: var(--lib-green); fill: var(--lib-green-dim); } 100% { stroke: var(--line); fill: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .th-move, .th-stage-1, .th-stage-2, .th-stage-3, .th-hat { animation: none; } .th-move { transform: translate(460px, 0); } .th-stage-1, .th-stage-2, .th-stage-3 { opacity: 1; } }

/* ── catalogue ─────────────────────────────────────────── */
.lib-hero { padding: 64px var(--pad-x, 40px) 28px; max-width: var(--max-w, 1240px); margin: 0 auto; }
.lib-hero-h { font-family: var(--f-serif); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; margin: 0 0 14px; text-wrap: balance; }
.lib-hero-dek { font-family: var(--f-sans); font-size: 20px; line-height: 1.45; color: var(--text-muted); max-width: 52ch; margin: 0 0 8px; }
.lib-hero-sub { font-family: var(--f-sans); font-size: 14px; color: var(--lib-dim); margin: 0; display: flex; gap: 8px; align-items: center; }

.lib-pills { max-width: var(--max-w, 1240px); margin: 0 auto; padding: 0 var(--pad-x, 40px) 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.lib-pill { font-family: var(--f-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lib-pill:hover { border-color: var(--text-muted); }
.lib-pill.on { border-color: var(--accent); color: var(--lib-link); }
.lib-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-pill-n { font-family: var(--lib-mono); font-size: 12px; color: var(--lib-green); }
.lib-tile[hidden] { display: none; }
.lib-grid { max-width: var(--max-w, 1240px); margin: 0 auto; padding: 8px var(--pad-x, 40px) 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lib-tile { grid-column: span 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text-primary); }
.lib-tile:only-child { grid-column: span 2; }
.lib-grid:has(.lib-tile:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.lib-tile:hover, .lib-tile:focus-visible { border-color: var(--accent); outline: none; }
.lib-tile-visual { background: var(--bg-sunken); padding: 22px 22px 10px; border-bottom: 1px solid var(--line); }
.lib-tile-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.lib-tile-top { display: flex; align-items: center; gap: 10px; }
.lib-num { font-family: var(--lib-mono); font-size: 12px; letter-spacing: .08em; color: var(--lib-green); }
.lib-tile-title { font-family: var(--f-serif); font-weight: 700; font-size: 24px; line-height: 1.1; margin: 0; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.lib-tile-title .ic { font-size: 22px; color: var(--lib-green); }
.lib-tile-for { font-family: var(--f-sans); font-size: 16px; color: var(--text-muted); margin: 0; }
.lib-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.lib-spec { font-family: var(--lib-mono); font-size: 12.5px; color: var(--lib-green); }
.lib-open { font-family: var(--f-sans); font-weight: 600; font-size: 14px; color: var(--lib-link); border: 1.5px solid var(--accent); border-radius: 4px; padding: 8px 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lib-tile:hover .lib-open { background: var(--accent); color: var(--text-on-amber); }

.lib-method { max-width: var(--max-w, 1240px); margin: 0 auto; padding: 0 var(--pad-x, 40px) 72px; }
.lib-method h2 { font-family: var(--f-serif); font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.lib-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lib-icard { border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.lib-icard .ic { font-size: 24px; color: var(--text-muted); }
.lib-icard.grow { border-color: var(--lib-green-deep); } .lib-icard.grow .ic { color: var(--lib-green); }
.lib-icard h3 { font-family: var(--f-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lib-dim); margin: 0; }
.lib-icard.grow h3 { color: var(--lib-green); }
.lib-icard p { font-family: var(--f-sans); font-size: 15px; line-height: 1.45; color: var(--text-primary); margin: 0; }

/* ── entry page ─────────────────────────────────────────── */
.lib-entry { max-width: 1000px; margin: 0 auto; padding: 48px var(--pad-x, 40px) 72px; display: flex; flex-direction: column; gap: 44px; }
.lib-hero2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; }
.lib-hero2 h1 { font-family: var(--f-serif); font-weight: 700; font-size: clamp(36px, 5vw, 52px); line-height: 1.02; margin: 6px 0 12px; letter-spacing: -0.015em; }
.lib-hero2 .lib-hero-dek { font-size: 19px; margin-bottom: 16px; }
.lib-record-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--f-sans); font-size: 14px; color: var(--text-muted); margin: 0; }
.lib-record-meta dt { color: var(--lib-dim); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding-top: 3px; }
.lib-record-meta dd { margin: 0; }
.lib-hero2 .lib-diagram { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }

.lib-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lib-honest { display: flex; gap: 12px; align-items: flex-start; font-family: var(--f-sans); font-size: 15px; color: var(--text-muted); margin: 0; border-left: 2px solid var(--lib-green); padding-left: 14px; }
.lib-honest .ic { font-size: 18px; color: var(--lib-green); margin-top: 3px; }

.lib-fold { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.lib-fold > summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--f-sans); font-size: 15px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.lib-fold > summary::-webkit-details-marker { display: none; }
.lib-fold > summary .ic { color: var(--text-dim); font-size: 18px; }
.lib-fold > summary:hover { color: var(--text-primary); }
.lib-fold[open] > summary { border-bottom: 1px solid var(--line); }
.lib-fold-body { padding: 20px; display: flex; flex-direction: column; gap: 36px; }
.lib-static { display: flex; flex-direction: column; gap: 18px; }
.lib-static > h2, .lib-translate > h2 { font-family: var(--f-serif); font-size: 22px; font-weight: 700; margin: 0; }
.lib-static .lib-note { font-family: var(--f-sans); font-size: 14px; color: var(--text-muted); margin: 0; }
.lib-tldr { font-family: var(--f-sans); font-size: 16px; line-height: 1.5; border-left: 2px solid var(--lib-green); padding-left: 14px; margin: 0; }
.lib-translate table { width: 100%; border-collapse: collapse; font-family: var(--f-sans); font-size: 14px; }
.lib-translate th, .lib-translate td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lib-translate th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lib-dim); font-weight: 600; }
.lib-translate td:first-child { color: var(--text-muted); }
.lib-adapted { font-family: var(--f-sans); font-size: 13px; color: var(--lib-dim); margin: 0; }

/* ── what / day / uses blocks on the entry ───────────────── */
.lib-block { display: flex; flex-direction: column; gap: 12px; }
.lib-what { font-family: var(--f-sans); font-size: 19px; line-height: 1.45; color: var(--text-primary); margin: 0; max-width: 60ch; }
.lib-day .sbk-week dd em, .lib-what em { font-style: italic; color: var(--text-primary); }
.lib-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lib-uses .lib-icard h3 { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.lib-uses .lib-icard p { color: var(--text-muted); font-size: 14px; }
.lib-uses .lib-icard .ic { color: var(--lib-green); }

/* ── the wizard ─────────────────────────────────────────── */
.sbk { font-family: var(--f-sans); font-size: 17px; line-height: 1.55; color: var(--text-primary); display: flex; flex-direction: column; gap: 18px; }
.sbk section { display: flex; flex-direction: column; gap: 22px; }
.sbk [hidden] { display: none !important; }
.sbk h2 { font-family: var(--f-serif); font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
.sbk h3 { font-family: var(--f-sans); font-size: 17px; font-weight: 600; margin: 0; }
.sbk p { margin: 0; max-width: 64ch; }
.sbk .muted { color: var(--text-muted); font-size: 14px; }
.sbk .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sbk-eyebrow { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lib-dim); margin: 0; }

.sbk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.sbk-card .ic { font-size: 26px; color: var(--lib-green); }
.sbk-card p { font-size: 15px; color: var(--text-muted); }

.sbk-btn { font-family: var(--f-sans); font-weight: 600; font-size: 15px; background: var(--accent); color: var(--text-on-amber); border: 0; border-radius: 6px; padding: 13px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sbk-btn:hover { background: var(--accent-amber-hover); }
.sbk-btn:disabled { opacity: .4; cursor: not-allowed; }
.sbk-btn-ghost { background: transparent; color: var(--text-primary); border: 1.5px solid var(--line); }
.sbk-btn-ghost:hover { background: transparent; border-color: var(--text-muted); }

.sbk-dots { display: flex; gap: 6px; align-items: center; font-family: var(--lib-mono); font-size: 11px; color: var(--text-dim); letter-spacing: .06em; }
.sbk-dots i { width: 28px; height: 3px; border-radius: 2px; background: var(--line); display: block; }
.sbk-dots i.on { background: var(--accent); } .sbk-dots i.done { background: var(--lib-green); }

.sbk textarea { width: 100%; min-height: 120px; resize: vertical; font: inherit; font-size: 16px; color: var(--text-primary); background: var(--bg-sunken); border: 1.5px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.sbk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sbk-tile { position: relative; cursor: pointer; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 132px; }
.sbk-tile input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sbk-tile .ic { font-size: 28px; color: var(--text-muted); }
.sbk-tile b { display: block; font-weight: 600; font-size: 16px; }
.sbk-tile small { display: block; color: var(--text-muted); font-size: 13.5px; line-height: 1.4; }
.sbk-tile:hover { border-color: var(--text-muted); }
.sbk-tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sbk-tile:has(input:checked) .ic { color: var(--accent); }
.sbk-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.sbk-summary { font-family: var(--lib-mono); font-size: 13px; color: var(--lib-green); display: inline-flex; align-items: center; gap: 8px; }
.sbk-summary .ic { font-size: 16px; }
.sbk-aside { border-left: 2px solid var(--lib-green); padding: 2px 0 2px 14px; color: var(--text-muted); font-size: 15px; }

.sbk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.sbk-step { display: grid; grid-template-columns: 34px 44px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.sbk-step-n { font-family: var(--lib-mono); font-size: 13px; color: var(--lib-green); padding-top: 12px; }
.sbk-step-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-sunken); border: 1px solid var(--line); display: grid; place-items: center; }
.sbk-step-ic .ic { font-size: 22px; color: var(--text-primary); }
.sbk-step-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sbk-step-body p { font-size: 15px; color: var(--text-muted); }
.sbk-step-body code, .sbk p code { font-family: var(--lib-mono); font-size: .88em; background: var(--bg-sunken); padding: 1px 6px; border-radius: 4px; color: var(--text-primary); }
.sbk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sbk-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lib-mono); font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunken); }
.sbk-chip .ic { font-size: 14px; color: var(--text-muted); }

.sbk-copyblock { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-sunken); }
.sbk-copyhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--lib-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lib-dim); }
.sbk-copy { font-family: var(--f-sans); font-weight: 600; font-size: 13px; background: var(--accent); color: var(--text-on-amber); border: 0; border-radius: 5px; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.sbk-copy:hover { background: var(--accent-amber-hover); }
.sbk-copy.ok { background: var(--lib-green); color: #06120a; }
.sbk-copyblock pre { margin: 0; padding: 14px; overflow-x: auto; max-height: 260px; font-family: var(--lib-mono); font-size: 12.5px; line-height: 1.55; color: var(--text-primary); white-space: pre; }

.sbk-later { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.sbk-later-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbk-later-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sbk-later-card > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.sbk-later-card > summary::-webkit-details-marker { display: none; }
.sbk-later-card > summary .ic { font-size: 22px; color: var(--lib-green); }
.sbk-later-card > summary b { display: block; font-size: 15px; font-weight: 600; }
.sbk-later-card > summary small { display: block; font-size: 13px; color: var(--text-muted); }
.sbk-later-card[open] > summary { border-bottom: 1px solid var(--line); }
.sbk-later-card .sbk-copyblock { border: 0; border-radius: 0 0 10px 10px; }

.sbk-weeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.sbk-week { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sbk-week dt { font-family: var(--lib-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lib-green); }
.sbk-week dd { margin: 0; font-size: 15px; color: var(--text-muted); }
.sbk-week .ic { font-size: 24px; color: var(--text-primary); }
.sbk .plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sbk .plain li { padding-left: 26px; position: relative; font-size: 15px; color: var(--text-muted); }
.sbk .plain li .ic { position: absolute; left: 0; top: 3px; font-size: 16px; color: var(--text-dim); }

.sbk-btn:focus-visible, .sbk-copy:focus-visible, .sbk textarea:focus-visible, .lib-fold > summary:focus-visible, .sbk-later-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .sbk-copy, .lib-open, .lib-tile, .sbk-tile { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } }

@media (max-width: 900px) {
  .lib-grid { grid-template-columns: 1fr 1fr; } .lib-tile:only-child { grid-column: span 2; }
  .lib-hero2 { grid-template-columns: 1fr; }
  .lib-method-grid, .lib-uses { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .lib-grid { grid-template-columns: 1fr; } .lib-tile:only-child { grid-column: span 1; }
  .lib-method-grid { grid-template-columns: 1fr; }
  .lib-two, .sbk-later-grid, .sbk-weeks, .lib-uses { grid-template-columns: 1fr; }
  .sbk-step { grid-template-columns: 26px 1fr; } .sbk-step-ic { display: none; }
  .lib-tile-foot { flex-direction: column; align-items: flex-start; }
}

.lib-hero-sub a, .lib-fold > summary a { color: var(--lib-link); text-decoration: none; }
.lib-hero-sub a:hover, .lib-fold > summary a:hover { text-decoration: underline; }

/* The Kit — banner on the catalogue, strip on each record (2026-09-07) */
.lib-kit-banner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin: 8px 0 26px; text-decoration: none; color: var(--text-primary); }
.lib-kit-banner:hover { border-color: var(--accent-amber-hover); }
.lib-kit-banner .lib-num { color: var(--wood-bright); }
.lib-kit-banner h2 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -.015em; margin: 4px 0 6px; }
.lib-kit-banner p { color: var(--text-muted); font-size: 15px; margin: 0 0 10px; max-width: 52ch; }
.lib-kit-banner .lib-spec { display: inline-block; }
.lib-kit-banner .lib-diagram { padding: 10px; }
.lib-kit-strip { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 22px 0; text-decoration: none; color: var(--text-primary); }
.lib-kit-strip:hover { border-color: var(--accent-amber-hover); }
.lib-kit-strip span { font-size: 15px; color: var(--text-muted); }
.lib-kit-strip span b { color: var(--text-primary); font-weight: 600; }
.lib-kit-strip .lib-open { white-space: nowrap; }
@media (max-width: 720px) { .lib-kit-banner { grid-template-columns: 1fr; } .lib-kit-strip { flex-direction: column; align-items: flex-start; } }

/* ---- seat diagrams ------------------------------------------------------
   One SVG per seat in library/seat-diagrams/, inlined by the builder as the
   catalogue seat header (120px), the seat/tool page hero (full width) and the
   tool tile visual. Same grammar as the record diagrams above: left = the mess
   or the input, middle = the seat doing its job, right = the outcome, three
   .sb-label captions at y=306. Green is what grows or what the seat produced;
   cobalt (--accent) only for what a person clicks or does.
   SVG rule: an outer <g transform> positions, an inner <g class="sd-…">
   animates — never both on one element.                                    */

/* shapes */
.sd-box { fill: var(--surface); stroke: var(--line); }
.sd-fill { fill: var(--bg-sunken); stroke: var(--line); }
.sd-thin { fill: none; stroke: var(--text-dim); stroke-width: 1.4; stroke-linecap: round; }
.sd-line { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; }
.sd-dash { fill: none; stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sd-grow { fill: none; stroke: var(--lib-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-growfill { fill: var(--lib-green-dim); stroke: var(--lib-green); stroke-width: 1.2; }
.sd-play { fill: var(--lib-green); stroke: none; }
.sd-book { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 1.1; }
.sd-funnel { fill: none; stroke: var(--text-dim); stroke-width: 1.8; stroke-linejoin: round; }
.sd-cut { fill: none; stroke: var(--lib-green); stroke-width: 1.6; stroke-dasharray: 5 5; }
.sd-tag { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.sd-taghole { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 1; }
.sd-lock { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-linecap: round; }
.sd-cell { fill: none; stroke: var(--line); stroke-width: 1; }
.sd-cbox { fill: none; stroke: var(--line); stroke-width: 1.3; }
.sd-btn { fill: none; stroke: var(--text-muted); stroke-width: 1.2; }
.sd-btnm { fill: none; stroke: var(--lib-green); stroke-width: 1.3; }
.sd-pipe { fill: none; stroke: var(--text-dim); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sd-knobc { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1.5; }
.sd-caret { fill: var(--text-muted); stroke: none; }

/* what a person does — cobalt, and only here */
.sd-act { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.sd-tag.act { stroke: var(--accent); }
.sd-person { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.sd-hand { fill: var(--accent); stroke: none; }
.sd-acttext { fill: var(--accent); font-size: 12px; }

/* type */
.sd-name { fill: var(--text-primary); font-size: 12px; }
.sd-dim { fill: var(--text-dim); font-size: 11px; letter-spacing: .06em; }
.sd-prompt { fill: var(--text-muted); font-size: 12px; }
.sd-tagtext { fill: var(--lib-green); font-size: 11px; letter-spacing: .06em; }

/* the small accents that arrive last — ticks, dots, cut marks */
.sd-in { opacity: 0; animation: sdIn 8s ease-out infinite; }
.sd-in-2 { animation-delay: .45s; }
.sd-in-3 { animation-delay: .9s; }
.sd-in-4 { animation-delay: 1.35s; }
@keyframes sdIn { 0%, 46% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* memory — a note is filed on the shelf, then the shelf is read */
.sd-file { animation: sdFile 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sdFile { 0%, 8% { transform: translate(0, 0) scale(1); opacity: 1; } 34% { transform: translate(178px, -8px) scale(.46); opacity: 1; } 40%, 100% { transform: translate(178px, -8px) scale(.46); opacity: 0; } }
.sd-read { fill: none; stroke: var(--lib-green); stroke-width: 1.8; stroke-dasharray: 200; stroke-dashoffset: 200; animation: sdRead 8s ease-out infinite; }
@keyframes sdRead { 0%, 44% { stroke-dashoffset: 200; opacity: 1; } 64%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* research — a tab drops into the filter */
.sd-drop { animation: sdDrop 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sdDrop { 0%, 8% { transform: translate(0, 0) scale(1); opacity: 1; } 34% { transform: translate(186px, 16px) scale(.5); opacity: 1; } 40%, 100% { transform: translate(186px, 16px) scale(.5); opacity: 0; } }

/* sales — the cursor presses the send button (with .ld-you) */
.sd-tap { animation: sdTap 8s ease-in-out infinite; }
@keyframes sdTap { 0%, 60% { transform: translate(5px, 5px); } 70% { transform: translate(0, 0); } 80%, 100% { transform: translate(5px, 5px); } }

/* marketing — the draft you chose lifts out of the fan */
.sd-lift { animation: sdLift 8s ease-in-out infinite; }
@keyframes sdLift { 0%, 40% { transform: translate(0, 0); } 58%, 92% { transform: translate(0, -12px); } 100% { transform: translate(0, 0); } }

/* content — the scissors walk the timeline */
.sd-snip { animation: sdSnip 8s ease-in-out infinite; }
@keyframes sdSnip { 0%, 10% { transform: translate(0, 0); } 36%, 44% { transform: translate(56px, 0); } 66%, 92% { transform: translate(112px, 0); } 100% { transform: translate(0, 0); } }

/* design — the screens come into line */
.sd-match { animation: sdMatch 8s ease-in-out infinite; }
.sd-match-2 { animation-delay: .3s; }
.sd-match-3 { animation-delay: .6s; }
@keyframes sdMatch { 0%, 40% { stroke: var(--line); } 58%, 90% { stroke: var(--lib-green); } 100% { stroke: var(--line); } }

/* support — the one that goes to a person */
.sd-flag { animation: sdFlag 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sdFlag { 0%, 62% { transform: scale(1); } 70% { transform: scale(1.04); } 80%, 100% { transform: scale(1); } }

/* operations — the switch goes on, the pipe joins */
.sd-knob { animation: sdKnob 8s ease-in-out infinite; }
@keyframes sdKnob { 0%, 20% { transform: translate(0, 0); } 40%, 86% { transform: translate(108px, 0); } 100% { transform: translate(0, 0); } }
.sd-knobc { animation: sdKnobOn 8s ease-in-out infinite; }
@keyframes sdKnobOn { 0%, 20% { fill: var(--surface); stroke: var(--text-muted); } 40%, 86% { fill: var(--lib-green-dim); stroke: var(--lib-green); } 100% { fill: var(--surface); stroke: var(--text-muted); } }
.sd-joined { fill: none; stroke: var(--lib-green); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 210; stroke-dashoffset: 210; animation: sdJoin 8s ease-out infinite; }
@keyframes sdJoin { 0%, 34% { stroke-dashoffset: 210; } 54%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }

/* building — the tick draws once the list is clear */
.sd-bigtick { stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sdBig 8s ease-out infinite; }
@keyframes sdBig { 0%, 10% { stroke-dashoffset: 100; } 34%, 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sd-in, .sd-file, .sd-drop, .sd-tap, .sd-lift, .sd-snip, .sd-match,
  .sd-flag, .sd-knob, .sd-knobc, .sd-joined, .sd-bigtick { animation: none; }
  .sd-in { opacity: 1; }
  .sd-file, .sd-drop { display: none; }
  .sd-joined, .sd-bigtick { stroke-dashoffset: 0; }
  .sd-read { animation: none; stroke-dashoffset: 0; }
  .sd-knob { transform: translate(108px, 0); }
  .sd-knobc { fill: var(--lib-green-dim); stroke: var(--lib-green); }
  .sd-match { stroke: var(--lib-green); }
}

/* ---- tools (catalogue + tool page) ---- */
/* ---- seats (catalogue) ---- */
.lib-seat { grid-column: 1 / -1; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 26px 0 6px; border-top: 1px solid var(--line); }
.lib-seat:first-child { border-top: 0; padding-top: 4px; }
.lib-seat .lib-diagram { width: 120px; }
.lib-seat h2 { font-family: var(--f-serif); font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 10px; }
.lib-seat h2 .ic { font-size: 22px; color: var(--lib-green); }
.lib-seat p { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; }
.lib-seat[hidden] { display: none; }
.lib-tile.tool .lib-tile-visual { padding: 14px 22px 4px; }
.lib-tile.tool .lib-tile-title { font-size: 21px; }
.lib-kind { font-family: var(--lib-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lib-dim); }
/* ---- tool page ---- */
.lib-seat-crumb { font-family: var(--f-sans); font-size: 14px; color: var(--text-muted); margin: 0 0 10px; }
.lib-seat-crumb a { color: var(--lib-link); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lib-readme { font-family: var(--f-serif); font-size: 19px; color: var(--text-primary); margin: 10px 0 18px; }
.lib-readme-src { display: block; font-family: var(--f-sans); font-size: 13px; color: var(--lib-dim); margin-top: 4px; }
.lib-brief-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lib-brief[hidden] { display: none; }
.lib-never { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lib-never li { padding: 12px 14px 12px 40px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text-primary); }
.lib-never li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lib-green); }
.lib-credit p { color: var(--text-muted); max-width: 64ch; }
.lib-grid-inline { padding: 0; grid-template-columns: repeat(2, 1fr); }
.lib-tool .sbk-lede { color: var(--text-muted); max-width: 64ch; }
.lib-seat-line { color: var(--lib-dim); }
.lib-seat-kind { white-space: nowrap; }
.lib-brief pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lib-pill[hidden] { display: none; }
@media (max-width: 719px) { .lib-seat { grid-template-columns: 1fr; } .lib-seat .lib-diagram { width: 100%; max-width: 240px; } .lib-grid-inline { grid-template-columns: 1fr; } }
.lib-tool-real { font-family: var(--lib-mono); font-size: 13px; color: var(--lib-dim); margin: -4px 0 14px; }
.lib-tool-real a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── Client mirror (/client/<slug>/) ───────────────────────────────────────── */
.cm-banner { background: var(--lib-green-dim); border: 1px solid var(--lib-green); color: var(--text); border-radius: 8px; padding: 10px 14px; font-family: var(--lib-mono); font-size: 13px; margin: 0 0 18px; }
.cm-state { margin: 18px 0 0; }
/* #cm-ready also carries .sbk, whose `display: flex` outranks the UA's `[hidden] { display: none }`
   (a class beats a presentational attribute), so the locked page rendered an empty report skeleton
   below the password form. `.sbk [hidden]` above only reaches descendants, not the .sbk element
   itself. Same specificity as .sbk and later in the file, so !important is what makes it bite. */
.cm-state[hidden] { display: none !important; }
.cm-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cm-form input { background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 10px 12px; font: inherit; min-width: 220px; }
.cm-error { color: #ff8a8a; font-size: 14px; margin: 0; flex-basis: 100%; }
.cm-muted { color: var(--text-dim); font-size: 14px; }
.cm-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.cm-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cm-tile strong { font-family: var(--f-serif); font-size: 28px; line-height: 1; }
.cm-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cm-acct h3 { margin: 0; font-size: 16px; }
.cm-badge { font-family: var(--lib-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lib-green); }
.cm-removed, .cm-unavail { opacity: .7; }
.cm-removed .cm-badge, .cm-unavail .cm-badge { color: var(--text-dim); }
.cm-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cm-chart { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.cm-chart figcaption { font-family: var(--lib-mono); font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.cm-chart svg { width: 100%; height: auto; display: block; }
.cm-axis { font-family: var(--lib-mono); font-size: 10px; fill: var(--text-dim); }
.cm-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.cm-table th, .cm-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cm-table th { font-family: var(--lib-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.cm-table td:nth-child(n+4) { font-family: var(--lib-mono); white-space: nowrap; }
.cm-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cm-notes li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.cm-disclosure { margin: 28px 0 0; color: var(--text-dim); font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 860px) { .cm-charts { grid-template-columns: 1fr; } }

/* ── Distribution landing (/distribution/) ─────────────────────────────────── */
.dist .lib-hero2 { grid-template-columns: 1.1fr 1fr; align-items: center; }
.dist-hero-art svg, .dist-report-art svg { width: 100%; height: auto; display: block; }
.dist-report-art { max-width: 760px; margin: 0 0 14px; }
.dist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dist-cols > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.dist-cols h3 { margin: 0 0 6px; font-size: 14px; font-family: var(--lib-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lib-green); }
.dist-disclosure { font-size: 16px; color: var(--text); max-width: 64ch; }
.sd-label { font-family: var(--lib-mono); font-size: 11px; fill: var(--text-dim); }
@media (max-width: 860px) { .dist .lib-hero2, .dist-cols { grid-template-columns: 1fr; } }

/* ── Motion — micro-interactions (2026-09-11) ─────────────────────────────────
   Patterns from the UI sources (spotlight card, animated tabs, staggered filter,
   scroll reveal, copy confirmation, choice pop), rebuilt in plain CSS plus
   /js/sc-library-motion.js. No component code is copied: several sources have no
   open-source licence and react-bits carries a Commons Clause.
   Everything is scoped to html.lib-motion, which only that script sets, so a page
   without it — or a reader or crawler without JS — renders exactly as before.
   Anything that moves sits under prefers-reduced-motion: no-preference.
   Cobalt is still what you click; green is still what grows. */

/* spotlight — a cobalt light follows the pointer along the card's edge */
html.lib-motion .lib-tile, html.lib-motion .lib-kit-banner { position: relative; isolation: isolate; }
html.lib-motion .lib-tile::after, html.lib-motion .lib-kit-banner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(123, 156, 255, .75), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 220ms ease;
}
html.lib-motion .lib-tile::before, html.lib-motion .lib-kit-banner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 131, 255, .07), transparent 62%);
  opacity: 0; transition: opacity 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html.lib-motion .lib-tile:hover::after, html.lib-motion .lib-tile:hover::before,
  html.lib-motion .lib-kit-banner:hover::after, html.lib-motion .lib-kit-banner:hover::before { opacity: 1; }
  /* the light carries the highlight, so the full cobalt border is kept for keyboard focus */
  html.lib-motion .lib-tile:hover:not(:focus-visible) { border-color: rgba(123, 156, 255, .26); }
  html.lib-motion .lib-kit-banner:hover { border-color: rgba(123, 156, 255, .26); }
}

/* sliding indicator — one outline travels between the pills and between the AI tabs */
html.lib-motion .lib-pills, html.lib-motion .lib-brief-tabs { position: relative; }
.lib-ind { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 1.5px solid var(--accent); border-radius: 999px; pointer-events: none; z-index: 1; opacity: 0; }
html.lib-motion .lib-ind-on > .lib-pill.on { border-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .lib-ind { transition: transform 340ms cubic-bezier(.2, .8, .2, 1), width 340ms cubic-bezier(.2, .8, .2, 1), height 340ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease; }
  .lib-ind.lib-ind-jump { transition: none; }

  /* lift and nudge */
  html.lib-motion .lib-tile { transition: transform 240ms cubic-bezier(.2, .7, .2, 1), box-shadow 240ms ease, border-color 160ms ease, background 120ms ease, color 120ms ease; }
  html.lib-motion .lib-open .ic { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
  html.lib-motion .lib-tile:focus-visible .lib-open .ic { transform: translateX(4px); }
  @media (hover: hover) and (pointer: fine) {
    html.lib-motion .lib-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95); }
    html.lib-motion .lib-tile:hover .lib-open .ic, html.lib-motion .lib-kit-strip:hover .lib-open .ic { transform: translateX(4px); }
  }

  /* press */
  html.lib-motion :is(.sbk-btn, .sbk-copy, .lib-pill) { transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease; }
  html.lib-motion :is(.sbk-btn:not(:disabled), .sbk-copy, .lib-pill):active { transform: scale(.97); }

  /* filter — the tiles that stay come back in a short cascade */
  @keyframes libEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  html.lib-motion .lib-enter { animation: libEnter 380ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }

  /* reveal — only what starts below the fold, and only once */
  html.lib-motion .lib-rv { opacity: 0; transform: translateY(14px); }
  html.lib-motion .lib-rv.lib-rv-in { opacity: 1; transform: none; transition: opacity 520ms ease, transform 560ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 55ms); }

  /* copy — a green ring confirms what was copied */
  @keyframes libCopied { from { box-shadow: 0 0 0 0 rgba(94, 204, 133, .6); } to { box-shadow: 0 0 0 12px rgba(94, 204, 133, 0); } }
  html.lib-motion .sbk-copy.ok { animation: libCopied 640ms ease-out; }

  /* choosing — the picked tile's icon answers */
  @keyframes libPop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
  html.lib-motion .sbk-tile:has(input:checked) .ic { animation: libPop 380ms cubic-bezier(.2, .7, .2, 1); }
  html.lib-motion .sbk-tile { transition: border-color 160ms ease, box-shadow 160ms ease; }

  /* one question per screen — each screen arrives rather than appears */
  html.lib-motion .sbk > [id^="sbk-"]:not([hidden]) { animation: libEnter 320ms cubic-bezier(.2, .7, .2, 1) both; }
  html.lib-motion .sbk-dots i { transition: background 320ms ease; }

  /* folds open with the same short rise */
  html.lib-motion .lib-fold[open] > .lib-fold-body,
  html.lib-motion .sbk-later-card[open] > :not(summary) { animation: libEnter 300ms cubic-bezier(.2, .7, .2, 1) both; }
}
/* the Kit banner's single edge light (element added by the script, removed when it ends) */
@property --lib-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lib-beam {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; padding: 1.5px; opacity: 0;
  background: conic-gradient(from var(--lib-beam), transparent 0deg 280deg, rgba(91, 131, 255, .95) 328deg, #5ecc85 354deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes libBeam { 0% { --lib-beam: 0deg; opacity: 0; } 10% { opacity: 1; } 82% { opacity: 1; } 100% { --lib-beam: 360deg; opacity: 0; } }
  html.lib-motion .lib-beam.go { animation: libBeam 3.2s cubic-bezier(.45, .05, .35, 1) 1 both; }
}
@media print { html.lib-motion .lib-rv { opacity: 1 !important; transform: none !important; } }

/* --- Kit note on a tool page (2026-09-13) ---------------------------------
   Every tool page tells the reader to paste a brief into "the AI that runs on
   your computer". A non-technical reader does not have one, and until now no
   tool page said where to get one: 0 of 32 linked to /kit/. This answers the
   objection at the moment it lands, not in a banner at the bottom. Colours use
   --lib-dim / --lib-link, the contrast-safe pair from the a11y pass.
   --------------------------------------------------------------------------- */
.lib-kit-note {
  margin: -4px 0 22px;
  padding: 12px 0 0 16px;
  border-left: 2px solid var(--accent-dim);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lib-dim);
  max-width: 68ch;
}
.lib-kit-note a {
  color: var(--lib-link);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.lib-kit-note a:hover,
.lib-kit-note a:focus-visible { border-bottom-color: var(--lib-link); }
.lib-kit-note .lib-spec { display: block; margin-top: 4px; }

/* --- Kit: above-the-fold buy + the guarantee beside the price (2026-09-13) ---
   The money-back promise was FAQ answer #6. It is the strongest perceived-likelihood
   lever on the page, so it sits next to the price and the button instead.
   --------------------------------------------------------------------------- */
.kit-hero-buy {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.kit-hero-buy span {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--lib-dim);
  max-width: 34ch;
}
.kit-guarantee {
  margin: 12px 0 0;
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--lib-dim);
}
@media (max-width: 900px) {
  .kit-hero-buy { margin-top: 18px; }
  .kit-hero-buy span { max-width: none; }
}