@import url("mz-menu.css"); /* canonical top-menu (.mz-topbar/.mz-auth) */
@import url("cosmic-rail.css?v=r2"); /* canonical vertical rail (single source — do NOT redeclare .rail*) */
/* metro-cosmic.css — overlays the Mazmazika cosmic shell onto Tempo (metronome/tuner):
   shared background + vertical rail + glass, mapped to the cosmic theme tokens. */

/* original obsidian backdrop replaced by the shared cosmic background */
.stage-bg { display: none !important; }
.stage-aura { z-index: 0; }

/* clear space for the rail; layer content above the background */
.app { position: relative; z-index: auto; min-height: 100dvh; }
.app-head, .app-main { position: relative; z-index: 1; }
/* This is the only single-viewport tool, so it wouldn't show a vertical scrollbar — which
   left its centered shell ~8px right of every (scrolling) tool page, making the brand/topbar
   jump on navigation. Forcing the scrollbar makes it reserve space EXACTLY like the other
   pages' real scrollbars in both regimes (16px classic / 0px overlay) — so the topbar aligns
   and the page shows a scrollbar consistent with the rest of the site. */
body { transition: background-color .5s ease, color .3s ease; overflow-y: scroll; }
/* Kill horizontal overflow: the shared cosmic background (.bg → .mzbg) bleeds past
   the viewport by design (.mzbg-band ±20%, .mzbg-stars inset:-6%). .bg is position:fixed,
   so on the MOBILE viewport model it stretches to the *layout* viewport and drags it wider
   than the device (measured 458px @ 430px device) — which pushed fixed sheets/modals off the
   right edge and forced a phantom h-scroll. overflow-x:clip on the root clamps the layout
   viewport to device width without a scroll container (safe for sticky/fixed). No in-flow
   content overflows, so nothing real is hidden. Other cosmic pages already carry this guard. */
html { overflow-x: clip; }

/* ── Shell + topbar: identical container model & metrics to Vocal Remover ── */
.shell { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 22px 24px 4px; padding-left: 92px; }   /* width:100% so the flex-column .app doesn't shrink it; top matches VR's 22 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px 0; margin-bottom: 10px;   /* padding matches VR; mb stays tight for this single-screen tool */
}
/* tighten the shared hero on this dense single-viewport tool */
.mz-hero { margin: 6px auto 8px !important; }
.mz-hero .eyebrow { margin-bottom: 10px !important; }
.mz-hero .mz-hero-title, .mz-hero h1 { margin-bottom: 4px !important; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--bone, var(--ink)); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent-ink, #fff); background: var(--cta, linear-gradient(135deg, var(--accent2), var(--accent)));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 16.5px; letter-spacing: -.02em; line-height: 1; margin: 0; }
.brand-name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-link {
  color: var(--bone-2); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 10px; transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--bone); background: color-mix(in srgb, var(--bone) 8%, transparent); }
.theme-toggle {
  appearance: none; border: 1px solid var(--line-2); background: var(--panel-solid);
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer; color: var(--bone-2);
  display: grid; place-items: center; transition: .18s ease;
}
.theme-toggle:hover { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ── Shared page footer — same recipe as vocal-styles.css .foot so every page matches,
      mapped to this page's tokens (--line / --bone-3 stand in for --line / --ink-3). ── */
.foot { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: relative; z-index: 1; }
.foot .copy { color: var(--bone-3); font-size: 13px; }

/* ── Metronome panel: enlarged, readable type (base / smaller screens) ── */
.app-main { justify-content: center; padding-top: 0; gap: 12px; }
.mode-switch { margin-bottom: 4px; padding: 6px; }
.mode-btn { padding: 11px 26px; font-size: 15px; letter-spacing: .03em; }
.mode-btn svg { width: 16px; height: 16px; }

.dial-overline { font-size: 13px; letter-spacing: .3em; gap: 16px; }
.dial-overline .dot { width: 6px; height: 6px; }

.dial-wrap { width: min(82vw, 50vh, 500px); }
.bpm-big { font-size: clamp(52px, 11vh, 96px); }
.bpm-unit { font-size: 14px; letter-spacing: .36em; margin-top: 9px; }
.tempo-name { font-size: clamp(20px, 5vw, 30px); margin-top: 8px; }
.dial-caption { font-size: 13.5px; letter-spacing: .18em; }
.dial-hint { font-size: 12.5px; }

.tempo-line { width: auto; justify-content: center; gap: 18px; }
.nudge { width: 52px; height: 52px; }
.nudge svg { width: 21px; height: 21px; }
.tap-pad { height: 52px; padding: 0 24px; font-size: 15px; gap: 10px; }
.tap-pad svg { width: 18px; height: 18px; }

.dock { padding: 11px; gap: 11px; }
.dock-mod { padding: 11px 20px; gap: 10px; }
.dock-mod .dm-label { font-size: 11.5px; }
.dock-mod .dm-val { font-size: 19px; }
.dock-mod svg { width: 21px; height: 21px; }
.dock-mod > span { font-size: 15px !important; }

/* ── Desktop: fit the whole instrument in one viewport (height-driven) ── */
@media (min-width: 1000px) {
  .app-main { gap: 10px; padding-top: 0; }
  .mode-switch { padding: 6px; margin-bottom: 2px; }
  .mode-btn { padding: 10px 32px; font-size: 17px; }
  .mode-btn svg { width: 18px; height: 18px; }

  .dial-overline { font-size: 14px; letter-spacing: .3em; }
  .dial-wrap { width: min(42vw, 38vh, 420px); }
  .bpm-big { font-size: clamp(56px, 9vh, 88px); }
  .bpm-unit { font-size: 15px; margin-top: 6px; }
  .tempo-name { font-size: clamp(22px, 2.4vw, 32px); margin-top: 5px; }
  .dial-caption { font-size: 15px; }

  .tempo-line { gap: 20px; }
  .nudge { width: 54px; height: 54px; }
  .nudge svg { width: 23px; height: 23px; }
  .tap-pad { height: 54px; padding: 0 28px; font-size: 17px; gap: 11px; }
  .tap-pad svg { width: 20px; height: 20px; }

  .dock { padding: 11px; gap: 11px; }
  .dock-mod { padding: 11px 22px; gap: 10px; }
  .dock-mod .dm-label { font-size: 12px; letter-spacing: .14em; }
  .dock-mod .dm-val { font-size: 21px; }
  .dock-mod svg { width: 22px; height: 22px; }
  .dock-mod > span { font-size: 16px !important; }
  .train-pill { font-size: 14px; padding: 9px 14px; }

  /* Tuner pane is taller (more rows) — compress it to fit one viewport */
  .mode-pane { gap: 10px !important; }
  .mode-pane .dial-wrap { width: min(36vw, 33vh, 360px); }
  .ref-rail { padding: 9px 14px !important; }
  .tuner-controls { gap: 10px; }
  .tuner-foot { font-size: 12.5px; }
}

/* ── Taller desktop screens: allow a bit more breathing room ── */
@media (min-width: 1000px) and (min-height: 940px) {
  .app-main { gap: 16px; }
  .dial-wrap { width: min(52vw, 50vh, 520px); }
  .bpm-big { font-size: clamp(72px, 12vh, 112px); }
  .topbar { margin-bottom: 24px; }
}

/* ── Background (shared with landing) ───────────────────────── */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 12%, var(--bg3), transparent 56%),
    radial-gradient(110% 80% at 50% 118%, var(--bg2), transparent 62%),
    var(--bg);
  transition: background .5s ease;
}
.bg-nebula {
  position: absolute; inset: -22%;
  background:
    radial-gradient(52% 58% at 24% 26%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 76%),
    radial-gradient(56% 60% at 80% 80%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 78%),
    radial-gradient(48% 52% at 84% 20%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 78%);
  filter: blur(54px); opacity: .5; transition: opacity .5s ease;
}
.app[data-motion="1"] .bg-nebula { animation: nebula-drift 38s ease-in-out infinite alternate; }
@keyframes nebula-drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(2.5%, -2%, 0) scale(1.08); } }
.is-light .bg-nebula { opacity: .4; }

.bg-stars { position: absolute; inset: 0; color: #fff; }
.bg-stars span { position: absolute; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent); }
.app[data-motion="1"] .bg-stars.twinkle span { animation: twinkle linear infinite; }
@keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.is-light .bg-stars { color: var(--accent); opacity: .3; }

.bg-grain { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.bg-vignette { position: absolute; inset: 0;
  background: radial-gradient(115% 100% at 50% 42%, transparent 52%, color-mix(in srgb, var(--bg) 92%, black) 100%);
  transition: background .5s ease; }

/* Vertical rail → css/cosmic-rail.css (single source, imported at top). */

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* rail mobile behaviour lives in cosmic-rail.css */
  .shell { padding-left: 72px; padding-right: 16px; }
  .nav-link.hide-sm { display: none; }
}
@media (max-width: 620px) {
  .shell { padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-nebula, .bg-stars span { animation: none !important; }
}