/* Honkytonk Stems — vanilla styles.
   Color tokens mirror the original (dark country theme, oklch). */

:root {
  --background:           oklch(18% .025 50);
  --foreground:           oklch(93% .04 80);
  --card:                 oklch(22% .03 50);
  --muted:                oklch(26% .025 50);
  --muted-foreground:     oklch(70% .03 70);
  --border:               oklch(33% .03 50);
  --primary:              oklch(72% .16 55);
  --primary-foreground:   oklch(18% .04 50);
  --secondary:            oklch(30% .04 50);
  --secondary-foreground: oklch(93% .04 80);
  --destructive:          oklch(55% .22 25);
  --radius: .5rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

.hidden { display: none !important; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  background-image:
    radial-gradient(at top, #3c211199, transparent 60%),
    radial-gradient(at bottom, #310d0980, transparent 60%);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }

/* Layout ------------------------------------------------------------------- */

.page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
  .page { padding: 5rem 1.5rem; }
}

.header { margin-bottom: 3rem; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 60%, transparent);
  color: var(--muted-foreground);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: .375rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}
.eyebrow svg { width: .875rem; height: .875rem; }

h1.display {
  font-family: "Bebas Neue", Impact, "Arial Narrow Bold", ui-sans-serif, sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  font-size: clamp(3.75rem, 9vw, 6rem);
  line-height: 1;
  margin: 0;
  color: var(--foreground);
}
h1.display .accent {
  display: block;
  color: var(--primary);
}

.tagline {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  color: var(--muted-foreground);
  font-size: .875rem;
}
@media (min-width: 768px) {
  .tagline { font-size: 1rem; }
}

/* Card --------------------------------------------------------------------- */

.card {
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 60%, transparent);
  border-radius: .75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

/* Dropzone (initial state) ------------------------------------------------ */

.dropzone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 4rem 1.5rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--background) 40%, transparent);
  color: var(--foreground);
  transition: border-color .2s, background-color .2s;
}
.dropzone:hover,
.dropzone.is-active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--background) 60%, transparent);
}
.dropzone .upload-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
  transition: transform .2s;
}
.dropzone:hover .upload-icon { transform: scale(1.1); }
.dropzone .heading {
  font-family: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .04em;
}
.dropzone .sub {
  font-size: .75rem;
  color: var(--muted-foreground);
}

/* Active panel (after upload) -------------------------------------------- */

.panel { display: flex; flex-direction: column; gap: 1.5rem; }
.panel.hidden { display: none; }

.file-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.file-row .file-icon {
  color: var(--primary);
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.file-row .file-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  padding: .375rem .75rem;
  font-size: .8125rem;
  border-radius: var(--radius);
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border-color: var(--primary);
  color: var(--foreground);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  background: var(--secondary);
  border-color: transparent;
  color: var(--secondary-foreground);
}
.btn-secondary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--secondary) 80%, white 10%);
  border-color: transparent;
  color: var(--secondary-foreground);
}

.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon svg { width: 1rem; height: 1rem; }

/* Progress --------------------------------------------------------------- */

.progress { display: flex; flex-direction: column; gap: .5rem; }
.progress-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--muted-foreground);
}
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-bar {
  height: .5rem;
  background: var(--muted);
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width .2s ease;
  width: 0%;
}

/* Stats grid ------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 40%, transparent);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.stat .value {
  font-family: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  font-size: 2.25rem;
  color: var(--primary);
  letter-spacing: .04em;
  line-height: 1;
}
.stat .value.stat-value-small {
  /* Words like "Train beat" need to fit in a column */
  font-size: 1.5rem;
}
.stat .label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted-foreground);
  margin-top: .375rem;
}

/* Editable BPM + Key stats ---------------------------------------------- */

.stat-input {
  width: 100%;
  max-width: 5rem;
  margin: 0 auto;
  font-family: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  font-size: 2.25rem;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--primary);
  background: color-mix(in oklab, var(--background) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .15rem .35rem;
  text-align: center;
  -moz-appearance: textfield;       /* hide Firefox spinner */
}
.stat-input:hover  { border-color: var(--primary); }
.stat-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 35%, transparent);
}
.stat-input:disabled { opacity: .5; cursor: not-allowed; }
.stat-input::-webkit-outer-spin-button,
.stat-input::-webkit-inner-spin-button {
  /* Default WebKit spinners are tiny and ugly. Hide them; arrow keys still work. */
  -webkit-appearance: none;
  margin: 0;
}

.stat.stat-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.stat-key-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  flex-wrap: nowrap;
  max-width: 100%;
}
.stat-select {
  font-family: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  font-size: 2.25rem;
  letter-spacing: .04em;
  color: var(--primary);
  background: color-mix(in oklab, var(--background) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .15rem .35rem;
  cursor: pointer;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
}
.stat-select:hover { border-color: var(--primary); }
.stat-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 35%, transparent);
}
.stat-select:disabled { opacity: .5; cursor: not-allowed; }
.stat-select option {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .9rem;
  background: var(--card);
  color: var(--foreground);
}
.stat-select-tiny {
  font-size: 1rem;
  padding: .1rem .25rem;
  align-self: center;
}

/* Generate / Regenerate button --------------------------------------- */

.generate-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin: 0;
  text-align: center;
}

.btn-generate {
  font-family: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .06em;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .6rem 1.5rem;
  min-width: 14rem;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn-generate:hover:not(:disabled) { filter: brightness(1.1); }
.btn-generate:active:not(:disabled) { transform: translateY(1px); }
.btn-generate:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.stale-indicator {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--muted-foreground);
}
.stale-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 25%, transparent);
}

.generate-hint {
  margin: 0;
  font-size: .75rem;
  color: var(--muted-foreground);
  max-width: 32rem;
}

/* Chord list ------------------------------------------------------------- */

.section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted-foreground);
  margin-bottom: .75rem;
}

.chord-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chord-pill {
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: .25rem .625rem;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: .875rem;
  border-radius: 4px;
}
.chord-more {
  font-size: .75rem;
  color: var(--muted-foreground);
  padding: .25rem .5rem;
}

/* Mixer ------------------------------------------------------------------ */

.mixer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.transport {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 40%, transparent);
  border-radius: var(--radius);
  margin-bottom: .75rem;
}

.btn-play {
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  font-size: .875rem;
  padding: .5rem 1.25rem;
  border-radius: var(--radius);
  min-width: 4.5rem;
  letter-spacing: .02em;
}
.btn-play:hover { filter: brightness(1.1); }
.btn-play.is-playing { background: color-mix(in oklab, var(--primary) 70%, white 20%); }

.transport-time {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: .875rem;
  color: var(--muted-foreground);
  min-width: 3rem;
  text-align: center;
}

.transport-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--muted);
  border-radius: 9999px;
  cursor: pointer;
}
.transport-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 0;
  cursor: grab;
}
.transport-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 0;
  cursor: grab;
}

.mixer-tracks {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.track {
  display: grid;
  grid-template-columns: 9rem auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 40%, transparent);
  border-radius: var(--radius);
}

.track-name {
  font-weight: 500;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-name-original {
  color: var(--primary);
}

.track-buttons {
  display: flex;
  gap: .25rem;
}
.track-btn {
  width: 1.75rem;
  height: 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 70%, transparent);
  color: var(--muted-foreground);
  border-radius: 4px;
  padding: 0;
  transition: background-color .12s, color .12s, border-color .12s;
}
.track-btn:hover { color: var(--foreground); border-color: var(--primary); }
.track-btn.is-on-mute  { background: var(--destructive); border-color: var(--destructive); color: white; }
.track-btn.is-on-solo  { background: var(--primary);     border-color: var(--primary);     color: var(--primary-foreground); }

.track-volume {
  display: flex;
  align-items: center;
}
.track-volume input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--muted);
  border-radius: 9999px;
  cursor: pointer;
}
.track-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 0;
}
.track-volume input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 0;
}

.track-download,
.track-download-placeholder {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.track-download {
  background: var(--secondary);
  border: 1px solid transparent;
  color: var(--secondary-foreground);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-download:hover { filter: brightness(1.15); }
.track-download svg { width: .9rem; height: .9rem; }

.mixer-hint {
  margin: .75rem 0 0;
  font-size: .75rem;
  color: var(--muted-foreground);
}
.mixer-hint kbd {
  display: inline-block;
  padding: 0 .25rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: color-mix(in oklab, var(--background) 70%, transparent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .7rem;
}

/* On narrow screens, collapse track grid */
@media (max-width: 540px) {
  .track {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: .25rem;
  }
  .track-name { grid-column: 1; }
  .track-buttons { grid-column: 2; grid-row: 1; }
  .track-volume { grid-column: 1 / -1; grid-row: 2; }
  .track-download, .track-download-placeholder { display: none; }
}

/* Error message --------------------------------------------------------- */

.error-msg {
  margin-top: .5rem;
  color: var(--destructive);
  font-size: .875rem;
}

/* Footer note ----------------------------------------------------------- */

.footnote {
  margin: 2rem 0 0;
  text-align: center;
  font-size: .75rem;
  color: var(--muted-foreground);
}