/* THE TRAVELLING UNDERLINE AND THE LIGHT THAT RISES OFF IT. Placed by `underline.js` on every `[data-underline]` group; see that file for which item it marks and when it travels. ── STRUCTURE, THEN PAINT ──────────────────────────────────────────────── Owner, 2026-11-04: the effect is *"a structural thing not just a style"* and is *"applied to all skins"*. So this file is in two halves: STRUCTURE - where the line is, its size, that it shows, and that it slides. Declared `!important`. In the cascade an important declaration in a LAYER beats any unlayered one, important or not - and every skin stylesheet is unlayered - so no skin rule can hide the line, pin it, or stop its travel. That is the point of the `!important`, and the only place in the app it is used this way. PAINT - colour, taper, glow, thickness and the aurora. Every value reads an `--underline-*` token whose FALLBACK is Supernoval's List | Map line exactly, so a skin that sets nothing gets the full effect, and a skin that wants its own look sets tokens, never selectors. ── THE TOKENS A SKIN MAY SET ──────────────────────────────────────────── --underline-thickness the line's weight (2px) --underline-color its brightest middle (--text 94% + --accent) --underline-edge its shoulders (--text 82% + --accent) --underline-taper its two ends (transparent) --underline-shoulder where the shoulders sit (22%) --underline-glow its box-shadow bloom (0 0 8px --accent 34%) --underline-lit the light rising off a horizontal line (falls back to a host's --control-lit, then to the three ellipses below) --underline-lit-y the same, off a vertical line (falls back to --control-lit-inline, then to the three ellipses turned ninety degrees) --underline-offset nudge the line off the item's edge (0px) Set them on the skin's root (`[data-skin="x"]`). The fallbacks are written inline, not declared on `:root`, so `var(--text)` and `var(--accent)` are resolved AT THE LINE - a subtree that re-tints itself re-tints its line. ── THE LIGHT IS UNDER THE LABEL, THE LINE IS OVER EVERYTHING ──────────── `.control-underline-lit` sits at `z-index: -1` and the group is `isolation: isolate`, so the light paints over the group's own ground and under its labels - the owner's "coming up from the bottom of the element into the inside of the element", which needs the label above it. The line has no z-index, so it paints over the items it marks. The group rule is `:where()`, zero specificity, so a group that is already positioned (sticky, say) keeps its own position. */ @layer components { :where([data-underline]) { position: relative; isolation: isolate; } /* ── STRUCTURE ────────────────────────────────────────────────────────── */ .control-underline, .control-underline-lit { position: absolute !important; inset: 0 auto auto 0 !important; margin: 0 !important; pointer-events: none; transition: translate var(--dur-3) var(--ease-spring), inline-size var(--dur-3) var(--ease-spring), block-size var(--dur-3) var(--ease-spring) !important; } .control-underline:not([hidden]), .control-underline-lit:not([hidden]) { display: block !important; opacity: 1 !important; } /* Horizontal: under the item, at its floor. */ .control-underline[data-axis="x"] { translate: var(--underline-x, 0px) calc(var(--underline-y, 0px) + var(--underline-h, 0px) - var(--underline-thickness, 2px) + var(--underline-offset, 0px)) !important; inline-size: var(--underline-w, 0px) !important; block-size: var(--underline-thickness, 2px) !important; } /* Vertical: beside the item, on its leading edge unless the group says `--underline-side: end`. `data-side` is PHYSICAL (left/right), resolved by the script from the direction. */ .control-underline[data-axis="y"] { translate: calc(var(--underline-x, 0px) - var(--underline-offset, 0px)) var(--underline-y, 0px) !important; inline-size: var(--underline-thickness, 2px) !important; block-size: var(--underline-h, 0px) !important; } .control-underline[data-axis="y"][data-side="right"] { translate: calc(var(--underline-x, 0px) + var(--underline-w, 0px) - var(--underline-thickness, 2px) + var(--underline-offset, 0px)) var(--underline-y, 0px) !important; } /* The light fills the item's own box, so its floor IS the line. */ .control-underline-lit { z-index: -1; translate: var(--underline-x, 0px) var(--underline-y, 0px) !important; inline-size: var(--underline-w, 0px) !important; block-size: var(--underline-h, 0px) !important; } .control-underline-lit[data-axis="y"][data-side="right"] { scale: -1 1; } /* A scroller between the host and the item hides part of the item, and the line and its light stop at the same edge. Negative insets on the other axis leave the glow its room. */ .control-underline[data-clipped][data-axis="x"], .control-underline-lit[data-clipped][data-axis="x"] { clip-path: inset(-4rem var(--underline-clip-end, 0px) -4rem var(--underline-clip-start, 0px)); } .control-underline[data-clipped][data-axis="y"], .control-underline-lit[data-clipped][data-axis="y"] { clip-path: inset(var(--underline-clip-start, 0px) -4rem var(--underline-clip-end, 0px) -4rem); } /* PLACED, NOT TRAVELLED: the first placement, a resize, a scroll. */ [data-underline-instant] > :is(.control-underline, .control-underline-lit) { transition: none !important; } /* Reduced motion KEEPS THE LINE and drops the travel: it is information about which item is live, so it steps there rather than disappearing. Both the OS setting and the in-app one (`data-motion` on the root). */ @media (prefers-reduced-motion: reduce) { :is(.control-underline, .control-underline-lit) { transition: none !important; } } :root[data-motion="reduced"] :is(.control-underline, .control-underline-lit) { transition: none !important; } /* ── PAINT ────────────────────────────────────────────────────────────── */ /* THE LINE IS THE BRIGHTEST THING AND IT TAPERS (owner, 2026-09-25, with a reference image): near-white with a breath of the accent, brightest across the middle, gone at both ends, so the bloom reads as light coming FROM it. */ .control-underline { --_core: var(--underline-color, color-mix(in srgb, var(--text) 94%, var(--accent))); --_edge: var(--underline-edge, color-mix(in srgb, var(--text) 82%, var(--accent))); --_taper: var(--underline-taper, transparent); --_shoulder: var(--underline-shoulder, 22%); box-shadow: var(--underline-glow, 0 0 8px color-mix(in oklab, var(--accent) 34%, transparent)); } .control-underline[data-axis="x"] { background: linear-gradient(to right, var(--_taper) 0%, var(--_edge) var(--_shoulder), var(--_core) 50%, var(--_edge) calc(100% - var(--_shoulder)), var(--_taper) 100%); } .control-underline[data-axis="y"] { background: linear-gradient(to bottom, var(--_taper) 0%, var(--_edge) var(--_shoulder), var(--_core) 50%, var(--_edge) calc(100% - var(--_shoulder)), var(--_taper) 100%); } /* THE AURORA (owner, 2026-09-25): wide, shallow ellipses anchored on the line, a pale core with `--accent-2` gathering to one side and `--accent` to the other, each transparent before it reaches any edge. */ .control-underline-lit[data-axis="x"] { background: var(--underline-lit, var(--control-lit, radial-gradient(34% 80% at 50% 100%, color-mix(in srgb, var(--text) 13%, transparent) 0%, transparent 68%), radial-gradient(30% 150% at 30% 100%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 62%), radial-gradient(30% 150% at 70% 100%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%))); } /* The same three, turned ninety degrees: anchored on a leading-edge line and rising across the item. */ .control-underline-lit[data-axis="y"] { background: var(--underline-lit-y, var(--control-lit-inline, radial-gradient(80% 34% at 0% 50%, color-mix(in srgb, var(--text) 13%, transparent) 0%, transparent 68%), radial-gradient(150% 30% at 0% 30%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 62%), radial-gradient(150% 30% at 0% 70%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%))); } }