/* ===========================================================================
   ARKODE - one stylesheet for the website and the brain.

   The look is the Observatory's: a sky of every page behind a glass
   instrument panel, the instrument voice (small mono readouts, tracked
   capitals, pink for the interface, green for structure, yellow for focus),
   the page as a glass card with its corner brackets, a side panel beside it.
   What the page carries is the website's, every comfort the live build has:
   the spec strip, the stat band, the contents list, print, light and high
   contrast, cards and their tag filter, frames and the lightbox, clips with
   posters, PDFs, related reading, tag pages, code in colour.

   One file, so a page reads the same to a visitor, to the owner signed in,
   and in the exported site. Signing in adds tools around the page (part
   three); it never restyles the page.

     1  tokens          colours, faces, sizes; the light and high-contrast readings
     2  base
     3  the shell       the sky, the instrument bar, the frame, the page card,
                        the breadcrumb, the side panel, the foot, the sky as a mode
     4  the page        sections, headings, the reading measure
     5  prose           paragraphs to footnotes, code in colour
     6  media           pictures, frames, the lightbox, clips, PDFs
     7  under the title tagline, dates, page options, standfirst, spec strip,
                        stats, contents, related reading
     8  links as things buttons, chips, the filter, the switch, cards
     9  views           (part two)
    10  signed in       (part three)
    11  print, motion, small screens
   ======================================================================== */

/* 1 ---- tokens ------------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat.woff2?v=2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'); size-adjust: 110.38%; ascent-override: 87.70%; descent-override: 22.74%; line-gap-override: 0%; }
:root {
  color-scheme: dark;
  --bg: #17161a; --bg-deep: #0f0e12; --band: #1f1e24; --bg-alt: #2a2830; --raise: #26242c; --panel: #322f3a; --line: #403c4a;
  --hair: rgba(156, 152, 166, .15); --glass: rgba(20, 19, 23, .8); --glass-hi: rgba(25, 24, 29, .93);
  --inset: rgba(12, 11, 14, .5); --code-bg: rgba(10, 9, 12, .72); --wash: rgba(255, 255, 255, .03);
  --text: #d8d5dd; --head: #ffffff; --muted: #9c98a6; --faint: #86828f;
  --pink: #C23C8F; --pink-text: #EC8FC2; --pink-hover: #F7B4D8; --pink-wash: rgba(194, 60, 143, .14);
  --green: #4FBF87; --green-wash: rgba(79, 191, 135, .08); --yellow: #F1E731; --rose: #a63d5f; --rose-text: #e39ab2;
  --sky: .55;
  --radius: 6px; --radius-s: 3px;
  --font-head: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --measure: 44rem; --gutter: 3rem; --top-h: 56px; --dos-w: 17rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* LIGHT, a reader's choice from the page options (the site's own toggle, kept): the same instrument, printed on paper */
body:has(#theme-light:checked) {
  color-scheme: light;
  --bg: #f3f1f6; --bg-deep: #e7e3ec; --band: #ebe8f0; --bg-alt: #e3dfe9; --raise: #faf9fc; --panel: #ffffff; --line: #cdc6d6;
  --hair: rgba(60, 50, 80, .15); --glass: rgba(248, 247, 251, .82); --glass-hi: rgba(252, 251, 254, .95);
  --inset: rgba(255, 255, 255, .75); --code-bg: rgba(40, 30, 55, .05); --wash: rgba(40, 30, 55, .03);
  --text: #2b2733; --head: #110e17; --muted: #5d5766; --faint: #6b6574; --yellow: #6b6300;
  --pink-text: #a8246f; --pink-hover: #7c1a52; --pink-wash: rgba(194, 60, 143, .1); --green: #1f8455; --green-wash: rgba(31, 132, 85, .08); --rose-text: #9b2f52;
  --sky: .3;
}
/* HIGH CONTRAST: every line of text at full strength, the glass made solid, the sky put away */
body:has(#theme-contrast:checked) {
  --text: #ffffff; --muted: #e6e2ec; --faint: #cfc9d8; --line: #9a94a6; --hair: rgba(255, 255, 255, .4);
  --glass: #000; --glass-hi: #000; --inset: #0a0a0a; --band: #111; --raise: #111; --panel: #1a1a1a; --bg-alt: #111;
  --pink-text: #ffb3de; --rose-text: #ffc2d4; --green: #6fe0a6; --sky: 0;
}
/* high contrast and light together: black on white (the live site's pairing) */
body:has(#theme-contrast:checked):has(#theme-light:checked) {
  --text: #000; --head: #000; --muted: #2e2b33; --faint: #3d3944; --line: #6d6778; --pink-text: #74134a; --green: #0f5a37; --rose-text: #7a1c3a;
  --bg: #fff; --glass: #fff; --glass-hi: #fff; --inset: #fff; --band: #f2f2f2; --raise: #fff; --panel: #fff; --bg-alt: #f2f2f2;
}
/* a reader whose system asks for more contrast gets it everywhere, without touching the toggle (the live site's rule) */
@media (prefers-contrast: more) {
  body.site:not(:has(#theme-light:checked, #theme-contrast:checked, #print:target)) {
    --text: #f4f2f7; --head: #fff; --muted: #d4d0db; --faint: #b9b4c2; --line: #7a7388; --pink-text: #f7bddc;
    --glass: rgba(10, 9, 12, .97); --glass-hi: rgba(10, 9, 12, .98); --band: #1e1d23; --bg-alt: #1e1d23; --panel: #26242c; --sky: .25;
  }
}
/* where glass can't be drawn, or the reader asks for less of it, the panes are solid */
@supports not (backdrop-filter: blur(1px)) { :root { --glass: rgba(20, 19, 23, .97); --glass-hi: rgba(25, 24, 29, .99); } }
@media (prefers-reduced-transparency: reduce) { :root { --glass: rgba(20, 19, 23, .98); --glass-hi: rgb(25, 24, 29); } }

/* 2 ---- base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 16px/1.68 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
::selection { background: rgba(194, 60, 143, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: var(--pink-text); text-decoration: none; }
a:hover { color: var(--pink-hover); }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sig { display: inline-block; vertical-align: -2px; flex: none; }
.sig path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sig circle { fill: currentColor; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--pink); color: #fff; font: 600 12px var(--font-head); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-s); }
.skip-link:focus { top: 10px; color: #fff; }
/* what only works with the page's script is shown only once the script is there */
html:not(.js) .js-only { display: none !important; }

/* 3 ---- the shell ---------------------------------------------------------------- */
body.site {
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--bg) 88%, #3a3048) 0%, var(--bg) 60%) fixed, var(--bg);
}
body.site::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(156, 152, 166, .1) 1px, transparent 1.3px) 0 0 / 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
/* the sky: every page a star, drawn by the page's script, behind everything */
.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: var(--sky); transition: opacity .6s var(--ease); }
html:not(.js) .sky { display: none; }
body:has(#theme-light:checked) :is(.sky, #local) { filter: invert(1) hue-rotate(180deg); }

/* the instrument bar */
.site-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: var(--top-h); padding: 0 16px 0 12px; background: var(--glass-hi); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.site-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink) 45%, var(--pink-hover) 50%, var(--pink) 55%, transparent) no-repeat; background-size: 40% 100%; animation: scan 12s linear infinite; opacity: .45; }
@keyframes scan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* reading progress: the bar's own hairline fills as the page is read (a scroll timeline, no script) */
@supports (animation-timeline: scroll()) {
  .site-top::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--green); transform-origin: 0 50%; animation: grow-x linear both; animation-timeline: scroll(root); z-index: 1; }
  @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.brand { flex: none; display: flex; align-items: center; gap: 10px; color: var(--pink-text); white-space: nowrap; }
.brand img { width: 28px; height: 28px; object-fit: contain; }
.brand b { font: 700 13px var(--font-head); letter-spacing: .24em; text-transform: uppercase; color: var(--head); }
/* the files switch: a checkbox (no script needed). Wide, the files show and it hides them; narrow, the other way round */
.files-switch { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.files-toggle { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--muted); font-size: 15px; cursor: pointer; user-select: none; }
.files-toggle:hover { color: var(--pink-text); border-color: var(--pink); }
.files-switch:focus-visible ~ .site-top .files-toggle { outline: 2px solid var(--yellow); outline-offset: 3px; }
.files-switch:checked ~ .site-top .files-toggle { color: var(--pink-text); }
.site-nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav a { position: relative; padding: 9px 12px; border-radius: var(--radius-s); font: 600 10.5px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.site-nav a:hover { color: var(--head); }
.site-nav a.here { color: var(--head); }
.site-nav a.here::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px 0 10px; min-width: 210px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--muted); }
.search:hover { border-color: var(--pink); }
.search .glyph { color: var(--pink-text); font-size: 15px; }
.search .ph { flex: 1; text-align: left; font-size: 13px; }
kbd { font: 10px/1 var(--font-mono); padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex: none; }
.seg button { position: relative; padding: 9px 12px; font: 600 10px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text); }
.seg button.on { color: var(--head); background: var(--pink-wash); }
.seg button.on::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.account-in { flex: none; padding: 8px 12px; border: 1px solid var(--pink); border-radius: var(--radius); font: 600 10px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pink-text); }
.account-in:hover { background: var(--pink-wash); }
.account-out { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: 600 10px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.account-out:hover { color: var(--text); border-color: var(--muted); }
.account-out .out-glyph { display: none; font-size: 15px; letter-spacing: 0; }
@media (max-width: 1200px) { .account-out { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; } .account-out .out-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .account-out .out-glyph { display: inline; } }
.account-set { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 17px; line-height: 1; }
.account-set:hover, body.on-settings .account-set { color: var(--text); border-color: var(--muted); }
.lens button[data-lens=public].on { background: var(--green-wash); }
/* Live, beside the lens: only while seeing as Public */
.live-switch { display: none; flex: none; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); font: 600 10px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.lens-public .live-switch { display: inline-flex; align-items: center; gap: 6px; }
.live-switch::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.live-switch.on { color: var(--head); border-color: var(--green); background: var(--green-wash); }
.live-switch.on::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.live-banner { margin: 0 auto 12px; width: min(var(--measure), 100% - var(--gutter)); padding: 6px 12px; border-left: 2px solid var(--green); background: var(--green-wash); font: 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lens button[data-lens=public].on::after { background: var(--green); box-shadow: 0 0 8px var(--green); }
body.seen-public .site-top::after { background-image: linear-gradient(90deg, transparent, var(--green) 45%, #b8f0d4 50%, var(--green) 55%, transparent); }

/* the frame: the page, and the side panel beside it */
.shell { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: 22px; padding: 18px max(16px, 2vw) 0 max(16px, 2vw); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.stage { flex: 0 1 60rem; min-width: 0; }
#main:focus { outline: none; }
body.wide .stage { flex-basis: 86rem; }
#page { position: relative; margin: 0; padding: 30px 0 52px; min-height: 60vh; background: var(--glass-hi); border: 1px solid var(--hair); border-radius: 2px; }
#page::before, #page::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--muted); opacity: .6; pointer-events: none; }
#page::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
#page::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
body.seen-public #page { border-color: rgba(79, 191, 135, .25); }

/* the file browser: the vault's own tree, down the left, the same for everyone (a visitor's is what's public).
   Closed until the switch opens it; the owner's pages open it to begin with. */
:root { --side-w: 17rem; }
.side { position: fixed; left: 0; top: var(--top-h); bottom: 0; z-index: 35; width: var(--side-w); display: flex; flex-direction: column; background: var(--glass); backdrop-filter: blur(16px); border-right: 1px solid var(--hair); transition: transform .45s var(--ease), opacity .35s var(--ease), visibility .45s; }
.files-switch:not(:checked) ~ .side { transform: translateX(-104%); opacity: 0; visibility: hidden; }
.shell { transition: padding .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); }
@media (min-width: 900px) { .files-switch:checked ~ .shell { padding-left: calc(var(--side-w) + 2vw); } }
@media (max-width: 899px) {
  .side { width: min(var(--side-w), 86vw); }
  .files-switch:checked ~ .side { box-shadow: 0 0 0 100vmax rgba(8, 7, 10, .55); }
}
.files { flex: 1; overflow-y: auto; padding: 10px 6px 24px; font-size: 13.5px; scrollbar-width: thin; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree li { margin: 0; }
.tree a { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px 0 calc(26px + var(--d, 0) * 14px); border-radius: 4px; white-space: nowrap; position: relative; color: var(--text); text-decoration: none; }
.tree summary { display: flex; align-items: center; padding-left: calc(8px + var(--d, 0) * 14px); border-radius: 4px; list-style: none; cursor: pointer; position: relative; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary a { flex: 1; min-width: 0; padding: 0 8px 0 0; color: var(--muted); }
.tree .chev { width: 18px; height: 26px; flex: none; display: grid; place-items: center; color: var(--faint); }
.tree .chev::before { content: '▶'; font-size: 7.5px; transition: transform .2s var(--ease); }
.tree details[open] > summary .chev::before { transform: rotate(90deg); }
.tree a:hover, .tree summary:hover { background: var(--wash); }
.tree a:hover, .tree summary:hover a { color: var(--head); }
.tree .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree .nm mark { background: none; color: var(--pink-text); }
.tree .ct { font: 10px var(--font-mono); color: var(--faint); }
.tree .sig { color: var(--faint); flex: none; }
.tree details[open] > summary .sig, .tree summary:hover .sig { color: var(--green); }
.tree .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--c); flex: none; opacity: .85; }
.tree .fk { flex: none; font: 10px/1 var(--font-mono); font-style: normal; width: 14px; text-align: center; color: var(--green); }
.tree .dashboard .fk, .tree .fk.feats { color: var(--pink-text); } .tree .script .fk { color: var(--yellow); }
.tree .pub { font: 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(79, 191, 135, .35); border-radius: 2px; padding: 0 4px; }
.tree .t-file a { color: var(--faint); font-size: 12.5px; }
.tree .state { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); flex: none; }
.tree .state.kept { background: var(--green); border-color: var(--green); box-shadow: 0 0 6px var(--green); }
/* the page you're on */
.tree .cur > a, .tree .t-dir.cur > details > summary { background: var(--pink-wash); }
.tree .cur > a, .tree .t-dir.cur > details > summary a { color: var(--head); }
.tree .cur > a::before, .tree .t-dir.cur > details > summary::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.tree.found .ct { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.side-empty { padding: 12px 14px; font: 11px/1.6 var(--font-mono); color: var(--faint); }

/* the breadcrumb, above the page */
.crumbs { margin: 0 2px 10px; font: 11.5px/1 var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.crumbs-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.crumbs a { color: var(--muted); padding: 5px 3px; border-radius: 3px; }
.crumbs a:hover { color: var(--pink-text); }
.crumb-sep { color: var(--faint); }
.crumb-here { color: var(--text); }

/* the side panel: the outline, the page among its neighbours, its links */
.dossier { flex: 0 0 var(--dos-w); position: sticky; top: calc(var(--top-h) + 18px); max-height: calc(100vh - var(--top-h) - 36px); overflow-y: auto; overflow-x: hidden; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--hair); border-radius: 2px; scrollbar-width: thin; }
.dossier:empty { display: none; }
.dossier section { padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.dossier section:last-child { border-bottom: 0; }
.dossier h6 { display: flex; justify-content: space-between; margin: 0; padding: 12px 16px 8px; font: 600 9.5px/1 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.dossier h6 em { font: 10px var(--font-mono); font-style: normal; color: var(--faint); }
.page-toc { scroll-target-group: auto; }
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc > ul { padding: 0 8px; }
.page-toc > ul > li > a { display: none; }        /* the page's own title */
.page-toc a { display: block; padding: 4px 8px 4px 12px; border-left: 1px solid var(--hair); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.page-toc ul ul ul a { padding-left: 24px; font-size: 11.5px; }
.page-toc a:hover { color: var(--head); border-left-color: var(--pink); }
.page-toc a:target-current { color: var(--head); border-left-color: var(--green); background: var(--green-wash); }
#local { display: block; width: calc(100% - 24px); height: 196px; margin: 0 12px; border: 1px solid var(--hair); background: var(--inset); }
.dl { list-style: none; margin: 0; padding: 0 8px; }
.dl li a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; font-size: 13px; color: var(--text); min-width: 0; }
.dl li a:hover { background: var(--wash); color: var(--head); }
.dl li .sig { color: var(--c, var(--muted)); }
.dl li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the foot */
.site-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 26px 8px 34px; font: 10.5px/1.8 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.site-foot p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; width: 100%; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--pink-text); }
.site-foot .account { color: var(--faint); }

/* the sky as a mode: the page steps back and the stars come forward */
body.chart .sky { --sky: 1; pointer-events: auto; cursor: grab; touch-action: none; }
body.chart .sky.over { cursor: pointer; } body.chart .sky.dragging { cursor: grabbing; }
body.chart .shell, body.chart .side, body.chart .files-switch ~ .side { opacity: 0; transform: scale(.985); pointer-events: none; }
body.chart { overflow: hidden; }

/* 4 ---- the page: sections, headings, the reading measure ------------------------- */
.content { counter-reset: sec; }
.content :is(.page-head, .page-body) { display: contents; }
.content > *:not(section):not(.lightbox), .content :is(section, .page-head, .page-body) > *:not(section, .page-head, .page-body, .cm-editor) { width: min(var(--measure), 100% - var(--gutter)); margin-inline: auto; }
body.wide .content { --measure: 76rem; }
.content > :is(.cards, .filtered, .frames, .table-scroll, .pdf-embed, .sw, figure.view, .view-grid, .shelf, .related), .content :is(section, .page-body) > :is(.cards, .filtered, .frames, .table-scroll, .pdf-embed, .sw, figure.view, .view-grid, .shelf) { width: min(max(var(--measure), 52rem), 100% - var(--gutter)); }
.content section.level2 { counter-increment: sec; counter-reset: sub; padding-block: .2rem; scroll-margin-top: calc(var(--top-h) + 20px); }
.content section.level3 { counter-increment: sub; }
.content h1 { font: 700 clamp(24px, 3vw, 34px)/1.12 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--head); margin: .2em auto .35em; text-wrap: balance; }
.content h2, .content h3, .content h4 { font-family: var(--font-head); color: var(--head); letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; }
.content h2 { font-size: 17px; margin-top: 2.6em; margin-bottom: .8em; display: flex; align-items: baseline; gap: 12px; }
.content h2::before { content: counter(sec, decimal-leading-zero); font: 11px var(--font-mono); color: var(--green); letter-spacing: .1em; flex: none; }
.content h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair), transparent); align-self: center; }
.content h3 { font-size: 13.5px; margin-top: 2em; margin-bottom: .5em; color: var(--text); }
.content section.level2 h3::before { content: counter(sec, decimal-leading-zero) '.' counter(sub); font: 10px var(--font-mono); color: var(--green); margin-right: .7em; opacity: .8; }
.content h4 { font-size: 12px; color: var(--muted); margin-top: 1.6em; margin-bottom: .4em; }
.content h5, .content h6 { font: 600 11px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
a.hlink { color: inherit; }
a.hlink::after { content: '#' / ''; margin-left: .45em; color: var(--pink); opacity: 0; transition: opacity .2s; font-family: var(--font-mono); }
a.hlink:hover::after, a.hlink:focus::after { opacity: .9; }
/* headings and cards rise as they arrive (a scroll timeline, no script); paragraphs are for reading, so they don't */
@keyframes rise-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .content section > :is(h2, h3), .content .card { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 180px; }
  }
}

/* 5 ---- prose ------------------------------------------------------------------------ */
.content p { margin-block: 0 1em; }
.content strong { color: var(--head); font-weight: 650; }
.content em { color: color-mix(in srgb, var(--text) 70%, var(--head)); }
.content mark { background: rgba(241, 231, 49, .18); color: var(--head); padding: 0 .15em; border-radius: 2px; }
.content del { color: var(--faint); }
.content p a, .content li a, .content td a, .content dd a:not(.tag):not(.tag-ext) { border-bottom: 1px solid rgba(236, 143, 194, .32); transition: border-color .2s, color .2s; }
.content p a:hover, .content li a:hover { border-bottom-color: var(--pink-hover); }
.content a.wl { border-bottom-style: dotted; }
.content a[href^="http"]:not(.card):not(.img-full):not(.tag):not(.tag-ext):not(.button-row a)::after { content: '\2197'; font-size: .72em; margin-left: 2px; vertical-align: .35em; opacity: .7; }
.content .private-link { color: inherit; }
.content ul, .content ol { padding-left: 1.4em; margin-block: 0 1em; }
.content li { margin: .22em 0; }
.content li::marker { color: var(--green); }
.content ol li::marker { font: .85em var(--font-mono); }
.content ul.task-list { list-style: none; padding-left: .2em; }
.content ul.task-list label { display: flex; gap: .6em; align-items: baseline; cursor: default; }
.content ul.task-list input { appearance: none; flex: none; width: 13px; height: 13px; margin: 0; border: 1px solid var(--muted); border-radius: 2px; transform: translateY(2px); }
.content ul.task-list input:checked { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 2px var(--bg); }
.content ul.task-list input:checked + span { color: var(--muted); }
.content ul.task-list input:not([disabled]) { cursor: pointer; }
.content blockquote { margin-block: 1.3em; padding: .7em 1.1em; border-left: 2px solid var(--green); background: var(--green-wash); color: color-mix(in srgb, var(--text) 90%, var(--muted)); }
.content blockquote > :last-child { margin-bottom: 0; }
.content blockquote.callout[data-kind=warning], .content blockquote.callout[data-kind=danger], .content blockquote.callout[data-kind=bug] { border-left-color: var(--rose); background: rgba(166, 61, 95, .09); }
.content details { margin-block: 1.3em; border: 1px solid var(--hair); border-left: 2px solid var(--green); background: var(--wash); padding: 0 1.1em; }
.content details > summary { list-style: none; cursor: pointer; padding: .75em 0; display: flex; gap: 12px; font: 600 11px/1.3 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.content details > summary::-webkit-details-marker { display: none; }
.content details > summary::after { content: '+'; margin-left: auto; font: 15px var(--font-mono); color: var(--muted); transition: rotate .25s var(--ease); }
.content details[open] > summary::after { rotate: 45deg; }
.content .pull blockquote { border: 0; background: none; font: 500 clamp(18px, 2vw, 22px)/1.45 var(--font-head); color: var(--head); padding: 0; text-align: center; }
.content .pull cite { display: block; margin-top: .6em; font: 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); font-style: normal; }
/* the opening line of a long read, set in small capitals (the site's own) */
.content p.opening::first-line { font-variant: small-caps; letter-spacing: .05em; color: var(--head); }
.content code { font: .86em var(--font-mono); padding: .12em .4em; border-radius: var(--radius-s); background: color-mix(in srgb, var(--panel) 70%, transparent); color: color-mix(in srgb, var(--head) 88%, var(--pink-text)); }
.content pre { font: 12.5px/1.6 var(--font-mono); padding: 14px 16px; margin-block: 1.3em; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--hair); border-left: 2px solid var(--pink); border-radius: 2px; }
.content pre code { background: none; padding: 0; font-size: inherit; color: var(--text); }
.content div.sourceCode { margin-block: 1.3em; }
.content div.sourceCode pre { margin: 0; }
.content pre.numberSource code { counter-reset: ln; }
.content pre.sourceCode code > span { display: block; }
.content pre.numberSource code > span { counter-increment: ln; }
.content pre.numberSource code > span > a:first-child::before { content: counter(ln); display: inline-block; width: 2.6em; margin-right: 1em; text-align: right; color: var(--faint); user-select: none; }
/* code in colour: Pandoc's class names, the instrument's palette */
.sourceCode .kw, .sourceCode .cf, .sourceCode .im { color: var(--pink-text); }
.sourceCode .cf { font-weight: 600; }
.sourceCode .dt, .sourceCode .va { color: #5ccfc4; }
.sourceCode .st, .sourceCode .ch { color: #e6d98a; }
.sourceCode .dv, .sourceCode .fl { color: #f0b36b; }
.sourceCode .co { color: var(--faint); font-style: italic; }
.sourceCode .op, .sourceCode .pp { color: var(--muted); }
.sourceCode .bu { color: #9fb4ff; }
body:has(#theme-light:checked) .sourceCode :is(.dt, .va) { color: #117a70; }
body:has(#theme-light:checked) .sourceCode :is(.st, .ch) { color: #7a6400; }
body:has(#theme-light:checked) .sourceCode :is(.dv, .fl) { color: #a3530f; }
.content .table-scroll { overflow-x: auto; margin-block: 1.3em; }
.content table { border-collapse: collapse; width: 100%; font-size: 14px; }
.content th { font: 600 10px/1.3 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--green); white-space: nowrap; }
.content td { padding: 7px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.content td > :last-child { margin-bottom: 0; }
.content tbody tr:hover td { background: var(--wash); }
.content table.metrics td { font: 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--head); }
.content .center { text-align: center; } .content .right, .content td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--green); } .neg { color: var(--rose-text); }
.content hr { border: 0; height: 1px; margin-block: 2.4em; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.content .footnotes { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--muted); }
.content .footnote-ref { border: 0; font: .78em var(--font-mono); }
.content .transclude { display: contents; }
.embed-miss { font: 11px var(--font-mono); color: var(--faint); border: 1px dashed var(--line); padding: 2px 6px; }

/* 6 ---- media ---------------------------------------------------------------------------- */
.content figure { margin-block: 1.5em; position: relative; }
.content figure img, .content > p > a.img-full img, .content section > p > a.img-full img { display: block; margin-inline: auto; border-radius: 2px; }
.content > p > a.img-full:only-child img, .content section > p > a.img-full:only-child img { max-width: min(560px, 100%); }
.content figcaption { font: 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .6em; text-align: center; }
.content p.with-text::after { content: ''; display: table; clear: both; }
.content p.with-text > a.img-full { display: block; margin-bottom: 1em; }
@media (min-width: 46em) { .content p.with-text > a.img-full { float: right; width: min(42%, 17rem); margin: .3em 0 1em 1.6em; } }
.content p.frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.content .frame { position: relative; display: block; background: #000; border-radius: 2px; overflow: hidden; }
.content .frame:last-child:nth-child(odd) { grid-column: 1 / -1; }
.content .frame img { display: block; width: 100%; height: 100%; object-fit: contain; aspect-ratio: 16 / 10; }
.content .frame:last-child:nth-child(odd) img { aspect-ratio: 21 / 9; }
.content .frame[data-label]::after { content: attr(data-label); position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(15, 14, 18, .8); border-radius: 2px; }
.content p.frames:hover .frame:not(:hover) img { filter: brightness(.6); }
.content .frame img, .content a.img-full img { transition: filter .3s, transform .3s var(--ease); }
/* a long run of pictures shows four on a phone, and "Show all" opens the rest (the site's own) */
.more-pics { position: absolute; opacity: 0; pointer-events: none; }
.more-pics-label { display: none; }
@media (max-width: 640px) {
  .content p.frames:has(+ .more-pics:not(:checked)) .frame:nth-child(n+5) { display: none; }
  .more-pics-label { display: block; width: fit-content !important; margin: 10px auto 1.6em !important; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-text); cursor: pointer; }
  .more-pics:checked + .more-pics-label { display: none; }
}
a.img-full { display: block; border: 0 !important; cursor: zoom-in; }
.lightbox { display: none; }
.lightbox:target { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 3vh 3vw 2vh; background: rgba(8, 7, 10, .94); }
.lightbox:target img { max-width: 94vw; max-height: 84vh; object-fit: contain; position: relative; z-index: 1; }
.lb-backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lb-bar { position: relative; z-index: 1; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font: 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #9c98a6; }
.lb-bar a { color: #EC8FC2; }
html:has(.lightbox:target) { overflow: hidden; }
.content figure.clip video, .content iframe.yt, .content figure.clip > img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; border-radius: 2px; object-fit: contain; }
.content .clip-label { position: absolute; left: 10px; top: 10px; margin: 0; padding: 3px 8px; background: rgba(15, 14, 18, .8); color: #fff; border-radius: 2px; pointer-events: none; }
.content figure.clip.audio { padding: 36px 12px 12px; border: 1px solid var(--hair); background: var(--inset); }
.content figure.clip.audio audio { width: 100%; }
.content .pdf-embed iframe { width: 100%; height: 76vh; border: 1px solid var(--line); background: #fff; }
.content .pdf-embed .pdf-narrow { display: none; }
@media (max-width: 56rem) { .content .pdf-embed .pdf-wide { display: none; } .content .pdf-embed .pdf-narrow { display: block; } }
.content .pdf-open { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; margin-top: .5em; }
.drawing-static { margin-block: 1.4em; border: 1px solid var(--hair); background: radial-gradient(circle, rgba(156, 152, 166, .12) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--code-bg); padding: 8px; cursor: pointer; }
.drawing-static svg { display: block; width: 100%; height: auto; max-height: 72vh; }

/* 7 ---- under the title ------------------------------------------------------------ */
.content .tagline { font: 500 clamp(17px, 2vw, 21px)/1.4 var(--font-head); color: var(--pink-text); margin-top: -.1em; }
.content .page-meta { font: 11.5px var(--font-mono); letter-spacing: .04em; color: var(--muted); margin-bottom: .7em; }
/* the page options: print, light, high contrast (and, signed in, the owner's own), as the instrument's small switches */
.content .page-options { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.4em; }
.page-options .pick { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.page-options a, .page-options label { font: 600 9.5px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--line) !important; }
.page-options a:hover, .page-options label:hover { color: var(--head); border-color: var(--pink) !important; }
.page-options .pick:checked + label { color: var(--head); background: var(--pink-wash); border-color: var(--pink) !important; }
.page-options .pick:focus-visible + label { outline: 1px solid var(--yellow); outline-offset: 2px; }
.content .standfirst { font-size: 18.5px; line-height: 1.55; color: color-mix(in srgb, var(--text) 85%, var(--head)); padding-bottom: 1.2em; border-bottom: 1px solid var(--hair); }
.content .page-spec { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-block: 1.6em; }
.page-spec > div { background: var(--band); padding: 10px 12px 11px; min-width: 0; }
.page-spec dt { font: 9.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.page-spec dd { margin: 0; font-size: 14px; color: var(--head); display: flex; flex-wrap: wrap; gap: 5px; }
.page-spec :is(.spec-software, .spec-tags, .spec-link, .spec-features) { grid-column: 1 / -1; }
.page-spec .spec-features dd span { font-size: 13.5px; color: var(--text); padding-right: .8em; border-right: 1px solid var(--hair); }
.page-spec .spec-features dd span:last-child { border: 0; }
.content .stat-band { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; padding: 0; background: var(--hair); border: 1px solid var(--hair); }
.stat-band li { margin: 0; padding: 14px 16px; background: var(--band); display: flex; flex-direction: column; gap: 4px; }
.stat-band b { font: 700 28px/1 var(--font-head); color: var(--head); }
.stat-band span { font: 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* the contents: in the side panel where there is one; folded under the title where there isn't */
.content details.toc-mobile { display: none; }
.toc-mobile ul { list-style: none; padding: 0 0 .6em; margin: 0; }
.toc-mobile > ul > li > a { display: none; }
.toc-mobile ul ul ul { padding-left: 1em; }
.toc-mobile a { font-size: 14px; color: var(--muted); border: 0 !important; }
.toc-mobile a:hover { color: var(--head); }
.print-bar { display: none; }
.content .to-top { font: 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; margin-top: 2.4em; }
.related-label, .shelf-label { font: 600 10px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin: 0 0 .6em; }
.content .related { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--hair); }
.content .related .cards { margin-block: .4em 0; }

/* 8 ---- links as things -------------------------------------------------------------------- */
.content p.button-row, p.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
p.button-row a, p.button-row button, .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--pink); border-radius: var(--radius); font: 600 10.5px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--head) !important; background: var(--pink-wash); transition: background .2s, transform .2s var(--ease); cursor: pointer; }
p.button-row a:hover, p.button-row button:hover:not(:disabled), .btn:hover { background: rgba(194, 60, 143, .3); transform: translateY(-1px); }
p.button-row button:disabled { opacity: .5; cursor: default; }
.content a.rss::before { content: ''; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--rss) center / contain no-repeat; mask: var(--rss) center / contain no-repeat; }
:root { --rss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.18' cy='17.82' r='2.18'/%3E%3Cpath d='M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z'/%3E%3C/svg%3E"); }
/* THE chip (the site's 25/09 rule, the instrument's voice): [icon] Name [count]. A tool carries its own mark;
   a chip that goes somewhere opens its tag's page; a tool's website is a small arrow joined to its right edge */
.tag { display: inline-flex; align-items: center; gap: .5em; min-height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--inset); color: var(--text); font: 11px/1.2 var(--font-mono); letter-spacing: .03em; white-space: nowrap; vertical-align: middle; transition: color .2s, border-color .2s, background .2s; }
.tag .ico { display: inline-grid; place-items: center; flex: none; width: 1.15em; height: 1.15em; background: var(--pink-text); font-style: normal; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.tag.mono .ico { background: none; -webkit-mask: none; mask: none; width: auto; min-width: 1.15em; font: 700 .9em/1 var(--font-mono); color: var(--pink-text); }
.tag-n { align-self: stretch; display: grid; place-items: center; margin: 0 -9px 0 .2em; padding: 0 7px; border-left: 1px solid var(--line); background: var(--wash); color: var(--faint); font-variant-numeric: tabular-nums; }
a.tag:hover, a.tag:focus-visible, label.tag:hover { color: var(--head); border-color: var(--pink); background: var(--pink-wash); }
.tag-pair { display: inline-flex; vertical-align: middle; }
.tag-pair > .tag { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tag-ext { display: grid; place-items: center; min-width: 26px; padding: 0 6px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--inset); color: var(--muted); font: 11px var(--font-mono); }
.tag-ext:hover { color: var(--pink-text); background: var(--pink-wash); }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { display: inline-block; font: 11px/1 var(--font-mono); padding: 4px 7px; margin: 0 4px 3px 0; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--muted); }
.chip.alert, .chip.stale { color: var(--rose-text); border-color: var(--rose); }
.chip.ok, .chip.about { color: var(--green); border-color: rgba(79, 191, 135, .4); }
.chip.sens { color: var(--pink-text); border-color: var(--pink); }
.chip.p-high { color: var(--rose-text); border-color: var(--rose); } .chip.p-medium { color: var(--pink-text); border-color: rgba(194, 60, 143, .5); }
.chip.r-4, .chip.r-5 { color: var(--green); border-color: rgba(79, 191, 135, .45); } .chip.r-3 { color: var(--pink-text); } .chip.r-x { opacity: .6; }
/* the switch: radios, labels as buttons, the nth pane shown by position (no script) */
.pick { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.switch label { cursor: pointer; font: 600 10px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); transition: color .2s, border-color .2s; }
.switch label:hover { color: var(--head); }
.switch .pick:checked + label { color: var(--head); border-color: var(--green); background: var(--green-wash); }
.switch .pick:focus-visible + label { outline: 1px solid var(--yellow); outline-offset: 2px; }
.sw:has(> .switch > .pick:nth-of-type(1):checked) > .panes > :not(:nth-child(1)),
.sw:has(> .switch > .pick:nth-of-type(2):checked) > .panes > :not(:nth-child(2)),
.sw:has(> .switch > .pick:nth-of-type(3):checked) > .panes > :not(:nth-child(3)),
.sw:has(> .switch > .pick:nth-of-type(4):checked) > .panes > :not(:nth-child(4)),
.sw:has(> .switch > .pick:nth-of-type(5):checked) > .panes > :not(:nth-child(5)),
.sw:has(> .switch > .pick:nth-of-type(6):checked) > .panes > :not(:nth-child(6)),
.sw:has(> .switch > .pick:nth-of-type(7):checked) > .panes > :not(:nth-child(7)),
.sw:has(> .switch > .pick:nth-of-type(8):checked) > .panes > :not(:nth-child(8)),
.sw:has(> .switch > .pick:nth-of-type(9):checked) > .panes > :not(:nth-child(9)),
.sw:has(> .switch > .pick:nth-of-type(10):checked) > .panes > :not(:nth-child(10)) { display: none; }
.sw:has(> .switch > .pick.all:checked) > .panes > * { display: block !important; }
/* the filter bar: ticked tags keep the items that carry any of them (no script) */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.filters-label { font: 600 9.5px var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 4px 0 6px; }
.filters-label:first-child { margin-left: 0; }
.filters label.tag { cursor: pointer; user-select: none; }
.filters .pick:checked + .tag { color: var(--head); border-color: var(--green); background: var(--green-wash); }
.filters .pick:checked + .tag::before { content: '\2713' / ''; color: var(--green); }
.filters .pick:focus-visible + .tag { outline: 1px solid var(--yellow); outline-offset: 2px; }
.filters-reset, .filters-more { font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pink-text); padding: 5px 8px; }
.filters:not(:has(.pick:checked)) .filters-reset { display: none; }
.filters-more { margin-left: auto; }
.filtered:has(> .filters > .pick:checked) .fi:not(:is(
  .filtered:has(> .filters > .pick:nth-of-type(1):checked) .f1, .filtered:has(> .filters > .pick:nth-of-type(2):checked) .f2,
  .filtered:has(> .filters > .pick:nth-of-type(3):checked) .f3, .filtered:has(> .filters > .pick:nth-of-type(4):checked) .f4,
  .filtered:has(> .filters > .pick:nth-of-type(5):checked) .f5, .filtered:has(> .filters > .pick:nth-of-type(6):checked) .f6,
  .filtered:has(> .filters > .pick:nth-of-type(7):checked) .f7, .filtered:has(> .filters > .pick:nth-of-type(8):checked) .f8,
  .filtered:has(> .filters > .pick:nth-of-type(9):checked) .f9, .filtered:has(> .filters > .pick:nth-of-type(10):checked) .f10,
  .filtered:has(> .filters > .pick:nth-of-type(11):checked) .f11, .filtered:has(> .filters > .pick:nth-of-type(12):checked) .f12,
  .filtered:has(> .filters > .pick:nth-of-type(13):checked) .f13, .filtered:has(> .filters > .pick:nth-of-type(14):checked) .f14,
  .filtered:has(> .filters > .pick:nth-of-type(15):checked) .f15, .filtered:has(> .filters > .pick:nth-of-type(16):checked) .f16,
  .filtered:has(> .filters > .pick:nth-of-type(17):checked) .f17, .filtered:has(> .filters > .pick:nth-of-type(18):checked) .f18,
  .filtered:has(> .filters > .pick:nth-of-type(19):checked) .f19, .filtered:has(> .filters > .pick:nth-of-type(20):checked) .f20,
  .filtered:has(> .filters > .pick:nth-of-type(21):checked) .f21, .filtered:has(> .filters > .pick:nth-of-type(22):checked) .f22,
  .filtered:has(> .filters > .pick:nth-of-type(23):checked) .f23, .filtered:has(> .filters > .pick:nth-of-type(24):checked) .f24)) { display: none; }
/* cards: the website's, in the instrument voice */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-block: 1.4em; }
.card { position: relative; display: flex; flex-direction: column; background: var(--raise); border: 1px solid var(--hair); border-radius: var(--radius-s); overflow: hidden; color: var(--text); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); color: var(--text); }
.card-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--bg-deep); overflow: hidden; color: var(--pink-text); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, scale .6s var(--ease); }
.card:hover .card-img img { scale: 1.03; }
.card-img .card-img2 { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-img2 { opacity: 1; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.card-title { font: 700 13px/1.3 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--head); }
.card-role, .card-made, .card-date { font: 10.5px var(--font-mono); letter-spacing: .06em; color: var(--green); }
.card-made, .card-date { color: var(--muted); }
.card-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.card-tags .tag { min-height: 20px; padding: 0 6px; font-size: 10px; color: var(--muted); gap: .4em; }
.card[data-stage]::before { content: attr(data-stage); position: absolute; top: 8px; right: 8px; z-index: 1; padding: 3px 7px; font: 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: rgba(15, 14, 18, .85); border: 1px solid rgba(79, 191, 135, .4); border-radius: 2px; }
.card:is([data-stage=archived], [data-stage=concept])::before { color: var(--muted); border-color: var(--line); }
.card:is([data-stage=wip], [data-stage=active])::before { color: var(--pink-text); border-color: var(--pink); }
.cards.rows { grid-template-columns: 1fr; }
.cards.rows .card { flex-direction: row; }
.cards.rows .card-img { width: 30%; max-width: 260px; aspect-ratio: 16 / 10; flex: none; }
.shelf { margin-block: 2em; }


/* ===========================================================================
   9 ---- VIEWS. The information colours (homes, systems, sleep, mood), then
   every view kind. A view writes classes and custom properties (--c a colour,
   --w a length, --a a strength), never a colour.
   ======================================================================== */
:root {
  --g1: #2e5c47; --g2: #3c8a65; --g3: #4FBF87; --no: #5c4750;
  --e1: #8d83d6; --e2: #5ccfc4; --e3: #f0b36b; --e4: #78a7f5; --e5: #c79bf2; --e6: #c4dc6a; --e7: #e0697f; --e8: #6fb3a0;
  --e9: #d9a86c; --e10: #9fb4ff; --e11: #b98fd8; --e12: #9bc47a; --e13: #d88a9f; --e14: #7fc3e0;
  --sleep-deep: var(--green); --sleep-light: #575368; --sleep-rem: var(--pink-text); --sleep-awake: var(--rose);
  --mood-1: var(--rose); --mood-2: #7d4560; --mood-3: #565064; --mood-4: var(--g2); --mood-5: var(--green);
  --tint-m: #3b5a72; --tint-f: #6b3d5f;
}
[class*="c-"] { --c: var(--muted); }
.c-pink { --c: var(--pink); } .c-pink-text { --c: var(--pink-text); } .c-pink-hover { --c: var(--pink-hover); }
.c-green { --c: var(--green); } .c-rose { --c: var(--rose); } .c-head { --c: var(--head); } .c-muted { --c: var(--muted); }
.c-line { --c: var(--line); } .c-panel { --c: var(--panel); } .c-no { --c: var(--no); }
.c-g1 { --c: var(--g1); } .c-g2 { --c: var(--g2); } .c-g3 { --c: var(--g3); }
.c-e1 { --c: var(--e1); } .c-e2 { --c: var(--e2); } .c-e3 { --c: var(--e3); } .c-e4 { --c: var(--e4); } .c-e5 { --c: var(--e5); } .c-e6 { --c: var(--e6); } .c-e7 { --c: var(--e7); }
.c-e8 { --c: var(--e8); } .c-e9 { --c: var(--e9); } .c-e10 { --c: var(--e10); } .c-e11 { --c: var(--e11); } .c-e12 { --c: var(--e12); } .c-e13 { --c: var(--e13); } .c-e14 { --c: var(--e14); }
.c-sleep-deep { --c: var(--sleep-deep); } .c-sleep-light { --c: var(--sleep-light); } .c-sleep-rem { --c: var(--sleep-rem); } .c-sleep-awake { --c: var(--sleep-awake); }
.c-mood-1 { --c: var(--mood-1); } .c-mood-2 { --c: var(--mood-2); } .c-mood-3 { --c: var(--mood-3); } .c-mood-4 { --c: var(--mood-4); } .c-mood-5 { --c: var(--mood-5); }
figure.view { margin-block: 1.4em 2.2em; position: relative; }
.view-name { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font: 600 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--head); }
.view-name a { color: var(--head); border: 0 !important; }
.view-name a:hover { color: var(--pink-text); }
.view-kind { font: 9.5px var(--font-mono); letter-spacing: .12em; color: var(--faint); }
.v-empty { font: 12px var(--font-mono); color: var(--faint); padding: 14px 0; }
.v-empty.ok { color: var(--green); } .v-empty.warn { color: var(--rose-text); }
.unit, .sub { font: 10.5px/1.6 var(--font-mono); letter-spacing: .06em; color: var(--faint); margin: 10px 0 0 !important; }
.sub a { color: var(--muted); }
.empty { color: var(--faint); font-style: italic; }
.sub-h { margin: 1.6em 0 .6em !important; }
.panel { background: rgba(12, 11, 14, .55); border: 1px solid var(--hair); border-radius: var(--radius-s); padding: 12px 14px; overflow-x: auto; }
.panel.tight { padding: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0 !important; font: 10.5px var(--font-mono); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend i.sq { border-radius: 2px; }
.legend i.sq.hollow, .legend i.ring { background: none; border: 1.5px solid var(--c); }
.legend i.line { width: 16px; height: 2px; border-radius: 0; }
.legend i.line.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.legend i.tick { width: 2px; height: 10px; border-radius: 0; }
/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.tile { background: var(--band); padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.tile .label { font: 9.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tile .big { font: 700 24px/1.05 var(--font-head); color: var(--head); overflow-wrap: anywhere; }
.tile .big.txt { font-size: 15px; line-height: 1.3; letter-spacing: .02em; }
.tile .small { font: 10.5px/1.45 var(--font-mono); color: var(--muted); }
.tile.warn::before, .tile.good::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--rose); }
.tile.warn .big { color: var(--rose-text); }
.tile.good::before { background: var(--green); }
/* bars */
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr minmax(4rem, auto); align-items: center; gap: 12px; font-size: 13.5px; }
.bar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .name a { color: var(--text); border: 0 !important; }
.bar .track { position: relative; height: 10px; background: rgba(255, 255, 255, .035); border-radius: 2px; }
.bar .track i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--green)) 45%, transparent), var(--c, var(--green))); border-radius: 2px; }
.bar .track .usual { position: absolute; top: -3px; bottom: -3px; left: var(--u); width: 2px; background: var(--head); }
.bar .val { font: 11.5px var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }
.bar .val.over { color: var(--pink-hover); }
.bar.pulse .track i { background: linear-gradient(90deg, var(--g1), color-mix(in srgb, var(--rose) calc(var(--w) * 1), var(--g3))); }
/* matrices and heat cells */
table.matrix { border-collapse: separate; border-spacing: 3px; font-size: 13px; width: auto !important; }
table.matrix th { font: 10px var(--font-mono) !important; letter-spacing: .06em !important; text-transform: none !important; color: var(--muted); border: 0 !important; padding: 5px 8px !important; }
table.matrix tbody th { text-align: right; white-space: nowrap; }
table.matrix td { text-align: center; padding: 6px 10px !important; border: 0 !important; background: rgba(255, 255, 255, .025); border-radius: 2px; font-variant-numeric: tabular-nums; }
table.matrix td.hot { color: var(--head); background: var(--pink-wash); }
table.matrix td.cold { color: var(--faint); }
td.heat.up { background: color-mix(in srgb, var(--green) calc(var(--a) * 100%), transparent) !important; color: var(--head); }
td.heat.down { background: color-mix(in srgb, var(--rose) calc(var(--a) * 100%), transparent) !important; color: var(--head); }
/* charts: svg drawn by class */
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart .gl { stroke: var(--line); stroke-width: 1; }
svg.chart .gl.dash { stroke-dasharray: 3 4; }
svg.chart .ax { fill: var(--faint); font: 10px var(--font-mono); }
svg.chart .tg { stroke: var(--pink-text); stroke-dasharray: 5 4; stroke-width: 1.2; }
svg.chart .tg.green { stroke: var(--green); }
svg.chart .zero { stroke: var(--rose); stroke-width: 1.2; }
svg.chart .ln { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .ln.dash { stroke-dasharray: 5 4; }
svg.chart .ln.avg { stroke-width: 2; opacity: .9; }
svg.chart .ln.thick { stroke-width: 2.4; }
svg.chart .dt { fill: var(--c); }
svg.chart .dt.soft { opacity: .55; }
svg.chart .bf { fill: var(--c); }
svg.chart .win { fill: var(--c); opacity: .85; }
svg.chart .ovl { fill: var(--c); opacity: .55; }
svg.chart .spanl { stroke: var(--panel); stroke-width: 2.4; }
svg.chart .wh { stroke: var(--c); opacity: .4; }
svg.chart .ev .evl { stroke: var(--pink-text); stroke-dasharray: 2 3; opacity: .55; }
svg.chart .ev .evt { fill: var(--pink-text); }
svg.chart .hov { fill: transparent; }
svg.chart .hov:hover { fill: rgba(255, 255, 255, .04); }
svg.chart .bandfill { fill: var(--line); opacity: .45; }
svg.chart .trend { stroke-width: 1.4; }
svg.chart .trend.year { stroke: var(--pink-text); stroke-dasharray: 7 5; }
svg.chart .trend.three { stroke: var(--pink-hover); stroke-width: 2.2; }
svg.chart .gauge { fill: var(--c); }
svg.chart .gauge.thin { opacity: .7; }
svg.chart .cap { stroke: var(--head); stroke-width: 2; }
svg.chart .val.over { fill: var(--pink-hover); } svg.chart .val.under { fill: var(--green); }
svg.chart .lab { fill: var(--text); font-size: 12px; }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.mult figcaption { font: 600 10px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left !important; margin: 0 0 6px !important; }
/* heat: strips, the year, the archive, the worn grid */
.habitrow { display: grid; grid-template-columns: 8.5rem 1fr 7.5rem; align-items: center; gap: 12px; padding: 3px 0; }
.habitrow .nm { font: 11.5px var(--font-mono); color: var(--muted); }
.habitrow .ct { font: 10.5px var(--font-mono); color: var(--faint); text-align: right; }
svg.strip { height: 11px; width: auto; max-width: 100%; }
svg .cell { fill: var(--panel); }
svg .cell.gap { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
svg .cell.blank, svg .cell.empty { fill: var(--panel); }
svg .cell.yes, svg .cell.clear { fill: var(--green); } svg .cell.no { fill: var(--no); } svg .cell.hit { fill: var(--pink); }
svg .cell.g1 { fill: var(--g1); } svg .cell.g2 { fill: var(--g2); } svg .cell.g3 { fill: var(--g3); }
svg .cell.mood-1 { fill: var(--mood-1); } svg .cell.mood-2 { fill: var(--mood-2); } svg .cell.mood-3 { fill: var(--mood-3); } svg .cell.mood-4 { fill: var(--mood-4); } svg .cell.mood-5 { fill: var(--mood-5); }
svg.year .eye { fill: rgba(15, 14, 18, .75); }
svg.year .mouth { fill: none; stroke: rgba(15, 14, 18, .75); stroke-width: 1.4; stroke-linecap: round; }
svg.year .hitdot { fill: var(--pink); }
svg.year .day:hover .cell { stroke: var(--head); stroke-width: 1.2; }
.archive { margin-block: .6em 1em; }
.archive figcaption { text-align: left !important; }
.strip-grid { display: grid; grid-template-columns: repeat(13, 16px); gap: 3px; }
.strip-grid .cell { display: block; width: 16px; height: 16px; border-radius: 3px; background: var(--panel); }
.strip-grid .cell.on { background: var(--g2); } .strip-grid .cell.off { background: var(--no); }
.strip-grid .cell.today { box-shadow: 0 0 0 1px var(--pink); }
/* the week */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.wday { background: var(--band); padding: 8px; min-height: 150px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wday.today { box-shadow: inset 0 0 0 1px var(--pink); }
.wday.over, .cday.over, .bcol.over { background: var(--pink-wash) !important; }
.wh { margin: 0 0 4px !important; font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.wh b { font: 700 18px var(--font-head); color: var(--head); margin-right: 4px; }
.wc { font-size: 12px; line-height: 1.35; padding: 4px 6px; border-radius: 2px; border-left: 2px solid var(--c, var(--pink)); background: var(--raise); overflow-wrap: anywhere; }
.wc a { color: var(--text); border: 0 !important; }
.wc.event { background: transparent; border: 1px solid var(--pink); color: var(--pink-text); }
.wc.event a { color: var(--pink-text); }
.wc.soft { background: transparent; border: 1px dashed rgba(236, 143, 194, .5); color: var(--pink-text); }
.wc .h { display: block; font: 9.5px var(--font-mono); color: var(--c); letter-spacing: .04em; }
.wc .tm { font: 10px var(--font-mono); margin-right: 5px; }
.wc.closed { text-decoration: line-through; opacity: .55; }
.waits { color: var(--rose-text); font: 10px var(--font-mono); }
.plan { margin: auto 0 0 !important; font: 10px var(--font-mono); color: var(--faint); }
[draggable="true"] { cursor: grab; }
/* the month */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.cal .dow { background: var(--band); padding: 6px 8px; font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cday { background: rgba(18, 17, 21, .92); min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cday.out { opacity: .35; }
.cday.today { box-shadow: inset 0 0 0 1px var(--pink); }
.cday .num { font: 11px var(--font-mono); color: var(--muted); }
.ce { display: flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce a { color: var(--text); border: 0 !important; overflow: hidden; text-overflow: ellipsis; }
.ce.closed { text-decoration: line-through; opacity: .55; }
.ce i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ce i.ring { background: none; border: 1.5px solid var(--pink); }
.cday .more { font: 10px var(--font-mono); color: var(--pink-text); }
/* the board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 6px; }
.bcol { background: rgba(10, 9, 12, .35); border: 1px solid var(--hair); border-radius: var(--radius-s); transition: background .15s; }
.bcol h4 { display: flex; justify-content: space-between; margin: 0 !important; padding: 11px 12px 9px; font: 600 10px/1 var(--font-head) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--green) !important; border-bottom: 1px solid var(--hair); }
.bcol h4 em { font: 10.5px var(--font-mono); font-style: normal; color: var(--faint); }
.colscroll { display: flex; flex-direction: column; gap: 6px; padding: 8px; max-height: 30rem; overflow-y: auto; }
.bgroup { margin: 6px 2px 0 !important; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bcard { padding: 9px 11px; background: var(--raise); border: 1px solid var(--hair); border-left: 2px solid var(--line); border-radius: var(--radius-s); font-size: 13px; }
.bcard b { font-weight: 500; }
.bcard b a { color: var(--text); border: 0 !important; }
.bcard .meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 5px 0 0 !important; font: 10.5px var(--font-mono); color: var(--faint); }
.bcard .home { color: var(--green); }
.bcard.k-blocked, .bcard.k-overdue { border-left-color: var(--rose); } .bcard.k-today { border-left-color: var(--pink); }
.bcard.k-week { border-left-color: var(--pink-text); } .bcard.k-backlog { border-left-color: var(--green); }
.bcard.k-done { opacity: .75; } .bcard.k-done b { text-decoration: line-through; }
.bcard.dragging { opacity: .4; }
/* the queue */
ol.queue { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 4px; counter-reset: none; }
ol.queue li { display: grid; grid-template-columns: 2.4rem 1fr auto; grid-template-areas: 'n t c' 'n m c'; gap: 2px 12px; padding: 8px 10px; background: var(--band); border-left: 2px solid var(--line); border-radius: 2px; margin: 0 !important; }
ol.queue li.k-overdue, ol.queue li.k-blocked { border-left-color: var(--rose); } ol.queue li.k-today { border-left-color: var(--pink); } ol.queue li.k-week { border-left-color: var(--pink-text); }
ol.queue .n { grid-area: n; font: 700 18px var(--font-head); color: var(--faint); }
ol.queue .t { grid-area: t; } ol.queue .t a { color: var(--head); border: 0 !important; }
ol.queue .m { grid-area: m; font: 10.5px var(--font-mono); color: var(--faint); }
ol.queue .m .home { color: var(--green); }
ol.queue .c { grid-area: c; display: flex; gap: 4px; align-items: center; }
/* the timeline */
.timeline { display: grid; gap: 2px; min-width: 700px; overflow-x: auto; }
.tl-axis, .tl-epic { display: grid; grid-template-columns: 290px 1fr; align-items: center; }
.tl-epic { background: var(--band); border-radius: 2px; }
.tl-name { cursor: pointer; font-size: 13px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.tl-name em { font: 10.5px var(--font-mono); font-style: normal; color: var(--faint); }
.tl-name .tri::before { content: '▸'; color: var(--muted); font-size: 10px; }
.tl-epic:has(.pick:checked) .tri::before { content: '▾'; }
.tl-rows { display: none; grid-column: 1 / -1; grid-template-columns: 290px 1fr; }
.tl-epic:has(.pick:checked) .tl-rows { display: grid; }
.tl-labels p { margin: 0 !important; height: 22px; padding: 0 10px 0 22px; font-size: 12px; line-height: 22px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-labels a { color: var(--text); border: 0 !important; }
svg.chart .lane { fill: var(--panel); stroke: var(--c); stroke-width: 1.4; }
svg.chart .today { stroke: var(--pink-text); stroke-dasharray: 3 3; }
svg.chart .today-l { fill: var(--pink-text); }
svg.chart .tl-row { stroke: var(--line); }
svg.chart .dep { fill: none; stroke: var(--rose); stroke-width: 1.3; }
svg.chart .dep.stub { stroke-dasharray: 3 4; }
/* the flow graph */
.v-graph { overflow: auto; max-height: 76vh; border: 1px solid var(--hair); background: rgba(10, 9, 12, .4); padding: 10px; }
.v-graph .edges path { fill: none; stroke: rgba(216, 213, 221, .22); stroke-width: 1.2; }
.v-graph .node rect { fill: var(--raise); stroke: var(--line); }
.v-graph .node circle { fill: var(--c); }
.v-graph .node text { fill: var(--text); font: 12px var(--font-body); }
.v-graph .node.root rect { stroke: var(--c); }
.v-graph .node.done { opacity: .45; }
.v-graph .node:hover rect { stroke: var(--pink); fill: var(--panel); }
/* the family tree */
.tree-wrap { overflow-x: auto; }
svg.tree { width: auto; max-width: none; height: auto; }
svg.tree .band { fill: var(--bg); opacity: .6; }
svg.tree .gl { fill: var(--faint); font: 600 10px var(--font-head); letter-spacing: .2em; text-transform: uppercase; }
svg.tree .edge { fill: none; stroke: var(--green); stroke-width: 1.8; opacity: .75; stroke-linecap: round; }
svg.tree .couple { stroke: var(--pink); stroke-width: 1.8; }
svg.tree .knot { fill: var(--pink); }
svg.tree .node .c { fill: var(--panel); stroke: var(--line); filter: url(#shadow); transition: stroke .2s; }
svg.tree .node:hover .c { stroke: var(--pink); }
svg.tree .av.M { fill: var(--tint-m); } svg.tree .av.F { fill: var(--tint-f); } svg.tree .av.U { fill: var(--line); }
svg.tree .ini { fill: var(--head); font: 700 19px var(--font-head); }
svg.tree .ring { fill: none; stroke: var(--line); stroke-width: 1.2; }
svg.tree .me .ring { stroke: var(--pink); stroke-width: 2; }
svg.tree .pet .ring { stroke: var(--green); }
svg.tree .n { fill: var(--head); font: 700 14px var(--font-head); }
svg.tree .r { fill: var(--green); font: 9.5px var(--font-mono); letter-spacing: .12em; }
svg.tree .d { fill: var(--muted); font: 10.5px var(--font-mono); }
svg.tree .gone { opacity: .62; }
svg.tree .gone :is(image, .av) { filter: grayscale(1); }
.rows p { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1fr) 2fr; gap: 12px; padding: 7px 0; margin: 0 !important; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.rows p span { color: var(--muted); }
/* tables of people, facts and the rest */
.v-table td.t { min-width: 13rem; }
.v-table td.t > a { border: 0 !important; color: var(--head); }
.thumb { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 9px; display: inline-grid; place-items: center; background: var(--panel); color: var(--muted); }
.v-table td.ed { cursor: text; }
.v-table td.ed:hover { box-shadow: inset 0 -1px 0 var(--pink); }
.v-table td.editing { background: var(--pink-wash); outline: 1px solid var(--pink); }
.v-table td.editing input { width: 100%; background: none; border: 0; outline: 0; }
.v-table tr.soon td { background: rgba(194, 60, 143, .06); }
.bool.true { color: var(--green); } .bool.false { color: var(--faint); }
/* entries: facts and visits */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 12px; }
.entry { background: var(--band); border: 1px solid var(--hair); border-left: 2px solid var(--green); border-radius: var(--radius-s); padding: 13px 15px; min-width: 0; }
.entry.warn { border-left-color: var(--rose); } .entry.ahead { border-left-color: var(--pink); }
.entry h3 { margin: 0 0 6px !important; font: 700 13px/1.3 var(--font-head) !important; letter-spacing: .06em !important; }
.entry h3::before { display: none; }
.entry h3 a { color: var(--head); border: 0 !important; }
.entry .meta { font: 10.5px var(--font-mono); color: var(--muted); margin: 0 0 8px !important; }
.entry .body { font-size: 14px; line-height: 1.55; }
.entry .body > * { width: auto !important; }
.entry .body :is(h1, h2, h3) { font-size: 12px !important; margin: 1em 0 .4em !important; }
.entry .body h2::before, .entry .body h2::after { display: none; }
.entry .ask { border-left: 2px solid var(--pink); padding-left: 10px; color: var(--pink-text); font-size: 13.5px; }
.entry .chips { margin: 8px 0 0 !important; }
/* checks */
.checks .grp { margin: 0 0 18px; }
.checks h4 { display: flex; justify-content: space-between; margin: 0 0 6px !important; padding-bottom: 7px; border-bottom: 1px solid var(--rose); font: 600 10px var(--font-head) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-text) !important; }
.checks h4 em { font: 11px var(--font-mono); font-style: normal; }
.checks ul { list-style: none; margin: 0; padding: 0 !important; }
.checks li { display: flex; gap: 14px; padding: 6px 2px; margin: 0 !important; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.checks .detail { margin-left: auto; font: 11.5px var(--font-mono); color: var(--faint); text-align: right; }
/* the still sky, and text */
.sky-still { margin: 0; background: radial-gradient(circle at 50% 45%, #1d1b22, var(--bg-deep)); border: 1px solid var(--hair); }
.sky-still svg { width: 100%; height: auto; display: block; }
.sky-still .traces line { stroke: rgba(216, 213, 221, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sky-still .stars circle { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.sky-still text { fill: var(--muted); font-family: var(--font-mono); }
.text-view { font: 12.5px/1.6 var(--font-mono) !important; color: #ddd6e4; background: rgba(8, 8, 10, .6) !important; border: 1px solid var(--hair); border-left: 2px solid var(--green) !important; padding: 16px 18px; overflow: auto; max-height: 76vh; white-space: pre; margin: 0; }


/* ===========================================================================
   10 ---- SIGNED IN. The tools the brain puts around a page: the file tree
   (a glass pane down the left), the hands for editing, the owner's page
   options (Properties, Source, Text version),
   search, the sky's instruments. Scoped to body.signed-in or to the app's
   own elements, so a visitor's page never carries any of it.
   ======================================================================== */
.side-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 4px; }
.side-tools .filter { flex-basis: 100%; }
.side-tools button { flex: 1; padding: 7px 4px; border: 1px solid var(--line); border-radius: 4px; font: 600 9.5px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.side-tools button:hover { color: var(--head); border-color: var(--pink); }
.side .filter { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px; padding: 0 10px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--faint); }
.side .filter:focus-within { border-color: var(--pink); }
.side .filter input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 12.5px var(--font-mono); color: var(--text); }
#sideStatus { margin: 0; padding: 9px 14px; border-top: 1px solid var(--hair); font: 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--faint); display: flex; align-items: center; gap: 7px; }
#sideStatus .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* the owner's page options, and what they open (pure CSS, like the site's own Light and High contrast) */
.props-pane, .text-pane { display: none; }
body:has(#show-props:checked) .props-pane, body:has(#show-text:checked) .text-pane { display: block; }
body:has(#show-text:checked) :is(figure.view, .about, .content section.level1 > section) { display: none; }
.props-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; margin: 0 0 1.6em; padding: 10px 14px; border: 1px solid var(--hair); border-left: 2px solid var(--green); background: var(--inset); }
.prop { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 8px; min-height: 30px; }
.prop .k { font: 10.5px var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop .v, .prop .newprop { width: 100%; min-width: 0; background: none; border: 0; border-bottom: 1px solid transparent; outline: 0; padding: 4px 2px; font-size: 13px; color: var(--head); color-scheme: inherit; }
.prop .v:hover { border-bottom-color: var(--line); }
.prop .v:focus, .prop .newprop:focus { border-bottom-color: var(--pink); }
.prop .newprop { font: 11px var(--font-mono); color: var(--muted); }
.props-grid .tri { justify-self: start; padding: 2px 8px; border: 1px solid var(--line); border-radius: 3px; font: 11px var(--font-mono); color: var(--faint); }
.props-grid .tri[data-state=yes] { color: var(--green); border-color: rgba(79, 191, 135, .5); }
.props-grid .tri[data-state=no] { color: var(--rose-text); border-color: var(--rose); }
.source-pane, .text-pane { margin-bottom: 1.6em; }
.source-name { font: 10.5px var(--font-mono); letter-spacing: .08em; color: var(--muted); margin: 0 0 .4em !important; }
.source-pane pre, .text-pane { max-height: 70vh; overflow: auto; margin: 0; white-space: pre-wrap; border-left-color: var(--yellow) !important; }
body.signed-in .source-pane pre { cursor: text; }
.text-pane { font: 12.5px/1.6 var(--font-mono); padding: 14px 16px; background: var(--code-bg); border: 1px solid var(--hair); border-left: 2px solid var(--green); white-space: pre; }

/* a folder's dashboards, views and scripts: buttons at the top, a dashboard the loudest */
.cards.folders .card-img.none { aspect-ratio: 16 / 7; color: var(--c, var(--green)); background: var(--inset); }
.cards.files { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cards.files .card-title { font-size: 11px; letter-spacing: .02em; text-transform: none; word-break: break-all; }
.cards.files .card-img.none { aspect-ratio: 4 / 3; background: var(--inset); }
.cards.files .ext { font: 700 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.listing td:first-child { width: 60%; }
table.listing td.num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.file-text { max-height: 75vh; overflow: auto; }

/* editing: every block of the page is its own markdown; the margin says so */
.blk-edit { margin-block: .4em 1.2em; border: 1px solid var(--pink); border-left-width: 2px; border-radius: 2px; background: var(--code-bg); box-shadow: 0 0 0 4px var(--pink-wash); }
.blk-edit .bar-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 5px 10px; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--hair); }
.blk-edit .bar-h kbd { font-size: 9.5px; }
.blk-edit .cm-editor { padding: 8px 12px; font: 14.5px/1.65 var(--font-mono); color: var(--text); }
.blk-edit .cm-editor.cm-focused { outline: none; }
.blk-edit .cm-scroller { font-family: inherit; line-height: inherit; }
.blk-edit .cm-content { caret-color: var(--pink-text); }
.blk-edit .cm-cursor { border-left: 2px solid var(--pink-text); }
.blk-edit .md-h { color: var(--head); font-weight: 700; } .blk-edit .md-s { color: var(--head); font-weight: 650; } .blk-edit .md-em { font-style: italic; }
.blk-edit .md-l { color: var(--pink-text); } .blk-edit .md-c { color: var(--head); } .blk-edit .md-m { color: var(--faint); } .blk-edit .md-q { color: var(--muted); } .blk-edit .md-li { color: var(--green); }
.wl-menu { position: fixed; z-index: 95; width: 20rem; max-height: 16rem; overflow: auto; padding: 4px; background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 2px solid var(--pink); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.wl-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 9px; border-radius: 3px; font-size: 13.5px; cursor: pointer; }
.wl-item em { font: 10.5px var(--font-mono); font-style: normal; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-item.on, .wl-item:hover { background: var(--pink-wash); color: var(--head); }
.content a.wl.ghost { color: var(--muted); border-bottom: 1px dashed var(--faint); cursor: pointer; }
.content a.wl.ghost:hover { color: var(--pink-text); border-bottom-color: var(--pink); }
/* a linked script: a Run button, its presets joined to it; its output opens under the block it sits in */
.run { display: inline-flex; vertical-align: middle; margin: 2px 0; border: 1px solid var(--yellow); border-radius: var(--radius-s); overflow: hidden; }
.run .run-go { padding: 6px 12px; font: 600 10px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--head); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.run .run-go:hover { background: color-mix(in srgb, var(--yellow) 24%, transparent); }
.run .run-go:disabled { opacity: .55; cursor: progress; }
.run .run-opt { border: 0; border-left: 1px solid var(--yellow); padding: 0 8px; font: 11px var(--font-mono); color: var(--text); background: var(--inset); color-scheme: inherit; }
.run-out { margin: .4em auto 1.2em; }
.run-out pre.console { max-height: 50vh; overflow: auto; margin: 0; white-space: pre-wrap; font: 12px/1.55 var(--font-mono); padding: 10px 12px; background: var(--code-bg); border-left: 2px solid var(--yellow); }
.run-out .run-stop { margin-top: 6px; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); }
.source-then { font: 600 11px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-top: 2em; }
.tree .t-dir-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 4px 8px 4px 0; color: var(--text); cursor: pointer; }
.run pre.console { max-height: 60vh; overflow: auto; border-left-color: var(--yellow); white-space: pre-wrap; }
.drawing { position: relative; height: calc(100vh - 260px); min-height: 320px; border: 1px solid var(--hair); overflow: hidden; cursor: grab; touch-action: none; background: radial-gradient(circle, rgba(156, 152, 166, .14) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--code-bg); }
.drawing svg { position: absolute; left: 0; top: 0; overflow: visible; transform-origin: 0 0; }
.drawing .dtools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.drawing .dtools button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--glass-hi); color: var(--muted); }

/* a row of note links (a file's "used by") */
.conn-chips { display: flex; flex-wrap: wrap; gap: .35em .9em; margin: 0; }

/* a small form over the page (new note, rename, move), the context menu, the conflict line */
#ask { position: fixed; inset: 0; z-index: 96; display: grid; place-items: start center; padding-top: 16vh; background: rgba(8, 7, 10, .55); backdrop-filter: blur(3px); }
#ask[hidden] { display: none; }
#ask .ask-box { width: min(28rem, calc(100vw - 2rem)); padding: 16px 18px 6px; background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 2px solid var(--pink); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#ask .ask-title { margin: 0 0 12px; font: 700 12px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--head); }
#ask .ask-box label { display: grid; gap: 4px; margin-bottom: 11px; }
#ask .ask-box label span { font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#ask .ask-box input, #ask .ask-box select { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--head); font: 14px var(--font-body); outline: 0; color-scheme: inherit; }
#ask .ask-box input:focus, #ask .ask-box select:focus { border-color: var(--pink); }
#menu { position: fixed; z-index: 97; min-width: 13rem; padding: 4px; background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
#menu[hidden] { display: none; }
#menu button { display: block; width: 100%; padding: 6px 10px; border-radius: 3px; color: var(--text); font-size: 13px; text-align: left; }
#menu button:hover { background: var(--pink-wash); color: var(--head); }
#menu hr { border: 0; border-top: 1px solid var(--hair); margin: 4px 0; }
.conflict { border-left-color: var(--rose) !important; background: rgba(166, 61, 95, .09) !important; }

/* search */
#palette { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(8, 7, 10, .55); backdrop-filter: blur(3px); }
#palette[hidden] { display: none; }
.pal { width: min(640px, calc(100vw - 24px)); background: var(--glass-hi); backdrop-filter: blur(14px); border: 1px solid var(--line); border-top: 2px solid var(--pink); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--hair); color: var(--pink-text); font-size: 18px; }
.pal-in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 16px; color: var(--head); }
#palList { max-height: 54vh; overflow-y: auto; padding: 6px; }
.pr { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 4px; cursor: pointer; min-width: 0; }
.pr .sig { color: var(--c); }
.pr .gl { color: var(--pink-text); font-family: var(--font-mono); }
.pr .t { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .t mark { background: none; color: var(--pink-text); }
.pr .t em { color: var(--faint); font-style: normal; }
.pr .badge { font: 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(79, 191, 135, .35); border-radius: 2px; padding: 2px 5px; }
.pr .p { margin-left: auto; font: 10.5px var(--font-mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; direction: rtl; text-align: left; }
.pr .col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pr .snip { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .snip mark { background: rgba(194, 60, 143, .25); color: var(--head); }
.pr.on { background: var(--pink-wash); }
.pg { padding: 10px 10px 4px; font: 600 9.5px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.pal-foot { display: flex; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--hair); font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 10px); z-index: 99; max-width: calc(100vw - 32px); padding: 10px 16px; background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); border-left: 2px solid var(--green); font: 12px var(--font-mono); color: var(--text); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-left-color: var(--rose); }

/* the sky's instruments, over the stars (the brain's and the visitor's) */
#hud { position: fixed; inset: var(--top-h) 0 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
body.chart #hud { opacity: 1; }
body.chart #hud > * { pointer-events: auto; }
body.chart #hud > :is(.hud-title, .coords) { pointer-events: none; }
#hud > * { position: absolute; }
.hud-title { left: 22px; top: 18px; }
.hud-title h2 { margin: 0; font: 700 12px/1 var(--font-head); letter-spacing: .3em; text-transform: uppercase; color: var(--head); }
.hud-title p { margin: 8px 0 0; font: 10.5px var(--font-mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.hud-tools { right: 18px; top: 16px; display: flex; gap: 6px; }
.hud-tools button, .hud-legend button, .replay button { font: 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--glass); }
.hud-tools button.on { color: var(--text); border-color: var(--muted); }
.hud-legend { left: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 5px; max-width: 46vw; }
.hud-legend button { display: flex; align-items: center; gap: 7px; color: var(--text); }
.hud-legend button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.hud-legend button em { font-style: normal; color: var(--faint); }
.hud-legend button.off { opacity: .4; }
.replay { left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--glass); }
.replay button { color: var(--pink-text); }
.replay input { width: min(260px, 24vw); accent-color: var(--pink); }
.replay span { font: 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 110px; }
.coords { right: 20px; bottom: 20px; font: 10.5px var(--font-mono); letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.coords b { color: var(--muted); font-weight: 400; }
.probe { width: 300px; padding: 14px 16px; background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 2px solid var(--c, var(--pink)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.probe .probe-k { margin: 0; display: flex; align-items: center; gap: 7px; font: 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.probe .probe-k .sig { color: var(--c); }
.probe h3 { margin: 10px 0 6px; font: 700 14px/1.25 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--head); }
.probe p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.probe .row2 { display: flex; align-items: center; gap: 8px; }
.probe .row2 span { font: 10.5px var(--font-mono); color: var(--faint); flex: 1; }
.probe .row2 button, .probe .row2 a { padding: 6px 10px; border: 1px solid var(--pink); border-radius: 3px; background: var(--pink); color: #fff; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* 11 ---- print, motion, small screens ------------------------------------------------------------- */
/* the print version: the page opened at #print (the site's own link), or the browser's print */
body:has(#print:target) :is(.site-top, .crumbs, .dossier, .sky, .site-foot, .side, .files-toggle, #hud, .page-options, .toc-mobile, .filters, .switch, .related, .to-top) { display: none !important; }
body:has(#print:target) .print-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1.5em; padding: 10px 14px; border: 1px solid var(--line); font: 11px var(--font-mono); letter-spacing: .06em; }
body:has(#print:target) #page { background: #fff; color: #111; border: 0; backdrop-filter: none; --head: #000; --text: #111; --muted: #444; --faint: #666; --hair: #ccc; --line: #bbb; --band: #f4f4f4; --inset: #fafafa; --code-bg: #f6f6f6; --pink-text: #8a1c5c; }
body:has(#print:target) #page::before, body:has(#print:target) #page::after { display: none; }
body:has(#print:target) .shell { padding: 0; }
@media print {
  body.site { background: #fff; color: #000; }
  .site-top, .crumbs, .dossier, .sky, .site-foot, .side, .files-toggle, #hud, .page-options, .toc-mobile, .filters, .switch, .related, .to-top, .print-bar { display: none !important; }
  #page { background: #fff; border: 0; padding: 0; --head: #000; --text: #111; --muted: #444; --faint: #666; --hair: #ccc; --line: #bbb; --band: #f4f4f4; --inset: #fafafa; --code-bg: #f6f6f6; --pink-text: #8a1c5c; }
  @page { margin: 16mm 14mm; }
  .content p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; word-break: break-all; }
  #page::before, #page::after, body.site::before { display: none; }
  .shell { padding: 0; display: block; }
  .content a { color: #000; }
  .content section.level2 { break-inside: auto; } .content :is(figure, p:has(img), .table-scroll, pre) { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* the side panel needs room beside the page; below that it follows the page (its links and its neighbours stay one scroll
   away on a laptop or a phone), and the outline folds under the title instead */
@media (max-width: 1240px) {
  .shell { flex-direction: column; align-items: center; }
  .stage { width: 100%; max-width: 60rem; flex: none; }
  body.wide .stage { max-width: 86rem; }
  .dossier { position: static; width: 100%; max-width: 60rem; max-height: none; flex: none; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .dossier section { border-bottom: 0; border-right: 1px solid var(--hair); }
  .dossier .dossier-outline { display: none; }
  .content details.toc-mobile { display: block; }
}
@media (max-width: 46em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30em) { .cards { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .cards.rows .card { flex-direction: column; } .cards.rows .card-img { width: 100%; max-width: none; } }
@media (max-width: 760px) {
  :root { --top-h: 52px; }
  .site-top { gap: 10px; padding: 0 10px; }
  .brand b, .search .ph, .search kbd { display: none; }
  .search { min-width: 0; height: 32px; }
  .site-nav a { padding: 8px 7px; letter-spacing: .1em; }
  .shell { padding: 10px 0 0; }
  #page { border-left: 0; border-right: 0; padding-top: 22px; }
  #page::before, #page::after { display: none; }
  .crumbs { margin: 0 12px 8px; }
  .content { --gutter: 28px; }
  .content .page-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content p.frames { grid-template-columns: 1fr; }
  .week { grid-template-columns: 1fr; }
  .wday { min-height: 0; }
  .rows p { grid-template-columns: 1fr; gap: 2px; }
  .replay, .coords { display: none; }
  .probe { width: calc(100vw - 32px); left: 16px !important; top: auto !important; bottom: 20px; }
  .board { grid-auto-columns: 82vw; }
}
/* a phone's bar: the files and the mark first; Sky stays (its own Close returns to the page), Page goes */
/* the site's nav gets a row of its own, so every section can be seen and reached (it scrolled out of sight before) */
@media (max-width: 480px) {
  :root { --top-h: 90px; }
  .site-top { flex-wrap: wrap; align-content: center; gap: 0 6px; padding-top: 6px; padding-bottom: 2px; }
  .site-top > .brand { flex: 1; }
  .top-tools { margin-left: 0; gap: 6px; }
  .site-nav { order: 5; flex: 1 0 100%; justify-content: space-around; border-top: 1px solid var(--hair); margin-top: 6px; }
  .site-nav a { padding: 9px 8px; letter-spacing: .14em; }
  .modes button[data-mode=read] { display: none; }
  .modes button, .lens button { padding: 9px 7px; letter-spacing: .08em; }
  .modes button.on::after { display: none; }
  .search { width: 32px; padding: 0; justify-content: center; }
  .account-in, .account-out { padding: 8px 9px; }
  .account-set { width: 30px; height: 30px; }
  /* signed in: the mark, search, the sky, settings and sign out on the first row; the lens a row of its own */
  .top-tools { display: contents; }
  .site-top > .files-toggle { order: 1; } .site-top > .brand { order: 2; } .search { order: 3; } .modes { order: 4; }
  .account-set { order: 5; } .account-in, .account-out { order: 6; }
  .lens { order: 7; flex: 1 0 0; margin-top: 6px; } .lens button { flex: 1; }
  .live-switch { order: 7; margin-top: 6px; } body:not(.lens-public) .lens { flex-basis: 100%; }
  .site-nav { order: 8; }
}
@media (max-width: 480px) and (pointer: coarse) { :root { --top-h: 104px; } }
/* signed in on a phone: the lens is a row of its own */
@media (max-width: 480px) { :root:has(.site-top .lens) { --top-h: 132px; } .lens button { min-height: 36px; } }
@media (max-width: 480px) and (pointer: coarse) { :root:has(.site-top .lens) { --top-h: 156px; } }
@media (min-width: 900px) { .files-switch:checked ~ .site-foot { padding-left: calc(var(--side-w) + 2vw); } }

/* the page held in Edit: the same page, live (app/editor.js). Marks show only on the line being written */
.doc-mode button { padding: 7px 10px; }
.doc-mode button.on::after { left: 7px; right: 7px; }
body.editing #page { border-color: color-mix(in srgb, var(--pink) 45%, var(--hair)); }
body.editing .props-pane { display: block; }
body.editing :is(#show-props, label[for=show-props]) { display: none; }
.props-pane > details > summary { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; list-style: none; font: 600 10px/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.props-pane > details > summary::-webkit-details-marker { display: none; }
.props-pane > details > summary::before { content: '▸'; font-size: 9px; transition: rotate .2s; }
.props-pane > details[open] > summary::before { rotate: 90deg; }
.props-pane > details > summary em { font: 10.5px var(--font-mono); font-style: normal; color: var(--faint); letter-spacing: .06em; }
.props-pane summary .comp { font: 10px var(--font-mono); letter-spacing: .06em; text-transform: none; padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.props-pane summary .comp.none { border-style: dashed; color: var(--faint); }
.props-pane summary em.bad, .props-grid .prop.bad .k { color: var(--rose-text); }
.props-grid .prop.bad :is(input, select, .tri) { border-color: var(--rose); }
.props-grid .props-group { grid-column: 1 / -1; margin: .8em 0 .1em; font: 600 9.5px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.props-grid select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--inset); color: var(--text); font: 13px var(--font-body); color-scheme: inherit; }
.content .props-pane > details { margin: 0; padding: 0; border: 0; background: none; }
.content h1.cm-title { outline: 0; cursor: text; border-radius: 2px; }
.content h1.cm-title:hover { box-shadow: 0 1px 0 var(--line); }
.content h1.cm-title:focus { box-shadow: 0 1px 0 var(--pink); }
.content .page-body .cm-editor { display: block; width: 100%; font: inherit; color: inherit; background: none; }
.content .page-body .cm-editor.cm-focused { outline: none; }
.content .page-body .cm-scroller { font: inherit; line-height: inherit; overflow: visible; }
.content .page-body .cm-content { padding: 0 0 2em; caret-color: var(--pink-text); counter-reset: sec; white-space: pre-wrap; }
.content .page-body .cm-cursor { border-left: 2px solid var(--pink-text); }
.content .page-body .cm-selectionBackground { background: rgba(194, 60, 143, .28) !important; }
.content .page-body .cm-placeholder { color: var(--faint); font-style: italic; }
.content .page-body .cm-line { width: min(var(--measure), 100% - var(--gutter)); margin-inline: auto; padding: 0; }
.cm-line.cm-h { font-family: var(--font-head); color: var(--head); letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; }
.cm-line.cm-h.cm-on { text-transform: none; }
.cm-line.cm-h1 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; padding-top: .6em; }
.cm-line.cm-h2 { font-size: 17px; font-weight: 700; padding-top: 2.1em; padding-bottom: .5em; counter-increment: sec; counter-reset: sub; }
.cm-line.cm-h2::before { content: counter(sec, decimal-leading-zero); display: inline-block; margin-right: 12px; font: 11px var(--font-mono); color: var(--green); letter-spacing: .1em; }
.cm-line.cm-h3 { font-size: 13.5px; font-weight: 700; color: var(--text); padding-top: 1.5em; padding-bottom: .3em; counter-increment: sub; }
.cm-line.cm-h3::before { content: counter(sec, decimal-leading-zero) '.' counter(sub); font: 10px var(--font-mono); color: var(--green); margin-right: .7em; opacity: .8; }
.cm-line.cm-h4, .cm-line.cm-h5, .cm-line.cm-h6 { font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 1.2em; }
.cm-strong { color: var(--head); font-weight: 650; }
.cm-em { font-style: italic; color: color-mix(in srgb, var(--text) 70%, var(--head)); }
.cm-del, .cm-done { text-decoration: line-through; color: var(--faint); }
.cm-code, .cm-code-t { font: .86em var(--font-mono); color: color-mix(in srgb, var(--head) 88%, var(--pink-text)); }
.cm-code { padding: .12em .2em; border-radius: var(--radius-s); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.cm-mk, .cm-lm { color: var(--faint); font-family: var(--font-mono); font-size: .88em; }
.cm-hl { background: rgba(241, 231, 49, .18); color: var(--head); }
.cm-comment { color: var(--faint); font-style: italic; }
.cm-html { color: var(--rose-text); text-decoration: underline dashed var(--rose); }
.cm-link, .cm-wl { color: var(--pink-text); border-bottom: 1px dotted rgba(236, 143, 194, .5); cursor: pointer; }
.cm-wl.ghost { color: var(--muted); border-bottom: 1px dashed var(--faint); }
.cm-wl-src, .cm-url { color: var(--pink-text); font-family: var(--font-mono); font-size: .9em; }
.cm-bullet { color: var(--green); display: inline-block; width: 1.1em; }
.cm-check { display: inline-block; width: 13px; height: 13px; margin-right: .5em; vertical-align: -1px; border: 1px solid var(--muted); border-radius: 2px; cursor: pointer; }
.cm-check.on { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 2px var(--bg); }
.cm-img img { display: block; max-width: min(560px, 100%); margin: .5em 0; border-radius: 2px; }
.cm-line.cm-quote { border-left: 2px solid var(--green); background: var(--green-wash); padding-left: 1.1em; color: color-mix(in srgb, var(--text) 90%, var(--muted)); }
.cm-line.cm-fence { font: 12.5px/1.6 var(--font-mono); background: var(--code-bg); border-left: 2px solid var(--pink); padding-left: 16px; }
.cm-line.cm-hr { height: 1px; margin-block: 1.4em; background: linear-gradient(90deg, var(--hair), transparent); }
.cm-line.cm-src { font-family: var(--font-mono); font-size: 13.5px; background: var(--code-bg); border-left: 2px solid var(--yellow); padding-left: 12px; }
.cm-rich { position: relative; width: min(var(--measure), 100% - var(--gutter)); margin: .2em auto 1em; white-space: normal; cursor: text; }
.cm-rich:has(> :is(.cards, .filtered, .frames, .table-scroll, .pdf-embed, .sw, figure.view, .view-grid, .shelf)) { width: min(max(var(--measure), 52rem), 100% - var(--gutter)); }
.cm-rich > :first-child { margin-top: 0; }
.cm-rich > :last-child:not(.cm-rich-edit) { margin-bottom: 0; }
.cm-rich-edit { position: absolute; top: 0; left: -30px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; color: var(--pink-text); background: var(--raise); border: 1px solid var(--line); border-radius: 3px; opacity: 0; transition: opacity .15s; }
.cm-rich:hover { box-shadow: -10px 0 0 -8px var(--line); }
.cm-rich:hover .cm-rich-edit, .cm-rich-edit:focus-visible { opacity: 1; }

.content .settings-form { width: min(60rem, 100% - var(--gutter)); }
.content #settings-app { width: min(66rem, 100% - var(--gutter)); container-type: inline-size; }
/* the Settings screen (app/settings.js): a list of sections beside the sections, each a plain form */
.settings { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 28px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--top-h, 64px) + 16px); display: grid; gap: 2px; }
.set-nav a { padding: 7px 10px; border-left: 2px solid var(--line); color: var(--muted); font: 600 10.5px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.set-nav a:hover { color: var(--head); border-left-color: var(--pink); background: var(--pink-wash); }
.set-body { display: grid; gap: 18px; min-width: 0; }
.set-sec { padding: 16px 20px 8px; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: calc(var(--top-h, 64px) + 16px); }
.set-sec h2 { margin: 0 0 6px; font-size: 1.05rem; }
.set-sec h3 { margin: 1.2em 0 .3em; font-size: .9rem; }
.set-lede, .set-about { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.set-field { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 8px 0; border-top: 1px solid var(--hair); }
.set-field.nested { grid-template-columns: 1fr; }
.set-field p { margin: 4px 0; }
.set-key { display: flex; align-items: center; gap: 6px; padding-top: 7px; font: 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.set-group, .set-card { padding: 4px 12px 8px; border-left: 2px solid var(--line); }
.set-card { margin-bottom: 8px; background: var(--bg-alt); border-radius: var(--radius-s); }
.set-list { display: grid; gap: 6px; }
.set-row { display: flex; gap: 6px; align-items: center; }
.settings input:not([type=checkbox]), .settings textarea, .set-dialog input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--head); font: 14px var(--font-body); outline: 0; color-scheme: inherit; }
.settings textarea { font: 12.5px/1.55 var(--font-mono); resize: vertical; }
.set-raw textarea { min-height: 12rem; border-left: 2px solid var(--yellow); }
.settings input:focus, .settings textarea:focus, .set-dialog input:focus { border-color: var(--pink); }
.set-tick { display: inline-flex; gap: 8px; align-items: center; padding-top: 6px; }
.set-tick input { width: 18px; height: 18px; accent-color: var(--pink); }
.set-add, .set-del { flex: none; padding: 5px 10px; border: 1px dashed var(--line); border-radius: var(--radius-s); color: var(--muted); font: 600 9.5px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; justify-self: start; }
.set-del { border-style: solid; }
.set-del.small { padding: 2px 6px; }
.set-add:hover { color: var(--head); border-color: var(--pink); }
.set-del:hover { color: var(--head); border-color: var(--rose); }
.set-form.dirty { box-shadow: -12px 0 0 -10px var(--yellow); }
.set-form.dirty button[type=submit] { background: var(--pink); color: #fff !important; }
.settings details { margin: 6px 0; }
.settings summary { cursor: pointer; padding: 6px 0; }
.settings tr.cur td { background: var(--pink-wash); }
.set-off { padding-left: 1.2em; }
.set-off li { margin: 4px 0; }
.set-off button, .settings td button { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); font: 600 9.5px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.set-off button:hover, .settings td button:hover { border-color: var(--pink); color: var(--head); }
.settings .guide li.done { color: var(--muted); }
.set-dialog { width: min(34rem, calc(100vw - 2rem)); padding: 18px 20px 8px; color: var(--text); background: var(--glass-hi); backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 2px solid var(--pink); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.set-dialog::backdrop { background: rgba(8, 7, 10, .6); backdrop-filter: blur(3px); }
.set-dialog h2 { margin: 0 0 10px; font: 700 13px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--head); }
.set-choices { display: grid; gap: 8px; margin: 10px 0; }
.set-choice { display: grid; gap: 3px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raise); }
.set-choice:hover, .set-choice:focus-visible { border-color: var(--pink); background: var(--pink-wash); }
.set-choice span { color: var(--muted); font-size: 13px; }
.set-ask { display: grid; gap: 4px; margin: 10px 0; }
.set-ask span { font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.set-qr { width: 220px; margin: 10px auto; padding: 8px; background: #fff; border-radius: var(--radius); }
.set-qr svg { display: block; width: 100%; height: auto; }
.set-codes { padding: 12px 16px; font: 15px/1.7 var(--font-mono); letter-spacing: .06em; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); user-select: all; }
.settings tr.bad td { color: var(--rose); }
@container (max-width: 760px) {
  .settings { grid-template-columns: 1fr; gap: 12px; }
  .set-nav { position: static; display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .set-nav a { flex: none; border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
  .set-sec { padding: 14px 14px 6px; }
}
@container (max-width: 480px) { .set-field { grid-template-columns: 1fr; } .set-key { padding-top: 0; } }

/* the editor's own Done and Cancel (a phone has no Ctrl S or Esc) */
.blk-edit .bar-acts { display: flex; gap: 6px; margin-left: auto; }
.blk-edit .bar-acts button { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); font: 600 9.5px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.blk-edit .bar-acts button[data-blk=keep] { background: var(--pink); border-color: var(--pink); color: #fff; }
@media (max-width: 760px) { .blk-edit .bar-keys { display: none; } }

/* 12 ---- the live site's reading comforts, kept ------------------------------------------------------ */
/* prose breaks long words at the line end (en-GB rules), so a paragraph's right edge doesn't go ragged; headings, labels and code never do */
.content :is(p:not([class]), p.opening, li, dd, blockquote p) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.content p { text-wrap: pretty; }
.content :is(h2, h3, .standfirst, .tagline) { text-wrap: balance; }
/* on a touch screen every chip and small button is a full fingertip tall (44px); a mouse keeps the compact size */
@media (pointer: coarse) {
  :is(.tag, .tag-ext, .filters-reset, .filters-more, .page-options .print-link, .page-options .meta-toggle, .lb-bar a, .site-nav a, .seg button, .account-in, .files-toggle) { min-height: 44px; }
  .tag-ext, .files-toggle { min-width: 44px; }
  .card-tags .tag { min-height: 1.45rem; }
}
/* on a phone, a section's title stays pinned under the bar while its section scrolls past */
@media (max-width: 640px) {
  .content section.level2 > h2 { position: sticky; top: var(--top-h); z-index: 6; padding: .45rem 0; background: var(--glass-hi); box-shadow: 0 0 0 100vmax var(--glass-hi), 0 1px 0 100vmax var(--hair); clip-path: inset(0 -100vmax -1px); }
}