/* Orbit: the pages become satellites on an orbital dial around a copper planet at the left edge.
   Scroll or drag over the dial to spin it; the current page sits at 3 o'clock. Behind everything,
   giant orbital rings around the same planet sweep the page. Desktop only (≥981px); smaller
   screens keep the regular page list. Driven by theme-orbitdial.js (--i per page, --od-rot spin). */
@property --od-rot { syntax:'<number>'; initial-value:0; inherits:true; }
@property --sr { syntax:'<number>'; initial-value:465; inherits:false; }
html[data-theme="orbit"] {
  --od-cx:-110px; --od-r:250px; --od-rn:250; --od-step:10.5deg;
  --od-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --od-ring:rgba(101,209,192,.42); --od-ring-faint:rgba(101,209,192,.11);
}
html[data-theme="orbit"][data-mode="light"] { --od-ring:rgba(184,104,58,.5); --od-ring-faint:rgba(184,104,58,.14); }

html[data-theme="orbit"] { --od-gutter:clamp(20px,3vw,56px); --od-clear:420px; }
html[data-theme="orbit"][data-mode] #content { max-width:1600px; margin-inline:auto; padding:32px var(--od-gutter); }
@media (max-width:700px) { html[data-theme="orbit"][data-mode] #content { padding:24px 16px; } }
@media (min-width:981px) {
  html[data-theme="orbit"][data-mode] #content > .station-layout { animation:none; transform:none; }
  /* Clear the dial: the main column starts at --od-clear from the window edge, whatever the frame offset. */
  html[data-theme="orbit"][data-mode] .station-layout {
    padding-left:max(0px,calc(var(--od-clear) - max(0px,(100vw - 1600px) / 2) - var(--od-gutter)));
    grid-template-columns:minmax(0,1fr) 212px; transition:padding-left .5s cubic-bezier(.22,1,.36,1);
  }
  html[data-theme="orbit"][data-mode] .station-layout:has(.station-submenu) { --od-clear:640px; }
  html[data-theme="orbit"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr); }
  html[data-theme="orbit"][data-mode][data-style] .station-rail-left {
    position:fixed; left:0; top:0 !important; bottom:auto !important; height:100vh !important; max-height:none !important; width:640px; z-index:4; padding:0; overflow:hidden;
    background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
    pointer-events:none; transition:--od-rot .9s var(--od-spring);
  }
  /* The planet. */
  html[data-theme="orbit"][data-mode] .station-rail-left::before {
    content:""; position:absolute; width:300px; height:300px; left:calc(var(--od-cx) - 150px); top:calc(50% - 150px); border-radius:50%;
    background:radial-gradient(circle at 72% 38%,#ffd2b0 0,#f2a273 18%,#ed9563 34%,#a8532c 64%,#3a1d14 100%);
    box-shadow:0 0 70px rgba(237,149,99,.35),inset -26px -14px 50px rgba(0,0,0,.5);
    animation:od-breathe 6s ease-in-out infinite alternate;
  }
  /* The orbit track the pages sit on, slowly turning. */
  html[data-theme="orbit"][data-mode] .station-rail-left::after {
    content:""; position:absolute; width:calc(var(--od-r) * 2); height:calc(var(--od-r) * 2);
    left:calc(var(--od-cx) - var(--od-r)); top:calc(50% - var(--od-r)); border-radius:50%;
    border:1.5px dashed var(--od-ring); animation:od-spin 90s linear infinite;
  }
  html[data-theme="orbit"][data-mode] .tabs.station-tabs-v { position:absolute; inset:0; display:block; margin:0; pointer-events:none; }
  /* Inner track + a moon circling it. */
  html[data-theme="orbit"][data-mode] .tabs.station-tabs-v::before {
    content:""; position:absolute; width:calc((var(--od-r) - 50px) * 2); height:calc((var(--od-r) - 50px) * 2);
    left:calc(var(--od-cx) - var(--od-r) + 50px); top:calc(50% - var(--od-r) + 50px); border-radius:50%; border:1px solid var(--od-ring-faint);
  }
  html[data-theme="orbit"][data-mode] .tabs.station-tabs-v::after {
    content:""; position:absolute; width:12px; height:12px; left:calc(var(--od-cx) - 6px); top:calc(50% - 6px); border-radius:50%;
    background:#65d1c0; box-shadow:0 0 14px #65d1c0; animation:od-moon 22s linear infinite;
  }
  html[data-theme="orbit"][data-mode] .station-tabs-v .station-submenu { display:contents; }
  /* Sub-pages ride an outer orbit, fanning out from the page that opened them. */
  /* Sub-pages ride the outer orbit, placed by height: the first level with its parent, the rest 42px
     apart below it. asin() turns that height into the angle on the outer orbit (radius --od-r2n). */
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab.od-sub {
    font-size:12px; padding:7px 13px;
    /* Hidden while the dial turns toward the group (--od-in, set by JS from how far it turns), then they
       fade in already stacked in their final spots, one after another; the radius glides with the dial. */
    transition:--sr .9s var(--od-spring),filter .2s,background .25s,color .25s,box-shadow .3s !important;
    /* !important: the shared base turns animations off on every .tab with !important. */
    animation:od-sub-in .38s cubic-bezier(.22,1,.36,1) calc(var(--od-in,0s) + var(--k,0) * 45ms) backwards !important;
    --tp:calc((var(--pi,0) - var(--od-rot)) * var(--od-step));
    --sa:asin(clamp(-1,calc((var(--od-rn) * sin(var(--tp)) + var(--k,0) * 42) / var(--sr,465)),1));
    --od-tf:rotate(var(--sa)) translateX(calc(var(--sr,465) * 1px)) rotate(calc(var(--sa) * -1)) translateY(-50%) scale(clamp(.68,calc(1.06 - var(--a) * .055),1.06));
  }
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab.od-sub:not(.active) { border-color:color-mix(in srgb,#65d1c0 55%,transparent) !important; }
  html[data-theme="orbit"][data-mode] .station-tabs-v .station-submenu::before {
    content:""; position:absolute; width:calc(var(--od-r2,calc(var(--od-r) + 215px)) * 2); height:calc(var(--od-r2,calc(var(--od-r) + 215px)) * 2);
    left:calc(var(--od-cx) - var(--od-r2,calc(var(--od-r) + 215px))); top:calc(50% - var(--od-r2,calc(var(--od-r) + 215px))); border-radius:50%;
    border:1.5px dashed color-mix(in srgb,#65d1c0 45%,transparent); pointer-events:none; animation:od-spin 140s linear infinite reverse, od-fade .6s ease both;
  }
  /* Each page: placed on the orbit by its distance from the dial position, kept upright. */
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab {
    --d:calc(var(--i,0) - var(--od-rot));
    --a:max(var(--d),calc(var(--d) * -1));
    position:absolute; left:var(--od-cx); top:50%; width:max-content; margin:0; white-space:nowrap;
    padding:8px 15px; border-radius:999px !important; font-size:12.5px;
    transform-origin:0 50%;
    pointer-events:auto;
    --od-tf:rotate(calc(var(--d) * var(--od-step))) translateX(var(--rr,var(--od-r))) rotate(calc(var(--d) * var(--od-step) * -1)) translateY(-50%) scale(clamp(.68,calc(1.06 - var(--a) * .055),1.06));
    transform:var(--od-tf) !important;
    opacity:clamp(0,calc(1.25 - var(--a) * .17),1);
    background:color-mix(in srgb,var(--panel) 82%,transparent) !important;
    border:1px solid var(--od-ring) !important; box-shadow:0 8px 20px -12px #000a !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    /* !important: the shared base gives every .tab 'transition: transform .15s !important', which
       would smear each dial step; the position must follow --od-rot directly. */
    transition:filter .2s,background .25s,color .25s,box-shadow .3s !important;
  }
  /* Hover/press never change a page's size or position: a growing hit area makes the pointer fall off
     the edge mid-press (the click is lost) and flip hover on/off (the shake). Glow and tone instead. */
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab:hover { filter:brightness(1.18); box-shadow:0 0 0 3px color-mix(in srgb,#65d1c0 55%,transparent),0 0 22px -4px #65d1c0 !important; z-index:2; }
  /* The shared base press style ('translateY(1px) !important' on every .tab) would replace the dial
     position mid-click, moving the page out from under the pointer so the click never lands.
     Keep the position; squeeze slightly instead. */
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab:active { transform:var(--od-tf) !important; filter:brightness(.85); }
  html[data-theme="orbit"][data-mode][data-style] .station-tabs-v .tab.active {
    background:linear-gradient(135deg,#ed9563,#c96d3f) !important; color:#1b0f08 !important; border-color:transparent !important;
    box-shadow:0 0 0 4px rgba(237,149,99,.22),0 0 30px rgba(237,149,99,.55) !important; z-index:3;
  }
}
@keyframes od-spin { to { rotate:360deg; } }
@keyframes od-fade { from { opacity:0; scale:.94; } }
@keyframes od-sub-in { from { opacity:0; filter:blur(3px); } }
@keyframes od-breathe { to { box-shadow:0 0 110px rgba(237,149,99,.5),inset -26px -14px 50px rgba(0,0,0,.5); } }
@keyframes od-moon { from { transform:rotate(0deg) translateX(calc(var(--od-r) - 50px)); } to { transform:rotate(360deg) translateX(calc(var(--od-r) - 50px)); } }

/* Giant background orbits around the same planet, each carrying a small world. */
#orbit-sky { display:none; }
html[data-theme="orbit"] #orbit-sky { display:block; position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
html[data-theme="orbit"] :is(#app-view,#login-view) { position:relative; z-index:1; }
.os-ring {
  position:absolute; left:calc(-110px - var(--s) / 2); top:calc(50% - var(--s) / 2); width:var(--s); height:var(--s); border-radius:50%;
  border:1px solid var(--od-ring-faint);
  transform:translate3d(calc(var(--px,0) * var(--k)),calc(var(--py,0) * var(--k)),0); transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.os-ring > i { position:absolute; inset:0; border-radius:50%; animation:od-spin var(--t) linear infinite; }
.os-ring > i::after {
  content:""; position:absolute; top:calc(50% - var(--p) / 2); right:calc(var(--p) / -2); width:var(--p); height:var(--p); border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--c); box-shadow:0 0 18px var(--c);
}
html[data-theme="orbit"]:not([data-mode="light"]) #orbit-sky::before {
  content:""; position:absolute; inset:0; opacity:.6; animation:os-twinkle 5s ease-in-out infinite alternate;
  background:radial-gradient(circle,#fff 1px,transparent 1.5px) 0 0/140px 140px,radial-gradient(circle,#ffd9c0 1px,transparent 1.5px) 70px 40px/210px 210px,radial-gradient(circle,#c9fff6 1px,transparent 1.5px) 30px 120px/260px 260px;
}
@keyframes os-twinkle { to { opacity:.25; } }

/* Hovering a station card sends a satellite around its outline. */
html[data-theme="orbit"][data-mode] .station-card h3 { position:static; }
html[data-theme="orbit"][data-mode] .station-card h3::after {
  content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:#65d1c0; box-shadow:0 0 12px #65d1c0,0 0 3px #fff;
  offset-path:inset(0 round 42px 12px); offset-distance:0%; offset-rotate:0deg; opacity:0; pointer-events:none; transition:opacity .35s;
}
html[data-theme="orbit"][data-mode] .station-card:hover h3::after { opacity:1; animation:od-satellite 2.8s linear infinite; }
@keyframes od-satellite { to { offset-distance:100%; } }

@media (prefers-reduced-motion:reduce) {
  html[data-theme="orbit"] :is(.station-rail-left,.station-rail-left::before,.station-rail-left::after,.tabs.station-tabs-v::after,.os-ring > i,#orbit-sky::before,.station-card h3::after) { animation:none !important; transition:none !important; }
  html[data-theme="orbit"] #orbit-sky { display:none; }
}