/* trove — Blue Design System, Braun/TE temperament */
:root {
  --blue: #0000ee;
  --white: #ffffff;
  --surface: #f0f0ff;
  --muted: #8888cc;
  --border: #d8d8f0;
  --error: #ff0000;
  --radius: 4px;
  --mono: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--white);
  color: var(--blue);
  margin: 0;
  padding: 1.5rem;
  /* no max-width: the library table has 8 columns and a fixed 800px cap
     clipped the rightmost ones. Reading-width elements self-constrain
     (.login 260px, .caption-input 40rem). */
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
h1 { font-size: 1.1rem; font-weight: 700; }

header.site { margin-bottom: 1.5rem; }
.wordmark { font-weight: 700; }

/* numerals: every time/value reads like an instrument */
.num, td.num, .transport time, .stepper output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-size: 0.8rem;
}

input, select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue);
  padding: 5px;
  font-size: 1rem;
  font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--blue); }
input::placeholder { color: var(--muted); }

button {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue);
  padding: 6px 12px;
  font-size: 0.8em;
  cursor: pointer;
}
button:hover { background: var(--blue); color: var(--white); }
button.filled { background: var(--blue); color: var(--white); border: none; }
button.icon, a.icon {
  border: none; background: transparent; color: var(--muted);
  padding: 2px 6px; font-size: 1rem;
}
a.icon { text-decoration: none; cursor: pointer; }
button.icon:hover, a.icon:hover { color: var(--blue); background: transparent; }
button.icon.danger:hover { color: var(--error); }
button.icon.on { color: var(--blue); }
button.icon:disabled { opacity: 0.35; cursor: default; }

/* login: underline input, one filled button, nothing else */
.login {
  margin: 30vh auto 0; max-width: 260px;
  display: flex; flex-direction: column; gap: 1rem;
}
.login input {
  border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent;
}
.login input:focus { border-bottom-color: var(--blue); }
.error { color: var(--error); }

.banner {
  border: 1px solid var(--border);
  border-left: 2px solid var(--error);
  color: var(--muted);
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
}

/* narrow screens: let the table scroll inside its own box, not the page */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; border: none; }
th {
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem; color: var(--blue);
  text-align: left; padding: 0.5rem 0.75rem; font-weight: 700;
}
td { padding: 0.5rem 0.75rem; }

/* library page: fill the viewport so the table scrolls inside its own box
   (both axes) with the column headings pinned, rather than the whole page
   scrolling the headings out of view. Scoped to the library page only. */
body.page-library { height: 100vh; display: flex; flex-direction: column; }
body.page-library main {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
body.page-library .table-wrap { flex: 1; min-height: 0; overflow: auto; }
body.page-library thead th {
  position: sticky; top: 0; z-index: 1; background: var(--white);
  /* box-shadow, not the cell border: border-collapse drops a sticky th's
     bottom border on scroll in some browsers; the inset shadow won't. */
  box-shadow: inset 0 -1px 0 var(--border);
}
/* keep numeric cells (captured date, duration) on one line — otherwise the
   inline row-seek bar widens the name column, squeezes the date column, and the
   dates wrap to two lines, expanding EVERY row when you press play. */
td.num { white-space: nowrap; }
tr:hover td { background: var(--surface); }
.tag { color: var(--muted); font-size: 0.75rem; }
/* library "what" column: muted, single-line, truncates (full text in title) */
td.caption { color: var(--muted); font-size: 0.8rem;
             max-width: 24rem; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.badge { color: var(--muted); font-size: 0.7rem; border: 1px solid var(--border);
         border-radius: var(--radius); padding: 0 4px; }

/* hairline-rule filter row */
.filters { display: flex; gap: 0.75rem; align-items: center;
           padding-bottom: 0.75rem; margin-bottom: 0.25rem;
           border-bottom: 1px solid var(--border); }
.filters input[type="search"] { flex: 1; min-width: 0; }

/* library row actions: flag toggle + delete/restore, kept on one line */
.row-actions { white-space: nowrap; }
.row-actions .row-del, .row-actions .row-restore { margin-left: 0.4rem; }

/* library tree: clips indented under their parent recording */
tr.clip-sub td { border-top: none; padding-top: 0.15rem; padding-bottom: 0.15rem; }
tr.clip-sub .clip-name-cell { padding-left: 1.6rem; }
tr.clip-sub .clip-name-cell a { font-size: 0.85rem; }
tr.tombstone { opacity: 0.6; }
tr.tombstone td a { font-style: italic; }

/* inbox: untriaged (unprocessed) recordings read like unread mail */
tr.unread td { font-weight: 600; }
tr.unread td:nth-child(2)::before {
  content: "\25CF";              /* ● */
  color: var(--blue);
  margin-right: 0.4em;
  font-size: 0.6em;
  vertical-align: middle;
}

/* inline seek bar shown in the row that's currently previewing audio */
.row-seek {
  vertical-align: middle;
  width: 11rem; max-width: 45%; height: 1rem;
  margin-left: 0.5rem;
  accent-color: var(--blue);
}

/* editor 404 / tp7 flags: small label + square toggle */
.flag { display: inline-flex; align-items: center; gap: 0.3rem;
        font-size: 0.75rem; color: var(--muted); }

/* active toggle: precise square, filled when in the pool */
.toggle {
  width: 14px; height: 14px; padding: 0;
  border: 1px solid var(--blue); border-radius: 0;
  background: var(--white); cursor: pointer;
}
.toggle.on { background: var(--blue); }
.toggle:hover { background: var(--surface); }
.toggle.on:hover { background: var(--blue); opacity: 0.85; }

/* 404 tri-state: empty (off) -> filled (eligible) -> filled+inner ring (locked) */
.card-btn {
  width: 14px; height: 14px; padding: 0; position: relative;
  border: 1px solid var(--blue); border-radius: 0;
  background: var(--white); cursor: pointer;
}
.card-btn:hover { background: var(--surface); }
.card-btn[data-card="eligible"], .card-btn[data-card="locked"] { background: var(--blue); }
.card-btn[data-card="eligible"]:hover, .card-btn[data-card="locked"]:hover { opacity: 0.85; }
.card-btn[data-card="locked"]::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid var(--white);
}

/* editor */
.rec-head { margin-bottom: 0.75rem; }
.rec-title { display: flex; align-items: baseline; gap: 0.1rem; }
.rec-head h1 { margin: 0 0 0.15rem; cursor: text; }
.name-edit { font: inherit; font-size: 1.1rem; font-weight: 700;
             color: var(--blue); background: var(--white);
             border: 1px solid var(--border); border-radius: var(--radius);
             padding: 0.05rem 0.3rem; width: min(100%, 40rem); }
.name-edit:focus { border-color: var(--blue); outline: none; }
.caption-edit { display: flex; align-items: center; gap: 0.5rem;
                margin-top: 0.35rem; }
.caption-input { flex: 1; min-width: 0; max-width: 40rem; font-size: 0.9rem;
                 border: none; border-bottom: 1px solid var(--border);
                 border-radius: 0; background: transparent; padding: 0.15rem 0; }
.caption-input:focus { border-bottom-color: var(--blue); outline: none; }
.wave {
  border: 1px solid var(--border);
  background: var(--white);
  min-height: 140px;              /* 128px waveform + the always-on scrollbar */
}
.wave.pending { background: var(--surface); }
.wave ::part(region) { border-left: 1px solid var(--blue);
                       border-right: 1px solid var(--blue); }
.wave ::part(region-handle) {
  width: 7px; height: 7px; background: var(--blue);
  border: none; border-radius: 0; top: 0;
}
.transport {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border);
}
.transport .spacer { flex: 1; }
.transport .icon.on { color: var(--blue); }
#play { font-size: 1.1rem; }
.sel-list { list-style: none; margin: 0; padding: 0; }
.sel-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--border);
  /* wrap the controls onto a second line rather than overflow the page
     (narrow windows, or browser zoom >=150% on a normal screen) */
  flex-wrap: wrap;
}
.sel-row.focused { background: var(--surface); }
.sel-row .label { flex: 1 1 8rem; min-width: 0;
                  border: none; border-bottom: 1px solid transparent;
                  border-radius: 0; background: transparent; font-size: 0.85rem; }
.sel-row .label:focus { border-bottom-color: var(--blue); }
.sel-row input.num { border: none; background: transparent; text-align: right;
                     border-radius: 0; }
.sel-row input.num:focus { background: var(--surface); }
.stepper { display: inline-flex; align-items: center; gap: 2px;
           border: 1px solid var(--border); border-radius: var(--radius); }
.stepper output { min-width: 3.2em; text-align: center; }
.sel-row .sel-loop.on { color: var(--blue); }

/* clips: bounced selections, listed below the selections */
.clips-panel { margin-top: 1.1rem; }
.clips-head { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.25rem; }
.clips-list { list-style: none; margin: 0; padding: 0; }
.clip-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.clip-row .clip-name { font-size: 0.85rem; color: var(--blue); text-decoration: none; }
.clip-row .clip-name:hover { text-decoration: underline; }
.clip-row.processing { opacity: 0.6; }
.clip-row .clip-caption {
  flex: 1 1 8rem; min-width: 0; font-size: 0.8rem; color: var(--muted);
  border: none; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; padding: 0.1rem 0;
}
.clip-row .clip-caption:focus {
  border-bottom-color: var(--blue); outline: none; color: inherit;
}
.clip-row.error { border-left: 2px solid var(--error); padding-left: 0.25rem; }
.clip-row.bouncing { opacity: 0.5; }

/* header nav */
.site { display: flex; gap: 1rem; align-items: baseline; }
.site nav { color: var(--muted); }

/* pad grid: the 404 panel in miniature. Position comes from padgrid.js
   padPosition() — the single flip point if hardware numbering disagrees. */
.padgrid {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  grid-template-rows: repeat(3, 64px);
  gap: 6px;
  margin: 0.75rem 0;
}
.pad {
  position: relative;
  border: 1px solid var(--blue);
  border-radius: 2px;
  background: var(--white);
  cursor: pointer;
  padding: 2px;
  overflow: hidden;
}
.pad:hover { background: var(--surface); }
.pad.sounding { background: var(--blue); }
.pad.sounding .pad-n, .pad.sounding .pad-label { color: var(--white); }
.pad.dragging { opacity: 0.4; }
.pad.empty { border-color: var(--border); cursor: default; background: var(--white); }
.pad.empty .pad-n { color: var(--border); }
.pad-n { position: absolute; top: 2px; left: 4px; font-size: 0.65rem; }
.pad-label {
  position: absolute; bottom: 2px; left: 4px; right: 4px;
  font-size: 0.6rem; color: var(--muted);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  text-align: left;
}

/* selection-list toolbar (+ whole recording) */
.sel-actions { display: flex; gap: 0.5rem; padding: 0.35rem 0.25rem; }
.sel-actions .icon { color: var(--muted); }
.sel-actions .icon:hover { color: var(--blue); }

/* pad playback modes (gate / one-shot / choke), grid + sets pages */
.set-modes-bar { margin: 0.25rem 0 0.75rem; }
.pad-modes { display: inline-flex; align-items: center; gap: 0.9rem;
             color: var(--muted); font-size: 0.75rem; }
.pad-mode { display: inline-flex; align-items: center; gap: 0.3rem; }
.pad-modes select { padding: 2px 4px; font-size: 0.75rem; }

/* grid mode */
#grid-bar { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
#grid-bar input { border: none; border-bottom: 1px solid var(--border);
                  border-radius: 0; background: transparent; }
#grid-bar input:focus { border-bottom-color: var(--blue); }
.sel-anchor.on { color: var(--blue); }
.sel-addset { font-size: 0.7rem; border-color: var(--border); color: var(--muted);
              max-width: 5.5rem; }
.sel-row.error { border-left: 2px solid var(--error); padding-left: 0.25rem; }

/* sets page */
.set-row { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.set-head { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.set-head input, .set-head button { cursor: auto; }
.set-head .spacer { flex: 1; }
.set-name { border: none; border-bottom: 1px solid transparent; border-radius: 0;
            background: transparent; font-size: 0.9rem; flex: 0 1 16rem; }
.set-name:focus { border-bottom-color: var(--blue); }
.slot-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.slot { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; }
.slot.empty .slot-label { color: var(--border); }
.slot-label { flex: 1; }

/* Settings page */
.settings fieldset { border: 1px solid var(--border); border-radius: 6px;
  padding: 1rem 1.2rem; max-width: 28rem; }
.settings legend { padding: 0 0.4rem; font-weight: 600; }
.settings label { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 0.5rem 0; }
.settings input[type="number"] { width: 6rem; }
.settings button { margin-top: 0.6rem; }

kbd { border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
  font-family: monospace; font-size: 0.85em; }

/* Upload page */
.dropzone {
  border: 1px dashed var(--border); border-radius: 6px;
  min-height: 8rem; margin: 1rem 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; user-select: none;
}
.dropzone.drag { border-color: var(--blue); background: var(--surface); color: var(--blue); }
.dz-label { font-size: 0.9rem; }
.upload-list { list-style: none; margin: 0; padding: 0; }
.upload-item { display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.2rem 0; border-bottom: 1px solid var(--border); }
.up-name { font-size: 0.85rem; }
.up-status.error { color: var(--error); }

/* ---------- FX chain rack (editor) ---------- */
.fx-panel { margin: 0.75rem 0; }
.fx-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.fx-title { font-weight: 600; }
.fx-add { max-width: 16rem; }
.fx-bypass-all { margin-left: auto; }
.fx-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.fx-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.4rem 0.5rem;
}
.fx-card.bypassed { opacity: 0.5; }
.fx-card-head { display: flex; align-items: center; gap: 0.35rem; }
.fx-card-head .fx-name { font-weight: 600; margin-right: auto; }
.fx-up, .fx-dn { padding: 0 0.25rem; }
.fx-byp.on { color: var(--blue); }
.fx-param { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.fx-plabel { flex: 0 0 8rem; color: var(--muted); font-size: 0.85em; }
.fx-slider { flex: 1; }
.fx-pval { flex: 0 0 3rem; text-align: right; font-family: var(--mono); font-size: 0.85em; }
.fx-bypass-all { margin-left: auto; }
.fx-addtoggle.on { color: var(--blue); }

/* two-panel effect browser: categories | effects */
.fx-browser {
  display: flex; gap: 0; max-height: 240px; margin-bottom: 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.fx-cats { flex: 0 0 12rem; overflow-y: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.fx-cat { text-align: left; border: none; border-radius: 0; padding: 0.3rem 0.6rem; background: transparent; }
.fx-cat:hover { background: var(--surface); }
.fx-cat.on { background: var(--blue); color: var(--white); }
.fx-effects { flex: 1; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.25rem; padding: 0.4rem; }
.fx-effect { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.2rem 0.5rem; background: var(--white); font-size: 0.85em; }

/* favorites list */
.fx-favs { margin-top: 0.5rem; }
.fx-fav-head { color: var(--muted); font-size: 0.8em; margin: 0.4rem 0 0.15rem; }
.fx-fav-cat { color: var(--blue); font-size: 0.75em; margin: 0.25rem 0 0.05rem 0.35rem; }

/* ---- layers (mix) panel ---- */
.layers-panel { margin-top: 1rem; border-top: 1px solid var(--surface); padding-top: 0.5rem; }
.layers-head { display: flex; align-items: center; gap: 0.4rem; }
.layers-title { font-size: 0.95rem; font-weight: 700; margin: 0; }
.mix-clock { color: var(--muted); font-size: 0.85em; }
.layers-list { list-style: none; margin: 0.4rem 0; padding: 0; }
.layer-row { padding: 0.15rem 0; border-bottom: 1px dotted var(--surface); }
.layer-strip { display: flex; align-items: center; gap: 0.4rem; }
.layer-row.fx-open { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.layer-name { flex: 1; min-width: 8rem; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; text-decoration: none; color: inherit; }
.layer-name:hover { color: var(--blue); }
.layer-off, .layer-tin, .layer-tout { width: 4.2rem; }
.layer-pan { width: 4.5rem; }
.layer-gain { width: 6rem; }
.layer-mute.on, .layer-solo.on { color: var(--blue); }
.layer-picker { margin: 0.4rem 0; }
.layer-q { width: 100%; max-width: 24rem; }
.layer-results { display: flex; flex-direction: column; align-items: flex-start;
                 max-height: 14rem; overflow-y: auto; margin-top: 0.25rem; }
.layer-pick { background: transparent; border: none; color: inherit; cursor: pointer;
              padding: 0.15rem 0.3rem; text-align: left; width: 100%; }
.layer-pick:hover { color: var(--blue); background: transparent; }
.layer-env.on { color: var(--blue); }
.env-lane { display: flex; align-items: stretch; gap: 0.4rem; margin: 0.3rem 0 0.2rem; }
.env-target { max-width: 12rem; }
.env-canvas { flex: 1; height: 56px; min-width: 0; background: color-mix(in srgb, var(--surface) 40%, transparent);
              border-radius: 3px; cursor: crosshair; touch-action: none; }
.fx-lfos { margin: 0.25rem 0 0.1rem; padding-left: 0.35rem; }
.fx-lfo { display: flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0; }
.fx-lfo-tag { color: var(--blue); font-size: 0.7em; text-transform: uppercase; }
.fx-lfo-target { max-width: 7rem; }
.fx-lfo-rate { width: 4rem; }
.fx-lfo-range { width: 3.5rem; }
.fx-lfo-add { color: var(--muted); font-size: 0.85em; }
.master-strip { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0;
                border-top: 1px solid var(--surface); }
.master-label { font-weight: 700; font-size: 0.85em; color: var(--muted); }
.master-fx.on, .layer-fx.on { color: var(--blue); }
.layers-fx { margin-top: 0.5rem; }
.layers-fx-title { color: var(--muted); font-size: 0.85em; margin-bottom: 0.25rem; }

/* ---- seeds ---- */
.seed-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0;
            border-bottom: 1px dotted var(--surface); }
.seed-row .seed-name { text-decoration: none; color: inherit; font-weight: 600; }
.seed-row .seed-name:hover { color: var(--blue); }
.seed-count { color: var(--muted); font-size: 0.85em; }
.seed-editor .layers-panel { border-top: none; }
.fx-fav-item { display: flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0; }
.fx-fav-name { flex: 1; font-size: 0.9em; }

/* commit (✦) / bounce (✂) in-progress feedback on a selection row */
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.sel-row.committing, .sel-row.bouncing { animation: fx-pulse 1s ease-in-out infinite; }
.sel-row.committing .sel-commit, .sel-row.bouncing .sel-bounce {
  color: var(--blue); min-width: 3.4ch; font-variant-numeric: tabular-nums;
}