/* quantmechanix.html only: the three sieves (ported from docs/previews/sieve.css). Three strokes, one node, bone is the
   only emphasis. The drawing is the scroll figure (#qm-sieve, scroll-progress.js); the register under it is not part of
   the figure, so a gate's text never changes the figure's height, and so never its scroll progress. Every drawing rule
   is scoped under .sv so none of this leaks into the page's other figures. */
.sv { --dg-ease: cubic-bezier(0.22, 1, 0.36, 1); margin: var(--gap-figure, 40px) 0 0; }
.sv-sub { margin: 12px 0 0; font: 400 15px/1.55 var(--sans); color: var(--text-2); max-width: 60ch; }
.dg-canvas { width: 100%; max-width: 900px; }
.dg-canvas svg { display: block; overflow: visible; max-width: 100%; height: auto; }
/* without JavaScript, one of two finished drawings shows: the desktop build, or the phone build under 688px */
@media (max-width: 687px) { .dg-canvas .sv-static-wide { display: none; } }
@media (min-width: 688px) { .dg-canvas .sv-static-narrow { display: none; } }
.sv figcaption { margin-top: 28px; font: 400 14px/1.5 var(--sans); color: var(--text-3); max-width: 68ch; }
.sv figcaption .once { display: block; margin-top: 6px; }

/* no sentence ends on one word; short notes balance their lines, so a hyphenated word never leaves its tail alone */
.sv-sub, .sv figcaption, .sv-lead, .sv-head, .sv-card-w, .sv-key { text-wrap: pretty; }
.sv-what, .sv-practice, .sv-foot { text-wrap: balance; }

/* the register: one lead sentence, then ruled rows for the chosen gate. Only the chosen gate takes height; the others
   overlap it, taken out of flow, so the block is as tall as what it shows and the chosen one cross-fades in. Cards
   open downward past its bottom edge, so only the sides are clipped. */
.sv-reg { position: relative; overflow: clip visible; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 20px; max-width: 900px; }
.sv-gate { visibility: hidden; opacity: 0; transition: opacity 200ms var(--dg-ease), visibility 0s 200ms; }
.sv-gate:not(.is-on) { position: absolute; top: 20px; left: 0; right: 0; }
.sv-gate.is-on { visibility: visible; opacity: 1; transition: opacity 200ms var(--dg-ease), visibility 0s; }
.sv-gate-name { display: none; }
.sv-lead { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--text); max-width: 68ch; scroll-margin-bottom: 25vh; }
.sv-lead > span { color: var(--text-3); }
.sv-head { margin: 28px 0 0; font: 500 15px/1.4 var(--sans); color: var(--text); }
.sv-head + .sv-rows { margin-top: 10px; }
/* rows: name and what on the left, the standing or the method on the right; a hairline above the group and between rows */
.sv-rows { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sv-row { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4px 48px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--sans); }
.sv-cell { display: flex; flex-direction: column; gap: 4px; }
.sv-name { color: var(--text); font-weight: 500; }
.sv-tech { color: var(--text-2); font-weight: 400; }
.sv-what { color: var(--text-2); }
.sv-practice { color: var(--text-3); }
.sv-status { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
.sv-foot { margin: 16px 0 0; font: 400 14px/1.5 var(--sans); color: var(--text-2); max-width: 68ch; }
.sv-foot + .sv-foot { margin-top: 8px; }
/* status: a 6px dot. A ring is built but not switched on; a dashed ring is planned. Running rows carry no dot. */
.sv-dot { flex: none; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.sv-dot--ring { background: none; box-shadow: inset 0 0 0 1px var(--text-2); }
.sv-dot--dashed { background: none; border: 1px dashed var(--text-2); width: 4px; height: 4px; }
.sv-key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; font: 400 14px/1.5 var(--sans); color: var(--text-3); }
.sv-key span { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 687px) { .sv-row { grid-template-columns: 1fr; gap: 4px; } }

/* a model row: the row is the trigger (a button), its card opens downward on hover, focus or tap */
.sv-mb { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; cursor: default; }
.sv-mb:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; border-radius: 2px; }
.sv-m.is-open .sv-name { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.sv-card { position: absolute; z-index: 5; top: calc(100% - 4px); left: 0; width: min(460px, 100%); padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 200ms var(--dg-ease), visibility 0s 200ms; }
.sv-m.is-open > .sv-card { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 200ms var(--dg-ease), visibility 0s; }
.sv-card p { margin: 0; }
.sv-card-n { font: 500 15px/1.35 var(--sans); color: var(--text); }
.sv-card-w { margin-top: 6px !important; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.sv-card-e { margin-top: 12px !important; color: var(--text); font-size: 17px; }
.sv-card-e svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.sv-card-s { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--sans); color: var(--text-3); }
/* without JavaScript the card opens on :hover and :focus-within, and all five registers show, each under its gate's name */
:root:not(.js) .sv-m:hover > .sv-card, :root:not(.js) .sv-m:focus-within > .sv-card { visibility: visible; opacity: 1; pointer-events: auto; }
:root:not(.js) .sv-gate { position: static; visibility: visible; opacity: 1; padding-bottom: 36px; }
:root:not(.js) .sv-gate-name { display: block; margin: 0 0 8px; font: 500 20px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--text); }
:root:not(.js) .sv-lead > span { display: none; }

/* text: Geist, mono for the four numbers only */
.sv .t { font: 400 14px var(--sans); fill: var(--text-3); transition: fill 320ms var(--dg-ease); }
.sv .t-name { fill: var(--text-2); font-weight: 500; font-size: 15px; }
.sv .t-mono { font-family: var(--mono); font-weight: 500; font-size: 17px; fill: var(--text-2); letter-spacing: -0.02em; }
.sv .sv-narrow .t { font-size: 12px; }
.sv .sv-narrow .t-name { font-size: 13px; }
.sv .sv-narrow .t-mono { font-size: 14px; }
.sv .is-on .t { fill: var(--text-2); }
.sv .is-on .t-name, .sv .is-on .t-mono { fill: var(--text); }

/* leaders: an extension of the opening's edge, then level to the label */
.sv .lead { fill: none; stroke: var(--text-3); stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; transition: stroke 320ms var(--dg-ease), opacity 320ms var(--dg-ease); }
.sv .is-on .lead { stroke: var(--text); opacity: 1; }

/* slabs: three faces, each a shade of the same bone; the cut shows the slab's edge */
.sv .face { stroke: var(--text-2); stroke-width: 1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke 320ms var(--dg-ease), stroke-opacity 320ms var(--dg-ease), stroke-width 320ms var(--dg-ease); }
.sv .face-top-fill { fill: #1e1e1d; stroke: none; }
.sv .face-top-edge { fill: none; }
.sv .face-front { fill: #141414; }
.sv .face-side { fill: #181817; }
.sv .wall-front { fill: #1b1b1a; }
.sv .wall-side { fill: #1f1f1e; }
.sv .rim { fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke 320ms var(--dg-ease), stroke-width 320ms var(--dg-ease); }
.sv .is-on .face { stroke: var(--text-2); stroke-opacity: 0.95; stroke-width: 1.25; }
.sv .is-on .rim { stroke: var(--text); stroke-width: 2; }
.sv .sheet { fill: none; stroke: var(--text); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: opacity 320ms var(--dg-ease); }
.sv .is-on .sheet { opacity: 1; }

/* ideas: hollow and ash when held; filled, and brighter, while they keep falling. Only transform moves with scroll;
   each hop sets its own length (--fall) and a small stagger (--dl), so the stream thins as it falls. */
.sv .idea { fill: var(--bg); stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; transition: transform var(--fall, 560ms) var(--tf, var(--dg-ease)) var(--dl, 0ms), fill 360ms var(--dg-ease), stroke 360ms var(--dg-ease); }
.sv .idea[data-level="1"] { fill: var(--text-3); stroke: var(--text-3); }
.sv .idea[data-level="2"] { fill: var(--text-2); stroke: var(--text-2); }
.sv .idea[data-level="3"] { fill: var(--text); stroke: var(--text); }
.sv[data-gate="0"] .idea { stroke: var(--text-2); }
.sv[data-gate="0"] .idea[data-level="3"] { stroke: var(--text); }
.sv .idea.is-on { stroke: var(--text); }

/* the brief: one node, filled once the last ideas land */
.sv .node { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: fill 320ms var(--dg-ease), stroke 320ms var(--dg-ease); }
.sv.is-done .node { fill: var(--text); stroke: var(--text); }
.sv .ring { fill: none; stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: 0.5; transition: opacity 600ms var(--dg-ease), stroke 320ms var(--dg-ease), stroke-width 320ms var(--dg-ease); }
.sv.is-done .ring { opacity: 1; }
.sv .is-on .ring { stroke: var(--text); stroke-width: 2; }

/* construction lines: one dashed guide per gap, from each opening down to where its ideas land */
.sv .guide { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; vector-effect: non-scaling-stroke; }

.sv .gate { cursor: pointer; outline: none; }
.sv .hit { fill: transparent; stroke: none; }
.sv .proxies rect:focus { outline: none; }
.sv .focus { fill: none; stroke: none; pointer-events: none; }
.sv .gate.has-focus .lab .focus { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sv .no-trans, .sv .no-trans * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sv .idea, .sv .ring, .sv .node, .sv .face, .sv .rim, .sv .sheet, .sv .t, .sv .lead, .sv-gate, .sv-card { transition: none !important; }
}

/* wide screens: each gate's sentence is drawn beside its slab (qm-sieve.js), so the register under the drawing does not say it again */
.sv-reg.sv-led .sv-lead { display: none; }