/* Nimbus: pages collapse into a moonlit constellation rail on the right edge. Icons magnify like a
   dock (transform-only) and a frosted label floats out to the left; the current page glows like the
   moon. Behind everything: canvas snowfall that drifts with the pointer's wind, and the moon.
   Desktop only (≥981px); theme-nimbus.js splits each page into icon + label and drives the label. */
html[data-theme="nimbus"] {
  --nb-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);
  --nb-glass:rgba(24,36,60,.55); --nb-edge:rgba(200,222,250,.28); --nb-moon:#eaf2fb; --nb-halo:rgba(220,235,255,.55);
}
html[data-theme="nimbus"][data-mode="light"] { --nb-glass:rgba(255,255,255,.62); --nb-edge:rgba(120,150,190,.35); --nb-moon:#ffffff; --nb-halo:rgba(120,160,210,.45); }
html[data-theme="nimbus"] :is(#app-view,#login-view) { position:relative; z-index:1; }

/* Same frame as Apple / Antigravity on every page. */
html[data-theme="nimbus"] { --nb-gutter:clamp(20px,3vw,56px); }
html[data-theme="nimbus"][data-mode] #content { max-width:1600px; margin-inline:auto; padding:32px var(--nb-gutter); }
@media (max-width:700px) { html[data-theme="nimbus"][data-mode] #content { padding:24px 16px; } }

/* Icon-only labels inside the rail (the split is done by JS). */
.nb-label { display:inline; }
@media (min-width:981px) {
  html[data-theme="nimbus"][data-mode] #content > .station-layout { animation:none; transform:none; }
  /* Clear the rail: content ends ≥110px from the window edge, whatever the frame offset. */
  html[data-theme="nimbus"][data-mode] #content:has(.station-layout) { padding-right:max(var(--nb-gutter),calc(110px - max(0px,(100vw - 1600px) / 2))); }
  html[data-theme="nimbus"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 212px; }
  html[data-theme="nimbus"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr); }
  html[data-theme="nimbus"][data-mode][data-style] .station-rail-left {
    position:fixed; right:16px; top:50%; translate:0 -50%; z-index:15; box-sizing:border-box;
    max-height:calc(100vh - 140px); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; contain:layout paint;
    padding:12px 10px 12px 18px; border-radius:36px !important;
    background:var(--nb-glass) !important; border:1px solid var(--nb-edge) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 24px 60px -24px #000c,inset 0 1px 0 rgba(255,255,255,.18) !important;
    transition:translate .9s var(--nb-spring),opacity .5s;
    @starting-style { translate:140% -50%; opacity:0; }
  }
  html[data-theme="nimbus"][data-mode] .station-rail-left::-webkit-scrollbar { display:none; }
  html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v { flex-direction:column; align-items:center; gap:7px; }
  /* The button (hit area) never moves or grows, so hover can't flip between neighbours. Only its
     circle (::before) and icon scale, growing out of the right edge toward the page. */
  html[data-theme="nimbus"][data-mode][data-style] :is(.tabs.station-tabs-v,#nimbus-fly) .tab {
    --sz:46px; width:var(--sz); height:var(--sz); padding:0 !important; display:grid !important; place-items:center; border-radius:50% !important;
    font-size:20px; line-height:1; overflow:visible; text-align:center; position:relative; isolation:isolate; margin:0;
    background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important;
  }
  html[data-theme="nimbus"][data-mode] :is(.tabs.station-tabs-v,#nimbus-fly) .tab::before {
    content:""; position:absolute; inset:0; z-index:-1; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 55%),color-mix(in srgb,var(--panel) 70%,transparent);
    border:1px solid var(--nb-edge); box-shadow:0 6px 14px -8px #000a;
    transform-origin:100% 50%; transform:translateX(var(--nx,0px)) scale(var(--ns,1));
    transition:transform .4s cubic-bezier(.3,1.4,.5,1),background .3s;
  }
  html[data-theme="nimbus"][data-mode] :is(.tabs.station-tabs-v,#nimbus-fly) .tab .nb-ico {
    transform:translateX(calc(var(--nx,0px) - (var(--ns,1) - 1) * var(--sz) / 2)) scale(var(--ns,1));
    transition:transform .4s cubic-bezier(.3,1.4,.5,1);
  }
  html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab .nb-label,
  html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab .muted { display:none; }
  html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab .nb-ico { display:block; }
  @media (hover:hover) {
    html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab:hover { --nx:-7px; --ns:1.24; z-index:2; }
    html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab:hover + .tab,
    html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab:has(+ .tab:hover) { --nx:-3px; --ns:1.09; }
  }
  /* The current page: a full moon with a breathing halo. */
  html[data-theme="nimbus"][data-mode][data-style] :is(.tabs.station-tabs-v,#nimbus-fly) .tab.active { color:#1c2d47 !important; }
  html[data-theme="nimbus"][data-mode] :is(.tabs.station-tabs-v,#nimbus-fly) .tab.active::before {
    background:radial-gradient(circle at 38% 32%,#fff,var(--nb-moon) 45%,#c9d8ec 100%); animation:nb-halo 3.2s ease-in-out infinite;
  }
  /* A group's sub-pages fly out as a second column beside the rail (moved there by JS). */
  #nimbus-fly {
    position:fixed; z-index:16; display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:12px 10px 12px 18px; border-radius:36px; box-sizing:border-box;
    background:var(--nb-glass); border:1px solid var(--nb-edge);
    -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 24px 60px -24px #000c,inset 0 1px 0 rgba(255,255,255,.18);
    transition:translate .6s var(--nb-spring),opacity .35s,top .45s var(--nb-spring);
    @starting-style { translate:36px 0; opacity:0; }
  }
  #nimbus-fly::after { content:""; position:absolute; right:-13px; top:var(--tether,50%); width:13px; border-top:1.5px dashed var(--nb-edge); }
  #nimbus-fly .station-submenu { display:contents; }
  html[data-theme="nimbus"][data-mode][data-style] #nimbus-fly .tab { --sz:42px; font-size:18px; }
  html[data-theme="nimbus"][data-mode] #nimbus-fly .tab .nb-label { display:none; }
  @media (hover:hover) { html[data-theme="nimbus"][data-mode] #nimbus-fly .tab:hover { --nx:-6px; --ns:1.2; } }
  /* The parent of an open group wears a ring so the fly-out reads as its children. */
  html[data-theme="nimbus"][data-mode] .tabs.station-tabs-v .tab.nb-open { outline:2px dashed var(--nb-edge); outline-offset:3px; }
}
@keyframes nb-halo { 0%,100% { box-shadow:0 0 0 0 var(--nb-halo),0 0 18px var(--nb-halo); } 50% { box-shadow:0 0 0 7px transparent,0 0 30px var(--nb-halo); } }

/* Floating label beside the hovered icon (lives outside the scrolling rail so it never clips). */
#nimbus-tip {
  position:fixed; z-index:30; pointer-events:none; padding:8px 14px; border-radius:14px; white-space:nowrap;
  font:600 13px/1.2 var(--font); color:var(--text);
  background:var(--nb-glass); border:1px solid var(--nb-edge); box-shadow:0 14px 30px -14px #000c;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  translate:-100% -50%; opacity:0; scale:.85; transform-origin:100% 50%;
  transition:opacity .2s,scale .35s var(--nb-spring),top .25s cubic-bezier(.22,1,.36,1);
}
#nimbus-tip.on { opacity:1; scale:1; }

/* Snowfall canvas + moon. */
#nimbus-sky { display:none; }
html[data-theme="nimbus"] #nimbus-sky { display:block; position:fixed; inset:0; z-index:0; pointer-events:none; }
#nimbus-sky canvas { width:100%; height:100%; display:block; }
.nb-moon {
  position:absolute; right:calc(110px + 6vw); top:9vh; width:120px; height:120px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 34%,rgba(150,170,200,.35) 0 9%,transparent 10%),
    radial-gradient(circle at 62% 58%,rgba(150,170,200,.28) 0 12%,transparent 13%),
    radial-gradient(circle at 44% 74%,rgba(150,170,200,.22) 0 6%,transparent 7%),
    radial-gradient(circle at 40% 35%,#ffffff,#e4edf8 55%,#b9c8de);
  box-shadow:0 0 60px rgba(220,235,255,.45),0 0 160px rgba(180,205,240,.25),inset -18px -12px 30px rgba(90,110,140,.35);
  animation:nb-moon 8s ease-in-out infinite alternate;
}
html[data-theme="nimbus"][data-mode="light"] .nb-moon { display:none; }
@keyframes nb-moon { to { box-shadow:0 0 80px rgba(220,235,255,.55),0 0 200px rgba(180,205,240,.3),inset -18px -12px 30px rgba(90,110,140,.35); } }

/* Frost sparkles bloom over a station card when hovered. */
html[data-theme="nimbus"][data-mode] .station-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(circle,#fff 1px,transparent 1.6px) 0 0/22px 22px,radial-gradient(circle,#dcebff 1px,transparent 1.4px) 11px 9px/34px 34px;
  -webkit-mask:radial-gradient(120% 90% at 100% 0%,#000,transparent 70%); mask:radial-gradient(120% 90% at 100% 0%,#000,transparent 70%);
  transition:opacity .6s cubic-bezier(.22,1,.36,1);
}
html[data-theme="nimbus"][data-mode] .station-card:hover::after { opacity:.75; }

@media (prefers-reduced-motion:reduce) {
  html[data-theme="nimbus"] :is(.station-rail-left,.station-rail-left .tab,.station-rail-left .tab::before,.station-rail-left .nb-ico,#nimbus-fly,#nimbus-fly .tab,#nimbus-fly .tab::before,#nimbus-fly .nb-ico,.nb-moon,#nimbus-tip,.station-card::after) { animation:none !important; transition:none !important; }
  html[data-theme="nimbus"] #nimbus-sky { display:none; }
}

/* The month title was white-on-pale in light mode; give it the theme's ink. */
html[data-theme="nimbus"][data-mode="light"] .month-bar .title { color:#2d4a6e !important; -webkit-text-fill-color:#2d4a6e !important; background:none !important; text-shadow:none !important; }