/* ImpromptBrü home — page styles. Shared by index.html (the standalone preview) and ImpromptbruHome.dc.html (the template entry), so the two cannot drift. Tokens come from ../../styles.css; the sub-brand layer switches on via . RULES HELD HERE, because they are what makes the Astro port cheap: 1. Every value is a custom property from the design system. No hex literals. 2. Every rule is a class on markup Site.jsx renders, so each block becomes a .astro partial with the same class names and no CSS rewrite. 3. Nothing is styled off a JS-set attribute except html[data-theme] (theme.js). 4. Zero layout depends on JavaScript running. */ *,*::before,*::after{box-sizing:border-box} html{background:var(--color-bg-page)} body{margin:0} .page{min-height:100vh;background:var(--color-bg-page);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-6)} :root{--wrap:920px} /* THE NOTES INDEX RUNS NARROWER THAN THE HOME PAGE. Its whole body is one column of short rows, and at 920 the row's three parts drift apart until the date on the right stops belonging to the title on the left. 820 pulls them back into one object without touching the pages whose content is wide by nature. The header comes with it, so the page keeps a single edge. The header and footer are outside this scope on purpose: site chrome is the same width everywhere. */ .pagenotes main .wrap{--wrap:820px} /* Links, defined once, so anything Chris adds later inherits the accent instead of browser blue. Jade-ink is the only jade that may carry a word. :not([class]) is load-bearing. Without it this rule is (0,1,1) and outranks every single-class component rule in this file on SPECIFICITY, not order, so .navlink, .gbtn and .chip all silently rendered jade and the graph button's label vanished on its own jade fill. Scoping it to unclassed links means prose links get the accent and every component keeps the colour it declares. */ .page a:not([class]){color:var(--color-text-accent);text-decoration-color:color-mix(in oklab,var(--color-text-accent) 40%,transparent);text-underline-offset:3px} .page a:not([class]):hover{color:var(--color-accent-hover);text-decoration-color:currentColor} .page ::selection{background:var(--color-accent);color:var(--color-on-accent)} .page a:focus-visible,.page button:focus-visible{outline:2px solid var(--color-ring);outline-offset:3px;border-radius:var(--radius-sm)} .mono{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- header ---------- Row 1 is identity + the theme control. Row 2 is the whole site nav, which becomes a horizontal rail below 760px from the same markup. */ .hdr{position:sticky;top:0;z-index:20;background:var(--color-bg-page);border-bottom:var(--border-hair) solid var(--color-border)} .hdrin{display:flex;align-items:center;gap:var(--space-4);padding-top:var(--space-3);padding-bottom:var(--space-3);flex-wrap:wrap} .brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:inherit;flex:none} .brand:hover{color:inherit} .wordmark{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-lg);letter-spacing:-.025em;color:var(--color-heading);line-height:1} /* The wordmark stands alone in the header. The short tagline used to sit beside it, which put "ideas as they brew" three times on one page (header, masthead, footer). Twice is the deal: the long form at the top for a stranger, the short form in the footer for whoever read that far. .brandtag is kept as a class because other pages in this property may want it where there is no masthead tagline above the fold. */ .brandtag{display:none} .navwrap{display:contents} .mainnav{display:flex;align-items:center;gap:var(--space-5);margin-left:auto} .navlink{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap} .navlink:hover,.navlink[aria-current="page"]{color:var(--color-heading);text-decoration:none} .navlink[aria-current="page"]{border-bottom-color:var(--color-accent)} .navutil{display:flex;align-items:center;gap:var(--space-4);padding-left:var(--space-4);border-left:var(--border-hair) solid var(--color-border)} /* Notebook / Topics: one destination, two entrances. Tight gap plus a hairline slash so the pair reads as a single nav slot against the --space-5 rhythm between real destinations. */ .navpair{display:flex;align-items:center;gap:8px} .navpairsep{color:var(--color-border);font-size:var(--text-sm);line-height:1;user-select:none} .navutil .navlink{display:inline-flex;align-items:center;gap:6px} /* The theme trio. theme.js owns aria-pressed; CSS owns every pixel of the look. The selected ink is --color-on-accent, NOT the parent's hardcoded violet: jade is a dark fill on light and a light fill on night, so only the token gets both right. */ .themeset{display:flex;align-items:center;gap:2px;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-pill);padding:2px;flex:none} [data-theme-set]{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:26px;padding:0 7px;border:none;border-radius:var(--radius-pill);background:none;color:var(--color-text-muted);cursor:pointer;font:inherit} [data-theme-set]:hover{color:var(--color-heading)} [data-theme-set][aria-pressed="true"]{background:var(--color-accent);color:var(--color-on-accent)} [data-theme-set] .mono{font-size:9px} /* ---------- section scaffolding ---------- */ /* Padding is set per-EDGE here on purpose: .sec and .mast also carry .wrap, and a shorthand `padding:` in either one would silently null .wrap's gutters. */ .sec{padding-top:var(--space-7)} .shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap} .more{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-accent);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .more:hover{text-decoration:underline;text-underline-offset:3px} .h2{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-xl);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-heading);margin:0} /* ---------- 1. masthead ---------- Deliberately thin: the mark, the long tagline, one note, one byline. The mark is 64px here because that is the only size where the ü is fully drawn — the header runs it at 26 (small cut) and the footer at 22 (flood). */ .mast{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:start;padding-top:var(--space-7);padding-bottom:var(--space-6)} .masth{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:clamp(1.7rem,7.2vw,var(--text-3xl));letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-heading);margin:0 0 var(--space-3);text-wrap:balance} .mastp{margin:0 0 var(--space-4);max-width:56ch;color:var(--color-text-lead);font-size:var(--text-lg);line-height:var(--leading-relaxed);text-wrap:pretty} .byline{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);max-width:68ch;text-wrap:pretty} .byline b{color:var(--color-text);font-weight:var(--weight-semibold)} /* THE WELCOME BLOCK. "New here?" lands before the name on purpose: a first-time reader wants a way in, and only then cares whose notebook this is. It was a washed, rimmed, uppercase-labelled callout for one revision and shouted — two quiet lines under a hairline say the same thing, so the only decoration left is the rule. No fill, no rim, no mono label. */ .hello{margin:var(--space-4) 0 0;max-width:68ch;padding-top:var(--space-3);border-top:var(--border-hair) solid var(--color-border-subtle)} .hello .byline{margin:0;max-width:none} /* The one green word on the page. Jade-INK, not jade — see the link rule at the top of this file: it is the only jade that may carry a word. It also carries the only bold in the line: the name that follows stays plain, because two weights back to back read as two headings. Both rules are scoped to .hello .byline b so they beat .byline b (0,1,1) on specificity rather than order, and :not(.newhere) keeps the de-bold off the green word — without it the flatten rule outranks the accent and the line renders with no bold at all. */ .hello .byline b.newhere{color:var(--color-stage-ink);font-weight:var(--weight-semibold)} .hello .byline b:not(.newhere){font-weight:var(--weight-regular);color:inherit} /* ---------- the activity timeline ---------- Full width UNDER the stream: the three rows answer "what is newest" and the strip answers the question they cannot — how often anything happens here — so it reads as the summary of the list rather than a chart the list is filed under. ONE COLUMN PER ISO WEEK, 52 of them, each column two stacked segments: edits on top in the jade wash, entries STARTED at the base in solid jade fill. Starting a note is the rarer event, so it sits on the baseline where it can be seen at 2px; floated on top it would be a speck. Columns are flex:1 rather than a fixed width, so the strip is exactly as wide as the column at every breakpoint. The whole thing is decorative in the accessibility tree: .tlsum carries the same information in a sentence, which is more useful read aloud than 52 numbers. */ /* NO KEY. Each channel is named where it is drawn — a mono label in the gutter, the line's own jade — so nothing has to be matched back to a swatch. The counts ride the labels, which is why the caption is four words. */ .tl{margin:var(--space-4) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);align-items:end} .tllab{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-stage-ink);white-space:nowrap;padding-bottom:3px} .tllab.st{align-self:start;padding:1px 0 0} .tlplot{position:relative;height:64px;border-bottom:var(--border-hair) solid var(--color-border)} .tlsvg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} .tlridge{fill:none;stroke:var(--color-stage-rim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* Month boundaries as hairlines INSIDE the plot rather than only under it: they are what turns a shape into a reading, and the labels below then only have to name what the ridge already divides. */ .tlt{stroke:var(--color-border-subtle);stroke-width:1;vector-effect:non-scaling-stroke} /* NOTHING IN THIS CHART IS A FILLED SHAPE. A filled vessel already means brew stage everywhere else on the site, and a chart that reuses the fill for volume teaches a reader the wrong word. So: edit volume is a LINE, unfilled, and a week that saw something start is a TICK below the axis — a register the marker vocabulary does not occupy, and lines carry no stage meaning at any length. The tick steps at one, two, three-or-more, which is all the resolution a strip this size can show honestly. */ .tlmarks{height:11px;display:flex;align-items:flex-start;gap:2px} .tlw{flex:1;min-width:0;display:flex;justify-content:center} .tlm{width:1.5px;height:4px;border-radius:1px;background:var(--color-stage-rim)} .tlm[data-n="2"]{height:7px} .tlm[data-n="3"]{height:11px} .tlmonths{grid-column:2;display:flex;gap:2px;margin-top:7px} .tlmonths span{min-width:0;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint);overflow:hidden;white-space:nowrap} .tlsum{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-2) 0 0;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint)} /* ---------- 2. the stream ---------- ONE list, not two shuffled together: every row has the same three columns and the same title size, so the eye reads a single stream. The typing is carried by the gutter mark (shape + ink) and by the first word of the meta line, never by a differently-shaped row. */ .stream{list-style:none;margin:0;padding:0;border-top:var(--border-hair) solid var(--color-rule)} .srow{border-bottom:var(--border-hair) solid var(--color-rule)} .srowa{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:var(--space-3);align-items:start;min-height:53px;padding:7px var(--space-2);margin:0 calc(-1 * var(--space-2));text-decoration:none;color:inherit;border-radius:var(--radius-sm);transition:background 120ms ease} .srowa:hover{background:var(--color-bg-surface-raised);color:inherit;text-decoration:none} .stline{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px} /* Read time, parked beside the title and revealed on hover or focus. Opacity rather than display so the row never reflows under the pointer, and mono micro so it reads as an instrument and not as part of the sentence the title is making. */ .sread{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap;opacity:0;transition:opacity .1s linear} .srowa:hover .sread,.srowa:focus-visible .sread{opacity:1} /* THE RELATIONSHIP, beside the title on the same hover terms as the read time, and a step smaller because it qualifies the row rather than describing it. Opacity rather than display, so it holds its space (no reflow on hover) and stays in the accessibility tree: a screen reader still reads "points here" whether or not a pointer ever arrives. */ .sdir{font-family:var(--font-mono);font-size:calc(var(--text-2xs) * .9);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap;opacity:0;transition:opacity .1s linear} .srowa:hover .sdir,.srowa:focus-visible .sdir{opacity:1} /* A TOUCH DEVICE NEVER HOVERS, so hiding it there hides it for good. On a coarse pointer both hints simply stay on. */ @media (hover:none){.sdir,.sread{opacity:1}} .stitle{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.35;color:var(--color-heading);letter-spacing:-.01em;text-wrap:pretty} .srowa:hover .stitle{text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:1.5px;text-underline-offset:3px} .smeta{display:block;margin-top:3px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint);line-height:1.5} .smeta .sep{opacity:.55;padding:0 5px} /* The edited stamp: pencil + a written-out relative age, and nothing when the last edit is more than thirty days old. */ .sedit{display:inline-flex;align-items:center;gap:4px} .sedit svg{opacity:.75;position:relative;top:-.5px} .mstage{color:var(--color-stage-ink)} .swhen{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap;padding-top:2px} /* A calendar glyph so the right-hand date reads as the day the thing was made rather than as another recency signal \u2014 the pencil on the meta line is the recent one. */ .swhen svg{opacity:.7;position:relative;top:-.5px} /* THE MARKER NAMES ITSELF ON HOVER. Kind and stage are not written in the meta line any more, so the marker has to be able to say them. A CSS tooltip rather than a title attribute: the native one waits about a second before it appears, which for a 12px target reads as nothing happening. The tooltip hangs off the ROW, not off the marker: the post marker is a rotated square and a child of it inherits the rotation. Left-aligned to the marker rather than centred on it, so it opens into the column instead of off the page edge. Sighted-hover only; the same words are in the marker's .sr text for everyone else. */ .srowa[data-tip]{position:relative} .srowa[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:8px;transform:translateY(-100%);z-index:5;padding:3px 7px;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-surface-raised);box-shadow:var(--shadow-card);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .08s linear} .srowa[data-tip]:has(.mk:hover)::after,.srowa[data-tip]:focus-visible::after{opacity:1;visibility:visible} .streamnote{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--color-text-faint);max-width:70ch;text-wrap:pretty} /* ---------- the bench (the NOTES INDEX, notebook.html) ---------- The notes index's stream sits in an instrument rather than on the page. Two knobs (type, brew stage), a sort, and the rows. A lab bench because that is already this property's metaphor, and because the brew stage was always a level meter: the stage knob is the three vessels themselves, at the size a row uses them. It was on the home page first and it was too much there. A home page introduces the place; controls belong on the page whose job is finding something. ZERO JAVASCRIPT. Native radios plus :has(). The filter is CSS, so it works with JS off, it ports to Astro as plain HTML, and it needs no hydration. :has() has been baseline in every evergreen browser since 2023. The hooks are the inputs' CLASS and VALUE, never their id. Ids have to be unique per instance, and the kit sheet puts four benches on one page; keyed on value, every rule is scoped by the :has() to its own .bench and the widget can repeat. */ .bench{border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface-raised);overflow:hidden} /* The control channel is the PAGE paper inside a RAISED plate, so it reads as a recessed strip in both themes without inventing a colour for it. */ .benchctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-bg-page);border-bottom:var(--border-hair) solid var(--color-border)} /* Search sits in the bench channel on a ROW OF ITS OWN, under the knobs. It is the one control that can reach anything rather than narrow what is shown, and at the head of the channel it was competing with the knobs for the same glance; full width under them, it reads as the way in rather than as a fourth filter. A FORM, not a bare input: with JS off it submits to /notes?q=, and Pagefind intercepts it when JS is on, so the control is never dead. */ .bsearch{display:flex;align-items:center;gap:6px;flex:1 1 320px;min-width:0;margin-top:var(--space-1);padding:4px 11px;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-bg-surface-raised);color:var(--color-text-faint)} .bsearch:focus-within{border-color:var(--color-stage-rim);outline:2px solid var(--color-ring);outline-offset:2px} .bsearch input{flex:1;min-width:0;border:0;padding:0;background:none;font-family:inherit;font-size:var(--text-sm);color:var(--color-text);outline:none;-webkit-appearance:none;appearance:none} .bsearch input::placeholder{color:var(--color-text-faint);opacity:1} .bsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} /* Four Shown chips instead of three: the channel gives back the millimetres from the chip padding and the gaps rather than from the labels, so the three knobs still hold ONE LINE at 920. */ .knob{display:flex;align-items:center;gap:5px;flex:none} .knoblab{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint)} /* A track never breaks internally on desktop: the channel wraps whole controls instead, so "Notes" can never end up on a line of its own under its own group. Below 760 the knobs stack in a column with full width and wrapping is fine again. */ .track{position:relative;display:flex;flex-wrap:nowrap;gap:2px;padding:2px;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-bg-surface-raised)} .track input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .track label{display:inline-flex;align-items:center;gap:4px;padding:4px 5px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-muted);cursor:pointer;white-space:nowrap;transition:background 110ms ease,color 110ms ease} /* The Shown track carries four words and the sort rail three more, so the chips in the channel run tighter than a chip elsewhere: 4px of side padding and .03em of tracking, which is what buys SORT its label back and still holds one line at 920. */ .knob .track label{letter-spacing:.03em;gap:3px;padding-left:4px;padding-right:4px} .track label:hover{color:var(--color-heading)} .track input:checked+label{background:var(--color-stage-wash);color:var(--color-text-accent-on-peach)} .track input:focus-visible+label{outline:2px solid var(--color-ring);outline-offset:2px} /* ALL THREE ON is the default and the resting state. The track keeps its ordinary grey field; what changes is that the three lit chips CLOSE UP into one continuous jade pill inside it — the gap goes to zero and only the outer corners stay round. Deselect any one and the field breaks back into separate chips, which is the moment the control starts saying something. */ .track:has(.k-type[value="topic"]:checked):has(.k-type[value="mine"]:checked):has(.k-type[value="inspired"]:checked):has(.k-type[value="stub"]:checked), .track:has(.k-stage[value="steeping"]:checked):has(.k-stage[value="brewing"]:checked):has(.k-stage[value="poured"]:checked){gap:0} .track:has(.k-type[value="topic"]:checked):has(.k-type[value="mine"]:checked):has(.k-type[value="inspired"]:checked):has(.k-type[value="stub"]:checked) label, .track:has(.k-stage[value="steeping"]:checked):has(.k-stage[value="brewing"]:checked):has(.k-stage[value="poured"]:checked) label{border-radius:0} .track:has(.k-type[value="topic"]:checked):has(.k-type[value="mine"]:checked):has(.k-type[value="inspired"]:checked):has(.k-type[value="stub"]:checked) .k-type:first-of-type+label, .track:has(.k-stage[value="steeping"]:checked):has(.k-stage[value="brewing"]:checked):has(.k-stage[value="poured"]:checked) .k-stage:first-of-type+label{border-radius:var(--radius-pill) 0 0 var(--radius-pill)} .track:has(.k-type[value="topic"]:checked):has(.k-type[value="mine"]:checked):has(.k-type[value="inspired"]:checked):has(.k-type[value="stub"]:checked) .k-type:last-of-type+label, .track:has(.k-stage[value="steeping"]:checked):has(.k-stage[value="brewing"]:checked):has(.k-stage[value="poured"]:checked) .k-stage:last-of-type+label{border-radius:0 var(--radius-pill) var(--radius-pill) 0} /* NOTHING checked shows everything, so it must LOOK like everything. With bench.js running this state is unreachable — turning off your last chip returns the whole track — so what follows is the no-JS fallback, and it keeps the plain checkboxes honest. Turning the last chip off lights all of them instead of leaving an empty track that contradicts the list under it. The inputs stay unchecked — the next click is then "only this one", which is what a reader who just emptied the track is reaching for. */ .track:has(.k-type):not(:has(.k-type:checked)) label, .track:has(.k-stage):not(:has(.k-stage:checked)) label{background:var(--color-stage-wash);color:var(--color-text-accent-on-peach);border-radius:0} .track:has(.k-type):not(:has(.k-type:checked)), .track:has(.k-stage):not(:has(.k-stage:checked)){gap:0} .track:has(.k-type):not(:has(.k-type:checked)) .k-type:first-of-type+label, .track:has(.k-stage):not(:has(.k-stage:checked)) .k-stage:first-of-type+label{border-radius:var(--radius-pill) 0 0 var(--radius-pill)} .track:has(.k-type):not(:has(.k-type:checked)) .k-type:last-of-type+label, .track:has(.k-stage):not(:has(.k-stage:checked)) .k-stage:last-of-type+label{border-radius:0 var(--radius-pill) var(--radius-pill) 0} .benchbody{padding:0 var(--space-4) var(--space-1)} .benchbody .stream{border-top:none} /* SORT, and no JavaScript for it either. The stream becomes a flex column so every row can take an `order`, and each row carries all four ranks as custom properties written at build time; the checked radio only chooses WHICH one feeds `order`. Direction is column-reverse rather than a second set of ranks, because every row rules on its bottom edge and reads the same either way up. */ .benchbody .stream{display:var(--bench-stream,flex);flex-direction:column} .bench:has(.k-dir:checked) .benchbody .stream{flex-direction:column-reverse} .bench:has(.k-sort[value="abc"]:checked) .srow{order:var(--o-abc)} .bench:has(.k-sort[value="created"]:checked) .srow{order:var(--o-created)} .bench:has(.k-sort[value="edited"]:checked) .srow{order:var(--o-edited)} /* All three controls hold ONE line at 920 and that is a hard constraint, not a preference: the moment sort drops to a second row the bench reads as two instruments. It is bought with chip padding, not with shorter words. */ /* Sort is ONE control: four keys and, at the end of the same track, a single chip that flips the direction. A pair of A-Z / Z-A radios said the same thing in three times the width and read as a second decision; an arrow that points the way the list runs is the whole idea, and it fits on the control line. The chip does not take the checked fill — it is a button that flips, not an option that is on — and it carries the sort-direction glyph (bars plus an arrow) rather than a bare arrow, which on its own reads as "move" rather than "order". .benchbreak is an explicit row break rather than a hope about wrapping: at any width the search starts a new line. */ .knob-sort{gap:var(--space-2)} .benchbreak{flex:0 0 100%;height:0} /* The knobs sit in a
only so the reset can be native; display:contents keeps them as direct flex children of the channel. The reset itself is associated by form= rather than by nesting, which lets it sit on the search row where there is room — putting it on the control line would break the one-line rule above. It is ABSENT at the defaults, because a reset that does nothing is furniture. */ .benchform{display:contents} .breset{display:none;flex:none;align-self:center;padding:5px 11px;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-bg-surface);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-muted);cursor:pointer} .breset:hover{border-color:var(--color-stage-rim);color:var(--color-heading)} /* The press has to be felt, because the chip's own answer is to VANISH: reset puts the bench back to its defaults and the rule below stops matching. Lighting the chip while the button is down is the whole acknowledgement — an after-the-click flash would play on an element that is already gone. */ .breset:active{background:var(--color-stage-wash);border-color:var(--color-stage-rim);color:var(--color-text-accent-on-peach);transform:translateY(1px)} .bench:has(.k-type:not(:checked)) .breset, .bench:has(.k-stage:not(:checked)) .breset, .bench:has(.k-sort:not([value="created"]):checked) .breset, .bench:has(.k-dir:not(:checked)) .breset{display:inline-flex} /* The sort keys are radios in a track, exactly like the two filter tracks: same chip, same lit state, same focus ring. They were a