/* ==========================================================================
Fraktalicious Cycle Dial — presentation layer
Include via:
⛔ LOCKED BY THE OWNER, 2026-08-21. DO NOT REMOVE OR REDESIGN.
"the cycle position circle graphic with the brand asset in the center
is AWESOME, dont lose that." — the owner, 2026-08-21
The six-phase ring with the brand primitive at its centre is the product —
a six-phase navigator drawn as a live instrument — and it is set in stone
by owner decision. The full lock note lives in public/index.html above its
copy of the markup; read that before changing anything here.
Allowed: swapping `.core`'s src for a new brand primitive (that is
what the slot is for), retuning colour/scale/motion.
Not allowed: replacing it with an icon, a progress bar, a horizontal
stepper or a chart; dropping it from any screen it is on.
── Two copies exist, deliberately ─────────────────────────────────────────
public/index.html carries its OWN inline copy of this CSS and of the SVG.
That copy is server-rendered (`data-ssr-set`, lit arc chosen from a
server-set `data-phase-index`) so the marketing page's ring is correct with
JavaScript disabled, for crawlers, and in a social-card screenshot. A
client-side renderer cannot satisfy that, which is why index.html was not
migrated onto this file. See dial.js's header for the same note and for the
geometry that must be kept in sync between the two.
── Tokens ─────────────────────────────────────────────────────────────────
The dial's own rule colours are defined on `.dialwrap` below and default to
LITERAL values, not to the host page's hairline token. That is deliberate and
was a measured bug fix — see the note there. A host may override by defining
`--rule` / `--rule-dim`, but it never has to, and the instrument looks the
same on every page whether it does or not.
The one token worth wiring per-page is `--live`: set it to the current
phase's colour on the mount element and the whole instrument follows.
========================================================================== */
/* The mount. `position: relative` is load-bearing — `.core` is absolutely
positioned against it. The padding keeps the ring's outermost legends off the
container edge on wide screens — and must stay symmetric, see the note inside. */
.dialwrap {
position: relative;
display: grid;
place-items: center;
/* ⚠ KEEP THIS PADDING SYMMETRIC. It was `18px 18px 18px 0` and that silently
decentred the flower by 9px — measured 2026-08-24 after the owner spotted it.
`.core` is position:absolute, so its containing block is this element's PADDING
box, while the