/* Bubbly + Cloudy "float" layer: a bottom dock with pointer physics, a living 3D backdrop
   (rising soap bubbles / drifting parallax clouds) and richer surfaces. Layered over each
   theme's own palette and shapes in styles.css. Motion is transform/opacity only; the dock's
   ancestors never animate (a transformed ancestor would capture the fixed dock). */

/* ================= Shared: dock + frame ================= */
html:is([data-theme="bubbly"],[data-theme="cloudy"]) {
  --fl-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);
  --fl-ease:cubic-bezier(.22,1,.36,1);
}
html:is([data-theme="bubbly"],[data-theme="cloudy"]) :is(#app-view,#login-view) { position:relative; z-index:1; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] :is(#content,#content > .station-layout) { transform:none; filter:none; will-change:auto; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] #content > .station-layout { animation:none; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] #content:has(.station-layout) { padding-bottom:150px; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 232px; gap:24px; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr); }

html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .station-rail-left {
  position:fixed; left:50%; bottom:16px; z-index:20; translate:-50% 0;
  width:max-content; max-width:min(1200px,calc(100vw - 32px)); box-sizing:border-box;
  padding:24px 16px 12px; border-radius:999px !important;
  overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; contain:layout paint;
  transition:translate .9s var(--fl-spring),opacity .5s;
  @starting-style { translate:-50% 160%; opacity:0; }
}
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .station-rail-left::-webkit-scrollbar { display:none; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .tabs.station-tabs-v { flex-direction:row; flex-wrap:nowrap; align-items:flex-end; gap:8px; width:max-content; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .tabs.station-tabs-v .tab {
  position:relative; width:auto; white-space:nowrap; padding:10px 16px; font-size:13px; font-weight:600;
  transform-origin:50% 100%; backface-visibility:hidden;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0) scale(var(--fs,1));
  transition:transform .6s var(--fl-spring),background .3s,color .3s;
  animation:fl-bob 3.6s ease-in-out infinite;
}
/* Keep the physics position while pressed (the shared base sets ':active translateY(1px) !important'
   on every .tab, which would snap the page back mid-press). */
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .tabs.station-tabs-v .tab:active {
  transform:translate3d(var(--fx,0px),var(--fy,0px),0) scale(calc(var(--fs,1) * .96)) !important;
}
/* Idle bob on the independent translate property, so it composes with the pointer physics. */
@keyframes fl-bob { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .tabs.station-tabs-v .tab:nth-child(3n+1) { animation-duration:4.2s; animation-delay:-1.1s; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .tabs.station-tabs-v .tab:nth-child(3n+2) { animation-duration:3.1s; animation-delay:-2.3s; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .tabs.station-tabs-v .tab:nth-child(4n) { animation-duration:4.8s; animation-delay:-.6s; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .station-tabs-v .station-submenu {
  flex-direction:row; flex-basis:auto; align-items:flex-end; gap:6px; margin:0 4px; padding:4px; background:transparent; border:0;
}
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .station-rail-right { position:sticky; top:84px; }
html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .month-bar { flex-wrap:wrap; row-gap:10px; }

/* Living backdrop host (built by theme-float.js). */
#float-field { display:none; }
html:is([data-theme="bubbly"],[data-theme="cloudy"]) #float-field { display:block; position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* ================= Bubbly: soap bubbles ================= */
html[data-theme="bubbly"] {
  --bb-film:conic-gradient(from 0deg,#7ff3ff,#b8a6ff,#ff9ee0,#ffe98a,#9effc9,#7ff3ff);
  --bb-glass:rgba(255,255,255,.10); --bb-rim:rgba(255,255,255,.55);
}
html[data-theme="bubbly"][data-mode="light"] { --bb-glass:rgba(255,255,255,.42); --bb-rim:rgba(255,255,255,.95); }

/* Background bubbles: wrapper rises + sways (CSS), inner is pushed by the pointer (JS), body wobbles. */
.fb { position:absolute; bottom:-160px; left:var(--x); width:var(--s); height:var(--s); animation:fb-rise var(--d) linear infinite; animation-delay:var(--delay); will-change:transform; }
.fb-i { width:100%; height:100%; transition:transform .9s var(--fl-spring); }
.fb-b {
  position:relative; width:100%; height:100%; border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,0) 16%),
    radial-gradient(circle at 68% 76%,rgba(255,255,255,.35) 0 6%,transparent 18%),
    radial-gradient(circle,transparent 55%,rgba(255,255,255,.10) 68%,var(--bb-rim) 71%,transparent 73%),
    var(--bb-glass);
  box-shadow:inset 0 0 calc(var(--s) * .18) rgba(255,255,255,.25);
  animation:fb-wobble var(--w) ease-in-out infinite alternate;
}
.fb-b::before {
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--bb-film); opacity:.5; mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 69%,#000 71%,transparent 74%); mask:radial-gradient(circle,transparent 60%,#000 69%,#000 71%,transparent 74%);
  animation:fb-spin 7s linear infinite;
}
html[data-theme="bubbly"][data-mode="light"] .fb-b::before { mix-blend-mode:normal; opacity:.6; }
@keyframes fb-rise {
  0% { transform:translate3d(0,0,0); opacity:0; }
  6% { opacity:1; }
  25% { transform:translate3d(22px,-32vh,0); }
  50% { transform:translate3d(-16px,-64vh,0); }
  75% { transform:translate3d(18px,-96vh,0); }
  92% { opacity:1; }
  100% { transform:translate3d(0,-128vh,0); opacity:0; }
}
@keyframes fb-wobble { from { scale:1 1; } to { scale:1.05 .95; } }
@keyframes fb-spin { to { rotate:360deg; } }

/* Dock: a clear tray; every page is a glossy pill bubble with a thin-film rim. */
html[data-theme="bubbly"][data-mode][data-style] .station-rail-left {
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html[data-theme="bubbly"][data-mode="light"][data-style] .station-rail-left { background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)) !important; border-color:rgba(255,255,255,.9) !important; box-shadow:0 26px 50px -26px rgba(20,90,110,.45) !important; }
html[data-theme="bubbly"][data-mode][data-style] .tabs.station-tabs-v .tab {
  border-radius:999px !important; color:var(--text); border:1px solid var(--bb-rim) !important;
  background:
    radial-gradient(120% 90% at 28% 18%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),
    radial-gradient(80% 60% at 75% 95%,rgba(255,255,255,.18),transparent 60%),
    var(--bb-glass) !important;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.10),inset 0 3px 8px rgba(255,255,255,.35),0 10px 20px -14px rgba(0,0,0,.5) !important;
}
html[data-theme="bubbly"][data-mode] .tabs.station-tabs-v .tab::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:2px; pointer-events:none; background:var(--bb-film); opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html[data-theme="bubbly"][data-mode][data-style] .tabs.station-tabs-v .tab.active {
  color:#06313a !important;
  background:radial-gradient(110% 85% at 28% 18%,rgba(255,255,255,.75),transparent 50%),linear-gradient(135deg,var(--accent),var(--accent-2) 60%,var(--accent-3)) !important;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.12),inset 0 3px 8px rgba(255,255,255,.6),0 12px 26px -10px color-mix(in srgb,var(--accent) 70%,transparent) !important;
}
html[data-theme="bubbly"][data-mode] .tabs.station-tabs-v .tab.active::before { opacity:.9; }

/* Surfaces: a slowly turning thin-film rim and a jelly squish on calendar days. */
html[data-theme="bubbly"][data-mode] .station-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; background:var(--bb-film); opacity:.35;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .5s var(--fl-ease);
}
html[data-theme="bubbly"][data-mode] .station-card:hover::after { opacity:.85; }
@keyframes bb-jelly { 0% { scale:1 1; } 30% { scale:1.08 .93; } 50% { scale:.95 1.06; } 70% { scale:1.03 .98; } 100% { scale:1 1; } }
html[data-theme="bubbly"][data-mode] .cal .day:not(.empty):hover { animation:bb-jelly .7s var(--fl-ease); }

/* ================= Cloudy: parallax sky ================= */
html[data-theme="cloudy"] {
  --cl-top:#ffffff; --cl-bottom:#d9e7f7; --cl-shade:rgba(95,130,180,.28); --cl-op:.95;
}
html[data-theme="cloudy"]:not([data-mode="light"]) { --cl-top:#c5d6ee; --cl-bottom:#5f7799; --cl-shade:rgba(10,20,40,.45); --cl-op:.38; }

/* Each layer moves with the pointer at its own depth; clouds inside drift across the sky. */
.fc-layer { position:absolute; inset:0; transform:translate3d(calc(var(--px,0) * var(--k)),calc(var(--py,0) * var(--k)),0); transition:transform 1.4s var(--fl-ease); }
.fc { position:absolute; left:0; top:var(--y); width:var(--w); height:calc(var(--w) * .34); opacity:var(--o); animation:fc-drift var(--d) linear infinite; animation-delay:var(--delay); will-change:transform; }
.fc-b {
  position:absolute; inset:0; border-radius:999px; opacity:var(--cl-op);
  background:linear-gradient(180deg,var(--cl-top),var(--cl-bottom));
  box-shadow:inset -14px -16px 26px var(--cl-shade),0 22px 40px -26px var(--cl-shade);
}
.fc-b::before,.fc-b::after { content:""; position:absolute; border-radius:50%; background:linear-gradient(180deg,var(--cl-top),var(--cl-bottom)); box-shadow:inset -10px -12px 20px var(--cl-shade); }
.fc-b::before { width:46%; height:120%; left:14%; bottom:28%; }
.fc-b::after { width:36%; height:96%; left:50%; bottom:34%; }
.fc-layer.far .fc { filter:blur(3px); }
@keyframes fc-drift { from { transform:translate3d(-40vw,0,0); } to { transform:translate3d(130vw,0,0); } }
/* Sun glow by day; twinkling stars by night. */
html[data-theme="cloudy"][data-mode="light"] #float-field::before {
  content:""; position:absolute; right:-12vmax; top:-14vmax; width:46vmax; height:46vmax; border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,170,.75),rgba(255,214,120,.25) 40%,transparent 68%); animation:cl-sun 9s ease-in-out infinite alternate;
}
@keyframes cl-sun { to { scale:1.08; opacity:.85; } }
html[data-theme="cloudy"]:not([data-mode="light"]) #float-field::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle,#fff 1px,transparent 1.6px) 0 0/120px 120px,radial-gradient(circle,#dbe8ff 1px,transparent 1.6px) 60px 70px/170px 170px;
  opacity:.55; animation:cl-twinkle 4s ease-in-out infinite alternate;
}
@keyframes cl-twinkle { to { opacity:.25; } }

/* Dock: a soft cloud bank; every page is a small puffy cloud. */
html[data-theme="cloudy"][data-mode][data-style] .station-rail-left {
  padding-top:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 28px 54px -26px rgba(45,90,134,.45),inset 0 1px 0 #fff !important;
}
html[data-theme="cloudy"]:not([data-mode="light"])[data-style] .station-rail-left { background:linear-gradient(180deg,rgba(160,190,230,.18),rgba(160,190,230,.06)) !important; border-color:rgba(200,220,255,.22) !important; box-shadow:0 28px 54px -26px #000c !important; }
html[data-theme="cloudy"][data-mode][data-style] .tabs.station-tabs-v .tab {
  border-radius:999px !important; color:#2d5a86; border:0 !important; padding:10px 18px;
  background:linear-gradient(180deg,#ffffff,#e3eefa) !important;
  box-shadow:inset -6px -8px 14px rgba(95,130,180,.22),0 12px 20px -14px rgba(45,90,134,.55) !important;
  transition:transform .9s var(--fl-ease),background .3s,color .3s;
  animation-duration:5.4s;
}
html[data-theme="cloudy"][data-mode] .tabs.station-tabs-v .tab::before,
html[data-theme="cloudy"][data-mode] .tabs.station-tabs-v .tab::after {
  content:""; position:absolute; z-index:-1; border-radius:50%; background:inherit; pointer-events:none;
}
html[data-theme="cloudy"][data-mode] .tabs.station-tabs-v .tab::before { width:42%; height:130%; left:12%; bottom:30%; }
html[data-theme="cloudy"][data-mode] .tabs.station-tabs-v .tab::after { width:30%; height:100%; left:48%; bottom:40%; }
html[data-theme="cloudy"][data-mode] .tabs.station-tabs-v .tab { isolation:isolate; }
html[data-theme="cloudy"]:not([data-mode="light"])[data-style] .tabs.station-tabs-v .tab { color:#eaf3ff; background:linear-gradient(180deg,#7f97bb,#4d6589) !important; box-shadow:inset -6px -8px 14px rgba(10,20,40,.35),0 12px 22px -14px #000 !important; }
html[data-theme="cloudy"][data-mode][data-style] .tabs.station-tabs-v .tab.active {
  color:#3a2a00 !important; background:linear-gradient(180deg,#fff6d6,#ffd98a) !important;
  box-shadow:inset -6px -8px 14px rgba(190,130,30,.25),0 0 0 4px rgba(255,214,120,.25),0 14px 28px -12px rgba(230,160,40,.6) !important;
}
html[data-theme="cloudy"][data-mode] .station-card { transition:scale .9s var(--fl-ease),filter .6s; }
html[data-theme="cloudy"][data-mode] .station-card:hover { scale:1.025; }

/* ================= Small screens + accessibility ================= */
@media (max-width:980px) {
  html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode] .station-layout { grid-template-columns:minmax(0,1fr); }
  html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .station-rail-right { position:static; }
}
@media (max-width:700px) {
  html:is([data-theme="bubbly"],[data-theme="cloudy"])[data-mode][data-style] .station-rail-left { bottom:max(10px,env(safe-area-inset-bottom)); border-radius:28px !important; }
}
@media (prefers-reduced-motion:reduce) {
  html:is([data-theme="bubbly"],[data-theme="cloudy"]) :is(.station-rail-left,.station-rail-left .tab,.fb,.fb-b,.fb-b::before,.fc,#float-field::before,.cal .day) { animation:none !important; transition:none !important; }
  html:is([data-theme="bubbly"],[data-theme="cloudy"]) #float-field { display:none; }
}

/* The month title was white-on-pale in light mode for both themes; give it the theme's ink. */
html[data-theme="bubbly"][data-mode="light"] .month-bar .title { color:#0e6f80 !important; -webkit-text-fill-color:#0e6f80 !important; background:none !important; }
html[data-theme="cloudy"][data-mode="light"] .month-bar .title { color:#2d5a86 !important; -webkit-text-fill-color:#2d5a86 !important; background:none !important; }