/* A listening bench: everything quiet except the one green mark that means "this ships". */

:root {
  /* Native controls — the audio players above all — follow the viewer's theme. */
  color-scheme: light dark;
  --bg: #fff;
  --line: #e3e6ea;
  --line-strong: #c8ccd2;
  --soft: #f7f8fa;
  --ink: #14171a;
  --muted: #6b7280;
  --accent: #1f6feb;
  --ship: #178a4c;
  --ship-bg: #eef7f1;
  --error: #b42318;
  --warn: #8a5a00;
  --audio-w: 230px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1.75rem 1.5rem 6rem;
  max-width: 1120px;
  font: 13.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

h1 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin: 0 0 1rem;
}

h3 {
  font: 650 .7rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
}

section {
  border-top: 1px solid var(--line);
  padding: 1.25rem 0 1.5rem;
}

section.disabled { opacity: .35; pointer-events: none; }
.hidden { display: none; }
code { font: .92em var(--mono); }

/* --- controls --- */

.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.row + .row, table + .row, p + .row { margin-top: .9rem; }

label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .75rem;
  color: var(--muted);
}

input, select, textarea {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--bg);
  color: inherit;
  width: 100%;
  min-width: 0;
}

input[type="radio"] { width: auto; padding: 0; accent-color: var(--ship); }
textarea { resize: vertical; }
input[type="number"] { max-width: 7rem; font-family: var(--mono); }
#voice-id { font-family: var(--mono); min-width: 15rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  font: inherit;
  padding: .3rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--soft);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.wide { width: 100%; }
button.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
button.primary:hover:not(:disabled) { color: var(--bg); opacity: .85; }
button.primary:disabled { background: var(--soft); border-color: var(--line-strong); color: inherit; }

.tab { font-family: var(--mono); }
.tab.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.tab.active:hover { color: var(--bg); }

/* --- config forms --- */

fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .8rem .8rem; margin: 1rem 0 .7rem; }
legend, summary { font-size: .75rem; color: var(--muted); }
/* Fields cluster at the left instead of spreading across the full page width. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
  justify-content: start;
  gap: .55rem 1.1rem;
  align-items: end;
}
.form-grid .field:has(textarea) { grid-column: 1 / -1; max-width: 46rem; }

details#runtime-details { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .8rem; }
details#runtime-details summary { cursor: pointer; }
details#runtime-details[open] summary { margin-bottom: .7rem; }

/* --- fillers table --- */

table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
th {
  text-align: left;
  font-size: .72rem;
  font-weight: 650;
  padding: 0 .5rem .4rem;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}
th .muted { display: block; font-weight: 400; font-size: .68rem; }
td { border-bottom: 1px solid var(--line); padding: .4rem .5rem; vertical-align: top; }

.col-text { width: 23%; }
.col-takes { width: auto; }
.col-actions { width: 7.5rem; }
.col-remove { width: 2.5rem; }

.col-actions .status { display: block; min-height: 1.1rem; margin-top: .3rem; }

.remove {
  width: 1.75rem;
  padding: .3rem 0;
  color: var(--muted);
  background: none;
  border-color: transparent;
  font-size: 1rem;
  line-height: 1;
}
.remove:hover { color: var(--error); border-color: var(--error); }

/* One grid shared by every take: pick, number, audio, note. Nothing optional in the
   first three columns, so the radios and players line up down the whole table. */
.takes { display: flex; flex-direction: column; align-items: start; gap: .2rem; }
.take {
  display: grid;
  /* The note column keeps its width whether or not there's a note, so the staged tint is
     the same size on every row instead of ragging along the right edge. */
  grid-template-columns: 1.1rem 1.2rem var(--audio-w) 7rem;
  gap: .5rem;
  align-items: center;
  padding: .15rem .45rem;
  border-radius: 5px;
}
.take.staged { background: var(--ship-bg); box-shadow: inset 2px 0 0 var(--ship); }
.take-n { font: .72rem/1 var(--mono); color: var(--muted); text-align: right; }
.take.staged .take-n { color: var(--ship); font-weight: 650; }
.take-audio audio { display: block; width: 100%; height: 30px; }
.take-note { font-family: var(--mono); font-size: .7rem; }

/* --- review --- */

/* One grid for the whole review, languages and rows as display:contents. The phrase column
   is exactly as wide as the longest phrase, so nothing stretches into dead space, and every
   player lines up — across both languages, not just within one. */
#review {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, max-content) var(--audio-w);
  gap: .3rem .8rem;
  align-items: center;
  max-width: 46rem;
}
.review-lang, .review-row { display: contents; }
#review h3 { grid-column: 1 / -1; margin: .9rem 0 .1rem; }
#review h3:first-child { margin-top: 0; }
.review-index { font: .72rem/1 var(--mono); color: var(--muted); text-align: right; }
/* dir="auto" plus text-align:start: an Arabic block reads right-aligned, an English one
   left-aligned, and neither gets truncated mid-word. */
.review-phrase { text-align: start; overflow-wrap: anywhere; }
.review-audio audio { display: block; width: 100%; height: 30px; }

/* --- messages --- */

.muted { color: var(--muted); font-size: .75rem; }
.status { font-size: .72rem; }
.status.busy { color: var(--accent); }
.status.error, .error { color: var(--error); }
.warn { color: var(--warn); }

#banner {
  background: #fdecea;
  color: var(--error);
  padding: .5rem .7rem;
  border-radius: 5px;
  margin: 0 0 1rem;
  font-size: .85rem;
}
#warnings p { margin: .15rem 0; font-size: .8rem; }
#warnings:not(:empty) { margin-bottom: 1rem; }
#notes, #notes-section .muted { max-width: 46rem; }
#notes-section .muted { margin: 0 0 .6rem; }
#rows-empty { margin: .8rem 0 0; }
/* #review is a div, so the generic `p + .row` / `table + .row` spacing misses it and the
   download button ends up sitting on the last player. */
#review + .row { margin-top: 1.6rem; }
#download-reason { align-self: center; }

/* --- token gate --- */

/* :not(.hidden), because an id rule setting `display` would otherwise outrank `.hidden`. */
#gate:not(.hidden) { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; max-width: 17rem; }
#gate h1 { margin: 0; }
#token { font-family: var(--mono); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --line: #2a2e35;
    --line-strong: #3d434b;
    --soft: #21252b;
    --ink: #e7e9ec;
    --muted: #98a0aa;
    --ship: #4ac47f;
    --ship-bg: #17281d;
  }
  #banner { background: #3a1d1a; color: #ffb4ab; }
  button.primary { background: var(--ink); color: #15171b; }
  button.primary:hover:not(:disabled) { color: #15171b; }
  .tab.active { background: var(--ink); color: #15171b; }
  .tab.active:hover { color: #15171b; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}