/* Boo.gb tracker — MVP styling. Plain monospace throughout (the
   .song format is whitespace-aligned, the cell grid is column-locked,
   sans-serif throws everything off). */

:root {
  --fg: #1c1c1c;
  --muted: #666;
  --accent: #2a6f97;
  --bg: #fafafa;
  --panel: #fff;
  --border: #d0d0d0;
  --err: #b00020;
  --hdr: #f0f0f0;
  --selected: #fff7c2;
  --note: #1a4d80;
  --rest: #a04040;
  --sustain: #999;
  --drum: #6a4a1a;
}

body {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  max-width: 1200px;
  margin: 1.5em auto;
  padding: 0 1em;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
}

h1 { font-size: 1.2em; margin: 0 0 0.6em; }
.row { margin: 0.5em 0; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
}

button, input[type="file"], select, input[type="text"], input[type="number"] {
  font: inherit;
  padding: 0.35em 0.6em;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: progress; }

.panel {
  margin: 0.6em 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  padding: 0.5em 0.8em;
}
.panel legend { padding: 0 0.4em; color: var(--muted); }
.panel .hint { color: var(--muted); font-size: 0.85em; margin: 0.4em 0 0; }

#metaPanel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  align-items: center;
}
#metaPanel label { display: inline-flex; gap: 0.3em; align-items: center; }
#metaPanel input[type="number"] { width: 5em; }
#metaPanel input[type="text"]   { width: 12em; }

.active-block { display: inline-flex; gap: 0.4em; align-items: center; }
.active-block .hdr { color: var(--muted); }

.instruments {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
  gap: 0.2em 0.8em;
  font-size: 0.92em;
}
.instruments .name   { font-weight: bold; }
.instruments .label  { color: var(--muted); }

/* Grid scrolls with the page (no nested overflow box). The header row
   sticks to the viewport top so the column names stay visible while
   scrolling through 200+ rows. */
#gridScroll { /* layout-only wrapper; no overflow */ }
#grid { border-collapse: collapse; font-size: 12.5px; width: 100%; table-layout: fixed; }
#grid th, #grid td {
  border: 1px solid var(--border);
  padding: 0;
  text-align: center;
  background: var(--panel);
}
#grid thead th {
  background: var(--hdr);
  position: sticky;
  top: 0;
  font-weight: 600;
  color: var(--muted);
  padding: 0.25em 0.4em;
  z-index: 1;
}
/* Channel and lyric columns share the remaining width equally
   (table-layout: fixed makes auto-width columns split available space).
   rownum and del-col are pinned to fixed em widths. */
#grid th.rownum, #grid td.rownum {
  width: 3em;
  color: var(--muted);
  text-align: right;
  padding: 0 0.4em;
  background: var(--hdr);
}
#grid th.del-col, #grid td.del-col { width: 2em; }
#grid td input.cell {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.15em 0.3em;
  text-align: center;
  font: inherit;
  color: var(--fg);
}
#grid td input.cell:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--selected);
}
/* Lyric column gets the same equal share as channels; align text left. */
#grid td.lyric input.cell { text-align: left; padding-left: 0.4em; }

/* Cell coloring by content category — applied via class set in tracker.js
   on each input. Helps scan a long table at a glance. */
#grid input.cell.note    { color: var(--note); }
#grid input.cell.drum    { color: var(--drum); }
#grid input.cell.rest    { color: var(--rest); }
#grid input.cell.sustain { color: var(--sustain); }

#grid td.del-col { width: 2em; }
#grid td.del-col button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1em;
  cursor: pointer;
  padding: 0;
}
#grid td.del-col button:hover { color: var(--err); }

#status {
  font-size: 0.9em;
  color: var(--muted);
  min-height: 1.4em;
  padding: 0.3em 0;
}
.err { color: var(--err); }

#rawArea {
  width: 100%;
  height: 40vh;
  font: inherit;
  font-size: 12.5px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5em;
  white-space: pre;
  resize: vertical;
}

/* Hide the emulator canvas — PlayerROM never updates VRAM, so it just
   shows boot tile garbage. Kept in the DOM because binjgb's Video class
   needs a canvas to render to. */
#emulator   { display: none; }
#controller { display: none !important; }