/* The catalog site, drawn as a nerd window: flat ground, 1px frames with the title in the border, nerd's palette.
   Every font is the system's; every file is this site's own (the Content-Security-Policy allows nothing else). */
:root {
  --ground: #fafafb; --surface: #eceef1; --border: #d3d6db; --slab: #8a8c8f;
  --text: #1e2024; --muted: #545860; --faint: #6c7077;
  --accent: #2e7d1f; --ok: #0f7a52; --warn: #b45309; --bad: #bc2c43; --wait: #2b5ca8; --teal: #146d79;
  --focus: #56a03a; --fill: #9fd08a; --on-fill: #14210f; --tint: #e3f2db;
  /* the second colour: movement, data travelling or a change over time (DESIGN.md, Colour); the accent's lightness and chroma at hue 300 */
  --flow: #7850b1;
  --r0: var(--ok); --r1: var(--wait); --r2: var(--warn); --r3: var(--bad);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --text-face: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  /* the grid: a 4px module, a 20px text line; every size and gap below comes from these (DESIGN.md) */
  --u: 4px; --line: 20px; --ctl: 28px; --cta: 40px; --bar: 44px; --status: 32px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* a page's side column is a fixed width, so the main column takes the rest on a whole pixel */
  --aside: 512px;
  --side: 240px; --lh: 24px; --in: 16px; --cap: 1920px; --desk: #f1f2f4; --gut: 16px;
  --hov: var(--tint); --hov-fill: color-mix(in srgb, var(--text) 9%, var(--surface));
  --logo: url("brand/nerd-logo-light.svg");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #131417; --surface: #1b1d21; --border: #2f3238; --slab: #606266;
  --text: #dde0e5; --muted: #9ba0a8; --faint: #74797f;
  --accent: #9fd08a; --ok: #6ed69b; --warn: #e6c178; --bad: #ef8288; --wait: #8ab4f0; --teal: #6fc9d4;
  --focus: var(--accent); --fill: var(--accent); --on-fill: var(--ground);
  --flow: #cab0fb;
  --tint: color-mix(in srgb, var(--accent) 12%, var(--surface)); --hov: color-mix(in srgb, var(--accent) 9%, var(--ground));
  --desk: #0e0f11;
  --logo: url("brand/nerd-logo-dark.svg");
  color-scheme: dark;
}
@media (max-width: 340px) { :root { --gut: 12px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* a link to another page swaps it in place, with no blank frame and no fade */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
body { background: var(--ground); color: var(--text); font: 13px/var(--line) var(--mono); -webkit-text-size-adjust: 100%; }
@media (max-width: 1279px) { :root { --aside: 400px; } }
@media (min-width: 1900px) { :root { --line: 24px; --lh: 28px; --side: 280px; --aside: 592px; } body { font-size: 15px; } }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--slab); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--text); }
/* a link that leaves the site ends in a small north-east arrow, drawn from a file of the site's own */
a[href^="http"]::after { content: ""; display: inline-block; width: .72em; height: .72em; margin-left: var(--s1); vertical-align: .02em; background: currentColor; -webkit-mask: var(--ext) center / contain no-repeat; mask: var(--ext) center / contain no-repeat; }
/* in the stylesheet itself, so the arrow is there on a page's first paint rather than a moment later */
:root { --ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
h1, h2, h3, h4 { font: inherit; margin: 0; }
code, pre { font: inherit; }
.faint { color: var(--faint); }
/* the Official chip: nerd on the accent, then the word; the words are its fallback and its title the full text */
.off { display: inline-flex; align-items: stretch; gap: var(--s1); padding-right: var(--s1); border: 1px solid var(--accent); color: var(--accent); font: 600 11px/14px var(--mono); vertical-align: middle; cursor: help; white-space: nowrap; }
.off b { background: var(--accent); color: var(--on-fill); padding: 0 var(--s1); font-weight: 600; }
.muted { color: var(--muted); }
.teal { color: var(--teal); }

/* window: top bar, panel, page, status line */
/* the bar and the status line are their height plus the 1px border that parts them from the page */
#win { display: grid; height: 100dvh; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: calc(var(--bar) + 1px) minmax(0, 1fr) calc(var(--status) + 1px); }
#bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--gut); border-bottom: 1px solid var(--border); min-width: 0; }
#bar .btn, .brand { flex: none; }
#tree { grid-row: 2; grid-column: 1; margin: var(--s4) 0 var(--s4) var(--gut); }
#main { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; padding: 0 var(--gut) var(--s4) var(--s4); display: flex; }
#status { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: 0 0 0 var(--s2); border-top: 1px solid var(--border); color: var(--faint); white-space: nowrap; overflow: hidden; }
#status > button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); }
#status > button:hover { color: var(--text); }
#status b { color: var(--text); font-weight: 600; }
/* System, Light, Dark: at the right end of the status line */
.theme { margin-left: auto; align-self: stretch; display: flex; align-items: center; gap: 0; padding: 0 var(--s2); border-left: 1px solid var(--border); font-size: 12px; }
.theme button { background: none; border: 0; padding: 0 var(--s2); cursor: pointer; color: var(--muted); line-height: 22px; }
.theme button:hover { color: var(--text); }
.theme button.on, .theme button.on:hover { background: var(--fill); color: var(--on-fill); }
#space { display: none; }

.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand svg { height: 20px; width: auto; display: block; }
:root:not([data-theme="dark"]) .brand .dk, :root[data-theme="dark"] .brand .lt { display: none; }
.brand span { color: var(--muted); }
a.brand:hover { opacity: .78; }
@media (min-width: 861px) { .brand { width: calc(var(--side) - var(--gut)); } }

/* buttons are filled cells with no outline; the chosen one is bold in the accent */
.btn { border: 0; background: var(--surface); color: var(--muted); padding: 0 var(--s3); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn.on, .btn[aria-pressed="true"] { background: var(--surface); color: var(--accent); font-weight: 700; }
:root:not([data-theme="dark"]) .btn[aria-pressed="true"] { background: var(--ground); box-shadow: inset 0 0 0 1px var(--surface); }
.btn:hover { background: var(--hov-fill); color: var(--text); }
.btn[aria-pressed="true"]:hover, .btn.on:hover { color: var(--accent); }
.btn.sm { padding: 0 var(--s2); }
a.btn { display: inline-block; }
#drawerBtn { display: none; }

/* frames: the title sits in the border; inside a pane there is no frame within a frame */
.frame { position: relative; border: 1px solid var(--border); margin-top: var(--s4); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.frame > .t { position: absolute; top: 0; left: calc(var(--in) - .8ch); transform: translateY(-52%); padding: 0 var(--s2); background: var(--ground); color: var(--muted); white-space: nowrap; max-width: calc(100% - 3ch); overflow: hidden; text-overflow: ellipsis; z-index: 1; line-height: round(up, 1.2em, 4px); }
.frame > .t.r { left: auto; right: calc(var(--in) - .8ch); color: var(--faint); }
/* before app.js marks a frame: the main frame, or the nav when theme.js read that it was the last one in use */
.frame.focus, :root[data-panel="tree"] #tree, :root:not([data-panel]) #main .frame.primary { border-color: var(--focus); }
.frame.focus > .t:not(.r), :root[data-panel="tree"] #tree > .t:not(.r), :root:not([data-panel]) #main .frame.primary > .t:not(.r) { color: var(--accent); }
.frame > .body { padding: var(--s4) var(--in); overflow: auto; min-height: 0; flex: 1; }
.frame.fill { flex: 1; }
/* a frame's title reaches 48% of a line (at most 12px) into it: what scrolls there is cut off, so nothing passes over the border line;
   what is scrolled to (a focused row, with its 3px outline) stops 16px down, clear of the cut */
@media (min-width: 861px) { .frame:not(.frame .frame) > .body, .home-pane > .home { clip-path: inset(var(--s3) 0 0 0); scroll-padding-top: var(--s4); } }
.frame .frame { border: 0; margin-top: 0; }
.frame .frame > .t:not(.r) { position: static; transform: none; padding: 0 0 var(--s2); background: none; max-width: none; display: block; font-weight: 700; font-size: inherit; margin: 0; }
.frame .frame > .body { padding: 0; }
.ptabs { display: flex; flex-wrap: wrap; gap: 0 var(--s5); padding: var(--s3) var(--in) 0; border-bottom: 1px solid var(--border); }
.ptabs a { padding: 0 0 var(--s1); text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .08s; }
.ptabs a:hover { color: var(--text); border-bottom-color: var(--slab); }
.ptabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.ptabs .tn { color: var(--faint); margin-left: var(--s1); }
.ptabs a.on .tn { color: inherit; }

.page { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 0 var(--s4); grid-template-rows: minmax(0, 1fr); }
.p-split { grid-template-columns: minmax(0, 1fr) var(--aside); }
.p-one { grid-template-columns: minmax(0, 1fr); }
.p-two { grid-template-columns: var(--aside) minmax(0, 1fr); }
.p-rv { grid-template-columns: minmax(0, 1fr) var(--aside); }
.p-ad { grid-template-columns: minmax(0, 1fr) var(--aside); }
.col { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 0; overflow: auto; }
.col > .frame { flex: none; }
.col > .frame:last-child { flex: 1 0 auto; }

/* panel: pages and what plugins add, as a tree whose branches are drawn as lines */
#tree .body { padding: var(--s3) 0 var(--s6); }
.sec { margin: 0 0 var(--s2); --stem: 1.7ch; }
.sec > .h { position: relative; display: flex; align-items: center; gap: var(--s2); width: 100%; background: none; border: 0; padding: 0 var(--s3); line-height: var(--lh); cursor: pointer; text-align: left; color: var(--muted); }
.sec > .h:hover { color: var(--text); }
.sec.open > .h::after { content: ""; position: absolute; left: var(--stem); top: calc(50% + .55em); bottom: 0; border-left: 1px solid var(--border); }
.tr { position: relative; display: flex; gap: var(--s2); padding: 0 var(--s3); line-height: var(--lh); text-decoration: none; white-space: nowrap; color: var(--text); cursor: pointer; }
.tr .n { margin-left: auto; color: var(--faint); }
.tr .g { width: 1.6ch; color: var(--faint); flex: none; white-space: pre; }
.tr .g::before { content: ""; position: absolute; left: var(--stem); top: 0; bottom: 0; border-left: 1px solid var(--border); }
.tr.last .g::before { bottom: 50%; }
.tr .g::after { content: ""; position: absolute; left: var(--stem); top: 50%; width: 1.3ch; border-top: 1px solid var(--border); }
.tr .l { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr:hover { background: var(--hov); }
.tr.on, .tr.on:hover { background: var(--fill); color: var(--on-fill); }
.tr.on .g, .tr.on .n { color: inherit; }
.tr.on .g::before, .tr.on .g::after { border-color: currentColor; }

/* generic bits */
.sum { font-size: 1.08em; max-width: 70ch; margin: 0 0 var(--s3); }
.sum.snug { margin-bottom: var(--s1); }
.row { display: flex; flex-wrap: wrap; gap: 0 var(--s4); align-items: center; }
.row .mk { text-decoration: none; display: inline-flex; align-items: center; height: var(--line); }
.row a.mk:hover .ri { background: var(--hov-fill); }
.mark { white-space: nowrap; }
.mark.checked { color: var(--ok); }
.mark.reviewed { color: var(--teal); }
.risk { white-space: nowrap; }
.risk.r0 { color: var(--r0); } .risk.r1 { color: var(--r1); } .risk.r2 { color: var(--r2); } .risk.r3 { color: var(--r3); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.sect { margin: var(--s4) 0 var(--s1); color: var(--muted); }
.sect:first-child { margin-top: 0; }
dl.facts { display: grid; grid-template-columns: 17ch minmax(0, 1fr); gap: var(--s1) var(--s3); margin: 0; }
dl.facts dt { color: var(--faint); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.facts.narrow { grid-template-columns: 12ch minmax(0, 1fr); }
.facts .types { color: var(--muted); word-spacing: .6ch; line-height: round(up, 1.6em, 4px); }
.facts .types summary { cursor: pointer; list-style: none; }
.facts .types summary::-webkit-details-marker { display: none; }
.facts .types .more { color: var(--accent); word-spacing: 0; margin-left: var(--s1); }
.facts .types details[open] .more { display: none; }
.spark { letter-spacing: .05em; color: var(--flow); white-space: pre; }
.cmd { display: flex; align-items: stretch; border: 1px solid var(--border); margin: var(--s1) 0 var(--s2); }
.cmd code { flex: 1; min-width: 0; padding: 3px var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd code.pre { white-space: pre; display: block; overflow: auto; }
.cmd code::before { content: "$ "; color: var(--faint); }
.cmd code.pre::before { content: none; }
.cmd .btn { border-left: 1px solid var(--border); min-height: 0; }
.note { color: var(--muted); max-width: 72ch; }
.note.flat { margin: 0; }
.note.lead5 { margin: 0 0 var(--s2); }
.note.lead6 { margin: 0 0 var(--s2); }
.notice { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--surface); max-width: 72ch; }
.notice.bad { color: var(--bad); }
.notice.warn { color: var(--warn); }
ul.plain { margin: var(--s1) 0; padding-left: var(--s4); }
ul.plain li { margin: 0 0; }
.dim { opacity: .75; }
.plain-link { text-decoration: none; }
.empty { max-width: 64ch; padding: var(--s3) 0; }
.empty h3 { margin-bottom: var(--s2); }
.row.up { margin-top: var(--s3); }

/* recording */
.rec .body { padding-block: var(--s4) var(--s2); overflow: visible; flex: none; }
.rec .ctl { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; padding-top: var(--s2); color: var(--faint); }
.asciinema-player-theme-nerd { --term-color-foreground: var(--text); --term-color-background: var(--ground); --term-color-0: var(--surface); --term-color-2: var(--accent); --term-color-7: var(--text); --term-color-8: var(--muted); --term-color-15: var(--text); }
.ap-wrapper, .asciinema-player-wrapper { width: 100%; }
/* the player's own stylesheet sets these with more weight */
.still .ap-overlay, .still .ap-overlay-start { display: none !important; }
.still.gap { margin-bottom: var(--s2); }
/* a still inside a link is a picture of the link: the player under it takes no pointer, so the link's own cursor and click win */
a .still-box, a .still-box * { pointer-events: none; }
/* no recording: the globe out of sync, grey and dim, cut into bands pushed sideways */
.noshot { aspect-ratio: 120 / 33; background: var(--surface); margin: 0 0 var(--s3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; overflow: hidden; }
.noshot.big { height: 100%; margin: 0; }
.noshot small { flex: none; font-size: .85em; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; }
.noshot .gl { position: relative; height: 60%; aspect-ratio: 896 / 404; max-width: 90%; opacity: .38; filter: grayscale(1); }
.noshot .gl i { position: absolute; inset: 0; background: var(--logo) center / contain no-repeat; }

/* may do: one band of four filled cells, like the numbers on the home page */
.rooms-f > .body { container: rband / inline-size; }
.rband { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
/* a cell needs about 11.5em: "Coding agents" with its icon (9.6em) and the cell's padding; four need 46em, two 23em */
@container rband (min-width: 24em) { .rband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container rband (min-width: 48em) { .rband { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rcell { --c: var(--ok); background: var(--surface); padding: var(--s3) var(--s3) var(--s2); display: grid; gap: var(--s1); align-content: start; min-width: 0; color: var(--faint); }
.rcell.files { --c: var(--wait); } .rcell.network { --c: var(--warn); } .rcell.agent { --c: var(--bad); }
.rcell .rn { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcell .rn svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.rcell .rd { font-family: var(--text-face); font-size: .95em; overflow-wrap: anywhere; }
.rcell.on { background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--text); }
.rcell.on .rn { color: var(--c); font-weight: 600; }
.rcell:not(.on) .rd { color: var(--faint); font-family: var(--mono); font-size: .9em; }

/* room marks: only what a plugin may do is drawn; a mark's words come on hover from a floating line */
.ricons { display: inline-flex; gap: 2px; vertical-align: middle; }
.ricons.unknown { color: var(--muted); }
.ri { --c: var(--ok); position: relative; width: var(--line); height: var(--line); vertical-align: top; display: inline-grid; place-items: center; color: var(--border); }
.ri.files { --c: var(--wait); } .ri.network { --c: var(--warn); } .ri.agent { --c: var(--bad); }
.ri.mark-checked { --c: var(--ok); } .ri.mark-reviewed { --c: var(--teal); }
.ri.on { color: var(--c); }
.ri:not(.on) { display: none; }
.ri svg { width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.ri.on svg { width: 88%; height: 88%; stroke-width: 1.4; }
.ri.mark-checked svg { width: 100%; height: 100%; stroke-width: 1.7; }
.row .ri { vertical-align: -.4em; }
.ricons .ri, .row > .ri, .meta > .ri, .lr .ri { vertical-align: middle; }
#rtip { position: fixed; z-index: 60; max-width: 36ch; padding: var(--s1) var(--s2); background: var(--text); color: var(--ground); font: 12.5px/1.4 var(--text-face); pointer-events: none; }
/* the rating: a filled star in grey, the count in the text colour, the week's gain in teal beside it */
.sn { display: inline; white-space: nowrap; font-family: var(--mono); font-weight: 400; }
.sn b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.star { width: 1em; height: 1em; flex: none; fill: var(--faint); stroke: none; font-family: var(--mono); font-size: inherit; color: var(--faint); display: inline-block; vertical-align: -.1em; margin-right: var(--s1); }
.gn { margin-left: var(--s3); color: var(--flow); white-space: nowrap; font-family: var(--mono); }

/* lists */
.qrow { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.qin { flex: 1 1 30ch; min-width: 18ch; display: flex; align-items: center; border: 1px solid var(--border); padding: 0 var(--s2); gap: var(--s2); }
.qin:focus-within { border-color: var(--focus); }
.qin input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; }
.qin span { color: var(--faint); }
.srt { white-space: nowrap; }
select { background: var(--ground); border: 1px solid var(--border); padding: 0 var(--s2); }
.views { display: flex; gap: 1px; }
.fbar { display: flex; flex-wrap: wrap; gap: 1px; margin: var(--s3) 0 var(--s1); }
.res { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--muted); margin: var(--s1) 0 var(--s2); gap: var(--s1) 0; }
.res .applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-left: var(--s4); }
.res .clear { color: var(--muted); }
/* filter menus: one open at a time */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd.set > summary { color: var(--text); }
.dd.set > summary b { color: var(--accent); font-weight: 700; }
.dd[open] > summary { background: var(--hov-fill); color: var(--text); }
.dd .menu { position: absolute; z-index: 35; top: calc(100% + 2px); left: 0; min-width: 26ch; display: grid; padding: var(--s1) 0; background: var(--ground); border: 1px solid var(--border); }
.dd .menu a { display: flex; justify-content: space-between; gap: var(--s5); padding: var(--s1) var(--s3); text-decoration: none; color: var(--text); white-space: nowrap; }
.dd .menu a:hover { background: var(--hov); color: var(--accent); }
.dd .menu a[aria-current] { color: var(--accent); font-weight: 700; }
.dd .menu .n { color: var(--faint); font-weight: 400; }
.lr { display: grid; grid-template-columns: minmax(12ch, 1.1fr) minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.6fr) 9ch minmax(0, 1.2fr) 5ch; gap: 0 var(--s3); padding: var(--s1) var(--s2) 3px; text-decoration: none; border-top: 1px solid var(--border); align-items: start; transition: background-color .08s, color .08s, box-shadow .08s; }
.lr.hd { color: var(--faint); border-top: 0; border-bottom: 1px solid var(--border); padding-top: 0; }
/* a row is one control high: 4px, a 20px line, 3px and its 1px rule; the head is 20, 3 and its rule */
.lr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr > .rk, .lr > .mk { display: flex; align-items: center; height: var(--line); }
.lr .rk { overflow: visible; }
.lr .nm { font-weight: 600; }
.lr .num { text-align: right; }
a.lr:hover { background: var(--hov); box-shadow: -1.2ch 0 0 var(--hov), 1.2ch 0 0 var(--hov); }
a.lr:hover .nm { color: var(--accent); }
#results a.lr:hover { box-shadow: none; }
.wide { display: grid; }
.wr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm num" "s num" "meta num"; gap: var(--s1) var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; transition: background-color .08s, color .08s, box-shadow .08s; }
.wr .nm { grid-area: nm; font-weight: 700; }
.wr .s { grid-area: s; font-family: var(--text-face); font-size: 1.05em; line-height: round(up, 1.5em, 4px); color: var(--text); max-width: 80ch; }
.wr .meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--muted); }
.wr .num { grid-area: num; align-self: center; text-align: right; display: grid; font-size: 1.05em; }
.wr .num .sn { font-size: .9em; }
.wr .num .sn b { font-size: 1.15em; }
.wr .num .sn .star { width: .8em; height: .8em; }
a.wr:hover { background: var(--hov); box-shadow: -1.2ch 0 0 var(--hov), 1.2ch 0 0 var(--hov); }
a.wr:hover .nm { color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30ch), 1fr)); gap: var(--s6) var(--s4); padding-top: var(--s2); }
.tile { display: grid; gap: var(--s2); align-content: start; text-decoration: none; color: inherit; min-width: 0; transition: background-color .08s, color .08s, box-shadow .08s; }
.tile .still-box, .tile .noshot { margin: 0 0 var(--s1); aspect-ratio: 120 / 50; overflow: hidden; background: var(--surface); transition: filter .12s, opacity .12s; }
.tile .noshot .gl { height: 56%; }
.tile .nm { font-weight: 700; display: flex; justify-content: space-between; gap: var(--s2); }
.tile .nm .num { font-weight: 400; color: var(--faint); }
.tile .s { font-family: var(--text-face); line-height: round(up, 1.45em, 4px); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .meta { font-size: .95em; }
.tile:hover .nm { color: var(--accent); }
.tile:hover .still-box { filter: brightness(1.18); }
.tile:hover .noshot { background: var(--hov-fill); }
.tile:hover .noshot .gl { opacity: .55; }
.row, .meta { align-items: center; }

/* a plugin page */
.info .sect { margin-top: var(--s6); }
.info .sect.first { margin-top: var(--s1); }
.info .sum { font-family: var(--text-face); font-size: 1.12em; line-height: round(up, 1.55em, 4px); margin-bottom: var(--s3); }
.info .facts { row-gap: var(--s2); }
.info .links { display: flex; gap: var(--s5); margin: var(--s6) 0 var(--s1); }
.info .links a { color: var(--muted); }
/* releases and related plugins share one block: filled cells one pixel apart */
.rel { display: grid; gap: 1px; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.rel:last-child { border-bottom: 0; }
.rel .perm { margin: var(--s1) 0 0; }
.widened { color: var(--warn); }
.rel-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm st" "s s" "meta meta"; gap: var(--s1) var(--s4); padding: var(--s3) var(--s3) var(--s3); background: var(--surface); text-decoration: none; color: inherit; transition: background-color .08s, color .08s, box-shadow .08s; }
.rel-i:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rel-i:hover .nm { color: var(--accent); }
.rel-i .nm { grid-area: nm; font-weight: 700; }
.rel-i .st { grid-area: st; }
.rel-i .s { grid-area: s; font-family: var(--text-face); color: var(--muted); line-height: round(up, 1.45em, 4px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-i .meta { grid-area: meta; display: flex; gap: var(--s3); font-size: .95em; }
.relsel { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); align-items: center; }
/* the README reads under what the plugin may do: prose, so it gets the text face and a measure */
.readme-f > .body { overflow: visible; }
.readme { font-family: var(--text-face); font-size: 1.04em; line-height: round(up, 1.6em, 4px); max-width: 72ch; }
.readme h1, .readme h2, .readme h3 { font-family: var(--display); letter-spacing: -.01em; line-height: round(up, 1.25em, 4px); margin: var(--s4) 0 var(--s2); }
.readme h2 { font-size: 1.15em; font-weight: 600; }
.readme h3 { color: var(--muted); font-weight: 600; }
.readme > :first-child { margin-top: var(--s1); }
.readme p, .readme ul { margin: var(--s2) 0; }
.readme ul { padding-left: var(--s4); }
.readme pre { border: 1px solid var(--border); font-family: var(--mono); font-size: .9em; background: var(--surface); padding: var(--s2) var(--s3); overflow-x: auto; margin: var(--s2) 0; }
.readme code { font-family: var(--mono); font-size: .92em; color: var(--accent); }
.readme pre code { color: var(--text); }
.readme .table { overflow-x: auto; }
.readme table { border-collapse: collapse; margin: var(--s2) 0; }
.readme th, .readme td { border: 1px solid var(--border); padding: var(--s1) var(--s2); text-align: left; vertical-align: top; }
.readme th { color: var(--muted); font-weight: 600; }

/* text pages */
.prose { max-width: 78ch; }
.prose h2 { font-size: 1.15em; font-weight: 600; margin: 0 0 var(--s2); }
.prose h2:not(:first-child) { margin-top: var(--s5); }
.prose p { margin: var(--s2) 0; max-width: 70ch; }
.prose .lede { font-family: var(--text-face); font-size: 1.12em; line-height: round(up, 1.6em, 4px); color: var(--muted); max-width: 58ch; }
.step { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: 0 var(--s2); padding: var(--s2) 0 7px; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: 0; padding-bottom: var(--s2); }
.step .no { color: var(--accent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); margin: var(--s1) 0 var(--s3); }
.frame .frame.chk > .t:not(.r) { color: var(--ok); }
.frame .frame.rev > .t:not(.r) { color: var(--teal); }
.rtab { width: 100%; border-collapse: collapse; }
.rtab td { padding: var(--s1) var(--s3) var(--s1) 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.rtab tr:last-child td { border-bottom: 0; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--s4) 0; }
.cell { background: var(--surface); padding: var(--s3) var(--s3) var(--s3); }
.cell b { display: block; color: var(--accent); margin-bottom: var(--s1); }
.cell p { margin: 0; max-width: none; }

/* home: the headline and the groups answer to the width of the pane (container queries), not the window */
.home { flex: 1; min-width: 0; min-height: 0; overflow: auto; container: home / inline-size; }
.home-pane > .home { padding: var(--s4) var(--in); }
.home-in { max-width: 1700px; margin: 0; display: flex; flex-direction: column; padding-bottom: var(--s5); }
@media (min-width: 2400px) { .home-in { max-width: 2000px; } }
.home .frame > .body { overflow: visible; }
.home .lst { min-width: 0; }
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--s7); padding: var(--s4) 0 var(--s7); border-bottom: 1px solid var(--border); }
.hero2 h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4em, 6.2cqw, 4.4em); line-height: round(up, 1em, 4px); letter-spacing: -.02em; margin: 0 0 var(--s4); color: var(--text); }
.hero2 .lede { font-family: var(--text-face); font-size: 1.12em; line-height: var(--s5); color: var(--muted); max-width: 58ch; margin: 0 0 var(--s5); }
.hero2 .trust { font-family: var(--text-face); color: var(--muted); margin: 0 0 var(--s5); }
.hero2 .trust .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: var(--s2); vertical-align: .12em; }
.hero2 a { color: var(--accent); text-decoration: none; }
.hero2 a:hover { text-decoration: underline; }
.hero2 .caps { color: var(--faint); font-size: .8em; letter-spacing: .22em; text-transform: uppercase; }
.hero2 .get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.hero2 .get .code { display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; background: var(--surface); }
.hero2 .get .code code { flex: 1; padding: var(--s1) var(--s3); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.hero2 .get .code code::before { content: "$ "; color: var(--faint); }
.hero2 .get .btn { background: none; border-left: 1px solid var(--border); color: var(--muted); }
.hero2 .get .btn:hover { color: var(--text); }
.hero2 .trust a:hover, .hero2 .get > a:hover { text-decoration: underline; text-underline-offset: .2em; }
#main .hero2 a:not([class]):hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero2 .h2-side { display: grid; justify-items: start; align-content: start; align-self: start; gap: var(--s1); }
.hero2 .h-logo { width: min(100%, 300px); margin: 0; }
.h-logo img { width: 100%; height: auto; display: block; }
:root:not([data-theme="dark"]) .h-logo .dk, :root[data-theme="dark"] .h-logo .lt { display: none; }
/* the numbers: one band of filled cells; the last cell invites authors, lit with a trace of the accent */
.hero2 .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 1px; margin-top: var(--s6); align-items: stretch; }
.hero2 .stats p, .hero2 .stats .add { margin: 0; padding: var(--s4) var(--s4) var(--s3); background: var(--surface); display: grid; align-content: end; gap: var(--s1); transition: background-color .08s, color .08s, box-shadow .08s; }
.hero2 .stats b { font-family: var(--display); font-weight: 800; font-size: 2.6em; line-height: round(up, .9em, 4px); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.hero2 .teal-caps { color: var(--flow); }
.hero2 .stats .teal-caps b, .hero2 .stats .teal-caps .caps { color: var(--flow); }
.hero2 .stats .add { background: var(--tint); text-decoration: none; }
.hero2 .stats .add b { font-family: var(--display); font-weight: 700; font-size: 1.3em; letter-spacing: -.01em; color: var(--accent); line-height: round(up, 1.15em, 4px); }
.hero2 .stats .add:hover { background: color-mix(in srgb, var(--fill) 45%, var(--tint)); text-decoration: none; }
.hero2 .stats .add .caps { color: var(--muted); }
@container home (min-width: 980px) {
  .hero2 { grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); align-items: start; padding-top: var(--s6); }
  .hero2 .h2-side { justify-items: end; text-align: right; }
  .hero2 .h-logo { width: min(100%, 380px); margin-top: var(--s1); }
}
@container home (max-width: 979px) { .hero2 { gap: var(--s5); } .hero2 .h2-side { order: -1; } }
@container home (max-width: 619px) {
  .hero2 .get code { white-space: normal; overflow-wrap: normal; }
  .hero2 .get .code { width: 100%; }
  .hero2 .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero2 .stats p { align-content: start; }
  .hero2 .stats .add { grid-column: 1 / -1; }
  .hero2 .stats p, .hero2 .stats .add { padding: var(--s3) var(--s3) var(--s3); }
  .hero2 .stats b { font-size: 2em; }
  .grp .lst > .lr.hd + .lr { border-top: 0; padding-bottom: var(--s2); }
}
/* a group: a bold title in the text face, a muted line under it */
.grp { margin-top: var(--s7); }
.grp > header { padding-bottom: var(--s4); }
.grp > header h2 { font-family: var(--display); font-weight: 700; font-size: 1.45em; letter-spacing: -.02em; line-height: round(up, 1.2em, 4px); color: var(--text); }
.grp > header span { display: block; font-family: var(--text-face); color: var(--faint); margin-top: var(--s1); }
.grp > header span a { color: var(--accent); text-decoration: none; }
.grp > header span a:hover { text-decoration: underline; text-underline-offset: .2em; }
.grp > .body > .note { margin: var(--s2) 0 0; }
.grp .lst { margin-top: calc(-1 * var(--s1)); }
.grp .lst .lr { padding-inline: 0; }
.grp .lst > .lr.hd { border-top: 0; }
.home .lr { grid-template-columns: minmax(12ch, 1fr) minmax(0, 3fr) minmax(0, 1.4fr) 5ch; padding-block: var(--s2) 7px; }
.home .lr > .ad, .home .lr > .mk, .home .lr > .au { display: none; }
.home .lr .sm { font-family: var(--text-face); }
/* top of the week: up to five, a row of 1 / 2 / 3 by the pane's width; swipe or scroll sideways, or Previous and Next */
.carousel { --per: 1; --cg: 2ch; display: grid; gap: var(--s3); }
@container home (min-width: 620px) { .carousel { --per: 2; } }
@container home (min-width: 1600px) { .carousel { --per: 3; } }
.carousel .track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--cg)) / var(--per)); column-gap: var(--cg); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide { scroll-snap-align: start; min-width: 0; position: relative; }
.carousel .cnav { display: flex; align-items: center; gap: 1px; justify-content: flex-end; }
.carousel .cnav .cpos { padding: 0 var(--s4); color: var(--faint); font-variant-numeric: tabular-nums; min-width: 12ch; text-align: center; }
.carousel .cnav .btn:disabled { opacity: .4; cursor: default; }
.carousel .cnav .btn:disabled:hover { background: var(--surface); color: inherit; }
.carousel.fits .cnav { display: none; }
.carousel .rank { margin-right: var(--s3); color: var(--faint); font-weight: 400; }
/* a card: name and stars over the still, no frame of its own; the name lights on hover */
.home .card { border: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t r" "b b"; gap: 0 var(--s4); margin-top: 0; height: 100%; align-content: start; text-decoration: none; transition: background-color .08s, color .08s, box-shadow .08s; }
.home .card > .t { position: static; transform: none; padding: 0 0 var(--s1); background: none; max-width: none; grid-area: t; color: var(--text); font-weight: 700; font-size: inherit; margin: 0; }
.home .card > .t.r { grid-area: r; color: var(--faint); font-weight: 400; display: block; }
.home .card:hover > .t:not(.r) { color: var(--accent); }
.home .card > .body { grid-area: b; padding: 0; display: flex; flex-direction: column; gap: var(--s2); overflow: visible; }
.home .card .still-box { border: 0; margin: 0 0 var(--s2); aspect-ratio: 120 / 33; overflow: hidden; transition: filter .12s, opacity .12s; }
.home .card:hover .still-box { filter: brightness(1.18); }
.home .card .noshot { transition: filter .12s, opacity .12s; }
.home .card:hover .noshot { background: var(--hov-fill); }
.home .card:hover .noshot .gl { opacity: .55; }
.home .card .body > span:first-of-type, .home .card .still-box + span { font-family: var(--text-face); font-size: 1.04em; line-height: round(up, 1.5em, 4px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .card .meta { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: .95em; }

/* very wide screens: the window keeps to the left edge; the rest is the space drawn by space.js */
@media (min-width: 1960px) {
  body { background: var(--desk); }
  #win { max-width: var(--cap); margin: 0; background: var(--ground); box-shadow: 1px 0 0 var(--border); position: relative; z-index: 1; }
  #space { display: block; position: fixed; top: 0; bottom: 0; left: var(--cap); right: 0; width: calc(100vw - var(--cap)); height: 100vh; pointer-events: none; }
}

/* the search field in the top bar: it widens over the page and lists what it finds under itself */
#tq { position: relative; flex: 0 1 46ch; min-width: 0; margin-right: auto; transition: flex-basis .18s ease; }
#tq.on { flex-basis: 100%; }
.tqf { display: flex; align-items: center; gap: var(--s2); height: 2em; padding: 0 var(--s2); background: var(--surface); color: var(--faint); cursor: text; transition: background-color .18s, box-shadow .18s; }
.tqf:hover { background: var(--hov-fill); }
#tq.on .tqf { background: var(--ground); box-shadow: inset 0 0 0 1px var(--focus); color: var(--accent); }
.tqf input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
.tqf input::placeholder { color: var(--muted); }
#tqList { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; max-height: min(70vh, 34em); overflow: auto; padding: var(--s1) 0 var(--s2); background: var(--ground); border: 1px solid var(--focus); }
#tqList .gh { padding: var(--s2) var(--s2) var(--s1) var(--s5); color: var(--faint); font-size: .9em; }
#tqList .it { display: grid; grid-template-columns: minmax(14ch, 30ch) minmax(0, 1fr); gap: var(--s4); padding: var(--s1) var(--s2) var(--s1) var(--s5); text-decoration: none; color: var(--text); }
#tqList .it .s { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tqList .it:hover, #tqList .it.on { background: var(--hov); }
#tqList .it.on .l, #tqList .it:hover .l { color: var(--accent); }
#main, #tree { transition: opacity .18s; }
body.tq-on #main, body.tq-on #tree { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  #tq, .tqf, #main, #tree, .btn, .ptabs a, .lr, .wr, .tile, .rel-i, .tr, .home .card, .hero2 .stats .add { transition: none; }
}

/* phone: the bar is a grid with the logo, Get nerd and the menu on the first row and the search on the second;
   the menu drops down under the bar, drawn as the search results are; the status line holds only the theme switch */
@media (max-width: 860px) {
  #win { display: block; height: auto; padding-bottom: calc(var(--status) + 1px + var(--s4)); }
  #bar { position: sticky; top: 0; z-index: 10; background: var(--ground); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 8px; padding: var(--s2) var(--gut); }
  .brand { grid-column: 1; grid-row: 1; }
  #tq { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; transition: none; }
  #tqList { position: fixed; left: 16px; right: 16px; top: auto; max-height: 60vh; }
  #tqList .it { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--s2); }
  #tqList .it .s { font-size: .92em; }
  #drawerBtn { grid-column: 3; grid-row: 1; position: relative; display: grid; place-items: center; width: 26px; height: 26px; align-self: center; font-size: 0; padding: 0; background: var(--surface); color: var(--muted); }
  #drawerBtn::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(13px * .62); height: calc(13px * .56); background: linear-gradient(currentColor 0 0) 0 0 / 100% 1px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; }
  #drawerBtn:hover { background: var(--hov-fill); color: var(--text); }
  #drawerBtn[aria-expanded="true"] { color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--focus); }
  #drawerBtn[aria-expanded="true"]::before { height: calc(13px * .62); background: linear-gradient(45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)); }
  #main { display: block; padding: 0 var(--gut) var(--s4); }
  #tree { position: fixed; z-index: 60; top: 0; left: 0; width: min(88vw, 40ch); max-height: min(70vh, 34em); margin: 0; padding: var(--s1) 0 var(--s2); overflow: auto; display: none; background: var(--ground); border: 1px solid var(--focus); }
  body.drawer #tree { display: block; }
  body.drawer #main { opacity: .35; }
  #tree > .t { display: none; }
  #tree .body { padding: 0; overflow: visible; }
  #tree .sec { margin: 0; }
  #tree .sec > .h { padding: var(--s2) var(--s2) var(--s1) var(--s5); line-height: var(--lh); color: var(--faint); font-size: .9em; cursor: default; pointer-events: none; }
  #tree .sec > .h > span:first-child, #tree .sec > .h::after { display: none; }
  #tree .tr { padding: var(--s1) var(--s2) var(--s1) var(--s5); line-height: var(--lh); }
  #tree .tr .g { display: none; }
  #tree .tr:hover, #tree .tr.on, #tree .tr.on:hover { background: var(--hov); color: var(--accent); }
  .page { display: block; }
  .col { overflow: visible; }
  .frame > .body { overflow: visible; }
  .home { overflow: visible; }
  .lr { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s3); padding: var(--s2) 0 7px; }
  .lr.hd { display: none; }
  .lr > .sm { grid-column: 1 / -1; white-space: normal; order: 3; }
  .lr > .ad, .lr > .au { display: none; }
  .lr > .mk { order: 1; }
  .lr > .rk { grid-column: 1 / -1; order: 2; }
  .lr > .st { grid-column: 1 / -1; order: 4; color: var(--muted); }
  .lr > .st::before { content: "stars "; }
  .lr .num { text-align: left; }
  dl.facts { grid-template-columns: 13ch minmax(0, 1fr); }
  .two, .cells { grid-template-columns: 1fr; }
  #status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ground); height: calc(var(--status) + 1px); padding: 0; justify-content: center; }
  .theme { margin-left: 0; border-left: 0; font-size: 11.5px; padding: var(--s1) var(--s2); }
}
@media (max-width: 340px) { #bar { column-gap: 6px; } }
.relsel.one { display: none; }