/* schedule module — Schedule (cells / people / jobs / day plan × time) and Gantt (one job). Owned by js/schedule.js; uses css/app.css variables only.
   Layout: .tl is a fixed-height viewport; header, left labels and lanes are absolutely positioned and redrawn per animation frame (rows outside the view are not rendered). */
/* Dawg Walk (2026-09-25): the timeline's own colours are tokens built from the app variables. The :root values are Classic (the previous look, unchanged);
   :root[data-skin="dawgwalk"] re-points them — ink today line, neutral lunch band, plain bold current day (design/Final - Dawg Walk (light|dark).png). Overtime stays --ot / --ot-l. */
:root{--tl-today:var(--red); --tl-lunch:var(--teal); --tl-cur-bg:var(--indigo-l); --tl-cur-ink:var(--indigo); --tl-bar-ink:#fff; --tl-bar-ink2:#1b1b1b; --tl-hc-ink:var(--ink3)}
:root[data-skin="dawgwalk"]{--tl-today:var(--ink); --tl-lunch:var(--ink3); --tl-cur-bg:transparent; --tl-cur-ink:var(--ink); --tl-bar-ink:var(--ink); --tl-bar-ink2:var(--ink); --tl-hc-ink:var(--ink2);   /* header labels ≥ 4.5:1 (QA #6) */
  --tl-p0:var(--tl-p0-light,var(--red)); --tl-p1:var(--tl-p1-light,var(--amber)); --tl-p2:var(--tl-p2-light,var(--blue)); --tl-p3:var(--tl-p3-light,var(--grey))}   /* --tl-pN-light|dark: js/schedule.js dwPrioVars (priority palette) */
:root[data-skin="dawgwalk"][data-theme=dark]{--tl-bar-ink:var(--bg); --tl-bar-ink2:var(--bg);   /* the muted area fills are light in dark mode: near-black labels in both modes, as in the design */
  --tl-p0:var(--tl-p0-dark,var(--red)); --tl-p1:var(--tl-p1-dark,var(--amber)); --tl-p2:var(--tl-p2-dark,var(--blue)); --tl-p3:var(--tl-p3-dark,var(--grey))}
.rg-tools{margin:0 0 6px;flex-wrap:wrap;gap:8px} .rg-tools label{display:inline-flex;align-items:center;gap:6px}
.rg-tools .seg button{padding:5px 10px}
.rg-help{margin:0 0 8px;line-height:1.5;max-width:1500px} .rg-help b{color:var(--ink2)}
.rg-jobhead{margin:6px 0 4px;flex-wrap:wrap} .rg-jobhead b{color:var(--ink);font-size:15px}
.tl-zoom{display:inline-flex;align-items:center;gap:4px} .tl-zoom input[type=range]{width:130px;accent-color:var(--indigo)} .tl-zoom .btn{padding:3px 9px;min-width:28px} .tl-zl{min-width:44px}
.tl-daynav{align-items:center} .tl-daynav input{border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);padding:3px 4px}
.tl-pick{margin-bottom:6px}

/* viewport */
.sc-page .tl{position:relative;overflow:hidden;min-height:280px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);box-shadow:var(--sh);user-select:none;outline:none;touch-action:none}
.tl-head{position:absolute;top:0;left:0;right:0;height:46px;display:flex;z-index:4;background:var(--paper2,var(--bg));border-bottom:1px solid var(--rule)}
.tl-corner{flex:none;width:300px;display:flex;align-items:center;padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);border-right:1px solid var(--rule);overflow:hidden;white-space:nowrap}
.tl-hdr{position:relative;flex:1;overflow:hidden}
.tl-tier{position:absolute;left:0;right:0;height:23px} .tl-tier.t0{top:0} .tl-tier.t1{top:23px;border-top:1px solid var(--rule)}
.tl-hc{position:absolute;top:0;height:23px;border-left:1px solid var(--rule);padding:3px 5px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--tl-hc-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:16px;box-sizing:border-box}
.tl-hc b{color:var(--ink);font-family:var(--font);font-size:11.5px;margin:0 2px}
.tl-hc.nar{padding:3px 2px 3px 4px;text-overflow:clip} .tl-hc.nar b{margin:0 0 0 1px}   /* v1: day zoom ≈ 36 px a day — "M28" fits without an ellipsis */
.tl-hc.cur{background:var(--tl-cur-bg);color:var(--tl-cur-ink)} .tl-hc.cur b{color:var(--tl-cur-ink)} .tl-hc.we{opacity:.6} :root[data-skin="dawgwalk"] .tl-hc.we{opacity:1} .tl-hc.ot{background:var(--ot-l);color:var(--ot)}
.tl-body{position:absolute;top:46px;left:0;right:0;bottom:0;display:flex}
.tl-left{position:relative;flex:none;width:300px;overflow:hidden;border-right:1px solid var(--rule);background:var(--paper);z-index:3}
.tl-main{position:relative;flex:1;overflow:hidden;cursor:grab}
.sc-page .tl.panning .tl-main,.sc-page .tl.space .tl-main,.sc-page .tl.space .tl-bar{cursor:grabbing} .sc-page .tl.dragging,.sc-page .tl.dragging *{cursor:grabbing!important}
.tl-bg,.tl-rows,.tl-fg{position:absolute;inset:0} .tl-bg{pointer-events:none} .tl-fg{pointer-events:none;z-index:6}
.tl-rows{z-index:2}

/* backdrop */
.tl-shade{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.tl-shade.hol{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--ink) 14%,transparent) 4px 6px)}
.tl-ot{position:absolute;top:0;bottom:0;background:var(--ot-l);border-left:1px dashed color-mix(in srgb,var(--ot) 55%,transparent)} .tl-ot span{position:absolute;top:4px;left:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ot);opacity:.85}
.tl-grid{position:absolute;top:0;bottom:0;width:0;border-left:1px solid color-mix(in srgb,var(--rule) 70%,transparent)} .tl-grid.major{border-left-color:var(--rule)}
.tl-daysep{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--rule)}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--tl-today);z-index:1}
.tl-empty{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:5;background:var(--paper);border:1px dashed var(--rule);border-radius:12px;padding:14px 18px;font-size:13px;color:var(--ink2);text-align:center;max-width:460px;box-shadow:var(--sh);cursor:default}

/* rows and labels */
.tl-row{position:absolute;left:0;right:0;border-bottom:1px solid var(--rule)} .tl-lrow{position:absolute;left:0;right:0;border-bottom:1px solid var(--rule);display:flex;align-items:center;background:var(--paper)}
.tl-row.target,.tl-lrow.target{background:color-mix(in srgb,var(--indigo) 10%,transparent);box-shadow:inset 0 0 0 2px var(--indigo)}
.tl-lrow.tl-cell,.tl-lrow.tl-un{background:var(--paper2,var(--bg))} .tl-lrow.tl-cell.open{box-shadow:inset 3px 0 0 var(--indigo)} .tl-row.tl-un{background:color-mix(in srgb,var(--amber) 6%,transparent)}
.tl-lrow.off .nm{color:var(--ink3);text-decoration:line-through}
.tl-lab{display:flex;align-items:center;gap:6px;width:100%;height:100%;padding:0 6px;overflow:hidden;white-space:nowrap;font-size:12.5px;color:var(--ink);box-sizing:border-box}
.tl-lab .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.tl-sub .tl-lab{padding-left:26px;font-size:12px} .tl-sub .tl-lab .nm{font-weight:600}
.rg-two{display:flex;flex-direction:column;min-width:90px;flex:1 1 auto;line-height:1.25;overflow:hidden} .rg-two .nm,.rg-two .acct{display:block;overflow:hidden;text-overflow:ellipsis} .rg-two .acct{font-size:11px;color:var(--ink3)}
.tl-lab .hrs{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink2)} .tl-lab .pill{flex:none;font-size:10.5px;padding:1px 6px} .tl-lab .dot{flex:none;margin-right:0}
.rg-seq{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink3)}
.rg-cellhdr,.rg-oplbl{cursor:pointer} .rg-cellhdr:hover,.rg-oplbl:hover{background:var(--hover)}
.rg-caret{border:0;background:none;color:var(--ink3);font-size:12px;width:24px;height:24px;cursor:pointer;border-radius:4px;flex:none;padding:0;line-height:1} .rg-caret:hover{background:var(--hover);color:var(--ink)}
.rg-load{margin-left:auto;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink2);flex:none} .rg-load small{color:var(--ink3);font-size:10.5px} .rg-load.warn{color:var(--amber);font-weight:700} .rg-load.bad{color:var(--red);font-weight:700}
.rg-n{flex:none;min-width:22px;text-align:center;padding:0 6px;border-radius:9px;background:var(--grey-l);color:var(--ink2);font-variant-numeric:tabular-nums;font-size:11px} .rg-n.hot{background:var(--amber);color:#2a1d00}
.rg-more{margin-left:2px;border:0;background:none;color:var(--ink3);cursor:pointer;font-size:15px;line-height:1;padding:2px 5px;border-radius:4px;flex:none;opacity:0} .tl-lrow:hover .rg-more{opacity:1} .rg-more:hover{background:var(--hover);color:var(--ink)}
.tl-av{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--indigo-l);color:var(--indigo);font-size:10.5px;font-weight:800} .tl-av.un{background:var(--amber-l);color:var(--amber)}
.tl-off{color:var(--red);font-weight:700}
.tl-chips{display:inline-flex;gap:3px;flex:none;max-width:120px;overflow:hidden;cursor:pointer} .tl-pchip{font-style:normal;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:9px;background:var(--indigo-l);color:var(--indigo);white-space:nowrap} .tl-pchip.add{background:var(--amber-l);color:var(--amber)} .tl-chips:hover .tl-pchip{filter:brightness(.95);box-shadow:0 0 0 1px currentColor}
.tl-detail{position:absolute;left:0;top:0;bottom:0;right:0;padding:8px 12px;background:var(--indigo-xl);overflow:hidden;cursor:default}
.rg-det{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px;font-size:12px;max-width:1100px} .rg-det>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rg-det>div>span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)} .rg-det .wide{grid-column:1/-1;white-space:normal}

/* bars */
.tl-bar{position:absolute;border-radius:4px;cursor:grab;display:flex;align-items:center;padding:0 5px;font-size:11.5px;font-weight:600;color:var(--tl-bar-ink);overflow:hidden;touch-action:none;box-sizing:border-box;z-index:1}
.tl-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;pointer-events:none} .tl-bar em{font-style:normal;font-weight:500;opacity:.85;margin-left:5px}
.tl-bar.tiny span,.tl-bar.thin span{display:none} .tl-bar.tiny{padding:0}
.tl-bar.pr0,.rg-sw.pr0{background:var(--red)} .tl-bar.pr1,.rg-sw.pr1{background:var(--amber);color:#2a1d00} .tl-bar.pr2,.rg-sw.pr2{background:var(--blue)} .tl-bar.pr3,.rg-sw.pr3{background:var(--grey);color:#2a2a2a}
.tl-bar.a-test,.tl-bar.a-other,.tl-bar.a-mat{color:var(--tl-bar-ink2)}
.tl-bar.more{opacity:.55} .tl-bar.done{opacity:.4} .tl-bar.run,.rg-sw.run{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--amber)}
.tl-bar.pin,.rg-sw.pin{box-shadow:inset 3px 0 0 var(--ink)} .tl-bar.run.pin{box-shadow:inset 3px 0 0 var(--ink),0 0 0 2px var(--paper),0 0 0 4px var(--amber)}
/* Dawg Walk: same encoding as Classic (priority in the cell / person / day views), only the colours change — priority bars and legend swatches take the approved priority palette (--tl-p0…3).
   background-color, not the shorthand, so the overtime / past-17:00 overlays (background-image) still show. */
:root[data-skin="dawgwalk"] .tl-bar.pr0,:root[data-skin="dawgwalk"] .rg-sw.pr0{background-color:var(--tl-p0)} :root[data-skin="dawgwalk"] .tl-bar.pr1,:root[data-skin="dawgwalk"] .rg-sw.pr1{background-color:var(--tl-p1)}
:root[data-skin="dawgwalk"] .tl-bar.pr2,:root[data-skin="dawgwalk"] .rg-sw.pr2{background-color:var(--tl-p2)} :root[data-skin="dawgwalk"] .tl-bar.pr3,:root[data-skin="dawgwalk"] .rg-sw.pr3{background-color:var(--tl-p3)}
.tl-bar.otb{background-image:linear-gradient(to right,transparent 70%,color-mix(in srgb,var(--ot) 55%,transparent))}
.tl-bar.over,.rg-sw.over{background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.4) 5px 8px);outline:2px dashed var(--red);outline-offset:-2px}
.tl-bar:hover{filter:brightness(1.07)} .tl-bar.drag-src{opacity:.3}
.tl-rs{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:ew-resize;background:linear-gradient(to right,transparent,rgba(255,255,255,.45))} .tl-bar:not(:hover) .tl-rs{opacity:0}
.tl-ghost{opacity:.88;box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:9;outline:2px solid var(--indigo);outline-offset:1px}
.tl-env{position:absolute;top:3px;bottom:3px;border-radius:6px;background:var(--indigo);opacity:.13;cursor:pointer;z-index:0} .tl-env:hover{opacity:.22}
:root[data-skin="dawgwalk"] .tl-env{opacity:.07} :root[data-skin="dawgwalk"] .tl-env:hover{opacity:.14}   /* Dawg Walk's accent is ink / steel: a lighter job envelope so it does not read as a weekend band */
.tl-act{position:absolute;height:3px;bottom:2px;background:var(--ink);opacity:.7;border-radius:2px;pointer-events:none;z-index:2}
.tl-due{position:absolute;top:2px;bottom:2px;width:0;border-left:2px dashed var(--ink);opacity:.6;pointer-events:none}
.tl-lbl{position:absolute;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink2);pointer-events:none;white-space:nowrap;top:50%;transform:translateY(-50%)}

/* round 5: Unscheduled panel right of the timeline (js/schedule.js unPanelHtml / drawUn / wireUn) — work left by area, search, Ready only, compact list.
   R10: the panel and the timeline viewport are scoped under the page root .sc-page (Cell schedule, Work order Gantt); aside.un, so the Unassigned avatar (.tl-av.un) is not a panel */
.sc-body{display:block} .sc-body.with-un{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:12px;align-items:start} .sc-tl{min-width:0}
.sc-page aside.un{display:flex;flex-direction:column;min-height:280px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);box-shadow:var(--sh);overflow:hidden}
.un-h{display:flex;align-items:center;gap:8px;padding:9px 10px 8px 12px;border-bottom:1px solid var(--rule);background:var(--paper2,var(--bg))} .un-h b{font-size:13.5px}
.un-tot{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap} .un-rdy{color:var(--green);font-weight:600}
.un-sum{padding:8px 12px 6px;border-bottom:1px solid var(--rule)} .un-st{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px} .un-st span{text-transform:none;letter-spacing:0;font-weight:500}
.un-area{display:grid;grid-template-columns:112px minmax(0,1fr) 58px 50px;align-items:center;gap:8px;width:100%;min-height:28px;border:0;background:none;padding:3px 4px;border-radius:6px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;text-align:left}
.un-area:hover{background:var(--hover)} .un-area.on{background:var(--indigo-l);box-shadow:inset 0 0 0 1px var(--indigo)}
.un-an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} .un-an .dot{margin-right:5px}
.un-bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden} .un-bar i{display:block;height:100%;border-radius:4px}
.un-ah{font-variant-numeric:tabular-nums;font-size:11.5px;text-align:right;white-space:nowrap} .un-ad{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink3);text-align:right;white-space:nowrap}
.un-f{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule)} .un-f input:not([type=checkbox]){flex:1;min-width:0;padding:5px 8px;font-size:12.5px}
.un-ro{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;cursor:pointer;color:var(--ink2)}
.un-list{flex:1;overflow:auto;min-height:0}
.un-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--rule2,var(--rule));cursor:grab;touch-action:none;user-select:none}
.un-row:hover{background:var(--hover)} .un-row.dragging{opacity:.45}
.un-pr{grid-row:1/3} .un-pr .pill{font-size:10px;padding:1px 6px}
.un-wo{min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden} .un-wo b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:62%} .un-wo small{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.un-hr{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2);text-align:right}
.un-row .btn{grid-row:1/3;grid-column:4}
.un-meta{grid-column:2/4;display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:var(--ink3);margin-top:1px}
.un-due{font-variant-numeric:tabular-nums;white-space:nowrap} .un-due.late{color:var(--red);font-weight:600}
.un-b{font-size:10.5px;font-weight:600;padding:0 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .un-b.ok{background:var(--green-l);color:color-mix(in srgb,var(--green) 65%,var(--ink))} .un-b.wait{background:var(--amber-l);color:color-mix(in srgb,var(--amber) 55%,var(--ink))}
.un-chip{font-size:11.5px;color:var(--ink2);padding:6px 12px;background:var(--indigo-xl);border-bottom:1px solid var(--rule)}
.un-row.next{background:color-mix(in srgb,var(--green) 9%,var(--paper));box-shadow:inset 4px 0 0 var(--green)} .un-nx{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink,#fff);background:var(--green);border-radius:4px;padding:0 5px}
#unJust .jp{margin:0;border-radius:0;border-width:0 0 1px 0;padding:6px 10px}
.un-none{padding:10px 12px;margin:0}
.un-foot{padding:7px 12px;border-top:1px solid var(--rule);font-size:11px;color:var(--ink3);background:var(--paper2,var(--bg))}
.sc-page .tl.un-drop{box-shadow:0 0 0 2px var(--indigo),var(--sh)}
.tl-chipghost{position:fixed;z-index:99;pointer-events:none;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:7px;font-size:12px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}
@media (max-width:1250px){.sc-body.with-un{grid-template-columns:1fr} .sc-page aside.un{height:auto!important;max-height:520px}}
/* round 5: lunch band (like overtime) at hour zoom and in the Day plan */
.tl-lunch{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tl-lunch) 16%,transparent) 0 4px,color-mix(in srgb,var(--tl-lunch) 6%,transparent) 4px 8px);border-left:1px dashed color-mix(in srgb,var(--tl-lunch) 55%,transparent);border-right:1px dashed color-mix(in srgb,var(--tl-lunch) 55%,transparent)}
:root[data-skin="dawgwalk"] .tl-lunch{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tl-lunch) 32%,transparent) 0 4px,color-mix(in srgb,var(--tl-lunch) 16%,transparent) 4px 8px)}   /* neutral hatch as strong as Classic's teal one, so the 30-min band reads at its full width (QA pass 2); same geometry */
.tl-lunch span{position:absolute;top:4px;left:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tl-lunch);opacity:.9}
.rg-sw.lunch{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tl-lunch) 30%,transparent) 0 3px,transparent 3px 5px);border:1px dashed var(--tl-lunch)}

/* legend swatches, hint, menus */
.rg-legend{margin:8px 0 0;flex-wrap:wrap} .rg-legend i.rg-sw{width:14px;height:12px;display:inline-block} .rg-sw.we{background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--rule)} .rg-sw.hol{background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--ink) 25%,transparent) 3px 5px);border:1px solid var(--rule)} .rg-sw.ot{background:var(--ot-l);border:1px dashed var(--ot)}
.rg-hint{position:fixed;z-index:99;background:var(--ink);color:var(--paper);font-size:12px;font-variant-numeric:tabular-nums;padding:4px 8px;border-radius:6px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2)} .rg-hint.bad{background:var(--red);color:#fff}
.rg-pop{position:absolute;z-index:70;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;min-width:220px;display:flex;flex-direction:column}
.rg-pop button{background:none;border:0;text-align:left;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);border-radius:6px;cursor:pointer;white-space:nowrap} .rg-pop button:hover{background:var(--hover)} .rg-pop button.danger{color:var(--red)} .rg-pop .sep{display:block;height:1px;background:var(--rule);margin:4px 0}
.tl-assign{max-height:60vh;overflow:auto;min-width:240px} .tl-assign .t{font-weight:700;font-size:13px;padding:4px 6px 6px} .tl-assign .t small{display:block;font-weight:500;color:var(--ink3);font-size:11px} .tl-assign label{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:13px;border-radius:6px;cursor:pointer} .tl-assign label:hover{background:var(--hover)} .tl-assign .row{padding:6px 4px 2px} .tl-assign .row .btn{padding:4px 10px;text-align:center}

@media (max-width:1100px){.tl-left,.tl-corner{width:230px} .rg-det{grid-template-columns:repeat(2,minmax(0,1fr))} .tl-chips{max-width:60px} .tl-chips .tl-pchip.add{display:none}}   /* v1: tablet — the status pill stays readable; assign from ⋯ or the job */
@media print{.sc-page .tl{border:0;box-shadow:none} .tl-bar,.tl-shade,.tl-ot,.tl-hc.cur{-webkit-print-color-adjust:exact;print-color-adjust:exact} .rg-more,.rg-caret,.rg-tools,.tl-tray{display:none!important}}

/* run order list */
.ro-wrap{max-height:76vh} .ro tr[draggable]{cursor:default} .ro tr.dragging{opacity:.4} .ro tr.over td{box-shadow:inset 0 2px 0 var(--indigo)}
.ro-grip{cursor:grab;color:var(--ink3);width:22px;user-select:none;font-size:14px;letter-spacing:-2px} .ro-rank{white-space:nowrap}

/* R10 (G4): help behind "How this works", legend behind a toggle, labelled fact strip on Work order Gantt */
.rg-help{margin:0 0 4px} .rg-howto{margin:0 0 8px} .rg-howto>div{line-height:1.5;color:var(--ink2);max-width:1100px;padding:4px 0 2px}
.rg-legwrap{margin:8px 0 0} .rg-legwrap>summary{font-size:var(--fs-12,12px);color:var(--ink3);cursor:pointer} .rg-legwrap .rg-legend{margin-top:6px}
.rg-jobhead{display:flex;flex-direction:column;gap:6px;margin:8px 0 8px}
.rg-jh-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .rg-jh-t b{font-size:var(--fs-16,16px);color:var(--ink)} .rg-jh-t>span{color:var(--ink2);font-size:var(--fs-13,13px)}
.rg-facts{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:var(--fs-13,13px);color:var(--ink);font-variant-numeric:tabular-nums}
.rg-fact i{font-style:normal;font-size:var(--fs-11,11px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-right:6px}