/* THE CENTRE COLUMN'S STYLES (docs/28-desktop-editor.md). Owner: the timeline (js/timeline/*).
   Ported from the design library's mockup (Encore-Product-Plan/prototype/assets/screens-editor.js, 'editor-desk':
   "centre: toolbar, overview, timeline" and "inspector and legend"), with the kit's tokens from css/base.css. What the
   mockup drew as DOM notes and SVG rows is drawn here on one canvas (js/timeline/canvas.js, art.js), so the rules for
   `.ed-n`, `.ed-lanes` and the guide rows live there as canvas code; the text over the canvas (parts, bar numbers, the
   loop band, the playhead) keeps the mockup's CSS below. */

#ed-centre { container-type: inline-size; }

/* ---------- the tool bar ---------- */
.ed-toolbar { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.ed-toolbar .lbl { font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); margin-right: 2px; }
.ed-tool { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.13); background: rgba(0,0,0,.32); font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ed-tool:hover { color: var(--white); }
.ed-tool.on { color: var(--white); border-color: rgba(112,245,203,.75); background: rgba(112,245,203,.12); box-shadow: 0 0 12px rgba(112,245,203,.28); }
.ed-tool svg { width: 14px; height: 14px; }
.ed-tool.ic { width: 30px; padding: 0; justify-content: center; }
.ed-tool[disabled] { opacity: .35; cursor: default; }
.ed-tool[disabled]:hover { color: var(--dim); }
.ed-glyph { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; }
.ed-glyph::before { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #fff, var(--gc, #3FE3FF)); box-shadow: 0 0 6px var(--gc, #3FE3FF); }
.ed-glyph.hold::after { content: ''; position: absolute; left: 8px; top: 4px; width: 7px; height: 6px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--gc, #3FE3FF) 55%, transparent); }
.ed-glyph.slice::before { left: 4px; width: 6px; top: 0; height: 14px; background: linear-gradient(180deg, var(--l0, #FF6B6B), var(--l1, #FFB84D), var(--l2, #3FE3FF), var(--l3, #B48CFF)); }
.ed-glyph.flick::after { content: ''; position: absolute; left: 4px; top: -4px; border: 3.5px solid transparent; border-bottom: 4px solid #fff; }
.ed-zoomv { min-width: 44px; text-align: center; font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
@container (max-width: 600px) { .ed-tool .tl { display: none; } .ed-tool.on .tl { display: inline; } .ed-toolbar .lbl { display: none; } }

/* ---------- the overview strip ---------- */
.ed-over { flex: none; position: relative; height: 26px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.1); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.ed-over canvas { position: absolute; inset: 0; display: block; }
.ed-ov-win { position: absolute; top: 1px; bottom: 1px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 7px; background: rgba(255,255,255,.08); box-shadow: 0 0 12px rgba(255,255,255,.25); pointer-events: none; min-width: 6px; }
.ed-over.dragging .ed-ov-win { background: rgba(255,255,255,.14); }
.ed-ov-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mint); box-shadow: 0 0 8px var(--mint); pointer-events: none; }
.ed-ov-loop { position: absolute; top: 0; bottom: 0; background: rgba(255,198,94,.22); border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); pointer-events: none; }

/* ---------- the timeline ---------- */
#ed-timeline { display: flex; flex-direction: column; min-height: 0; }
.ed-tlwrap { position: relative; flex: 1; min-height: 250px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ed-tl { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ed-labs { position: absolute; left: 0; top: 0; bottom: 0; width: 116px; z-index: 6; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(90deg, #14101f 90%, rgba(20,16,31,.9)); border-right: 1px solid rgba(255,255,255,.1); }
.ed-lab { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.05); font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ed-lab i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ed-lab.gap { border-bottom: 0; background: rgba(0,0,0,.4); }
.ed-lab.lanes { flex: 1 1 auto; flex-direction: column; align-items: stretch; padding: 0; gap: 0; border-bottom: 0; }
.ed-lab.lanes .ln { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ed-lab.lanes .ln:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.2); }
.ed-lab.lanes .ln:last-child { border-bottom: 0; }
.ed-lab.lanes .ln b { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: 0; }
.ed-lab.lanes .ln small { font-size: 11px; color: var(--dim2); }
.ed-area { position: absolute; left: 116px; right: 0; top: 0; bottom: 0; overflow: hidden; }
.ed-cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; cursor: crosshair; }
.ed-ovrow { position: absolute; left: 0; right: 0; overflow: hidden; z-index: 2; }
.ed-track { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; }
/* the parts strip */
.ed-secrow { pointer-events: none; z-index: 4; }
.ed-secb { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: 6px; overflow: hidden; white-space: nowrap; pointer-events: auto; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 42%, #150f20), color-mix(in srgb, var(--gc) 22%, #0d0a15)); border: 1px solid color-mix(in srgb, var(--gc) 75%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .78; transition: opacity .15s; }
.ed-secb:hover, .ed-secb.cur { opacity: 1; }
.ed-secb.cur { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 10px color-mix(in srgb, var(--gc) 45%, transparent); }
.ed-secb .lab { display: inline-flex; align-items: center; gap: 6px; min-width: 0; will-change: transform; }
.ed-secb em { font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: none; font-size: 11px; color: rgba(255,255,255,.72); border-bottom: 1px dotted rgba(255,255,255,.45); }
.ed-secb .rep { padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.35); font-size: 11px; }
.ed-secb .rep.phone { background: var(--gold); color: #2a1400; }
.ed-secb .rep.phone.other { background: var(--violet); color: #1a0a2e; }
.ed-secb.conf { opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 2px var(--gold), 0 0 14px rgba(255,198,94,.6); }
/* the bar ruler and the loop band */
.ed-ruler { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.ed-bars { position: absolute; inset: 0; pointer-events: none; }
.ed-bn { position: absolute; top: 3px; padding-left: 4px; font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 12px; line-height: 1; color: rgba(255,247,236,.72); pointer-events: none; white-space: nowrap; }
.ed-bn.part { color: var(--white); }
.ed-loopband { position: absolute; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,198,94,.42), rgba(255,198,94,.14)); border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); box-shadow: 0 0 14px rgba(255,198,94,.35); }
.ed-loopband b { position: absolute; right: 4px; bottom: 2px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #2a1400; background: var(--gold); border-radius: 4px; padding: 1px 4px; line-height: 1.2; }
/* a guide row with nothing to show says why */
.ed-msgs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ed-msg { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-style: italic; color: var(--dim2); white-space: nowrap; overflow: hidden; }
/* the words on the timeline's own dark, so the playhead line passes behind them rather than through them */
.ed-msg > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; border-radius: 5px; background: #14101f; line-height: 1.35; }
/* the playhead */
.ed-play { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; z-index: 3; pointer-events: none; background: var(--mint); box-shadow: 0 0 10px rgba(112,245,203,.9), 0 0 2px #fff; will-change: transform; }
.ed-play::before { content: ''; position: absolute; left: -6px; top: 18px; border: 7px solid transparent; border-top: 9px solid var(--mint); filter: drop-shadow(0 0 6px rgba(112,245,203,.8)); }
/* the thin scrollbar under the lanes (the view's place in the song; the overview does the same) */
.ed-hscroll { flex: none; height: 10px; margin-left: 116px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) rgba(0,0,0,.25); background: rgba(0,0,0,.25); }
.ed-hscroll::-webkit-scrollbar { height: 9px; } .ed-hscroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 9px; } .ed-hscroll::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
.ed-hs-in { height: 1px; }

/* ---------- the inspector: one row, one height, whatever is selected (the lanes above never move; inspector.js fit()
   gives up the least needed parts when a row does not fit) ---------- */
.ed-insp { flex: none; display: flex; align-items: center; gap: 6px 12px; height: 56px; min-height: 0; padding: 5px 12px; flex-wrap: nowrap; overflow: hidden; }
.ed-insp > * { flex: none; }
.ed-insp > .spacer { flex: 1 1 0; min-width: 0; }
.ed-insp .hint { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--dim); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ed-insp .hint b { color: var(--white); }
.ed-insp .hint kbd { margin: 0 1px; }
.ed-f { display: flex; flex-direction: column; gap: 3px; flex: none; }
.ed-f > span { font-stretch: 75%; font-weight: 800; font-size: 11px; line-height: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); white-space: nowrap; }
.ed-lanebtns { display: flex; gap: 4px; }
.ed-lb { width: 26px; height: 28px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 12px; background: rgba(0,0,0,.3); }
.ed-lb.on { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); color: #140a12; border-color: transparent; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.ed-stepper { display: flex; align-items: center; gap: 3px; }
.ed-stepper .ed-in { width: 62px; text-align: center; }
.ed-stepper button { width: 24px; height: 28px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.14); color: var(--dim); display: grid; place-items: center; }
.ed-stepper button:hover:not(:disabled) { color: var(--white); }
.ed-stepper button svg { width: 12px; height: 12px; }
.ed-stepper button:disabled, .ed-insp .ed-in:disabled { opacity: .35; }
.ed-sc { height: 28px; padding: 0 8px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ed-sc:hover { color: var(--white); }
.ed-sc.on { color: var(--white); border-color: rgba(127,243,255,.65); background: rgba(61,139,255,.16); }
.ed-insp .multi { min-width: 0; max-width: 250px; }
.ed-insp .multi b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 18px; line-height: 20px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ed-insp .multi span { display: block; font-size: 11px; line-height: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-insp-acts { display: flex; gap: 6px; flex-wrap: nowrap; }
.ed-insp-acts .glass.sm { min-height: 30px; gap: 6px; }
.ed-insp-acts .glass.sm svg { width: 13px; height: 13px; }
.ed-insp .ed-sc { display: inline-flex; align-items: center; gap: 0; }
.ed-insp-tag { align-self: flex-end; margin-bottom: 3px; }

/* ---------- keyboard shortcuts ---------- */
.ed-legend { flex: none; padding: 5px 10px; }
.ed-legend .hd { display: flex; align-items: center; gap: 8px; width: 100%; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ed-legend .hd:hover { color: var(--white); }
.ed-legend .hd svg { width: 12px; height: 12px; }
.ed-legend .hd em { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: none; font-stretch: 100%; color: var(--dim2); }
.ed-keys { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 7px; padding-bottom: 2px; }
.ed-k { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); white-space: nowrap; }