/* round 9 (B9): Plan › Production Schedule › Timeline (js/pstimeline.js, mockup PS-03). Existing variables only; dark mode follows them. */
.pstl{--pstl-left:390px;--pstl-rh:27px}
.pstl .boot-load{padding:30px 6px}
/* KPI tiles: compact, the app's .kpi look */
.pstl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.pstl-kpi{padding:9px 14px;min-width:0}
.pstl-kpi .l{margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstl-kpi .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstl-kpi.bad .v{color:var(--red-t,var(--red))}
.pstl-ban{margin:0 0 10px}
/* card + toolbar */
.pstl-card{padding:0;overflow:visible;margin:0}
.pstl-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--rule2)}
.pstl-ch h3{margin:0;font-size:14.5px;font-weight:800;white-space:nowrap}
.pstl-ch .sp{flex:1}
.pstl-sel,.pstl-q{height:28px;padding:0 8px;border:1px solid var(--rule);border-radius:7px;background:var(--field,var(--paper));color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;max-width:160px}
.pstl-q{width:150px;font-weight:500}
.pstl-zoom button{padding:4px 12px}
.pstl-pan{display:inline-flex;gap:4px}
.pstl-mon{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 4px;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;cursor:help}
.pstl-vw{position:relative} .pstl-vw>summary{list-style:none;cursor:pointer} .pstl-vw>summary::-webkit-details-marker{display:none}
.pstl-vn{color:var(--brand,var(--indigo))}
.pstl-vp{position:absolute;z-index:20;top:calc(100% + 6px);left:0;display:grid;gap:8px;min-width:230px;padding:10px 12px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.pstl-vp label{display:grid;gap:3px;font-size:11px;font-weight:600;color:var(--ink2)} .pstl-vp .pstl-sel{max-width:none;width:100%}
.pstl-mon i{width:7px;height:7px;border-radius:50%;background:var(--grey)}
.pstl-mon.on i{background:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.pstl-mon.off i{background:var(--amber)}
/* scroll area: date header + load strip stay on top, the left list stays on the left */
.pstl-body{max-height:calc(100vh - 290px);min-height:260px;overflow:auto;position:relative;overscroll-behavior:contain}
.pstl-gantt{display:grid;grid-template-columns:var(--pstl-left) minmax(0,1fr);min-width:0}
.pstl-l{border-right:1px solid var(--rule);min-width:0;background:var(--paper);position:sticky;left:0;z-index:6}
.pstl-lh{position:sticky;top:0;z-index:7;background:var(--paper2)}
.pstl-lhd{height:52px;display:flex;align-items:flex-end;gap:5px;white-space:nowrap;overflow:hidden;padding:0 10px 7px 8px;border-bottom:1px solid var(--rule);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.pstl-lhd .ptl-rk{width:22px;text-align:right}.pstl-lhd .ptl-lk{width:11px}.pstl-lhd .ptl-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.pstl-lhd .ptl-lt{flex:none}
.pstl-ll{height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid var(--rule);font-size:11.5px;color:var(--ink2);white-space:nowrap}
.pstl-ll b{color:var(--ink)}.pstl-ll .sp{flex:1}.pstl-ll .ptl-sw{width:9px;height:9px;border-radius:2px;display:inline-block;background:var(--red)}
.pstl-lr{height:var(--pstl-rh);display:flex;align-items:center;gap:5px;padding:0 10px 0 8px;border-bottom:1px solid var(--rule2);font-size:12px;white-space:nowrap}
.pstl-lr .ptl-rk{width:22px;flex:none;text-align:right;font:600 11px var(--font);color:var(--ink3);font-variant-numeric:tabular-nums}
.pstl-lr .ptl-lk{width:11px;flex:none;color:var(--ink2);display:flex}
.pstl-lr .ptl-wo{font:700 12px var(--mono);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);text-decoration:none}
.pstl-lr .ptl-wo:hover{text-decoration:underline}

.pstl-lr .ptl-ac{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.pstl-lr .ptl-lt{flex:none;font-weight:700;font-size:11.5px;color:var(--red-t,var(--red));font-variant-numeric:tabular-nums}
.pstl-lr.sel{background:var(--amber-l)}
.pstl-empty{padding:18px 12px;color:var(--ink2);font-size:12.5px}
/* timeline */
.pstl-tl{position:relative;min-width:0;user-select:none;-webkit-user-select:none}
.pstl-th{position:sticky;top:0;z-index:5;height:78px;background:var(--paper2);border-bottom:1px solid var(--rule);overflow:hidden}
.pstl-th>div,.pstl-rows>div{position:absolute}
.pstl-wl{top:0;height:18px;padding:4px 0 0 6px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;color:var(--ink)}
.pstl-dl{top:18px;height:18px;font:500 11px/18px var(--font);color:var(--ink2);text-align:center;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.pstl-dl.w{color:var(--ink3);background:var(--bg2)}
.pstl-dl.sat{background:var(--amber-l);color:var(--amber-t,var(--ink));font-weight:700}
.pstl-dl.td{background:var(--ink);color:var(--paper);font-weight:700}
.pstl-gwh{top:0;height:52px;width:1px;background:var(--rule)}
.pstl-mk{top:38px;height:12px;border-radius:3px;padding:0 4px;font-size:11px;font-weight:800;line-height:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-align:center;z-index:2}
.pstl-mk.f{background:var(--blue-t,var(--blue));color:var(--paper)}
.pstl-mk.n{background:var(--ink);color:var(--paper);transform:translateX(-100%)}
.pstl-mk.s{background:var(--amber);color:var(--amber-ink,var(--ink));transform:translateX(-50%);overflow:visible}
.pstl-mk.h{background:var(--grey);color:var(--grey-ink,var(--ink));transform:translateX(-50%);overflow:visible}
.pstl-l100{left:0;right:0;height:0;border-top:1px dashed var(--ink3);z-index:1}
.pstl-lb{border-radius:2px 2px 0 0;background:var(--grey);z-index:2;cursor:default}
.pstl-lb.o{background:var(--red)}
.pstl-rows{position:relative;overflow:hidden}
.pstl-we{top:0;bottom:0;background:var(--bg2);opacity:.75}
.pstl-we.hol{background:repeating-linear-gradient(135deg,var(--bg2) 0 4px,transparent 4px 8px);opacity:1}
.pstl-ws{top:0;bottom:0;background:var(--amber-l);box-shadow:inset 1px 0 0 var(--amber-bd,var(--amber)),inset -1px 0 0 var(--amber-bd,var(--amber))}
.pstl-fz{top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--blue-l) 0 5px,transparent 5px 10px);box-shadow:inset -1.5px 0 0 var(--blue-t,var(--blue));opacity:.95}
.pstl-gd{top:0;bottom:0;width:1px;background:var(--rule2)}
.pstl-gw{top:0;bottom:0;width:1px;background:var(--rule)}
.pstl-now{top:0;bottom:0;width:2px;background:var(--ink);z-index:4}
.pstl-row{left:0;right:0;height:var(--pstl-rh);border-bottom:1px solid var(--rule2)}
.pstl-bar{position:absolute;top:6px;height:15px;border-radius:4px;padding:0 6px;font-size:11px;font-weight:600;line-height:15px;white-space:nowrap;overflow:hidden;cursor:grab;z-index:2;touch-action:pan-y;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pstl-bar.ptl-cl{border-top-left-radius:0;border-bottom-left-radius:0}.pstl-bar.ptl-cr{border-top-right-radius:0;border-bottom-right-radius:0}
.pstl-bar span{position:relative;z-index:1;pointer-events:none;display:inline-block;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pstl-bar .ptl-late{position:absolute;top:0;bottom:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.28) 4px 7px);box-shadow:inset 0 -3px 0 var(--red)}
.pstl-bar.hold{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 4px,transparent 4px 8px)}
.pstl-bar.planned{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pstl-bar.drag{transform:translateY(-2px);box-shadow:0 0 0 2px var(--ink),0 8px 16px rgba(0,0,0,.28);cursor:grabbing;z-index:8}
.pstl-dm{position:absolute;top:7px;width:12px;height:12px;margin-left:-6px;background:var(--ink);border:2px solid var(--paper);transform:rotate(45deg);z-index:3}
.pstl-tg{position:absolute;top:6px;height:15px;padding:0 6px;border-radius:8px;font-size:11px;font-weight:600;line-height:15px;white-space:nowrap;z-index:3}
.pstl-tg.saved,.pstl-tg.dry{background:var(--green-l);color:var(--green-t,var(--green))}
.pstl-tg.pending{background:var(--blue-l);color:var(--blue-t,var(--blue))}
.pstl-tg.appr{background:var(--amber-l);color:var(--amber-t,var(--ink));box-shadow:inset 0 0 0 1px var(--amber-bd,var(--amber))}
.pstl-tg.error{background:var(--red-l);color:var(--red-t,var(--red))}
/* footer legend */
.pstl-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:7px 14px 8px;font-size:11px;color:var(--ink2)}
.pstl-foot .sp{flex:1}
.pstl-lg{display:flex;align-items:center;gap:11px;flex-wrap:wrap;min-width:0}
.pstl-lg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pstl-lg i{display:inline-block;width:15px;height:9px;border-radius:2px}
.pstl-lg .dmi{display:inline-block;width:8px;height:8px;background:var(--ink);transform:rotate(45deg);margin:0 2px}
.pstl-lg .lgl{background:var(--grey-l,var(--bg2));box-shadow:inset 0 -3px 0 var(--red)}
.pstl-lg .lgf{background:repeating-linear-gradient(135deg,var(--blue-t,var(--blue)) 0 2px,transparent 2px 5px);opacity:.6}
.pstl-lg .lgs{background:var(--amber-l);box-shadow:inset 0 0 0 1px var(--amber-bd,var(--amber))}
.pstl-lg .lgn{width:2px;height:12px;background:var(--ink);border-radius:0}
.pstl-last{white-space:nowrap}.pstl-last a,.pstl-log{color:var(--ink);font-weight:700}
/* tooltips */
.pstl-tip{position:fixed;z-index:60;display:none;pointer-events:none;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);padding:8px 10px;font-size:12px;line-height:1.45;max-width:400px}
.pstl-tip .ptl-m{color:var(--ink2);font-size:11.5px}.pstl-tip .bad{color:var(--red-t,var(--red))}
.pstl-dtip{position:fixed;z-index:61;display:none;pointer-events:none;width:380px;max-width:92vw;background:var(--dark,#121212);color:#E9E6E1;border-radius:8px;padding:8px 11px 9px;font-size:12px;line-height:1.42;box-shadow:0 12px 26px rgba(0,0,0,.3)}
[data-theme=dark] .pstl-dtip{background:var(--ink);color:var(--paper)}
.pstl-dtip b{color:inherit;font-weight:800}
.pstl-dtip .ptl-s2{display:block;margin-top:5px;font:500 11px/1.45 var(--font);opacity:.85;font-variant-numeric:tabular-nums}
.pstl-dtip .ptl-s3{display:block;margin-top:3px;font-size:11px;opacity:.7}
.pstl-dtip .ptl-s3.warn{opacity:1;color:var(--amber)}
/* tablet */
@media (max-width:1280px){.pstl{--pstl-left:300px}}
@media (max-width:1024px){.pstl{--pstl-left:230px}.pstl-lr .ptl-ac{display:none}.pstl-lr .ptl-wo{flex:1;overflow:hidden;text-overflow:ellipsis}.pstl-lhd .ptl-t{font-size:11px}.pstl-ll .faint{display:none}.pstl-q{width:130px}.pstl-bar{height:18px;line-height:18px;top:6px}.pstl-dm{top:9px}.pstl-tg{top:7px}.pstl-body{max-height:calc(100vh - 320px)}}
@media (max-width:820px){.pstl{--pstl-left:170px}.pstl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pstl-lr .ptl-rk,.pstl-lhd .ptl-rk{width:16px}.pstl-sel{max-width:140px}.pstl-lhd .ptl-lt{display:none}}