/* =========================================================================== ELECTRICITY Rebuilt 2026-09-05 after the first version was rejected outright — "there is nothing in your design that says electricity. Total fail." — and then rebuilt again the same hour, after two corrections from the maintainer that were both right and both went to the root of it: 1. "Most of our themes are about cliches so I don't understand why the lightning-bolt cliche was deemed undesirable in this particular case. Themes ARE cliches." 2. "The theme is electricity, NOT electricity when it was just invented; it's about electricity, not a fucking period piece." Both corrections killed a rule I had imported from somewhere it did not belong. Avoiding cliche is advice for original work made for one client; a theme in a picker is a COSTUME, and its whole job is to be recognised in a glance. Matrix is green rain. Halloween is orange and spooky. The bolt is not beneath this theme — the bolt IS this theme. And the subject is electricity itself, not the decade it was commercialised in, so there is no slate, no brass, no Victorian slab and no sepia anywhere below. WHAT ELECTRICITY LOOKS LIKE, which is the entire design: IT EMITS. That is the one thing it does that no other material does, and nothing in the first version glowed. A glow is not a colour, it is a RAMP: a white-hot core, a saturated body, and a halo bleeding onto whatever is near it. Anything here that is meant to be live shows all three or it reads as a coloured thing rather than a lit one. IT IS TWO COLOURS. An arc is blue-white with a violet fringe — a spark plug, a Tesla coil, lightning against a night sky. High tension is signed in YELLOW, black-on-yellow, the most recognisable warning mark there is. So: ARC is the light (focus, energised state, the glow itself) and VOLT is the action (links, buttons, the page you are on). Dark mode is the strike at night; light mode is the hazard plate in daylight. IT STRIKES IN A LINE. The bolt runs the width of the topbar as a real discharge trace — jagged, branching, brightest in the middle, dying out at both ends. It is drawn as a mask so its colour comes from a token, and it is the first thing on the page. THE DISCIPLINE, and the only reason this is usable for work: THE CHROME AND THE CONTROLS ARE LIVE; THE READING PATH IS NOT. No table cell glows, no body text glows. Nobody reads 394 rows on a page where everything shines. Every glow here is box-shadow, text-shadow, mask or gradient — additive light, which changes no computed contrast, so the ratios below stand as measured. Structure lives in chrome.css; this file is colour, type and light. The voice is `arc` in public/js/uiSound.js. The plan, the research and the one device that was cut before a line was written are in docs/design-electricity.md. =========================================================================== */ :root[data-palette="electricity"] { /* ---- The hazard plate in daylight. Cool, charged, faintly blue. ---- */ --el-panel: #e8edf3; /* the page ground */ --el-surface: #f6f9fc; /* cards, table field */ --el-surface-2: #dce4ee; /* the striped row — ratios are checked on THIS */ --el-ink: #0f1319; --el-ink-2: #38414c; --el-ink-3: #525c68; --el-rule: #ccd5e0; --el-rule-firm: #a8b3c1; /* VOLT. On a pale ground the sign yellow cannot be text — it measures about 1.6:1 — so on daylight it does what it does on a real high-tension plate: it becomes the FILL, with near-black on it. That is not a compromise, it is the more recognisable half of the mark. Link text drops to the deep end of the same hue so the family holds. Same lesson as the base theme's teal and Apple's blue — the ink is the lever, not the accent. */ --el-volt: #ffd21e; /* the plate — fills, never small text */ --el-volt-ink: #1550c8; /* the arc as text — see the dark block */ --el-volt-deep: #0f3b96; --el-volt-soft: rgba(122, 86, 0, 0.13); --el-on-volt: #14100a; /* black on yellow: 13.9:1 */ /* ARC. Violet-blue in daylight so it stays clearly apart from link text, which is the other blue on the page. */ --el-arc: #4a2fd6; --el-arc-soft: rgba(74, 47, 214, 0.16); --el-arc-halo: rgba(74, 47, 214, 0.32); --el-arc-violet: rgba(120, 60, 230, 0.34); /* EMISSION. A white-hot core is invisible on a pale ground, so the light variant runs the same ramp shifted down: saturation and a coloured cast shadow do the work brightness does in the dark. Different mechanism, same idea. */ --el-core: #2b6ad6; --el-busbar: #14337a; /* the conductor under the topbar, on a pale ground */ --el-bloom: rgba(30, 90, 200, 0.28); --el-bloom-hot: rgba(20, 80, 190, 0.42); --el-volt-bloom: rgba(200, 150, 0, 0.45); --el-lamp-top: #ffe066; --el-lamp-mid: #ffd21e; --el-lamp-base: #e0a800; --el-lamp-gloss: rgba(255, 252, 235, 0.75); /* The bolt trace, and the arc's own line weight. */ --el-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* SAIRA, replacing Zilla Slab. Zilla was chosen for a period that this theme no longer has: a Clarendon slab says 1890s trade catalogue, which is exactly the framing the maintainer struck out. Saira is a technical grotesque with squared-off corners and a lot of tension at heavy weights — the lettering of a rating plate and a warning label, which is where the word ELECTRICITY actually appears in the world. Headings only; 394 rows of table data is not the place for character. Fetched only when this theme is selected (the `font` field on its registry entry). */ --heading-font-family: "Saira", "Archivo Narrow", Inter, system-ui, sans-serif; /* The sidebar is dark in BOTH variants (the base app's own rule), so its light has to be the DARK ramp whichever variant is on — otherwise the lamp on the rail goes flat the moment somebody picks light mode. Declared once, here, and never overridden below. */ --el-sb-core: #cfeaff; --el-sb-bloom: rgba(120, 190, 255, 0.42); --el-sb-bloom-hot: rgba(180, 225, 255, 0.72); --el-sb-volt: #ffd21e; --el-sb-volt-glow: rgba(255, 210, 30, 0.50); --el-sb-rail: rgba(120, 150, 190, 0.26); /* ---- Pico surface + ink ---- */ --pico-background-color: var(--el-panel); --pico-color: var(--el-ink); --pico-h1-color: var(--el-ink); --pico-h2-color: var(--el-ink); --pico-h3-color: var(--el-ink); --pico-h4-color: var(--el-ink); --pico-h5-color: var(--el-ink); --pico-h6-color: var(--el-ink); --pico-muted-color: var(--el-ink-3); --pico-muted-border-color: var(--el-rule); --pico-border-color: var(--el-rule-firm); --pico-table-border-color: var(--el-rule); --pico-table-row-stripped-background-color: var(--el-surface-2); --pico-card-background-color: var(--el-surface); --pico-card-border-color: var(--el-rule); --pico-card-sectioning-background-color: var(--el-surface); --pico-code-background-color: var(--el-surface-2); --pico-code-color: var(--el-ink-2); --pico-blockquote-border-color: var(--el-volt); --pico-border-radius: 0.15rem; /* hard corners. Nothing about a discharge is soft. */ /* ---- Volt is the action colour ---- */ --pico-primary: var(--el-volt-ink); --pico-primary-background: var(--el-volt); --pico-primary-hover: var(--el-volt-deep); --pico-primary-hover-background: #ffdd4d; --pico-primary-underline: rgba(21, 80, 200, 0.38); --pico-primary-focus: var(--el-arc-halo); --pico-primary-inverse: var(--el-on-volt); --pico-secondary: var(--el-ink-2); --pico-secondary-background: var(--el-ink-2); --pico-secondary-hover: var(--el-ink); --pico-secondary-hover-background: var(--el-ink); --pico-secondary-focus: rgba(56, 65, 76, 0.25); --pico-secondary-inverse: #ffffff; --pico-mark-background-color: #ffe89a; --pico-mark-color: #4d3800; /* ---- Forms: the field you are in is arc-lit ---- */ --pico-form-element-background-color: var(--el-surface); --pico-form-element-border-color: var(--el-rule-firm); --pico-form-element-color: var(--el-ink); --pico-form-element-placeholder-color: var(--el-ink-3); --pico-form-element-active-background-color: #ffffff; --pico-form-element-active-border-color: var(--el-arc); --pico-form-element-focus-color: var(--el-arc); --pico-form-element-selected-background-color: var(--el-arc-soft); --pico-switch-background-color: var(--el-rule-firm); --pico-switch-checked-background-color: var(--el-volt); --pico-range-thumb-color: var(--el-volt-ink); --pico-dropdown-background-color: var(--el-surface); --pico-dropdown-border-color: var(--el-rule); --pico-dropdown-hover-background-color: var(--el-surface-2); --scroll-shadow-color: rgba(15, 19, 25, 0.28); /* ---- The sidebar: the dark panel the board is wired to ---- */ --sidebar-bg: #0b0f16; --sidebar-ink: #eef3f9; --sidebar-muted: #8996a7; --sidebar-link: #c2ccd9; --sidebar-link-active: #ffffff; --sidebar-hover-bg: #151d29; --sidebar-active-bg: #1b2537; --theme-sound: 1; --theme-voice: arc; /* ---- THE SEMANTIC TIERS (2026-09-05) ----------------------------------- These used to be seven .status-* rules written out three times over. They are tokens now, and that is the whole point: the app's styles.css reads them for the status chips AND for the flash banner, the error banner, the audit flag, the import outcome/state badges, the errored-row tint and the filter chips — families this theme could not reach before, because reaching one meant restating three cascade blocks per selector. Measured 2026-09-05 across all seven themes: this theme's flash banner, audit flag and import badges were wearing SCP brand teal and amber in the middle of an arc-blue palette. Every value below is unchanged from the chip it came from; only its reach is new. Lamp order is preserved — green pilot, amber caution, blue fault, with the two reds beyond it — and the contrast note further down still describes these exact pairs. */ --sem-good-bg: #d6ecd4; --sem-good-fg: #1c5420; --sem-caution-bg: #f8e6bf; --sem-caution-fg: #6b4a05; --sem-bad-bg: #d9e2fa; --sem-bad-fg: #25408f; --sem-inactive-bg: #fadcd6; --sem-inactive-fg: #8e3320; --sem-alarm-bg: #f6c4b8; --sem-alarm-fg: #752313; --sem-neutral-bg: #dee1e3; --sem-neutral-fg: #3c4448; --sem-archived-bg: #ece3cf; --sem-archived-fg: #4f4526; /* The banner edge is DERIVED from the tier, not chosen, so re-pitching a tier does not also mean picking three border colours by hand. 28% of the ink mixed into the fill lands between the two in the tier's own hue. */ --sem-good-border: color-mix(in srgb, var(--sem-good-fg) 28%, var(--sem-good-bg)); --sem-caution-border: color-mix(in srgb, var(--sem-caution-fg) 28%, var(--sem-caution-bg)); --sem-bad-border: color-mix(in srgb, var(--sem-bad-fg) 28%, var(--sem-bad-bg)); /* The lit lamp and the fault lamp, moved off the component rules below for the same reason. --sem-bad-accent is the rule down the side of an errored import panel and the colour its row tint is mixed from; on this palette that is the fault red, not the base brand's salmon. */ --sem-chip-fill: var(--el-volt); --sem-chip-ink: var(--el-on-volt); /* FAULT IS RED HERE AND in_maintenance IS NOT. On this palette the bad tier is arc blue, because an asset at the shop is a state and not a failure — so the error family is moved off it onto the fault lamp. Without this the error banner, the import error list and the alerting filter chip all come out blue, which was measured and is the reason --sem-error-* exists at all. */ --sem-error-bg: var(--sem-inactive-bg); --sem-error-fg: var(--sem-inactive-fg); --sem-error-border: color-mix(in srgb, var(--sem-error-fg) 28%, var(--sem-error-bg)); --sem-chip-alert-ink: #fff4f0; --sem-chip-alert-fill: #8e3320; --sem-chip-alert-outline: #8e3320; --sem-bad-accent: #8e3320; /* Was three copies of one nth-child(even) rule; the base rule reads this. */ --zebra-stripe: rgba(120, 165, 220, 0.07); /* Was eight .chart-bar-* rules stated three times. Same conductors. */ --chart-bar-available: #6fc7f5; --chart-bar-category: #4a8fd0; --chart-bar-checked_out: #ffd21e; --chart-bar-in_maintenance: #ff9a4d; --chart-bar-not_working: #ff7a5c; --chart-bar-lost: #f2593c; --chart-bar-disposed: #7d8794; --chart-bar-donated: #5a6472; } /* =========================================================================== DARK — the strike. The variant this theme is designed around, because a discharge is a thing you see against darkness. =========================================================================== */ :root[data-palette="electricity"][data-theme="dark"] { /* ---- The strike at night. Cool near-black; a sky about to conduct. ---- */ --el-panel: #090c11; --el-surface: #111621; --el-surface-2: #19212f; /* the striped row — ratios are checked on THIS */ --el-ink: #e9eef6; --el-ink-2: #bac5d3; --el-ink-3: #8b98a9; --el-rule: #232c3b; --el-rule-firm: #354154; /* VOLT — high tension, the action colour. Black-on-yellow is the most recognisable electrical mark there is, and in the dark the yellow is legible as text outright, so here the sign colour IS the link colour. */ --el-volt: #ffd21e; --el-volt-deep: #ffe066; --el-volt-soft: rgba(255, 210, 30, 0.16); --el-on-volt: #14100a; /* Link text is the ARC, not the volt. Measured on a full 394-row table: with yellow links the page has yellow text, yellow chips and yellow buttons and reads as one hue. The split is by job — arc informs, volt acts. */ --el-volt-ink: #8fd0ff; /* ARC — the light itself. Blue-white with a violet fringe, which is what a spark plug, a coil and a lightning channel all actually look like. */ --el-arc: #9fd8ff; --el-arc-soft: rgba(159, 216, 255, 0.18); --el-arc-halo: rgba(120, 170, 255, 0.40); --el-arc-violet: rgba(150, 120, 255, 0.45); /* EMISSION — the ramp. Core, body, halo. */ --el-core: #f4fbff; --el-busbar: #bfe4ff; --el-bloom: rgba(120, 190, 255, 0.38); --el-bloom-hot: rgba(180, 225, 255, 0.70); --el-volt-bloom: rgba(255, 210, 30, 0.42); --el-lamp-top: #ffe066; --el-lamp-mid: #ffd21e; --el-lamp-base: #c99400; --el-lamp-gloss: rgba(255, 252, 235, 0.45); --pico-primary: var(--el-volt-ink); --pico-primary-hover: var(--el-volt-deep); --pico-primary-underline: rgba(143, 208, 255, 0.42); --pico-mark-background-color: #4a3c05; --pico-mark-color: #ffe89a; --pico-form-element-active-background-color: #141b27; --pico-secondary: var(--el-ink-2); --pico-secondary-background: #2b3546; --pico-secondary-hover: var(--el-ink); --pico-secondary-hover-background: #364258; --scroll-shadow-color: rgba(0, 0, 0, 0.65); --sidebar-active-bg: #23304a; /* ---- THE SEMANTIC TIERS, dark. See the light block for why these are tokens and not .status-* rules. ------------------------------------- */ --sem-good-bg: #12331a; --sem-good-fg: #7ada86; --sem-caution-bg: #3c2e0a; --sem-caution-fg: #f4c65c; --sem-bad-bg: #1b2647; --sem-bad-fg: #9db8f5; --sem-inactive-bg: #3f1a12; --sem-inactive-fg: #ff9b80; --sem-alarm-bg: #571407; --sem-alarm-fg: #ff8f72; --sem-neutral-bg: #26292b; --sem-neutral-fg: #aeb5b9; --sem-archived-bg: #2c2617; --sem-archived-fg: #cfbe8e; --sem-good-border: color-mix(in srgb, var(--sem-good-fg) 28%, var(--sem-good-bg)); --sem-caution-border: color-mix(in srgb, var(--sem-caution-fg) 28%, var(--sem-caution-bg)); --sem-bad-border: color-mix(in srgb, var(--sem-bad-fg) 28%, var(--sem-bad-bg)); --sem-error-bg: var(--sem-inactive-bg); --sem-error-fg: var(--sem-inactive-fg); --sem-error-border: color-mix(in srgb, var(--sem-error-fg) 28%, var(--sem-error-bg)); --sem-chip-alert-ink: #ffe8e1; --sem-chip-alert-fill: #7c2d18; --sem-chip-alert-outline: #ff9b80; --sem-bad-accent: #ff9b80; --zebra-stripe: rgba(130, 180, 255, 0.055); } @media (prefers-color-scheme: dark) { :root[data-palette="electricity"]:not([data-theme="light"]) { /* ---- The strike at night. Cool near-black; a sky about to conduct. ---- */ --el-panel: #090c11; --el-surface: #111621; --el-surface-2: #19212f; /* the striped row — ratios are checked on THIS */ --el-ink: #e9eef6; --el-ink-2: #bac5d3; --el-ink-3: #8b98a9; --el-rule: #232c3b; --el-rule-firm: #354154; /* VOLT — high tension, the action colour. Black-on-yellow is the most recognisable electrical mark there is, and in the dark the yellow is legible as text outright, so here the sign colour IS the link colour. */ --el-volt: #ffd21e; --el-volt-ink: #8fd0ff; --el-volt-deep: #ffe066; --el-volt-soft: rgba(255, 210, 30, 0.16); --el-on-volt: #14100a; /* ARC — the light itself. Blue-white with a violet fringe, which is what a spark plug, a coil and a lightning channel all actually look like. */ --el-arc: #9fd8ff; --el-arc-soft: rgba(159, 216, 255, 0.18); --el-arc-halo: rgba(120, 170, 255, 0.40); --el-arc-violet: rgba(150, 120, 255, 0.45); /* EMISSION — the ramp. Core, body, halo. */ --el-core: #f4fbff; --el-busbar: #bfe4ff; --el-bloom: rgba(120, 190, 255, 0.38); --el-bloom-hot: rgba(180, 225, 255, 0.70); --el-volt-bloom: rgba(255, 210, 30, 0.42); --el-lamp-top: #ffe066; --el-lamp-mid: #ffd21e; --el-lamp-base: #c99400; --el-lamp-gloss: rgba(255, 252, 235, 0.45); --pico-primary: var(--el-volt-ink); --pico-primary-hover: var(--el-volt-deep); --pico-primary-underline: rgba(143, 208, 255, 0.42); --pico-mark-background-color: #4a3c05; --pico-mark-color: #ffe89a; --pico-form-element-active-background-color: #141b27; --pico-secondary: var(--el-ink-2); --pico-secondary-background: #2b3546; --pico-secondary-hover: var(--el-ink); --pico-secondary-hover-background: #364258; --scroll-shadow-color: rgba(0, 0, 0, 0.65); --sidebar-active-bg: #23304a; /* ---- THE SEMANTIC TIERS, dark. See the light block for why these are tokens rather than .status-* rules. --------------------------------- */ --sem-good-bg: #12331a; --sem-good-fg: #7ada86; --sem-caution-bg: #3c2e0a; --sem-caution-fg: #f4c65c; --sem-bad-bg: #1b2647; --sem-bad-fg: #9db8f5; --sem-inactive-bg: #3f1a12; --sem-inactive-fg: #ff9b80; --sem-alarm-bg: #571407; --sem-alarm-fg: #ff8f72; --sem-neutral-bg: #26292b; --sem-neutral-fg: #aeb5b9; --sem-archived-bg: #2c2617; --sem-archived-fg: #cfbe8e; --sem-good-border: color-mix(in srgb, var(--sem-good-fg) 28%, var(--sem-good-bg)); --sem-caution-border: color-mix(in srgb, var(--sem-caution-fg) 28%, var(--sem-caution-bg)); --sem-bad-border: color-mix(in srgb, var(--sem-bad-fg) 28%, var(--sem-bad-bg)); --sem-error-bg: var(--sem-inactive-bg); --sem-error-fg: var(--sem-inactive-fg); --sem-error-border: color-mix(in srgb, var(--sem-error-fg) 28%, var(--sem-error-bg)); --sem-chip-alert-ink: #ffe8e1; --sem-chip-alert-fill: #7c2d18; --sem-chip-alert-outline: #ff9b80; --sem-bad-accent: #ff9b80; --zebra-stripe: rgba(130, 180, 255, 0.055); /* The conductors are NOT restated here. They are declared once in the palette block, which is unscoped by variant, and this theme draws the same eight bars in light and dark — the original rules paired the light and dark selectors on one line for exactly that reason. Restating them in one dark block and not the other is what the parity test caught. */ } } /* =========================================================================== NO BOLT. CUT 2026-09-05, after three attempts. This is here because the absence is a decision, not an oversight, and the next person to think "this theme is called Electricity and has no lightning in it" should read the three tries before making a fourth. 1. A jagged trace repeating the full width of the topbar. The maintainer: "what looks like a cardiogram line on the top. Is that supposed to be lightning?" It was, and they were right — a horizontal baseline carrying periodic spikes of even amplitude IS the visual grammar of an ECG. 2. One descending strike, non-repeating. Read as a scribble: a single uniform stroke oscillating six times around a vertical axis is a spring. 3. The same strike tapered in three widths, with forks. Better drawn, and the verdict was "equally dumb. Rather leave it out if you can't pull off a better lightning effect." Three misses on one element says the PLACEMENT was wrong, not the drawing. Lightning needs one of three things to read: scale, a visible source, or darkness around it. A 111px figure floating in a pale topbar has none of them, so it can only ever look like a decal stuck on the chrome — and each attempt made it a better-drawn decal. The theme does not need it. What carries the identity is the two colours split by job (arc blue informs, volt yellow acts), the emission ramp on the controls, the lit rail down the nav, and the warning lamp on the alert tile — all of which the maintainer accepted. Chanel's rule: take one thing off before leaving the house. If it comes back, give it somewhere it can be big and dark: the sign-in page, an empty state, the 404. Not a 111px slot in a topbar somebody stares at all day. =========================================================================== */ /* The busbar: a live conductor under the topbar: a live conductor under the topbar, brightest where the current is. */ :root[data-palette="electricity"] .topbar { background-image: linear-gradient(to right, transparent 0%, var(--el-busbar) 22%, var(--el-busbar) 78%, transparent 100%), linear-gradient(to top, var(--el-bloom) 0%, transparent 100%); background-repeat: no-repeat, no-repeat; background-size: 100% 1px, 100% 20px; background-position: left bottom, left bottom; } /* =========================================================================== THE ARC — the light itself, and the fiercest thing in the theme. Focus only, because an arc lamp is not something you leave burning in a room. Three rings: a hard core, the halo it throws, and a violet fringe, which is what the edge of a real discharge actually looks like. =========================================================================== */ :root[data-palette="electricity"] :focus-visible { outline: 2px solid var(--el-arc); outline-offset: 2px; box-shadow: 0 0 0 5px var(--el-arc-soft), 0 0 18px 1px var(--el-arc-halo), 0 0 34px 4px var(--el-arc-violet); transition: box-shadow 120ms ease-out; } /* =========================================================================== THE RAIL AND THE LAMP. The nav is a bus with every page hung off it, dim, and the page you are on is the one drawing current: a hot node on the rail, its light spilling left onto the panel and warming its own label. This is the theme's vocabulary doing a job the theme did not invent — it is how you know where you are. =========================================================================== */ :root[data-palette="electricity"] .sidebar-nav a { box-shadow: inset 2px 0 0 var(--el-sb-rail); transition: box-shadow 130ms ease-out; } :root[data-palette="electricity"] .sidebar-nav a:hover { box-shadow: inset 2px 0 0 var(--el-sb-core), inset 0 0 18px -8px var(--el-sb-bloom); } :root[data-palette="electricity"] .sidebar-nav a.active { background-image: linear-gradient(to right, var(--el-sb-bloom) 0%, transparent 72%); box-shadow: inset 3px 0 0 var(--el-sb-volt), inset 0 0 26px -6px var(--el-sb-bloom-hot), 0 0 22px -4px var(--el-sb-bloom); text-shadow: 0 0 12px var(--el-sb-bloom-hot); } /* The name of the thing, lit. One text-shadow, at the top of the sidebar, where the eye starts. */ :root[data-palette="electricity"] .sidebar-brand-subtitle { color: var(--el-sb-volt); text-shadow: 0 0 14px var(--el-sb-volt-glow); } /* A faint charge across the panel: brightest at the top, where the supply comes in, plus a hairline vertical grain so the sidebar reads as a surface rather than a hole. Both well under the threshold where they would compete with the nav. */ :root[data-palette="electricity"] .sidebar { background-image: linear-gradient(to bottom, var(--el-sb-bloom) 0, transparent 200px), repeating-linear-gradient(90deg, rgba(190, 220, 255, 0.018) 0 1px, transparent 1px 3px); } /* =========================================================================== LIVE CONTROLS. A primary button is a thing that is switched on: three stops of the ramp (hot top, body, base), the gloss where a lens catches the light, and a bloom on whatever is behind it. It gets hotter when you touch it. THE EXCLUSION LIST IS LOAD-BEARING AND IS NOT OPTIONAL. Pico styles every bare `button` as a primary action, so `button:not(.secondary):not(.outline):not(.th-sort):not(.sidebar-toggle):not(.hubmenu-icon-button):not(.hubmenu-avatar-button):not(.hubmenu-item-button)` looks like the right way to say "a real button" — and it is not, because several controls in this app are `