/* Tokens matched to home.css. The tool was built standalone with its own
   darker background and a green accent; inside the MELD site that read as a
   different product sharing a domain. Every rule below already refers to these
   by name, so aligning them here re-skins the whole tool. */
:root{
  --bg:#1c1a17; --bg-soft:#14120f; --panel:#14120f;
  --line:rgba(232,227,217,.09); --line-soft:rgba(232,227,217,.06);
  --txt:#e8e3d9; --txt-dim:#b3a89a; --txt-faint:#8f8579;
  /* --blue-deep is a HOVER BORDER, so it has to sit below the accent. The
     sweep folded it onto the accent itself, which made every hover state
     identical to the pressed one. It is the palette's own line colour now -
     one step up from the resting border, still clearly the console. */
  --blue:#e8a33d; --blue-deep:#6f675d;
  --green:#e8a33d; --amber:#e8a33d; --rose:#c4553d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(900px 500px at 50% -10%,rgba(232,163,61,.07) 0%,transparent 62%),var(--bg);
  color:var(--txt);font-family:var(--font-sans);font-size:15px;
  -webkit-font-smoothing:antialiased;
}
.topbar{
  height:42px;display:flex;align-items:center;gap:9px;
  max-width:760px;margin:0 auto;padding:0 22px;
  border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  justify-content:flex-end;
}
/* The site nav already says MELD. A second wordmark directly beneath it is
   noise, so only the status pill survives here. */
.topbar .brand-mark,.topbar .brand,.topbar .brand-sub,.topbar .spacer{display:none}
.brand-mark{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.brand{font-weight:600;letter-spacing:.16em;font-size:14px}
.brand-sub{font-size:12px;color:var(--txt-faint);letter-spacing:.08em}
.spacer{flex:1}
.pill{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(232,163,61,.3);
  color:var(--green);background:rgba(232,163,61,.06);
}
/* Fluid, not fixed. min() means it grows with the window up to a ceiling and
   shrinks below it, so there is no width at which the layout suddenly stops
   responding. The tool and the copy below now share this measurement - they
   used to disagree (760 vs 1040), which read as a mistake. */
:root{ --meld-page: min(1280px, 92vw); }
main{width:var(--meld-page);max-width:100%;margin:0 auto;padding:38px 22px 60px}

/* drop */
.dropzone{
  border:1.5px dashed var(--line);border-radius:3px;padding:60px 30px;text-align:center;
  color:var(--txt-faint);transition:.18s;background:rgba(20,18,15,.35);
}
.dropzone.over{border-color:var(--green);background:rgba(232,163,61,.06);color:var(--green)}
.dropzone h2{font-size:22px;font-weight:500;color:var(--txt);margin:16px 0 8px;letter-spacing:-.01em}
.dropzone p{font-size:13.5px;margin:0 0 22px;color:var(--txt-faint);line-height:1.55}

button{font:inherit;cursor:pointer;transition:.16s;border-radius:3px}
/* Shared geometry: this was 14px/400/10px-20px against 15.2px/600 elsewhere. */
.ghost{background:none;border:1px solid var(--line);color:var(--txt-dim);padding:var(--btn-pad-y) var(--btn-pad-x);font-size:var(--btn-size);font-weight:var(--btn-weight);letter-spacing:var(--btn-tracking);border-radius:var(--btn-radius)}
/* A link that has to sit in a row of buttons and look like one. */
.btn-link{display:inline-block;text-decoration:none;text-align:center;cursor:pointer}
.btn-link:hover{border-color:var(--accent);color:var(--txt)}
.ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ghost:hover{border-color:var(--blue-deep);color:var(--txt)}
.ghost.small{padding:7px 14px;font-size:12.5px}
.primary{
  width:100%;padding:14px;border:2px solid var(--accent,#e8a33d);
  background:var(--accent,#e8a33d);color:#1c1a17;
  font-family:var(--font-display);font-size:17px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-top:20px;
}
.primary:hover{background:var(--accent-hot,#f5bd63);border-color:var(--accent-hot,#f5bd63)}
.primary:disabled{opacity:.4;cursor:not-allowed}

/* file bar */
.filebar{display:flex;align-items:center;gap:14px;margin:20px 0 22px;
  background:var(--panel);border:1px solid var(--line);padding:13px 17px}
.filebar-file{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;flex:1;min-width:0}
.filename{font-family:var(--font-mono);font-size:13px;font-weight:600;word-break:break-all}
.filemeta{font-family:var(--font-mono);font-size:12px;color:var(--txt-faint)}

/* readouts */
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:10px;margin-bottom:16px}

.readout{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:14px 15px;
  display:flex;flex-direction:column;gap:4px;
}
.rl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint)}
.rv{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rv.ok{color:var(--green)}
.rv.rv-text{font-size:15px;font-weight:500;letter-spacing:0;align-self:center}
.ru{font-size:11px;color:var(--txt-faint)}

/* targets */
.targets{display:flex;gap:9px;margin-bottom:4px}
@media(max-width:620px){.targets{flex-direction:column}}
.target{
  flex:1;padding:12px 14px;border-radius:3px;border:1px solid var(--line);
  background:var(--bg-soft);text-align:left;color:var(--txt-dim);
}
.target:hover{border-color:var(--blue-deep)}
.target.sel{border-color:var(--green);background:rgba(232,163,61,.09);color:var(--txt)}
.target b{display:block;font-size:13.5px;font-weight:500}
.target span{font-family:var(--font-mono);font-size:11px;color:var(--txt-faint)}

/* progress */
.progress{margin-top:18px}
.bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--green);transition:width .25s}
.progress-label{font-family:var(--font-mono);font-size:11px;color:var(--txt-faint);margin-top:9px;letter-spacing:.06em}

/* warnings */
.warn{
  border-radius:3px;padding:13px 15px;margin-top:16px;font-size:13.5px;line-height:1.5;
  border:1px solid rgba(245,189,99,.35);background:rgba(245,189,99,.07);color:var(--amber);
}
.warn.bad{border-color:rgba(196,85,61,.4);background:rgba(196,85,61,.07);color:var(--rose)}

/* a/b */
.ab{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:15px 16px;margin-bottom:4px}
.ab-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ab-head>span:first-child{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint)}
.ab-note{font-size:11.5px;color:var(--txt-faint)}
.ab-btns{display:flex;gap:8px}
.ab-btn{flex:1;padding:11px;border:1px solid var(--line);background:var(--bg-soft);color:var(--txt-dim);font-size:13.5px}
.ab-btn:hover{border-color:var(--blue-deep);color:var(--txt)}
.ab-btn.on{border-color:var(--green);background:rgba(232,163,61,.14);color:var(--green)}
.ab-btn.stop{flex:0 0 90px}
.ab-pos{height:2px;background:var(--line);border-radius:1px;margin-top:12px;overflow:hidden}
.ab-pos>i{display:block;height:100%;width:0;background:var(--blue)}

.boundary{font-size:11.5px;color:var(--txt-faint);line-height:1.6;margin:11px 2px 0;text-align:center}
.fineprint{font-family:var(--font-mono);font-size:10.5px;color:var(--txt-faint);line-height:1.7;margin-top:14px;word-break:break-word}

/* ------------------------------ payment ------------------------------- */
/* One line, four states. A purchase must never leave someone guessing which
   of "paid", "rendering" and "failed" they are in. */
.paystate{display:flex;align-items:center;gap:9px;margin:0 auto 18px;max-width:720px;padding:10px 13px;
  border-radius:3px;border:1px solid var(--line,var(--line));background:rgba(232,227,217,.02);
  font-size:13px;line-height:1.45}
.paystate[hidden]{display:none}
.paystate-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.paystate-text{flex:1}
.paystate.pending .paystate-dot{background:#f5bd63;box-shadow:0 0 8px #f5bd63;
  animation:paypulse 1.3s ease-in-out infinite}
.paystate.paid .paystate-dot{background:#e8a33d;box-shadow:0 0 8px #e8a33d}
.paystate.ready .paystate-dot{background:#e8a33d;box-shadow:0 0 8px #e8a33d}
.paystate.failed .paystate-dot{background:#c4553d;box-shadow:0 0 8px #c4553d}
.paystate.failed{border-color:rgba(196,85,61,.35)}
.paystate.paid,.paystate.ready{border-color:rgba(232,163,61,.3)}
@keyframes paypulse{0%,100%{opacity:1}50%{opacity:.35}}
.paystate-action{padding:6px 12px;border-radius:3px;border:1px solid rgba(111,159,196,.4);
  background:rgba(111,159,196,.12);color:#6f9fc4;font:inherit;font-size:12px;cursor:pointer}
.paystate-action:hover{background:rgba(111,159,196,.2)}
.paystate-action[hidden]{display:none}
.testbadge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:3px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#f5bd63;border:1px solid rgba(245,189,99,.4)}

.dropprice{margin-top:10px;font-size:12.5px;opacity:.75}

/* ---------------------------------------------------------------------- *
 * Product copy below the tool.
 *
 * Tokens and treatments taken from home.css so /master, /myroc and the
 * corporate site read as one product rather than three.
 * ---------------------------------------------------------------------- */

.explain, .social {
  width: var(--meld-page);
  max-width: 100%;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.social { text-align: center; border-top: 1px solid var(--line, rgba(232,227,217,.09)); }

.explain h2 {
  font-size: 1.15rem; letter-spacing: .02em; margin: 2.6rem 0 .9rem;
}
.explain h2:first-child { margin-top: 0; }
/* Wider than it was, deliberately not full-bleed.
   Line length is the one typographic rule worth holding: past roughly 80
   characters the eye loses its place on the return sweep and people re-read
   lines without noticing. 62ch was too timid next to a full-width card grid;
   78ch fills the space without making the paragraph tiring. */
.explain .lede { color: var(--muted, rgba(232,227,217,.56)); margin: 0 0 1.6rem; }

/* No multi-column text.
   It was a mistake: CSS columns flow a single paragraph DOWN the left column
   and then back UP to the right, so a sentence breaks across a three-inch gap
   and the reader has to hunt for where it continues. Fine for a newspaper
   with column rules and many paragraphs; unreadable for one short intro.
   The page is capped at 1280px, which keeps the line length sane on its own. */

/* auto-fit rather than a fixed three: the row reflows at whatever width the
   window happens to be, instead of jumping from one column to three at a
   single breakpoint. */
.explain-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.explain-grid > div {
  background: var(--panel, #14120f);
  border: 1px solid var(--line, rgba(232,227,217,.09));
  border-radius: 3px;
  padding: 1.3rem 1.2rem;
}
.explain-grid h3 {
  margin: 0 0 .4rem; font-size: .74rem; color: var(--accent, #e8a33d);
  text-transform: uppercase; letter-spacing: .14em;
}
.explain-grid p { margin: 0; font-size: .92rem; color: var(--muted, rgba(232,227,217,.56)); }

.steps { margin: 0; padding-left: 1.2rem; }
.steps li { margin-bottom: .7rem; color: var(--muted, rgba(232,227,217,.56)); }
.steps strong { color: var(--txt, #e8e3d9); }

.caveat {
  margin-top: 2rem; padding: 1rem 1.1rem;
  border-left: 2px solid var(--accent, #e8a33d);
  background: rgba(232,163,61,.05);
  color: var(--muted, rgba(232,227,217,.56));
  font-size: .92rem;
}

/* Footer styling lives in meld-chrome.css - one definition, so the bar is
   the same height on every page. */


/* ---------------------------------------------------------------------- *
 * The batch queue.
 *
 * Up to five tracks. Each row owns its own state, so one file failing to
 * decode does not stop the other four, and each carries its own remove
 * control - adding four files and being unable to drop one of them is worse
 * than not accepting four at all.
 * ---------------------------------------------------------------------- */

.queue-wrap {
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); padding: 1rem 1.1rem; margin-bottom: 1.4rem;
}
.queue-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem;
}
#queue-count {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-faint); font-weight: 700;
}
.queue-actions { display: flex; gap: .5rem; }
.primary.small { padding: 7px 16px; font-size: 12.5px; width: auto; margin-top: 0; }

.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.queue li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: .75rem; padding: .6rem .7rem;
  border: 1px solid var(--line-soft); border-radius: 3px;
  background: var(--bg); cursor: pointer;
  transition: border-color .15s ease;
}
.queue li:hover { border-color: var(--line); }
.queue li.is-selected { border-color: var(--blue); }

.q-name { min-width: 0; }
.q-title {
  font-size: .92rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-meta { font-size: .74rem; color: var(--txt-faint); margin-top: .1rem; }

.q-status {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; white-space: nowrap;
}
.q-status.waiting { color: var(--txt-faint); }
.q-status.working { color: var(--amber); }
.q-status.done    { color: var(--blue); }
.q-status.failed  { color: var(--rose); }

.q-actions { display: flex; align-items: center; gap: .4rem; }
.q-dl {
  background: none; border: 1px solid var(--line); color: var(--txt);
  border-radius: 3px; padding: .3rem .6rem; font-size: .7rem;
  font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.q-dl:hover { border-color: var(--blue); color: var(--blue); }

/* The remove control. A generous hit area, because a 12px X on a phone is a
   control that exists for the mouse only. */
.q-remove {
  background: none; border: 0; color: var(--txt-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.q-remove:hover { color: var(--rose); background: rgba(196,85,61,.1); }

.queue-note { margin: .8rem 0 0; font-size: .76rem; color: var(--txt-faint); }
.queue-note.warn-full { color: var(--amber); }

/* ---- Custom loudness target ------------------------------------------- */
/* Revealed only by the Custom preset. The note is not decoration: a value
   outside the bounds is silently clamped, and a field that shows one number
   while the render uses another is worse than no field at all. */
.custom-target{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.custom-target label{font-size:.85rem;color:var(--muted, #b3a89a)}
.custom-target input{width:6.5rem;font:inherit;font-size:.95rem;padding:7px 10px;
  border-radius:3px;border:1px solid var(--line, #2e2a24);background:rgba(232,227,217,.04);
  color:var(--txt, #e8e3d9)}
.custom-target input:focus{outline:2px solid var(--accent, #e8a33d);outline-offset:1px}
.custom-note{flex:1 1 12rem;min-width:0;font-size:.78rem;color:var(--faint, #8f8579)}

/* ---- The free-render prompt ------------------------------------------- */
/* Shown once a render has actually been delivered. Deliberately calm: the
   person just got something that worked, and this is an invitation rather
   than a wall. */
.gate{border:1px solid var(--line, #2e2a24);border-radius:3px;padding:18px 20px;
  background:rgba(232,163,61,.05);margin-top:4px}
.gate h3{margin:0 0 8px;font-size:1.05rem;color:var(--txt, #e8e3d9)}
.gate p{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:var(--muted, #b3a89a)}
.gate-note{margin:12px 0 0 !important;font-size:.82rem;color:var(--faint, #8f8579)}
.gate-btn{display:inline-block;padding:9px 18px;border-radius:3px;font-size:.9rem;
  font-weight:600;text-decoration:none;background:var(--accent, #e8a33d);color:#1c1a17}
.gate-btn:hover{filter:brightness(1.08)}


/* ---------------------------- incoming audio ---------------------------- *
 *
 * Audio handed over from MELD Studio or MELD Jam. Sits above the drop zone
 * because it is the shorter path: someone who arrived here from Studio has
 * already chosen their file, and asking them to find it on disk would undo the
 * entire point of the handoff.
 */
#incoming { max-width: 720px; margin: 0 auto 1.4rem; }

/* Inside the drop card now, so it takes the card's width rather than its own
   and sits under the drop target with a rule between them - the same
   separation the Studio draws between its recorder and its library. */
.dz-library {
  margin: 0; padding: 1.1rem 1.25rem 1.25rem;
  border: 1.5px solid var(--line); border-top: 0;
  border-radius: 0 0 16px 16px;
  background: rgba(20,18,15,.35);
  text-align: left;
}
/* The drop target loses its bottom corners when the library is under it, so
   the two read as one card rather than two stacked ones. */
#stage-drop:has(.dz-library:not([hidden])) .dropzone {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-style: solid;
}
.inc-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 .6rem;
}
.inc-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-bottom: .5rem;
  border: 1px solid var(--line); border-radius: 3px; background: rgba(232,227,217,.02);
}
.inc-main { flex: 1 1 12rem; min-width: 0; }
.inc-name {
  margin: 0; font-size: .95rem; font-weight: 600; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inc-meta { margin: .2rem 0 0; font-size: .8rem; color: var(--faint); }

/* Your own recordings. Same shape as an arrival, because it is the same kind
   of thing to look at - what differs is that loading one does not consume it. */
.rec-pick-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); margin: 0 0 .5rem; }
.rec-pick-main { flex: 1 1 12rem; min-width: 0; }
.rec-pick-name { margin: 0; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.rec-pick-meta { margin: .2rem 0 0; font-size: .8rem; color: var(--faint); }
.rec-pick-use { flex: 0 0 auto; }
.rec-pick-note { margin: 0; font-size: .85rem; color: var(--faint); line-height: 1.6; }
.inc-load { flex: 0 0 auto; }

/* --------------------------- post to Social ---------------------------- *
 *
 * Opens under the download rather than over it. A modal would cover the
 * readouts and the download button, and the download is the thing they came
 * for - posting is optional and must never look like a step on the way out.
 */
#post-panel {
  margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line, #2e2a24); border-radius: 3px;
  background: rgba(232,227,217,.02);
  text-align: left;
}
.post-h { margin: 0 0 .8rem; font-size: 1rem; color: var(--txt, #e8e3d9); }
#post-panel label {
  display: block; margin: .7rem 0 .25rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--faint, #8f8579); text-transform: uppercase;
}
.post-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
#post-panel input, #post-panel select, #post-panel textarea {
  width: 100%; box-sizing: border-box;
  padding: .55rem .7rem;
  font: inherit; font-size: .92rem;
  color: var(--txt, #e8e3d9);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line, #2e2a24); border-radius: 3px;
}
#post-panel textarea { resize: vertical; }
#post-panel input:focus-visible, #post-panel select:focus-visible,
#post-panel textarea:focus-visible { outline: 2px solid var(--accent, #e8a33d); outline-offset: 1px; }
.post-preview {
  margin: .9rem 0 0; padding: .6rem .75rem;
  font-size: .85rem; color: var(--muted, #b3a89a);
  border-left: 2px solid var(--accent, #e8a33d);
  background: rgba(232,163,61,.05);
  overflow-wrap: anywhere;
}
.post-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.post-actions button { flex: 0 0 auto; }
.post-msg { margin: .7rem 0 0; font-size: .85rem; min-height: 1.1em; }
.post-msg.bad { color: #c4553d; }
.post-msg.good { color: var(--accent, #e8a33d); }
.post-note { margin: .5rem 0 0; font-size: .78rem; color: var(--faint, #8f8579); }

/* ------------------------------------------------------------------ *
   MONO COMPATIBILITY AND REFERENCE MATCHING.

   Both are hidden until they have something to say. A permanent "mono: fine"
   row is noise on every render; a warning that only appears when it matters
   is read. */
.mono-check {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .9rem 0 0; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(245,189,99,.07); border-color: rgba(245,189,99,.4);
  font-size: .86rem; line-height: 1.5; color: var(--txt);
}
.mono-check[data-verdict="bad"] {
  background: rgba(196,85,61,.09); border-color: rgba(196,85,61,.45);
}
.mono-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: .38rem;
  background: var(--accent-hot, #f5bd63);
}
.mono-check[data-verdict="bad"] .mono-dot { background: #c4553d; }

.refmatch {
  margin: 1.1rem 0 0; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
}
.refmatch-head h3 { margin: 0 0 .25rem; font-size: 1rem; }
.refmatch-lede { margin: 0 0 .8rem; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.refmatch-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.refmatch-name { font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.refmatch-result { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.refmatch-found { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.6; }
.refmatch-found li { margin-bottom: .2rem; }
.refmatch-strength { display: flex; align-items: center; gap: .7rem; font-size: .84rem; color: var(--muted); }
.refmatch-strength input[type="range"] { flex: 1 1 auto; max-width: 15rem; }
.refmatch-strength output { font: 600 .82rem var(--font-mono); color: var(--txt); min-width: 3ch; }
.refmatch-note { margin: .7rem 0 0; font-size: .78rem; color: var(--faint); line-height: 1.5; }
@media (max-width: 620px) {
  .refmatch-strength { flex-wrap: wrap; }
  .refmatch-strength input[type="range"] { max-width: none; }
}

/* ====================================================================
   THE MASTER CONSOLE
   --------------------------------------------------------------------
   Laid out against Master.dc.html in the design canvas rather than from
   memory. Two columns, because the page has two jobs that are not the
   same job: the left is read once, top to bottom - this is the track,
   this is the target, render it - and the right is where somebody goes
   back and forth between a reference and an A/B.

   The single-column flow this replaces put the reference matcher
   between the readouts and the target tiles, so the one decision the
   page exists to take was pushed below three panels of optional work.
   ==================================================================== */

.mx-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.mx-head h1{
  font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--txt-bright,#f4efe4);margin:0;
}
.mx-lede{font-size:14px;line-height:1.5;color:var(--txt-faint);margin:0}

.mx-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:start}
/* One column before the two would start squeezing the reference graph. */
@media(max-width:900px){.mx-grid{grid-template-columns:1fr}}

.mx-left,.mx-right{min-width:0}
.mx-right{display:flex;flex-direction:column;gap:18px}
.mx-left .lbl{margin:0 0 8px}
.mx-left .lbl+.lbl,.targets+.lbl,.readouts+.lbl{margin-top:22px}

/* SOURCE - a list of rows, so the label and the figure share a baseline and
   the numbers line up in one column down the left of the page. */
.readouts{display:block;margin:0}
.readouts .readout{
  display:flex;align-items:baseline;gap:10px;
  background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:11px 0;flex-direction:row;
}
.readouts .rl{
  flex:1;font-family:var(--font-sans);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--txt-dim);
}
.readouts .rv{font-family:var(--font-mono);font-size:24px;font-weight:600}
.readouts .ru{
  width:48px;flex:none;font-family:var(--font-mono);font-size:10px;color:var(--txt-faint);
}
/* Green is "measured and fine", not decoration - it only ever appears on a
   figure that passed a check. */
.readouts .rv.ok{color:var(--ok,#5da271)}
.readouts .rv.bad{color:var(--warn,#c4553d)}
.readout[hidden]{display:none}

/* TARGET */
.targets{display:flex;gap:8px;margin:0}
.target{
  flex:1;padding:11px 12px;border:2px solid var(--line-2,#3a342c);border-radius:0;
  background:none;text-align:left;color:var(--txt-dim);
}
.target b{
  display:block;font-family:var(--font-display);font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.target span{font-family:var(--font-mono);font-size:12px;color:var(--txt-faint);margin-top:5px;display:block}
.target.sel{border-color:var(--accent,#e8a33d);background:rgba(232,163,61,.1)}
.target.sel b{color:var(--accent,#e8a33d)}

/* MONO CHECK - a pass is shown, not only a failure. */
.mono-check{
  margin-top:22px;padding:13px 15px;border:2px solid var(--ok,#5da271);
  background:rgba(93,162,113,.09);display:block;
}
.mono-head{display:flex;align-items:center;gap:8px}
.mono-dot{width:9px;height:9px;border-radius:0;background:var(--ok,#5da271);flex:none}
.mono-verdict{
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ok,#5da271);
}
.mono-text{display:block;font-size:12.5px;line-height:1.55;color:var(--txt-dim);margin-top:7px}
.mono-check[data-verdict="watch"]{border-color:var(--accent,#e8a33d);background:rgba(232,163,61,.09)}
.mono-check[data-verdict="watch"] .mono-dot{background:var(--accent,#e8a33d)}
.mono-check[data-verdict="watch"] .mono-verdict{color:var(--accent,#e8a33d)}
.mono-check[data-verdict="bad"]{border-color:var(--warn,#c4553d);background:rgba(196,85,61,.1)}
.mono-check[data-verdict="bad"] .mono-dot{background:var(--warn,#c4553d)}
.mono-check[data-verdict="bad"] .mono-verdict{color:var(--warn,#c4553d)}

/* MATCH A REFERENCE / AFTER MASTERING - the two right-hand panels. */
.refmatch,.out-panel{padding:18px;margin:0;border-width:2px}
.refmatch-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.refmatch-head h3{
  margin:0;font-family:var(--font-mono);font-size:var(--label-size,10px);font-weight:500;
  letter-spacing:var(--label-tracking,.28em);text-transform:uppercase;color:var(--txt-faint);
}
.refmatch-nowhere{font-family:var(--font-mono);font-size:11px;color:var(--txt-faint)}
.refmatch-lede{font-size:12.5px;line-height:1.55;color:var(--txt-faint);margin:0 0 14px}
.refmatch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.refmatch-name{font-family:var(--font-mono);font-size:12px;color:var(--txt-dim)}

.out-panel .lbl{display:block;margin:0 0 12px}
.out-panel .result-grid{margin-bottom:14px}
.out-panel .readout{background:var(--bg);border:1px solid var(--line);padding:10px 12px}
.ab{background:none;border:0;padding:0;margin:0}
.ab-btns{display:flex;gap:10px}
.ab-btn{
  flex:1;padding:10px 18px;border:2px solid var(--line-2,#3a342c);border-radius:0;
  background:none;color:var(--txt-dim);
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.ab-btn.on{border-color:var(--accent,#e8a33d);background:rgba(232,163,61,.12);color:var(--accent,#e8a33d)}
.ab-note{font-size:11.5px;line-height:1.5;color:var(--txt-faint);margin:10px 0 0}

.out-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.out-actions .primary,.out-actions .ghost,.out-actions .btn-link{
  width:auto;flex:0 0 auto;margin-top:0;padding:9px 18px;font-size:15px;
}
.out-actions .ghost,.out-actions .btn-link{
  font-family:var(--font-display);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border:2px solid var(--line-2,#3a342c);color:var(--txt);
}

/* Five delivery targets, not the three the artboard happened to draw - so they
   wrap into rows instead of being squeezed until "Apple Podcasts" breaks in
   half. Dropping two real targets to match the picture would have been the
   wrong way round. */
.targets{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  gap:8px;margin:0;
}
.target b{line-height:1.15}

/* The reference tone curves. */
.ref-graph{position:relative;height:150px;background:var(--bg);border:1px solid var(--line-2,#3a342c)}
.ref-graph svg{display:block;width:100%;height:150px}
.ref-graph svg line{stroke:var(--line);stroke-width:1}
.ref-line-mine{stroke:var(--accent,#e8a33d);stroke-width:2.6;vector-effect:non-scaling-stroke}
.ref-line-ref{stroke:var(--txt-faint);stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.ref-key{
  position:absolute;top:9px;font-family:var(--font-mono);font-size:9.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.ref-key-mine{left:12px;color:var(--accent,#e8a33d)}
.ref-key-ref{left:70px;color:var(--txt-faint)}
.ref-axis{
  display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--txt-faint);
}
.refmatch-found{margin:14px 0 0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--txt)}
.refmatch-strength{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:12px;color:var(--txt-dim)}
.refmatch-strength input[type="range"]{flex:1}
.refmatch-strength output{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--txt-bright,#f4efe4)}
.refmatch-note{font-size:11.5px;line-height:1.55;color:var(--txt-faint);margin:12px 0 0}