/* =========================================================================
   Musicizer UI v3 — the clarity layer (loaded last on every page)
   Concept: "Every track starts on the grid". Calm ink surfaces, one orange
   action per screen, cream for what you chose. Tiles are uniform so the
   words carry the meaning, not random colours.
   ========================================================================= */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 16px; --radius-sm: 12px;
  --surface: #1C1A17; --surface-2: #24211D; --hairline: #34302A;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tabbar-h: 64px; --dock-h: 76px;
}
.glow { display: none !important; }

/* ---------- Accessibility basics ---------- */
:focus-visible { outline: 2px solid var(--orange) !important; outline-offset: 3px !important; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
button, a, summary, select, [role=tab] { cursor: pointer; touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Icons inside buttons ---------- */
.svg-i { width: 18px; height: 18px; flex: none; display: block; }
.ic { display: inline-flex; align-items: center; justify-content: center; }
.btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 44px; transition: background .18s, border-color .18s, transform .12s; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent !important; border: 1px solid var(--hairline) !important; color: var(--cream) !important; }
.btn.ghost:hover { border-color: var(--sand) !important; }
.btn.small { min-height: 38px; padding: 6px 14px !important; font-size: .85rem; }
.btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ---------- Navigation: five destinations + Tools ---------- */
.top { gap: 10px !important; }
.nav a.navlink .nbadge { display: none; }
.tools-menu { position: relative; }
.tools-menu > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .88rem; border: 1px solid var(--hairline); }
.tools-menu > summary::-webkit-details-marker { display: none; }
.tools-menu > summary .ni svg { width: 16px; height: 16px; }
.tools-menu[open] > summary, .tools-menu.active > summary, .tools-menu > summary:hover { color: var(--cream); border-color: var(--sand); }
.tools-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 260px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.tools-pop a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--cream); text-decoration: none; }
.tools-pop a:hover, .tools-pop a[aria-current] { background: var(--ink); }
.tools-pop .ni svg { width: 20px; height: 20px; color: var(--orange); }
.tools-pop b { display: block; font-size: .92rem; }
.tools-pop small { color: var(--muted); font-size: .78rem; }
@media (max-width: 760px) {
  .top { justify-content: space-between !important; }
  .tools-menu > summary .nl { display: none; }
  .tools-menu > summary { padding: 6px 10px; min-width: 44px; min-height: 44px; justify-content: center; }
  .tabbar { grid-template-columns: repeat(5, 1fr) !important; }
  .tab { font-size: .7rem !important; }
  .tab .nbadge { display: none; }
}

/* ---------- Uniform tiles (styles, presets, directions) ---------- */
:is(.vibe-grid, .presets, .dirs) > :is(.vibe, .preset, .dir) {
  --t: var(--surface) !important; --tt: var(--cream) !important; --tm: transparent !important;
  background: var(--surface) !important; color: var(--cream) !important;
  border: 1px solid var(--hairline) !important; outline: none !important; transform: none !important;
  min-height: 112px !important; text-align: left; position: relative; overflow: hidden;
  transition: border-color .18s, background .18s !important;
}
:is(.vibe, .preset, .dir) * { color: inherit !important; }
:is(.vibe, .preset, .dir) small, .dir p { color: var(--muted) !important; opacity: 1 !important; }
:is(.vibe-grid, .presets, .dirs) > * .mega { color: #2A2621 !important; font-size: 3.2rem !important; }
:is(.vibe, .preset, .dir):hover { border-color: var(--sand) !important; transform: none !important; }
:is(.vibe.selected, .preset.selected, .dir.active) {
  background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; outline: none !important;
}
:is(.vibe.selected, .preset.selected, .dir.active) small, .dir.active p { color: #5B5248 !important; }
:is(.vibe.selected, .preset.selected, .dir.active) .mega { color: #E9DCC6 !important; }
.vibe .tick { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--ink) !important; display: none; align-items: center; justify-content: center; z-index: 2; }
.vibe .tick .svg-i { width: 16px; height: 16px; stroke-width: 3; }
.vibe.selected .tick { display: flex; }
.group-title { color: var(--muted) !important; font-size: .74rem !important; letter-spacing: .1em; text-transform: uppercase; margin: var(--s5) 0 var(--s3) !important; }

/* ---------- Studio: compact hero + doors ---------- */
.hero.hero-compact { padding-bottom: var(--s4) !important; }
.hero.hero-compact h1 { font-size: clamp(2.1rem, 6vw, 3.8rem) !important; }
.doors { max-width: 1240px; margin: 0 auto var(--s5); padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.door { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline); color: var(--cream); text-decoration: none; transition: border-color .18s; }
.door:hover { border-color: var(--sand); }
.door > .ic:first-child { width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--orange); flex: none; }
.door b { display: block; font-size: .98rem; }
.door small { color: var(--muted); font-size: .8rem; }
.door .go { margin-left: auto; color: var(--muted); }

/* ---------- Steps ---------- */
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s3); }
.step-head h2 { margin: 0 !important; font-size: 1.45rem !important; }
.step-head .btn { margin-left: auto; }
.step-no { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--orange); color: var(--ink); font-weight: 700; font-family: var(--display); }
.finetune { margin-top: var(--s5); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.finetune > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 60px; }
.finetune > summary::-webkit-details-marker { display: none; }
.finetune > summary .step-no { background: var(--surface-2); color: var(--cream); border: 1px solid var(--hairline); }
.finetune > summary b { display: block; font-size: 1.05rem; }
.finetune > summary small { color: var(--muted); font-size: .82rem; }
.finetune > summary .chev { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease-out); }
.finetune[open] > summary .chev { transform: rotate(180deg); }
.finetune .options { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px !important; padding: 0 16px 16px; }
.finetune .opt select { width: 100%; min-height: 44px; }
.picker-head { display: none; }

/* ---------- Dock: progress cells + the one main action ---------- */
body.has-dock { padding-bottom: calc(var(--dock-h) + 24px) !important; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid var(--hairline); }
.dock-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.cells { display: grid; grid-template-columns: repeat(2, 14px); gap: 4px; flex: none; }
.cells i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--hairline); transition: background .25s var(--ease-out); }
.cells i.on { background: var(--cream); border-color: var(--cream); }
.cells i.on:first-child { background: var(--orange); border-color: var(--orange); }
.dock-text { min-width: 0; flex: 1; }
.dock-text small { display: block; color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-text b { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .btn.big { min-height: 52px; padding: 10px 28px !important; font-size: 1.02rem; flex: none; }
@media (max-width: 760px) {
  .dock { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  body.has-dock { padding-bottom: calc(var(--dock-h) + var(--tabbar-h) + 24px + env(safe-area-inset-bottom)) !important; }
  .dock .btn.big { padding: 10px 18px !important; }
  .dock-text b { font-size: 1rem; }
}

/* ---------- The result: player + sheet ---------- */
.stage { scroll-margin-top: 12px; }
.viz { height: 190px !important; margin: 4px 0; }
@media (max-width: 760px) { .viz { height: 150px !important; } }
.stage-mid { gap: var(--s4); }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px !important; }
.transport .t-spacer { flex: 1; }
.play-btn { min-width: 120px; }
.status { color: var(--green) !important; font-size: .85rem; }
.sheet { margin-top: var(--s4); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.sheet-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--hairline); }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tabs [role=tab] { background: none; border: 0; color: var(--muted); font: 600 .95rem var(--ui); padding: 12px 16px; min-height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sheet-tabs [role=tab][aria-selected=true] { color: var(--cream); border-bottom-color: var(--orange); }
.sheet-tabs [role=tab]:hover { color: var(--cream); }
.sheet-panel { padding: var(--s4) 0 0; }
.sheet-panel .hint { margin: 0 0 var(--s3); color: var(--muted); font-size: .88rem; }
.sheet-panel .tweaks { background: none !important; border: 0 !important; padding: 0 !important; }
.sub-title { margin: var(--s5) 0 var(--s3); font-weight: 700; color: var(--cream); font-size: .95rem; }
.sub-title small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.sheet-panel .sub-title:first-child { margin-top: 0; }
.layer-btn { min-height: 40px; }
.layer-btn.off { text-decoration: line-through; opacity: .55; }

/* My songs list */
.library li .t-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.library li .del { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: var(--muted); background: none; border: 0; border-radius: 10px; }
.library li .del:hover { color: #E85D4A; background: var(--ink); }
.library li .del .svg-i { width: 16px; height: 16px; }

/* Arabic watermark on tiles: brand texture, never competing with the words */
:is(.vibe-grid, .presets, .dirs) > :nth-child(n) .mega { color: #272420 !important; font-size: 3rem !important; opacity: 1 !important; }
:is(.vibe-grid, .presets, .dirs) > :nth-child(n):is(.selected, .active) .mega { color: #E8DCC6 !important; }
:is(.vibe, .preset, .dir) > :not(.mega):not(.tick) { position: relative; z-index: 1; }

/* player: grid on the left, the story chapter beside it; stacked on smaller screens */
@media (max-width: 900px) {
  .stage-mid { display: flex !important; flex-direction: column; align-items: stretch !important; }
  .stage-mid .chapter-box { text-align: left !important; }
}
.time { font-variant-numeric: tabular-nums; }

/* Arrangement strips: neutral sections, surprises in orange, the current one in cream */
.eg-map .seg { background: var(--surface-2) !important; color: var(--sand) !important; border: 0 !important; }
.eg-map .seg.special { background: var(--orange) !important; color: var(--ink) !important; }
.timeline .sec { background: var(--surface-2) !important; color: var(--sand) !important; }
.timeline .sec.chorus, .timeline .sec.post { background: #3A3129 !important; color: var(--cream) !important; }
.timeline .sec.current { background: var(--cream) !important; color: var(--ink) !important; }
.timeline .playhead { background: var(--orange) !important; box-shadow: none !important; }
.eg-sheet { padding: 0 16px 16px; margin-top: 0; }
.eg-btns { gap: 8px !important; }

/* the phone tab bar must not inherit page-level ".tab" styles (Fast Tracks uses .tab for its own chips) */
.tabbar .tab { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; padding: 4px 2px !important; min-height: 52px; color: var(--muted) !important; }
.tabbar .tab.active { color: var(--cream) !important; background: none !important; }

/* My Tracks: icon tiles instead of emoji */
.item-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--orange); }
.list > .item .item-top { --t: var(--surface) !important; --tt: var(--cream) !important; background: var(--surface) !important; color: var(--cream) !important; }
.list > .item:nth-child(n) .mega { color: #272420 !important; }
.item .del { color: var(--muted) !important; }
.item .del:hover { color: #E85D4A !important; }
.empty .big { color: var(--orange); display: flex; justify-content: center; }
.empty .big .svg-i { width: 40px; height: 40px; }
.vibe.selected, .preset.selected, .dir.active, .beat.playing, .track.selected, .inst.playing { outline: none !important; }

/* Segmented control (category switches) — shared by Reels and Library */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--ink); border: 1px solid var(--hairline); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: 0; background: none; color: var(--muted); font: 600 .9rem var(--ui); padding: 10px 16px; min-height: 40px; border-radius: 10px; white-space: nowrap; }
.seg button[aria-pressed=true] { background: var(--cream); color: var(--ink); }
.seg button:hover:not([aria-pressed=true]) { color: var(--cream); }
.inst.playing { border-color: var(--orange) !important; background: #2B2621 !important; }

/* =========================================================================
   Beat animations (beatfx.js) — the page moves with the music
   ========================================================================= */
/* stage light: a warm glow rising from the bottom on every kick */
.bfx-light { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 46; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 90, 31, .16), rgba(255, 90, 31, 0) 70%); }
.bfx-light.on { animation: bfxLight .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes bfxLight { 0% { opacity: var(--k, .6); transform: scaleY(1.04); } 100% { opacity: 0; transform: scaleY(1); } }

/* speaker cone: a ring leaves the play button on each kick */
.play-btn, .pb { position: relative; }
.bfx-ring::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--orange); pointer-events: none; animation: bfxRing .5s ease-out forwards; }
@keyframes bfxRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.pb.bfx-ring::after { border-radius: 50%; }

/* the logo mark steps through the bar and bumps on the kick */
.brand svg rect { transition: fill .08s, opacity .08s; }
.brand svg.bfx-bump { animation: bfxBump .18s ease-out; }
@keyframes bfxBump { 0% { transform: translateY(1.5px) scale(.97); } 100% { transform: none; } }

/* drop moment: an orange line sweeps across the top; the hero word lights up */
.bfx-sweep { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 70; pointer-events: none; background: var(--orange); transform: scaleX(0); transform-origin: left; opacity: 0; }
.bfx-sweep.on { animation: bfxSweep .9s cubic-bezier(.16, 1, .3, 1); }
.bfx-sweep.flash { animation: bfxFlash .6s ease-out; }
@keyframes bfxSweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes bfxFlash { 0% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.hero-mega.bfx-drop { animation: bfxDrop 1s ease-out; }
@keyframes bfxDrop { 0% { color: rgba(255, 90, 31, .55); } 100% { } }


@media (prefers-reduced-motion: reduce) {
  .bfx-light, .bfx-ring::after { display: none; }
  .brand svg.bfx-bump { animation: none; }
}

/* sound waves: live ribbons sitting on top of the dock while music plays */
.bfx-waves { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; z-index: 44; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
@media (max-width: 760px) { .bfx-waves { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .bfx-waves { display: none; } }