/* mtl.css — Master Timeline viewers v2.  PORT OF DH #614 (pipeline #5413).
   Source of truth: /Volumes/1 TB SSD SanDisk/mac-offload/ss-dh614/design/
                    (design-tokens.css + mtl/mtl.css), founder-run 2026-08-04.

   WHAT WAS TAKEN AND WHAT WAS NOT.
   Ported: the `--tl-*` token block and every `.mtl-*` instrument rule, byte-faithful.
   NOT ported: the design harness (.hbar/.stage/.appframe/.stagecap/.ctx/.oos) and its
   html/body reset — that is the demo page the design shipped inside, not the product.
   Porting a harness into the app is how a design "port" quietly restyles the shell.

   The token block is deliberately kept HERE rather than merged into tokens.css: it is
   this instrument's vocabulary, every value is already expressed against the existing
   token set, and keeping it adjacent means the next agent editing the timeline can see
   the whole system in one file. Load AFTER tokens.css.

   #5413 STAGING NOTE: this file is complete and correct, but is NOT yet referenced by
   app.html. The render swap in cue-room-waveform.jsx is the remaining step; wiring the
   stylesheet before the markup exists would only put unused rules on every page. */

:root{
  /* geometry — instrument rows */
  --tl-header-h:24px;   /* instrument header · between --d-ctl-sm (22) and --d-ctl (26) */
  --tl-ov-h:26px;       /* OVERVIEW register (founder: "smaller, ~30px") */
  --tl-seam-h:6px;      /* coupling seam between registers — the fan lives here */
  --tl-band-h:12px;     /* note-marks band atop the working register */
  --tl-lane-h:56px;     /* the one overlay band (no stacked mode) */
  --tl-bed-min:44px;    /* min working bed — the stem-less floor (band+bed = 56px) */
  --tl-ruler-h:16px;    /* timecode ruler */
  --tl-gutter:64px;     /* the shared left gutter both registers hang off */

  /* the "you are here" system — ONE meaning (teal) at three strengths.
     Playhead stays --ss-accent (strongest); the window + fan are quieter steps of it. */
  --tl-window-line:var(--ss-accent-line);
  --tl-window-fill:rgba(var(--ss-accent-rgb), 0.04);
  --tl-fan:rgba(var(--ss-accent-rgb), 0.13);
  --tl-veil:rgba(10,12,14,0.45);          /* overview outside-window veil */

  /* waveform + decode progress */
  --tl-wave:var(--wave-fill);
  --tl-decode-front:var(--ss-accent);          /* determinate decode front (the progress edge) */
  --tl-ladder:rgba(212,215,220,0.10);     /* undecoded tick ladder — --fg at 10%, never an envelope */

  /* notes (= cues — one vocabulary) */
  --tl-note-uncat:var(--cue-amber);       /* uncategorised note mark */
  --tl-cluster-bg:var(--bg-sub);
  --tl-cluster-line:var(--line-strong);
}

/* ── the instrument ───────────────────────────────────────────────── */
.mtl{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-deep);user-select:none}
.mtl *{box-sizing:border-box}
.mtl-row{position:relative;display:flex}
.mtl-g{flex:0 0 var(--tl-gutter);width:var(--tl-gutter);position:relative;background:var(--bg-app);border-right:1px solid var(--line-soft);display:flex;align-items:center;justify-content:flex-end;padding:0 8px;gap:5px}
.mtl-c{flex:1;position:relative;min-width:0}
.mtl-glab{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}
.mtl-gnum{font-family:var(--mono);font-size:8.5px;color:var(--fg-dim);font-feature-settings:"tnum" 1}

/* header */
.mtl-h{height:var(--tl-header-h);background:var(--bg-panel);border-bottom:1px solid var(--line);box-shadow:var(--inset-panel)}
.mtl-h .mtl-c{display:flex;align-items:center;gap:8px;padding:0 8px}
.mtl-win{font-family:var(--mono);font-size:9px;color:var(--fg-dim);letter-spacing:.06em;font-feature-settings:"tnum" 1;white-space:nowrap}
.mtl-win b{color:var(--fg-mute);font-weight:500}
.mtl-zoom{display:flex;align-items:center;gap:6px;margin-left:0}
.mtl-zbtn{width:18px;height:18px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--btn-grad);color:var(--fg-mute);font-family:var(--mono);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mtl-zbtn:hover{color:var(--fg-strong);border-color:var(--line-strong)}
.mtl-zbtn:disabled{color:var(--fg-faint);cursor:default;background:transparent}
.mtl-znotch{display:flex;gap:3px}
.mtl-znotch i{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.mtl-znotch i.on{background:var(--fg-mute)}

/* stem select */
.mtl-stems{position:relative}
.mtl-stemsbtn{display:flex;align-items:center;gap:6px;height:18px;padding:0 7px;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-1);color:var(--fg-mute);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.mtl-stemsbtn:hover{color:var(--fg);border-color:var(--line-strong)}
.mtl-stemsbtn .chev{font-size:7px;color:var(--fg-dim)}
.mtl-stemsbtn .dots{display:flex;gap:2px}
.mtl-stemsbtn .dots i{width:5px;height:5px;border-radius:50%}
.mtl-menu{position:absolute;z-index:30;top:22px;left:0;min-width:218px;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--float);padding:4px}
.mtl-mrow{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border-radius:var(--r-1);cursor:pointer;font-size:11.5px;color:var(--fg)}
.mtl-mrow:hover{background:var(--bg-row-hover)}
.mtl-mrow .bx{width:11px;height:11px;border:1px solid var(--line-strong);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mtl-mrow.on .bx{border-color:var(--ss-accent);color:var(--ss-accent);font-size:8px}
.mtl-mrow .cd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mtl-mrow .lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;width:26px;color:var(--fg-strong)}
.mtl-mrow .fu{flex:1;color:var(--fg-mute);font-size:11px}
.mtl-mrow .mb{font-family:var(--mono);font-size:9px;color:var(--fg-dim);font-feature-settings:"tnum" 1}
.mtl-mfoot{display:flex;align-items:center;justify-content:space-between;margin-top:3px;padding:7px 8px 4px;border-top:1px solid var(--line-soft);font-size:10.5px}
.mtl-mfoot .qk{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--fg-dim);cursor:pointer}
.mtl-mfoot .qk:hover{color:var(--fg)}
.mtl-mempty{padding:10px 10px 8px;font-size:11px;color:var(--fg-mute);line-height:1.5;max-width:210px}

/* overview */
.mtl-ov{height:var(--tl-ov-h)}
.mtl-ov .mtl-c{cursor:pointer}
.mtl-ov canvas{position:absolute;inset:0;display:block}
.mtl-veil{position:absolute;top:0;bottom:0;background:var(--tl-veil);pointer-events:none}
.mtl-winbox{position:absolute;top:0;bottom:0;border-left:1px solid var(--tl-window-line);border-right:1px solid var(--tl-window-line);background:var(--tl-window-fill);pointer-events:none}
.mtl-ovph{position:absolute;top:0;bottom:0;width:1px;background:var(--ss-accent);pointer-events:none}
.mtl-ghost{position:absolute;top:0;bottom:0;width:1px;background:var(--fg-mute);opacity:.55;pointer-events:none}
.mtl-ghosttc{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;color:var(--fg);background:rgba(13,15,18,.85);border:1px solid var(--line-strong);border-radius:2px;padding:1px 5px;pointer-events:none;white-space:nowrap;font-feature-settings:"tnum" 1;z-index:5}

/* seam fan */
.mtl-seam{height:var(--tl-seam-h);background:var(--bg-app)}
.mtl-seam .mtl-g{border-right-color:var(--line-soft)}
.mtl-seam svg{position:absolute;inset:0;display:block}

/* note band + lanes */
.mtl-band{height:var(--tl-band-h);border-bottom:1px solid var(--line-soft)}
.mtl-band .mtl-c{background:#26282c;overflow:hidden}
.mtl-flag{position:absolute;top:2px;width:2px;height:8px;border-radius:.5px;cursor:pointer}
.mtl-flag.dn{opacity:.45}
.mtl-flag.ac{width:3px;top:1px;height:10px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.mtl-clus{position:absolute;top:1px;height:10px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:0 4px;background:var(--tl-cluster-bg);border:1px solid var(--tl-cluster-line);border-radius:2px;font-family:var(--mono);font-size:7.5px;color:var(--fg-mute);cursor:pointer;white-space:nowrap;font-feature-settings:"tnum" 1}
.mtl-clus:hover{color:var(--fg);border-color:var(--fg-dim)}
.mtl-clus i{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.mtl-lanes{position:relative}
.mtl-lanes .mtl-c{cursor:grab;overflow:hidden}
.mtl-lanes .mtl-c.drag{cursor:grabbing}
.mtl-lanes canvas{position:absolute;inset:0;display:block}
.mtl-lanes .mtl-g .pc{font-family:var(--mono);font-size:8px;color:var(--fg-dim);font-feature-settings:"tnum" 1}
.mtl-noteline{position:absolute;top:0;bottom:0;width:1px;pointer-events:none}
.mtl-noteline.ac{width:2px}

/* playhead (working register) */
.mtl-ph{position:absolute;top:0;bottom:0;width:1px;background:var(--ss-accent);pointer-events:none;z-index:6}
.mtl-ph.roll{box-shadow:0 0 6px var(--ss-accent-glow)}
.mtl-ph .cap{position:absolute;left:-4px;top:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--ss-accent)}
.mtl-ph.park .cap{opacity:.75}
.mtl-ph .tcf{position:absolute;left:6px;top:15px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ss-accent);background:rgba(13,15,18,.72);border-radius:2px;padding:1px 4px;white-space:nowrap;font-feature-settings:"tnum" 1}
.mtl-ph.park .tcf{color:var(--fg-mute)}

/* decode / failed / empty rows */
.mtl-decode{position:absolute;right:10px;top:4px;display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--fg-dim);z-index:7;background:rgba(35,37,40,.8);padding:2px 6px;border-radius:2px;font-feature-settings:"tnum" 1}
.mtl-decode b{color:var(--fg);font-weight:600;font-size:9.5px}
.mtl-decode .eta{color:var(--fg-mute)}
.mtl-front{position:absolute;top:0;bottom:0;width:1px;background:var(--tl-decode-front);opacity:.9;pointer-events:none;z-index:5}
.mtl-front::after{content:'';position:absolute;top:0;bottom:0;left:-14px;width:14px;background:linear-gradient(90deg,transparent,var(--ss-accent-glow))}
.mtl-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.mtl-msg>*{pointer-events:auto}
.mtl-msg .t1{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--fg-mute)}
.mtl-msg .t1 em{font-style:normal;color:var(--st-danger)}
.mtl-msg .t2{font-size:11px;color:var(--fg-dim)}
.mtl-base{position:absolute;left:12px;right:12px;top:50%;height:1px;background:var(--line-soft);pointer-events:none}

/* ruler */
.mtl-ruler{height:var(--tl-ruler-h);border-top:1px solid var(--line-soft)}
.mtl-ruler .mtl-c{overflow:hidden;background:var(--bg-deep)}
.mtl-tk{position:absolute;bottom:0;width:1px;height:4px;background:var(--line)}
.mtl-tk.maj{height:7px;background:var(--line-strong)}
.mtl-tl{position:absolute;top:1px;font-family:var(--mono);font-size:8px;color:var(--fg-dim);letter-spacing:.03em;transform:translateX(3px);white-space:nowrap;font-feature-settings:"tnum" 1}
.mtl-rulerph{position:absolute;top:0;bottom:0;width:1px;background:var(--ss-accent);opacity:.85;pointer-events:none}

@media (prefers-reduced-motion:reduce){.mtl .sweep{display:none}}

/* ── written record (project h-notes convention) ─────────────── */
.h-notes{max-width:1560px;margin:0 auto;padding:44px 26px 100px}
.h-sech{display:flex;align-items:baseline;gap:13px;border-bottom:1px solid var(--line);padding-bottom:11px;margin:0 0 20px}
.h-sech .n{font-family:var(--mono);font-size:10px;color:var(--ss-accent);font-weight:600}
.h-sech h2{font-size:14.5px;color:var(--fg-strong);font-weight:500;margin:0}
.h-sech span{font-size:11.5px;color:var(--fg-dim);margin-left:auto}
.h-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}
.h-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.h-card h3{font-family:var(--mono);font-size:10px;color:var(--ss-accent);font-weight:500;letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px}
.h-card h3.warn{color:var(--st-flagged)}
.h-card h3.mute{color:var(--fg-mute)}
.h-card p{font-size:12.5px;color:var(--fg-mute);line-height:1.62;margin:0 0 11px;text-wrap:pretty}
.h-card p:last-child{margin-bottom:0}
.h-card p b{color:var(--fg-strong);font-weight:500}
.h-card code{font-family:var(--mono);font-size:11px;color:var(--fg);background:var(--bg-deep);border:1px solid var(--line-soft);border-radius:3px;padding:1px 5px}
.h-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.h-card li{font-size:12.5px;color:var(--fg-mute);line-height:1.55;padding-left:15px;position:relative;text-wrap:pretty}
.h-card li::before{content:'—';position:absolute;left:0;color:var(--fg-faint)}
.h-card li b{color:var(--fg);font-weight:500}
.h-tbl{width:100%;border-collapse:collapse;font-size:12px}
.h-tbl th{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--line-soft);font-weight:400}
.h-tbl td{padding:8px 12px 8px 0;border-bottom:1px solid rgba(0,0,0,.16);color:var(--fg-mute);line-height:1.5;vertical-align:top}
.h-tbl td b{color:var(--fg);font-weight:500}
.h-tbl code{font-family:var(--mono);font-size:10.5px;color:var(--fg-mute)}
@media (max-width:1080px){.h-cols{grid-template-columns:1fr}}