/* =========================================================================
   YARDWAVE — Platform Stylesheet
   =========================================================================
   Based on ARTILWAVE Blueprint design system.
   Bebas Neue + Space Mono + Syne. Dark editorial aesthetic.
   Mobile-first. Mood-first.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   CSS Custom Properties — Blueprint Palette
   --------------------------------------------------------------------------- */
:root {
  --black: #060606;
  --gold: #C9A84C;
  --gold-dim: #8A6E2F;
  --green: #1DB954;
  --white: #F0EDE6;
  --grey: #1A1A1A;
  --grey-mid: #2A2A2A;
  --grey-text: #888880;
  --red: #D64045;

  /* Mapped aliases */
  --bg-primary: #060606;
  --bg-secondary: #0D0D0D;
  --bg-card: #1A1A1A;
  --bg-hover: #2A2A2A;
  --bg-input: #222222;
  --text-primary: #F0EDE6;
  --text-secondary: #AAAAAA;
  --text-muted: #888880;
  --text-body: #888880;
  --text-accent: #C9A84C;

  /* Mood colors */
  --mood-1: #4A9ECC;
  --mood-2: #C9A84C;
  --mood-3: #1DB954;
  --mood-4: #D64045;
  --mood-5: #8A7ACC;
  --mood-6: #C9A84C;
  --mood-7: #888888;

  /* Mood backgrounds */
  --mood-bg-1: #0D1B2A;
  --mood-bg-2: #1A0A00;
  --mood-bg-3: #0A1A0D;
  --mood-bg-4: #1A0A12;
  --mood-bg-5: #0A0A1A;
  --mood-bg-6: #1A1500;
  --mood-bg-7: #1A0808;

  /* Layout */
  --max-width: 1400px;
  --section-pad: 100px;
  --btn-pad: 16px 36px;
  --btn-font: 12px;
  --h1-size: clamp(56px, 11vw, 140px);
  --h2-size: clamp(36px, 6vw, 72px);
  --body-size: 15px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ---------------------------------------------------------------------------
   Reset & Base
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  /* Paint the whole canvas black so overscroll, safe-area insets and the
     Android system nav/status bars never show white behind the app. */
  background-color: var(--black);
}

body {
  font-family: 'Space Mono', monospace;
  background: var(--black);
  color: var(--grey-text);
  font-size: var(--body-size);
  line-height: 1.8;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: crosshair;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--white); }

img { max-width: 100%; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: 'Space Mono', monospace;
  font-size: 16px;
}


/* ---------------------------------------------------------------------------
   Noise Overlay
   --------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}


/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
h1, h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 0.95;
  color: var(--white);
  text-transform: uppercase;
}

h3 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); margin-bottom: 24px; }

p {
  font-size: var(--body-size);
  line-height: 1.8;
  color: var(--grey-text);
}

p strong { color: var(--white); }

.text-gold, h2 .accent, h1 span { color: var(--gold); }
.text-muted { color: var(--grey-text); }
.text-patois {
  font-style: italic;
  color: var(--grey-text);
  font-size: 12px;
  letter-spacing: 2px;
}


/* ---------------------------------------------------------------------------
   Tag Label
   --------------------------------------------------------------------------- */
.tag {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}


/* ---------------------------------------------------------------------------
   Section Number (big watermark)
   --------------------------------------------------------------------------- */
.section-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 10vw, 120px);
  color: var(--grey-mid);
  line-height: 1;
  margin-bottom: -16px;
}


/* ---------------------------------------------------------------------------
   Divider
   --------------------------------------------------------------------------- */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 48px 0;
}


/* ---------------------------------------------------------------------------
   Logo — YARD (white) WAVE (gold) — red sine wave through WAVE only
   --------------------------------------------------------------------------- */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  margin-left: -4px;
}

.brand-yard { color: var(--white); }

.brand-wave {
  color: var(--gold);
  position: relative;
}

/* Red sine wave — only through WAVE */
.brand-wave::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: var(--red);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 Q10 0 20 4 Q30 8 40 4 Q50 0 60 4 Q70 8 80 4 Q90 0 100 4 Q110 8 120 4' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 Q10 0 20 4 Q30 8 40 4 Q50 0 60 4 Q70 8 80 4 Q90 0 100 4 Q110 8 120 4' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.85;
}

@media (min-width: 768px) {
  .nav-brand { font-size: 1.8rem; }
}


/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 48px; }
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

section, .section {
  padding: 60px 24px;
  border-bottom: 1px solid var(--grey-mid);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  section, .section { padding: var(--section-pad) 48px; }
}

section p, .section p {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}


/* ---------------------------------------------------------------------------
   Cards (Blueprint style — gold hover animation)
   --------------------------------------------------------------------------- */
.card {
  background: var(--grey);
  padding: 36px;
  border: 1px solid var(--grey-mid);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
  text-align: left;
}

.card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-4px);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.card:hover::before {
  transform: scaleX(1);
}

.card-tag {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}


/* ---------------------------------------------------------------------------
   Navigation — bigger, readable
   --------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(6, 6, 6, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--grey-mid);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .nav-inner { height: 72px; padding: 0 48px; }
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
}

@media (min-width: 768px) {
  .nav-links { gap: 32px; }
}

.nav-links a {
  color: var(--grey-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;        /* Fix 6 — never wrap nav text on small screens */
}

@media (min-width: 768px) {
  .nav-links a { font-size: 14px; }
}

.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--gold);
  color: var(--black) !important;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 12px !important;
  letter-spacing: 2px;
  transition: background 0.2s;
  white-space: nowrap;        /* Fix 6 — "Log In" / "Subscribe" stays one line */
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--white);
  color: var(--black) !important;
}

@media (min-width: 768px) {
  .nav-cta { padding: 10px 24px; font-size: 13px !important; }
}

@media (max-width: 767px) {
  .nav-links .hide-mobile { display: none; }
}


/* ---------------------------------------------------------------------------
   Mobile navigation — hamburger + FULL-WIDTH dropdown from the header.
   Only active when js/nav.js adds .nav--collapsible, so pages without the
   script are unaffected. Desktop (>=768px) is completely unchanged.
   --------------------------------------------------------------------------- */

/* Hamburger button — hidden by default (desktop); shown on mobile below. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 130;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle-bars::after  { position: absolute; top: 7px;  left: 0; }

/* Open state → morph the bars into an X */
.nav--open .nav-toggle-bars { background: transparent; }
.nav--open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav--open .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop behind the open dropdown */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
  z-index: 110;
}
.nav--open .nav-backdrop { opacity: 1; visibility: visible; }

/* The dropdown panel is built by nav.js; hidden entirely on desktop. */
.nav-dropdown { display: none; }

@media (max-width: 767px) {
  /* Show the hamburger only where the dropdown script is active */
  .nav--collapsible .nav-toggle { display: flex; }

  /* The page's own inline links are replaced by the dropdown on mobile. */
  .nav--collapsible .nav-links { display: none; }

  /* Full-width panel that expands DOWN from the header bar. */
  .nav--collapsible .nav-dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--black);
    border-bottom: 1px solid var(--grey-mid);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    z-index: 120;
    /* Collapsed: clipped to zero height, so it unrolls downward. */
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    /* Never let a long menu run off-screen on a short device. */
    overscroll-behavior: contain;
  }
  /* Only animate once the closed state has painted (nav.js adds .nav--ready). */
  .nav--collapsible.nav--ready .nav-dropdown {
    transition: max-height 0.28s var(--ease), visibility 0.28s var(--ease);
  }
  .nav--collapsible.nav--open .nav-dropdown {
    max-height: calc(100vh - 60px);
    visibility: visible;
    overflow-y: auto;
  }

  .nav-dd-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 10px;
  }
  .nav-dd-list li { width: 100%; }

  /* Generous, readable rows — full width, big tap targets, no cramping. */
  .nav-dd-item {
    display: block;
    width: 100%;
    padding: 17px 24px;
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    border-bottom: 1px solid var(--grey-mid);
    transition: background 0.15s, color 0.15s;
  }
  .nav-dd-list li:last-child .nav-dd-item { border-bottom: none; }
  .nav-dd-item:active { background: rgba(255, 255, 255, 0.06); }

  .nav-dd-item--admin  { color: var(--gold); }
  .nav-dd-item--logout { color: var(--grey-text); }

  /* Subscribe keeps its filled CTA treatment, inset from the rows. */
  .nav-dd-item--cta {
    margin: 12px 24px 4px;
    width: auto;
    padding: 15px 20px;
    text-align: center;
    background: var(--gold);
    color: var(--black);
    border-bottom: none;
    letter-spacing: 2px;
  }
}


/* ---------------------------------------------------------------------------
   Hero Section — centered, massive type
   --------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px 24px 80px;
  position: relative;
  border-bottom: 1px solid var(--grey-mid);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { padding: 80px 48px; }
}

/* Rotated watermark */
.hero::after {
  content: 'YARDWAVE';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 100px;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey-mid);
  letter-spacing: 10px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}

@media (min-width: 768px) {
  .hero::after { display: block; font-size: 160px; }
}

.hero h1 {
  margin-bottom: 8px;
  font-size: var(--h1-size);
}

.hero .hero-sub {
  font-family: 'Syne', sans-serif;
  font-size: clamp(15px, 2.2vw, 22px);
  color: var(--grey-text);
  margin-top: 28px;
  max-width: 650px;
  line-height: 1.6;
}

.hero .hero-sub em {
  color: var(--white);
  font-style: normal;
  font-weight: 700;
}

/* Status bar */
.status-bar {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  flex-wrap: wrap;
  justify-content: center;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--grey-text);
  text-transform: uppercase;
}

.status-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--gold);
  letter-spacing: 1px;
}

.status-value.green { color: var(--green); }
.status-value.red { color: var(--red); }

/* Hero buttons */
.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hero animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero > * {
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}

.hero > *:nth-child(1) { animation-delay: 0.1s; }
.hero > *:nth-child(2) { animation-delay: 0.2s; }
.hero > *:nth-child(3) { animation-delay: 0.3s; }
.hero > *:nth-child(4) { animation-delay: 0.4s; }
.hero > *:nth-child(5) { animation-delay: 0.5s; }
.hero > *:nth-child(6) { animation-delay: 0.6s; }


/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: var(--btn-font);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  min-height: 48px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--grey-mid);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 10px;
  min-height: 40px;
}


/* ---------------------------------------------------------------------------
   Mood Station Cards
   --------------------------------------------------------------------------- */
.mood-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 40px;
}

@media (min-width: 480px) {
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .mood-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.mood-card {
  padding: 40px 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  border: 1px solid var(--grey-mid);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.mood-card:hover { transform: translateY(-4px); }
.mood-card:active { transform: scale(0.98); }

.mood-card[data-mood="1"] { background: var(--mood-bg-1); }
.mood-card[data-mood="2"] { background: var(--mood-bg-2); }
.mood-card[data-mood="3"] { background: var(--mood-bg-3); }
.mood-card[data-mood="4"] { background: var(--mood-bg-4); }
.mood-card[data-mood="5"] { background: var(--mood-bg-5); }
.mood-card[data-mood="6"] { background: var(--mood-bg-6); }
.mood-card[data-mood="7"] { background: var(--mood-bg-7); }

.mood-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: rgba(255,255,255,0.06);
  position: absolute;
  bottom: -10px;
  right: 10px;
  line-height: 1;
}

.mood-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.mood-card[data-mood="1"] .mood-name { color: var(--mood-1); }
.mood-card[data-mood="2"] .mood-name { color: var(--mood-2); }
.mood-card[data-mood="3"] .mood-name { color: var(--mood-3); }
.mood-card[data-mood="4"] .mood-name { color: var(--mood-4); }
.mood-card[data-mood="5"] .mood-name { color: var(--mood-5); }
.mood-card[data-mood="6"] .mood-name { color: var(--mood-6); }
.mood-card[data-mood="7"] .mood-name { color: var(--mood-7); }

.mood-patois {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--grey-text);
  font-style: italic;
  margin-bottom: 12px;
  display: block;
}

.mood-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-text);
  margin-bottom: 12px;
  max-width: none;
}

.mood-meta {
  display: flex;
  gap: 16px;
  font-size: 10px;
  color: var(--grey-text);
  letter-spacing: 1px;
}


/* ---------------------------------------------------------------------------
   Track List
   --------------------------------------------------------------------------- */
.track-list { list-style: none; }

.track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--grey-mid);
  transition: background 0.2s;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  .track-item { gap: 16px; padding: 16px 20px; }
}

.track-item:hover, .track-item:active, .track-item.playing { background: var(--grey); }

.track-number {
  font-size: 12px;
  color: var(--grey-text);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  font-family: 'Space Mono', monospace;
}

.track-play-btn {
  width: 40px;
  height: 40px;
  background: var(--grey);
  border: 1px solid var(--grey-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 40px;
  transition: all 0.2s;
}
.track-play-btn:hover { border-color: var(--gold); background: var(--gold); }
.track-play-btn:hover svg { fill: var(--black); }
.track-play-btn svg { width: 14px; height: 14px; fill: var(--white); }

.track-info { flex: 1; min-width: 0; }

.track-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--white);
}

.track-artist { font-size: 11px; color: var(--grey-text); letter-spacing: 1px; }

.track-mood-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid;
  display: none;
}

@media (min-width: 600px) {
  .track-mood-tag { display: inline-block; }
}

.track-duration {
  font-size: 12px;
  color: var(--grey-text);
  flex-shrink: 0;
  font-family: 'Space Mono', monospace;
}


/* ---------------------------------------------------------------------------
   Audio Player Bar
   --------------------------------------------------------------------------- */
/* Fix 5 — lifted 8px off screen edge, not flush against bottom */
.player-bar {
  position: fixed;
  bottom: 8px;
  left: 8px;
  right: 8px;
  border-radius: 6px;
  background: rgba(6, 6, 6, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--grey-mid);
  z-index: 200;
  display: none;
  flex-direction: column;
  padding: 8px 20px max(12px, env(safe-area-inset-bottom));
}

.player-bar.active { display: flex; }

@media (min-width: 768px) {
  .player-bar { flex-direction: row; align-items: center; height: 80px; padding: 0 48px; }
}

.player-track-info { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

@media (min-width: 768px) {
  .player-track-info { width: 250px; flex-shrink: 0; margin-bottom: 0; }
}

.player-track-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
}

.player-track-mood { font-size: 10px; color: var(--grey-text); letter-spacing: 2px; text-transform: uppercase; }

/* Fix 3 — center player controls horizontally in the bar */
.player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

@media (min-width: 768px) {
  .player-controls { flex: 1; gap: 6px; justify-content: center; margin: 0 auto; }
}

.player-buttons { display: flex; align-items: center; gap: 20px; }

.player-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
}
.player-btn svg { width: 22px; height: 22px; fill: #FFFFFF; }
.player-btn:hover svg { fill: #1DB954; }

.player-btn-main {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  transition: all 0.2s;
}
.player-btn-main svg { fill: #FFFFFF; width: 22px; height: 22px; }
.player-btn-main:hover { border-color: #1DB954; }
.player-btn-main:hover svg { fill: #1DB954; }

.player-progress { width: 100%; max-width: 600px; display: flex; align-items: center; gap: 8px; }

.player-time { font-size: 12px; color: #FFFFFF; width: 40px; text-align: center; font-family: 'Space Mono', monospace; font-weight: 700; }

.progress-bar { flex: 1; height: 4px; background: var(--grey-mid); cursor: pointer; position: relative; }

@media (max-width: 767px) { .progress-bar { height: 6px; } }

.progress-fill { height: 100%; background: var(--gold); width: 0%; transition: width 0.1s linear; }

.player-volume { display: none; }

@media (min-width: 768px) {
  .player-volume { display: flex; width: 150px; align-items: center; justify-content: flex-end; gap: 8px; }
}

.volume-slider {
  width: 80px; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--grey-mid); outline: none;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #F0EDE6; cursor: pointer;
}


/* ---------------------------------------------------------------------------
   Auth / Login Forms
   --------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  background: var(--grey);
  padding: 32px 20px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--grey-mid);
}

@media (min-width: 768px) {
  .auth-card { padding: 48px; }
}

.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--grey-mid);
  color: var(--white);
  font-size: 16px;
  transition: border-color 0.2s;
  outline: none;
  min-height: 48px;
  font-family: 'Space Mono', monospace;
}

.form-input:focus { border-color: var(--gold); }
.form-input::placeholder { color: var(--grey-text); font-size: 12px; }

.form-error { color: var(--red); font-size: 11px; margin-top: 4px; display: none; }
.form-error.visible { display: block; }

.auth-submit { width: 100%; margin-top: 8px; }

.auth-footer { text-align: center; margin-top: 24px; font-size: 11px; color: var(--grey-text); }


/* ---------------------------------------------------------------------------
   Pricing Cards — gold hover animation, same size, selected pops forward
   --------------------------------------------------------------------------- */
.pricing-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

@media (min-width: 700px) {
  .pricing-cards {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
  }
}

.pricing-card {
  background: var(--grey);
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  border: 1px solid var(--grey-mid);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

/* Gold top-border hover animation — same as .card */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.pricing-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-6px);
}

.pricing-card:hover::before {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .pricing-card { width: 380px; }
}

/* Featured card — pops forward */
.pricing-card.featured {
  border-color: var(--gold);
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.1);
}

.pricing-card.featured::before {
  transform: scaleX(1);
}

.pricing-card.featured:hover {
  transform: translateY(-14px);
  box-shadow: 0 12px 50px rgba(201, 168, 76, 0.15);
}

.pricing-card .plan-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--white);
}

.pricing-card .plan-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--green);
  margin-bottom: 4px;
  line-height: 1;
}

.pricing-card .plan-period {
  font-size: 12px;
  color: var(--grey-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.pricing-card .plan-savings {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.plan-features {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
}

.plan-features li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--grey-text);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.plan-features li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--gold);
}


/* ---------------------------------------------------------------------------
   Mood Station View
   --------------------------------------------------------------------------- */
.station-header { padding: 40px 0 24px; }

@media (min-width: 768px) {
  .station-header { padding: 60px 0 40px; }
}

.station-header .mood-badge {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid;
  margin-bottom: 12px;
}

.station-track-count {
  font-size: 11px;
  color: var(--grey-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
}


/* ---------------------------------------------------------------------------
   Lock Overlay
   --------------------------------------------------------------------------- */
.lock-overlay {
  text-align: center;
  padding: 40px 16px;
  background: var(--grey);
  border: 1px solid var(--grey-mid);
  margin: 24px 0;
}

@media (min-width: 768px) {
  .lock-overlay { padding: 60px 24px; margin: 40px 0; }
}

.lock-overlay h3 { margin-bottom: 8px; }
.lock-overlay p { color: var(--grey-text); margin-bottom: 24px; }


/* ---------------------------------------------------------------------------
   Legal Pages
   --------------------------------------------------------------------------- */
.legal-page { padding-top: 80px; padding-bottom: 60px; }

.legal-page h1 { font-size: clamp(36px, 5vw, 64px); margin-bottom: 8px; }

.legal-page .legal-updated {
  color: var(--gold); font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 40px;
}

.legal-page h2 {
  font-size: clamp(24px, 3vw, 36px);
  margin-top: 48px; margin-bottom: 16px; color: var(--white);
}

.legal-page h3 { font-family: 'Syne', sans-serif; font-size: 16px; margin-top: 24px; margin-bottom: 8px; }

.legal-page p, .legal-page li {
  font-size: 14px; line-height: 1.8; color: var(--grey-text);
  margin-bottom: 12px; max-width: 100%; text-align: left;
}

.legal-page strong { color: var(--white); }

.legal-page ul, .legal-page ol { list-style: none; margin-left: 0; margin-bottom: 16px; }

.legal-page li { margin-bottom: 6px; padding-left: 20px; position: relative; }

.legal-page li::before { content: '//'; position: absolute; left: 0; color: var(--gold-dim); font-size: 11px; }

.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0; }

.legal-page th {
  text-align: left; font-size: 10px; letter-spacing: 3px;
  color: var(--gold); text-transform: uppercase;
  padding: 12px 0; border-bottom: 1px solid var(--grey-mid);
}

.legal-page td {
  padding: 12px 0; border-bottom: 1px solid var(--grey-mid);
  font-size: 13px; color: var(--grey-text); text-align: left;
}


/* ---------------------------------------------------------------------------
   Profile & Settings
   --------------------------------------------------------------------------- */
.profile-section, .settings-section {
  background: var(--grey);
  padding: 28px 20px;
  margin-bottom: 2px;
  border: 1px solid var(--grey-mid);
  text-align: left;
}

@media (min-width: 768px) {
  .profile-section, .settings-section { padding: 32px; }
}

.section-title {
  font-size: 10px; letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase; margin-bottom: 16px;
  font-family: 'Space Mono', monospace;
}

/* FAQ Accordion */
.faq-item { border-bottom: 1px solid var(--grey-mid); }

.faq-question {
  width: 100%; text-align: left; padding: 16px 0;
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--white);
  display: flex; justify-content: space-between; align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.faq-question::after { content: '+'; font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--gold); }
.faq-item.open .faq-question::after { content: '\2212'; }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-item.open .faq-answer { max-height: 200px; }

.faq-answer p { padding-bottom: 16px; font-size: 13px; color: var(--grey-text); line-height: 1.8; text-align: left; }


/* ---------------------------------------------------------------------------
   Badge
   --------------------------------------------------------------------------- */
.badge {
  display: inline-block; padding: 3px 10px; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; border: 1px solid;
  font-family: 'Space Mono', monospace;
}

.badge-gold { color: var(--gold); border-color: var(--gold-dim); }
.badge-green { color: var(--green); border-color: var(--green); }
.badge-grey { color: var(--grey-text); border-color: var(--grey-mid); }


/* ---------------------------------------------------------------------------
   Footer — centered, spaced
   --------------------------------------------------------------------------- */
.footer {
  padding: 60px 24px 120px;   /* Fix 7 — extra bottom so player bar never covers footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--grey-mid);
  text-align: center;
  margin-top: auto;
}

@media (min-width: 768px) {
  .footer { padding: 80px 48px 120px; }
}

.footer-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 4px;
  color: var(--white);
}

.footer-brand span { color: var(--gold); }

.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: var(--grey-text);
  font-size: 13px;
  font-weight: 700;          /* Fix 7 — bolder */
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--white); }

.footer-copy, .footer-note {
  font-size: 12px;
  font-weight: 700;          /* Fix 7 — bolder tagline */
  color: var(--grey-text);
  line-height: 1.8;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.hidden { display: none !important; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-4 { margin-bottom: 32px; }

.text-center { text-align: center; }

.fade-in { animation: fadeIn 0.4s var(--ease); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--grey-mid);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 120px; left: 50%;
  transform: translateX(-50%);
  background: var(--grey);
  border: 1px solid var(--gold-dim);
  border-left: 3px solid var(--gold);
  padding: 12px 24px; font-size: 12px;
  z-index: 300; max-width: 90vw;
  text-align: center; color: var(--white);
  animation: toastIn 0.3s var(--ease);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ---------------------------------------------------------------------------
   Fix 5 — Two-column layout: Moods left (65%), Charts sidebar right (35%)
   Desktop: CSS grid with sidebar. Mobile: single column, charts below moods.
   --------------------------------------------------------------------------- */

/* Desktop: two-column grid */
@media (min-width: 900px) {
  .app-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
  }
  .app-main-col {
    min-width: 0;  /* prevent blowout */
  }
  .app-sidebar-col {
    position: sticky;
    top: 100px;    /* below nav */
  }
}

/* Mobile / tablet: single column, sidebar goes below mood grid */
@media (max-width: 899px) {
  .app-layout {
    display: flex;
    flex-direction: column;
  }
  .app-sidebar-col {
    margin-top: 40px;
  }
}


/* ---------------------------------------------------------------------------
   Fix 7 — Moods first on mobile (legacy ordering — kept for non-app pages)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  main .container {
    display: flex;
    flex-direction: column;
  }
  /* mood-grid and page-header both default to order: 0 — appear first (DOM order) */
  #station-view  { order: 2; }
  #charts-section { order: 3; }
}


/* ---------------------------------------------------------------------------
   Fix 8 — Jamaican Green Accents  (black · green · gold theme)
   --------------------------------------------------------------------------- */

/* Nav — active + hover go green */
.nav-links a:hover  { color: var(--green); }
.nav-links a.active { color: var(--green); }

/* Mood cards — green top-bar sweep on hover */
.mood-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.mood-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 185, 84, 0.30);
}
.mood-card:hover::before { transform: scaleX(1); }

/* Playing track — green left border + green index number */
.track-item.playing {
  background: var(--grey);
  border-left: 3px solid var(--green);
  padding-left: 5px;      /* compensate for extra border width */
}
.track-item.playing .track-number { color: var(--green); }

/* Track action buttons */
.track-action-btn {
  color: var(--grey-text);
  transition: color 0.2s;
  padding: 4px;
  border-radius: 2px;
}
.track-action-btn:hover { color: var(--green); }

/* Progress fill → green (replaces gold) */
.progress-fill {
  background: var(--green);
  box-shadow: 0 0 6px rgba(29, 185, 84, 0.35);
}

/* Volume thumb + track → green */
.volume-slider::-webkit-slider-thumb { background: var(--green); }
.volume-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  border: none;
}

/* Loading spinner → green */
.spinner { border-top-color: var(--green); }

/* Player bar — subtle green top border now it floats */
.player-bar { border-top-color: rgba(29, 185, 84, 0.30); }

/* Track play button hover → gold stays, playing state goes green */
.track-item.playing .track-play-btn {
  border-color: var(--green);
  background: rgba(29, 185, 84, 0.10);
}
.track-item.playing .track-play-btn svg { fill: var(--green); }

@media (max-width: 767px) {
  .player-bar {
    bottom: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: rgba(6, 6, 6, 1);
  }
  /* Fix 9 — hide desktop sidebar on mobile */
  .app-sidebar-col { display: none; }
}


/* ---------------------------------------------------------------------------
   Playback Mode Buttons — Shuffle / Repeat All / Repeat One
   --------------------------------------------------------------------------- */
.player-mode-btn {
  width: 36px;
  height: 36px;
  color: var(--grey-text);
  transition: color 0.2s;
  flex-shrink: 0;
}

.player-mode-btn svg { fill: currentColor; }

.player-mode-btn:hover { color: var(--white); }

/* Active state — green highlight */
.player-mode-btn.active {
  color: var(--green);
}

/* Small dot indicator under active mode button */
.player-mode-btn.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  margin: 2px auto 0;
}

@media (max-width: 767px) {
  .player-mode-btn { display: flex; width: 32px; height: 32px; }
  .player-mode-btn svg { width: 14px; height: 14px; }
}

/* ─── Region switcher ───────────────────────────────────────────────────────
   A region groups moods (MAIN, JAPAN, …). Rendered from /api/regions, so a
   region added in the database appears here with no CSS or markup change. */
.region-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.region-switcher:empty { display: none; }

.region-btn {
  background: transparent;
  border: 1px solid var(--grey-mid, #2A2A2A);
  color: var(--grey-text, #888880);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.region-btn:hover {
  color: var(--white, #fff);
  border-color: var(--grey-text, #888880);
}

.region-btn.active {
  background: var(--gold, #C9A84C);
  border-color: var(--gold, #C9A84C);
  color: #0A0A0A;
}

.region-btn:focus-visible {
  outline: 2px solid var(--gold, #C9A84C);
  outline-offset: 2px;
}

/* English label sitting under a native (e.g. Japanese) mood name. */
.mood-subtitle {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-text, #888880);
  margin-bottom: 6px;
  display: block;
}

/* ═══════════ SUBSCRIBER FAVOURITES (heart) ═══════════
   Display only. Nothing here affects playback, shuffle or repeat. */
.track-fav-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.track-fav-btn.is-fav { color: #D64045; }
.track-fav-btn.is-fav svg { fill: #D64045; stroke: #D64045; }
.fav-entry { margin: 0 0 16px; }
.fav-entry-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary, #bbb); text-decoration: none; font-size: 0.9rem;
  border-radius: var(--radius, 4px); transition: border-color .2s, color .2s;
}
.fav-entry-btn:hover { border-color: #D64045; color: #D64045; }

/* ---------------------------------------------------------------------------
   Track row on phones — give the title back its space.

   At 375px the title box was 98px while play(40) + heart(28) + share(28) +
   number(28) + duration(29) plus five 12px gaps ate the rest, so 7 of 8 titles
   truncated to something like "Glass Hea…".

   The icons shrink by about a third. Layout is unchanged: same row, same
   order, all three controls still beside the title. Scoped to phone widths
   only — desktop had room already and is left exactly as it was.

   These override the width/height ATTRIBUTES on the inline SVGs, because a
   presentation attribute loses to any CSS rule. The markup is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .track-item { gap: 6px; }

  /* The index column was sized for three digits; a station shows at most two,
     so this is dead width sitting directly beside the title. Still right
     aligned, still the same column — just no longer reserving space for a
     digit that never arrives. */
  .track-item .track-number { min-width: 18px; width: 18px; }

  /* 40 -> 27 (about a third off) */
  .track-play-btn { width: 27px; height: 27px; min-width: 27px; }
  .track-play-btn svg { width: 10px; height: 10px; }

  /* heart + share: 28 -> 19.
     These carry a .track-item prefix on purpose. js/download-share.js injects
     a <style> element at runtime that sets .track-action-btn to a fixed
     28x28; because it lands in <head> AFTER this stylesheet, an equally
     specific rule here loses on source order no matter what it says. The
     extra class outweighs it without resorting to !important, and the
     injected styling (colour, hover, border) is otherwise left intact. */
  .track-item .track-action-btn {
    width: 19px; height: 19px; min-width: 19px;
    padding: 0; flex: 0 0 auto;
  }
  .track-item .track-fav-btn svg,
  .track-item .track-share-btn svg { width: 10px; height: 10px; }
  /* same injected block sets margin-left: 8px here */
  .track-item .track-actions { gap: 4px; margin-left: 4px; }

  /* Tap targets stay finger-sized without taking layout width: the padding
     above shrinks the box, this keeps the touchable area honest. */
  .track-play-btn,
  .track-item .track-action-btn { position: relative; }
  .track-play-btn::after,
  .track-item .track-action-btn::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
  }
}