/* =========================================================================== 1) SHARED TOKENS — layered onto every register root. A surface gets these for free whether it lives under .reg-control, .reg-daylight, or the .daylight scope (operator pages). Same NAMES across all three → one source of truth. =========================================================================== */ .reg-control, .reg-daylight, .daylight{ /* MOTION — subtle by mandate: 120–240ms, eased. */ --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --ease:cubic-bezier(.4,0,.2,1); /* standard */ --ease-out:cubic-bezier(.16,1,.3,1); /* decelerate — entrances */ --ease-spring:cubic-bezier(.34,1.56,.64,1); /* gentle overshoot — press release */ /* ELEVATION — adds a 3rd, higher tier above the existing --sh-1/--sh-2 for popovers/lifted cards; --elev-press is the pressed inset. */ --sh-3:0 8px 24px rgba(8,11,16,.16),0 18px 56px rgba(8,11,16,.14); --elev-press:inset 0 1px 2px rgba(8,11,16,.12); /* FOCUS — one accessible, premium ring color + width, register-tinted. */ --ring:color-mix(in srgb, var(--spg, var(--red)) 55%, transparent); --ring-w:3px; /* TYPE SCALE — clear hierarchy; figures stay mono via the existing .mono. */ --t-eyebrow:10.5px; --t-cap:11.5px; --t-body:13.5px; --t-h4:15px; --t-h3:17px; --t-h2:21px; --t-h1:26px; --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.55; /* SPACING RHYTHM — a single 4px-based scale for consistent gaps/padding. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; } /* The dark control tower wants deeper ambient shadows than the light paper. */ .reg-control, .op-control .daylight{ --sh-3:0 8px 24px rgba(0,0,0,.45),0 18px 56px rgba(0,0,0,.40); --elev-press:inset 0 1px 2px rgba(0,0,0,.45); --ring:color-mix(in srgb, var(--spg, var(--red)) 70%, transparent); } /* =========================================================================== 2) FOCUS-VISIBLE — accessible + premium. ONE ring on every interactive element across both registers. Keyboard users get a clear 3px tinted ring + subtle offset; pointer users are unaffected (:focus-visible, not :focus). Scoped to the three roots so it can't bleed into un-themed markup. =========================================================================== */ .reg-control :focus-visible, .reg-daylight :focus-visible, .daylight :focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg, var(--paper)), 0 0 0 calc(2px + var(--ring-w)) var(--ring); border-radius:var(--r-xs); transition:box-shadow var(--dur-1) var(--ease); } /* Elements that already carry a radius keep it — the ring follows their shape. */ .reg-control button:focus-visible, .reg-daylight button:focus-visible, .daylight button:focus-visible, .reg-control a:focus-visible, .reg-daylight a:focus-visible, .daylight a:focus-visible, .reg-control [role="button"]:focus-visible, .reg-daylight [role="button"]:focus-visible, .daylight [role="button"]:focus-visible, .reg-control summary:focus-visible, .reg-daylight summary:focus-visible, .daylight summary:focus-visible, .reg-control input:focus-visible, .reg-daylight input:focus-visible, .daylight input:focus-visible, .reg-control select:focus-visible, .reg-daylight select:focus-visible, .daylight select:focus-visible, .reg-control textarea:focus-visible, .reg-daylight textarea:focus-visible, .daylight textarea:focus-visible{ border-radius:inherit; } /* =========================================================================== 3) MOTION UTILITIES — opt-in classes a surface adds to existing markup. Subtle by design (120–240ms). All reduced-motion-safe (block at the bottom). =========================================================================== */ /* card hover-lift — a crafted rise + shadow bump on hover; settles on press. */ .u-lift{transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease);will-change:transform} .u-lift:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .u-lift:active{transform:translateY(0);box-shadow:var(--sh-1);transition-duration:var(--dur-1)} /* button press — tactile scale-down + inset on :active. Pair with .u-press on any clickable; works on top of .btn/.btn-primary/etc. without restyling them. */ .u-press{transition:transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease)} .u-press:active:not(:disabled){transform:scale(.97);box-shadow:var(--elev-press)} /* interactive base — hover/cursor affordance for a whole clickable row/tile. */ .u-interactive{cursor:pointer;transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)} .u-interactive:hover{background:var(--mist)} /* smooth disclosure — for the

rate cards (and any expandable). The panel slides+fades open; the chevron rotates. Add .u-disclose to

; wrap the revealed body in .u-disclose-body and the marker in .u-chev. The native marker is already hidden by the rate-card CSS; this just animates it. */ .u-disclose .u-chev{transition:transform var(--dur-2) var(--ease)} .u-disclose[open] .u-chev{transform:rotate(180deg)} .u-disclose-body{animation:u-disclose-in var(--dur-3) var(--ease-out)} @keyframes u-disclose-in{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} } /* section entrance — a subtle fade+rise on mount. Add .u-rise to a section; for staggered lists set --i (the index) on each child of a .u-rise-stagger parent. */ .u-rise{animation:u-rise var(--dur-3) var(--ease-out) both} .u-rise-stagger > *{animation:u-rise var(--dur-3) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 45ms)} @keyframes u-rise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } /* fade-only entrance (no movement) for overlays/popovers. */ .u-fade{animation:u-fade var(--dur-2) var(--ease-out) both} @keyframes u-fade{from{opacity:0}to{opacity:1}} /* =========================================================================== 4) STATE UTILITIES — refined hover/active/disabled affordances that work on top of the existing primitives without re-theming them. =========================================================================== */ /* a uniform disabled treatment for any control. */ .u-disabled, .reg-control [aria-disabled="true"], .reg-daylight [aria-disabled="true"], .daylight [aria-disabled="true"]{ opacity:.5;cursor:default;pointer-events:none; } /* card surface helper — gives plain markup the token card look + lift in one. */ .u-card{background:var(--raised);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--sh-1)} /* gentle input focus tint (complements the focus ring) — opt-in on fields. */ .u-field{transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)} .u-field:hover:not(:disabled){border-color:var(--line-strong)} /* =========================================================================== 4b) UNIVERSAL that has a CUSTOM border / radius but NO appearance:none lets the browser paint its native control chrome (the pale UA arrow box / wavy edge) on the right — which reads broken against the refined dark/light fields. Several surfaces styled their selects ad-hoc (.aq-select on Rates, .lc-select on Margin/Pricing, the Tailwind-classed Duty selects, the inline-styled Rate-Intake selects, the booking wizard's Currency/ Container/Packing/DG/Temp/Fumigation selects) WITHOUT appearance:none, so each one squiggled. This is the ONE place that fixes ALL of them — for EVERY native at all) are unaffected — we only ADD appearance:none where missing and supply a chevron via a CSS var the surface can still override. color-scheme is pinned per register so the popped- open native option LIST also renders dark (tower) / light (paper), not the UA default. The cursor + transition make it feel like a real control. =========================================================================== */ .reg-control select, .reg-daylight select, .daylight select, .op-control select, .portal-v3 select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } /* The chevron is applied at a DOUBLED-class specificity (0,2,1) so it survives a per-surface "background:" SHORTHAND that would otherwise reset background-image to none and leave a bare arrow-less select. Concrete cases this beats: .aq-select (Rates, 0,2,0 "background:var(--raised)") and .lc-select (Margin/ Pricing, 0,1,0). We re-paint the chevron as background longhands (image + repeat + position) so we never touch the surface's own "background-color". The chevron color follows --select-chevron (register-tinted below). Reserve room with padding so a long option label never sits under the chevron. */ .reg-control.reg-control.reg-control select, .reg-daylight.reg-daylight.reg-daylight select, .daylight.daylight.daylight select, .op-control.op-control.op-control select, .portal-v3.portal-v3.portal-v3 select{ background-image:var(--select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) !important; background-repeat:no-repeat !important; background-position:right 10px center !important; padding-right:30px !important; } /* the popped-open native option list should match the register, not UA default. Light first; the dark rule is declared AFTER so an operator select (which sits under BOTH .daylight and .op-control) resolves to dark — same specificity, last wins — without needing a complex :not() selector. */ .reg-daylight select, .portal-v3 select, .daylight select{color-scheme:light} .reg-control select, .op-control select{color-scheme:dark} /* dark-register chevron: lighter stroke so it reads on the control tower. */ .reg-control select, .op-control select{ --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C2C9D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* disabled selects: dim + drop the pointer affordance (matches .u-disabled). */ .reg-control select:disabled, .reg-daylight select:disabled, .daylight select:disabled, .op-control select:disabled, .portal-v3 select:disabled{opacity:.5;cursor:default} /* =========================================================================== 4c) UNIVERSAL — the GLOBAL date-input conform (same family of root causes as the with a custom border/radius but NO appearance:none renders at the OS intrinsic size (a different height than the sibling text/select fields) and paints native chrome; worse, on iOS Safari the DISPLAYED value is the ::-webkit-date-and-time-value pseudo (NOT datetime-edit) which defaults to CENTER — so the value text sits off the grid and the inner layout bleeds past the field's padding. This was the founder-visible bug on the customer Schedule and recurs on every native date field (the submit wizard's Cargo-Ready/CY/ETD/ETA, the operator Rate-Intake valid-from/until, PO-intake cargo-ready). Fix it ONCE for every register: appearance:none (kills native chrome / normalises height with box-sizing) and force the displayed value left-aligned + flush with the field's left padding, with no overflowing glyph. color-scheme is already pinned per register by the select rules above, so the pop-open calendar matches the register too. */ .reg-control input[type="date"], .reg-daylight input[type="date"], .daylight input[type="date"], .op-control input[type="date"], .portal-v3 input[type="date"]{ -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing:border-box; text-align:left; cursor:pointer; } .reg-control input[type="date"]::-webkit-datetime-edit, .reg-daylight input[type="date"]::-webkit-datetime-edit, .daylight input[type="date"]::-webkit-datetime-edit, .op-control input[type="date"]::-webkit-datetime-edit, .portal-v3 input[type="date"]::-webkit-datetime-edit{ text-align:left; padding:0; } .reg-control input[type="date"]::-webkit-date-and-time-value, .reg-daylight input[type="date"]::-webkit-date-and-time-value, .daylight input[type="date"]::-webkit-date-and-time-value, .op-control input[type="date"]::-webkit-date-and-time-value, .portal-v3 input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; } .reg-control input[type="date"]::-webkit-calendar-picker-indicator, .reg-daylight input[type="date"]::-webkit-calendar-picker-indicator, .daylight input[type="date"]::-webkit-calendar-picker-indicator, .op-control input[type="date"]::-webkit-calendar-picker-indicator, .portal-v3 input[type="date"]::-webkit-calendar-picker-indicator{ margin:0; padding:0; flex:none; } /* =========================================================================== 5) SKELETON shimmer — a token-driven loading placeholder. Resolves --mist/ --line so it reads correctly on both registers (subtle wash on dark, soft wash on light). Used by the component; class also usable directly. =========================================================================== */ .u-skel{ position:relative;overflow:hidden;border-radius:var(--r-sm); background:var(--mist); } .u-skel::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ink, #888) 7%, transparent) 45%, color-mix(in srgb, var(--ink, #888) 10%, transparent) 50%, color-mix(in srgb, var(--ink, #888) 7%, transparent) 55%, transparent 100%); animation:u-shimmer 1.35s var(--ease) infinite; } @keyframes u-shimmer{100%{transform:translateX(100%)}} .u-skel-text{height:.7em;border-radius:var(--r-xs);margin:.28em 0} .u-skel-line{height:1px;background:var(--line);border:0;margin:var(--sp-3) 0} /* =========================================================================== 6) EMPTY STATE — a calm, centered placeholder (icon tile + title + body + optional CTA). Token-driven; reads on both registers. Used by . =========================================================================== */ .u-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4); min-height:180px;color:var(--ink-3); } .u-empty .u-empty-ic{ width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--mist);color:var(--ink-faint);border:1px solid var(--line); box-shadow:var(--sh-1); } .u-empty .u-empty-ic svg{width:22px;height:22px;stroke-width:1.7} .u-empty .u-empty-title{ font-family:var(--font-display);font-size:var(--t-h4);font-weight:600; color:var(--ink);letter-spacing:-.01em;line-height:var(--lh-snug); } .u-empty .u-empty-body{ font-size:var(--t-body);color:var(--ink-3);line-height:var(--lh-body); max-width:34ch;margin:0 auto; } .u-empty .u-empty-cta{margin-top:var(--sp-1)} /* =========================================================================== 6b) SEG TABS — the shared premium sub-tab / segmented control (). A rounded token "track" holding pill segments with a SINGLE sliding active indicator (.u-seg-thumb) that animates between segments. Token-driven so it reads dark on the control tower and light on the customer paper. The thumb is positioned from --seg-i (active index) / --seg-n (segment count) the component sets inline; the spring-eased transform is the premium motion the old flat fills lacked. Honors reduced-motion (block at the bottom) + touch (no hover latch). ≥44px effective target via the segment min-height. =========================================================================== */ .u-seg{ position:relative;display:flex;gap:4px; padding:4px;border-radius:var(--r-md); background:var(--mist);border:1px solid var(--line); box-shadow:var(--sh-1); /* allow the track to scroll rather than clip if many segments meet a narrow phone — segments keep their geometry; the active one stays reachable. */ overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .u-seg::-webkit-scrollbar{display:none} .u-seg-block{width:100%} /* the sliding active indicator — one raised "pill" that translates between the N equal segments. Width/offset derive from --seg-n / --seg-i (set inline). ONLY rendered in equal-width (block) mode, where the math is exact; in auto- width mode the active tab paints its own pill instead (below). */ .u-seg-thumb{display:none} .u-seg-block > .u-seg-thumb{ display:block;position:absolute;z-index:0;top:4px;bottom:4px;left:4px; width:calc((100% - 8px - (var(--seg-n) - 1) * 4px) / var(--seg-n)); transform:translateX(calc(var(--seg-i) * (100% + 4px))); background:var(--raised);border:1px solid var(--line); border-radius:var(--r-sm);box-shadow:var(--sh-1); transition:transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease); pointer-events:none; } /* AUTO-WIDTH (block=false): no shared sliding thumb — the active tab itself carries the raised pill (still motion-eased via its own background/shadow). */ .u-seg:not(.u-seg-block) .u-seg-tab.is-active{ background:var(--raised);border:1px solid var(--line);box-shadow:var(--sh-1); } .u-seg-tab{ position:relative;z-index:1;flex:0 0 auto;min-width:0; display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:36px;padding:0 14px;border:0;background:transparent;cursor:pointer; border-radius:var(--r-sm);color:var(--ink-3); font-family:var(--font-display);font-weight:600;font-size:var(--t-body); letter-spacing:-.005em;line-height:1;white-space:nowrap; transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease); } .u-seg-block .u-seg-tab{flex:1 1 0} .u-seg-tab:hover:not(:disabled):not(.is-active){color:var(--ink-2);background:color-mix(in srgb,var(--raised) 55%,transparent)} .u-seg-tab:active:not(:disabled){transform:scale(.985)} .u-seg-tab.is-active{color:var(--ink)} .u-seg-tab:disabled{opacity:.45;cursor:default} /* the active red dot leading the label — the accent the operator rate tabs use. */ .u-seg-tab.is-active .u-seg-label::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--spg, var(--red));margin-right:8px;vertical-align:middle; box-shadow:0 0 0 3px color-mix(in srgb, var(--spg, var(--red)) 16%, transparent); } .u-seg-labels{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:0} .u-seg-label{line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .u-seg-sub{ font-family:var(--font-mono);font-weight:400;font-size:var(--t-eyebrow); color:var(--ink-faint);letter-spacing:0;line-height:1.1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; } .u-seg-ic{display:inline-flex;flex-shrink:0} .u-seg-ic svg{width:15px;height:15px;stroke-width:1.8} /* per-segment count badge — mono pill; lifts to the accent on the active tab. */ .u-seg-count{ flex-shrink:0;font-family:var(--font-mono);font-weight:600;font-size:var(--t-eyebrow); line-height:1;min-width:18px;text-align:center;padding:3px 6px;border-radius:var(--r-full); background:var(--mist);color:var(--ink-3);border:1px solid var(--line); transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .u-seg-tab.is-active .u-seg-count{ background:color-mix(in srgb, var(--spg, var(--red)) 12%, transparent); color:var(--spg, var(--red)); border-color:color-mix(in srgb, var(--spg, var(--red)) 26%, transparent); } /* roomy variant — a taller track with a sub line, for dashboard-grade switchers. */ .u-seg-md{padding:5px} .u-seg-md.u-seg-block > .u-seg-thumb{top:5px;bottom:5px;left:5px; width:calc((100% - 10px - (var(--seg-n) - 1) * 4px) / var(--seg-n))} .u-seg-md .u-seg-tab{min-height:44px;padding:0 16px;font-size:var(--t-h4)} /* =========================================================================== 6c) FILTER CHIPS — the CANONICAL calm filter chip + filter toolbar. ROOT CAUSE this fixes (founder: "what is this shit"): operator filter bars painted the SELECTED chip in full brand-red (#C8202E text + fill), so every active filter screamed like an ALERT, and the bars were cramped/ragged with dead no-op chips. Red is reserved for REAL alerts — a *selected filter* is a calm, sophisticated state, not an alarm. THE CALM SELECTED STATE: a soft filled chip — a subtle Forest/raised tint with CLEAR INK text and a THIN red accent (a 1px red-line border + a tiny red leading dot). NOT a full alarm-red fill, never red body text. This matches the already-calm Rates .lt-chip active state and the .u-seg active pill, so the whole operator console reads from ONE chip language. Token-driven → dark on the control tower, light on the customer paper, with zero per-surface code. USE: wrap the row in .u-filterbar (a real toolbar — aligned label+chip rows, even wrapping, proper spacing). Each dimension is a .u-filtergroup (eyebrow label + its chips). Each chip is .u-chip; the selected one adds .is-on. An optional count rides in .u-chip-n. The FilterBar / FilterGroup / FilterChip components below render exactly this. =========================================================================== */ .u-filterbar{ display:flex;flex-wrap:wrap;align-items:center; gap:var(--sp-3) var(--sp-5); } .u-filtergroup{display:flex;align-items:center;gap:var(--sp-2);min-width:0} .u-filtergroup-lbl{ font-family:var(--font-display);font-weight:600;font-size:var(--t-eyebrow); letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2); white-space:nowrap;flex-shrink:0; } .u-filtergroup-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0} /* the canonical chip — calm by default; calm-but-distinct when selected. */ .u-chip{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none; font-family:var(--font-display);font-weight:600;font-size:var(--t-cap); line-height:1;color:var(--ink-3);white-space:nowrap; min-height:28px;padding:5px 12px; border:1px solid var(--line);border-radius:var(--r-full); background:var(--raised); transition:border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .u-chip:hover:not(.is-on):not(:disabled){border-color:var(--line-strong);color:var(--ink-2)} .u-chip:active:not(:disabled){transform:scale(.97)} .u-chip:disabled{opacity:.5;cursor:default} /* the count rides muted; lifts to the red accent only when the chip is selected. */ .u-chip-n{ font-family:var(--font-mono);font-weight:600;font-size:var(--t-eyebrow); color:var(--ink-faint);transition:color var(--dur-1) var(--ease); } /* SELECTED — the calm state: soft raised/Forest tint, CLEAR INK text, a THIN red accent only (1px red-line border + a small red leading dot). No alarm-red fill, no red body text. */ .u-chip.is-on{ color:var(--ink); background:color-mix(in srgb, var(--spg, var(--red)) 9%, var(--raised)); border-color:var(--red-line, color-mix(in srgb, var(--spg, var(--red)) 32%, transparent)); } .u-chip.is-on::before{ content:"";display:inline-block;width:5px;height:5px;border-radius:50%;flex-shrink:0; background:var(--spg, var(--red)); box-shadow:0 0 0 3px color-mix(in srgb, var(--spg, var(--red)) 16%, transparent); } .u-chip.is-on .u-chip-n{color:var(--spg, var(--red))} @media (hover:none){ .u-chip:hover:not(.is-on){border-color:var(--line);color:var(--ink-3)} } /* =========================================================================== 7) TYPE & SPACING helpers — opt-in classes that read the new scale so hierarchy is consistent and the mono-for-figures discipline is preserved. =========================================================================== */ .u-eyebrow{font-family:var(--font-display);font-weight:600;font-size:var(--t-eyebrow); letter-spacing:.13em;text-transform:uppercase;line-height:var(--lh-tight);color:var(--ink-faint)} .u-cap{font-size:var(--t-cap);color:var(--ink-3);line-height:var(--lh-snug)} .u-h1{font-family:var(--font-display);font-size:var(--t-h1);font-weight:600;letter-spacing:-.02em;line-height:var(--lh-tight);color:var(--ink)} .u-h2{font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;line-height:var(--lh-tight);color:var(--ink)} .u-h3{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;line-height:var(--lh-snug);color:var(--ink)} .u-h4{font-family:var(--font-display);font-size:var(--t-h4);font-weight:600;letter-spacing:-.01em;line-height:var(--lh-snug);color:var(--ink)} /* mono figure helper (mirrors .mono but always tabular for aligned columns). */ .u-fig{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em} .u-stack-1>*+*{margin-top:var(--sp-1)} .u-stack-2>*+*{margin-top:var(--sp-2)} .u-stack-3>*+*{margin-top:var(--sp-3)} .u-stack-4>*+*{margin-top:var(--sp-4)} .u-stack-5>*+*{margin-top:var(--sp-5)} /* =========================================================================== 8) REDUCED MOTION — honor the OS preference. All entrance/hover/shimmer motion is neutralised; the content still renders at its final state (no disappearing content), only the movement/animation is removed. =========================================================================== */ @media (prefers-reduced-motion: reduce){ .reg-control *, .reg-daylight *, .daylight *{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .u-lift:hover,.u-press:active{transform:none} .u-skel::after{animation:none;opacity:.5} .u-rise,.u-rise-stagger>*,.u-fade,.u-disclose-body{animation:none;opacity:1;transform:none} /* the seg thumb still moves to the active segment — it just snaps, no glide. */ .u-seg-thumb{transition:none} .u-seg-tab:active{transform:none} } /* =========================================================================== 9) TOUCH — suppress hover-lift latching on touch devices (matches the existing @media(hover:none) discipline in globals/daylight). =========================================================================== */ @media (hover:none){ .u-lift:hover{transform:none;box-shadow:var(--sh-1)} .u-interactive:hover{background:transparent} .u-seg-tab:hover:not(.is-active){background:transparent;color:var(--ink-3)} }

Create your account