/* =====================================================================
   theme.css — the unified Apple (iOS / macOS 26-27 "Liquid Glass") layer.

   Loaded LAST on every page, so it is the single source of truth over the
   three legacy token systems that used to fight each other:
     • app.css   — dark-first, --primary:#1d9bf6, --sidebar-w:240
     • ui.css    — light-first, --primary:#2f6bff, partial dark
     • index.html (Home) — its own inline --page/--accent island
   This file re-maps EVERY token those files use to one Apple palette, in
   BOTH themes, so light/dark is finally complete and consistent app-wide.
   It also owns the shared chrome look (sidebar, topbar, nav, cards, the
   docked player, the mobile tab bar), the motion system (spring easing +
   press states), and cross-document View Transitions.

   Theme mechanism: light by default (follows the OS until the user picks),
   dark under html[data-theme="dark"]. shell.js writes data-theme from
   localStorage; it also still toggles html.light for legacy rules — both
   stay in sync, and this file wins regardless because it loads last.
   ===================================================================== */

/* ============================ 1. Tokens =============================== */
:root{
  color-scheme: light;

  /* — Apple system font stack (overrides Fira Sans / whatever ui.css set) — */
  --font-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* — Canvas & surfaces (light) — */
  --page:#F5F5F7;  --bg:#F5F5F7;  --app:#F5F5F7;  --bg-main:#FBFBFD;
  --surface:#FFFFFF; --surface-2:#F1F2F6; --surface-3:#E9EAF0;
  --solid:#FFFFFF; --card:#FFFFFF; --card-hover:#F3F4F8; --sidebar:transparent;
  /* translucent "Liquid Glass" materials */
  --panel:rgba(255,255,255,.72);
  --panel-strong:rgba(255,255,255,.86);
  --panel-2:#F1F2F6;
  --panel-edge:rgba(255,255,255,.7);
  --glass-blur:40px; --glass-sat:180%;
  --chrome-bg:rgba(250,250,252,.72);   /* sidebar / topbar / tabbar material */
  --chrome-edge:rgba(0,0,0,.08);

  /* — Brand: one Apple blue everywhere (was 3 different blues) — */
  --primary:#0A84FF; --accent:#0A84FF;
  --primary-2:#0071E3; --primary-3:#0060CC;
  --primary-600:#0071E3; --primary-700:#0060CC;
  --primary-soft:rgba(10,132,255,.12);
  --primary-tint:rgba(10,132,255,.10); --primary-tint2:rgba(10,132,255,.16);
  --accent-tint:rgba(10,132,255,.12);
  --accent-grad:linear-gradient(135deg,#0A84FF,#0060DF);
  --primary-glow:rgba(10,132,255,.42);
  --ring:rgba(10,132,255,.32);

  /* — Text (Apple label hierarchy, light) — */
  --text:#1D1D1F; --text-2:#3A3A3C; --text-3:#6E6E73; --text-4:#8E8E93;
  --text-muted:#6E6E73; --text-dim:#8E8E93; --muted:#8E8E93;

  /* — Hairlines — */
  --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14);
  --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.05);

  /* — Elevation — */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 4px 12px -6px rgba(15,23,42,.10);
  --shadow:0 8px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -22px rgba(15,23,42,.26);
  --shadow-card:0 8px 32px rgba(15,23,42,.06);
  --shadow-float:0 6px 24px rgba(15,23,42,.08);
  --shadow-search:0 12px 40px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.05);

  /* — Radii (concentric, iOS-ish) — */
  --radius:16px; --radius-sm:11px; --radius-lg:22px; --radius-xl:28px; --pill:999px;

  /* — Layout — */
  --sidebar-w:250px; --rail-w:344px; --topbar-h:64px;
  --tabbar-h:56px; --page-gutter:clamp(20px,2.4vw,40px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* — Interaction surfaces — */
  --hover:rgba(0,0,0,.05); --hover-accent:rgba(10,132,255,.08);
  --tag-bg:#EEF1F6; --chip-bg:rgba(255,255,255,.7);
  --seg-bg:#EDEEF3; --seg-bg-hover:#E4E6EE;

  /* — Waveforms / misc from Home — */
  --wave-un:#C6CFDD; --wave-pl:#8B99AF; --wave-un-on:#9FC0F2; --wave-pl-on:#0A84FF;
  --playhead:#1D1D1F; --scroll:rgba(15,23,42,.16); --art-ring:rgba(0,0,0,.06);

  /* — Motion — */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);        /* iOS-style overshoot-free spring */
  --dur-fast:.14s; --dur:.24s; --dur-slow:.42s;

  --font-sys-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

/* ---------------- Dark (iOS true-black + elevated greys) --------------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#000000; --bg:#000000; --app:#000000; --bg-main:#0A0A0C;
  --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
  --solid:#1C1C1E; --card:#1C1C1E; --card-hover:#2C2C2E; --sidebar:transparent;
  --panel:rgba(28,28,30,.66);
  --panel-strong:rgba(30,30,33,.82);
  --panel-2:#2C2C2E;
  --panel-edge:rgba(255,255,255,.10);
  --chrome-bg:rgba(20,20,22,.66);
  --chrome-edge:rgba(255,255,255,.09);

  --primary:#0A84FF; --accent:#0A84FF; --primary-2:#409CFF; --primary-3:#66B0FF;
  --primary-600:#409CFF; --primary-700:#66B0FF;
  --primary-soft:rgba(10,132,255,.18);
  --primary-tint:rgba(10,132,255,.16); --primary-tint2:rgba(10,132,255,.24);
  --accent-tint:rgba(10,132,255,.18);
  --accent-grad:linear-gradient(135deg,#0A84FF,#0060DF);
  --primary-glow:rgba(10,132,255,.5);
  --ring:rgba(10,132,255,.4);

  --text:#F5F5F7; --text-2:#C7C7CC; --text-3:#98989F; --text-4:#8E8E93;
  --text-muted:#98989F; --text-dim:#6E6E73; --muted:#6E6E73;

  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06);

  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 16px -8px rgba(0,0,0,.6);
  --shadow:0 12px 34px -14px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -22px rgba(0,0,0,.8);
  --shadow-card:0 8px 32px rgba(0,0,0,.5);
  --shadow-float:0 8px 28px rgba(0,0,0,.55);
  --shadow-search:0 18px 48px rgba(0,0,0,.6);

  --hover:rgba(255,255,255,.06); --hover-accent:rgba(10,132,255,.14);
  --tag-bg:rgba(255,255,255,.08); --chip-bg:rgba(255,255,255,.05);
  --seg-bg:rgba(255,255,255,.08); --seg-bg-hover:rgba(255,255,255,.13);

  --wave-un:#48484A; --wave-pl:#6E6E73; --wave-un-on:#3A6FB0; --wave-pl-on:#0A84FF;
  --playhead:#F5F5F7; --scroll:rgba(255,255,255,.18); --art-ring:rgba(255,255,255,.10);
}

/* First paint before shell.js runs: follow the OS when no explicit choice. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not(.light){
    color-scheme: dark;
    --page:#000; --bg:#000; --app:#000; --bg-main:#0A0A0C;
    --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
    --solid:#1C1C1E; --card:#1C1C1E; --card-hover:#2C2C2E;
    --panel:rgba(28,28,30,.66); --panel-strong:rgba(30,30,33,.82); --panel-2:#2C2C2E;
    --chrome-bg:rgba(20,20,22,.66); --chrome-edge:rgba(255,255,255,.09);
    --text:#F5F5F7; --text-2:#C7C7CC; --text-3:#98989F; --text-4:#8E8E93;
    --text-muted:#98989F; --text-dim:#6E6E73; --muted:#6E6E73;
    --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
    --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06);
    --primary-2:#409CFF;
  }
}

/* ============================ 2. Base =============================== */
body{
  font-family:var(--font-sys)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ====================== 3. Motion & micro-interactions ================ */
/* One consistent, physical press: everything tappable dips a touch and dims.
   Uses transform+opacity only (compositor-friendly). */
@media (hover:hover){
  a[href], button, .nav-item, .icon-btn, .btn, .btn-new, .chip, .seg,
  .play-btn, .rec-play, .fav, .dl, .card, .tab, .menu-item, .user-card,
  .tb-pricing, [role="button"], [data-nav]{
    transition:transform var(--dur-fast) var(--ease-spring),
               background-color var(--dur) var(--ease),
               color var(--dur) var(--ease),
               border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               opacity var(--dur-fast) var(--ease);
  }
}
a[href]:active, button:not(:disabled):active, .nav-item:active, .icon-btn:active,
.btn:active, .btn-new:active, .chip:active, .play-btn:active, .rec-play:active,
.fav:active, .dl:active, .menu-item:active, .user-card:active, .tab:active,
[data-nav]:active{
  transform:scale(.955);
  opacity:.92;
}
/* Cards lift a hair on hover rather than shifting layout */
.card:hover, .tile:hover{ transform:translateY(-2px); }

/* ====================== 4. Shared chrome: SIDEBAR ==================== */
.app{ background:var(--bg); }
.sidebar{
  view-transition-name:app-sidebar;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-right:1px solid var(--chrome-edge);
}
.sidebar .brand b{ color:var(--text); font-weight:700; letter-spacing:-.02em; }
.sidebar .nav-item{
  border-radius:12px; color:var(--text-2); font-weight:500;
  padding:9px 11px; gap:11px;
}
.sidebar .nav-item svg{ color:var(--text-3); }
.sidebar .nav-item:hover{ background:var(--hover); color:var(--text); }
.sidebar .nav-item:hover svg{ color:var(--text); }
.sidebar .nav-item.active{
  background:var(--primary-soft); color:var(--primary); font-weight:600;
}
.sidebar .nav-item.active svg{ color:var(--primary); }
.sidebar .nav-sub .nav-item{ font-size:13.5px; }
.sidebar .storage-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-xs);
}
.sidebar .storage-card .bar{ background:var(--surface-3); border-radius:99px; overflow:hidden; height:6px; }
.sidebar .storage-card .bar > i{ background:var(--primary); border-radius:99px; display:block; height:100%; }
.sidebar .storage-card .bar > i.warn{ background:#FF9F0A; }
.sidebar .storage-card .bar > i.danger{ background:#FF453A; }
.sidebar .user-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-xs);
}
.sidebar .user-card:hover{ background:var(--card-hover); border-color:var(--border-2); }
.sidebar .user-card .who b{ color:var(--text); }
.sidebar .user-card .who span{ color:var(--text-3); }

/* ====================== 5. Shared chrome: TOPBAR ==================== */
.topbar{
  view-transition-name:app-topbar;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-bottom:1px solid var(--chrome-edge);
}
.topbar .searchbar{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--pill); color:var(--text-3);
}
.topbar .searchbar:focus-within{
  background:var(--surface); border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring);
}
.topbar .searchbar input{ color:var(--text); }
.topbar .searchbar input::placeholder{ color:var(--text-4); }
.topbar .searchbar .kbd{
  background:var(--surface-3); color:var(--text-3);
  border-radius:7px; padding:2px 6px; font-size:11px;
}
.topbar .icon-btn{
  color:var(--text-2); border-radius:12px; background:transparent;
  width:38px; height:38px;
}
.topbar .icon-btn:hover{ background:var(--hover); color:var(--text); }
.topbar .btn-new{
  background:var(--primary); color:#fff; border-radius:12px;
  box-shadow:0 6px 16px -8px var(--primary-glow); font-weight:600;
}
.topbar .btn-new:hover{ background:var(--primary-2); }
/* High-specificity dark fix for the legacy hardcoded light searchbar
   (ui.css:1086 set background:#f7f8fa without a theme guard). */
:root[data-theme="dark"] .topbar .searchbar{ background:var(--surface-2); border-color:var(--border); }

/* Dropdown menus / popovers — glass + spring in */
.menu, .new-wrap .menu{
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(24px);
  backdrop-filter:saturate(var(--glass-sat)) blur(24px);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg);
}
.menu .menu-item{ color:var(--text); border-radius:10px; }
.menu .menu-item:hover{ background:var(--hover); }
.menu .menu-item small{ color:var(--text-3); }
.new-wrap .menu.open{ animation:pop-in var(--dur) var(--ease-spring) both; }
@keyframes pop-in{ from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1;transform:none} }

/* ====================== 6. Docked player ==================== */
#shellPlayer, .player.shell-player{
  view-transition-name:app-player;
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(30px);
  backdrop-filter:saturate(var(--glass-sat)) blur(30px);
  border-top:1px solid var(--chrome-edge);
}
.player.shell-player .pl-name{ color:var(--text); }
.player.shell-player .pl-cat{ color:var(--text-3); }

/* ====================== 7. Mobile bottom TAB BAR ==================== */
.tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  grid-template-columns:repeat(5,1fr); align-items:stretch;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-top:1px solid var(--chrome-edge);
  view-transition-name:app-tabbar;
}
.tabbar .tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--text-4); font-size:10.5px; font-weight:600;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  letter-spacing:-.01em; background:none; border:0;
}
.tabbar .tab svg{ width:24px; height:24px; stroke-width:1.9; }
.tabbar .tab.active{ color:var(--primary); }
.tabbar .tab:active{ transform:scale(.9); opacity:.7; }

/* Slide-up "More" sheet (secondary nav on mobile) */
.more-sheet-scrim{
  position:fixed; inset:0; z-index:130; display:none;
  background:rgba(0,0,0,.32); opacity:0; transition:opacity var(--dur) var(--ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.more-sheet-scrim.show{ display:block; opacity:1; }
.more-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:131;
  transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-spring);
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-top-left-radius:22px; border-top-right-radius:22px;
  border-top:1px solid var(--chrome-edge);
  padding:8px 14px calc(18px + var(--safe-b));
  box-shadow:var(--shadow-lg);
}
.more-sheet-scrim.show .more-sheet{ transform:translateY(0); }
.more-sheet .grabber{ width:38px; height:5px; border-radius:99px; background:var(--border-2); margin:8px auto 12px; }
.more-sheet a{
  display:flex; align-items:center; gap:14px; padding:14px 12px;
  color:var(--text); font-size:16px; font-weight:500; border-radius:14px;
  text-decoration:none;
}
.more-sheet a:hover, .more-sheet a:active{ background:var(--hover); }
.more-sheet a svg{ width:22px; height:22px; color:var(--text-3); flex:none; stroke-width:1.9; }

/* ====================== 8. Responsive: phone layout ==================== */
@media (max-width:820px){
  :root{ --topbar-h:56px; }
  /* single column; the sidebar becomes an off-canvas drawer (shell.js .open) */
  .app{ grid-template-columns:1fr!important; }
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; width:min(84vw,300px); z-index:140;
    transform:translateX(-102%); transition:transform var(--dur-slow) var(--ease-spring);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{ transform:none; }
  .tabbar{ display:grid; }
  /* keep content clear of the fixed tab bar + docked player */
  .workspace{ padding-bottom:calc(var(--tabbar-h) + var(--safe-b)); }
  body.player-open .workspace{ padding-bottom:calc(var(--tabbar-h) + 88px + var(--safe-b)); }
  #shellPlayer, .player.shell-player{ bottom:calc(var(--tabbar-h) + var(--safe-b)); }
  /* comfortable iOS touch targets */
  .snd-row, .sfx-row, .rec-row, .tr-row, .more-sheet a, .menu-item{ min-height:48px; }
  .topbar .searchbar{ height:40px; }
}
/* Hide the tab bar on the sign-in / standalone screens that opt out */
body[data-page="login"] .tabbar, body.no-tabbar .tabbar{ display:none!important; }

/* ====================== 9. Cross-document View Transitions ==================== */
@view-transition{ navigation:auto; }

/* Persistent chrome keeps its name on both pages → it is matched old↔new and
   does NOT animate: the shell appears to stay put while only content swaps. */
::view-transition-group(app-sidebar),
::view-transition-group(app-topbar),
::view-transition-group(app-tabbar),
::view-transition-group(app-player){ animation-duration:0s; }

/* Main content: a soft iOS cross-fade + slight rise. */
::view-transition-old(root){ animation:vt-out 160ms var(--ease) both; }
::view-transition-new(root){ animation:vt-in 280ms var(--ease-spring) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ============ 9b. Beat legacy per-theme chrome rules ============
   ui.css ships ~58 `html[data-theme="dark"] .<chrome>` rules (specificity
   0,2,1) that would otherwise override the bare-class glass above in dark
   mode. These `html[data-theme] …` selectors match that specificity and,
   loading later, win in BOTH themes — so the Liquid-Glass chrome is
   consistent light and dark. Values stay token-driven. */
html[data-theme] .sidebar{ background:var(--chrome-bg); border-right:1px solid var(--chrome-edge); }
html[data-theme] .topbar{ background:var(--chrome-bg); border-bottom:1px solid var(--chrome-edge); }
html[data-theme] #shellPlayer,
html[data-theme] .player.shell-player{ background:var(--panel-strong); border-top:1px solid var(--chrome-edge); }
html[data-theme] .topbar .searchbar{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-3); }
html[data-theme] .topbar .searchbar input{ color:var(--text); }
html[data-theme] .topbar .searchbar:focus-within{ background:var(--surface); border-color:var(--primary); }
html[data-theme] .sidebar .nav-item{ color:var(--text-2); }
html[data-theme] .sidebar .nav-item:hover{ background:var(--hover); color:var(--text); }
html[data-theme] .sidebar .nav-item.active{ background:var(--primary-soft); color:var(--primary); }
html[data-theme] .sidebar .nav-item.active svg{ color:var(--primary); }
html[data-theme] .sidebar .user-card,
html[data-theme] .sidebar .storage-card{ background:var(--card); border:1px solid var(--border); }

/* ====================== 10. Reduced motion ==================== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){
    animation:none!important;
  }
  a[href]:active, button:active, .nav-item:active, .tab:active{ transform:none; }
}