/* =============================================================================
   Orbit — a DESIGN (organization): the Loop sits at the center like a little
   planet; its sections orbit around it as satellites you tap into. A radial
   home instead of a tab bar or a list. Neutral Zen so structure is the point.
   ========================================================================== */
html, body { block-size: 100%; }
body { font-family: var(--font-ui); color: var(--color-text-primary);
  background: radial-gradient(120% 80% at 50% -10%, var(--color-sky-soft), transparent 60%), var(--color-surface-page); overflow: hidden; }
.wrap { block-size: 100dvh; inline-size: min(100vw, 30rem); margin-inline: auto; display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) var(--space-5); }

.chrome { display: flex; align-items: center; justify-content: space-between; }
.chip { display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.chipRow { display: inline-flex; gap: var(--space-2); }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.stage { flex: 1; display: grid; place-items: center; }
.orbit { position: relative; inline-size: min(84vw, 22rem); aspect-ratio: 1; }
.ring { position: absolute; inset: 8%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--color-accent-default) 32%, transparent); animation: spin 60s linear infinite; }
.ring.r2 { inset: 20%; border-color: color-mix(in srgb, var(--color-sage-deep) 22%, transparent); animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* center planet = the Loop identity */
.planet { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(60% 50% at 36% 30%, color-mix(in srgb, #fff 40%, transparent), transparent 55%), linear-gradient(155deg, var(--color-sky), var(--color-accent-default) 55%, var(--color-sage-deep));
  color: #fff; display: grid; place-content: center; text-align: center; padding: var(--space-3); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--color-accent-deep) 70%, transparent); }
.planet .cd { font-size: var(--font-size-display); font-weight: 800; line-height: 0.9; }
.planet .cdl { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }

/* satellites */
.sat { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 5.4rem; transform: translate(-50%, -50%) translate(var(--x), var(--y)); text-align: center; }
.sat .node { position: relative; inline-size: 4rem; block-size: 4rem; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); box-shadow: var(--shadow); color: var(--node, var(--color-accent-deep)); }
.sat .node svg { inline-size: var(--icon-lg); block-size: var(--icon-lg); stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sat .count { position: absolute; inset-block-start: -0.3rem; inset-inline-end: -0.3rem; min-inline-size: 1.35rem; padding: 0 0.35rem; block-size: 1.35rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; color: #fff; background: var(--node, var(--color-accent-deep)); box-shadow: 0 0 0 2px var(--color-surface-page); }
.sat .lbl { margin-block-start: var(--space-2); font-size: var(--font-size-sm); font-weight: 700; }
.sat .sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* header + footer essentials */
.head { text-align: center; margin-block-start: var(--space-2); }
.head .eyebrow { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-subtle); }
.head h1 { font-size: var(--font-size-xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--line-tight); margin-block-start: var(--space-1); }
.head .meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-block-start: var(--space-1); }

.foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); box-shadow: var(--shadow); }
.foot .avs { display: inline-flex; }
.foot .avs .a { inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: 999px; display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); box-shadow: 0 0 0 2px var(--color-surface-raised); }
.foot .avs .a + .a { margin-inline-start: calc(-1 * var(--space-2)); }
.foot .txt { flex: 1; min-inline-size: 0; font-size: var(--font-size-sm); }
.foot .txt b { font-weight: 700; }
.foot .go { padding: var(--space-2) var(--space-4); border: none; border-radius: 999px; background: var(--color-accent-deep); color: #fff; font-size: var(--font-size-sm); font-weight: 700; }