/* v1w.css — Spotsheet v1 workstation window. Ported from Claude Design
   DH #576 (CD project 019e3049, v1w/v1w.css) 2026-07-26.

   PORT NOTES
   - The design's harness (.h-*, .w-desk, .w-daw slab, .h-notes writeup) is
     showcase scaffolding and is deliberately NOT ported.
   - .w-win is a floating mock in the design; here it fills the real app
     window, so the shadow/radius/width-transition come off and it becomes a
     flex column at 100%.
   - Amendment 1 (founder, 2026-07-26): NO picture in this window. The picture
     pane rules are kept only as an explicit `display:none` tombstone so a
     future agent sees the decision rather than wondering where it went.
   - Rides the existing Spotsheet tokens (--teal, --tc-green, --st-*, --cat-*,
     --as-*, --mono). No new token is introduced. */

.w-app {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg-app);
  font-family: var(--ui); color: var(--fg);
  user-select: none;
  overflow: hidden;
}
.w-app .w-win {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-app);
  position: relative;
  overflow: hidden;
}

/* title bar — the window's title IS the clock */
.w-title{height:36px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 10px 0 11px;background:var(--titlebar-grad,linear-gradient(180deg,#34373d,#2c2f34));border-bottom:1px solid var(--line);position:relative}
.w-mk{width:19px;height:19px;border-radius:4px;flex-shrink:0;background:var(--mark-grad,linear-gradient(150deg,#2a2d33,#1a1c20));border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7.5px;font-weight:700;color:var(--fg-strong);position:relative;overflow:hidden}
.w-mk::after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(53,197,199,.18),transparent 60%)}
.w-wm{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);flex-shrink:0}
.w-build{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--fg-dim);border:1px solid var(--line);border-radius:2px;padding:1px 5px;flex-shrink:0}
.w-drop{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 6px 0 8px;border:1px solid transparent;border-radius:var(--r-2);background:transparent;cursor:pointer;font-family:var(--ui);font-size:11.5px;color:var(--fg-strong);min-width:0;flex-shrink:1}
.w-drop:hover{background:var(--bg-sub);border-color:var(--line)}
.w-drop .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-drop .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--fg-dim);flex-shrink:0}
.w-drop svg{color:var(--fg-dim);flex-shrink:0}
.w-sp{flex:1;min-width:6px}
/* v3 seam: presence lands here */
.w-slot{width:0;height:22px;flex-shrink:0;transition:width .2s}

/* master clock — a mirror of Pro Tools' timecode, read-only */
.w-clock{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:0 9px;height:24px;border-radius:var(--r-2);background:var(--bg-deep);border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);cursor:default}
.w-clock .t{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.055em;color:var(--tc-green);font-feature-settings:"tnum" 1,"zero" 1}
.w-clock .k{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.w-clock.rolling .t{color:#9dc4a6}
.w-clock.dead .t{color:var(--fg-dim)}
.w-roll{font-family:var(--mono);font-size:7.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-dim);border-left:1px solid var(--line);padding-left:8px;display:inline-flex;align-items:center;gap:5px}
.w-roll::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fg-faint)}
.w-roll.live{color:var(--teal)}
.w-roll.live::before{background:var(--teal);box-shadow:0 0 0 3px var(--teal-glow);animation:w-pulse 1.6s ease-in-out infinite}
.w-roll.off{color:var(--fg-faint)}

/* PT session chip */
.w-pt{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 8px;flex-shrink:0;border-radius:var(--r-2);border:1px solid var(--line);background:var(--bg-deep);cursor:pointer;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-mute);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.w-pt:hover{border-color:var(--line-strong);color:var(--fg)}
.w-pt .d{width:6px;height:6px;border-radius:50%;background:var(--fg-faint);flex-shrink:0}
.w-pt .nm{font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;text-transform:none;color:var(--fg-dim);max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-pt.ok .d{background:var(--st-resolved)}
.w-pt.ok{color:var(--fg-mute)}
.w-pt.nolink{border-color:rgba(193,147,85,.42);color:var(--st-flagged);background:var(--st-flagged-bg)}
.w-pt.nolink .d{background:var(--st-flagged)}
.w-pt.bad{border-color:rgba(180,104,104,.5);color:var(--st-danger);background:var(--st-danger-bg)}
.w-pt.bad .d{background:var(--st-danger);animation:w-pulse 1.6s ease-in-out infinite}
.w-pt.down{border-style:dashed;color:var(--fg-dim)}
.w-pt.driving .d{background:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}
@keyframes w-pulse{50%{opacity:.4}}
.w-av{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;color:rgba(0,0,0,.68);background:var(--as-teal);cursor:pointer}

/* bands under the title bar */
.w-band{flex-shrink:0;display:flex;align-items:center;gap:10px;min-height:28px;padding:5px 12px;font-size:11.5px;border-bottom:1px solid var(--line);line-height:1.35}
.w-band .k{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;flex-shrink:0}
.w-band .sp{flex:1}
.w-band.mismatch{background:rgba(180,104,104,.11);border-bottom-color:rgba(180,104,104,.32);color:var(--fg)}
.w-band.mismatch .k{color:var(--st-danger)}
.w-band.mismatch b{color:var(--fg-strong);font-weight:500}
.w-band.warn{background:rgba(193,147,85,.09);border-bottom-color:rgba(193,147,85,.28)}
.w-band.warn .k{color:var(--st-flagged)}
.w-band.sync{background:var(--bg-sub);color:var(--fg-mute)}
.w-band.sync .k{color:var(--teal)}
.w-band.ctx{background:rgba(193,147,85,.07);border-bottom-color:rgba(193,147,85,.22);color:var(--fg-mute)}
.w-band.ctx .k{color:var(--cue-amber)}
.w-band .mono{font-family:var(--mono);font-size:10px;color:var(--fg-mute)}
.w-prog{flex:1;max-width:220px;height:3px;border-radius:2px;background:var(--bg-deep);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.w-prog i{display:block;height:100%;background:var(--teal);transition:width .18s linear}

/* toolbar */
.w-tb{flex-shrink:0;display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;background:var(--bg-app);border-bottom:1px solid var(--line);overflow:hidden}
.w-tb-l{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;overflow:hidden}
.w-tb-r{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding-left:7px}
.w-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-2);background:var(--btn-grad);color:var(--fg-mute);font-family:var(--ui);font-size:11px;cursor:pointer;white-space:nowrap;box-shadow:var(--inset-panel)}
.w-chip:hover{background:var(--btn-grad-h);color:var(--fg)}
.w-chip.on{border-color:var(--teal-line);color:var(--teal);background:var(--teal-bg);box-shadow:none}
.w-chip.mono{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.w-chip .n{font-family:var(--mono);font-size:9px;color:var(--fg-faint)}
.w-chip.on .n{color:var(--teal)}
.w-chip.prim{border-color:var(--teal-line);color:var(--teal)}
.w-chip.prim:hover{background:linear-gradient(180deg,rgba(53,197,199,.12),rgba(53,197,199,.04))}
.w-chip[disabled]{color:var(--fg-faint);border-color:var(--line-soft);background:transparent;cursor:not-allowed;box-shadow:none}
.w-chip svg{flex-shrink:0}
.w-div{width:1px;height:16px;background:var(--line);flex-shrink:0;margin:0 2px}
.w-search{display:flex;align-items:center;gap:6px;height:22px;flex:0 1 190px;min-width:138px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-deep);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.w-search input{border:0;background:transparent;outline:none;color:var(--fg);font-family:var(--ui);font-size:11px;width:100%;min-width:0}
.w-search input::placeholder{color:var(--fg-faint)}
.w-search svg{color:var(--fg-dim);flex-shrink:0}
.w-sw{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);cursor:pointer;flex-shrink:0;white-space:nowrap}
.w-sw i{width:24px;height:13px;border-radius:7px;background:var(--bg-deep);border:1px solid var(--line);position:relative;transition:background .15s,border-color .15s;flex-shrink:0}
.w-sw i::after{content:'';position:absolute;top:1px;left:1px;width:9px;height:9px;border-radius:50%;background:var(--fg-dim);transition:transform .15s,background .15s}
.w-sw.on{color:var(--teal)}
.w-sw.on i{background:var(--teal-bg);border-color:var(--teal-line)}
.w-sw.on i::after{transform:translateX(11px);background:var(--teal)}

/* ── list ──────────────────────────────────────────────────────── */
.w-body{flex:1;min-height:0;display:flex;overflow:hidden;position:relative}
.w-listpane{flex:1;min-width:0;display:flex;flex-direction:column;container-type:inline-size;background:var(--bg-app);position:relative}
.w-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.w-scroll::-webkit-scrollbar{width:9px}
.w-scroll::-webkit-scrollbar-thumb{background:#4a4e55;border-radius:5px;border:2px solid var(--bg-app)}
.w-scroll::-webkit-scrollbar-track{background:transparent}
.w-grp{display:flex;align-items:center;gap:9px;height:22px;padding:0 10px;position:sticky;top:0;z-index:3;background:#2b2e32;border-bottom:1px solid var(--line-soft);border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.w-grp .n{color:var(--fg-faint);margin-left:auto}
.w-row{display:flex;align-items:center;gap:8px;min-height:29px;padding:0 10px 0 9px;border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative;background:var(--bg-row)}
.w-row:hover{background:var(--bg-row-hover)}
.w-row.sel{background:var(--bg-row-sel)}
.w-row.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal)}
.w-row.cur::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--teal);opacity:.55}
.w-row.done .bd{color:var(--fg-dim)}
.w-ck{width:12px;height:12px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:2px;background:var(--bg-deep);display:inline-flex;align-items:center;justify-content:center;color:transparent;cursor:pointer}
.w-ck.on{background:var(--teal-bg);border-color:var(--teal-line);color:var(--teal)}
.w-res{width:14px;height:14px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:transparent;background:transparent;cursor:pointer}
.w-res:hover{border-color:var(--fg-mute)}
.w-res.on{border-color:var(--st-resolved);color:var(--st-resolved);background:var(--st-resolved-bg)}
.w-tc{font-family:var(--mono);font-size:10px;font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:.02em;color:var(--tc-green);flex-shrink:0;width:74px;text-align:left}
.w-tc:hover{color:#a5cfae}
.w-tc.weak{text-decoration:underline dashed;text-underline-offset:3px;text-decoration-color:var(--st-flagged);color:#a08a6a}
.w-cat{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;width:56px}
.w-cat i{width:3px;height:10px;border-radius:1px;flex-shrink:0}
.w-bd{flex:1;min-width:0;font-size:11.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.w-cov{display:flex;gap:2px;flex-shrink:0;width:22px}
.w-cov i{width:6px;height:7px;border-radius:1px;background:#3d4046}
.w-cov.partial i:nth-child(-n+1),.w-cov.covered i{background:var(--st-resolved)}
.w-cov.partial i:nth-child(2){background:#4d5259}
.w-pill{font-family:var(--ui);font-size:8.5px;text-transform:uppercase;letter-spacing:.1em;padding:0 5px;height:16px;border-radius:2px;display:inline-flex;align-items:center;border:1px solid currentColor;flex-shrink:0;width:56px;justify-content:center}
.w-pill.open{color:var(--st-open);border-color:#4c5057}
.w-pill.resolved{color:var(--st-resolved);background:var(--st-resolved-bg)}
.w-pill.flagged{color:var(--st-flagged);background:var(--st-flagged-bg)}
.w-cm{font-family:var(--mono);font-size:9px;color:var(--fg-dim);display:inline-flex;align-items:center;gap:3px;flex-shrink:0;width:24px}
.w-as{width:17px;height:17px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:600;color:rgba(0,0,0,.68)}
.w-as.none{background:transparent;border:1px dashed var(--line-strong)}
.w-cost{display:flex;gap:2px;flex-shrink:0;width:20px}
.w-cost i{width:4px;height:4px;border-radius:1px;background:#3d4046}
.w-cost i.on{background:var(--fg-dim)}
.w-as.teal{background:var(--as-teal)}.w-as.amber{background:var(--as-amber)}.w-as.lilac{background:var(--as-lilac)}.w-as.sky{background:var(--as-sky)}.w-as.sage{background:var(--as-sage)}.w-as.rose{background:var(--as-rose)}.w-as.clay{background:var(--as-clay)}
@container (max-width:640px){.w-row .c-cost{display:none}.w-pill{width:auto;padding:0 4px}}
@container (max-width:560px){.w-row .c-cm,.w-row .c-pill{display:none}}
@container (max-width:470px){.w-row .c-cat span{display:none}.w-cat{width:auto}.w-row .c-cov{display:none}}
@container (max-width:380px){.w-row .c-as{display:none}}

/* capture sheet — the one modal, scoped to the window */
.w-capbd{position:absolute;inset:0;z-index:60;background:rgba(10,12,14,.66);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);display:flex;align-items:flex-start;justify-content:center;padding:92px 24px 24px;animation:w-fade .13s ease-out}
@keyframes w-fade{from{opacity:0}to{opacity:1}}
.w-cap{width:min(452px,100%);background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:var(--r-sheet);box-shadow:var(--float);display:flex;flex-direction:column;overflow:hidden;animation:w-rise .17s cubic-bezier(.2,.9,.3,1)}
@keyframes w-rise{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.w-cap-h{flex-shrink:0;display:flex;align-items:center;gap:10px;height:34px;padding:0 8px 0 12px;border-bottom:1px solid var(--line-soft);background:var(--bg-sub)}
.w-cap-h .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.w-cap-h .tc{font-family:var(--mono);font-size:14px;letter-spacing:.05em;color:var(--tc-green);font-feature-settings:"tnum" 1,"zero" 1}
.w-cap-h .at{font-size:10.5px;color:var(--fg-dim)}
.w-cap-b{padding:12px;display:flex;flex-direction:column;gap:10px}
.w-ta.cap{font-size:14px;line-height:1.5;min-height:76px}
.w-cap-row{display:flex;align-items:center;gap:11px}
.w-cap-row>.k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);width:26px;flex-shrink:0}
.w-cap-f{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line-soft);background:var(--bg-sub)}
.w-cap-f .note{font-size:10.5px;color:var(--fg-dim)}
.w-cap-f .note b{color:var(--fg-mute);font-family:var(--mono);font-size:10px;font-weight:400}

/* live UCS tag */
.w-ucs{display:flex;align-items:center;gap:8px;min-height:26px;padding:0 8px;border:1px dashed var(--line-strong);border-radius:var(--r-2);background:var(--bg-deep);transition:border-color .18s,background .18s}
.w-ucs.hit{border-style:solid;border-color:var(--teal-line);background:var(--teal-bg)}
.w-ucs.tight{margin:-4px 0 12px;min-height:22px}
.w-ucs .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);flex-shrink:0}
.w-ucs.hit .k{color:var(--teal)}
.w-ucs .id{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:.02em;flex-shrink:0}
.w-ucs .path{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-ucs .path i{color:var(--fg-faint);font-style:normal}
.w-ucs .from{font-size:10px;color:var(--fg-dim);flex-shrink:0}
.w-ucs .none{font-size:11px;color:var(--fg-dim)}
.w-ucs .conf{display:flex;gap:2px;flex-shrink:0}
.w-ucs .conf i{width:4px;height:4px;border-radius:1px;background:#3f434a}
.w-ucs .conf.w2 i:nth-child(-n+2),.w-ucs .conf.w3 i{background:var(--teal)}

/* status bar */
.w-status{flex-shrink:0;height:24px;display:flex;align-items:center;gap:12px;padding:0 10px;background:var(--bg-panel);border-top:1px solid var(--line);font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-dim);overflow:hidden;white-space:nowrap}
.w-status b{color:var(--fg-mute);font-weight:400}
.w-status .sp{flex:1}
.w-status a{color:var(--fg-dim);text-decoration:none;border-bottom:1px dotted var(--line-strong);cursor:pointer}
.w-status a:hover{color:var(--teal);border-bottom-color:var(--teal-line)}

/* ── inspector ─────────────────────────────────────────────────── */
.w-insp{width:340px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-panel);border-left:1px solid var(--line);min-height:0}
.w-insp.overlay{position:absolute;right:0;top:0;bottom:0;z-index:20;box-shadow:-18px 0 40px rgba(0,0,0,.5);width:min(320px,92%)}
.w-ih{flex-shrink:0;display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 11px;border-bottom:1px solid var(--line-soft)}
.w-ih .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.w-ib{flex:1;min-height:0;overflow-y:auto;padding:11px}
.w-ib::-webkit-scrollbar{width:8px}
.w-ib::-webkit-scrollbar-thumb{background:#464a51;border-radius:4px;border:2px solid var(--bg-panel)}
.w-fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.w-fld>.k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
.w-ta{background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-2);color:var(--fg);font-family:var(--ui);font-size:12.5px;line-height:1.5;padding:9px 10px;outline:none;resize:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.4);width:100%}
.w-ta:focus{border-color:var(--teal-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 3px var(--teal-glow)}
.w-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 11px;align-items:center;font-size:11.5px}
.w-meta .k{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.w-seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--bg-deep)}
.w-seg2 button{border:0;background:transparent;cursor:pointer;height:21px;padding:0 8px;color:var(--fg-dim);font-family:var(--ui);font-size:10px;letter-spacing:.02em}
.w-seg2 button+button{border-left:1px solid var(--line)}
.w-seg2 button.on{background:var(--bg-sub);color:var(--fg-strong)}
.w-seg2 button.on.res{color:var(--st-resolved)}
.w-seg2 button.on.flg{color:var(--st-flagged)}
.w-cmt{display:flex;gap:8px;padding:9px 0;border-top:1px solid var(--line-soft)}
.w-cmt .bd{font-size:11.5px;line-height:1.5;color:var(--fg-mute);min-width:0}
.w-cmt .who{font-size:10.5px;color:var(--fg);font-weight:500;margin-bottom:2px;display:flex;gap:7px;align-items:baseline}
.w-cmt .who time{font-family:var(--mono);font-size:8.5px;color:var(--fg-faint)}

/* AMENDMENT 1 (founder 2026-07-26) — picture lives in Pro Tools, never here.
   Tombstone, not an oversight: the design's picture pane is retired. */
.w-picpane,.w-pic,.w-drop-z{display:none !important}

/* the coverage strip is the only spatial object left in the window */
.w-strip{flex-shrink:0;height:18px;position:relative;background:var(--bg-deep);border-bottom:1px solid var(--line);overflow:hidden;cursor:pointer}
.w-strip .scn{position:absolute;top:0;bottom:0;width:1px;background:#3b3f45}
.w-strip .cue{position:absolute;top:4px;height:10px;width:1.5px;background:var(--cue-amber);opacity:.6;border-radius:1px}
.w-strip .cue.done{background:var(--st-resolved);opacity:.5}
.w-strip .cue.flag{background:var(--st-flagged);opacity:.85}
.w-strip .cue.sel{background:var(--teal);opacity:1;top:2px;height:14px;width:2px}
.w-strip .ph{position:absolute;top:0;bottom:0;width:1px;background:var(--teal);box-shadow:0 0 6px var(--teal-glow)}

/* quick-cue palette */
.w-pal{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:6px 10px;background:var(--bg-panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.w-pal::-webkit-scrollbar{display:none}
.w-pal-k{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);flex-shrink:0;padding-right:3px}
.w-q{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-sub);color:var(--fg-mute);font-size:10.5px;cursor:pointer}
.w-q:hover{border-color:var(--line-strong);color:var(--fg)}
.w-q kbd{font-family:var(--mono);font-size:8px;color:var(--fg-faint)}
.w-q.hit{border-color:var(--teal-line);color:var(--teal);background:var(--teal-bg)}
.w-kbd{font-family:var(--mono);font-size:9px;border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:1px 4px;color:var(--fg-mute)}

/* the one teal control */
.w-spot{height:22px;padding:0 10px;border:1px solid var(--teal-line);border-radius:var(--r-2);background:linear-gradient(180deg,rgba(53,197,199,.14),rgba(53,197,199,.05));color:var(--teal);font-family:var(--ui);font-size:11px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.w-spot:hover{background:linear-gradient(180deg,rgba(53,197,199,.22),rgba(53,197,199,.08))}
.w-spot kbd{font-family:var(--mono);font-size:8.5px;border:1px solid var(--teal-line);border-radius:2px;padding:0 3px;color:var(--teal);opacity:.8}
.w-spot[disabled]{border-color:var(--line-soft);background:transparent;color:var(--fg-faint);cursor:not-allowed}
.w-spot[disabled] kbd{border-color:var(--line-soft);color:var(--fg-faint)}

/* sheet summary — the permanent column with nothing selected */
.w-sum .big{display:flex;align-items:baseline;gap:8px}
.w-sum .big b{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--fg-strong);font-feature-settings:"tnum" 1}
.w-sum .big span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--fg-dim)}
.w-sum .bar{height:4px;border-radius:2px;background:var(--bg-deep);margin-top:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.w-sum .bar i{display:block;height:100%;background:var(--st-resolved)}
.w-catrow{display:flex;align-items:center;gap:9px;padding:4px 0}
.w-catrow .bar{flex:1;height:4px;border-radius:2px;background:var(--bg-deep);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.w-catrow .bar i{display:block;height:100%;opacity:.75}
.w-catrow .n{font-family:var(--mono);font-size:9px;color:var(--fg-dim);width:34px;text-align:right}
.w-next{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:100%;text-align:left;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-2);padding:8px 10px;cursor:pointer}
.w-next:hover{border-color:var(--line-strong)}
.w-next .b{font-size:11.5px;color:var(--fg-mute);line-height:1.45}

/* ── ruler shape ───────────────────────────────────────────────── */
.w-ruler{flex-shrink:0;background:var(--bg-deep);border-bottom:1px solid var(--line);position:relative;user-select:none;cursor:crosshair}
.w-ruler .ticks{position:absolute;left:0;right:0;top:0;height:15px;border-bottom:1px solid var(--line-soft)}
.w-ruler .tk{position:absolute;top:8px;bottom:0;width:1px;background:#41454b}
.w-ruler .tk.maj{top:3px;background:#565b62}
.w-ruler .tl{position:absolute;top:2px;font-family:var(--mono);font-size:8px;color:var(--fg-dim);transform:translateX(3px);letter-spacing:.04em;white-space:nowrap}
.w-ruler .lane{position:absolute;left:0;right:0;top:15px;bottom:12px}
.w-ruler .mk{position:absolute;top:5px;width:2px;height:15px;background:var(--cue-amber);border-radius:1px;cursor:pointer}
.w-ruler .mk.done{background:var(--st-resolved);opacity:.75}
.w-ruler .mk.flag{background:var(--st-flagged)}
.w-ruler .mk.weak{background:transparent;border-left:2px dashed var(--st-flagged)}
.w-ruler .mk.sel{height:23px;top:1px;width:3px;background:var(--teal);box-shadow:0 0 7px var(--teal-glow);z-index:3}
.w-ruler .ph{position:absolute;top:0;bottom:0;width:1px;background:var(--teal);z-index:4;pointer-events:none}
.w-ruler .ph::before{content:'';position:absolute;top:0;left:-4px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:6px solid var(--teal)}
.w-ruler .covbar{position:absolute;left:0;right:0;bottom:0;height:11px;background:#1c1e21;border-top:1px solid var(--line-soft)}
.w-ruler .covbar .s{position:absolute;top:3px;height:5px;border-radius:1px;background:var(--st-resolved);opacity:.7}
.w-ruler .scene{position:absolute;bottom:0;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);border-left:1px solid var(--line);padding-left:4px;white-space:nowrap;overflow:hidden}
.w-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--bg-panel)}
.w-seg button{border:0;background:transparent;cursor:pointer;height:22px;padding:0 9px;color:var(--fg-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.w-seg button+button{border-left:1px solid var(--line)}
.w-seg button:hover{color:var(--fg)}
.w-seg button.on{background:var(--bg-sub);color:var(--fg-strong)}

/* ── focus / pass shape ────────────────────────────────────────── */
.w-rail{width:186px;flex-shrink:0;transition:width .2s;display:flex;flex-direction:column;background:var(--bg-panel);border-right:1px solid var(--line);min-height:0}
.w-rail.thin{width:112px}
.w-rail.thin .w-rr .b{display:none}
.w-rail .rh{flex-shrink:0;height:24px;display:flex;align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.w-rr{display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.14);position:relative}
.w-rr:hover{background:var(--bg-row-hover)}
.w-rr.sel{background:var(--bg-row-sel)}
.w-rr.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal)}
.w-rr .t{font-family:var(--mono);font-size:9.5px;color:var(--tc-green);font-feature-settings:"tnum" 1;flex-shrink:0}
.w-rr .b{flex:1;min-width:0;font-size:10.5px;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-rr.sel .b{color:var(--fg-strong)}
.w-rr .dt{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:#474b52}
.w-rr .dt.resolved{background:var(--st-resolved)}.w-rr .dt.flagged{background:var(--st-flagged)}
.w-focus{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--bg-app)}
.w-fmain{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:22px 30px;overflow-y:auto}
.w-fhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w-ftc{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:.04em;color:var(--tc-green);font-feature-settings:"tnum" 1,"zero" 1;line-height:1}
.w-ftc.weak{text-decoration:underline dashed;text-underline-offset:7px;text-decoration-color:var(--st-flagged);color:#b09a78}
.w-fbody{font-size:19px;line-height:1.45;color:var(--fg-strong);font-weight:400;letter-spacing:-.005em;max-width:62ch;text-wrap:pretty;background:transparent;border:0;outline:none;font-family:var(--ui);resize:none;width:100%;padding:0}
.w-fbody:focus{color:#fff}
.w-fmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-mute)}
.w-fkeys{flex-shrink:0;display:flex;align-items:center;gap:14px;height:30px;padding:0 12px;background:var(--bg-panel);border-top:1px solid var(--line);font-size:10.5px;color:var(--fg-dim);overflow:hidden;white-space:nowrap}
.w-fkeys kbd{font-family:var(--mono);font-size:8.5px;background:var(--bg-deep);border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:1px 4px;color:var(--fg-mute);margin-right:5px}

/* split divider */
.w-vdiv{width:5px;flex-shrink:0;cursor:col-resize;background:var(--bg-app);border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.w-vdiv:hover,.w-vdiv.drag{background:var(--teal-bg)}
.w-vdiv::after{content:'';position:absolute;left:1px;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--line-strong)}

/* empty */
.w-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center}
.w-empty .t{font-size:13.5px;color:var(--fg-mute)}
.w-empty .s{font-size:11.5px;color:var(--fg-dim);max-width:38ch;line-height:1.6;text-wrap:pretty}
.w-empty .r{display:flex;gap:8px;margin-top:4px}

/* key sheet overlay */
.w-ovl{position:absolute;inset:0;z-index:50;background:rgba(10,12,14,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:26px}
.w-sheet{background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:var(--r-sheet);box-shadow:var(--float);padding:18px 20px;min-width:300px;max-width:440px}
.w-sheet h4{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 13px}
.w-sheet .kl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline}
.w-sheet .kl kbd{font-family:var(--mono);font-size:9.5px;background:var(--bg-deep);border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:2px 6px;color:var(--fg);justify-self:start}
.w-sheet .kl span{font-size:11.5px;color:var(--fg-mute)}
.w-sheet .cl{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:10.5px;color:var(--fg-faint)}

/* popovers */
.w-pop{position:absolute;z-index:45;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--float);padding:11px 12px;min-width:250px}
.w-pop .ph{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:9px}
.w-pop .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:11px;align-items:baseline;margin-bottom:11px}
.w-pop .kv .k{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.w-pop .kv .v{font-family:var(--mono);font-size:10px;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.w-pop .kv .v.bad{color:var(--st-danger)}
.w-pop .kv .v.ok{color:var(--fg-mute)}
.w-pop .row{display:flex;gap:6px;flex-wrap:wrap}
.w-pop .note{font-size:10.5px;color:var(--fg-dim);line-height:1.5;margin-bottom:10px;text-wrap:pretty}