/* ══════════════════════════════════════════════════════════════════════════ §SBD-TONE) One current value per status colour. The admin's six statuses each ship a light value and a dark value. Resolving the pair HERE, once, is what keeps every rule below mode-agnostic — the alternative is a `body.theme-dark` twin for all ~40 rules that touch a status colour, and the first one anybody forgets is a silent contrast bug. `.sbd-tone` is applied to whatever element carries the inline vars. The fallbacks are the module's own operational green, so a status row whose admin cleared every colour still renders as something readable rather than inheriting the surrounding ink. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-tone{ --s-c:var(--stx,#0CA678); --s-t:var(--stx-t,#E6FCF3); --s-i:var(--stx-i,#08795A); /* ⚠️ THE PLATE PAIR HAS NO DARK TWIN, AND THAT IS THE WHOLE POINT. `--s-c` / `--s-i` flip to the admin's LIGHT values in dark mode because they are read as INK on a dark surface. An icon plate is the opposite job: it is an opaque saturated fill carrying a WHITE glyph, so flipping it hands white a bright mint or a bright amber and the glyph disappears — measured at 2.10-2.91:1 across the six statuses, all under the 3:1 a glyph needs. The plate therefore uses the light-mode pair in BOTH modes, which is exactly what the shared kit does with `--t-1p` ("plates are opaque and need no dark twin at all"). Do not add a `body.theme-dark` rule for these two. */ --s-p1:var(--stx,#0CA678); --s-p2:var(--stx-i,#08795A); } body.theme-dark .v2x.atd.sbd .sbd-tone{ --s-c:var(--stx-d,var(--stx,#2DD4A7)); --s-t:var(--stx-td,var(--stx-t,rgba(12,166,120,.16))); --s-i:var(--stx-id,var(--stx-i,#6BE3B8)); } /* The three history-bar tones are OURS, not the admin's: a bar is a rolled-up day, not a status row, and it has to stay legible next to any accent an admin picks. Values are the §TONE6 emerald / amber / rose ramps. */ .v2x.atd.sbd{ /* ⚠️ MEASURED AGAINST THE WHITE CARD, NOT PICKED FROM THE RAMP. A bar IS the information, so it needs 3:1 as a graphical object — and the §TONE6 display hues do not clear it on white: #10B981 is 2.54 and #F59E0B is 2.15. Each light value is the first step toward its own dark end that passes (emerald 3.38, amber 3.39); rose already did at 3.67 and is unchanged. Dark mode needs no such shift — every tone clears 4.7 on a #171922 card — so the dark block below keeps the display hues. */ --sbd-ok:#0D9F71; --sbd-ok-2:#08795A; --sbd-warn:#CA7809; --sbd-warn-2:#A85B08; --sbd-bad:#F43F5E; --sbd-bad-2:#B31D3C; /* ⚠️ THE EMPTY-TRACK TONE IS THE ONE MOST OF THIS STRIP ACTUALLY USES. The roll-up has written one day per monitor, so 89 of 90 cells are `none` — and at #D8DDE7 that measured 1.36:1 against the white card, i.e. invisible. The strip then read as seven coloured bars floating in whitespace, which looks broken rather than empty. #BDC6D8 is 1.72:1: plainly a track, and still far under the 3:1 the real tones carry so it can never be mistaken for a reading. Colour is not the only signal either — the legend under the strip says in words how many days were actually recorded. */ --sbd-none:#BDC6D8; --sbd-e:cubic-bezier(.22,.61,.36,1); } body.theme-dark .v2x.atd.sbd{ --sbd-ok:#34D399; --sbd-ok-2:#0D9F71; --sbd-warn:#FBBF24; --sbd-warn-2:#CA7809; --sbd-bad:#FB7185; --sbd-bad-2:#D22D4C; --sbd-none:#3A4356; /* 1.77:1 on the dark card — matched to the light end */ } /* ══════════════════════════════════════════════════════════════════════════ §SBD-PLATE) The hero's status plate — this page's answer to a product logo. /ai-models/{slug} opens on a logo tile; a status board has no logo to show and the one thing a visitor came for is the STATE. So the plate carries the status glyph on the status fill, at exactly the tool page's `--atd-logo` size, and inherits its whole responsive ramp for free. ⚠️ A WHITE GLYPH ON A RAW STATUS FILL IS A CONTRAST BUG. The operational green (#0CA678) measures 2.71:1 against white — under the 3:1 a glyph needs, and the amber and blue statuses are worse. The fill is therefore a diagonal from the status colour to its own INK value (the darker member of the pair the admin already ships), with a flat scrim over the top. Measured over all six statuses in both modes; the worst case lands at 4.6:1. Do not "clean this up" into a single flat `background:var(--s-c)`. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-plate{ grid-area:logo; position:relative; align-self:start; width:var(--atd-logo); height:var(--atd-logo); } .v2x.atd.sbd .sbd-plate-tile{ position:relative; z-index:1; width:100%; height:100%; display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--atd-logo) * .214); color:#fff; font-size:calc(var(--atd-logo) * .40); line-height:1; background-image:linear-gradient(135deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 100%), linear-gradient(140deg, var(--s-p1,#0CA678) 0%, var(--s-p2,#08795A) 100%); border:1px solid rgba(255,255,255,.22); box-shadow:0 1px 2px rgba(15,23,42,.10), 0 18px 34px -16px rgba(15,23,42,.42); transition:transform .3s var(--sbd-e), box-shadow .3s ease; } body.theme-dark .v2x.atd.sbd .sbd-plate-tile{ border-color:rgba(255,255,255,.14); box-shadow:0 1px 2px rgba(0,0,0,.55), 0 20px 38px -18px rgba(0,0,0,.85); } /* Halo — the same radial the tool page's logo plate uses, re-hued to the live status so a degraded board glows amber instead of brand blue. */ .v2x.atd.sbd .sbd-plate-halo{ position:absolute; inset:calc(var(--atd-logo) * -.143); z-index:0; border-radius:calc(var(--atd-logo) * .30); pointer-events:none; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--s-c,#0CA678) 34%, transparent) 0%, transparent 68%); opacity:.85; transition:opacity .3s ease, transform .3s var(--sbd-e); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ /* No hue to mix toward: drop the glow rather than paint a fixed blue one around an amber plate. The plate itself is unaffected. */ .v2x.atd.sbd .sbd-plate-halo{ display:none; } } /* The live ping. Two rings expanding out of the plate on a 2.6s cycle — slow enough to read as a heartbeat rather than an alarm. It is drawn OUTSIDE the tile (z-index 0, pointer-events none) so it can never sit over the glyph. */ .v2x.atd.sbd .sbd-plate-ping, .v2x.atd.sbd .sbd-plate-ping::after{ position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:calc(var(--atd-logo) * .214); border:2px solid color-mix(in srgb, var(--s-c,#0CA678) 55%, transparent); content:""; animation:sbdPing 2.6s cubic-bezier(0,0,.2,1) infinite; } .v2x.atd.sbd .sbd-plate-ping::after{ animation-delay:1.3s; } @supports not (color: color-mix(in srgb, red 50%, transparent)){ /* The ring fades to zero anyway, so a full-alpha start reads the same. Reading the token keeps it the LIVE status hue instead of a fixed blue. */ .v2x.atd.sbd .sbd-plate-ping, .v2x.atd.sbd .sbd-plate-ping::after{ border-color:var(--s-c,#0CA678); } } @keyframes sbdPing{ 0% { transform:scale(1); opacity:.7; } 70% { transform:scale(1.28); opacity:0; } 100% { transform:scale(1.28); opacity:0; } } @media (hover:hover) and (pointer:fine){ .v2x.atd.sbd .sbd-plate:hover .sbd-plate-tile{ transform:translateY(-4px) scale(1.025); } .v2x.atd.sbd .sbd-plate:hover .sbd-plate-halo{ opacity:1; transform:scale(1.1); } } @media (prefers-reduced-motion:reduce){ .v2x.atd.sbd .sbd-plate-tile,.v2x.atd.sbd .sbd-plate-halo{ transition:none; } .v2x.atd.sbd .sbd-plate:hover .sbd-plate-tile, .v2x.atd.sbd .sbd-plate:hover .sbd-plate-halo{ transform:none; } .v2x.atd.sbd .sbd-plate-ping, .v2x.atd.sbd .sbd-plate-ping::after{ animation:none; opacity:0; } } /* ══════════════════════════════════════════════════════════════════════════ §SBD-LIVE) The "Live" eyebrow and the state badge beside the H1. The badge reads the status TINT, never the status fill: white-on-fill needs 4.5:1 for a 13px label and three of the six statuses cannot give it. The tint/ink pair the admin already ships is measured for exactly this job. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; } .v2x.atd.sbd .sbd-eyebrow .dot{ width:8px; height:8px; border-radius:50%; /* `--s-i`, not `--s-c`: this dot sits on the bare page ground (#f6f8fc) with no tint under it, where the admin's mid colour is ~2.6:1. The ink value is the measured one in BOTH modes — it is already the light variant in dark mode, which is what a dark ground wants. */ background:var(--s-i,#08795A); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-c,#0CA678) 22%, transparent); animation:sbdBeat 2s ease-in-out infinite; } @supports not (color: color-mix(in srgb, red 50%, transparent)){ /* The halo ring around an 8px dot; dropping it loses nothing legible. */ .v2x.atd.sbd .sbd-eyebrow .dot{ box-shadow:none; } } @keyframes sbdBeat{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.78); opacity:.6; } } @media (prefers-reduced-motion:reduce){ .v2x.atd.sbd .sbd-eyebrow .dot{ animation:none; } } .v2x.atd.sbd .sbd-state{ display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; border-radius:var(--r-pill); padding:5px 13px; background:var(--s-t,#E6FCF3); color:var(--s-i,#08795A); border:1px solid color-mix(in srgb, var(--s-c,#0CA678) 30%, transparent); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ /* --line is neutral AND already has a dark twin in the ATD kit, so the pill keeps a correct edge whatever the status and whatever the theme. */ .v2x.atd.sbd .sbd-state{ border-color:var(--line); } } .v2x.atd.sbd .sbd-state i{ font-size:.72rem; } /* ══════════════════════════════════════════════════════════════════════════ §SBD-ASIDE) Hero right column — the Live Health panel. Same call as /ai-models/{slug}: there is no gallery to put here, so the column carries the one thing that earns the space. The ring is the page's single "wow" moment and it is drawn from real data — operational ÷ total — not decoration. Panel recipe is §SPINE-BLUE (the Tool Information card): a 150deg diagonal wash on a white ground with a hairline edge. NOT `.atd-info`, which carries the sidebar's orbit-ring hover and belongs to a card you point at. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-aside{ display:flex; flex-direction:column; gap:16px; height:100%; } .v2x.atd.sbd .sbd-panel{ flex:1 1 auto; padding:22px 20px; border-radius:16px; border:1px solid rgba(54,128,237,.22); background-image:linear-gradient(150deg, rgba(54,128,237,.075) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.05) 100%); background-color:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.28); } body.theme-dark .v2x.atd.sbd .sbd-panel{ border-color:rgba(54,128,237,.30); background-image:linear-gradient(150deg, rgba(54,128,237,.13) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.08) 100%); background-color:#171922; box-shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 36px -20px rgba(0,0,0,.80); } .v2x.atd.sbd .sbd-panel-head{ display:flex; align-items:center; gap:11px; margin-bottom:18px; } /* ══════════════════════════════════════════════════════════════════════════ §SBD-RING) The health donut. Pure SVG + two custom properties, no chart library: this is one number and pulling ApexCharts in for it would cost more than the whole panel. `--ring-len` is 2πr for r=52 (326.73) and is written out rather than calculated so the dash maths stays readable; change the radius in the markup and this number MUST change with it or the arc silently over- or under-runs. The sweep animates from empty on load, which is what makes it read as a live reading rather than a printed figure. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-ring{ --ring-len:326.73; position:relative; width:172px; height:172px; margin:0 auto 20px; flex:none; } .v2x.atd.sbd .sbd-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; } .v2x.atd.sbd .sbd-ring circle{ fill:none; stroke-linecap:round; } .v2x.atd.sbd .sbd-ring-tr{ stroke:var(--line); stroke-width:11; } body.theme-dark .v2x.atd.sbd .sbd-ring-tr{ stroke:#252A38; } .v2x.atd.sbd .sbd-ring-vl{ stroke:url(#sbdRingGrad); stroke-width:11; stroke-dasharray:var(--ring-len); stroke-dashoffset:calc(var(--ring-len) - (var(--ring-len) * var(--ring-pct,0) / 100)); filter:drop-shadow(0 3px 8px color-mix(in srgb, var(--s-c,#0CA678) 42%, transparent)); animation:sbdSweep 1.4s var(--sbd-e) both; } @supports not (color: color-mix(in srgb, red 50%, transparent)){ .v2x.atd.sbd .sbd-ring-vl{ filter:none; } } @keyframes sbdSweep{ from{ stroke-dashoffset:var(--ring-len); } } /* ⚠️ THE GRADIENT STOPS ARE COLOURED FROM CSS, NOT FROM A PRESENTATION ATTRIBUTE. `stop-color="var(--s-c)"` written on the element is a presentation ATTRIBUTE, and browser support for var() inside one is inconsistent — where it fails the stop falls back to black and the ring draws as a dark arc with no error anywhere. `stop-color` is a real CSS property, so setting it here is universally supported, and the custom properties still reach the because they inherit down from the hero element that carries the inline pair. */ .v2x.atd.sbd .sbd-ring-g1{ stop-color:var(--s-i,#08795A); } .v2x.atd.sbd .sbd-ring-g2{ stop-color:var(--s-c,#0CA678); } @media (prefers-reduced-motion:reduce){ .v2x.atd.sbd .sbd-ring-vl{ animation:none; } } .v2x.atd.sbd .sbd-ring-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; } .v2x.atd.sbd .sbd-ring-v{ font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; } .v2x.atd.sbd .sbd-ring-v i{ font-style:normal; font-size:1.15rem; font-weight:700; color:var(--muted); margin-inline-start:2px; } .v2x.atd.sbd .sbd-ring-k{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--s-i,#08795A); } .v2x.atd.sbd .sbd-ring-sub{ font-size:.78rem; font-weight:600; color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums; } /* Panel fact rows — a compact two-up grid under the ring. */ .v2x.atd.sbd .sbd-pfacts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .v2x.atd.sbd .sbd-pf{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:12px; background:var(--t-bg); border:1px solid var(--t-line); transition:transform .3s var(--sbd-e), box-shadow .28s ease; } .v2x.atd.sbd .sbd-pf-ic{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; /* --t-1p is the ramp step measured for a white GLYPH (3:1). A white LABEL on the same fill would need 4.5 and fail; nothing here puts text on it. */ background:var(--t-1p); color:#fff; font-size:.82rem; box-shadow:0 2px 6px rgba(var(--t-rgb),.35); } .v2x.atd.sbd .sbd-pf-tx{ min-width:0; display:flex; flex-direction:column; gap:2px; } .v2x.atd.sbd .sbd-pf-k{ font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t-ink); } .v2x.atd.sbd .sbd-pf-v{ font-size:.88rem; font-weight:700; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } @media (hover:hover) and (pointer:fine){ .v2x.atd.sbd .sbd-pf:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(var(--t-rgb),.55); } } @media (prefers-reduced-motion:reduce){ .v2x.atd.sbd .sbd-pf{ transition:none; } .v2x.atd.sbd .sbd-pf:hover{ transform:none; } } /* ══════════════════════════════════════════════════════════════════════════ §SBD-BAN) The overall-status band. It does NOT repeat the hero. The hero answers "is it up?" in one glance; this band carries the admin's own headline/sub copy plus the ONE thing neither the hero nor the services board shows — how the fleet splits across states, as a single proportional bar. Same reasoning as the model page dropping its sidebar rating card: three copies of one number is worse than one copy and a new one. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.sbd .sbd-ban{ position:relative; overflow:hidden; padding:24px 26px; border-radius:18px; border:1px solid color-mix(in srgb, var(--s-c,#0CA678) 26%, var(--line)); background-image:linear-gradient(150deg, color-mix(in srgb, var(--s-c,#0CA678) 9%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--s-c,#0CA678) 6%, transparent) 100%); background-color:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 16px 34px -20px rgba(15,23,42,.30); } body.theme-dark .v2x.atd.sbd .sbd-ban{ background-color:#171922; background-image:linear-gradient(150deg, color-mix(in srgb, var(--s-c,#2DD4A7) 15%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--s-c,#2DD4A7) 9%, transparent) 100%); box-shadow:0 1px 2px rgba(0,0,0,.45), 0 20px 40px -22px rgba(0,0,0,.85); } /* color-mix is ~95% supported, but a missing border colour here would drop the card's whole edge, so the fallback is explicit rather than inherited. */ @supports not (color: color-mix(in srgb, red 50%, transparent)){ .v2x.atd.sbd .sbd-ban{ border-color:var(--line); background-image:none; } } /* Aurora — the same soft corner light the §CTAX band uses, hued to the live status. Purely decorative and behind everything (z-index 0 + the content at 1), so it can never wash out a word. */ .v2x.atd.sbd .sbd-ban-aur{ position:absolute; inset-inline-end:-70px; top:-90px; z-index:0; width:290px; height:290px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--s-c,#0CA678) 26%, transparent) 0%, transparent 70%); filter:blur(6px); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ .v2x.atd.sbd .sbd-ban-aur{ display:none; } } .v2x.atd.sbd .sbd-ban-in{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .v2x.atd.sbd .sbd-ban-ic{ flex:0 0 auto; width:58px; height:58px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff; /* Same measured recipe as §SBD-PLATE — a raw status fill cannot carry a white glyph on three of the six statuses. */ background-image:linear-gradient(135deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 100%), linear-gradient(140deg, var(--s-p1,#0CA678) 0%, var(--s-p2,#08795A) 100%); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--s-c,#0CA678) 60%, transparent); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ .v2x.atd.sbd .sbd-ban-ic{ box-shadow:0 8px 20px -8px rgba(15,23,42,.35); } } .v2x.atd.sbd .sbd-ban-tx{ flex:1 1 260px; min-width:0; } .v2x.atd.sbd .sbd-ban-h{ font-family:var(--font); font-size:1.42rem; font-weight:800; line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin:0 0 5px; } .v2x.atd.sbd .sbd-ban-s{ font-size:.95rem; line-height:1.6; color:var(--muted); margin:0; } .v2x.atd.sbd .sbd-ban-side{ flex:0 0 auto; text-align:end; display:flex; flex-direction:column; gap:3px; } .v2x.atd.sbd .sbd-ban-big{ font-size:1.7rem; font-weight:800; line-height:1; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .v2x.atd.sbd .sbd-ban-big small{ font-size:.95rem; font-weight:700; color:var(--muted); } .v2x.atd.sbd .sbd-ban-lbl{ font-size:.76rem; font-weight:600; color:var(--muted); } /* ── The split bar ───────────────────────────────────────────────────────── One track, one segment per state that actually has members. A zero-width segment is not rendered at all: a 0px sliver next to a legend entry reads as "there is one and we hid it". */ .v2x.atd.sbd .sbd-split{ position:relative; z-index:1; margin-top:20px; } .v2x.atd.sbd .sbd-split-tr{ display:flex; gap:3px; height:10px; border-radius:999px; overflow:hidden; background:var(--sbd-none); } .v2x.atd.sbd .sbd-split-sg{ height:100%; border-radius:999px; min-width:6px; transition:flex-grow .5s var(--sbd-e), filter .2s ease; } /* ⚠️ THE GLOSS USED TO BE A WHITE OVERLAY AND IT COST THE SEGMENT ITS CONTRAST. `linear-gradient(rgba(255,255,255,.24), …)` lightened the TOP of the bar — the part a reader actually sees against the card — from 3.38:1 to 2.50:1, and even a .10 overlay only reached 2.99. The depth now comes from running each tone's own light-to-dark ramp downward, exactly like the history bars, so the top of the segment is the measured light value itself. */ .v2x.atd.sbd .sbd-split-sg[data-tone="ok"] { background-image:linear-gradient(180deg, var(--sbd-ok) 0%, var(--sbd-ok-2) 100%); } .v2x.atd.sbd .sbd-split-sg[data-tone="warn"]{ background-image:linear-gradient(180deg, var(--sbd-warn) 0%, var(--sbd-warn-2) 100%); } .v2x.atd.sbd .sbd-split-sg[data-tone="bad"] { background-image:linear-gradient(180deg, var(--sbd-bad) 0%, var(--sbd-bad-2) 100%); } .v2x.atd.sbd .sbd-split-sg[data-tone="info"]{ background-image:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); } .v2x.atd.sbd .sbd-split-lg{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:.79rem; font-weight:600; color:var(--muted); } .v2x.atd.sbd .sbd-split-lg span{ display:inline-flex; align-items:center; gap:7px; } .v2x.atd.sbd .sbd-split-lg i{ width:9px; height:9px; border-radius:50%; flex:none; font-style:normal; } .v2x.atd.sbd .sbd-split-lg [data-tone="ok"] i{ background:var(--sbd-ok); } .v2x.atd.sbd .sbd-split-lg [data-tone="warn"] i{ background:var(--sbd-warn); } .v2x.atd.sbd .sbd-split-lg [data-tone="bad"] i{ background:var(--sbd-bad); } .v2x.atd.sbd .sbd-split-lg [data-tone="info"] i{ background:var(--accent); } .v2x.atd.sbd .sbd-split-lg b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; } @media (hover:hover) and (pointer:fine){ .v2x.atd.sbd .sbd-split-tr:hover .sbd-split-sg{ filter:saturate(1.18) brightness(1.04); } } @media (prefers-reduced-motion:reduce){ .v2x.atd.sbd .sbd-split-sg{ transition:none; } } /* ══════════════════════════════════════════════════════════════════════════ §SBD-BOARD) The services board — the page's main body. One card per group. The card is the SHARED sidebar-card geometry (20px radius, --hp-sh at rest, lift + tone border on hover) so it belongs to the same family as every other card on the site, and the tone cycles by POSITION over §TONE6 — with seven groups, six hues give an even spread where hashing the name would hand three of them blue. ⚠️ The group header is a real