/* --------------------------------------------------------------------------
   VENDORED COPY. Do not edit here.
   source   C:/Users/Megan/Documents/design-system/components/orbit-map/component.css
   version  1.5.0
   refresh  node sync.mjs orbit-map "C:/Users/Megan/Claude_Projects/AI Projects/Houston Bloom/Website"
   warning  An edit made in this copy is lost on the next sync.
   -------------------------------------------------------------------------- */

/* ============================================================================
   orbit-map · v1.5.0 · component

   The Explorer view of a personal website, as an activity-map graph. See
   behavior.js for the behaviours it carries over. This file is its look, in
   tokens: the source's violet glass on deep space reads --color-accent,
   --color-accent-deep, --color-surface and --color-text, so it holds in
   every registered style, and in galaxy dark it is the source.

   Sizes carried over from the source: ghost icons 20px (32 for series 1,
   the missions), active icons 56px, 44px minimum hit area, glass label chips
   at 11px, the Activity ring at 140px (110 below 720px), a 40px grid.

   Token surface, falling back to layer 2:
     --orbit-beam-a / -b   beam gradient ends     --color-accent, --color-accent-deep
     --orbit-ring-a / -b   Activity ring disc   white
     --orbit-ink           text on the disc, a near black tinted with the accent
     --orbit-rim           the rim on the disc and the beams   --color-text
     --orbit-grid          the 40px grid lines    --color-accent at 7%
     --orbit-energy        the trail to the playhead  --color-text
     --orbit-cut           the detail cut out of a lit glyph  --color-bg
     glyph colours         --map-cat-1..4, the same values the rail key reads
   ============================================================================ */

.orbit-map {
  --orbit-beam-a: white;
  --orbit-beam-b: white;
  --orbit-ring-a: white;
  --orbit-ring-b: white;
  --orbit-ink: color-mix(in oklch, black 88%, var(--color-accent));
  --orbit-rim: var(--color-text);
  --orbit-grid: color-mix(in oklch, var(--color-accent) 7%, transparent);
  --orbit-energy: var(--color-text);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  background-image:
    linear-gradient(var(--orbit-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--orbit-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.orbit-map [data-slot="energy"],
.orbit-map [data-slot="beams"] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orbit-map [data-slot="beams"] { z-index: 1; }
.orbit-map [data-stop="a"] { stop-color: var(--orbit-beam-a); }
.orbit-map [data-stop="b"] { stop-color: var(--orbit-beam-b); }
.orbit-map [data-slot="beam-g"] polygon { stroke: var(--orbit-rim); stroke-width: 0.8; stroke-linejoin: round; }
/* a connection between two nodes: one weight, dotted. The wedge is kept for the centre's beams. */
.orbit-map [data-slot="beam-g"] [data-slot="link"] { stroke: var(--orbit-beam-a); stroke-width: 1.5; stroke-dasharray: 1.5 5; stroke-linecap: round; fill: none; }
.orbit-map [data-slot="energy"] path { fill: none; stroke: var(--orbit-energy); stroke-linecap: round; }
.orbit-map [data-slot="haze"] { filter: blur(10px); opacity: 0.18; }
.orbit-map [data-slot="strand"] { animation: orbit-flow 1.5s linear infinite; }
@keyframes orbit-flow { to { stroke-dashoffset: -60; } }

/* The mesh: five oversized, blurred colour blobs behind everything, drifting slowly. Only transform animates,
   so it stays cheap. The colours are the four category colours and the brand, thinned to a wash. */
.orbit-map { --orbit-wash: 30%; }
.orbit-map [data-slot="mesh"] { position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(64px); opacity: 0.55; }
.orbit-map [data-slot="mesh"] i {
  position: absolute;
  width: 52%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob) 0%, transparent 100%);
  will-change: transform;
  animation: orbit-mesh-a 41s ease-in-out infinite alternate;
}
.orbit-map [data-slot="mesh"] i:nth-child(1) { --blob: color-mix(in oklch, var(--map-cat-1, var(--color-accent)) var(--orbit-wash), transparent); left: 2%; top: 4%; }
.orbit-map [data-slot="mesh"] i:nth-child(2) { --blob: color-mix(in oklch, var(--map-cat-3, var(--color-accent)) var(--orbit-wash), transparent); right: 0; top: 10%; animation: orbit-mesh-b 53s ease-in-out infinite alternate; }
.orbit-map [data-slot="mesh"] i:nth-child(3) { --blob: color-mix(in oklch, var(--map-cat-2, var(--color-accent)) var(--orbit-wash), transparent); left: 22%; bottom: 0; animation: orbit-mesh-c 47s ease-in-out infinite alternate; }
.orbit-map [data-slot="mesh"] i:nth-child(4) { --blob: color-mix(in oklch, var(--map-cat-4, var(--color-accent)) var(--orbit-wash), transparent); right: 6%; bottom: 4%; animation: orbit-mesh-a 59s ease-in-out infinite alternate-reverse; }
.orbit-map [data-slot="mesh"] i:nth-child(5) { --blob: color-mix(in oklch, var(--color-brand, var(--color-accent)) var(--orbit-wash), transparent); left: 30%; top: 26%; width: 40%; height: 46%; animation: orbit-mesh-b 67s ease-in-out infinite alternate-reverse; }
@keyframes orbit-mesh-a { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.14); } }
@keyframes orbit-mesh-b { from { transform: translate3d(6%, -6%, 0) scale(1.1); } to { transform: translate3d(-8%, 4%, 0) scale(0.94); } }
@keyframes orbit-mesh-c { from { transform: translate3d(-4%, 6%, 0) scale(0.96); } to { transform: translate3d(6%, -6%, 0) scale(1.12); } }

/* Glyph paint: each category fills from its gradient, the colour swung 14 degrees either way along hue at the
   same lightness, then 12% toward the text colour, which pushes every icon away from its ground in light and dark alike. Older browsers take the flat colour. */
.orbit-map [data-slot="paint"] { position: absolute; }
[data-slot="paint"] stop { stop-color: var(--map-cat-1); }
[data-slot="paint"] stop[data-n="2"] { stop-color: var(--map-cat-2); }
[data-slot="paint"] stop[data-n="3"] { stop-color: var(--map-cat-3); }
[data-slot="paint"] stop[data-n="4"] { stop-color: var(--map-cat-4); }
@supports (color: oklch(from red l c h)) {
  [data-slot="paint"] stop[data-n="1"][data-end="a"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-1) l calc(c * 1.06) calc(h - 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="1"][data-end="b"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-1) l calc(c * 1.06) calc(h + 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="2"][data-end="a"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-2) l calc(c * 1.06) calc(h - 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="2"][data-end="b"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-2) l calc(c * 1.06) calc(h + 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="3"][data-end="a"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-3) l calc(c * 1.06) calc(h - 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="3"][data-end="b"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-3) l calc(c * 1.06) calc(h + 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="4"][data-end="a"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-4) l calc(c * 1.06) calc(h - 14)) 88%, var(--color-text)); }
  [data-slot="paint"] stop[data-n="4"][data-end="b"] { stop-color: color-mix(in oklch, oklch(from var(--map-cat-4) l calc(c * 1.06) calc(h + 14)) 88%, var(--color-text)); }
}
[data-cat="1"] { --orbit-paint: url(#og-g1); }
[data-cat="2"] { --orbit-paint: url(#og-g2); }
[data-cat="3"] { --orbit-paint: url(#og-g3); }
[data-cat="4"] { --orbit-paint: url(#og-g4); }

/* The hover: every glyph floats a few pixels on its own clock, so the map breathes and never ticks in unison. */
@keyframes orbit-float { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 calc(var(--amp, 4px) * -1); rotate: 1.5deg; } }
.orbit-map [data-slot="glyph"] > [data-v] {
  animation: orbit-float calc(6s + (var(--n, 0) * 0.83s)) ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -1.7s);
}

/* ---- icon motion -------------------------------------------------------------------------------------
   Each icon moves in its own way, and only a lit glyph (an active, hovered or connected project) moves;
   the outline ghosts only float. Reduced motion stops all of it.
     satellite  the two signal arcs arrive one after the other, hold, then clear
     planet     when it arrives or is hovered, its bands turn and a moon makes one lap round it
     rocket     the flame wafts; the rocket floats a little higher than the rest
     star       breathes, a few percent, very slowly                                                      */
.orbit-map svg.og { overflow: visible; }
.orbit-map svg.og[data-mode="lit"] [data-part] { transform-box: fill-box; }

@keyframes orbit-wave { 0% { opacity: 0; transform: scale(0.72); } 16% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1.06); } }
.orbit-map svg.og[data-mode="lit"] [data-part="wave1"],
.orbit-map svg.og[data-mode="lit"] [data-part="wave2"] { transform-origin: 0% 0%; animation: orbit-wave 4.2s ease-out infinite; }
.orbit-map svg.og[data-mode="lit"] [data-part="wave2"] { animation-delay: 0.7s; }

/* The moon's position is one angle, animated; cos and sin of it place the moon on an ellipse. It rests at
   300 degrees (upper right), runs one lap when the glyph is played, and ends where it began, so nothing snaps. */
@property --og-a { syntax: "<angle>"; initial-value: 300deg; inherits: false; }
@keyframes orbit-moon { from { --og-a: 300deg; } to { --og-a: 660deg; } }
@keyframes orbit-bands { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(4.5px); } 70% { transform: translateX(-4.5px); } }
.orbit-map svg.og[data-mode="lit"] [data-part="moon"] {
  translate: calc(cos(var(--og-a)) * 9.6px) calc(sin(var(--og-a)) * 4.4px);
  scale: calc(1 + sin(var(--og-a)) * 0.28);
  transform-origin: 50% 50%;
}
.orbit-map [data-play] svg.og[data-mode="lit"] [data-part="moon"] { animation: orbit-moon 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1; }
.orbit-map [data-play] svg.og[data-mode="lit"] [data-part="bands"] { animation: orbit-bands 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1; }

@keyframes orbit-waft { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 30% { transform: scale(1.05, 1.16) rotate(-5deg); } 65% { transform: scale(0.96, 1.06) rotate(4deg); } }
.orbit-map svg.og[data-mode="lit"] [data-part="flame"],
.orbit-map svg.og[data-mode="lit"] [data-part="flame-core"] { transform-origin: 100% 0%; animation: orbit-waft 2.1s ease-in-out infinite; }
.orbit-map svg.og[data-mode="lit"] [data-part="flame-core"] { animation-delay: -0.6s; }
.orbit-map [data-icon="product"] [data-slot="glyph"] > [data-v] { --amp: 6px; }

@keyframes orbit-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.orbit-map [data-icon="principle"] svg.og { animation: orbit-breathe 6.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.1s); }

/* ---- keyStyle "outline": the key is a colour and an outline style, not an icon --------------------------
   Four outline styles, so the key holds without colour: solid, dashed, dotted, double. A resting project is a
   glass badge ringed in the dark ink; a lit one takes its category colour, a heavier ring and its own drawing. */
.orbit-map[data-keystyle="outline"] [data-slot="glyph"] { padding: 0; border: 0; }
.orbit-map[data-keystyle="outline"] [data-badge] {
  --bw: 1px; --bs: solid;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--bw) var(--bs) var(--orbit-ink);
  background: color-mix(in oklch, white 32%, transparent);
  color: var(--orbit-ink);
  transition: width 500ms var(--ease), height 500ms var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), scale 350ms var(--ease);
  animation: orbit-float calc(6s + (var(--n, 0) * 0.83s)) ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -1.7s);
}
.orbit-map[data-keystyle="outline"] [data-outline="dashed"] [data-badge] { --bs: dashed; }
.orbit-map[data-keystyle="outline"] [data-outline="dotted"] [data-badge] { --bs: dotted; --bw: 2px; }
.orbit-map[data-keystyle="outline"] [data-outline="double"] [data-badge] { --bs: double; --bw: 3px; }
.orbit-map[data-keystyle="outline"] [data-badge] svg { width: 58% !important; height: 58% !important; display: block; overflow: visible; }
.orbit-map[data-keystyle="outline"] [data-badge] [data-slot="initial"] { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1; }
.orbit-map[data-keystyle="outline"] [data-slot="item"][data-active] [data-badge] { width: 56px; height: 56px; }
.orbit-map[data-keystyle="outline"] [data-slot="item"][data-active] [data-badge] [data-slot="initial"] { font-size: 24px; }
/* lit: active, hovered or connected */
.orbit-map[data-keystyle="outline"] :is([data-active], [data-state="on"], [data-state="near"]) [data-badge] {
  --bw: 2px;
  --lit: color-mix(in oklch, currentColor 90%, var(--color-text));
  border-color: var(--lit);
  color: var(--lit);
  background: color-mix(in oklch, var(--lit) 12%, color-mix(in oklch, var(--color-surface) 82%, transparent));
}
.orbit-map[data-keystyle="outline"] :is([data-active], [data-state="on"], [data-state="near"])[data-outline="dotted"] [data-badge] { --bw: 3px; }
.orbit-map[data-keystyle="outline"] :is([data-active], [data-state="on"], [data-state="near"])[data-outline="double"] [data-badge] { --bw: 5px; }
.orbit-map[data-keystyle="outline"] [data-slot="item"][data-state="on"] [data-slot="glyph"],
.orbit-map[data-keystyle="outline"] [data-slot="star"][data-state="on"] [data-slot="glyph"] { border-color: var(--lit, currentColor); }
.orbit-map[data-keystyle="outline"] [data-badge] svg.tool { stroke-width: 1.9; }

/* the Activity ring: a solid gradient disc, "Today" on it, the date on a chip */
.orbit-map [data-slot="centre"] {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 5;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-xs);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--orbit-ring-a), var(--orbit-ring-b));
  box-shadow: 0 0 0 1.5px var(--orbit-rim), var(--shadow-raise);
  color: var(--orbit-ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: opacity var(--dur-base) var(--ease);
}
.orbit-map[data-focus] [data-slot="centre"] { opacity: 0.3; }
.orbit-map [data-slot="centre"] i, .orbit-map [data-slot="c-kicker"] { display: none; }
.orbit-map [data-slot="c-big"] { font-family: var(--font-display); font-size: var(--text-heading-md); font-weight: 700; line-height: 1; }
.orbit-map [data-slot="c-unit"] { font-size: 11px; letter-spacing: 0.02em; }
.orbit-map [data-slot="c-unit"]:empty { display: none; }
.orbit-map [data-slot="c-date"] { padding: 2px var(--space-sm); border-radius: var(--radius-sm); background: var(--orbit-ink); color: white; font-size: var(--text-caption); font-weight: 600; line-height: 1.3; }

/* items and stars */
.orbit-map [data-slot="item"],
.orbit-map [data-slot="star"] {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: left 500ms var(--ease), top 500ms var(--ease), opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
/* a project joining or leaving the day: no slide, it spins in where it now belongs (2026-10-01) */
.orbit-map [data-slot="item"][data-swap] {
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
  animation: orbit-swap 520ms var(--ease) both;
}
@keyframes orbit-swap { from { opacity: 0; scale: 0.35; rotate: -120deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
/* a category gathering into the centre: a longer, softer ease, each item a beat after the last */
.orbit-map :is([data-slot="item"], [data-slot="star"])[data-ring] {
  transition: left 760ms cubic-bezier(0.22, 0.9, 0.24, 1), top 760ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
  transition-delay: calc(var(--k, 0) * 55ms), calc(var(--k, 0) * 55ms), 0ms, 0ms;
}
@media (prefers-reduced-motion: reduce) { .orbit-map :is([data-slot="item"], [data-slot="star"])[data-ring] { transition-delay: 0ms; } }
.orbit-map [data-slot="item"][hidden], .orbit-map [data-slot="star"][hidden] { display: none; }
.orbit-map [data-slot="glyph"] {
  position: relative;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease), scale 350ms var(--ease);
}
.orbit-map [data-slot="glyph"] svg { display: block; overflow: visible; width: 20px; height: 20px; transition: width 500ms var(--ease), height 500ms var(--ease); }
.orbit-map [data-slot="item"][data-cat="1"] [data-slot="glyph"] svg { width: 32px; height: 32px; }
.orbit-map [data-slot="item"][data-icon="research"] [data-slot="glyph"] svg { width: 18px; height: 18px; }
.orbit-map [data-slot="star"] [data-slot="glyph"] svg { width: 26px; height: 26px; }
.orbit-map [data-v="lit"] { display: none; }
.orbit-map :is([data-active], [data-state="on"], [data-state="near"]) [data-v="lit"] { display: block; }
.orbit-map :is([data-active], [data-state="on"], [data-state="near"]) [data-v="dim"] { display: none; }

/* glyph paint: category colour from the style, the cut in the ground colour */
.orbit-map { --orbit-cut: var(--color-bg); }
.orbit-map [data-cat="1"] { color: var(--map-cat-1, var(--color-accent)); }
.orbit-map [data-cat="2"] { color: var(--map-cat-2, var(--color-accent-deep)); }
.orbit-map [data-cat="3"] { color: var(--map-cat-3, var(--color-text-muted)); }
.orbit-map [data-cat="4"] { color: var(--map-cat-4, var(--color-border-strong)); }
/* at rest the ghosts and stars are neutral; a category colour arrives when a project is active, hovered or called from the rail */
.orbit-map [data-slot="item"][data-state="rest"]:not([data-active]),
.orbit-map [data-slot="star"][data-state="rest"] { color: var(--color-text-muted); }
svg.og [data-body] { fill: var(--orbit-paint, currentColor); stroke: none; }
svg.og [data-stroke] { fill: none; stroke: var(--orbit-paint, currentColor); stroke-linecap: round; }
svg.og [data-cut] { fill: var(--orbit-cut, var(--color-surface)); stroke: none; }
/* the planet: bands in two tones of its own colour, and a ring a step lighter than the body */
svg.og [data-tone] { fill: none; stroke-linecap: round; }
svg.og [data-tone="light"] { stroke: color-mix(in oklch, currentColor 45%, white); stroke-opacity: 0.7; }
svg.og [data-tone="dark"] { stroke: color-mix(in oklch, currentColor 62%, black); stroke-opacity: 0.45; }
svg.og [data-ring] { stroke: color-mix(in oklch, oklch(from currentColor l calc(c * 1.12) h) 92%, var(--color-text)); }
/* a glow is a light tint of the glyph's own colour: the rocket's flame core */
svg.og [data-glow] { fill: color-mix(in oklch, currentColor 38%, white); stroke: none; }
svg.og [data-cut][fill="none"] { fill: none; stroke: var(--orbit-cut, var(--color-surface)); }
svg.og[data-mode="dim"] [data-body] { fill: color-mix(in oklch, white 30%, transparent); stroke: var(--orbit-ink, currentColor); stroke-width: 0.6; stroke-linejoin: round; }
svg.og[data-mode="dim"] [data-stroke] { fill: none; }
svg.og[data-mode="dim"] :is([data-cut], [data-glow], [data-tone]) { display: none; }

/* at rest: ghosts faint, the day's projects forward */
.orbit-map [data-slot="item"][data-state="rest"] { opacity: 0.55; }
.orbit-map [data-slot="item"][data-active] { opacity: 1; z-index: 8; }
.orbit-map [data-slot="item"][data-active] [data-slot="glyph"] svg { width: 56px; height: 56px; }
.orbit-map [data-slot="item"][data-active][data-state="rest"] { animation: orbit-drift 9s ease-in-out infinite; }
.orbit-map [data-slot="item"][data-active]:nth-child(2n)[data-state="rest"] { animation-duration: 11s; animation-delay: -3s; }
@keyframes orbit-drift {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-50%, -50%) translate(3px, -2px); }
  50% { transform: translate(-50%, -50%) translate(0, -4px); }
  75% { transform: translate(-50%, -50%) translate(-3px, -2px); }
}
.orbit-map [data-slot="star"][data-state="rest"] { opacity: 0.6; }
.orbit-map [data-slot="star"][data-state="rest"] [data-slot="glyph"] { animation: orbit-twinkle 3.2s ease-in-out infinite; }
.orbit-map [data-slot="star"]:nth-of-type(2n)[data-state="rest"] [data-slot="glyph"] { animation-duration: 4.1s; animation-delay: -1.2s; }
@keyframes orbit-twinkle { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; } }

/* focus: one thing on, its connections near, the rest back */
.orbit-map [data-state="on"] { opacity: 1; z-index: 30; filter: drop-shadow(0 0 14px color-mix(in oklch, var(--color-accent) 50%, transparent)); }
/* Hover or focus: the thing under the pointer grows and plays its motion, what it connects to comes up a
   little, and everything else, the active projects included, steps back. */
.orbit-map [data-slot="item"][data-state="on"] { --lift: 12px; }
.orbit-map [data-slot="item"][data-state="on"] [data-slot="glyph"] { scale: 1.9; }
.orbit-map [data-slot="item"][data-active][data-state="on"] [data-slot="glyph"] { scale: 1.3; }
.orbit-map [data-slot="star"][data-state="on"] [data-slot="glyph"] { scale: 1.7; }
.orbit-map [data-slot="star"][data-state="on"] { --lift: 10px; }
.orbit-map [data-state="near"] [data-slot="glyph"] { scale: 1.2; }
.orbit-map [data-slot="item"][data-active][data-state="off"] { opacity: 0.05; }
.orbit-map [data-slot="item"][data-state="on"] [data-slot="glyph"] { border-color: var(--color-text); }
.orbit-map [data-state="near"] { opacity: 0.85; z-index: 20; }
.orbit-map [data-state="off"] { opacity: 0.045; }
.orbit-map [data-slot="star"][data-state="off"] { opacity: 0.06; }
.orbit-map [data-selected] [data-slot="glyph"] { border-color: var(--color-accent); }
.orbit-map button:focus-visible { outline: none; }
.orbit-map button:focus-visible [data-slot="glyph"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* glass label chips, placed away from the centre */
.orbit-map [data-slot="label"] {
  translate: var(--lx, 0px) 0;
  position: absolute;
  z-index: 40;
  padding: 2px 10px;
  border: 1px solid color-mix(in oklch, var(--color-text) 15%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px color-mix(in oklch, var(--color-bg) 70%, transparent);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.orbit-map [data-slot="item"][data-cat="1"] [data-slot="label"] { font-size: 12px; font-weight: 600; }
.orbit-map [data-state="on"] [data-slot="label"],
.orbit-map:not([data-focus]) [data-active] [data-slot="label"] { opacity: 1; }
.orbit-map [data-place="right"] [data-slot="label"] { left: 100%; top: 50%; transform: translateY(-50%); margin-left: calc(4px + var(--lift, 0px)); }
.orbit-map [data-place="left"] [data-slot="label"] { right: 100%; top: 50%; transform: translateY(-50%); margin-right: calc(4px + var(--lift, 0px)); }
.orbit-map [data-place="above"] [data-slot="label"] { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: calc(2px + var(--lift, 0px)); }
.orbit-map [data-place="below"] [data-slot="label"] { top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(2px + var(--lift, 0px)); }

@media (max-width: 719px) {
  .orbit-map [data-slot="centre"] { width: 110px; height: 110px; }
  .orbit-map [data-slot="c-big"] { font-size: var(--text-card); }
  .orbit-map [data-slot="item"][data-active] [data-slot="glyph"] svg { width: 40px; height: 40px; }
  /* a 110px ring: "Today" and a small date chip */
  .orbit-map [data-slot="c-date"] { font-size: 10px; padding: 1px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-map *, .orbit-map [data-slot="item"] { animation: none !important; transition: none !important; }
}