/*! * evident.css — part of Evident, the Cortex design language. * Framework-agnostic core: tokens + primitives + de-scoped components. * * Do not edit this file directly — it is generated by build.sh from src/. * Edit the partials under src/ and re-run ./build.sh. * Provenance is the Git commit containing these bytes; consumers record that * commit in .evident-version and use it for cache-busting. * https://evident.sb.cortex.gigahost.dk/ */ /* ===== src/tokens.css ===== */ /* ========================================================================== Evident — the token layer ========================================================================== The `--ev-*` custom properties that carry Evident's material language, in both themes. These are the single source of numeric truth; components below only COMPOSE these, they never invent values. Editing anything under src/ means dist/ is now stale: run ./build.sh and stage the result in the SAME commit. dist/ is generated but committed — consumers vendor it SHA-pinned via sync.sh — so a stale dist/ ships to every consumer. The .githooks/pre-commit gate enforces this (cortex-59mbwm2). Extracted from a verified, dual-theme production port (gigahost/controlcenter/src/css/tokens.css, cortex-vnt3p6m / cortex-1r37qcl / cortex-mn5hkp8) rather than re-derived from the study's raw --rank* / --floor* names: the CC --ev-* layer is the mature version that has been measured on rendered pixels in light AND dark. Historical v16 measurements preserve the provenance; the declarations below are authoritative. The channels (see README / CLAUDE): Rim / lip weight --evN-{line,lip,wall,rim} — nesting rank (cuts down) Floor luminance --ev-floor-n{1,2,3} — nesting depth Finish --ev-sheen-* / oxide — liveness Hue --ev-accent #2bb3f3 — live / active only THEME MODEL — DELIBERATELY DIFFERENT FROM THE CC PORT. The CC port keys its dark theme off Bootstrap's [data-bs-theme="dark"] attribute, because CC IS a Bootstrap app. Evident's core is framework- agnostic, so the token layer keys dark off BOTH [data-ev-theme="dark"] (the framework-agnostic selector) AND [data-bs-theme="dark"] (so the SAME file Just Works in a Bootstrap consumer with zero markup change). Light uses the matching pair as selector aliases on the root list. This is what makes a light-scoped part inside a dark bench recompute the material ramp instead of inheriting the ancestor's dark custom properties. Each theme still has exactly one definition of every value. THE CONSUMER CONTRACT — WHICH ATTRIBUTE IS AUTHORITATIVE (cortex-efa3l5n). These two attributes are NOT peers, and reading them as peers is what made the defect below possible: data-ev-theme is Evident's MATERIAL MODE. It takes exactly `light` or `dark`. It is the authority, and it is the only thing a consumer can rely on. data-bs-theme is honoured ONLY for Bootstrap's own two literals, as a zero-markup convenience for the ordinary single-dark-theme Bootstrap app. It is a convenience ALIAS — not a theme namespace Evident owns, and not a promise about any other value a consumer might put there. So a consumer whose dark theme is called anything other than `dark` MUST also set data-ev-theme="dark" on the same carrier: Control Center is the worked case: it ships three dark themes (`dark`, `darker`, `very-dark`), and before it set the second attribute the whole --ev-* layer resolved LIGHT on two of the three while the page ground was near-black. Measured on the canonical showcase: data-bs-theme="darker" alone gave --ev-bg #c9c9c9 / --ev-ink #1f1f1f, and --ev-accent-text #064466 measured 1.94:1 against that theme's #070707 ground. Adding the attribute resolves the dark register byte-for-byte and takes the same ink to 8.48:1. The escape hatch is name-agnostic: `midnight` or `solarized-dark` work identically, because the name is precisely what stops mattering. Note the adjacent surprise, since it catches people: setting data-ev-theme="dark" does NOT make Bootstrap's own [data-bs-theme="dark"] rules apply. The consumer keeps owning its framework theming; Evident only ever owns the material. TWO ALTERNATIVES REJECTED, recorded because both look better than they are: 1. Match the theme NAME, e.g. [data-bs-theme*="dark"]. This is a guess dressed as a rule. It happens to catch `darker` and `very-dark`, it SILENTLY catches `dark-blue` and `darkroom` (a light theme named after a room), and it SILENTLY misses `midnight` and `night`. One silent-wrong case traded for two, with the library's behaviour now depending on a consumer's spelling. scripts/check-theme-scope-registers.py pins this rejection: it asserts an unrecognised theme name alone still resolves LIGHT, so a substring match cannot be introduced without failing. 2. Fail loudly by withholding tokens — drop :root from the light selector so an unknown themed root matches no scope at all and every var(--ev-*) goes invalid. Genuinely tempting, since this repo's own tools fail loudly on purpose. Rejected because it breaks the documented unset-default root contract for every consumer that themes on an attribute Evident has never heard of, and because a design library must not paint a diagnostic — or a wreck — into a consumer's production page. The loudness belongs in the station, where it costs a consumer nothing at runtime. Achromatic (Invariant 7): every material value is R = G = B. Colour is reserved for ink and indicators. ========================================================================== */ :root, :is([data-ev-theme="light"], [data-bs-theme="light"]) { /* The one accent. Hue means "live / active / interactive", nothing else. */ --ev-accent: #2bb3f3; --ev-accent-fg: #06232f; /* dark ink on the lit accent face */ /* The same accent as a BARE CHANNEL TRIPLE, for consumers whose API takes `rgba(, )` rather than a colour. Bootstrap's utilities are built that way (`--bs-primary-rgb`, consumed as `rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))`), so without this the adapter could remap --bs-primary and STILL leave .bg-primary / .text-primary / .text-bg-primary painting Bootstrap's #0d6efd. It is stated here, beside the hex it decomposes, rather than in the adapter — a bare triple in the adapter would be exactly the literal the adapter rule forbids. THESE TWO LINES MUST MOVE TOGETHER: nothing checks that the triple still matches the hex. (cortex-wp0qzvk) */ --ev-accent-rgb: 43, 179, 243; /* = #2bb3f3 */ /* The same decomposition for --ev-accent-text (below), needed for the same reason: Bootstrap resolves `a { color }` through --bs-link-color-RGB, not through --bs-link-color, so a link takes the face accent — 1.43:1 on the canvas — unless the INK step is available as a triple too. Dark mirrors whatever --ev-accent-text resolves to there. (cortex-wp0qzvk) */ --ev-accent-text-rgb: 6, 68, 102; /* = #064466 */ /* The accent as INK, on a neutral ground. A luminance step of the SAME hue (199deg vs 201deg — same accent, walked down), never a second hue, so Invariant L4's "one flat accent" holds: hue still means exactly one thing. It exists because --ev-accent is a FACE value and cannot double as ink on a light ground. Measured on the declared hexes: #2bb3f3 is 1.43:1 on --ev-bg #c9c9c9, 2.01:1 on --ev-metal-hi #ececec and 1.52:1 on --ev-floor-n1 #cfcfcf — the deepest cut, so the darkest face any ink sits on, and therefore the binding constraint. Nothing near 4.5:1. Note the page canvas got WORSE, not better, when it went to the study's graphite bench (2.01 -> 1.43): the bench moved TOWARDS the accent's own luminance. 1:1 WITH THE v16 STUDY (cortex-8jhd90a): this is the study's --accent-text (historical v16 record), whose own comment reads "min 5.00 on any surface in this theme". The library simply dropped it during the port and pointed the five ink sites at --ev-accent instead; that was the drift, and the historical exploration had already made this call. Measured on this ground set: 6.26:1 on --ev-bg, 8.77:1 on --ev-metal-hi, 6.65:1 on --ev-floor-n1 — worst 6.26. In DARK the accent needs no step and the study sets --accent-text to the accent itself (historical v16 record); stated there as var(--ev-accent) rather than a repeated literal, because it is a consequence (the accent IS legible as ink on a dark ground: 8.13:1 on --ev-bg), not a coincidence. This is INK only. Boundaries have their own rung below: their 3:1 floor is independent of the 4.5:1 text floor even though the present light values coincide. */ --ev-accent-text: #064466; /* The accent as a UI BOUNDARY: focus outlines, rims, borders and inset scribes. --ev-accent is a FACE value and misses the 3:1 non-text floor on every light surface it borders: 1.43:1 on --ev-bg #c9c9c9, 2.01:1 on --ev-metal-hi #ececec and 1.52:1 on --ev-floor-n1 #cfcfcf. #064466 is the same accent hue walked down in luminance and measures 6.26:1, 8.77:1 and 6.65:1 on those grounds; it also clears boundaries drawn inside accent faces (4.36:1 on --ev-accent and 3.49:1 on --ev-accent-press). Keep the boundary name separate from --ev-accent-text: the channels have different accessibility floors and may diverge even though their present light values coincide. (cortex-ne36f8j) */ --ev-accent-edge: #064466; /* Ink — Evident owns neutral ink so evident.css alone (no Bootstrap, no consumer palette) still has legible text. A consumer with its own palette can point these at its own tokens. TWO text rungs, not three. --ev-ink-faint is NON-TEXT (cortex-g2j0rmv). It was a third text rung until it was measured. The binding ground is --ev-floor-n1 #cfcfcf, the DEEPEST cut and so the darkest face any ink ever sits on; #999999 reads 1.83:1 there against a 4.5:1 floor. The remedy in the bead as filed — darken it until it passes — does not exist: walking the value down, the FIRST light grey to clear 4.5:1 on n1 is #595959 (4.50), and --ev-ink-dim is #565656 (4.71). The faint rung would have to BECOME the dim rung to be legible, i.e. the ladder is arithmetically two rungs deep, not three, and always was. So the carrier was removed rather than the invariant. Everything that used faint ink to say "this text is meta" — placeholder, dropzone hint, caption — already said it another way (absent value, position, caps + tracking + weight). Faint ink was a SECOND carrier of a meaning already carried, which is exactly what rule 2 forbids; that it was also the one breaking AA is not a coincidence. What the token is still FOR: non-text neutral detail that needs to read as recessive without ever being read as prose — a hollow status ring (components/identity.css), a resting outline-secondary border (adapter-bootstrap.css). Those are UI boundaries at a 3:1 floor, which it clears. Do not point a `color:` at it. If a visibly fainter caption is wanted later, the route is a LIGHTER GROUND or a fourth rung on a lighter face — not a fainter ink on these floors. ---- 1:1 WITH THE v16 STUDY (cortex-r3qtun9) ---- The ink ramp is the study's, verbatim: --ev-ink == study --ink #1f1f1f (primary near-black), --ev-ink-dim == study --ink-soft #3d3d3d (the secondary rung, AA-verified in the historical table). The library had drifted to #1a1a1a / #565656; the verified v16 values were restored. */ --ev-ink: #1f1f1f; --ev-ink-dim: #3d3d3d; --ev-ink-faint: #999999; /* NON-TEXT. See above. */ /* Page canvas — the stock the whole billet is cut from at page level. 1:1 WITH THE STUDY: this is the study's --canvas #c9c9c9 (the neutral graphite bench), NOT --metal-hi. The library had drifted to #ececec — the tone of a raised molded FACE, not the bench — which is exactly the "they look completely different, like just the pinstripe bg coloring" the founder flagged: the page read near-white and molded cards no longer sat proud of it. Reverted to the study's graphite canvas. (cortex-r3qtun9) */ --ev-bg: #c9c9c9; /* A cut made DIRECTLY into the pinstripe bench is not part of the --ev-floor-n1/n2/n3 ladder below a raised slab. It has one floor, held below the graphite bench's ACTUAL rendered low point, not merely below the #c9 declaration. Pixel sampling includes the fixed atmosphere, noise and pinstripe: clear bench pixels reached 188 while #c4 rendered at 197, so #b8 supplies the required headroom and still keeps dim ink at 5.48:1 / accent text at 5.22:1. Descendants of the same bench carve inherit this single level; a raised slab resets the composition and restores the three-rung ladder. Founder option E, cortex-jc83lrz / cortex-c8qr7zn. */ --ev-bench-floor: #b8b8b8; /* Typography pair. IBM Plex Sans everywhere; Mono for genuine machine values (ids, metrics, hostnames, readouts) — Invariant L5. Sans fallback mirrors the study's proven chain (Inter → the platform UI sans → Arial) so the prose stays PROPORTIONAL even where the generic `sans-serif`/`system-ui` keyword resolves to a monospace face — the gallery's earlier mono-looking type regression was exactly that fallthrough. */ --ev-font-sans: 'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ev-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ------------------------------------------------------------------- Material tones — the stock everything is cut from. ------------------------------------------------------------------- */ --ev-metal: #e0e0e0; /* plain land (un-cut face) */ --ev-metal-hi: #ececec; /* raised key face */ /* Floor luminance = nesting depth. EXACTLY three rungs (Invariant 4). The rungs run DARKER with depth: n3 shallowest -> n1 deepest. */ --ev-floor-n1: #cfcfcf; /* deepest carve */ --ev-floor-n2: #d4d4d4; /* cut within a cut */ --ev-floor-n3: #d9d9d9; /* shallowest cut */ /* Carve shading, by rank. Ornament gets FINER with depth (Invariant 2). */ --ev-r1-line: inset 0 0 0 1px rgba(28, 28, 28, 0.46); --ev-r1-lip: inset 0 0 6px rgba(28, 28, 28, 0.42); --ev-r1-wall: inset 0 0 10px rgba(28, 28, 28, 0.20); --ev-r1-rim: 0 0 0 1px rgba(250, 250, 250, 0.88); --ev-r2-line: inset 0 0 0 1px rgba(28, 28, 28, 0.26); --ev-r2-lip: inset 0 0 3px rgba(28, 28, 28, 0.21); --ev-r2-wall: inset 0 0 5px rgba(28, 28, 28, 0.105); --ev-r2-rim: 0 0 0 1px rgba(250, 250, 250, 0.52); --ev-r3-line: inset 0 0 0 1px rgba(28, 28, 28, 0.15); --ev-r3-lip: inset 0 0 2px rgba(28, 28, 28, 0.13); --ev-r3-wall: inset 0 0 3px rgba(28, 28, 28, 0.05); --ev-r3-rim: 0 0 0 1px rgba(250, 250, 250, 0.30); /* Theme-INDEPENDENT light-land shading. A few chrome faces are pinned opaque white regardless of page theme (e.g. a header user pill), so a cut into them must be shaded against a light land even in dark. These deliberately have NO dark counterpart. (cortex-9sl5z3t) */ --ev-lightland-floor-n2: #e8e8e8; --ev-lightland-r3-line: inset 0 0 0 1px rgba(28, 28, 28, 0.15); --ev-lightland-r3-lip: inset 0 0 2px rgba(28, 28, 28, 0.13); --ev-lightland-ink: #444444; /* A pocket cut directly into a RAISED face measures from that ACTUAL face, not from the ordinary --ev-metal land. In light, --ev-metal-hi #ececec -> #e8e8e8 is one deliberate 4-step rung; the old fallback to --ev-floor-n1 #cfcfcf dropped 29 steps and read as a disabled grey fill. Dark overrides this carrier back to --ev-floor-n1 below (#272727 -> #1e1e1e, a 9-step rung), so the already-correct raised-face pocket does not move. SUPERSEDED (cortex-pxin6to, corrected by cortex-arivo8b): this carrier was first stated as `--ev-raised-white-carve-floor` and scoped narrowly to Bootstrap's legacy `.rounded-white`, on the reasoning that the framework-neutral .ev-molded / .ev-card slabs own the ordinary n1/n2/n3 nesting ladder for their direct cuts too. That split was wrong, and it shipped as a real defect: a consumer porting to native Evident markup (`class="ev-card ev-molded ev-fin-polished"`) got the 236 -> 207 slab back, because both native blocks reset the carrier to `initial`. A raised face is a raised face; which framework named it cannot change what a cut into it looks like. The carrier is therefore the ONE raised-face carve floor, and the `-white-` in the old name is gone with the scope that justified it. The n1/n2/n3 ladder is not lost — it is what a cut cut into a CUT still descends through, and .ev-machined restores it the moment it actually holds one (core.css). */ --ev-raised-carve-floor: var(--ev-lightland-floor-n2); /* Molded (raised) shading. `shoulder-lite` is the interior roll-over that makes a cast face read domed; contact/ambient are outer falloff rings. All zero-offset (Invariant L1 — symmetric axial light). */ --ev-shoulder-lite: inset 0 0 10px rgba(250, 250, 250, 0.55); --ev-shoulder-1: inset 0 0 2px rgba(28, 28, 28, 0.055); --ev-shoulder-2: inset 0 0 6px rgba(28, 28, 28, 0.055); --ev-shoulder-3: inset 0 0 14px rgba(28, 28, 28, 0.045); --ev-contact-1: 0 0 3px rgba(28, 28, 28, 0.30); --ev-contact-2: 0 0 4px rgba(28, 28, 28, 0.36); --ev-ambient-1: 0 0 14px rgba(28, 28, 28, 0.14); --ev-ambient-2: 0 0 30px rgba(28, 28, 28, 0.20); /* Split carriers for the key's size-aware hover falloff. The composite shadows above remain stable for every other raised component. */ --ev-contact-2-blur: 4px; --ev-contact-2-ink: rgba(28, 28, 28, 0.36); --ev-ambient-1-blur: 14px; --ev-ambient-1-ink: rgba(28, 28, 28, 0.14); --ev-ambient-2-blur: 30px; --ev-ambient-2-ink: rgba(28, 28, 28, 0.20); /* RAISED KEY BODY — the chosen keyboard-cap material (cortex-q7rmp1m). A key's press face turns through a fine lit arris into a short, darker molded sidewall before meeting the host at the contact seam. These are intrinsic planes in one cast part, not a stronger cast shadow; each concentric layer scales with the five-step key geometry. The centred crown is an axial return and stays clear of the rounded silhouette at every size: its corner is at hypot(.5/.9, .5/1.6) = .637 of the radial, beyond the transparent stop, while the top crest is .312. The three planes are SPLIT CARRIERS, exactly like --ev-contact-2-blur / --ev-contact-2-ink above, and for a reason that is a property of the cascade rather than a style preference. A var() inside a custom property is substituted where that property is DECLARED, not where it is used. --ev-key-lift-scale is per-key state (it exists only on the key element, where the size modifier sets it), so a body layer composed HERE would resolve against a scale this scope does not have: it would compute guaranteed-invalid and inherit downward already dead, and the key re-declaring the scale on itself could not revive it. Every box-shadow naming it would then be invalid at computed-value time and fall back to `none`, taking the valid contact/ambient layers with it — which is precisely what cortex-mz9m49a measured, 76 of 78 keys drawing no body at all. So the theme owns the INK (it varies per bench and inherits cleanly into any nested theme scope) and the key composes the geometry where the scale actually lives. Composing at a theme scope would be wrong even if it resolved: a nested [data-ev-theme] carrier would bake ITS inherited scale into every key below it. */ --ev-key-body-arrise-ink: rgba(250, 250, 250, 0.68); --ev-key-body-wall-ink: rgba(28, 28, 28, 0.20); --ev-key-body-roll-ink: rgba(28, 28, 28, 0.09); --ev-key-crown: radial-gradient(90% 160% at 50% 50%, var(--ev-lum-mid) 0%, transparent 50%); /* SEAT CONTACT — the occlusion of a part SEATED INSIDE A CUT, as opposed to a part standing proud on an open face. (cortex-cvyhdu3.) --ev-contact-* + --ev-ambient-* describe an OPEN-FACE raised part: the contact seam at its base plus a broad ambient throw falling off onto the surrounding land. A seat has no surrounding land. It sits below the host face inside a channel, separated from the channel walls by a few px of floor, so there is nowhere for a 14px ambient throw to fall off TO — it simply floods the whole visible gap and the channel floor stops reading uniform. That is a cast where the geometry cannot produce one, the raised-part cousin of drawing an edge where no material was removed. So a seat gets contact occlusion ONLY, and tight: a short seam in the gap, floor at full value 2px out. This has to be a PER-THEME token rather than a reused --ev-contact-1 for the same reason the carve floors are bench-relative (cortex-c8qr7zn / founder option E): the read has to match across themes, and the two benches have wildly different headroom to darken into. Measured on the pinstripe bench, floor -> 1px from the seat: light 184 -> 177 (delta 7), dark 8 -> 6 (delta 2). Before this token the same absolute cast read as delta 26 over a 14px ramp in light and delta 4 in dark — a treatment tuned on the dark bench, leaking into the light one as a dark tinge around every selected seat. */ --ev-seat-contact: 0 0 2px rgba(28, 28, 28, 0.16); /* The contact falloff as a RAW COLOUR, for the places a part's shadow must be drawn as a gradient rather than a box-shadow — i.e. wherever the part is not its own element and cannot carry --ev-contact-*. Same alpha as --ev-contact-1 so the two readings agree; a radial gradient is axially symmetric by construction, so L1 holds structurally. Introduced for the single-element Bootstrap .form-switch adapter (cortex-4t1e6px). */ --ev-contact-tint: rgba(28, 28, 28, 0.30); /* The swoop — the specular return of a polished, LIVE cast face: the molded plane's finish/liveness cue, not a new channel. The former "material flow line" reading is superseded because it made the sweep decorative. Shadows stay axial; every eligible face shares this angle. */ --ev-swoop-angle: 118deg; --ev-lum-hi: rgba(250, 250, 250, 0.46); --ev-lum-mid: rgba(250, 250, 250, 0.16); --ev-lum-lo: rgba(28, 28, 28, 0.045); /* PAGE ENVIRONMENT — the ambient light field and material tooth of the raw bench. 1:1 WITH THE v16 STUDY (cortex-r3qtun9): the study's canvas is not just the pinstripe — it composes an irregular NOISE tooth (feTurbulence, ~180px field, an order of magnitude coarser than the 3px stripe pitch, so the two cannot beat) under a broad diagonal CANVAS ATMOSPHERE (pure luminance, the environment light). These are the study's --noise-alpha / --amb-* , verbatim; the .ev-pinstripe PAGE utility composites them so a full-bleed Evident page reads exactly like the study's body. Values are per-theme. */ --ev-amb-hi: rgba(250, 250, 250, 0.40); --ev-amb-lo: rgba(28, 28, 28, 0.075); --ev-noise-alpha: 0.030; /* Corner counter-light (fillet). A rim band wrapping 90deg converges into ~1.69x the area, so corners read darker at equal per-pixel darkness. Sized as a RATIO to lip size, never a constant. */ --ev-fillet-light: rgba(250, 250, 250, 0.302); --ev-fillet-size: 24px; --ev-fillet-light-2: rgba(250, 250, 250, 0.151); --ev-fillet-size-2: 12px; --ev-fillet-light-3: rgba(250, 250, 250, 0.094); --ev-fillet-size-3: 8px; --ev-edge-glow: rgba(252, 252, 252, 0.42); --ev-cut-edge: rgba(28, 28, 28, 0.42); /* The rail's SEAT FLOOR — a rung DARKER than the channel floor (--ev-floor-n1), so the current item reads as a deeper pocket cut into the channel's own floor. The swing is deliberately small (well under the metal-hi -> n1 step) so it reads as one surface cut twice, not a second material. Achromatic in both themes (L4). PROMOTED FROM components/rail.css (cortex-wp0qzvk): the Bootstrap adapter renders .nav-pills as this same rail, and a component-local custom property does not reach a .nav-pills element. Restating the hex in the adapter would have put a literal there, which the adapter rule forbids. One definition, two consumers — which is what this file is for. */ --ev-rail-seat: #c4c4c4; /* Destructive-action feedback. A destructive control is neutral material and neutral ink at rest; wording + the canonical trash glyph carry its durable identity. These warm carriers appear only while the user is interacting. The burr is coloured LIGHT at the raised arris, never a coloured material face. */ --ev-danger-action-burr: rgba(216, 74, 63, 0.42); --ev-danger-action-ink: #8f2018; /* Entity-header material. The general shoulder/rank/luminance stacks above already match the study exactly; these are the component-specific surfaces and colour carriers that have no honest global equivalent. */ --ev-entity-header-ink-muted: #444444; --ev-entity-header-lobe-face: #dadada; --ev-entity-header-chamfer-crest: rgba(250, 250, 250, 0.85); --ev-entity-header-chamfer-lit: rgba(250, 250, 250, 0.42); --ev-entity-header-chamfer-inner: rgba(28, 28, 28, 0.16); --ev-entity-header-chamfer-shade: rgba(28, 28, 28, 0.085); --ev-entity-header-r2-line-color: rgba(28, 28, 28, 0.26); --ev-entity-header-r2-wall-color: rgba(28, 28, 28, 0.105); --ev-entity-header-r3-rim-color: rgba(250, 250, 250, 0.30); --ev-entity-header-rail-floor: #d7d7d7; --ev-entity-header-rail-seat: #c0c0c0; --ev-entity-header-rail-seat-low: rgba(28, 28, 28, 0.030); --ev-entity-header-rail-seat-high: rgba(250, 250, 250, 0.055); --ev-entity-header-danger-burr: var(--ev-danger-action-burr); --ev-entity-header-danger-ink: var(--ev-danger-action-ink); /* The segmented control's GROOVE SEAM between adjacent segments: two 1px achromatic runs a pixel apart — an ink run with a lit companion — reading as an inset milled groove, the same physics as the pinstripe grain. Light carries the seam mostly by ink over the grey floor. PROMOTED FROM components/segmented.css for the same reason as --ev-rail-seat above (cortex-wp0qzvk): the adapter draws this seam on a Bootstrap .btn-group, and restating the two rgba() values there would put colour literals in the adapter, which its own rule forbids. A seam beside the live seat remains physically present but recedes to a quarter-strength material trace. Keeping that opacity here makes the native control and Bootstrap adapter share the same muted state instead of encoding the founder-tuned value twice (cortex-t03qgev). */ --ev-seg-groove-ink: rgba(28, 28, 28, 0.24); --ev-seg-groove-land: rgba(250, 250, 250, 0.42); --ev-seg-groove-muted-opacity: 0.25; /* Top/bottom inset, so the seam is a short carved detail on the floor rather than a full-height rule up to the channel rim. Theme-independent: it is geometry, not material. */ --ev-seg-groove-inset: 5px; /* The channel's continuous TOP ARRIS (segmented control). Unlike --ev-cut-edge — which shades a hairline against the light grey channel floor only — this edge must cross the ACCENT-LIT seat at the SAME darkness (cortex-hnrbqfe). A 0.42 line vanishes over the bright accent (a dark wash on a bright face barely registers) while reading crisp over the floor, so the rim broke exactly over the selected seat. A near-opaque dark line reads as one hard cut edge over BOTH surfaces — which is what a cut's own arris is. */ --ev-seg-arris: rgba(24, 24, 24, 0.86); /* Dark material scope aliases — reachable REGARDLESS of page theme, so a surface that is dark stock in BOTH themes (product housing: nav, mobile menu) can consume them without hardcoding hex. (cortex-e6pvq66) */ --ev-dark-metal-hi: #272727; --ev-dark-floor-n1: #1e1e1e; --ev-dark-r1-line: inset 0 0 0 1px rgba(0, 0, 0, 0.96); --ev-dark-r1-lip: inset 0 0 6px rgba(0, 0, 0, 0.92); --ev-dark-r1-wall: inset 0 0 10px rgba(0, 0, 0, 0.66); --ev-dark-edge-glow: rgba(245, 245, 245, 0.055); --ev-dark-ink: #f5f5f5; --ev-dark-ink-dim: #a3a3a3; /* ------------------------------------------------------------------- SPRUNG SOCKET — the lobe-action material (cortex-czimc0b). A lobe key is a distinct rigid part sitting proud of its recessed keyplate, then travelling 2px into that seat when pressed. Its material follows the surrounding theme: quiet light stock on a light lobe, dark stock on a dark lobe. At normal scale one edge and a short contact shadow carry the part; extra nested hairlines made the small control visually louder than its host. Danger is an ink + edge exception for the downstream .ev-confirm consumer, never a differently coloured body. See boss.css. ------------------------------------------------------------------- */ --ev-socket-radius: 6px; --ev-socket-face: #e2e2e2; --ev-socket-body: linear-gradient(180deg, #eeeeee 0%, #e2e2e2 58%, #d9d9d9 100%); --ev-socket-pressed: linear-gradient(180deg, #d5d5d5 0%, #dddddd 100%); --ev-socket-ink: var(--ev-ink); --ev-socket-ink-dim: var(--ev-ink-dim); --ev-socket-top: inset 0 1px 0 rgba(255, 255, 255, 0.72); --ev-socket-edge: inset 0 0 0 1px rgba(31, 31, 31, 0.24); --ev-socket-groove: 0 1px 0 rgba(255, 255, 255, 0.55); --ev-socket-contact: 0 2px 2px -1px rgba(31, 31, 31, 0.28); --ev-socket-pressed-depth: inset 0 2px 2px rgba(31, 31, 31, 0.20); --ev-socket-danger-ink: #9f2f28; --ev-socket-danger-edge: inset 0 0 0 1px rgba(159, 47, 40, 0.48); /* Scribe lines and persistent state washes ON a machined floor — table rules, dividers, selected rows. Ink laid on a floor: same achromatic shading ink as the carve stack, nothing else. (cortex-mn5hkp8) */ --ev-rule-strong: rgba(28, 28, 28, 0.15); --ev-rule: rgba(28, 28, 28, 0.10); --ev-wash: rgba(28, 28, 28, 0.04); /* Accent shading — for the primary key ONLY. A lit surface takes DARK ink. */ --ev-accent-ink: #06232f; --ev-accent-press: #159fe0; /* --ev-acc-crown is GONE (cortex-qws8bck). Its only two consumers were the segmented seat and the adapter's .btn-group mirror of it, both of which dropped the `inset 0 1px 0 0` crown line — an Invariant L1 offset shadow that had outlived the darkenings it was added to counter. The lit face of an accent part is the --ev-acc-lum-* swoop; there is no separate rim. */ --ev-acc-lum-hi: rgba(250, 250, 250, 0.30); --ev-acc-lum-mid: rgba(250, 250, 250, 0.11); --ev-acc-lum-lo: rgba(6, 35, 47, 0.13); --ev-acc-shoulder-1: inset 0 0 2px rgba(6, 35, 47, 0.16); --ev-acc-shoulder-2: inset 0 0 7px rgba(6, 35, 47, 0.13); --ev-acc-shoulder-3: inset 0 0 15px rgba(6, 35, 47, 0.10); --ev-acc-edge-glow: rgba(250, 250, 250, 0.34); /* Press timing. Instant in, smooth out. */ --ev-press-in: 60ms; --ev-press-in-ease: cubic-bezier(0.2, 0, 0.4, 1); --ev-press-out: 120ms; --ev-press-out-ease: ease; /* Radius scale — four rungs. */ --ev-radius-sm: 6px; --ev-radius-md: 8px; --ev-radius-lg: 12px; --ev-radius-pill: 100px; /* Entity header geometry. These values are the promoted v16 study measurements, now public because consumers compose the component directly. The seated action relationship is load-bearing: R = lobe radius = action radius = 10px h = action height = 30px lobe height = rim 9px + dip 31px = 40px action inset = (40px - 30px) / 2 = 5px Every lobe action is the same rounded socket part. Icon-only removes the legend, not the silhouette grammar: its glyph is centred in a 30px square with the same 10px corners as an icon-and-text action. The 5px insets centre the complete cluster against the WHOLE lobe: vertically that includes the upper rim rather than only the pocket below it; horizontally the authored lobe span is the cluster width plus two insets. The action carrier occupies that complete span, rather than merely naming a content-sized box. (cortex-k3ffgmn, cortex-ae3i39q) */ --ev-entity-header-shell-radius: 28px; --ev-entity-header-content-inset: 40px; /* The identity plate and the glyph marked into it, at two named steps plus the live pair the component actually reads. Each figure is written once: the cramped composition restates the plate size as a grid track and the lead option restates it again, and the same number in three places is how the rail's height silently doubled. The glyph keeps roughly the plate's own 0.46 proportion at both steps (21/46, 32/72), so enlarging the plate does not also change how much of it the mark fills. */ --ev-entity-header-mark-size-compact: 46px; --ev-entity-header-mark-glyph-compact: 21px; --ev-entity-header-mark-size-lead: 72px; --ev-entity-header-mark-glyph-lead: 32px; --ev-entity-header-mark-size: var(--ev-entity-header-mark-size-compact); --ev-entity-header-mark-glyph: var(--ev-entity-header-mark-glyph-compact); --ev-entity-header-lobe-radius: 10px; --ev-entity-header-rim-width: 9px; --ev-entity-header-lobe-dip: 31px; --ev-entity-header-lobe-offset: 27px; --ev-entity-header-seat-travel: 6px; --ev-entity-header-rail-overshoot: 12px; --ev-entity-header-action-gap: 3px; --ev-entity-header-seat-key-height: 30px; --ev-entity-header-seat-key-radius: var(--ev-entity-header-lobe-radius); --ev-entity-header-seat-key-padding-start: 9px; --ev-entity-header-seat-key-padding-end: 12px; --ev-entity-header-seat-key-font-size: 11px; --ev-entity-header-action-inset-x: 5px; --ev-entity-header-action-inset-y: 5px; /* The socket paints below its border box. The resting face therefore reads high even though the historical BORDER-BOX figure is 5px/5px. The enhancer translates the face in the positive block direction by half this measured overhang, within the named bounds. */ --ev-entity-header-action-overhang-block-end: 2.67px; --ev-entity-header-action-shift-min: 0px; --ev-entity-header-action-shift-max: var(--ev-entity-header-action-inset-y); /* ------------------------------------------------------------------- GLASS surface tokens — the content-aperture insert material. (cortex-t8w48yi.) A transparent PART seated in a machined aperture, whose job is to give CONTENT a material home. Every one of these is a WHITE / NEUTRAL alpha — NO hue anywhere. They describe the glass PART only; all colour comes from the CONTENT behind the glass (Invariant 7, achromatic material). See src/components/glass.css. ------------------------------------------------------------------- */ /* the axial specular glint — a soft symmetric white ellipse near the top. Alpha only; zero x-offset — a glint on a curved surface, not a light (Invariant L1: symmetric axial light). */ --ev-glass-glint: rgba(255, 255, 255, 0.55); --ev-glass-glint-soft: rgba(255, 255, 255, 0.16); /* the bright inner bevel / refraction rim, just inside the glass edge */ --ev-glass-bevel: inset 0 0 0 1px rgba(255, 255, 255, 0.55); --ev-glass-bevel-soft: inset 0 0 6px rgba(255, 255, 255, 0.20); /* the slight DARK outer contact where the glass part meets the aperture wall — the seam of two parts, achromatic (a contact shadow, not a hue) */ --ev-glass-contact: inset 0 0 0 1px rgba(20, 20, 20, 0.34); --ev-glass-contact-2: inset 0 0 4px rgba(20, 20, 20, 0.22); /* a hair of neutral darkening so the content reads as UNDER glass (a thin tempered-glass tint — grey, never coloured). Was rgba(18,18,20) — a blue cast that contradicted the "never coloured" this comment already claimed, and broke CLAUDE.md's glass rule ("every --ev-glass-* token is a white / neutral ALPHA — no hue anywhere"). Equal-luminance grey. (cortex-yzjllwa) */ --ev-glass-underscrim: rgba(18, 18, 18, 0.10); /* frosted veil — a milky white diffusion laid over the content. Was rgba(244,246,248), likewise blue-cast where the comment said "white"; #f6f6f6 is the same luminance achromatic. (cortex-yzjllwa) */ --ev-glass-frost: rgba(246, 246, 246, 0.42); /* ------------------------------------------------------------------- Button (key) size scale — five steps, ratio 1.125 (major second). 1.125 is the largest ratio that keeps xs above the hit-target floor. Height is pinned explicitly (line-height: 1) so the scale holds at the ends. Radius is a constant 0.359 of height at every step. (cortex-1r37qcl) step height font pad y/x radius xs 31px 10.5 9.5 / 16 11 sm 35px 12 10.5 / 18 12.5 md 39px 13.5 12 / 20 14 (default) lg 44px 15 13.5 / 22.5 16 xl 49px 17 15 / 25.5 17.5 ------------------------------------------------------------------- */ --ev-btn-height-xs: 1.9375rem; /* 31px */ --ev-btn-height-sm: 2.1875rem; /* 35px */ --ev-btn-height-md: 2.4375rem; /* 39px — default */ --ev-btn-height-lg: 2.75rem; /* 44px */ --ev-btn-height-xl: 3.0625rem; /* 49px */ --ev-btn-font-xs: 0.65625rem; /* 10.5px */ --ev-btn-font-sm: 0.75rem; /* 12px */ --ev-btn-font-md: 0.84375rem; /* 13.5px */ --ev-btn-font-lg: 0.9375rem; /* 15px */ --ev-btn-font-xl: 1.0625rem; /* 17px */ --ev-btn-pad-y-xs: 0.59375rem; /* 9.5px */ --ev-btn-pad-y-sm: 0.65625rem; /* 10.5px */ --ev-btn-pad-y-md: 0.75rem; /* 12px */ --ev-btn-pad-y-lg: 0.84375rem; /* 13.5px */ --ev-btn-pad-y-xl: 0.9375rem; /* 15px */ --ev-btn-pad-x-xs: 1rem; /* 16px */ --ev-btn-pad-x-sm: 1.125rem; /* 18px */ --ev-btn-pad-x-md: 1.25rem; /* 20px */ --ev-btn-pad-x-lg: 1.40625rem; /* 22.5px */ --ev-btn-pad-x-xl: 1.59375rem; /* 25.5px */ --ev-btn-radius-xs: 0.6875rem; /* 11px */ --ev-btn-radius-sm: 0.78125rem; /* 12.5px */ --ev-btn-radius-md: 0.875rem; /* 14px */ --ev-btn-radius-lg: 1rem; /* 16px */ --ev-btn-radius-xl: 1.09375rem; /* 17.5px */ /* A control SEATED INSIDE A CUT keeps this much surviving floor between its rigid edge and the cut wall. Measured in the rendered entity-header rail: the selected detent resolves 3px from the channel on every closed side. The lobe's sprung sockets use the same physical relationship inside their keyplate cut; the boss's outer 4px land remains a separate fabrication layer and must not be collapsed into this inset. (cortex-5su0p6l) */ --ev-seat-inset: 3px; /* ------------------------------------------------------------------ The in-carve label's air. ------------------------------------------------------------------ A label that names the carve it SITS IN needs the SAME air below it as above it. The air above is the carve's own top padding, so the two are one value, and it is the CARVE that declares it — .ev-carve-label only consumes it. Without that, a label reads as the heading of whatever is cut BELOW it: the lip progression shipped with 34px of air above each rank label and 8px below, which is exactly what the founder reported. CONTEXTUAL, not global — this is the point. A magnified demonstration slab and a tight readout pocket have different insets and both must hold the equality, so each carve sets this to its own padding and the relationship, not a magic number, is the invariant. The value below is only the fallback for a label in a carve that has not declared one; it is the standard 20px control inset. (cortex-4fg3ps6) */ --ev-carve-label-gap: var(--ev-btn-pad-x-md); /* Determinate progress is a fixed, shallow cut with one live insert. The track owns the machined material; the fill spends the existing accent channel only to report the current amount. It is deliberately too small for a swoop or other finish treatment: at this scale those marks become decoration rather than readable fabrication. Geometry lives beside the material carriers so every consumer gets the same compact instrument. */ --ev-progress-height: 0.5rem; --ev-progress-radius: var(--ev-radius-pill); --ev-progress-track: var(--ev-lightland-floor-n2); --ev-progress-track-line: var(--ev-r3-line); --ev-progress-track-lip: var(--ev-r3-lip); --ev-progress-track-wall: var(--ev-r3-wall); --ev-progress-fill: var(--ev-accent); /* Range is the adjustable sibling of determinate progress. Its channel is a real rank-3 cut; the accent insert is the selected interval and the achromatic cap is the one movable part. The 44px control block is the touch target, not depicted material: only the compact track and cap are painted inside it. */ --ev-range-hit-size: 2.75rem; --ev-range-track-height: 0.625rem; --ev-range-track-radius: var(--ev-radius-pill); --ev-range-track: var(--ev-lightland-floor-n2); --ev-range-track-line: var(--ev-r3-line); --ev-range-track-lip: var(--ev-r3-lip); --ev-range-track-wall: var(--ev-r3-wall); --ev-range-fill: var(--ev-accent); --ev-range-thumb-size: 1.5rem; --ev-range-thumb-face: var(--ev-metal-hi); --ev-range-thumb-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-1), var(--ev-seat-contact); --ev-transition-fast: 0.2s ease; } /* ========================================================================== Dark theme — the material layer mirrored. ========================================================================== NOT the light values inverted. In dark the shading ink is near-black at much higher alpha (a dark floor has far less headroom to darken into), and the lit rim/fillet counter-light drop hard (a bright line on dark material is far more conspicuous per unit alpha). Achromatic in both themes. (cortex-vnt3p6m) Keyed off BOTH the framework-agnostic [data-ev-theme="dark"] AND Bootstrap's [data-bs-theme="dark"] so this one file serves both consumer shapes. The first alternative is the AUTHORITY and the second is a convenience alias for Bootstrap's own literal — see THE CONSUMER CONTRACT at the top of this file. A consumer with a dark theme by any other name sets data-ev-theme alongside its own attribute; nothing here matches on the theme's name. ANY dark mirror added anywhere in src/ must carry this exact alternation. Keying a new register off [data-bs-theme="dark"] alone would silently take that ONE register out of the escape hatch — light badges on a dark bench while every other register is correct, which is far harder to spot than a uniformly wrong theme. scripts/check-theme-scope-registers.py enforces this across the built distribution, so it catches a new partial wherever it lands rather than only the six files that carry a mirror today. */ :is([data-ev-theme="dark"], [data-bs-theme="dark"]) { /* 1:1 WITH THE STUDY (cortex-r3qtun9): ink ramp is the study's dark ramp, verbatim — --ev-ink == study --ink #ebebeb, --ev-ink-dim == study --ink-soft #b4b4b4. The library had drifted to #e6e6e6 / #9a9a9a. */ --ev-ink: #ebebeb; --ev-ink-dim: #b4b4b4; /* NON-TEXT — see the light-scope note. Dark is no better as ink: 3.11:1 on --ev-metal-hi, which is fine for the UI boundaries it actually draws (a hollow status ring, a resting outline-secondary border) and nowhere near the 4.5:1 a text rung would need. Was #6b7280 rgb(107,114,128) — a blue-cast slate, almost certainly inherited from a Tailwind-family palette during the port, and the last non-achromatic NEUTRAL in the library (Invariant L4: "every neutral is a true grey, R=G=B"). #727272 is the nearest true grey by WCAG relative luminance: 0.16827 against the slate's 0.16719, a delta of 0.001. So this is a purity fix that changes no contrast outcome — every ratio it participates in is unmoved to two decimals. (cortex-yzjllwa) */ --ev-ink-faint: #727272; /* 1:1 WITH THE STUDY: the study's --canvas #0e0e0e (neutral tar bench), a true achromatic near-black. The library had drifted to #1a1d21 — a BLUISH near-black that broke the achromatic invariant (R≠G≠B) and read cooler than the study's bench. Reverted to the study's canvas. */ --ev-bg: #0e0e0e; /* Direct bench carve, dark mirror — PER-THEME DIVERGENCE FROM LIGHT. In light the bench (#c9c9c9) has ample headroom to darken into, so the direct carve is a genuinely-darker floor (#b8b8b8 < bench) and reads as a real cut — option E as designed. In dark the bench is near-black #0e0e0e and there is NO headroom below it: a "true" darker carve (#080808) is visually black, collapsing every direct-bench element — .ev-machined· recessed / --shallow / +pinstripe--carve, dropzone, identity chip, entity token, the segmented channel — into an unreadable near-black slab. The dark ladder itself already resolves this tension by rendering recessed floors as LIFTED grey above the bench (n1 #1e1e1e, n2 #222222, n3 #262626 all > #0e0e0e), so a direct bench carve joins the ladder at n2 — its depth carried by the near-black wall + lit arris, not by a floor darker than the ground. This restores the pre-E dark look the founder confirmed reads better; the :has(.ev-pocket) land case (core.css) and this now agree at n2, with nested pockets stepping to n1. (cortex-a2ca9mx, relates cortex-jc83lrz / cortex-c8qr7zn option E). */ --ev-bench-floor: #222222; --ev-accent-fg: #06232f; /* 1:1 WITH THE HISTORICAL V16 RECORD: in dark the accent needs no luminance step to be legible as ink, so --accent-text IS the accent — 8.13:1 on --ev-bg #0e0e0e, 6.29:1 on --ev-metal-hi, 7.02:1 on --ev-floor-n1. Stated as the var, not a repeated #2bb3f3 literal, so the identity survives a future accent change. Computed value is the study's exactly. See the light-scope note for why the light theme needs a step. */ --ev-accent-text: var(--ev-accent); /* The ink triple collapses with the ink itself — same identity, stated as the var so it cannot drift from the line above. (cortex-wp0qzvk) */ --ev-accent-text-rgb: var(--ev-accent-rgb); /* Dark surfaces already give the face accent 6.29–8.13:1, so the boundary rung collapses back to the one accent rather than becoming a dark line. */ --ev-accent-edge: var(--ev-accent); --ev-metal: #1d1d1d; --ev-metal-hi: var(--ev-dark-metal-hi); --ev-floor-n1: var(--ev-dark-floor-n1); --ev-floor-n2: #222222; --ev-floor-n3: #262626; /* Dark already reads a raised-face cut correctly on the ordinary deepest rung: --ev-metal-hi #272727 -> --ev-floor-n1 #1e1e1e is 9 steps, a shallow cut rather than the 29-step slab the same pair produces in light. So dark keeps n1 and only light needs the light-land rung. Changing this line would move a face the founder has already accepted. */ --ev-raised-carve-floor: var(--ev-floor-n1); /* Dark stock keeps the same compact geometry and live insert. Only the machined track material moves onto the dark ladder; the rank shadows above already mirror through their theme-scoped tokens. */ --ev-progress-track: var(--ev-floor-n2); --ev-range-track: var(--ev-floor-n2); --ev-r1-line: var(--ev-dark-r1-line); --ev-r1-lip: var(--ev-dark-r1-lip); --ev-r1-wall: var(--ev-dark-r1-wall); --ev-r1-rim: 0 0 0 1px rgba(245, 245, 245, 0.22); --ev-r2-line: inset 0 0 0 1px rgba(0, 0, 0, 0.70); --ev-r2-lip: inset 0 0 3px rgba(0, 0, 0, 0.62); --ev-r2-wall: inset 0 0 5px rgba(0, 0, 0, 0.38); --ev-r2-rim: 0 0 0 1px rgba(245, 245, 245, 0.115); --ev-r3-line: inset 0 0 0 1px rgba(0, 0, 0, 0.45); --ev-r3-lip: inset 0 0 2px rgba(0, 0, 0, 0.40); --ev-r3-wall: inset 0 0 3px rgba(0, 0, 0, 0.20); --ev-r3-rim: 0 0 0 1px rgba(245, 245, 245, 0.06); --ev-shoulder-lite: inset 0 0 12px rgba(245, 245, 245, 0.052); --ev-shoulder-1: inset 0 0 2px rgba(0, 0, 0, 0.32); --ev-shoulder-2: inset 0 0 7px rgba(0, 0, 0, 0.26); --ev-shoulder-3: inset 0 0 16px rgba(0, 0, 0, 0.20); --ev-contact-1: 0 0 3px rgba(0, 0, 0, 0.85); --ev-contact-2: 0 0 5px rgba(0, 0, 0, 0.90); --ev-ambient-1: 0 0 16px rgba(0, 0, 0, 0.55); --ev-ambient-2: 0 0 34px rgba(0, 0, 0, 0.72); --ev-contact-2-blur: 5px; --ev-contact-2-ink: rgba(0, 0, 0, 0.90); --ev-ambient-1-blur: 16px; --ev-ambient-1-ink: rgba(0, 0, 0, 0.55); --ev-ambient-2-blur: 34px; --ev-ambient-2-ink: rgba(0, 0, 0, 0.72); --ev-key-body-arrise-ink: rgba(245, 245, 245, 0.16); --ev-key-body-wall-ink: rgba(0, 0, 0, 0.76); --ev-key-body-roll-ink: rgba(0, 0, 0, 0.30); --ev-key-crown: radial-gradient(90% 160% at 50% 50%, var(--ev-lum-mid) 0%, transparent 50%); /* Dark stock returns only on the dark bench. */ --ev-socket-face: #343434; --ev-socket-body: linear-gradient(180deg, #3d3d3d 0%, #343434 48%, #2b2b2b 100%); --ev-socket-pressed: linear-gradient(180deg, #292929 0%, #303030 100%); --ev-socket-ink: #f1f1f1; --ev-socket-ink-dim: #d2d2d2; --ev-socket-top: inset 0 1px 0 rgba(255, 255, 255, 0.56); --ev-socket-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(0, 0, 0, 0.52); --ev-socket-groove: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 rgba(0, 0, 0, 0.82); --ev-socket-contact: 0 3px 0 -1px rgba(0, 0, 0, 0.82); --ev-entity-header-action-overhang-block-end: 2px; --ev-socket-pressed-depth: inset 0 2px 2px rgba(0, 0, 0, 0.58); --ev-socket-danger-ink: #ffb7ae; --ev-socket-danger-edge: inset 0 0 0 1px rgba(255, 126, 112, 0.68); /* Seat contact on the tar bench: the same tight seam, at the near-black occlusion alpha the dark stack uses everywhere. There is almost no headroom below --ev-bench-floor #080808, so this reads as delta ~2 — and that near-nil read IS the reference the light value above was dialled to match, because the dark seat is the one the founder signed off on. */ --ev-seat-contact: 0 0 2px rgba(0, 0, 0, 0.85); --ev-contact-tint: rgba(0, 0, 0, 0.85); --ev-lum-hi: rgba(245, 245, 245, 0.055); --ev-lum-mid: rgba(245, 245, 245, 0.020); --ev-lum-lo: rgba(0, 0, 0, 0.20); /* PAGE ENVIRONMENT, dark — 1:1 with the study. On a dark bench the tooth is carried by LIGHT (a faint scattered sheen, not speckled black) and the canvas atmosphere reads as an oil sheen. Study --amb-* / --noise-alpha, verbatim. */ --ev-amb-hi: rgba(245, 245, 245, 0.050); --ev-amb-lo: rgba(0, 0, 0, 0.30); --ev-noise-alpha: 0.026; /* Dark corner counter-light — re-measured (cortex-87trzv7). The prior 0.129 was calibrated on the OUTER (rank-1) carve in light and carried into dark at ~0.43x; on a dark floor that has almost no headroom to darken into, a white patch that alpha lifts the corner APEX ABOVE the mid-edge (measured: corner-diagonal lum 40 vs mid-edge 31 on the FABRICATION PLANES machined swatch), i.e. a bright corner where a fillet should read as the DARKEST point of the face. Per Invariant 5 the counter-light is a RATIO to lip size, never a constant: the geometry (24px, matching the light fillet and the theme-independent lip blur) is unchanged; only the ALPHA drops to ~0.35x of the old value so the lifted apex lands AT or BELOW the mid-edge (re-measured: apex 27, mid-edge 29-31 — corner no longer exceeds edge). The -2/-3 rungs (the delicate nested lips) drop proportionally on the same ratio, so a nested cut's fillet never overshoots either. */ --ev-fillet-light: rgba(245, 245, 245, 0.045); --ev-fillet-size: 24px; --ev-fillet-light-2: rgba(245, 245, 245, 0.023); --ev-fillet-size-2: 12px; --ev-fillet-light-3: rgba(245, 245, 245, 0.014); --ev-fillet-size-3: 8px; --ev-edge-glow: var(--ev-dark-edge-glow); --ev-cut-edge: rgba(0, 0, 0, 0.92); /* Rail seat, dark. NOT the light value inverted: in dark the channel floor is #1e1e1e and the seat must descend BELOW it into near-black at the same small swing the study measured (light channel->seat ~19 units; dark ~11, because dark floors have far less headroom to darken into). */ --ev-rail-seat: #131313; --ev-entity-header-ink-muted: #adadad; --ev-entity-header-lobe-face: #191919; --ev-entity-header-chamfer-crest: rgba(245, 245, 245, 0.16); --ev-entity-header-chamfer-lit: rgba(245, 245, 245, 0.070); --ev-entity-header-chamfer-inner: rgba(0, 0, 0, 0.75); --ev-entity-header-chamfer-shade: rgba(0, 0, 0, 0.34); --ev-entity-header-r2-line-color: rgba(0, 0, 0, 0.70); --ev-entity-header-r2-wall-color: rgba(0, 0, 0, 0.38); --ev-entity-header-r3-rim-color: rgba(245, 245, 245, 0.06); --ev-entity-header-rail-floor: #191919; --ev-entity-header-rail-seat: #131313; --ev-entity-header-rail-seat-low: rgba(0, 0, 0, 0.22); --ev-entity-header-rail-seat-high: rgba(245, 245, 245, 0.030); --ev-danger-action-burr: rgba(242, 104, 92, 0.40); --ev-danger-action-ink: #ff8d81; --ev-entity-header-danger-burr: var(--ev-danger-action-burr); --ev-entity-header-danger-ink: var(--ev-danger-action-ink); /* Dark theme: the arris crosses the accent seat as a near-black cut line, the same hard edge it draws over the near-black channel floor (cortex-hnrbqfe). */ --ev-seg-arris: rgba(0, 0, 0, 0.92); /* Groove seam, dark: the pair inverts to a near-black run with an almost invisible lit thread — a near-black floor has no room left to darken into, so the seam is carried mostly by the scattered light companion. Same inversion the pinstripe grain makes. */ --ev-seg-groove-ink: rgba(0, 0, 0, 0.55); --ev-seg-groove-land: rgba(245, 245, 245, 0.05); --ev-rule-strong: rgba(245, 245, 245, 0.14); --ev-rule: rgba(245, 245, 245, 0.09); --ev-wash: rgba(245, 245, 245, 0.05); /* No --ev-acc-crown here either — see the light block (cortex-qws8bck). */ --ev-acc-lum-hi: rgba(250, 250, 250, 0.22); --ev-acc-lum-mid: rgba(250, 250, 250, 0.08); --ev-acc-lum-lo: rgba(6, 35, 47, 0.16); --ev-acc-shoulder-1: inset 0 0 2px rgba(6, 35, 47, 0.34); --ev-acc-shoulder-2: inset 0 0 7px rgba(6, 35, 47, 0.26); --ev-acc-shoulder-3: inset 0 0 15px rgba(6, 35, 47, 0.18); --ev-acc-edge-glow: rgba(250, 250, 250, 0.20); /* GLASS in dark. Under the dark-theme luminance ceiling the glint and bevel DROP hard (a bright line on dark material is far more conspicuous per unit alpha — same reasoning as the carve stack), and the outer contact goes near-black. Still achromatic; still white/black alphas only. */ --ev-glass-glint: rgba(255, 255, 255, 0.30); --ev-glass-glint-soft: rgba(255, 255, 255, 0.07); --ev-glass-bevel: inset 0 0 0 1px rgba(255, 255, 255, 0.22); --ev-glass-bevel-soft: inset 0 0 7px rgba(255, 255, 255, 0.08); --ev-glass-contact: inset 0 0 0 1px rgba(0, 0, 0, 0.85); --ev-glass-contact-2: inset 0 0 5px rgba(0, 0, 0, 0.55); --ev-glass-underscrim: rgba(0, 0, 0, 0.28); /* dark-scope frost — was rgba(228,232,236), the same blue cast as the light scope; equal-luminance grey. (cortex-yzjllwa) */ --ev-glass-frost: rgba(231, 231, 231, 0.10); } /* ===== src/core.css ===== */ /* ========================================================================== Evident — core primitives (the two fabrication planes) ========================================================================== Framework-agnostic, de-scoped public classes for Evident's own vocabulary. These are the EXTRACT + DE-SCOPE of the treatments that live under CC's `.rounded-white` (molded) and `.rounded-light` (machined) scope selectors — lifted out into standalone `.ev-*` classes so greenfield markup (the Cortex dashboard, new CC surfaces) can use them without the scope wrapper. Two fabrication planes, and nothing between them: MOLDED (.ev-molded) — cast. No cut edge; the shoulder rolls over. Outer falloff. Reads RAISED. Interactive. MACHINED (.ev-machined) — tool-cut. A real cut edge with lip, floor, and INSET shadow. Reads RECESSED. Information display. An element must never carry both an inset and an outer *depth* shadow: that claims to be cast and cut at once. The one legal outer shadow on a machined surface is --evN-rim, which is a lit burr, not depth. ========================================================================== */ /* -------------------------------------------------------------------------- .ev-molded — the cast/raised plane (the float). (from .rounded-white) Opaque material, not glass. The rim carries the separation, not a blur. -------------------------------------------------------------------------- */ .ev-molded { /* A cut made directly into this cast face measures from THIS face, so the slab publishes its own carve floor rather than letting the page bench's floor inherit through OR falling back to the ordinary n1/n2/n3 ladder. The ladder is what a cut inside a CUT descends through; a first cut into raised stock is one contextual rung down from --ev-metal-hi. This replaces `--ev-direct-carve-floor: initial`. That reset was the reason the native composition still rendered light #ececec -> #cfcfcf, a 29-step drop that reads as a filled slab, while the Bootstrap adapter's .rounded-white — the same physical face, differently named — had already been corrected to the 4-step rung. Both now resolve through the single --ev-raised-carve-floor token, so neither host can drift from the other and a consumer needs no local override to get the shipped face. (cortex-arivo8b; the narrow-scope reasoning it corrects is preserved in tokens.css.) */ --ev-direct-carve-floor: var(--ev-raised-carve-floor); background: var(--ev-metal-hi); color: var(--ev-ink); border: 0; border-radius: var(--ev-radius-md); box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-1), var(--ev-contact-1), var(--ev-ambient-1); transition: var(--ev-transition-fast); } /* A full-plane link lifts on hover; a plain plane does not. */ .ev-molded--float:hover { box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-2), var(--ev-contact-2), var(--ev-ambient-2); transition: none; } /* The swoop — the specular return of a polished, LIVE cast face. It is the molded plane's finish/liveness cue, not a new channel: swoop present iff the face is live and faceplate-sized. The former independent modifier licensed decorative swoops on inert cards, so finish now owns the treatment. Author .ev-fin-polished on a faceplate-sized .ev-molded; machined and small parts never match this selector. Shadows remain axial, and the shared direction stays fixed. */ .ev-molded.ev-fin-polished:not(.ev-fin-oxidized) { position: relative; overflow: hidden; } .ev-molded.ev-fin-polished:not(.ev-fin-oxidized)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( var(--ev-swoop-angle), var(--ev-lum-hi) 0%, var(--ev-lum-mid) 34%, transparent 60%, var(--ev-lum-lo) 100%); } /* -------------------------------------------------------------------------- .ev-machined — THE machined surface primitive. Evident rank-1 carve. (from .rounded-light) A machined panel is itself a cut, so its floor follows whatever face it was cut into: directly on .ev-pinstripe, founder option E uses the inherited single --ev-bench-floor, and a bench carve plus everything cut inside it stay at that one legal level. Cut into raised stock it takes that face's --ev-raised-carve-floor by the same rule — one contextual rung under --ev-metal-hi, not the ladder (cortex-arivo8b changed this; the note used to say a raised slab always gave n2, which has been true only of the HOLDS-a-pocket case below since the raised hosts began publishing a floor). The ladder — n2 panel over n1 pocket — is what a panel gets the moment it actually holds a cut, which is the rule immediately below. The panel keeps rank-1 SHADING (heavy 6px lip) regardless, and that shading, not a drop in tone, is what carries the cut on a shallow floor. (cortex-vnt3p6m, cortex-c8qr7zn, cortex-arivo8b) -------------------------------------------------------------------------- */ .ev-machined { background-color: var(--ev-direct-carve-floor, var(--ev-floor-n2)); color: var(--ev-ink); border-radius: var(--ev-radius-md); box-shadow: var(--ev-r1-line), var(--ev-r1-lip), var(--ev-r1-wall), var(--ev-r1-rim); position: relative; } /* A machined panel that HOLDS a pocket is a LAND (a slab of stock cut into), not a single-level direct carve. Reset the host's floor override so the panel takes the n2 machined floor and the pocket inside descends to n1 — a visible depth step — instead of both collapsing to the host's one level: the near-black bench floor on the bench, or the shallow contextual rung on a raised card. This is the ladder, applied automatically when a cut is actually present. A bare .ev-machined with nothing cut into it stays a direct carve and follows its host. (cortex-a2ca9mx, cortex-arivo8b) */ .ev-machined:has(.ev-pocket) { --ev-direct-carve-floor: initial; } /* Rank modifiers — a shallower carve steps the shading finer (Invariant 2). The default .ev-machined is rank-1 (deep); --shallow/--medium override. */ .ev-machined--medium { box-shadow: var(--ev-r2-line), var(--ev-r2-lip), var(--ev-r2-wall); } .ev-machined--shallow { box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } .ev-machined--deep { box-shadow: var(--ev-r1-line), var(--ev-r1-lip), var(--ev-r1-wall), var(--ev-r1-rim); } /* Corner counter-light (fillet). A rim band wrapping 90deg converges two edge-bands into ~1.69x the area, so corners read darker than straight runs at identical per-pixel darkness. Invariant 5 — the counter-light is a RATIO to the LIP, never a constant. The default (rank-1, deep) carve reads its fillet from --ev-fillet-{light,size}; the finer ranks step the fillet down to the -2 / -3 rungs in lockstep with their finer lip, via the local --ev-fillet-l / --ev-fillet-s indirection. A single constant calibrated on the deep carve OVERSHOOTS on the delicate lips — the corner then reads BRIGHTER than the mid-edge (a bright corner patch), most conspicuously in dark where a white patch sits on near-black stock (cortex-87trzv7, relates cortex-c8qr7zn). The -2/-3 tokens already exist per theme, so both themes get the ratio; no light-theme VALUE changes here. */ .ev-machined { --ev-fillet-l: var(--ev-fillet-light); --ev-fillet-s: var(--ev-fillet-size); } .ev-machined--medium { --ev-fillet-l: var(--ev-fillet-light-2); --ev-fillet-s: var(--ev-fillet-size-2); } .ev-machined--shallow { --ev-fillet-l: var(--ev-fillet-light-3); --ev-fillet-s: var(--ev-fillet-size-3); } .ev-machined::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--ev-fillet-s) var(--ev-fillet-s) at 0% 0%, var(--ev-fillet-l), transparent 72%), radial-gradient(var(--ev-fillet-s) var(--ev-fillet-s) at 100% 0%, var(--ev-fillet-l), transparent 72%), radial-gradient(var(--ev-fillet-s) var(--ev-fillet-s) at 0% 100%, var(--ev-fillet-l), transparent 72%), radial-gradient(var(--ev-fillet-s) var(--ev-fillet-s) at 100% 100%, var(--ev-fillet-l), transparent 72%); } /* The floor's own curvature — a shallow centre sheen falling off to the walls. A milled floor is not perfectly flat. This is NOT a grain texture: finish is a channel that already means liveness, so a grain would be a third state. */ .ev-machined::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(125% 125% at 50% 50%, var(--ev-lum-mid) 0%, transparent 52%, transparent 80%, var(--ev-lum-lo) 100%); } /* Both pseudo-elements are decoration and must sit under the content. */ .ev-machined > * { position: relative; z-index: 1; } /* Flat glyphs on a carve — Invariant L3. Ink is ink; it has no material and casts nothing. No embossed/debossed/shadowed headings, ever. */ .ev-machined :is(h1, h2, h3, h4, h5, h6) { text-shadow: none; color: var(--ev-ink); } /* -------------------------------------------------------------------------- Finish channel — liveness. Polished = live/editable, oxidized = inert/RO. The one channel that carries liveness; never encode it on floor luminance. -------------------------------------------------------------------------- */ .ev-fin-polished { filter: none; opacity: 1; } .ev-fin-oxidized { /* A read-only face reads dulled — a thin achromatic veil, no colour. */ filter: saturate(0.9) brightness(0.98); opacity: 0.86; } /* ===== src/typography.css ===== */ /* ========================================================================== Evident — the type system ========================================================================== Typography is a first-class part of the design language, not an afterthought layered on top of the material work. This partial CODIFIES the type decisions that were already implicit in the readout, the keys, and the study's canvas text, and states them as the single source of numeric truth for text — the same way tokens.css is the source of truth for the material channels. Founder feedback (2026-07-27, cortex-9kzmfzu): "Typography is also in scope of the design system." So it is declared here. ------------------------------------------------------------------------------ THE TWO RULES, APPLIED TO TYPE ------------------------------------------------------------------------------ Evident's two rules govern type exactly as they govern surfaces: 1. Nothing is depicted that is not there. Type is FLAT INK. There is no text-shadow, no emboss, no deboss, no engraving, no bevel on a glyph — ever (Invariant L3). A shadow on text would depict an occlusion event that did not happen: ink lies flat on the surface it is printed on; it does not float above it. Emboss/deboss is for SHAPES (the material planes), never for glyphs. A raised or recessed *plate* may carry flat ink; the ink itself stays flat. 2. Every visual channel carries exactly one meaning. On type the live channels are SIZE (rank in the reading order), WEIGHT (emphasis), and FAMILY (sans = prose, mono = machine value). HUE on text carries exactly one meaning and only one: the single accent, used only for a genuinely live/active/interactive value (a link, a live readout value). Resting body text is never accent-hued. Colour is otherwise spent only on the ink ladder, which is a LUMINANCE ramp (achromatic, R=G=B via the ink tokens), i.e. prominence, not a second hue. As TEXT the ladder is two rungs — --ev-ink and --ev-ink-dim. --ev-ink-faint is a non-text token; a third text rung cannot clear AA on Evident's floors (cortex-g2j0rmv, reasoned in full in tokens.css). ------------------------------------------------------------------------------ THE FAMILIES ------------------------------------------------------------------------------ Exactly two, both already in the token layer (tokens.css) and already in play in the readout and the keys — this partial does not introduce a new typeface, it codifies the pair: --ev-font-sans IBM Plex Sans — ALL prose, labels, headings, UI text. --ev-font-mono IBM Plex Mono — RESERVED for genuine machine values: ids, metrics, hostnames, readouts, numerals in a technical readout, code. Mono is EARNED, not decorative (Invariant L5). Reaching for mono to look "technical" on prose is the same failure as hue-for-decoration: it makes the family channel mean two things. If it is not a machine value, it is sans. ------------------------------------------------------------------------------ THE SCALE ------------------------------------------------------------------------------ A small, deliberate set — seven steps — on a MINOR-THIRD ratio (1.2) above the body, matching the study's own canvas text (body ~15.5px, headings ~19-23px) rather than re-deriving a fresh scale. Small text steps DOWN from body on the same ratio. Sizes are rem so a consumer's root font-size governs; the px in the comment is at the 16px browser default. token rem px role --ev-text-display 2.1875rem 35px one hero line per view, at most --ev-text-h1 1.75rem 28px page / section title --ev-text-h2 1.375rem 22px major heading --ev-text-h3 1.125rem 18px sub-heading --ev-text-body 0.96875rem 15.5px the sanctioned canvas body size --ev-text-small 0.8125rem 13px dense UI text, secondary labels --ev-text-caption 0.6875rem 11px the floor: captions, meta, chips The ratio between display and body is compressed relative to a strict 1.2^n because a screen hero rarely needs to shout as loud as print; the steps below body hold the ratio exactly so dense UI stays even. ------------------------------------------------------------------------------ WEIGHTS ------------------------------------------------------------------------------ Three IBM Plex weights, no more. A fourth weight is a channel splitting in two. --ev-weight-regular 400 body, readout values, running prose --ev-weight-medium 500 labels, small emphasis, table headers --ev-weight-semibold 600 headings, the one strong word in a line Bold-800 and light-300 are deliberately absent: 400/500/600 already carry the three levels of emphasis the reading order needs, and each extra weight is one more thing the eye must learn to tell apart at a glance. ------------------------------------------------------------------------------ LINE-HEIGHT ------------------------------------------------------------------------------ Three, mapped to purpose, not to size: --ev-leading-tight 1.15 display / headings (large type needs less air) --ev-leading-snug 1.3 UI blocks, labels, table cells --ev-leading-body 1.55 running prose (the study's canvas body value) ------------------------------------------------------------------------------ LETTER-SPACING ------------------------------------------------------------------------------ Type is set at its designed spacing (0) almost everywhere. Three deliberate exceptions, each earning its tracking: --ev-tracking-tight -0.01em large display/headings, where default tracking looks loose at size --ev-tracking-caps 0.04em caption / chip labels — caps need air to stay readable --ev-tracking-eyebrow 0.10em the OPEN kicker: the .ev-eyebrow "upperspace" section label, deliberately more generous than the caption (the study's .nest-cap) All-caps is itself rationed: it is a caption-level affordance (eyebrows, chip labels), never a heading treatment — a shouting heading is a size decision, not a caps decision. The caption (.ev-caption, 0.04em, faint) and the eyebrow (.ev-eyebrow, 0.10em, muted) are the two sanctioned all-caps roles. ========================================================================== */ :root { /* Family aliases live in tokens.css (--ev-font-sans / --ev-font-mono) and are consumed here; they are NOT redeclared, to keep one definition. */ /* Size scale — seven steps, minor third (1.2) below the body. */ --ev-text-display: 2.1875rem; /* 35px */ --ev-text-h1: 1.75rem; /* 28px */ --ev-text-h2: 1.375rem; /* 22px */ --ev-text-h3: 1.125rem; /* 18px */ --ev-text-body: 0.96875rem; /* 15.5px — the sanctioned canvas body size */ --ev-text-small: 0.8125rem; /* 13px */ --ev-text-caption: 0.6875rem; /* 11px */ /* Weights — three, no more. */ --ev-weight-regular: 400; --ev-weight-medium: 500; --ev-weight-semibold: 600; /* Line-height — by purpose. */ --ev-leading-tight: 1.15; --ev-leading-snug: 1.3; --ev-leading-body: 1.55; /* Letter-spacing — 0 by default; three earned exceptions. */ --ev-tracking-tight: -0.01em; --ev-tracking-caps: 0.04em; /* The eyebrow's generous tracking — deliberately MORE OPEN than the caption (0.04em). An eyebrow is a spaced-out kicker label above a heading; the wide tracking is what gives it the "upperspace" feel from the study's .nest-cap treatment. Rationed to the eyebrow only (cortex-x738nj7). */ --ev-tracking-eyebrow: 0.10em; } /* ========================================================================== Type classes — the small set of ready-made roles. ========================================================================== Utility classes that COMPOSE the tokens above (never inventing values), so greenfield markup can reach for a role by name. All share the sans family and flat ink; each states its size / weight / leading. .ev-mono is the one that swaps family, and only for genuine machine values. Every class sets `color: var(--ev-ink)` explicitly so a fragment rendered outside a themed body still gets legible flat ink. FLAT: none of these carry a text-shadow, by rule (Invariant L3). */ .ev-display, .ev-h1, .ev-h2, .ev-h3, .ev-body, .ev-small, .ev-caption, .ev-eyebrow, .ev-carve-label, .ev-aux, .ev-mono { font-family: var(--ev-font-sans); color: var(--ev-ink); text-shadow: none; /* explicit: type is flat ink, never embossed (L3). */ margin: 0; } .ev-display { font-size: var(--ev-text-display); font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-tight); letter-spacing: var(--ev-tracking-tight); } .ev-h1 { font-size: var(--ev-text-h1); font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-tight); letter-spacing: var(--ev-tracking-tight); } .ev-h2 { font-size: var(--ev-text-h2); font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-snug); letter-spacing: var(--ev-tracking-tight); } .ev-h3 { font-size: var(--ev-text-h3); font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-snug); } .ev-body { font-size: var(--ev-text-body); font-weight: var(--ev-weight-regular); line-height: var(--ev-leading-body); } .ev-small { font-size: var(--ev-text-small); font-weight: var(--ev-weight-medium); line-height: var(--ev-leading-snug); color: var(--ev-ink-dim); /* secondary text steps down the ink ladder. */ } /* Caption / eyebrow — the one sanctioned all-caps affordance. Caps EARN the caps tracking. The ink sits at the DIM rung, not a fainter one: caps + tracking + semibold at 11px already say "meta, not content", so dropping the ink as well was a second carrier of a meaning already carried — the thing rule 2 forbids — and it was the carrier that failed AA (1.83:1 on --ev-floor-n1). The caption is still distinguishable from body: it differs in case, tracking, weight and size. (cortex-g2j0rmv; ladder note in tokens.css.) */ .ev-caption { font-size: var(--ev-text-caption); font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-snug); letter-spacing: var(--ev-tracking-caps); text-transform: uppercase; color: var(--ev-ink-dim); } /* Eyebrow — the "upperspace" kicker. The study's .nest-cap treatment, promoted to a first-class Evident type role (cortex-x738nj7). A generously-tracked all-caps label that sits ABOVE a heading as a section kicker. It is a SIBLING of the caption, not a replacement: both are the sanctioned all-caps affordance, and the eyebrow is the OPEN one (0.10em vs the caption's 0.04em). Both now sit at the muted ink rung — the eyebrow used to be one step brighter than the caption, but that separation rode on --ev-ink-faint, which is no longer a text rung (cortex-g2j0rmv). TRACKING is what tells these two apart, and it always did the clearer job: an open kicker labels a section, a tight caption annotates the thing beside it. Flat ink, no shadow (L3). */ .ev-eyebrow, .ev-carve-label { font-size: 11px; font-weight: var(--ev-weight-semibold); line-height: var(--ev-leading-snug); letter-spacing: var(--ev-tracking-eyebrow); text-transform: uppercase; color: var(--ev-ink-dim); /* the muted-ink rung — a structural label. */ } /* IN-CARVE LABEL — the eyebrow's twin for a label that names the carve it SITS IN, rather than the thing that follows it. One class across the lip progression, the readout well and the baseplate, which is what makes the three read as one language (founder review 2026-07-28, cortex-4fg3ps6). THE DEFECT IT FIXES IS ARITHMETIC, NOT TASTE. The lip progression shipped with 34px of air above each rank label (the carve's padding) and 8px below it (the label's own margin). 34 ≠ 8, so every label sat against the sub-carve underneath and read as ITS heading — "RANK 1" appeared to title the rank-2 pocket rather than to name the rank-1 carve it was actually inside. Equal air on both sides is what makes a label belong to its own carve. The founder's word was "CENTER", and the same sentence defines what it means: "equal distance above the text and to the upper edge of the sub-carve below it". That is VERTICAL centring — the label centred in the band between its carve's top edge and the next cut. It is deliberately not horizontal: the well's title spans a left-aligned key/value grid and the baseplate's caption row ends in a right-landing .ev-aux, so a centred line would fight the composition in two of the three places it has to live. Naming that here so it reads as a decision, not an omission. :not(:last-child) because a label that is the ONLY thing in its carve already has the carve's own bottom padding under it; adding the gap on top would double the air below and unbalance it the other way. (The zero base margin comes from the shared type rule above, so only the gap is declared here.) */ .ev-carve-label:not(:last-child) { margin-bottom: var(--ev-carve-label-gap); } /* AUXILIARY TEXT — a short companion to a heading or a label: subordinate in the reading order, not subordinate in truth. A count, an id, a qualifier, a status figure ("3 variants", "fra-01", "read, not learned"). It is a ROLE, not a POSITION (founder ruling, cortex-l6wn803). The name says WHAT IT IS; "secondary" would name a rank and "subtext" a position, both of which were explicitly rejected. Alignment is therefore NOT part of this rule — where an aux LANDS is the host component's business, expressed as a context rule beside that component (see .ev-baseplate__cap in baseplate.css). It replaces .ev-eyebrow__val, which was scoped as a BEM element of the eyebrow and mono by default. Both were wrong: the companion appears beside headings and captions too, not only eyebrows, and most of its call sites are prose ("the entity header", "no modals, no toasts") where mono was decoration, which Invariant L5 forbids. Mono is now EARNED via --mono. (Removed cleanly, no alias, per cortex-qairdc1; row in docs/removed-names.tsv.) Sits at the caption step (11px) so it matches the eyebrow it most often sits beside — a companion that outsized its own label would invert the hierarchy the role exists to express. Medium weight and normal tracking against the eyebrow's semibold + 0.10em: the two are told apart by CASE and TRACKING, the carriers that already do that job, not by a second colour rung. Ink sits at the dim rung — 7.33:1 on --ev-floor-n2, 6.97:1 on the deepest --ev-floor-n1, 7.67:1 / 8.04:1 dark (historical v16 contrast audit). */ .ev-aux { font-family: var(--ev-font-sans); font-size: var(--ev-text-caption); font-weight: var(--ev-weight-medium); line-height: var(--ev-leading-snug); letter-spacing: normal; text-transform: none; color: var(--ev-ink-dim); } /* Mono is EARNED (L5): opt in only for a GENUINE machine value — a node id, a measurement, a count. Not for prose that happens to be short. The tracking is the readout's, because mono figures otherwise touch. */ .ev-aux--mono { font-family: var(--ev-font-mono); font-weight: var(--ev-weight-regular); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; } /* Mono — the family swap, for GENUINE machine values only (L5). Inherits size from context so it aligns with the sans it sits beside; use .ev-body etc. for size, .ev-mono for family. The tiny positive tracking matches the readout, where mono figures otherwise touch. */ .ev-mono { font-family: var(--ev-font-mono); font-weight: var(--ev-weight-regular); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; /* numerals align in columns. */ } /* An accent text value — hue as INK, the ONE allowed use of colour on type: a genuinely live / active / interactive value (a link, a live readout digit). Never on resting prose. Composable onto any of the classes above. Takes --ev-accent-text, NOT --ev-accent: the accent is a FACE value and is illegible as ink on a light ground (1.43:1 on the canvas). --ev-accent-text is the same hue walked down a luminance step, worst measured 6.26:1 in light; in dark it resolves back to the accent itself. See tokens.css. (cortex-8jhd90a) */ .ev-ink-accent { color: var(--ev-accent-text); } /* THE TEXT LINK — one interactive object, one uninterrupted live channel. Accent ink is a RESTING property of a text link, not a hover effect. Hue therefore says exactly one thing: "this whole run is interactive". Pointer or keyboard arrival uses a second channel, the underline, while keyboard focus also receives a boundary that cannot be mistaken for hover. This is the general rule for linked domain names, ids and prose destinations; it is not a Control Center exception. The whole anchor takes --ev-accent-text. Never colour only the machine-value span inside a longer link: that draws a boundary inside an object that has none and turns hue into emphasis. Internal hierarchy may use the family channel (.ev-mono for the genuine machine value, sans for its gloss), but every child inherits the same ink. Do not put .ev-ink-dim, semantic ink or another colour carrier inside .ev-link. --ev-accent is deliberately absent: it is the lit FACE value and measures only 1.43:1 on the light canvas. --ev-accent-text is the AA-safe ink value (worst public light ground 6.26:1); --ev-accent-edge is the independently named focus/boundary carrier. The identical hue does not merge their meanings because ink and geometry are different visual channels. */ .ev-link { color: var(--ev-accent-text); text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; } .ev-link :where(*) { color: inherit; } .ev-link:is(:hover, :focus-visible) { text-decoration-color: currentColor; } .ev-link:focus-visible { outline: 2px solid var(--ev-accent-edge); outline-offset: 2px; border-radius: 2px; } /* The ink ladder as explicit text utilities, for prominence (a luminance ramp, not a second hue). TWO rungs, because the ladder is two rungs deep as text — there is deliberately no .ev-ink-faint. It existed, and it was a footgun: a colour utility a consumer could put on any text, that failed AA on every ground Evident defines (1.83:1 on --ev-floor-n1). Removed rather than darkened, because the only passing value for it IS --ev-ink-dim (cortex-g2j0rmv — see the ink-ladder note in tokens.css). */ .ev-ink-dim { color: var(--ev-ink-dim); } /* ===== src/components/keys.css ===== */ /* ========================================================================== Evident component — keys (buttons) ========================================================================== Public de-scoped button vocabulary. BEM `--` modifiers under the `ev-` namespace so these NEVER collide with Bootstrap's own `.btn-primary` / `.btn-lg` / `.btn-sm` (the exact collision cortex-q29li00 measured). .ev-key the default key (md) .ev-key--xs/sm/md/lg/xl the five-step size scale (ratio 1.125) .ev-key--primary the lit accent key (dark ink, Invariant 7) .ev-key--danger neutral-at-rest destructive key .ev-key__glyph canonical action glyph slot .ev-key__label durable action wording A key is a RAISED cast part (molded), so it sits on the molded outer falloff, never on a rim. Size is ORTHOGONAL to variant: a size modifier sets only geometry, a variant sets only colour, and they compose. Study source: "Keys, one material two colours". Verified treatment ported from CC's .btn / .btn-primary / .rounded-white .btn rules. (cortex-1r37qcl, cortex-mn5hkp8) DANGER MARKUP CONTRACT ---------------------- Every .ev-key--danger has a specific accessible name. Where space permits, pair the standard trash glyph (the 20x20 path shown in the showcase, aria-hidden="true") with explicit destructive wording in .ev-key__label. Icon-only use is the compact exception and MUST put that wording in an aria-label on the control. Colour never carries destructive identity by itself: the glyph and accessible wording remain present on touch/non-hover devices while warm ink and burr are interaction feedback only. ========================================================================== */ .ev-key { --ev-direct-carve-floor: initial; --ev-key-lift-scale: 1; /* The cast body, composed HERE and not in the token file, because a var() inside a custom property resolves where it is DECLARED. --ev-key-lift-scale is per-key state, so these three layers can only be built on the key itself; built at :root they compute guaranteed-invalid and every box-shadow naming them collapses to `none` (cortex-mz9m49a). A size modifier re-declares the scale on this same element, so its computed value — not the md default above — is what these substitute. */ --ev-key-body-arrise: inset 0 0 0 calc(1px * var(--ev-key-lift-scale)) var(--ev-key-body-arrise-ink); --ev-key-body-wall: inset 0 0 calc(3px * var(--ev-key-lift-scale)) var(--ev-key-body-wall-ink); --ev-key-body-roll: inset 0 0 calc(9px * var(--ev-key-lift-scale)) var(--ev-key-body-roll-ink); /* geometry — md default */ height: var(--ev-btn-height-md); padding: var(--ev-btn-pad-y-md) var(--ev-btn-pad-x-md); font: 600 var(--ev-btn-font-md)/1 var(--ev-font-sans); border-radius: var(--ev-btn-radius-md); /* raised cast key on land */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; border: 0; background-color: var(--ev-metal-hi); background-image: var(--ev-key-crown); color: var(--ev-ink); cursor: pointer; user-select: none; text-decoration: none; transition: var(--ev-transition-fast); box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-contact-1), var(--ev-ambient-1); } /* HOST-ELEMENT NEUTRALITY — the hover half. A key is a PART, and which element hosts it is a semantic choice: `.ev-notice__action` ships the same key as an for the way onward and a CSS reveals the bubble for BOTH pointer hover and keyboard focus. A consumer that needs click/touch persistence may set data-open="true"; that is state input, not a positioning runtime. The initial HTML is complete and correctly associated without JavaScript. MATERIAL: - The bubble is molded, not machined: information has been ADDED beside the control, so it is a small cast plate above the bench. - The centered nib is part of that plate, not a directional-light arrow. It points to the trigger while every shadow remains axial (zero x/y offset). - It is fully achromatic. A tooltip explains; it carries no status channel. POSITIONING: The default seats below the trigger, centered. Placement is deliberately bounded to that one stable recipe: consumers may progressively enhance the physical coordinates when viewport collision demands it, but no JS is required for the correct initial render. ========================================================================== */ .ev-tooltip { position: absolute; z-index: 100; inset-block-start: calc(100% + 0.625rem); inset-inline-start: 50%; width: max-content; max-width: min(28ch, calc(100vw - 2rem)); padding: 0.5rem 0.6875rem; background: var(--ev-metal-hi); color: var(--ev-ink); border: 1px solid var(--ev-rule); border-radius: var(--ev-radius-sm); box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-1), var(--ev-contact-1), var(--ev-ambient-1); font: 500 0.75rem/1.4 var(--ev-font-sans); letter-spacing: 0; text-align: start; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -0.2rem); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s; } /* The molded nib is an integral square turned 45deg. Its upper and left edges use the same neutral boundary as the plate; no x/y shadow direction is added. */ .ev-tooltip::before { content: ""; position: absolute; z-index: -1; inset-block-start: -0.3125rem; inset-inline-start: 50%; width: 0.625rem; height: 0.625rem; background: inherit; border-block-start: 1px solid var(--ev-rule); border-inline-start: 1px solid var(--ev-rule); transform: translateX(-50%) rotate(45deg); } /* The trigger is author-owned; Evident only reads the explicit relationship. :focus covers programmatic focus and older engines, while :focus-visible remains the keyboard-intent path. Hover is an addition, never the only path. */ [aria-describedby]:is(:hover, :focus, :focus-visible) + .ev-tooltip, .ev-tooltip[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } /* A tooltip is descriptive content, not a popover the pointer can enter. Hide any accidentally nested control outright: pointer-events alone would still leave a tabindex in the keyboard order, turning the leaf into a broken non-modal. This makes the interaction ban self-enforcing. */ .ev-tooltip :is(a, button, input, select, textarea, [tabindex]) { display: none !important; } /* ===== src/components/copyable.css ===== */ /* ========================================================================== Evident component — copyable (flat value + copy key) ========================================================================== A copyable value is still TEXT. The value remains flat, selectable and readable when JavaScript is absent; copying is an optional action beside it, represented by a small real key: mysql.example.org The key starts hidden. dist/evident-copyable.js reveals it only when the Clipboard API is available in a secure context, so an unenhanced component never advertises an action it cannot perform. The initial HTML therefore remains complete without JavaScript: the value can always be selected and copied manually. FEEDBACK: The key itself carries the visible result at the locus of action: Copy becomes Copied on success or Retry on failure. Its fixed inline size makes that state change inert to surrounding sentence and table-cell layout. The adjacent polite live region carries the fuller non-visual result but is permanently clipped out of layout rather than conditionally display:none; assistive technology can therefore announce every update without a third inline child moving the host composition. Icon-only feedback composes the existing .ev-tooltip plate as .ev-copyable__tip. It is a result, not an annotation: hover and focus never reveal it, it takes no focus, and pointer, keyboard and touch activation all use the same click path. Success remains for 1.6s while the checkmark is the durable confirmation. Failure is actionable feedback, so its Retry plate persists until another copy attempt or Escape. Only the latest activation in a document may own a confirmation; stale asynchronous results are inert. MODIFIERS: --mono genuine machine values: ids, keys, addresses and hostnames --truncate one-line ellipsis; the full value remains in the DOM and copy source, and authors should provide it as the value's title too ========================================================================== */ .ev-copyable { display: inline-flex; align-items: center; gap: 0.5rem; max-inline-size: 100%; color: var(--ev-ink); font: 400 var(--ev-text-small) / var(--ev-leading-snug) var(--ev-font-sans); vertical-align: middle; } /* A repeated value list owns one common action edge. Each value remains a complete copyable component; the carrier only gives its keys a shared datum so a scan does not zig-zag between different value lengths. */ .ev-copyable-list { display: grid; gap: 0.875rem; inline-size: 100%; } .ev-copyable-list > .ev-copyable { display: grid; grid-template-columns: minmax(0, 1fr) auto; inline-size: 100%; } .ev-copyable__value { min-inline-size: 0; overflow-wrap: anywhere; user-select: text; cursor: text; } .ev-copyable--mono .ev-copyable__value { font-family: var(--ev-font-mono); } .ev-copyable--truncate { inline-size: 100%; } .ev-copyable--truncate .ev-copyable__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } /* The copy action keeps an XS key's 31px pointer target, but sheds the raised cast face: this is a secondary instrument beside the value, not a peer to it. The readable button text remains in the accessibility tree while the visual state is a compact 14px glyph. Copy/Copied/Retry therefore share one inert footprint and consumers need no extra icon markup. */ .ev-copyable__copy { --ev-copyable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='9' height='9' rx='1.5'/%3E%3Cpath d='M4.5 13.5h-1A1.5 1.5 0 0 1 2 12V3.5A1.5 1.5 0 0 1 3.5 2H12a1.5 1.5 0 0 1 1.5 1.5v1'/%3E%3C/svg%3E"); flex: 0 0 auto; box-sizing: border-box; inline-size: var(--ev-btn-height-xs); min-inline-size: var(--ev-btn-height-xs); padding: 0; overflow: hidden; white-space: nowrap; font-size: 0; line-height: 0; background: transparent; color: var(--ev-ink-dim); box-shadow: none; } .ev-copyable__copy::before { content: ""; inline-size: 0.875rem; block-size: 0.875rem; background: currentColor; -webkit-mask: var(--ev-copyable-icon) center / contain no-repeat; mask: var(--ev-copyable-icon) center / contain no-repeat; pointer-events: none; } .ev-copyable__copy:not(:disabled):not(.ev-key--disabled):hover { background: transparent; color: var(--ev-accent-text); box-shadow: none; } .ev-copyable__copy:active { box-shadow: none; } .ev-copyable__copy[data-copy-state="pending"] { opacity: 0.55; } .ev-copyable__copy[data-copy-state="copied"] { --ev-copyable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10.5 3.5 3.5L16 5.5'/%3E%3C/svg%3E"); color: var(--ev-success); } .ev-copyable__copy[data-copy-state="failed"] { --ev-copyable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 7V3.5H12'/%3E%3Cpath d='M15 4.5a6.5 6.5 0 1 0 1.2 7.2'/%3E%3C/svg%3E"); color: var(--ev-danger); } .ev-copyable__copy[hidden] { display: none; } .ev-copyable__feedback { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The result plate is fixed to coordinates measured from the action key. That takes it out of every sentence/table layout and permits the enhancement to clamp its centre to the viewport before choosing above/below placement. The base .ev-tooltip supplies the material; these rules only specialize the result interaction and physical locus. */ .ev-copyable__tip.ev-tooltip { position: fixed; inset-block-start: var(--ev-copyable-tip-block, 0); inset-inline-start: var(--ev-copyable-tip-inline, 0); max-inline-size: min(24ch, calc(100vw - 1rem)); transform: translate(-50%, -0.2rem); } .ev-copyable__tip.ev-tooltip[data-open="true"] { transform: translate(-50%, 0); } .ev-copyable__tip.ev-tooltip[data-placement="above"] { transform: translate(-50%, calc(-100% + 0.2rem)); } .ev-copyable__tip.ev-tooltip[data-placement="above"][data-open="true"] { transform: translate(-50%, -100%); } .ev-copyable__tip.ev-tooltip[data-placement="above"]::before { inset-block-start: auto; inset-block-end: -0.3125rem; border-block-start: 0; border-inline-start: 0; border-block-end: 1px solid var(--ev-rule); border-inline-end: 1px solid var(--ev-rule); } @media (prefers-reduced-motion: reduce) { .ev-copyable__tip.ev-tooltip { transition: none; } } /* ===== src/components/glass.css ===== */ /* ========================================================================== Evident component — glass (the content-aperture insert material) ========================================================================== Glass is a third INSERT material (after molded metal and machined cuts). It is a transparent PART set into a machined aperture (bezel/gasket). Its JOB is to give CONTENT a material home: a glowing LED readout or a coloured avatar sits BEHIND an achromatic glass window in the panel, so the panel stays pure achromatic machined metal and content-colour earns its place. Promoted from the standalone study (demos/glass-study.html) — cortex-t8w48yi. THE INVARIANTS glass holds: 1. ONE MEANING — glass is used ONLY for content/display apertures (LED readout, avatar, status lens). Never a generic glossy finish. FROSTED is likewise gated to APERTURES only — never a generic surface finish (founder ruling B). 2. GLASS IS ACHROMATIC — every glass surface token is white / neutral ALPHA (--ev-glass-*, in tokens.css). All colour comes from the CONTENT behind the glass. 3. OPTICAL SIGNATURE = its channel — a small AXIAL specular glint (symmetric, near the top; a glint, NOT a light direction, so L1 holds), a bright inner bevel/refraction rim + a slight dark outer contact where the glass meets the aperture wall, and it reveals what is behind (content sits BELOW the glass surface). FOUNDER RULING A — LED glow is ALLOWED as emission from LIT CONTENT behind glass: a sanctioned carve-out of the flat-text (L3) invariant. The panel's own labels stay flat; ONLY the lit display content (the glowing value) emits. The glow is CONTENT (accent hue), not decoration on panel ink. PACKAGING — the pure-CSS box-shadow-rim path below is the BASE (works standalone, no JS, all engines). The Chromium `feDisplacementMap` edge refraction is an ENHANCEMENT layer, gated behind `@supports (backdrop-filter: url(#ev-glass-refract-96))`. The SVG defs + the canvas displacement-map generator cannot live in a .css file, so they ship as an OPTIONAL asset, dist/evident-glass-refract.js: consumers include that ONE script to activate refraction; without it they get the CSS fallback rim. A `backdrop-filter: url(#missing)` degrades cleanly (the base box-shadow rim still renders) when the JS is absent. ========================================================================== */ /* ========================================================================== THE GLASS PART — the shared insert primitive. A glass insert is TWO nested things: .ev-aperture — a machined CUT in the panel (bezel/gasket). A real recess: lip, wall, inset shadow. This is ordinary Evident machining. .ev-glass — the transparent PART seated in that cut. It sits ON TOP of the content but reveals it — the content shows through. The optical signature is built from THREE stacked pseudo/box layers, all achromatic: (a) box-shadow: the bevel rim (bright, inside) + the contact seam (dark, at the aperture wall). Two parts meeting. (b) ::before — the AXIAL top glint: a soft symmetric white ellipse near the top, horizontally centred (zero x-bias — a glint, not a light). (c) ::after — the under-glass scrim: a hair of neutral darkening + a very faint vertical falloff so the content reads as sitting BELOW a surface. ========================================================================== */ /* The machined aperture — the cut the glass seats into. Plate is n2, so the aperture floor is n1 (one rung deeper); its own rank-2 cut shading reads the recess before any glass or content lands in it. */ .ev-aperture { position: relative; background-color: var(--ev-direct-carve-floor, var(--ev-floor-n1)); box-shadow: var(--ev-r2-line), var(--ev-r2-lip), var(--ev-r2-wall), var(--ev-r2-rim); overflow: hidden; } /* The glass part itself — fills the aperture, sits over the content. It draws nothing but light: the content behind is what carries colour. */ .ev-glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* (a) the bevel rim (bright, just inside) + the outer contact seam (dark, at the aperture wall). Both achromatic; this is where two PARTS meet. */ box-shadow: var(--ev-glass-bevel), var(--ev-glass-bevel-soft), var(--ev-glass-contact), var(--ev-glass-contact-2); /* (c-base) the whole pane carries a hair of neutral darkening so even before the glint, content reads as BELOW a surface. A grey scrim, never a hue. */ background: var(--ev-glass-underscrim); } /* (b) the AXIAL specular glint — a soft symmetric white ellipse near the top. Horizontally CENTRED (50%): a glint on a curved pane, not a directional light, so Invariant L1 holds. Fades out well before mid-height. */ .ev-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 42% at 50% -6%, var(--ev-glass-glint) 0%, var(--ev-glass-glint-soft) 40%, transparent 72%); } /* (c-falloff) a very faint top-to-bottom darkening — the content dims a touch toward the bottom of the pane, the way real content behind glass loses a little light with depth. Achromatic. */ .ev-glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--ev-glass-underscrim) 100%); } /* ---- CLEAR vs FROSTED --------------------------------------------------- Clear = sharp/live (default). Frosted = soft/ambient: a milky white-alpha veil laid over the content to DIFFUSE it. The veil is achromatic; it dims and softens the content's colour without tinting it. (backdrop-filter blurs the content behind where supported; the veil is the guaranteed floor.) FROSTED IS GATED TO APERTURES ONLY (founder ruling B) — it is a lens finish, never a generic surface treatment. */ .ev-glass--frosted { background: var(--ev-glass-frost), var(--ev-glass-underscrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ev-glass--frosted::before { /* a frosted pane scatters the glint into a broader, softer bloom */ background: radial-gradient(80% 60% at 50% -10%, var(--ev-glass-glint) 0%, var(--ev-glass-glint-soft) 50%, transparent 85%); } /* ========================================================================== PIECE 1 — the LIT READOUT CLUSTER (.ev-readout-cluster--lit). A machined instrument panel whose digits GLOW (accent) as if lit behind a clear glass cover. THIS IS A MODIFIER, NOT A BLOCK. The plate is `.ev-readout-cluster` (src/components/readout.css) — the same molded faceplate, the same swoop, the same radius, the same three-layer shadow, the same milled-pocket grid. What the lit treatment actually changes is the CELL, and only the CELL: flat (.ev-readout-cluster) a shallow milled POCKET, flat ink. lit (.ev-readout-cluster--lit) a milled APERTURE with a GLASS insert over a smoked display substrate, and a value that LUMINATES. One block, two cell treatments. This section therefore carries no block-level rule at all — there is nothing about the plate that differs, so there is nothing to override. Until cortex-v41smw1 this shipped as a separate "instrument" block whose plate rule was a verbatim copy of the cluster's (its own comment said so: "molded faceplate — same as the readout cluster's plate"). That block and its five element names were REMOVED, cleanly and without an alias, per cortex-qairdc1. All six removed names, and what to use instead, are in docs/removed-names.tsv. MARKUP:

The trailing `.ev-glass` span is the pane itself — the lit cell is an aperture, and an aperture without its glass is just a dark hole. The glow is the CONTENT (accent) — colour behind the achromatic glass. The panel, bezel and glint stay pure grey. LED emission is sanctioned by founder ruling A; the panel's own labels stay flat. INTERACTION (cortex-g8own7f) ---------------------------- Glass sits ABOVE its content, so an instrument pane may itself be clickable. An `` or `