/* Lumina Score — shared styles (tonal layering, chord/lyric rendering, stage utilities) */

:root {
  --ls-primary: #ffbd7f;
  --ls-secondary: #46eaed;
  --ls-bg: #131313;
  --ls-on-surface: #e5e2e1;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ls-bg);
  color: var(--ls-on-surface);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* --- Chord / lyric notation (Notation = monospace Geist) --------------- */
/* Each token is a small column: chord on top, lyric text below. Using a real
   flex column (instead of absolute-positioning the chord) means the browser
   reserves genuine width/height for the chord label, so consecutive chords
   never overlap each other and never crowd into the line above. */
.chord-line {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 0.6em;
  vertical-align: bottom;
}
.chord-notation {
  color: var(--ls-primary);
  font-family: Geist, monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
  white-space: nowrap;
}
.chord-line .lyric-text {
  white-space: pre;
}

/* Section labels inside a sheet */
.sheet-section + .sheet-section { margin-top: 3rem; }

/* --- Scrollbars -------------------------------------------------------- */
.sheet-viewport { scrollbar-width: none; -ms-overflow-style: none; }
.sheet-viewport::-webkit-scrollbar { display: none; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #1c1b1b; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #353534; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #554334; }

/* --- Metronome pulse --------------------------------------------------- */
.active-metronome { animation: ls-pulse 0.5s ease-in-out infinite alternate; }
@keyframes ls-pulse {
  from { color: #ffb4ab; }
  to   { color: #ffbd7f; }
}

.beat-flash { animation: ls-flash 0.12s ease-out; }
@keyframes ls-flash {
  0%   { background-color: rgba(255, 189, 127, 0.35); }
  100% { background-color: transparent; }
}

/* --- Focus / stage mode (hides app chrome) ----------------------------- */
body.focus-mode .app-chrome { display: none !important; }
body.focus-mode .app-main { padding: 0 !important; }

/* --- Range input thumb (auto-scroll slider) ---------------------------- */
input[type="range"].ls-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: #353534;
  cursor: pointer;
}
input[type="range"].ls-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 9999px;
  background: var(--ls-primary);
  box-shadow: 0 0 0 4px rgba(255, 189, 127, 0.18);
}
input[type="range"].ls-slider::-moz-range-thumb {
  width: 18px; height: 18px; border: none;
  border-radius: 9999px;
  background: var(--ls-primary);
}

/* --- Generic helpers --------------------------------------------------- */
.nav-link.active {
  background-color: #ff9500;       /* primary-container */
  color: #643700;                  /* on-primary-container */
  font-weight: 600;
}
.fade-in { animation: ls-fade 0.25s ease-out; }
@keyframes ls-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Admin-only controls — hidden for free/premium (role=user) accounts.
   Default hidden to avoid any flash, revealed once the body is known to be admin. */
.admin-only { display: none !important; }
body.role-admin .admin-only { display: flex !important; }