/* --------------------------------------------------------------------------- THEME TOKENS. The app ships DARK by default: :root carries the original dark palette, so a page with NO data-theme attribute renders exactly as it always has (the boot/nav/logo gate is unaffected). data-theme="light" on — set by the header toggle — remaps the same token names to the brand's warm-paper light palette, so every screen that reads these tokens re-themes at once. Categorical data-viz colours are intentionally NOT tokenised here: they are the same hue in both themes. The extra structural tokens (--panel3/--hover/--line2/--amber-ink) exist so the handful of hardcoded structural greys elsewhere in this file can be pointed at a token and flip with the theme. --------------------------------------------------------------------------- */ :root,:root[data-theme="dark"]{ color-scheme:dark; --ground:#14181D; --panel:#1B2128; --panel2:#20272F; --panel3:#12161A; --line:#2A323B; --line2:#333A42; --hover:#28313B; --band:#171B20; --line3:#262B31; --edge:#21262C; --edge2:#1A1F24; --panelb:#1E242B; --plot:#0F1317; --scene:#0B0F12; --ink4:#3E4750; --on-accent:#14181D; --grid:#39424C; --scene-line:#1B2128; --scene-line2:#2B343E; --ink:#E8ECEF; --ink2:#97A2AC; --ink3:#5E6A75; --ink-strong:#C8CFD6; --amber:#FFB020; --amber-dim:#7A5A1B; --amber-ink:#1A1405; /* --amber-text: amber-toned TEXT read directly against --panel (an outline chip's own label, not text ON an amber fill — that's --amber-ink). #FFB020 clears 4.5:1 against this theme's dark --panel already, so unchanged here; see the light block below for why this needs its OWN value rather than reusing --amber there. */ --amber-text:#FFB020; --red:#FF6B5D; --green:#5DD08C; --cyan:#4FC3E8; /* semantic tints: status-tinted panel backgrounds + borders (amber/green/red/blue/purple). Dark values are the app's original hexes; light values are the paper-palette pastels. */ --tint-amber:#1E1A10; --tint-amber2:#241D0E; --tint-amber-br:#3A2E14; --tint-green:#14201A; --tint-green2:#0E1A12; --tint-green-br:#2E4A33; --tint-green-br2:#244A2E; --tint-red:#241212; --tint-red2:#1A0E0C; --tint-red-br:#3A1414; --tint-red-br2:#3A1A1A; --tint-blue:#14202B; --tint-blue-br:#24404E; --tint-blue-hi:#3D6B8F; --tint-purple:#1E1428; --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Consolas,monospace; --sans:ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } :root[data-theme="light"]{ color-scheme:light; /* OPTION A "COOL INSTRUMENT" — CEO-selected 2026-07-25. Cool near-white field, near-black cool ink, status as a SEPARATE system from the amber brand accent. Measured: scripts/palette_audit.py (WCAG + colour-vision) must pass. Rule: at text weight hue alone cannot carry status — always pair with a glyph. */ --ground:#F7F8FA; --panel:#FFFFFF; --panel2:#EEF0F4; --panel3:#E6E9EF; --line:#D6DAE2; --line2:#B6BDC9; --hover:#E9ECF1; --band:#EEF0F4; --line3:#D2D6DE; --edge:#CDD2DA; --edge2:#DDE1E7; --panelb:#EEF0F4; --plot:#FFFFFF; --scene:#EEF1F5; --ink4:#6B737C; --on-accent:#14181D; --grid:#C3C9D2; --scene-line:#DCE0E6; --scene-line2:#C7CDD5; --ink:#0F1419; --ink2:#384250; --ink3:#5C6672; --ink-strong:#1B2027; --amber:#FFB020; --amber-dim:#E2BE7C; --amber-ink:#7A5200; /* --amber-text: same purpose as the dark block above. #FFB020 measures 1.83:1 against this theme's white --panel — found live in the sign-in chip, WCAG needs 4.5:1. #7A5200 (this theme's own --amber-ink value) measures 6.92:1 and stays in-family. */ --amber-text:#7A5200; --red:#7E1F0E; --green:#146B4F; --cyan:#0B5FA0; --tint-amber:#F6EEDC; --tint-amber2:#F3E9D2; --tint-amber-br:#DDC79A; --tint-green:#E4F0EA; --tint-green2:#EDF5F0; --tint-green-br:#AFD0C0; --tint-green-br2:#9EC7B4; --tint-red:#F7E7E3; --tint-red2:#F6EDEA; --tint-red-br:#DCB0A6; --tint-red-br2:#D6A79C; --tint-blue:#E6EEF7; --tint-blue-br:#B0C7DE; --tint-blue-hi:#3E79AC; --tint-purple:#EFE9F5; } html{transition:background-color .28s ease} body{transition:background-color .28s ease,color .28s ease} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;overflow:hidden} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px} #app{display:flex;flex-direction:column;height:100vh} /* Universal scroll — every content screen scrolls vertically by default so the page bottom is always reachable with the mouse wheel / two-finger trackpad. :where() gives this ZERO specificity, so any screen with its own overflow rule below (the full-bleed route-map / execution-map screens) still wins and keeps its fixed internal layout. */ #app>:where([id^="screen-"]){min-height:0;overflow-y:auto;overscroll-behavior:contain} #screen-plan{flex:1;display:grid;grid-template-columns:300px 1fr 320px;min-height:0;overflow:hidden} #screen-despatch{flex:1;display:none;overflow-y:auto;background:var(--ground)} /* chevron navigation */ /* The nav scrolls, but with hidden scrollbars there was no way to KNOW it did: at 1366 six of sixteen destinations were invisible with no affordance at all. */ #chevnav{flex:none;display:flex;align-items:center;height:42px;padding:0 16px;gap:0; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:smooth; scrollbar-width:thin;scrollbar-color:var(--line2) transparent; border-bottom:1px solid var(--line);background:var(--ground)} #chevnav::-webkit-scrollbar{height:4px} #chevnav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px} #chevnav::-webkit-scrollbar-track{background:transparent} @media(max-width:1500px){.chev{padding:9px 16px 9px 20px;letter-spacing:.08em;font-size:10.5px}} @media(max-width:1300px){.chev{padding:9px 12px 9px 16px;letter-spacing:.06em;font-size:10px}} .chev{font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:9px 26px 9px 30px; white-space:nowrap;flex:none; display:inline-flex;align-items:center;gap:6px; background:var(--panel2);color:var(--ink2);border:none;position:relative;margin-left:-12px; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%); transition:background .08s,color .08s} .chev:first-child{margin-left:0;padding-left:18px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)} .chev:hover{background:var(--hover);color:var(--ink)} .chev.active{background:var(--amber);color:#1A1405;font-weight:700} /* GM found (ORDER BOOK, 1366px): the badge OVERLAPPED the label's trailing letters — "ORDER BO[186]". Root cause: the badge used to be ABSOLUTELY positioned at a fixed `right:17px` regardless of its own width, on the theory that a count badge is always a short 1-2 digit number that fits in the padding-right gap reserved for it. That is exactly the small-world assumption CLAUDE.md's scale note forbids — Order Book's count is `bookOrders.length`, which is going to five figures, and even "186" (3 digits, ~25px) already overflowed the ~9px of clearance the fixed offset left past a full-width label like ORDER BOOK. A wider count only makes a fixed-offset badge dig further into the text. FIX: the badge is now a normal flex sibling of the label (`.chev` is `inline-flex` with a gap), not an absolutely-positioned overlay — so the chevron's own width grows with however many digits the badge needs, for any count, at any label length, permanently (no magic offset to re-tune the next time a count grows a digit). Height stays identical with or without a badge because `align-items:center` centres a 14px-tall pill against the chevron's own line-height, exactly as the old absolute positioning intended. */ .chev .badge{flex:none;min-width:14px;height:14px;line-height:14px; text-align:center;padding:0 3px;border-radius:7px;font-size:8.5px;font-weight:700; background:var(--amber);color:#1A1405;box-shadow:0 0 0 1.5px var(--ground);pointer-events:none} .chev.active .badge{background:#1A1405;color:var(--amber)} /* sub-tabs: secondary row under the chevron nav for screens re-homed under a parent */ #subnav{flex:none;display:flex;align-items:stretch;gap:2px;height:34px;padding:0 16px; background:var(--ground);border-bottom:1px solid var(--line);overflow-x:auto} .subtab{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em; padding:0 18px;color:var(--ink2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap; transition:color .08s,border-color .08s} .subtab:hover{color:var(--ink)} .subtab.on{color:var(--amber);border-bottom-color:var(--amber);font-weight:700} /* XD screen: crossdock tab row + the lane-consolidation body (reuses .xh/.lhbar/.xsplit) */ #screen-xd{flex:1;display:none;flex-direction:column;overflow-y:auto;background:var(--ground)} #xd-tabs{flex:none;display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)} .xd-tab{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink2);background:var(--panel2); border:1px solid var(--line);border-radius:4px;padding:8px 13px;cursor:pointer;white-space:nowrap} .xd-tab:hover{background:var(--hover);color:var(--ink)} .xd-tab.on{background:var(--amber);border-color:var(--amber);color:#1A1405;font-weight:700} .xd-tab b{letter-spacing:.1em} .xd-tab .xd-n{background:rgba(0,0,0,.28);border-radius:8px;padding:1px 6px;margin-left:5px;font-size:9px} .xd-tab:not(.on) .xd-n{background:var(--amber);color:#1A1405} #xd-body{flex:1;min-height:0;padding:6px 4px 20px} #screen-xd .xclose{display:none} /* commit + locked */ .commitbtn{font-family:var(--mono);font-size:9px;letter-spacing:.1em;font-weight:700;padding:4px 9px;border-radius:3px; background:var(--amber);color:#1A1405;border:none;transition:transform .05s,background .08s} .commitbtn:hover{background:#FFC24A} .commitbtn:active{transform:translateY(1px)} .route.locked{opacity:.75;border-style:dashed} #rfilterbar{display:flex;align-items:center;gap:8px;padding:7px 12px; border-bottom:1px solid var(--line);background:var(--panel)} #rfilterbar{flex-wrap:wrap} #rfilterbar select{flex:1 1 150px;min-width:0;background:var(--panel2);border:1px solid var(--line); border-radius:4px;color:var(--ink2);font-family:var(--mono);font-size:8.5px; letter-spacing:.06em;padding:4px 6px} #rfilterbar select:focus{outline:none;border-color:var(--amber-dim)} #rfilt-n{flex:none;font-family:var(--mono);font-size:8px;color:var(--ink3);min-width:74px;text-align:right} /* wrap rather than clip: in a narrow panel the sort chips drop to a second line instead of overflowing off the right edge (which hid URGENT ↑ / OK ↑) */ #cptbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:9px;color:var(--ink3);letter-spacing:.06em;flex-wrap:wrap} #cptbar #sort-mpn{margin-left:auto} #cptbar input[type=range]{flex:0 0 110px;accent-color:var(--amber);height:3px} #cptbar b{color:var(--amber);font-size:10.5px} #cpt-metric{background:var(--panel2);border:1px solid var(--line);border-radius:4px;color:var(--amber); font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:4px 6px;cursor:pointer} .sortchip{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:4px 8px;border-radius:3px; border:1px solid var(--line);background:var(--panel2);color:var(--ink3)} .sortchip.on{border-color:var(--amber);color:var(--amber)} .cok{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.08em;font-weight:700; color:var(--tint-green2);background:var(--green);border-radius:3px;padding:2px 5px;margin-left:6px} .rcard.msel{outline:2px solid var(--cyan)} .lockpill{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--green);border:1px solid var(--green); border-radius:3px;padding:2px 6px} /* despatch board */ #despatch-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line); border-bottom:1px solid var(--line)} #despatch-kpis .kpi{background:var(--panel)} /* WAR ROOM AL-1: denser board — narrower cards, tighter gutters, so far more of the picture fits on screen at once. TWO rows, never three (CEO): the board reads as two lanes flowing horizontally; a third row buries tiles below the fold of the strip. */ /* CEO (2026-07-26): "its still crazy how much of the screen height these two rows of tiles make up — make these tiles LONGER when there is more information, not TALLER." The rows are auto-height, so ONE heavy chain set the height of its whole lane, and every other grid item STRETCHED to fill it (grid items default to align-self:stretch) — which is where the 300-400px of dead space under the buttons came from. `align-items:start` makes a card exactly as tall as its own content. A chain that carries more information already grows the way the CEO wants — sideways, spanning one grid column per run. */ #despatch-cards{flex:0 0 auto;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(92px,auto)); grid-auto-columns:232px;gap:7px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;align-items:start} #screen-despatch>#despatch-kpis{flex:0 0 auto} /* ---- WHAT THE ORDER DEMANDS OF A TRUCK ---- Handling, access, segregation, window. These decide which units can carry it — they are read BEFORE the plan, so they sit to the left of it. */ .posplit{display:flex;align-items:flex-start;gap:12px; /* .pocard is itself a flex ROW and .pobody used to be the item that grew. The wrapper took its place, so it has to inherit the growing — otherwise the body shrinks to its content and the journey strip inside it collapses to nothing. */ flex:1 1 auto;min-width:0} .posplit .pobody{flex:1 1 auto;min-width:0} .porail{flex:0 0 172px;border-right:1px solid var(--line);padding-right:11px; display:flex;flex-direction:column;gap:5px} .porail .prh{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:var(--ink3); padding-bottom:3px} .porail .prrow{display:flex;flex-direction:column;gap:1px;cursor:help; border-left:2px solid var(--line);padding-left:6px} .porail .prrow.hard{border-left-color:var(--amber)} .porail .prk{font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--ink3)} .porail .prv{font-family:var(--mono);font-size:9px;color:var(--ink2);line-height:1.3} .porail .prrow.hard .prv{color:var(--amber)} /* CEO P1 (2026-07-27T00:05Z) mobile ask #4, "kill the sideways scroll on this screen at 390". MEASURED cause #2 (alongside the .poit grid fix above): .porail is a rigid 172px flex:0 0 sidebar beside .pobody — fine on a desk monitor, but on a 390px card that alone leaves .pobody under 200px for the journey strip, the milestone timeline AND the expanded items grid, which cannot all fit no matter how far their own columns shrink. Stack the rail above the body instead of beside it once the card itself is this narrow, the same breakpoint .poitems already uses next to it — .pobody then gets the full card width. */ @media (max-width:720px){ .posplit{flex-direction:column} .porail{flex:none;width:100%;border-right:none;border-bottom:1px solid var(--line); padding:0 0 8px 0;flex-direction:row;flex-wrap:wrap;gap:10px 16px} } .dcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 8px} /* ---- A CHAINED SHIFT IS ONE OBJECT ON THE BOARD ---- The board flows in COLUMNS across two rows, so a chain that is merely sorted adjacent can still be split across a column break and read as two unrelated loads. Give the whole chain its own column, ringed, with the empty run drawn between the tiles. */ @keyframes nrshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}} .nr-shake{animation:nrshake .18s 2} .nr-shake #nr-find{border-color:var(--red);color:var(--red)} /* ---- THE ALLOCATE CONTROL COLUMN ---- The facility select and the bulk actions used to be two separate items in a 300px grid column. The facbar is width:max-content, so it overran its column and the buttons sat on top of it. One column, and the select fills it. */ .allocctl{grid-row:1/-1;display:flex;flex-direction:column;gap:8px; min-width:0;max-width:300px} .allocctl .facbar{width:100%;align-self:stretch} .allocctl .facbar .facsel{flex:1 1 auto;min-width:0;width:100%} .allocctl .bulkbar{grid-row:auto;flex:1 1 auto} .bulkbar .btn.chainbtn{border-color:var(--cyan);color:var(--cyan)} .bulkbar .btn.chainbtn:hover{background:rgba(79,195,232,.12)} /* the engine is RUNNING — it says so, and it says what it has found so far */ .bulkbar .btn.chainbtn.running{border-color:var(--amber);color:var(--amber); background:rgba(242,169,59,.09);animation:chpulse 1.6s ease-in-out infinite} @keyframes chpulse{0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,0)} 50%{box-shadow:0 0 0 2px rgba(242,169,59,.16)}} /* the live badge on a start/stop engine button never intercepts the pointer — so a click during a badge tick always lands on the button itself (6.3 STOP-first-click fix) */ .cheng{pointer-events:none} .bulkbar .btn.chainbtn .cheng{display:block;font-style:normal;font-size:7px; letter-spacing:.08em;color:var(--ink3);margin-top:3px} /* the STOW and FILL sweeps are engines too — green while they run */ .bulkbar .btn.stowbtn,.bulkbar .btn.ffbtn{border-color:var(--green);color:var(--green)} .bulkbar .btn.stowbtn:hover,.bulkbar .btn.ffbtn:hover{background:rgba(93,208,140,.12)} .bulkbar .btn.stowbtn.running,.bulkbar .btn.ffbtn.running{border-color:var(--green); color:var(--green);background:rgba(93,208,140,.12);animation:grnpulse 1.6s ease-in-out infinite} @keyframes grnpulse{0%,100%{box-shadow:0 0 0 0 rgba(93,208,140,0)} 50%{box-shadow:0 0 0 2px rgba(93,208,140,.20)}} .bulkbar .btn.stowbtn .cheng,.bulkbar .btn.ffbtn .cheng{display:block;font-style:normal; font-size:7px;letter-spacing:.08em;color:var(--ink3);margin-top:3px} /* the network-optimisation cycle clock — seconds left in the current site slice */ .cycleclock{font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--cyan); border:1px solid rgba(79,195,232,.35);border-radius:3px;padding:1px 6px;margin-left:8px} .cycleclock.low{color:var(--amber);border-color:rgba(255,176,32,.55)} .chaingroup{display:flex;flex-direction:column;min-width:0; border:1px solid var(--cyan);border-radius:8px;padding:4px 5px 5px; background:linear-gradient(180deg,rgba(79,195,232,.07),rgba(79,195,232,.02)); box-shadow:0 0 0 1px rgba(79,195,232,.12) inset} .chaingroup.sel{border-color:var(--amber); box-shadow:0 0 0 1px rgba(242,169,59,.22) inset,0 0 14px rgba(242,169,59,.16)} /* THE SHIFT RUNS FORWARD IN TIME, SO IT RUNS FORWARD ACROSS THE BOARD — run 1 on the left, the empty km between, then run 2. Not stacked. */ .chainrow{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;min-height:0} .chainrow .dcard{flex:1 1 0;min-width:0;border-top:3px solid var(--runcol,var(--cyan))} .chainhead{display:flex;align-items:center;gap:8px;padding:0 3px 4px; font-family:var(--mono);font-size:8px;letter-spacing:.08em;flex-wrap:wrap} .chainhead{cursor:pointer} .chainhead b{color:var(--cyan)} .chaingroup.sel .chainhead b{color:var(--amber)} .chainhead .chwho{color:var(--ink3);letter-spacing:.06em} .chainhead .chtot{display:flex;gap:11px;margin-left:10px} .chainhead .chtot i{display:flex;flex-direction:column;gap:1px;font-style:normal; font-family:var(--mono);font-size:10px;color:var(--ink);letter-spacing:.02em;cursor:help} .chainhead .chtot i em{font-style:normal;font-size:7px;letter-spacing:.14em;color:var(--ink3)} .chainhead .chtot i u{text-decoration:none;font-size:7.5px;color:var(--ink3)} .chainhead .chtot i.bad{color:var(--amber)} .chainhead .chtot i.bad u{color:var(--amber-dim,var(--amber))} .chainhead .chwh{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.08em; background:none;border:1px solid var(--line);color:var(--ink3);border-radius:4px; padding:3px 7px;cursor:pointer} .chainhead .chwh:hover{border-color:var(--cyan);color:var(--cyan)} /* the link between the two runs: the empty km the chain exists to kill */ .chainlink{display:flex;flex-direction:row;align-items:center;gap:3px;padding:0 5px; flex:0 0 auto;position:relative} .chainlink i{display:block;height:2px;width:10px; background:repeating-linear-gradient(90deg,var(--cyan) 0 3px,transparent 3px 6px)} .chainlink span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--cyan); text-align:center;line-height:1.35;white-space:nowrap} .chainlink span em{display:block;font-style:normal;color:var(--ink3);font-size:7px} .chainlink.exc i{background:repeating-linear-gradient(90deg,var(--red) 0 3px,transparent 3px 6px)} .chainlink.exc span{color:var(--red)} .chainexc{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:7px;color:var(--red);text-align:center; width:190px;line-height:1.35;font-weight:400} /* the map key. A colour with no key is decoration, not information. Leaflet's own panes sit at z-index ~700 — this has to clear them. */ .ap-legend{position:absolute;left:10px;bottom:10px;z-index:760;display:flex;gap:6px; flex-wrap:wrap;max-width:calc(100% - 20px); background:rgba(12,15,18,.82);border:1px solid var(--line);border-radius:5px;padding:5px 7px} .ap-legend .lgr{display:flex;align-items:center;gap:5px;cursor:pointer; font-family:var(--mono);font-size:8px;letter-spacing:.07em;color:var(--ink3)} .ap-legend .lgr.on{color:var(--ink)} .ap-legend .lgr i{width:13px;height:3px;border-radius:2px;display:block} .ap-legend .lgempty{cursor:default} .ap-legend .lgempty i{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 6px)} .dcard .dh{display:flex;align-items:center;gap:7px} .dcard .dh .swatch{width:10px;height:10px;border-radius:2px} .dcard .dh .vname{font-family:var(--mono);font-size:11px;font-weight:700;flex:1; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dcard .pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#1A1405;background:var(--green); border-radius:3px;padding:2px 7px;font-weight:700} .dcard .times{display:flex;gap:12px;margin:6px 0 5px;font-family:var(--mono);font-size:9.5px;color:var(--ink2)} .dcard .times b{color:var(--ink);font-size:13px;display:block} .dcard .stops{font-family:var(--mono);font-size:9px;color:var(--ink3);line-height:1.5;border-top:1px solid var(--line);padding-top:5px} .dcard .stops em{font-style:normal;color:var(--ink2)} .dcard.selected{border-color:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.15)} .dcard{cursor:pointer} #allocpane{flex:1;min-height:0;border-top:1px solid var(--line);padding:0;display:grid; grid-template-columns:minmax(260px,1fr) minmax(280px,1.1fr) minmax(240px,1fr)} #assetpane{flex:0 0 275px;border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0} #assetlist{flex:1;overflow-y:auto;padding:6px 10px} .acard{border:1px solid var(--line);border-radius:5px;margin:6px 0;padding:9px 11px;background:var(--panel2); font-family:var(--mono);font-size:9.5px;color:var(--ink2)} .acard .a1{display:flex;align-items:center;gap:8px;color:var(--ink)} .acard .rego{font-weight:700;letter-spacing:.06em;color:var(--amber)} .acard .avail{margin-top:4px} .acard .avail.now{color:var(--green)} .acard .avail.soon{color:var(--amber)} .acard button{margin-top:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;padding:5px 10px; border-radius:3px;border:1px solid var(--amber-dim);background:transparent;color:var(--amber)} .acard button:hover{background:rgba(255,176,32,.1)} .acard.assigned{border-color:var(--green)} .asec{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--green);margin:12px 2px 2px} .acard.a-free{border-left:2px solid var(--green)} .acard.a-busy{border-left:2px solid var(--red);background:rgba(255,107,93,.05)} .acard .avail.busy{color:var(--red)} .acard .avail.busy b{color:var(--red);font-weight:700} .acard.a-ftl{border-left:2px solid var(--cyan)} /* an asset already allocated to another committed load — it WILL come free */ .acard{position:relative} .acard.a-held{border-left:2px solid var(--amber);background:rgba(255,176,32,.07)} .acard.a-held .rego{color:var(--amber)} .avail.held{color:var(--amber)} .acard.proposed{outline:1px dashed var(--amber);outline-offset:-2px} .acard.proposed::after{content:'PROPOSED';position:absolute;top:6px;right:9px; font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--amber)} /* find more freight */ #fflist{margin-top:8px} .ffsort{display:flex;align-items:center;gap:8px;margin:8px 2px 4px;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--ink3)} .ffsort select{background:var(--panel3);color:var(--ink-strong);border:1px solid var(--line2);border-radius:3px;padding:4px 7px;font-family:var(--mono);font-size:8.5px} .ffsort span{color:var(--ink4)} .ffhead{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:#5ED4A0;margin:8px 2px 6px} .ffcard{border:1px solid var(--line);border-left:3px solid #5ED4A0;border-radius:5px; background:var(--panel2);padding:7px 9px;margin-bottom:6px;cursor:grab} .ffcard:hover{border-color:#5ED4A0;background:var(--hover)} .ffcard:active{cursor:grabbing} .ffcard.overhrs{border-left-color:var(--red)} .ffcard .l1{display:flex;align-items:center;gap:8px;font-size:11px} .ffcard .l2{display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--mono);font-size:8.5px;color:var(--ink3);margin-top:3px} .ffkm{font-family:var(--mono);font-size:9px;color:#5ED4A0;font-weight:700} .ffadd{font-family:var(--mono);font-size:8px;letter-spacing:.06em;padding:3px 7px; border-radius:3px;border:1px solid #5ED4A0;background:transparent;color:#5ED4A0;cursor:pointer} .ffadd:hover{background:rgba(94,212,160,.15)} .ap-ctl button.del{border-color:var(--red);color:var(--red)} .ap-ctl button.del:hover{background:rgba(255,107,93,.15)} .orow.lanerow{border-left:3px solid #F06FB4} .acard .avail.ftl{color:var(--cyan)} .acard.a-ftl button{border-color:rgba(79,195,232,.55);color:var(--cyan)} .acard.a-ftl button:hover{background:rgba(79,195,232,.1)} .acard.a-ftl.assigned{border-color:var(--cyan)} /* day switcher */ #dayctl{display:flex;align-items:center;gap:6px;margin-left:14px} #dayctl .btn{padding:6px 9px} #daylabel{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--amber);font-weight:700; border:1px solid var(--amber-dim);border-radius:4px;padding:6px 11px;white-space:nowrap} #daylabel em{font-style:normal;color:var(--ink3);font-weight:400} /* global search */ #gsearchwrap{position:relative;margin-left:12px} #gsearch{width:260px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--ink); font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:8px 11px} #gsearch:focus{outline:none;border-color:var(--amber-dim)} #gsclear{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--panel); border:1px solid var(--line);border-radius:3px;color:var(--ink2);font-size:9px;padding:3px 7px;cursor:pointer} #gsclear:hover{color:var(--red)} #gsresults{display:none;position:absolute;top:calc(100% + 6px);left:0;width:360px;max-height:60vh;overflow-y:auto; background:var(--panel);border:1px solid var(--line);border-radius:7px;z-index:2500; box-shadow:0 10px 30px rgba(0,0,0,.5);padding:8px} #gsresults.show{display:block} .gs-group{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--ink3);margin:8px 4px 4px} .gs-item{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:4px;cursor:pointer; font-family:var(--mono);font-size:10px;color:var(--ink2)} .gs-item:hover{background:var(--panel2)} .gs-item .gk{color:var(--amber);font-weight:700;letter-spacing:.05em} .gs-item .gd{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-item .gw{font-size:8px;color:var(--ink3);letter-spacing:.06em} .gs-none{font-family:var(--mono);font-size:9.5px;color:var(--ink3);padding:12px;text-align:center} .gs-hint{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:var(--ink3); padding:3px 6px 7px;border-bottom:1px solid var(--line);margin-bottom:4px} .gs-item.cur{background:var(--panel2);box-shadow:inset 2px 0 0 var(--amber)} .gs-item .gb{font-family:var(--mono);font-size:7px;letter-spacing:.08em;color:var(--ink3); border:1px solid var(--line);border-radius:3px;padding:1px 4px;flex:none} .gs-item .gw{flex:none;opacity:.45;padding:0 3px;border-radius:3px} .gs-item .gw:hover{opacity:1;color:var(--cyan);background:rgba(0,0,0,.35)} .gs-more{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--cyan); padding:5px 9px;cursor:pointer;border-radius:4px} .gs-more:hover{background:var(--panel2)} .cotick{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink3);cursor:pointer;padding:0 4px} .cotick:hover{color:var(--amber)} .orow.cosel,.lhco.cosel{outline:1px solid var(--red);outline-offset:-1px;background:rgba(255,107,93,.08)} .lhcard.cosel{outline:1px solid #5ED4A0;outline-offset:-1px;background:rgba(94,212,160,.08)} .btn.danger{border-color:var(--red);color:var(--red)} .btn.danger:hover{background:var(--red);color:#1A0A08} .gs-empty{font-family:var(--mono);font-size:9px;color:var(--ink3);padding:16px;text-align:center; border:1px dashed var(--line);border-radius:6px;margin:10px} /* the flash that says "this is the thing you asked for" */ @keyframes gsflash{0%{box-shadow:0 0 0 3px rgba(255,176,32,.65)}100%{box-shadow:0 0 0 3px rgba(255,176,32,0)}} .gs-flash{outline:2px solid var(--amber)!important;outline-offset:-1px;animation:gsflash 1.6s ease-out} .search-hit{outline:2px solid var(--amber)!important;outline-offset:-1px;box-shadow:0 0 0 3px rgba(255,176,32,.22)!important} @media (max-width:1400px){#gsearch{width:170px}} @media (max-width:960px){#screen-despatch{flex-direction:column}#assetpane{flex:0 0 auto;max-height:36vh;border-left:none;border-top:1px solid var(--line)}} #ap-details{overflow-y:auto;border-right:1px solid var(--line);padding:12px 14px} /* 6.4 — the 3D load-build controls live in their own toolbar strip ABOVE the canvas, so the RUN / PAUSE buttons and the rotate/zoom controls never overlap each other or the axle text drawn on the canvas. */ #ap-3dwrap{position:relative;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column} #f3dtoolbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:6px 8px;background:var(--panel2);border-bottom:1px solid var(--line)} #f3dcanvaswrap{position:relative;flex:1;min-height:180px} #freight3d{position:absolute;inset:0;width:100%;height:100%;display:block;background:#11151A;cursor:grab;touch-action:none} #f3dbar{position:static;display:flex;align-items:center;gap:7px;flex:1;min-width:0;flex-wrap:wrap} #f3dveh{background:rgba(11,15,18,.92);border:1px solid var(--line);border-radius:4px;color:var(--ink2); font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;padding:5px 7px;max-width:230px} #f3dveh:focus{outline:none;border-color:var(--amber-dim)} .lpb{font-family:var(--mono);font-size:8px;letter-spacing:.07em;padding:5px 9px;border-radius:4px; border:1px solid var(--line);background:rgba(11,15,18,.92);color:var(--ink2);cursor:pointer;white-space:nowrap} .lpgrp{display:inline-flex;gap:7px;flex:none;align-items:center} .lpb.run{border-color:#5ED4A0;color:#5ED4A0} .lpb:hover:not(:disabled){background:var(--hover)} .lpb:disabled{opacity:.4;cursor:not-allowed} #lphud{font-family:var(--mono);font-size:8px;color:var(--ink3);letter-spacing:.05em; background:rgba(11,15,18,.85);padding:4px 8px;border-radius:4px;white-space:nowrap} #f3dctl{position:static;margin-left:auto;display:flex;gap:4px;flex:none} #f3dctl button{font-family:var(--mono);font-size:10px;padding:5px 9px;border-radius:3px;border:1px solid var(--line); background:rgba(27,33,40,.9);color:var(--ink2)} #f3dctl button:hover{color:var(--ink);background:var(--hover)} #f3dtip{position:absolute;display:none;pointer-events:none;font-family:var(--mono);font-size:9.5px;line-height:1.6; background:color-mix(in srgb,var(--scene) 95%,transparent);border:1px solid var(--line);border-radius:4px;padding:7px 10px;z-index:6} #ap-map{position:relative;min-width:0;display:flex;flex-direction:column} #allocmapwrap{position:relative;flex:2;min-height:0} #allocmap{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--scene);cursor:pointer} #allocLmap{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--scene)} #ap-cust{flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--line);padding:10px 14px; font-family:var(--mono);font-size:9.5px;color:var(--ink2);line-height:1.8} #ap-cust b{color:var(--ink)} #ap-cust .ct{color:var(--ink3);letter-spacing:.1em;font-size:8.5px} .numicon{background:transparent;border:none} .numicon div{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:ui-monospace,monospace;font-size:10px;font-weight:700;color:var(--on-accent);border:2px solid var(--on-accent)} .ap-order{border:1px solid var(--line);border-radius:5px;margin:6px 0;padding:8px 10px;background:var(--panel2); cursor:pointer;font-family:var(--mono);font-size:9.5px;color:var(--ink2)} .ap-order:hover{background:#27303A} .ap-order.selected{border-color:var(--amber)} .ap-order .l1{display:flex;gap:8px;align-items:center;color:var(--ink)} .ap-order .l2{display:flex;gap:12px;margin-top:4px;color:var(--ink3);flex-wrap:wrap} .ap-ctl{display:flex;gap:6px;margin-top:8px} .ap-ctl button{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:5px 9px;border-radius:3px; border:1px solid var(--line);background:var(--panel);color:var(--ink2)} .ap-ctl button:hover{color:var(--ink);background:var(--hover)} .ap-ctl .rm{border-color:var(--red);color:var(--red)} @media (max-width:960px){#allocpane{grid-template-columns:1fr;grid-template-rows:auto 300px 300px} #despatch-cards{grid-auto-columns:280px}} /* ── PHONE (max-width:600px) — make the Allocate/despatch board usable on a phone. Desktop & tablet (>600px) are untouched: this whole block never applies there. #screen-despatch carries an inline flex-direction:row that outranks the stylesheet, so the column stack needs !important here. Every selector below is scoped to the allocate screen only. ── */ @media (max-width:600px){ #screen-despatch{flex-direction:column!important} #allocleft{width:100%} #assetpane{width:100%;flex:0 0 auto;max-height:40vh;border-left:none;border-top:1px solid var(--line)} #despatch-cards{grid-auto-columns:86vw} #allocpane{grid-template-columns:1fr;grid-template-rows:auto 44vh 48vh} #ap-details{max-height:40vh;border-right:none;border-bottom:1px solid var(--line)} #ap-3dwrap{border-right:none;border-bottom:1px solid var(--line)} #f3dveh{max-width:44vw} } .ap-hint{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:8px;line-height:1.7} #despatch-empty,#execute-empty,#orders-note{padding:60px 20px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:2} .dsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px; margin-top:6px;border-top:1px solid var(--line);padding-top:6px;min-width:0} .stepbtn{min-width:0;width:100%;font-family:var(--mono);font-size:8px;letter-spacing:.03em; padding:5px 3px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; border:1px solid var(--line);background:var(--panel2);color:var(--ink2);transition:background .08s,color .08s} /* the pre-load tick spans the row — it is a statement about the load, not a step */ .dsteps .preload{grid-column:1/-1;min-width:0;overflow:hidden;white-space:nowrap; text-overflow:ellipsis;font-size:8px} .stepbtn:hover{background:var(--hover);color:var(--ink)} /* CEO rule: a trailer does not move to the warehouse on its own. SEND TO WAREHOUSE is genuinely DISABLED on an articulated set with no prime mover — it reads as blocked, and hovering says why. Not a control that accepts the click and complains afterwards. */ .stepbtn.blocked,.stepbtn:disabled{opacity:.42;cursor:not-allowed;border-style:dashed} .stepbtn.blocked:hover,.stepbtn:disabled:hover{background:var(--panel2);color:var(--ink2)} /* one click from "needs a prime mover" to the chain-wide company-fleet selection */ .flstrip .flswap{font-family:var(--mono);font-size:7.6px;letter-spacing:.08em;cursor:pointer; border:1px solid var(--cyan);color:var(--cyan);background:rgba(79,195,232,.12); border-radius:3px;padding:3px 8px;margin-left:6px} .flstrip .flswap:hover{background:rgba(79,195,232,.24)} .stepbtn.done{background:var(--green);border-color:var(--green);color:var(--tint-green2);font-weight:700} .stepbtn.armed{border-color:var(--cyan);color:var(--cyan);background:rgba(79,195,232,.12);font-weight:700} .stepbtn.assigned{background:rgba(79,195,232,.18);border-color:var(--cyan);color:var(--cyan);font-weight:700} .bk-contacts{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;font-family:var(--mono);font-size:9.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:8px 11px;margin-top:8px} .bk-contacts .k{color:var(--ink3);letter-spacing:.08em;font-weight:700} .expill.ex-driver{background:rgba(79,195,232,.14);color:var(--cyan);border:1px solid rgba(79,195,232,.5)} /* interactive despatch trip table */ .trip{margin-top:12px;font-family:var(--mono);font-size:9.5px} .trip-hdr,.trip-row{display:grid;grid-template-columns:22px 1.6fr 1.4fr 78px 84px 96px;gap:8px;align-items:center;padding:5px 8px} .trip-hdr{color:var(--ink3);letter-spacing:.06em;border-bottom:1px solid var(--hover)} .trip-row{border-top:1px solid var(--hover);color:var(--ink2);cursor:pointer} .trip-row.origin,.trip-row.return{color:var(--amber);cursor:default} .trip-row.brk{display:block;text-align:center;color:var(--ink3);font-style:normal;padding:4px 8px} .trip-row.drop:hover{background:#1a2129} .trip-row.tr-risk{background:rgba(255,176,32,.09);box-shadow:inset 2px 0 0 var(--amber)} .trip-row.tr-fail{background:rgba(255,107,93,.11);box-shadow:inset 2px 0 0 var(--red)} .trip-row.open{background:#1c242c} .tw-eta.late{color:var(--red);font-weight:700}.tw-eta.risk{color:var(--amber);font-weight:700} .tw-badge{font-size:8px;letter-spacing:.06em;text-align:right} .tw-badge.b-fail{color:var(--red)}.tw-badge.b-risk{color:var(--amber)} .trip-detail{border-top:1px dashed #2A333D;background:#12181e;padding:8px 10px 10px 30px} .trip-line{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--ink2)} .trip-line .p{flex:1}.trip-line .q{color:var(--ink3)} .trip-line .rl{background:transparent;border:1px solid var(--line);color:var(--red);border-radius:3px; font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;padding:3px 7px;cursor:pointer} .trip-line .rl:hover{background:rgba(255,107,93,.14);border-color:var(--red)} .trip-rmorder{margin-top:8px;background:transparent;border:1px solid var(--red);color:var(--red);border-radius:4px; font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:7px 12px;cursor:pointer} .trip-rmorder:hover{background:rgba(255,107,93,.14)} .trip-note{margin-top:6px;color:var(--ink3);font-size:8.5px;letter-spacing:.04em} /* execution: expandable drops under a selected load */ .exrow{cursor:pointer} .exrow.sel{outline:1px solid var(--cyan);outline-offset:-1px} .exdrops{margin:2px 0 8px;border-left:2px solid #2A333D;padding-left:2px} .exdrop{display:grid;grid-template-columns:18px 1fr 30px 104px;gap:6px;align-items:center; font-family:var(--mono);font-size:10px;color:var(--ink2);padding:6px 8px;cursor:pointer;border-top:1px solid #1E262E} .exdrop:hover{background:#1a2129} .exdrop.done{color:var(--ink3)} .exdrop.next{background:rgba(79,195,232,.10)} .exdrop.open{background:#1c242c} .exdrop.exc{background:rgba(255,107,93,.08)} .exdrop .lamp2{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--ink2)} .exdrop.done .lamp2{background:var(--green);border-color:var(--green);color:var(--tint-green2)} .exdrop.next .lamp2{border-color:var(--cyan);color:var(--cyan)} .exdrop .lamp2.exc{border-color:var(--red);color:var(--red);background:transparent} .exeta{text-align:right}.exeta.late{color:var(--red)}.exeta.early{color:var(--cyan)} .exeta.exc{color:var(--red);font-weight:700} .exdetail{background:#12181e;border-top:1px dashed #2A333D;padding:9px 12px;font-size:11px;color:var(--ink2);line-height:1.5} .exdetail .k{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink3);margin-right:6px} .exdetail a{color:var(--cyan);text-decoration:none} .exdetail .warn{color:var(--amber)} .loadref{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--amber);border:1px solid var(--amber-dim); border-radius:3px;padding:2px 6px} .unplanbtn{font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:4px 9px;border-radius:3px; border:1px solid var(--red);background:transparent;color:var(--red);transition:background .08s} .unplanbtn:hover{background:rgba(255,107,93,.12)} /* dock operations grid */ #dockgrid{padding:16px 16px 6px} .dock-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);margin-bottom:10px} .dock-ruler{position:relative;height:18px;margin-left:96px;border-bottom:1px solid var(--line)} .dock-ruler span{position:absolute;top:0;font-family:var(--mono);font-size:9px;color:var(--ink3);transform:translateX(-50%)} /* a booking that runs past the edge of the viewed window is clamped to it (dockClip) — these notches say it continues, so a clamped tile is never mistaken for a short one. */ .dock-tile.clipL{border-left:3px dashed rgba(255,255,255,.75);border-top-left-radius:0;border-bottom-left-radius:0} .dock-tile.clipR{border-right:3px dashed rgba(255,255,255,.75);border-top-right-radius:0;border-bottom-right-radius:0} .dock-row{display:flex;align-items:center;height:54px;border-bottom:1px solid var(--hover)} .dock-label{width:96px;flex:none;font-family:var(--mono);font-size:9.5px;color:var(--ink2);letter-spacing:.06em} .dock-lane{position:relative;flex:1;height:100%} .dock-tile{position:absolute;top:5px;bottom:5px;border-radius:3px;font-family:var(--mono); color:var(--on-accent);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;overflow:hidden; white-space:nowrap;box-shadow:0 0 6px rgba(0,0,0,.4);cursor:grab;touch-action:none;user-select:none; padding:0 6px;min-width:5px;line-height:1.3} /* too narrow to read? then do not pretend — drop the text, keep the true width */ .fftkm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--mono); font-size:8.5px;letter-spacing:.04em;margin-top:5px;padding:5px 7px;border-radius:3px} .fftkm b{font-weight:700} .fftkm span{margin-left:auto;color:var(--ink3);font-size:8px} .fftkm.down{background:rgba(94,212,160,.10);border:1px solid rgba(94,212,160,.45);color:#5ED4A0} .fftkm.up{background:rgba(255,107,93,.09);border:1px solid rgba(255,107,93,.40);color:var(--red)} .mspath{border:1px solid var(--line);border-radius:5px;padding:9px 10px; background:var(--panel2);margin-bottom:10px} .mspopts{display:flex;flex-direction:column;gap:4px} .mspopt{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px; padding:7px 9px;border:1px solid var(--line);border-radius:4px;cursor:pointer; background:var(--panel);color:var(--ink2);transition:border-color .08s,background .08s} .mspopt:hover{border-color:var(--ink3)} .mspopt.on{border-color:var(--cyan);background:rgba(79,195,232,.10);color:var(--ink)} .mspopt.best .c{color:#5ED4A0;font-weight:700} .mspopt input{accent-color:var(--cyan);flex:0 0 auto} .mspopt .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mspopt .c{flex:0 0 auto;font-weight:700} .mspopt .n{flex:0 0 auto;font-size:8px;color:var(--ink3);letter-spacing:.06em} .dock-tile.narrow{padding:0 2px} .dock-tile.narrow i{display:none} .bk-ovr{display:inline-flex;gap:6px;margin-left:auto;flex:0 0 auto} .bk-force,.bk-cancel{font-family:var(--mono);font-size:8px;letter-spacing:.06em; padding:5px 9px;border-radius:3px;background:transparent;cursor:pointer;white-space:nowrap} .bk-force{border:1px solid var(--amber);color:var(--amber)} .bk-force:hover{background:rgba(242,169,59,.14)} .bk-cancel{border:1px solid var(--red);color:var(--red)} .bk-cancel:hover{background:rgba(255,107,93,.14)} .bk-step.ovr{border-style:dashed;opacity:.75} .bk-step.ovr em{color:var(--amber)} .dock-tile.narrow::after{content:'';position:absolute;inset:0} .dock-tile b{font-size:8.5px;font-weight:700;letter-spacing:.02em} .dock-tile i{font-style:normal;font-size:7.5px;opacity:.85} .dock-tile.dragging{opacity:.85;cursor:grabbing;z-index:10;outline:2px solid var(--ink)} .dock-tile.invalid{outline:2px solid var(--red)} .dock-hint{font-family:var(--mono);font-size:8.5px;color:var(--ink3);margin:6px 0 0 96px} .dock-tile.selected{outline:2px solid var(--ink);z-index:5} .dock-tile{will-change:transform} .dock-ghost{position:absolute;top:4px;bottom:4px;border:1.5px dashed var(--amber);border-radius:3px; background:rgba(255,176,32,.08);pointer-events:none;z-index:4} .dock-ghost.bad{border-color:var(--red);background:rgba(255,107,93,.08)} .dock-tile.despatched{opacity:.45} #bookingpane{border-top:1px solid var(--line);padding:14px 16px;min-height:120px} .bk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bk-head .vname{font-family:var(--mono);font-size:13px;font-weight:700} .bk-meta{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font-family:var(--mono);font-size:10px;color:var(--ink2)} .bk-meta b{display:block;color:var(--ink);font-size:12.5px} .bk-flow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px} .bk-step{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:5px 9px;border-radius:3px; border:1px solid var(--line);color:var(--ink3);background:var(--panel2)} .bk-step.done{border-color:var(--green);color:var(--green)} .bk-step.current{border-color:var(--amber);color:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.25)} .bk-advance{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 16px;border-radius:4px; background:var(--amber);color:#1A1405;border:none;margin-left:8px} .bk-advance:hover{background:#FFC24A} .bk-advance:active{transform:translateY(1px)} #bookingpane .placeholder{font-family:var(--mono);font-size:10.5px;color:var(--ink3);padding:24px 0;text-align:center;line-height:2} /* 2.8.1 — a clear blue 'now' line */ .dock-now{position:absolute;top:0;bottom:0;width:2px;background:#3D9BFF;box-shadow:0 0 8px rgba(61,155,255,.9);z-index:5} .dock-nowtag{position:absolute;top:-1px;z-index:6;transform:translateX(-50%);font-family:var(--mono);font-size:8px; font-weight:700;letter-spacing:.06em;color:#FFFFFF;background:#3D9BFF;border-radius:0 0 3px 3px;padding:1px 6px;white-space:nowrap} /* 8.3 ruler minor (15-min) tick labels */ .dock-ruler span.q{font-size:7.5px;color:var(--ink3);opacity:.55} /* 8.5 after-hours shading + 8.3 gridlines painted behind the tiles in every lane */ .dock-ah{position:absolute;top:0;bottom:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(45deg,rgba(70,95,130,.16) 0 7px,rgba(70,95,130,.05) 7px 14px)} .dock-gl{position:absolute;top:0;bottom:0;width:1px;background:#202832;pointer-events:none;z-index:0} .dock-gl.q{background:linear-gradient(to bottom,#1a212a 0 3px,transparent 3px 6px);background-size:1px 6px} /* 8.6 IN/OUT/BOTH toggle, 8.2 follow-now button, 8.7 UOM select */ .dockio{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden} .dockio button{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:5px 9px;background:transparent; color:var(--ink3);border:none;border-left:1px solid var(--line);cursor:pointer} .dockio button:first-child{border-left:none} .dockio button.on{background:var(--cyan);color:var(--scene,#0B0F12);font-weight:700} /* WAR ROOM DK-2: the window controls are primary operator actions — make them read like it (bigger type + hit area, visible affordance) instead of ghost buttons. */ .docknow{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:7px 12px;margin-left:8px; background:var(--panel2,rgba(128,128,128,.08));color:var(--ink);border:1px solid var(--line);border-radius:4px;cursor:pointer;font-weight:600} .docknow:hover{border-color:var(--amber)} .docknow.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.08)} .dockuom{background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink); font-family:var(--mono);font-size:8px;padding:2px 4px;cursor:pointer} /* 8.4/8.7 hourly load-profile strips */ .dprof{margin:12px 0 0 96px;display:flex;flex-direction:column;gap:10px} .dprof-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono); font-size:8.5px;letter-spacing:.08em;color:var(--ink2);margin-bottom:4px} .dprof-cn{color:var(--ink3);font-size:8px;display:flex;align-items:center;gap:6px} .dprof-track{position:relative;height:42px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;overflow:visible} .dprof-cap{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--amber);z-index:2;pointer-events:none} .dprof-bar{position:absolute;bottom:0;min-height:1px;opacity:.6;border-radius:2px 2px 0 0; display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;border-right:1px solid var(--panel2)} .dprof-bar.mhe{background:#9C8CFF} .dprof-bar.vol{background:#4FC3E8} .dprof-bar.over{background:var(--red);opacity:.85} .dprof-bar span{font-family:var(--mono);font-size:7.5px;color:var(--ink);margin-top:-11px;white-space:nowrap;pointer-events:none} /* execution screen */ #screen-execution{flex:1;display:none;min-height:0;flex-direction:row;overflow:hidden} #execleft{width:340px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0} #simbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)} #simclock{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums} #execlist{flex:1;overflow-y:auto;padding:6px 10px} .exrow{border:1px solid var(--line);border-radius:5px;margin:6px 0;padding:9px 11px;background:var(--panel2)} .exrow .r1{display:flex;align-items:center;gap:8px} .exrow .r2{display:flex;gap:12px;margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink3)} .expill{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;font-weight:700;border-radius:3px;padding:2px 7px} .ex-ontime{background:var(--green);color:var(--tint-green2)} .ex-late{background:var(--red);color:var(--tint-red2)} .ex-early{background:var(--cyan);color:#0A1A20} .ex-complete{background:#39424C;color:var(--ink)} .ex-loading{background:var(--amber);color:#1A1405} #execmapwrap{flex:1;position:relative;min-width:0} #execmap{position:absolute;inset:0;width:100%;height:100%} #execnote{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:9.5px;color:var(--ink3); background:color-mix(in srgb,var(--scene) 85%,transparent);border:1px solid var(--line);border-radius:4px;padding:5px 9px;pointer-events:none} @media (max-width:960px){ #screen-execution{flex-direction:column} #execleft{width:auto;max-height:46vh} #execmapwrap{height:46vh} #execrisks{width:auto!important;max-height:38vh;border-left:none;border-top:1px solid var(--line)} } /* risks & issues pane */ #execrisks{width:258px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel);min-height:0} .rk-title{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink2);padding:13px 13px 10px; border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px} #rk-count{margin-left:auto;font-weight:700;color:var(--tint-red2);background:var(--amber);border-radius:9px;padding:1px 8px;font-size:10px} #rk-count.zero{background:var(--green);color:var(--tint-green2)} #rk-body{flex:1;overflow-y:auto;padding:8px 10px 16px} .rk-group{margin-bottom:12px} .rk-head{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);margin:4px 2px 6px; display:flex;align-items:center;gap:6px} .rk-head .dot{width:7px;height:7px;border-radius:2px} .rk-item{border:1px solid var(--line);border-left-width:2px;border-radius:4px;background:var(--panel2); padding:7px 9px;margin-bottom:6px;cursor:pointer} .rk-item:hover{background:#20272f} .rk-item .r1{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:10px} .rk-item .r1 .ref{color:var(--amber);font-size:9.5px;letter-spacing:.06em} .rk-item .r1 .tag{margin-left:auto;font-size:8px;letter-spacing:.08em;font-weight:700} .rk-item .r2{font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.35} .rk-late{border-left-color:var(--red)}.rk-late .tag{color:var(--red)} .rk-risk{border-left-color:var(--amber)}.rk-risk .tag{color:var(--amber)} .rk-break{border-left-color:var(--cyan)}.rk-break .tag{color:var(--cyan)} .rk-rej{border-left-color:var(--red)}.rk-rej .tag{color:var(--red)} .rk-fut{border-left-color:var(--amber)}.rk-fut .tag{color:var(--amber)} .rk-short{border-left-color:#B58CFF}.rk-short .tag{color:#B58CFF} .rk-empty{color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-align:center;padding:40px 12px;line-height:2} .rk-acts{display:flex;gap:6px;margin-top:7px;align-items:center} .rk-btn{background:transparent;border:1px solid var(--line);border-radius:3px;font-family:var(--mono); font-size:7.5px;letter-spacing:.06em;padding:4px 7px;cursor:pointer;color:var(--ink2)} .rk-btn.notify{color:var(--cyan);border-color:rgba(79,195,232,.4)} .rk-btn.notify:hover{background:rgba(79,195,232,.1)} .rk-btn.clear{color:var(--ink3)} .rk-btn.clear:hover{color:var(--red);border-color:#5A2420} .rk-sent{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--green)} /* transport orders screen */ #screen-orders{flex:1;display:none;min-height:0;overflow:hidden;flex-direction:column} .opanes{flex:1;display:flex;flex-direction:row;min-height:0;min-width:0} .opanes>.opane{flex:1;min-width:0} @media (max-width:1250px){.opanes{flex-wrap:wrap}.opanes>.opane{min-width:340px}} .opane{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0} .opane+.opane{border-left:1px solid var(--line)} /* The pane header is a title plus a row of actions. `.t{flex:1}` with no min-width let the title shrink below its own content, so on a 1366-wide laptop it collapsed to a 69px column and wrapped "TRANSPORT ORDERS · STAGED FOR BATCH DROP" onto FOUR lines while the buttons kept their full size. (I caused this by adding ALLOCATE TO SERVICE without checking laptop width.) Now the title holds one line and the ACTIONS wrap to a second row when they no longer fit — the header grows by one row instead of shredding its own heading. */ .opane-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel)} .opane-head .t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);flex:1;white-space:nowrap} .opane-head .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--amber)} .olist{flex:1;overflow-y:auto;padding:6px 10px} .orow{display:flex;gap:10px;align-items:center;padding:7px 8px;border-bottom:1px solid var(--hover);font-family:var(--mono);font-size:10px;color:var(--ink2)} /* staged-by-operating-day strip — shows where a staged batch actually landed */ .ostrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-family:var(--mono)} .ostrip-lbl{font-size:8px;letter-spacing:.1em;color:var(--ink3)} .ostrip-day{font-size:8.5px;letter-spacing:.04em;color:var(--ink3);border:1px solid var(--line);border-radius:20px;padding:4px 9px;cursor:pointer;transition:all .12s} .ostrip-day:hover{border-color:#4A545E;color:var(--ink)} .ostrip-day.has{color:var(--ink2)} .ostrip-day.has b{color:var(--amber)} .ostrip-day.cur{border-color:var(--amber);color:var(--hi,var(--ink))} .ostrip-tot{font-size:8px;letter-spacing:.06em;color:var(--ink3);margin-left:auto} /* sticky column header for the transport-order panes */ .orow.ohdr{position:sticky;top:-6px;z-index:3;background:var(--panel);border-bottom:1px solid var(--line);cursor:default;user-select:none;padding-top:10px;padding-bottom:10px} .orow.ohdr:hover{background:var(--panel)} .orow.ohdr span{color:var(--ink3)!important;font-size:8px;letter-spacing:.09em;font-weight:700;text-transform:uppercase} .orow .oid{color:var(--ink3);width:76px;flex:none} /* Transport Orders board column widths (CEO top-ten #3): the board was set in fixed pixel columns, so a long linehaul ref (TO-LH-2151-1) either wrapped or was clipped while the rest of the row wasted space. The TO # column now sizes to its OWN content — never wrapped, never ellipsised — and every other column is tighter, with each value held to a single line. Narrower overall, and nothing an operator has to decipher. */ /* The board carries ten columns in a ~750px pane, so fixed pixel widths overflowed it: the deliver-to column was squeezed to ZERO width and the window column was clipped mid-value, while a long linehaul ref (TO-LH-2151-1) had nowhere to go. Now: the two ORDER-NUMBER columns size to their own content and are never wrapped, never ellipsised — an order number is the one thing an operator must be able to read and quote in full. Every other column is tighter, holds its value on ONE line, and the three descriptive columns share what's left (each with a floor, so none collapses). */ #screen-orders .orow{gap:6px} /* .oref is the linehaul leg's transport-order number (▲ TO-LH-2753-1). It had NO width rule at all, so it shrank like any flex item and wrapped onto two lines — the "LH transport order numbers don't fit" report. It is an order number: it sizes to its content and never wraps. */ #screen-orders .orow .oid,#screen-orders .orow .oco,#screen-orders .orow .oref{ width:auto;flex:0 0 auto;white-space:nowrap;overflow:visible;text-overflow:clip} .orow .oref{font-family:var(--mono);white-space:nowrap;flex:0 0 auto} #screen-orders .orow .ocust{width:auto;flex:1 1 90px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #screen-orders .orow .ogeo{flex:1 1 110px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #screen-orders .orow .osub{flex:0 1 62px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #screen-orders .orow .oload{width:62px;flex:none;white-space:nowrap} #screen-orders .orow .owin{width:86px;flex:none;white-space:nowrap} #screen-orders .orow .odue{width:58px;flex:none;white-space:nowrap} #screen-orders .orow .oage{width:44px;flex:none;white-space:nowrap} /* status badges range from "STAGED" to "STAGED · AWAITING CONSOL" — a fixed column wrapped the long ones onto two lines, so this column sizes to its content too and the flexible descriptive columns give up the difference. */ #screen-orders .orow .ostat{width:auto;flex:0 0 auto;white-space:nowrap;text-align:right} #screen-orders .orow .ostat i{white-space:nowrap} /* lane-leg rows put the status badge straight on the row (not inside .ostat), so it needs the same treatment — "STAGED · AWAITING CONSOLIDATION" was breaking in two. */ #screen-orders .orow>i[class^="st-"],#screen-orders .orow>i[class*=" st-"]{ flex:0 0 auto;white-space:nowrap;margin-left:auto;text-align:right} .orow .oco{color:var(--amber);width:66px;flex:none;font-size:9px;letter-spacing:.05em} .ox{border:1px solid var(--line2,#333D4B);border-left:3px solid var(--amber);border-radius:0 0 8px 8px; background:var(--panel);margin:-4px 0 8px;padding:12px 16px} .ox-h{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--ink3);margin-bottom:7px} .ox-line{display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:var(--ink2);padding:3px 0} .ox-line span:first-child{flex:1;color:var(--ink)} .ox-tl{display:flex;gap:0;overflow-x:auto;padding:4px 0 2px} .ox-step{flex:1;min-width:110px;position:relative;padding:12px 8px 0;text-align:center} .ox-step::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%); width:8px;height:8px;border-radius:50%;background:var(--line)} .ox-step::after{content:'';position:absolute;top:5px;left:calc(50% + 7px);right:calc(-50% + 7px);height:1px;background:var(--line)} .ox-step:last-child::after{display:none} .ox-step.on::before{background:var(--amber);box-shadow:0 0 7px rgba(255,176,32,.6)} .ox-step b{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink3)} .ox-step.on b{color:var(--amber)} .ox-step i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--ink2);margin-top:4px;line-height:1.7;word-break:break-word} .ox-note{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ink3);margin-top:9px} .orow .ocust{width:160px;flex:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orow{cursor:pointer;user-select:none} .orow.osel{background:rgba(255,176,32,.10);outline:1px solid var(--amber-dim)} .pd-btn{font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:5px 9px;border-radius:3px; border:1px solid var(--amber-dim);background:var(--panel2);color:var(--amber)} .pd-btn:hover{background:var(--hover)} /* a commit button on a day the optimiser is not on WILL refuse. It stays clickable — clicking offers to move the optimiser here — but it must not look like a live commit. */ .pd-btn.offday{border-style:dashed;opacity:.62} .orow .osub{flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orow .oload{width:88px;flex:none;text-align:right} .orow .owin{width:92px;flex:none;color:var(--ink3)} .orow .ostat{width:110px;flex:none;text-align:right} .orow .ostat i{font-style:normal;font-size:8.5px;padding:2px 6px;border-radius:3px;border:1px solid var(--line)} .orow .ostat .st-plan{color:var(--cyan);border-color:var(--cyan)} .orow .ostat .st-un{color:var(--red);border-color:var(--red)} .orow .ostat .st-com{color:var(--green);border-color:var(--green)} .orow .ostat .st-stg{color:var(--amber);border-color:var(--amber-dim)} .orow .ostat .st-exec{color:#7BC96F;border-color:#7BC96F} .orow .ostat .st-done{color:#5ED4A0;border-color:#5ED4A0} /* XD consolidation list: table-style header + a wider two-line status column */ .xdhdr{display:flex;gap:10px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink3)} .xdhdr .cotick{width:16px;flex:none} .xdhdr .oid{width:118px;flex:none} .xdhdr .ocust{width:160px;flex:none} .xdhdr .osub{flex:1} .xdhdr .oload{width:80px;flex:none;text-align:right} .xdhdr .ostat{width:158px;flex:none} .xpane .orow .oid{width:118px;color:#8FC1E8} .xpane .orow .oload{width:80px} .xpane .orow .ostat{width:158px;flex:none;text-align:left} .xpane .orow .ostat i{display:inline-block;font-style:normal;font-size:8px;padding:2px 5px;border-radius:3px;border:1px solid var(--line)} .xpane .orow .ostat em{display:block;font-style:normal;font-size:7.5px;color:var(--ink3);margin-top:2px;letter-spacing:.02em} .xpane .orow .omode{width:70px;flex:none;color:var(--ink2)} .xdhdr .omode{width:70px;flex:none} /* awaiting-list controls: column config, sort, export */ .xminibtn{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--ink2);background:var(--panel2); border:1px solid var(--line);border-radius:3px;padding:3px 7px;cursor:pointer} .xminibtn:hover{border-color:var(--amber-dim);color:var(--amber)} .xminibtn:disabled{opacity:.4;cursor:not-allowed} .lhcolmenu{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 10px;margin:2px 2px 6px;background:var(--panel2); border:1px solid var(--line);border-radius:5px;font-family:var(--mono);font-size:9px;color:var(--ink2)} .lhcolmenu label{display:flex;align-items:center;gap:5px;cursor:pointer} .lhcolmenu input{cursor:pointer} .lhcolhint{flex-basis:100%;color:var(--ink3);font-size:8px;letter-spacing:.04em} .xdhdr .lhsorth{cursor:pointer} .xdhdr .lhsorth:hover{color:var(--amber)} /* LIST / 3D view toggle + the 3D staging scene */ /* 2.7.1 — the LIST / 3D switch is a primary control: larger, bolder, clearly the toggle */ .xviewtog{display:flex;gap:0;margin-left:14px} .xviewtog button{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ink2); background:var(--panel2);border:1px solid var(--line);padding:7px 15px;cursor:pointer;transition:background .12s,color .12s} .xviewtog button:first-child{border-radius:5px 0 0 5px} .xviewtog button:last-child{border-radius:0 5px 5px 0;border-left:none} .xviewtog button:hover{color:#F06FB4;border-color:#F06FB4} .xviewtog button.on{background:#F06FB4;color:var(--panel3);border-color:#F06FB4;box-shadow:0 0 0 1px #F06FB4} .xd3dwrap{display:flex;flex-direction:column;flex:1;min-height:0;position:relative} .xd3dbar{display:flex;align-items:center;gap:12px;padding:6px 4px;flex-wrap:wrap} .xd3dttl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#F06FB4} .xd3dtog{display:flex;gap:4px} .xd3dtog button{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ink2); background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:4px 8px;cursor:pointer} .xd3dtog button.on{background:rgba(255,176,32,.14);color:var(--amber);border-color:var(--amber-dim)} .xd3dhint{font-family:var(--mono);font-size:8px;color:var(--ink3);margin-left:auto} #xd3d{flex:1;min-height:340px;width:100%;background:#0E1216;border:1px solid var(--line);border-radius:6px;cursor:grab;touch-action:none} .xd3dtip{position:absolute;z-index:50;max-width:180px;background:rgba(11,15,18,.97);border:1px solid var(--cyan); border-radius:5px;color:var(--ink);font-family:var(--mono);font-size:9px;line-height:1.6;padding:8px 10px;pointer-events:none} .xd3dtip i{font-style:normal;font-size:8px;padding:1px 4px;border-radius:3px;border:1px solid var(--line)} .xd3dtip .st-stg{color:var(--amber);border-color:var(--amber-dim)} .xd3dtip .st-plan{color:var(--cyan);border-color:var(--cyan)} .mpn{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.08em;font-weight:700; color:var(--tint-red2);background:var(--red);border-radius:3px;padding:2px 5px;margin-left:6px; animation:mpnpulse 1.2s ease-in-out infinite} @keyframes mpnpulse{0%,100%{opacity:1}50%{opacity:.55}} @media (prefers-reduced-motion:reduce){.mpn{animation:none}} /* execute screen */ #screen-execute{flex:1;display:none;overflow-y:auto;background:var(--ground)} @media (max-width:960px){ #screen-orders{flex-direction:column} .opane+.opane{border-left:none;border-top:1px solid var(--line)} .olist{max-height:44vh} } /* ---------- customer + supply order book ---------- */ #screen-custorders{display:none;flex:1;min-height:0;overflow-y:auto;padding:0 20px 40px} #screen-supply{display:none;flex:1;min-height:0;overflow-y:auto;padding:16px 20px 40px} /* The header is now a stack of FIXED rows, not one reflowing bar. Each row lays its controls out left-to-right and never wraps — so a button's position never depends on the text in the button beside it. When a row is wider than the screen it scrolls sideways within itself; it does not push its neighbours. */ .po-head{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px; position:sticky;top:0;z-index:60; background:var(--ground); margin-left:-20px;margin-right:-20px;padding:11px 20px 9px; border-bottom:1px solid var(--line); box-shadow:0 8px 18px -6px rgba(0,0,0,.85)} .po-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; scrollbar-width:thin} .po-row::-webkit-scrollbar{height:5px} .po-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .po-row-actions{gap:8px} /* a thin vertical divider between logical groups on the actions row */ .po-sep{flex:0 0 auto;width:1px;height:22px;background:var(--line);margin:0 2px} /* engine controls, top-left on the route-optimisation map */ /* sit in a row immediately to the RIGHT of the map's (shrunken) zoom +/- control */ #engine-stack{position:absolute;top:11px;left:44px;z-index:1150;display:flex;flex-direction:row;gap:6px;align-items:flex-start} #engine-stack .btn{white-space:nowrap;box-shadow:0 4px 14px -4px rgba(0,0,0,.7);text-align:left;padding:7px 12px;font-size:10px;line-height:1.15} /* smaller zoom +/- so the engine buttons can sit beside it */ .leaflet-control-zoom{margin:11px 0 0 11px !important;border:none !important;box-shadow:0 2px 8px -3px rgba(0,0,0,.7) !important} .leaflet-control-zoom a{width:24px !important;height:24px !important;line-height:24px !important;font-size:15px !important;background:#161C22 !important;color:var(--ink) !important;border-color:var(--line) !important} .leaflet-control-zoom a:hover{background:#1E262E !important} #engine-stack .btn.stowbtn{border-color:var(--green);color:var(--green);background:rgba(11,15,18,.92)} #engine-stack .btn.stowbtn:hover{background:rgba(93,208,140,.14)} #engine-stack .btn.stowbtn.running{background:rgba(93,208,140,.16);color:var(--green)} #engine-stack .btn.ffbtn{border-color:#5FA8FF;color:#8FC1E8;background:rgba(11,15,18,.92)} #engine-stack .btn.ffbtn:hover{background:rgba(95,168,255,.14)} #engine-stack .btn.ffbtn.running{background:rgba(95,168,255,.16);color:#8FC1E8} #engine-stack .btn.stowbtn .cheng,#engine-stack .btn.ffbtn .cheng{display:block;font-style:normal;font-size:7.5px;letter-spacing:.06em;opacity:.85;margin-top:2px} /* On a touch device (any phone/tablet, any orientation) the two engine buttons crowded the map. Target by POINTER TYPE, not a width guess — a width breakpoint kept missing iPads (768px) and landscape phones (844px+). pointer:coarse = touch; desktops (fine) unaffected. */ @media (pointer:coarse), (max-width:760px){ #engine-stack{top:11px;left:40px;gap:4px} #engine-stack .btn{font-size:8px;letter-spacing:.02em;padding:5px 8px;box-shadow:0 2px 8px -3px rgba(0,0,0,.7)} #engine-stack .btn.stowbtn .cheng,#engine-stack .btn.ffbtn .cheng{font-size:6px;margin-top:1px} .leaflet-control-zoom a{width:20px !important;height:20px !important;line-height:20px !important;font-size:13px !important} } .route .r2.rl-stow{border-top:1px dashed var(--line);margin-top:4px;padding-top:4px;font-size:9px} /* uncommitted-load detail: run summary + per-leg km / time */ .rdet-sum{display:flex;flex-wrap:wrap;gap:6px 14px;padding:7px 4px 8px;font-family:var(--mono);font-size:9px; letter-spacing:.05em;color:var(--ink3);border-bottom:1px solid var(--line);margin-bottom:4px} .rdet-sum b{color:var(--ink);font-weight:700} .rdet-sum .rdet-rest b{color:var(--amber)} #detail .rdet-leg{font-family:var(--mono);color:var(--ink2);white-space:nowrap;font-size:9px} .hero-indic{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink3);margin-top:2px;cursor:help} #screen-custorders .po-note{display:none} #to-isobar{flex:none;display:none;align-items:center;gap:12px; font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--amber); border-bottom:1px solid var(--amber-dim);background:rgba(255,176,32,.08); padding:7px 14px} #to-isobar b{color:var(--ink)} #to-isobar .btn{margin-left:auto} #po-isobar{flex-basis:100%;display:none;align-items:center;gap:12px; font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--amber); border:1px solid var(--amber-dim);background:rgba(255,176,32,.08); border-radius:5px;padding:6px 10px;margin-top:2px} #po-isobar b{color:var(--ink)} #po-isobar .btn{margin-left:auto} /* the header must not reflow when a count changes — reserve the space instead */ .po-head .panel-title{flex:0 0 auto;white-space:nowrap} /* GM found this by eye at 390px: #po-count INHERITS white-space:nowrap from .panel-title above (an inherited property, not re-set here), which is fine for the short static "ORDER BOOK ·" prefix but not for the dynamic suffix — an isolate/filter message like "CO-101 ONLY — UNSELECT ALL TO SHOW THE BOOK" is long and was running off the right edge uncontained (measured: rect.right 458px on a 390px viewport). Overriding back to white-space:normal here lets ONLY the dynamic count/message text wrap; the static title text before it, and the "must not reflow" comment's intent for THAT text, are untouched — .panel-title itself still never wraps or reflows. */ /* max-width is load-bearing here, not decoration: .po-row-actions is a horizontally SCROLLING container by design (the button toolbar), which gives an inline-block child effectively unlimited width to lay out in — white-space:normal alone did not wrap the text (measured: still 458px right edge, unchanged) because nothing was forcing a wrap point within the visible viewport. Capping the width is what actually makes it wrap. */ .po-head #po-count{display:inline-block;min-width:120px;max-width:min(70vw,400px);text-align:left;white-space:normal} .po-head .btn,.po-head .cof,.po-head select,.po-head .pd-btn{flex:0 0 auto} .po-head .btn{min-width:var(--bw,auto);white-space:nowrap} #po-selall{min-width:168px} #po-selnone{min-width:132px} #po-stage{min-width:228px} #po-del{min-width:156px} #po-globor{min-width:250px} /* the widest option is MANUAL SPLIT & PATH… */ #po-span-sel{min-width:150px} /* …and 10 DAY ROLLING here */ .po-filters{display:flex;gap:6px;flex:0 0 auto} /* condensed action clusters on row 1 */ .po-cluster{display:flex;align-items:center;gap:5px;flex:0 0 auto;padding:3px 5px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.015)} .po-cluster .btn.sm{font-size:9px;letter-spacing:.04em;padding:6px 9px} .po-stage-cluster{border-color:var(--amber-dim);background:rgba(255,176,32,.05)} /* SPLIT & STAGE — the key action, emphasised */ .po-stage-btn{background:var(--amber);border-color:var(--amber);color:#120A02;font-weight:800;font-size:11px;letter-spacing:.06em;padding:10px 18px;box-shadow:0 6px 18px -8px rgba(255,176,32,.6)} .po-stage-btn:hover{background:#FFC24D;border-color:#FFC24D} /* DEMAND TYPE multi-select dropdown */ .pmdrop{position:relative;flex:0 0 auto} .pmdrop-trig{white-space:nowrap} .pmdrop-trig.on{border-color:var(--amber-dim);color:var(--amber)} .pmdrop-panel{position:fixed;z-index:1200;min-width:210px;background:var(--panel2);border:1px solid var(--line2,#2E353D);border-radius:7px;padding:8px;box-shadow:0 14px 34px -14px rgba(0,0,0,.85);display:flex;flex-direction:column;gap:2px} .pmdrop-cap{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--ink3);padding:2px 4px 6px;text-transform:uppercase} .pmdrop-panel label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--ink);padding:6px 6px;border-radius:5px;cursor:pointer} .pmdrop-panel label:hover{background:rgba(255,255,255,.04)} .pmdrop-panel input{accent-color:var(--amber);cursor:pointer} .po-note{flex-basis:100%;font-size:11.5px;color:var(--ink3);line-height:1.5;max-width:1050px} #po-list,#so-list{margin-bottom:26px} .pocard{display:flex;align-items:flex-start;gap:16px;background:var(--panel);border:1px solid var(--line); border-radius:7px;padding:9px 14px;margin-bottom:6px;cursor:pointer} .pocard.sel{border-color:var(--amber-dim);background:rgba(255,176,32,.05)} .pocard.staged{opacity:.82} .pocard .poid{width:275px;flex:none;line-height:1.4} /* CEO P1 (2026-07-27T00:05Z) mobile ask #4 — the LARGEST single overflow measured on this screen at 390px: .poid is a flex sibling of .posplit inside .pocard (display:flex, i.e. a ROW), fixed at 275px regardless of viewport. On every card, expanded or not, that alone left under 100px for the constraint rail + body beside it. Stack instead of sitting side-by-side once the card is this narrow, same breakpoint used throughout this section. */ @media (max-width:720px){ .pocard{flex-wrap:wrap} .pocard .poid{width:100%;flex-basis:100%} } .poref{font-family:var(--mono);font-size:11px;font-weight:700;color:#FFB020;letter-spacing:.06em} .pocard.staged .poref{color:#5ED4A0} .pocust{font-size:12px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* the transport-order board's own header: FROM / TO state, governing BOTH panes */ #screen-orders .obar{flex:none;display:flex;align-items:center;gap:12px;padding:9px 14px; border-bottom:1px solid var(--line);background:var(--panel)} #screen-orders .obl{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3)} #screen-orders .obl.on{color:var(--cyan)} a.tolink{color:inherit;text-decoration:underline;text-decoration-style:dotted; text-underline-offset:2px;cursor:pointer} a.tolink:hover{color:var(--cyan);text-decoration-style:solid} .ogeo{flex:0 0 232px;font-family:var(--mono);font-size:8.5px;color:var(--ink3); letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ogeo b{color:var(--cyan);font-weight:800} .podest{font-family:var(--mono);font-size:8.5px;color:var(--ink3);letter-spacing:.04em} /* the ⇄ jump lives ON the booking tile: a linehaul has two dock touches at two sites on two days, and this walks you from one to the other */ .dock-tile .tjump{position:absolute;top:3px;right:3px;z-index:3; background:rgba(11,15,18,.72);border:1px solid rgba(255,255,255,.34);border-radius:3px; color:#fff;font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.04em; padding:2px 5px;cursor:pointer;line-height:1.2;white-space:nowrap;opacity:.82} .dock-tile .tjump:hover{opacity:1;background:var(--cyan);border-color:var(--cyan);color:var(--scene)} .dock-tile.inb .tjump{background:rgba(11,15,18,.72);border-color:currentColor;color:inherit} .dock-tile.inb .tjump:hover{background:var(--cyan);color:var(--scene);border-color:var(--cyan)} .wontfit{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.06em; color:var(--red);background:rgba(255,107,93,.12);border:1px solid rgba(255,107,93,.5); border-radius:3px;padding:2px 5px;margin-left:6px;white-space:nowrap} .postate{color:var(--cyan);font-weight:700;background:rgba(79,195,232,.1); border:1px solid rgba(79,195,232,.3);border-radius:3px;padding:1px 4px;margin-right:4px} .poprop{flex:1;min-width:0} /* the card body takes ALL the width left of the identity column, and every child of it (nested delivery tiles, item table, proposal hint) stretches to fill it */ .pobody{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .pobody>*{width:100%} .porow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.04em; color:var(--ink2);padding:3px 0;border-top:1px dashed var(--line)} .porow:first-child{border-top:none} .porow .pdk{color:var(--ink3);width:58px;flex:none} .porow .pdp{color:var(--ink);font-weight:700;width:88px;flex:none} .porow .pth{color:#4FC3E8} .porow .pth.direct{color:#7BC96F} .poact{width:235px;flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end} .poor{background:var(--panel2);border:1px solid var(--line);border-radius:4px;color:var(--ink2); font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:5px 7px;width:auto;max-width:170px} /* origin/destination sit as one compact pair, not two full-width rows */ .po-geo{display:flex;align-items:center;gap:4px} .po-geo .poor{max-width:118px} .po-geo .geoarrow{font-family:var(--mono);font-size:9px;color:var(--ink3)} .popill{font-family:var(--mono);font-size:7px;letter-spacing:.08em;font-weight:700;border-radius:3px;padding:2px 6px;margin-left:6px} .popill.type{border:1px solid #9C8CFF;color:#9C8CFF} .popill.shop{border:1px solid #5ED4A0;color:#5ED4A0} .popill.stg{background:#5ED4A0;color:#10261C} .popill.uns{border:1px solid var(--amber-dim);color:var(--amber)} .popill.due{background:var(--amber);color:#1A1206} .pocdrefs{font-family:var(--mono);font-size:8.5px;color:#F06FB4;letter-spacing:.05em;line-height:1.7} .pocdrefs b{cursor:pointer;border-bottom:1px dotted #F06FB4} .copill.parent{border:1px solid #FFB020;color:#FFB020} .popill.frt{border:1px solid #F06FB4;color:#F06FB4} .poitbtn{margin-left:auto;background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--ink2); font-family:var(--mono);font-size:9px;padding:3px 9px;cursor:pointer} .poitbtn:hover{border-color:var(--cyan);color:var(--cyan)} .podel{background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--ink3); font-family:var(--mono);font-size:9px;padding:3px 8px;cursor:pointer} .podel:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,93,.08)} .po-winlab{font-family:var(--mono);font-size:9px;color:var(--ink3);letter-spacing:.05em; align-self:center;padding-left:8px;white-space:nowrap;min-width:150px} #po-win .cof:disabled{opacity:.35;cursor:not-allowed} .jt-off{position:absolute;top:22%;font-family:var(--mono);font-size:12px;font-weight:700; color:var(--amber);cursor:help} .jt-off.l{left:-9px} .jt-off.r{right:-9px} .route.lane{border-left:2px solid #F06FB4} .route.lane.sel{border-color:#F06FB4;box-shadow:0 0 0 1px #F06FB4 inset} .lhbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0 10px; border-bottom:1px solid var(--line);margin-bottom:8px} .lhbar .ap-hint{max-width:520px;line-height:1.5} /* the journey strip needs room inside a nested delivery row */ .poitems{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 12px;margin:0; width:100%;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start} .poitems-viz{flex:0 0 auto} .poitems-lines{flex:1;min-width:0} .pofreight3d{display:block;background:#11151A;border:1px solid var(--line);border-radius:6px;width:330px;max-width:44vw;height:150px} .poit-sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle} /* minmax(0,1fr), not a bare 1fr — a grid track's default minimum is its content's min-content width, so one long unbroken product name was enough to force this whole row (and the order card, and the screen around it) wider than the viewport. Measured at 390px: without this, .poit ran to 204px starting AT the edge of the card. */ .poit{display:grid;grid-template-columns:minmax(0,1fr) auto 52px 52px;gap:10px;font-family:var(--mono);font-size:9px; color:var(--ink2);padding:3px 0;border-bottom:1px dashed var(--line)} .poit:last-child{border-bottom:none} .poit-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the qty/pallets/tonnes columns are fixed-width by design (numbers stay aligned down the list) — at 720px and under there is no longer room for all three beside a shrunk name column, so the row wraps to two lines instead of forcing the card wider than its screen. */ @media (max-width:720px){ .poit{grid-template-columns:auto auto auto;row-gap:2px} .poit-name{grid-column:1/-1} } .ponprod{margin:6px 0 2px} .pondref.on{text-decoration:underline} @media (max-width:720px){.poitems{flex-direction:column}.pofreight3d{max-width:100%}} .ffno{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap; font-family:var(--mono);font-size:8px;letter-spacing:.04em;line-height:1.6; color:var(--red);background:rgba(255,107,93,.12);border:1px solid var(--red); border-radius:4px;padding:6px 8px;margin:0 0 7px} .ffno b{flex:0 0 100%} .ffno span{flex:1;color:#FFB3AC} .ffno button{background:none;border:none;color:var(--red);cursor:pointer;font-size:10px;padding:0 2px} .ffcard.dragging{opacity:.45;border-color:var(--amber)} .lhrs{font-family:var(--mono);font-size:8px;letter-spacing:.05em;line-height:1.6; background:rgba(79,195,232,.07);border-left:2px solid var(--cyan); border-radius:0 3px 3px 0;padding:5px 8px;margin:0 0 8px} .lhrs.over{background:rgba(255,107,93,.09);border-left-color:var(--red)} .lh1{display:flex;gap:8px;align-items:center;color:var(--cyan)} .lhrs.over .lh1{color:var(--red)} .lh1 b{font-size:9px} .lh1 span{color:var(--ink2)} .lh2{display:flex;gap:10px;color:var(--ink3);margin-top:2px} .lh3{color:var(--red);margin-top:3px;line-height:1.5} .dropreq{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 1px} .req{font-family:var(--mono);font-size:7px;letter-spacing:.05em;padding:2px 5px; border-radius:3px;border:1px solid var(--line);color:var(--ink3);background:var(--panel2)} .req.veh{border-color:#3A4650;color:var(--ink2)} .req.unl{border-color:#3A4650;color:var(--ink2)} .req.unl.crane{border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.09)} .req.unl.hand{border-color:#C77DFF;color:#C77DFF;background:rgba(199,125,255,.09)} .req.warn{border-color:var(--red);color:var(--red);background:rgba(255,107,93,.08); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #nextrunbar{display:none;align-items:center;gap:7px;font-family:var(--mono);font-size:8px; letter-spacing:.05em;padding:5px 8px;margin:0 0 5px;border-radius:0 3px 3px 0; color:var(--amber);background:rgba(255,176,32,.08);border-left:2px solid var(--amber)} #nextrunbar button{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;padding:4px 8px; border-radius:3px;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);cursor:pointer} #nextrunbar button:hover{background:var(--hover);border-color:var(--amber)} #nextrunbar button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.12)} #nextrunbar .chain{color:#5ED4A0} .nrpop{position:absolute;inset:0;background:rgba(6,9,12,.72);z-index:900; display:flex;align-items:center;justify-content:center} .nr-card{width:min(980px,92%);max-height:82%;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--amber);border-radius:8px;overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6)} .nr-h{display:flex;align-items:center;gap:10px;padding:11px 14px; border-bottom:1px solid var(--line);background:rgba(255,176,32,.08)} .nr-h b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--amber)} .nr-modes{display:flex;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line)} .nr-modes button{flex:1;font-family:var(--mono);font-size:8px;letter-spacing:.06em; padding:9px;border-radius:4px;border:1px solid var(--line);background:var(--panel2); color:var(--ink2);cursor:pointer;text-align:left;line-height:1.6} .nr-modes button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.1)} .nr-modes button i{display:block;color:var(--ink3);font-style:normal;font-size:7px} .nr-modes button.on i{color:var(--amber-dim)} .nr-body{overflow:auto;padding:10px 14px 14px} .nr-row{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:8px; padding:7px 8px;margin-bottom:5px;border:1px solid var(--line);border-radius:4px; color:var(--ink2);cursor:pointer;background:var(--panel2);overflow:hidden} .nr-row:hover{border-color:var(--amber)} .nr-row.best{border-color:#5ED4A0} .nr-ref{flex:0 1 96px;min-width:64px;color:var(--cyan);display:flex;align-items:center;gap:5px} .nr-plan{font-style:normal;font-size:6.5px;padding:1px 3px;border-radius:2px; border:1px solid var(--ink3);color:var(--ink3)} .nr-cust{flex:1 1 130px;min-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nr-from{flex:1 1 130px;min-width:70px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nr-empty{flex:0 1 106px;min-width:70px;color:var(--amber);white-space:nowrap} .nr-home{flex:0 1 112px;min-width:70px;color:var(--ink3);white-space:nowrap;overflow:hidden} .nr-hrs{flex:0 1 104px;min-width:66px;color:var(--ink3);white-space:nowrap} /* pinned, and it stays INSIDE the outline of the row it belongs to */ .nr-take{flex:0 0 auto;margin-left:auto;font-size:7.5px;padding:4px 9px;border-radius:3px; white-space:nowrap;border:1px solid var(--amber);color:var(--amber);background:transparent} .nr-none{font-family:var(--mono);font-size:8px;color:var(--ink3);padding:14px;line-height:1.7} .nr-warn{font-family:var(--mono);font-size:8px;line-height:1.6;color:var(--amber); background:rgba(255,176,32,.1);border:1px solid var(--amber);border-radius:4px; padding:7px 9px;margin:0 0 9px} .nr-badge{font-size:7px;padding:1px 4px;border-radius:2px;border:1px solid #5ED4A0;color:#5ED4A0} #unasspop{position:absolute;inset:0;background:rgba(6,9,12,.72);z-index:900; display:flex;align-items:center;justify-content:center} .up-card{width:min(1320px,95%);max-height:88%;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--red);border-radius:8px;overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6)} .up-h{display:flex;align-items:center;gap:10px;padding:11px 14px; border-bottom:1px solid var(--line);background:rgba(255,107,93,.08)} .up-h b{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--red)} .up-body{overflow:auto;padding:14px 18px 18px} .up-grp{margin-bottom:18px} .up-why{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px; letter-spacing:.05em;color:var(--red);padding:8px 0 6px;border-bottom:1px solid var(--line)} .up-why span{margin-left:auto;color:var(--ink3);font-size:11px} .up-fix{font-family:var(--mono);font-size:11px;line-height:1.75;color:#5ED4A0; background:rgba(94,212,160,.07);border-left:3px solid #5ED4A0;padding:8px 11px; margin:7px 0 6px;border-radius:0 3px 3px 0} .up-row{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px; padding:7px 3px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--ink2)} .up-row a{color:var(--cyan);text-decoration:none;flex:0 0 84px} .up-row a:hover{text-decoration:underline} .up-cust{flex:1 1 180px;min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-sub{flex:0 1 130px;min-width:88px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-from{flex:1 1 180px;min-width:110px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-load{flex:0 1 190px;min-width:120px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-win{flex:0 0 96px;color:var(--cyan)} .up-flag{font-size:9px;padding:2px 6px;border:1px solid var(--amber);color:var(--amber);border-radius:2px;white-space:nowrap} #escope{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8px; letter-spacing:.06em;color:#C77DFF;background:rgba(199,125,255,.09); border-left:2px solid #C77DFF;padding:5px 8px;margin:0 0 6px;border-radius:0 3px 3px 0} #escope button{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;padding:3px 7px; border-radius:3px;border:1px solid #C77DFF;background:transparent;color:#C77DFF;cursor:pointer} #escope button:hover{background:rgba(199,125,255,.18)} #site-now{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8px; letter-spacing:.06em;color:var(--amber);background:rgba(255,176,32,.08); border-left:2px solid var(--amber);padding:5px 8px;margin:0 0 6px;border-radius:0 3px 3px 0} #site-now i{color:var(--ink3);font-style:normal} #rselbar{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px; letter-spacing:.06em;color:var(--cyan);background:rgba(79,195,232,.09); border-left:2px solid var(--cyan);padding:5px 8px;margin:0 0 6px;border-radius:0 3px 3px 0} #rselbar button{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;padding:3px 7px; border-radius:3px;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);cursor:pointer} #rselbar button:hover{background:var(--hover)} #rselbar button.go{border-color:var(--amber);color:var(--amber)} .lbhint{font-family:var(--mono);font-size:8px;letter-spacing:.04em;color:#5ED4A0; background:rgba(94,212,160,.08);border-left:2px solid #5ED4A0;border-radius:0 3px 3px 0; padding:4px 7px;margin:4px 0 0;line-height:1.5} .lbhint i{color:var(--ink3);font-style:normal} .pohint{font-family:var(--mono);font-size:8.5px;color:var(--ink3);letter-spacing:.04em;padding:5px 2px 1px} .porec{margin-top:7px;border:1px solid rgba(93,208,140,.3);border-radius:5px;padding:6px 8px; background:rgba(93,208,140,.05)} .porec.ovr{border-color:var(--amber-dim);background:rgba(255,176,32,.06)} .porec .prt{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:#5DD08C;margin-bottom:4px} .porec.ovr .prt{color:var(--amber)} .prl{display:grid;grid-template-columns:1fr 78px 108px;gap:6px;font-family:var(--mono);font-size:8.5px; color:var(--ink3);padding:1.5px 0} .prl.best{color:var(--ink);font-weight:700} .prl .prn{color:var(--ink3);text-align:right;font-weight:400} .pohint b{color:var(--ink2)} .ponest{margin-top:0;border-left:2px solid var(--line);padding-left:12px; display:flex;flex-direction:column;gap:7px;width:100%;min-width:0} /* the delivery identity sits in a narrow left column; the TIMELINE owns the rest of the tile and stretches to fill it */ .ponrow{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 12px; display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start; width:100%;box-sizing:border-box} /* CEO P1 (2026-07-27) — TWO bugs in one, both from leaving grid placement to AUTO. .ponrow renders 2 children normally (.ponhead, .ponbody) but a THIRD (.ponprod, the SKU/items panel) joins whenever the delivery is also expanded — and this grid only ever declared 2 COLUMNS, never assigned rows. Auto-placement then does something different depending on which children exist: - 2 children: ponhead->col1 (210px), ponbody->col2 (minmax(0,1fr) resolves to whatever is left — MEASURED 54px at 390px, nested 4 deep inside .pocard/.posplit/ .pobody/.ponest each narrowing it a little). The .journey-v fix (word-break on a real word) then had so little width that every word broke one character per line ("RAISED" as six stacked single letters) — a WRAP, not an overflow, so nothing already measured (clipping, side-scroll) ever saw it. - 3 children (delivery ALSO expanded to show its SKUs): worse, not just narrower. .ponprod can't fit col2 of row 1 (it needs to span full width), so auto-placement pushes it to row 2 spanning both columns, and then — because sparse packing never backtracks to the gap it left in row 1 — .ponbody is pushed to row 3, col1, i.e. the FIXED 210px column, while .ponprod itself gets squeezed into a MEASURED 54px leftover in row 1 col2. Every SKU name in the panel wrapped one character per line the same way "RAISED" did — a second surface with the identical failure, never reached by the mobile-journey gate check because it happened to test the 2-CHILD (not-yet-expanded) shape. Fixed by placing all three EXPLICITLY, so the layout never depends on which of them exist or what order they render in: identity and journey always pair on row 1, the items panel always owns its own full-width row 2 when present. */ .ponhead{display:flex;flex-direction:column;align-items:flex-start;gap:3px; font-family:var(--mono);font-size:9.5px;color:var(--ink2);min-width:0; grid-column:1;grid-row:1} .ponhead span{white-space:normal;line-height:1.45;font-size:9px;color:var(--ink3)} .ponbody{min-width:0;display:flex;flex-direction:column;gap:2px;grid-column:2;grid-row:1} .ponprod{grid-column:1/-1;grid-row:2} @media (max-width:480px){ .ponrow{grid-template-columns:1fr} .ponhead{grid-column:1;grid-row:1} .ponbody{grid-column:1;grid-row:2} .ponprod{grid-column:1;grid-row:3} } .ponbody .journey-wrap{width:100%} .ponbody .journey{flex:none;width:100%;height:66px;margin:0 0 2px} .pondref{color:var(--amber);cursor:pointer;font-weight:700} .pondref:hover{text-decoration:underline} /* the milestone track: the SAME axis as the timeline above it */ .cotl{position:relative;width:100%;margin-top:3px} .cotl .cotl-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:0} .cotl .tlm{position:absolute;top:0;box-sizing:border-box;min-width:0;overflow:hidden;z-index:1} .cotl .tlm .tlk,.cotl .tlm .tlp,.cotl .tlm .tla2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cotl .tlm.narrow{padding:3px 4px} .cotl .tlm.narrow .tlp,.cotl .tlm.narrow .tla2{display:none} /* a milestone that runs past the edge of the window is CLIPPED, and says so */ .cotl .tlm.cutL{border-left-style:dashed;border-top-left-radius:0;border-bottom-left-radius:0} .cotl .tlm.cutR{border-right:2px dashed var(--ink3);border-top-right-radius:0;border-bottom-right-radius:0} .cotl-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:8px;letter-spacing:.05em;color:var(--ink3); border:1px dashed var(--line);border-radius:4px;opacity:.75} .tlarr{display:none} /* the axis shows the sequence now */ .tlm{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer; border:1px solid var(--line);border-left:3px solid var(--ink3);border-radius:4px; padding:5px 9px;background:var(--panel)} .tlm:hover{border-color:var(--cyan);background:var(--panel2)} /* WAR ROOM E-4: the timeline was 7.5–8px ink3-on-panel — unreadable. Bigger type, primary ink. */ .tlm .tlk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ink);white-space:nowrap} .tlm .tlp{font-family:var(--mono);font-size:9px;color:var(--ink2);white-space:nowrap} .tlm .tla2{font-family:var(--mono);font-size:9px;color:var(--ink2);white-space:nowrap} .tlm.hit .tla2{color:#5ED4A0;font-weight:700} .tlm .tla2.late{color:#FF6B5D;font-weight:700} .tlm.to{border-left-color:#FFB020} .tlm.to .tlk{color:#FFB020} .tlm.ld{border-left-color:#4FC3E8} .tlm.ld .tlk{color:#4FC3E8} .tlm.dk{border-left-color:#B58CFF} .tlm.dk .tlk{color:#B58CFF} .tlm.ex{border-left-color:#5ED4A0} .tlm.ex .tlk{color:#5ED4A0} .tlm.dl{border-left-color:var(--ink3)} .tlm.lh{border-left-color:#FF8A4A} .tlm.lh .tlk{color:#FF8A4A} .tlm.st-done{border-left-color:#5ED4A0} /* ---------- S&OP ---------- */ #screen-sop{display:none;flex:1;min-height:0;overflow-y:auto;padding:16px 20px 40px} .sop-chart{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 14px 8px;margin-bottom:10px} .sop-ct{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px} .sop-ct .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink2);font-weight:700} .sop-read{font-family:var(--mono);font-size:8.5px;color:var(--ink3);letter-spacing:.04em;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56%} .sop-leg{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px} .sop-leg span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ink2);display:flex;align-items:center;gap:5px} .sop-leg i{width:14px;height:3px;border-radius:2px;display:inline-block} .sop-chart canvas{width:100%;height:200px;display:block;cursor:crosshair} #sop-wc{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .wc-card{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 16px;min-width:170px} .wc-card .k{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink3)} .wc-card .v{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);margin-top:3px} .wc-card .s{font-family:var(--mono);font-size:8px;color:var(--ink3);margin-top:2px} #sop-inv{background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden} .inv-row{display:grid;grid-template-columns:1.6fr .8fr .7fr .7fr 1.4fr .6fr .8fr .9fr;gap:8px;align-items:center; padding:7px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--ink2)} .inv-row:last-child{border-bottom:none} .inv-row.hd{font-size:7.5px;letter-spacing:.1em;color:var(--ink3);background:var(--panel2)} .inv-row b{color:var(--ink);font-weight:700} .inv-fac{display:flex;align-items:center;gap:8px} .inv-dot{width:8px;height:8px;border-radius:2px;flex:none} .inv-type{font-size:7px;letter-spacing:.08em;border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--ink3)} .cover-bar{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;position:relative} .cover-bar i{display:block;height:100%;border-radius:4px} .cover-bar u{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink3);opacity:.8} .inv-pill{font-size:8px;font-weight:700;letter-spacing:.05em;border-radius:3px;padding:1px 6px;text-align:center} .copill.supply{border:1px solid #9C8CFF;color:#9C8CFF} .copill.shopf{border:1px solid #5ED4A0;color:#5ED4A0} #co-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px} #co-filters{display:flex;gap:6px} .cof{background:var(--panel2);border:1px solid var(--line);border-radius:4px;color:var(--ink2); font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:7px 12px;cursor:pointer} .cof.on{border-color:var(--amber-dim);color:var(--amber);background:rgba(255,176,32,.08)} .cosp{background:var(--panel2);border:1px solid var(--line);border-radius:4px;color:var(--ink2); font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:7px 12px;cursor:pointer} .cosp.on{border-color:var(--amber-dim);color:var(--amber);background:rgba(255,176,32,.08)} #co-note{flex-basis:100%;font-size:11.5px;color:var(--ink3);line-height:1.5;max-width:900px} #co-intake{display:flex;align-items:center;gap:10px;flex:0 0 auto} #co-intake .ctl{display:flex;align-items:center;gap:7px} #co-intake .ctl label{white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink2)} #co-intake input[type=range]{width:72px} #co-intake #gendemo{flex:0 0 auto;white-space:nowrap} #co-win{display:flex;align-items:center;gap:6px} #cowlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--amber);font-weight:700; border:1px solid var(--amber-dim);border-radius:4px;padding:6px 11px;white-space:nowrap} /* thin journey bars: dots = facilities/destination, lines = legs across the day timeline */ .cocard{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line); border-radius:7px;padding:7px 14px;margin-bottom:6px;min-height:52px} .cocard .cid{width:225px;flex:none;line-height:1.35} .coref{font-family:var(--mono);font-size:11px;font-weight:700;color:#F06FB4;letter-spacing:.06em} .cocust{font-size:12px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .codest{font-family:var(--mono);font-size:8.5px;color:var(--ink3);letter-spacing:.04em} .copill{font-family:var(--mono);font-size:7px;letter-spacing:.08em;font-weight:700;border-radius:3px;padding:2px 6px;margin-left:6px} .copill.local{border:1px solid var(--line);color:var(--ink3)} .codetail{background:var(--panel2);border:1px solid var(--line);border-top:none;border-radius:0 0 7px 7px;margin:-6px 0 6px;padding:8px 14px} .cdhead{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);margin-bottom:4px} .cdrow{display:flex;align-items:center;gap:14px;font-size:11px;padding:5px 0;border-top:1px dashed var(--line)} .cdrow .cdk{font-family:var(--mono);font-size:8.5px;color:var(--ink3);width:135px;flex:none;letter-spacing:.06em} .cdrow .cdref{font-family:var(--mono);font-size:10px;font-weight:700;color:#F06FB4} .cdrow .cdst{font-family:var(--mono);font-size:8.5px;color:var(--ink2);margin-left:auto} .cdrow .cdgo{padding:4px 9px;font-size:8px} .copill.multi{border:1px solid rgba(240,111,180,.55);color:#F06FB4} .journey{flex:1;position:relative;height:64px;min-width:0;margin:0 8px} .jt-cap{position:absolute;left:-4px;transform:translate(-100%,-50%);font-family:var(--mono);font-size:6.5px; letter-spacing:.12em;color:var(--ink3)} .jt-dot.act{width:7px;height:7px;background:var(--green);border-color:var(--green)} .jt-grid{position:absolute;top:0;bottom:0;width:1px;background:#46566A;z-index:1} .jt-grid.d0{background:#7C8FA6} /* the start of the window reads hardest */ .jt-band{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.028); pointer-events:none;z-index:0} /* alternate days, so the columns are readable */ .jt-dlab{position:absolute;top:-2px;transform:translateX(-50%);font-family:var(--mono);font-size:7.5px; font-weight:700;letter-spacing:.06em;z-index:2; letter-spacing:.1em;color:var(--ink3)} .jt-now{position:absolute;top:2px;bottom:10px;width:1.5px;background:var(--cyan);box-shadow:0 0 6px rgba(79,195,232,.8)} .jt-now::after{content:'NOW';position:absolute;top:-2px;left:4px;font-family:var(--mono);font-size:6.5px;color:var(--cyan)} .jt-seg{position:absolute;height:0;border-top:2px solid #4A5560;cursor:pointer} .jt-seg.plan{border-top-style:dashed;border-top-color:var(--amber-dim)} .jt-seg.lh{border-top-style:dashed;border-top-color:#F06FB4} .jt-seg.active{border-top-color:var(--cyan);box-shadow:0 0 6px rgba(79,195,232,.4)} .jt-seg.done{border-top-color:var(--green);border-top-style:solid} .jt-seg.over{border-top-color:var(--red)} .jt-seg.future{opacity:.55} .jt-seg:hover{filter:brightness(1.6)} .jt-dot{position:absolute;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%; background:var(--panel2);border:1.5px solid var(--ink3);z-index:2} .jt-dot.rx{border-radius:2px;border-color:var(--amber-dim)} .jt-dot.win{border-color:var(--amber)} .jt-dot.past{background:var(--ink3)} .jt-dot.done{background:var(--green);border-color:var(--green)} .jt-dot.over{background:var(--red);border-color:var(--red);box-shadow:0 0 7px rgba(255,107,93,.7)} .jt-lab{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:6.5px; letter-spacing:.05em;color:var(--ink3);white-space:nowrap} .jt-lab.up{top:2px} .jt-lab.dn{top:38%} /* CEO P1 (2026-07-27T00:05Z) mobile fix — jtFitPass()'s measured fallback ladder. .shrunk: the KEY form (no clock time) once the full label would collide with its neighbour. .nolabel: text hidden entirely once even the key collides — the dot next to it (a separate element, always rendered) still carries the full detail on hover, same convention as .tlm.nolabel one screen down. Width:0 so a hidden label cannot itself become the thing the NEXT label collides with. */ .jt-lab.shrunk{letter-spacing:.02em} .jt-lab.nolabel{width:0;overflow:hidden;color:transparent} /* GM (2026-07-27), by eye at 390px on the FIXED horizontal strip: "not-overlapping is a metric, looks-good-on-a-phone is the complaint... five or six milestones, each needing a word and a date, is more information than that axis has room for. Change the form." Right. Below the breakpoint the horizontal .journey is replaced outright by .journey-v — a stacked list, which is what a phone is actually good at — not a further-squeezed version of the same axis. Both are always built (journeyStripHTML, wideopenplain_core.js) so nothing here depends on JS measuring viewport width; CSS alone decides which renders, and the two are mutually exclusive (never both visible at once — see [mobile-journey] in run_tests.py, which now asserts exactly that in addition to legibility). */ .journey-v{display:none} @media (max-width:480px){ .journey{display:none} .journey-v{display:block;width:100%;font-family:var(--mono)} } .jtv-sec{font-size:8px;letter-spacing:.14em;color:var(--ink3);padding:8px 0 3px;font-weight:700} .jtv-sec:first-child{padding-top:0} .jtv-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line)} .jtv-row:first-of-type{border-top:none} .jtv-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--panel2);border:1.5px solid var(--ink3)} .jtv-dot.rx{border-radius:2px;border-color:var(--amber-dim)} .jtv-dot.win{border-color:var(--amber)} .jtv-dot.done{background:var(--green);border-color:var(--green)} .jtv-dot.over{background:var(--red);border-color:var(--red)} .jtv-lab{flex:1;min-width:0;font-size:11px;color:var(--ink);font-weight:700; /* the whole reason for this form: real width for a real word, never truncated */ white-space:normal;word-break:break-word} .jtv-when{flex:none;font-size:9.5px;color:var(--ink3);letter-spacing:.03em} .jtv-tag{flex:none;font-size:7.5px;font-weight:800;letter-spacing:.06em;border-radius:3px;padding:2px 5px;margin-left:2px} .jtv-tag.done{background:var(--tint-green,rgba(93,208,140,.16));color:var(--green)} .jtv-tag.over{background:var(--red);color:#160707} .jtv-row.active .jtv-lab{color:var(--cyan)} .cocard .jstat{width:172px;flex:none;text-align:right;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em} .costat.s-run{color:var(--cyan)}.costat.s-done{color:var(--green)}.costat.s-plan{color:var(--amber)} .cocard .jfr{font-family:var(--mono);font-size:8px;color:var(--ink3);display:block;margin-top:4px} /* ---------- top bar ---------- */ #topbar{flex:none;display:flex;height:52px;align-items:center;gap:14px;padding:0 16px; border-bottom:1px solid var(--line);background:var(--panel); position:relative;z-index:2400} /* above every pane, header and popup */ .wordmark{font-family:var(--mono);font-weight:700;letter-spacing:.22em;font-size:15px} .wordmark b{color:var(--amber)} .tag{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.14em;border:1px solid var(--line); padding:3px 7px;border-radius:3px;white-space:nowrap} #topbar .spacer{flex:1} .ctl{display:flex;align-items:center;gap:8px} .ctl label{font-family:var(--mono);font-size:10px;color:var(--ink2);letter-spacing:.1em} input[type=range]{accent-color:var(--amber);width:110px} .btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:8px 14px;border-radius:4px; border:1px solid var(--line);color:var(--ink2);background:var(--panel2);transition:background .08s,color .08s,transform .05s} .btn:hover{color:var(--ink);background:var(--hover)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--amber);color:#1A1405;border-color:var(--amber);font-weight:700} .btn.primary:hover{background:#FFC24A} .btn.primary.running{background:var(--panel2);color:var(--amber);border-color:var(--amber-dim)} /* ---------- left: KPIs + engine console ---------- */ #left{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)} .kpi-hero{padding:16px 16px 10px} .kpi-hero .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2)} .kpi-hero .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:34px;font-weight:700;color:var(--amber);line-height:1.15} .engine-on .kpi-hero .val{animation:glow 1.6s ease-in-out infinite} @keyframes glow{0%,100%{text-shadow:0 0 0 rgba(255,176,32,0)}50%{text-shadow:0 0 18px rgba(255,176,32,.55)}} #thinking.busy::after{content:'';display:inline-block;width:34px;margin-left:8px;vertical-align:middle;height:3px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent);background-size:200% 100%;animation:sweep 1.1s linear infinite} @keyframes sweep{0%{background-position:200% 0}100%{background-position:-100% 0}} @media (prefers-reduced-motion:reduce){.engine-on .kpi-hero .val{animation:none}#thinking.busy::after{animation:none}} .kpi-hero .delta{font-family:var(--mono);font-size:11px;color:var(--green);min-height:15px} /* operator-trial F-1 — a plan costed under a configuration that has since moved must not keep wearing a current face. The figures stay readable; they stop claiming to be live. */ .kpi-hero .val.superseded,.kpi-hero .lbl.superseded{opacity:.5;text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:var(--amber)} .k-stale{margin-top:9px;border:1px solid var(--amber);border-left-width:3px;border-radius:3px; background:color-mix(in srgb,var(--amber) 12%,transparent);padding:8px 10px; display:flex;flex-direction:column;gap:5px} .k-stale-h{font-family:var(--mono);font-size:8.6px;letter-spacing:.09em;color:var(--amber);font-weight:700} .k-stale-d{font-family:var(--mono);font-size:8.6px;line-height:1.65;color:var(--ink2)} .k-stale-d b{color:var(--ink-strong);font-weight:400} .k-stale-go{font-family:var(--mono);font-size:8.6px;letter-spacing:.08em;align-self:flex-start; background:var(--amber);color:#0B0B0B;border:0;border-radius:3px;padding:5px 10px;cursor:pointer;font-weight:700} .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .kpi{background:var(--panel);padding:9px 14px} .kpi .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink3)} .kpi-sel{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--amber);background:transparent; border:none;border-bottom:1px dotted var(--amber-dim);padding:0 14px 1px 0;cursor:pointer; -webkit-appearance:none;appearance:none;max-width:100%} .kpi-sel:hover{color:var(--amber);border-bottom-color:var(--amber)} .kpi-sel option{background:var(--panel);color:var(--ink)} .kpi .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:600} .kpi .val em{font-style:normal;font-size:11px;color:var(--ink3)} #chart{width:100%;height:64px;display:block;border-bottom:1px solid var(--line)} .console-head{display:flex;align-items:center;gap:8px;padding:8px 14px 4px} .console-head .dot{width:7px;height:7px;border-radius:50%;background:var(--ink3)} .console-head .dot.on{background:var(--green);box-shadow:0 0 8px var(--green)} .console-head span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2)} #console{flex:1;overflow-y:auto;padding:4px 14px 12px;font-family:var(--mono);font-size:10.5px;line-height:1.65;color:var(--ink2)} /* operator-trial F-3 — this is the ONLY place the engine explains itself, and it was clipping 67 of 68 lines: nowrap+ellipsis in a 271px box against lines up to 594px. The answer to "why did it do that" was behind the ellipsis. A console is not a table; vertical space is cheaper than the explanation is valuable. Wrap, and hang the continuation under the tag so the [TAG] column still scans. */ #console .ln{white-space:normal;overflow-wrap:anywhere;padding-left:12px;text-indent:-12px} #console .t-best{color:var(--amber)} #console .t-op{color:var(--cyan)} #console .t-sa{color:var(--ink3)} #console .t-sys{color:var(--green)} #console .t-warn{color:var(--red)} /* ---------- map ---------- */ #mapwrap{position:relative;min-width:0;min-height:0} #map{position:absolute;inset:0;width:100%;height:100%;display:block} #lmap{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--scene)} #lmap .leaflet-container{background:var(--scene)} .depot-icon{background:var(--amber);border:2px solid var(--scene);width:12px;height:12px;box-shadow:0 0 6px rgba(255,176,32,.7);cursor:pointer} .xd-icon{background:#F06FB4;border:2px solid var(--scene);width:10px;height:10px;transform:rotate(45deg);box-shadow:0 0 6px rgba(240,111,180,.7);cursor:pointer} .xd-icon.focused{outline:2px solid #F06FB4;outline-offset:3px;box-shadow:0 0 12px rgba(240,111,180,.95)} .depot-icon.focused{background:var(--cyan);box-shadow:0 0 10px rgba(79,195,232,.9);outline:2px solid var(--cyan);outline-offset:3px} /* due-date offset badges + day movers */ .duebadge{flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.08em;font-weight:800; border-radius:3px;padding:3px 7px;margin:0 4px} .duebadge.late{color:var(--tint-red2);background:var(--red);box-shadow:0 0 8px rgba(255,107,93,.55)} .duebadge.early{color:#171200;background:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.5)} .omove{flex:none;display:flex;gap:3px;margin:0 4px} .omv{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);border-radius:3px; font-size:9px;padding:3px 7px;cursor:pointer;font-family:var(--mono)} .omv:hover{color:var(--amber);border-color:var(--amber-dim)} .omv:disabled{opacity:.3;cursor:default} .bulkbar{grid-row:1/-1;display:flex;flex-direction:column;justify-content:flex-start; gap:5px;width:236px;margin:0;padding-right:10px;border-right:1px solid var(--line)} .bulkbar .btn{width:100%;padding:7px 9px;white-space:nowrap;text-align:left; font-size:8.5px;letter-spacing:.05em;line-height:1.25;min-height:0} .bulkbar .bulknote{font-family:var(--mono);font-size:7.5px;color:var(--amber); line-height:1.4;margin-top:2px} .dcard.msel{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset} .dcard .vtype-big{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--cyan);letter-spacing:.04em} .dcard .dsub{font-family:var(--mono);font-size:8.5px;color:var(--ink3);letter-spacing:.05em;margin:-2px 0 6px 20px} .preload.off{opacity:.42;cursor:not-allowed} .preload.off u{text-decoration:none;font-size:6.5px;letter-spacing:.1em;color:var(--ink3)} .preload.sm{display:flex;width:max-content;font-size:7.5px;padding:4px 8px;margin:0 0 6px} .preload{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em; color:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:5px 9px;margin-left:6px;cursor:pointer} .preload input{accent-color:var(--amber);margin:0} .preload.on{color:var(--amber);border-color:var(--amber-dim)} .dock-returns{border:1px solid var(--red);border-radius:8px;margin:8px 0 10px;padding:9px 12px;background:rgba(255,107,93,.06)} .dock-returns .drt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--red);font-weight:700;margin-bottom:7px} .dock-returns .drrow{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:9.5px;color:var(--ink2);padding:3px 0;cursor:pointer} .dock-returns .drrow .ref{color:var(--amber);font-weight:700;flex:none} .dock-returns .drrow .drk{margin-left:auto;color:var(--ink3);white-space:nowrap} .dock-returns .drrow .drk b{color:var(--red)} .drdetail{border:1px dashed var(--line);border-radius:7px;margin:4px 0 10px;padding:10px 13px;background:var(--panel2)} .drd-h{font-family:var(--mono);font-size:9px;color:var(--ink);letter-spacing:.05em;margin-bottom:7px} .drd-line{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:9.5px;color:var(--ink2);padding:3px 0} .drd-line span:first-child{flex:1} .drd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px} .facount{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:9px; background:var(--amber);color:#1A1405;font-family:var(--mono);font-size:9px;font-weight:800;padding:0 4px;margin-left:7px} #carpick{display:none;position:fixed;inset:0;z-index:2000;background:rgba(8,11,14,.6);align-items:center;justify-content:center} #carpick .cpbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;width:340px} .odue{flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--amber); border:1px solid var(--amber-dim);border-radius:3px;padding:2px 6px;margin:0 3px} /* ---- MANUAL SPLIT & PATH ---- */ #mspop{display:none;position:fixed;inset:4% 4% 5% 4%;z-index:2300;background:rgba(13,17,21,.98); border:1px solid var(--amber);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.7); flex-direction:column;overflow:hidden} #mspop.show{display:flex} #mspop .msh{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none} #mspop .msh b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--amber)} #mspop .msbody{flex:1;display:flex;min-height:0} #mspop .mspane{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 14px;overflow-y:auto} #mspop .mspane+.mspane{border-left:1px solid var(--line)} #mspop .msbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} #ms3d{width:100%;height:clamp(220px,34vh,460px);background:var(--scene);border:1px solid var(--line);border-radius:7px;cursor:crosshair;flex:none} .mspal{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;color:var(--ink2); padding:4px 7px;border:1px solid var(--line);border-radius:4px;margin-bottom:3px;cursor:pointer} .mspal.sel{border-color:var(--amber);background:rgba(255,176,32,.1);color:var(--ink)} .mspal.used{opacity:.35;text-decoration:line-through;cursor:default} .mspal .sw{width:9px;height:9px;border-radius:2px;flex:none} .msdel.msbad{border-color:var(--red)} .msfit{font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;line-height:1.5; padding:3px 6px;margin-top:4px;border-radius:3px} .msfit.ok{color:#5ED4A0;background:rgba(94,212,160,.09)} .msfit.bad{color:var(--red);background:rgba(255,107,93,.11)} .msdel{border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:7px;background:var(--panel2)} .msdel.sel{border-color:var(--amber)} .msdel .dh{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;color:var(--ink);font-weight:700} .msdel .dp{font-family:var(--mono);font-size:8.5px;color:var(--ink3);margin-top:4px} .msdel select{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:var(--mono); font-size:8.5px;border-radius:4px;padding:3px 5px;margin-top:5px;width:100%} .msnote{font-family:var(--mono);font-size:8.5px;color:var(--ink3);line-height:1.6;margin:6px 0} /* ---- DANGER CONFIRM (reasoned delete) — reuses #mspop, swaps the accent to red ---- */ #mspop.danger{border-color:var(--red)} #mspop.danger .msh{border-bottom-color:var(--red)} #mspop.danger .msh b{color:var(--red)} .dcmsg{font-family:var(--mono);font-size:10px;color:var(--ink2);line-height:1.7;white-space:pre-line} .dclbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--ink3);margin:14px 0 6px;display:block} .dcreason{width:100%;background:var(--panel3);color:var(--ink-strong);border:1px solid var(--red-dim,var(--red)); border-radius:4px;padding:8px 10px;font-family:var(--mono);font-size:10px;resize:vertical} .dcbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px} /* the whole viewport under the topbar — not just whatever the map happened to be */ #xdpop{display:none;position:fixed;top:58px;left:2vw;right:2vw;bottom:2vh;z-index:2200; background:rgba(13,17,21,.98); border:1px solid #F06FB4;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.65); overflow:hidden;padding:14px 18px; flex-direction:column} #xdpop.show{display:flex} #xdpop .xh{flex:none} #xdpop .lhbar{flex:none} /* left = the orders, always. right = the proposed plan + the 3D build. ONE screen everywhere (CEO): the same two-column split applies on the XD tab (#xd-body) and the warehouse launch as in the map popup — it was scoped to #xdpop only, so the standalone XD screen collapsed to a single full-width stack. */ #xdpop .xsplit,#xd-body .xsplit{display:grid;grid-template-columns:1fr 1fr;gap:14px; flex:1;min-height:0;margin-top:10px} #xd-body .xsplit{align-items:start} #xdpop .xpane,#xd-body .xpane{display:flex;flex-direction:column;min-height:0;min-width:0} #xdpop .xscroll{overflow-y:auto;min-height:0;flex:1;padding-right:6px} #xd-body .xscroll{overflow-y:auto;max-height:72vh;padding-right:6px} /* the 3D build scales with the screen instead of squatting on a fixed 300px */ #xdpop .xright,#xd-body .xright{display:grid;grid-template-rows:1fr clamp(170px,30vh,420px);gap:10px;min-height:0} /* on a narrow screen, stop pretending there are two columns */ @media (max-width:1150px){ #xdpop{left:1vw;right:1vw;bottom:1vh;padding:12px} #xdpop .xsplit,#xd-body .xsplit{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1.25fr); overflow-y:auto} #xdpop .xright,#xd-body .xright{grid-template-rows:minmax(0,1fr) clamp(150px,26vh,320px)} } @media (max-height:760px){ #xdpop .xright,#xd-body .xright{grid-template-rows:1fr clamp(140px,24vh,260px)} } /* THE 3D BUILD IS A PANEL, NOT A 300x150 STAMP. These rules were #xdpop-only, so on the standalone XD chevron the canvas fell back to its intrinsic 300x150 default: the deck outline, the headboard and the slot grid collapsed to sub-pixel lines and the freight read as a handful of cubes floating in space with no truck under them. Keep both containers on every rule below — the screen and the popup are the same screen. */ #xdpop .x3d,#xd-body .x3d{border:1px solid var(--line);border-radius:6px;background:var(--panel); display:flex;flex-direction:column;min-height:0;overflow:hidden} #xdpop .x3d canvas,#xd-body .x3d canvas{flex:1;width:100%;min-height:0;display:block} /* the standalone screen scrolls, so the build gets room to be read rather than squatting in a 219px letterbox where a 13.2m deck renders 15px to the metre */ #xd-body .x3d{min-height:clamp(300px,38vh,520px)} #xd-body .xright{grid-template-rows:1fr clamp(300px,38vh,520px)} /* a pallet block is a control: it takes the click that opens its consignment */ #xdpop .x3d canvas.pickable,#xd-body .x3d canvas.pickable{cursor:pointer} #xdpop .x3dhead,#xd-body .x3dhead{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3); padding:7px 9px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px; white-space:nowrap;overflow:hidden} #xdpop .x3dhint,#xd-body .x3dhint{margin-left:auto;color:var(--ink3);min-width:0; overflow:hidden;text-overflow:ellipsis} #xdpop .x3dback,#xd-body .x3dback{margin-left:8px;background:transparent;border:1px solid var(--line); border-radius:4px;color:var(--ink2);font-family:var(--mono);font-size:8px;letter-spacing:.08em; padding:3px 8px;cursor:pointer;white-space:nowrap;flex:none} #xdpop .x3dback:hover,#xd-body .x3dback:hover{color:var(--amber);border-color:var(--amber-dim)} /* an order that belongs to the selected proposed load */ #xdpop .orow.inload,#xd-body .orow.inload{border-left:3px solid #5ED4A0;background:rgba(94,212,160,.09)} #xdpop .orow.inother,#xd-body .orow.inother{opacity:.42} #xdpop .orow,#xd-body .orow{cursor:grab;user-select:none} #xdpop .orow:active,#xd-body .orow:active{cursor:grabbing} #xdpop .orow.dragging,#xd-body .orow.dragging{opacity:.4} #xdpop .lhcard,#xd-body .lhcard{border:1px solid var(--line);border-radius:6px;padding:9px;margin-bottom:8px;cursor:pointer; background:var(--panel)} #xdpop .lhcard.sel,#xd-body .lhcard.sel{border-color:#5ED4A0;box-shadow:0 0 0 1px #5ED4A0 inset;background:rgba(94,212,160,.06)} #xdpop .lhcard.drop,#xd-body .lhcard.drop{border-color:var(--cyan);border-style:dashed;background:rgba(79,195,232,.1)} #xdpop .lhcard.over,#xd-body .lhcard.over{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset} #xdpop .lhcard.lockd,#xd-body .lhcard.lockd{opacity:.72;border-style:dashed} #xdpop .lhco,#xd-body .lhco{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px; color:var(--ink3);padding:3px 4px;border-top:1px solid var(--line);cursor:pointer;border-radius:3px} #xdpop .lhco:hover,#xd-body .lhco:hover{background:rgba(255,255,255,.04);color:var(--ink2)} #xdpop .lhco.hot,#xd-body .lhco.hot{background:rgba(255,214,10,.14);color:#FFD60A;box-shadow:0 0 0 1px rgba(255,214,10,.45) inset} #xdpop .lhco-dlv,#xd-body .lhco-dlv{color:#8FC1E8} #xdpop .lhco-st,#xd-body .lhco-st{margin-left:auto} #xdpop .lhco-st i,#xd-body .lhco-st i{font-style:normal;font-size:7.5px;padding:1px 4px;border-radius:3px;border:1px solid var(--line)} #xdpop .lhco-st .st-plan,#xd-body .lhco-st .st-plan{color:var(--cyan);border-color:var(--cyan)} #xdpop .lhco-st .st-exec,#xd-body .lhco-st .st-exec{color:#7BC96F;border-color:#7BC96F} #xdpop .lhco-st .st-done,#xd-body .lhco-st .st-done{color:#5ED4A0;border-color:#5ED4A0} #xdpop .lhco-st .st-stg,#xd-body .lhco-st .st-stg{color:var(--amber);border-color:var(--amber-dim)} #xdpop .lhco button,#xd-body .lhco button{background:transparent;border:1px solid var(--line);border-radius:3px; color:var(--ink3);cursor:pointer;font-size:9px;line-height:1;padding:2px 5px} #xdpop .lhco button:hover,#xd-body .lhco button:hover{border-color:var(--red);color:var(--red)} /* 2.7.1 — the planned/proposed pane shares the awaiting list's configurable columns: the same header, the same per-column widths, so a column choice reads on both sides. */ .xdhdr-r{gap:8px;margin-top:4px} #xd-body .lhco-cols,#xdpop .lhco-cols{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8.5px;padding:3px 4px} #xd-body .lhco-cols>span,#xdpop .lhco-cols>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #xd-body .lhco-cols .ostat em,#xdpop .lhco-cols .ostat em{display:none} #xd-body .lhco-cols .ostat,#xdpop .lhco-cols .ostat{margin-left:0} #xd-body .lhco-cols .ostat i,#xdpop .lhco-cols .ostat i{font-style:normal;font-size:7px;padding:1px 4px;border-radius:3px;border:1px solid var(--line)} #xd-body .lhco-cols .st-plan,#xdpop .lhco-cols .st-plan{color:var(--cyan);border-color:var(--cyan)} #xd-body .lhco-cols .st-stg,#xdpop .lhco-cols .st-stg{color:var(--amber);border-color:var(--amber-dim)} #xd-body .lhco-cols .st-exec,#xdpop .lhco-cols .st-exec{color:#7BC96F;border-color:#7BC96F} #xd-body .lhco-cols .st-done,#xdpop .lhco-cols .st-done{color:#5ED4A0;border-color:#5ED4A0} .xdhdr-r .oid,#xd-body .lhco-cols .oid,#xdpop .lhco-cols .oid{width:80px;flex:none} .xdhdr-r .ocust,#xd-body .lhco-cols .ocust,#xdpop .lhco-cols .ocust{width:110px;flex:none;color:var(--ink)} .xdhdr-r .osub,#xd-body .lhco-cols .osub,#xdpop .lhco-cols .osub{flex:1;min-width:54px} .xdhdr-r .omode,#xd-body .lhco-cols .omode,#xdpop .lhco-cols .omode{width:46px;flex:none} .xdhdr-r .oload,#xd-body .lhco-cols .oload,#xdpop .lhco-cols .oload{width:66px;flex:none;text-align:right} .xdhdr-r .otemp,#xd-body .lhco-cols .otemp,#xdpop .lhco-cols .otemp{width:84px;flex:none} .xdhdr-r .ocut,#xd-body .lhco-cols .ocut,#xdpop .lhco-cols .ocut{width:50px;flex:none} .xdhdr-r .oeta,#xd-body .lhco-cols .oeta,#xdpop .lhco-cols .oeta{width:58px;flex:none} .xdhdr-r .oarr,#xd-body .lhco-cols .oarr,#xdpop .lhco-cols .oarr{width:54px;flex:none} .xdhdr-r .ostat,#xd-body .lhco-cols .ostat,#xdpop .lhco-cols .ostat{width:92px;flex:none} .xdhdr-r .lhco-x,#xd-body .lhco-cols .lhco-x,#xdpop .lhco-cols .lhco-x{width:20px;flex:none;text-align:center} #xdpop .xh{display:flex;align-items:baseline;gap:12px;margin-bottom:6px} #xdpop .xh b{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:#F06FB4} #xdpop .xclose{margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:5px; color:var(--ink2);font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:7px 12px;cursor:pointer} #xdpop .xclose:hover{color:var(--red);border-color:#5A2420} #xdpop .xcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px} @media (max-width:1100px){#xdpop .xcols{grid-template-columns:1fr}} .facbar{display:inline-flex;align-self:flex-start;width:max-content;align-items:center;gap:0; margin:0 0 8px;font-family:var(--mono);height:26px; border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel2)} .facbar .fl{font-size:7.5px;letter-spacing:.12em;color:var(--ink2);padding:0 8px;border-right:1px solid var(--line);line-height:26px} .facsel{background:var(--panel2);border:none;border-radius:0;color:var(--ink); font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:5px 24px 5px 9px;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235E6875'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 9px center} .facsel:focus{outline:none} .facsel option{background:#1D242D;color:#EAEEF1;font-size:12px} .dockt{background:transparent;border:none;color:var(--ink);font-family:var(--mono);font-size:10px; padding:4px 8px;width:80px} .dockt:focus{outline:none} .dockt::-webkit-calendar-picker-indicator{filter:invert(.6)} .facbar:focus-within{border-color:var(--cyan)} .facbar .fnote{font-size:7px;letter-spacing:.06em;color:var(--cyan);padding:0 8px;border-left:1px solid var(--line);line-height:26px} .fmode{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink2); font-family:var(--mono);font-size:8px;letter-spacing:.07em;padding:4px 9px;margin:0 2px;cursor:pointer} .fmode.on{border-color:var(--cyan);color:var(--cyan);background:rgba(79,195,232,.1)} #mapfocus u{cursor:pointer;margin-left:6px} .fmark{background:var(--fc,#FFB020);color:var(--scene);font-family:var(--mono);font-size:8px;font-weight:800; letter-spacing:.05em;padding:3px 9px;border:2px solid var(--scene);border-radius:3px;text-align:center; box-shadow:0 0 10px rgba(255,176,32,.5);cursor:pointer;white-space:nowrap} .fmark.focused{outline:2px solid var(--cyan);outline-offset:2px} .fmark.dim{opacity:.4} /* Per-facility-kind shapes (CEO direct, 2026-07-27): every marker used to be the same rounded box regardless of what the site does. clip-path keeps a flat horizontal band through the middle of every shape so the 3-letter code always sits fully inside it — only the outline changes, never the readability of the text on top of it. */ .fmark.fk-dc{border-radius:3px} /* the plain box: distribution centre */ .fmark.fk-xdock{clip-path:polygon(14% 0%,86% 0%,100% 50%,86% 100%,14% 100%,0% 50%);border-radius:0} /* hexagon: through-flow */ .fmark.fk-store{clip-path:polygon(50% 0%,100% 28%,100% 100%,0% 100%,0% 28%);border-radius:0} /* house: shopfront */ .fmark.fk-plant{clip-path:polygon(28% 0%,72% 0%,100% 28%,100% 72%,72% 100%,28% 100%,0% 72%,0% 28%);border-radius:0} /* octagon: manufacturing */ .fmark.fk-port{clip-path:polygon(0% 0%,84% 0%,100% 50%,84% 100%,0% 100%);border-radius:0} /* pennant: port */ .fmark.fk-depot{clip-path:polygon(0% 0%,100% 0%,100% 72%,50% 100%,0% 72%);border-radius:0} /* shield: multi-purpose depot */ #legmode{position:absolute;top:10px;right:12px;z-index:500;font-family:var(--mono);font-size:9.5px;color:var(--ink3); background:color-mix(in srgb,var(--scene) 85%,transparent);border:1px solid var(--line);border-radius:4px;padding:5px 9px;pointer-events:none} #maplegend{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9.5px;color:var(--ink3); background:color-mix(in srgb,var(--scene) 82%,transparent);border:1px solid var(--line);border-radius:4px;padding:6px 9px;line-height:1.7;pointer-events:none} /* operator-trial F-4 — #engine-stack is absolutely positioned at top:11px left:44px and was painted straight over this row: #thinking spanned x312-738 while #run sat at 344-465 and #runcombo at 471-572. The live strategy narration was physically underneath two buttons. Drop the status row clear of the stack, and let the strategy line WRAP rather than ellipsis away the half of the sentence that says what the engine is actually doing. */ #status{position:absolute;top:52px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none} #thinking{font-family:var(--mono);font-size:10.5px;color:var(--ink2);background:color-mix(in srgb,var(--scene) 85%,transparent); border:1px solid var(--line);border-radius:4px;padding:6px 10px;max-width:70%;line-height:1.55} #thinking b{color:var(--amber);font-weight:600} #iterbadge{font-family:var(--mono);font-size:10.5px;color:var(--ink3);background:color-mix(in srgb,var(--scene) 85%,transparent); border:1px solid var(--line);border-radius:4px;padding:6px 10px;white-space:nowrap} /* ---------- right: routes ---------- */ #right{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)} .panel-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);padding:12px 14px 6px} #routes{flex:1;overflow-y:auto;padding:0 10px 10px} .route{border:1px solid var(--line);border-radius:5px;margin:6px 0;padding:9px 11px;background:var(--panel2); cursor:pointer;user-select:none;transition:border-color .08s,background .08s} .route:hover{background:#27303A} .route.sel{border-color:var(--amber)} .route .r1{display:flex;align-items:center;gap:8px} .route .swatch{width:9px;height:9px;border-radius:2px;flex:none} .route .vname{font-family:var(--mono);font-size:11.5px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .route .rcost{font-family:var(--mono);font-size:11.5px;color:var(--ink2)} .route .r2{display:flex;gap:10px;margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink3)} .util{height:4px;border-radius:2px;background:var(--line);margin-top:7px;overflow:hidden} .util i{display:block;height:100%;border-radius:2px} #detail{max-height:44%;overflow-y:auto;border-top:1px solid var(--line);display:none} #detail table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10px} #detail th{position:sticky;top:0;background:var(--panel);color:var(--ink3);text-align:left;font-weight:400; letter-spacing:.08em;padding:7px 6px 5px;border-bottom:1px solid var(--line)} #detail td{padding:4.5px 6px;border-bottom:1px solid var(--hover);color:var(--ink2);white-space:nowrap} #detail td:first-child,#detail th:first-child{padding-left:14px} #detail .late{color:var(--red)} #detail .brk td{color:var(--amber);letter-spacing:.06em} #detail .flag{font-size:8.5px;border:1px solid var(--line);border-radius:2px;padding:0 3px;color:var(--ink3);margin-left:4px} /* ---------- footer chips ---------- */ #chips{position:absolute;right:12px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:60%;pointer-events:none} .chip{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink3); background:color-mix(in srgb,var(--scene) 82%,transparent);border:1px solid var(--line);border-radius:3px;padding:3px 7px} .chip.ok{color:var(--green)} /* ---------- responsive ---------- */ @media (max-width:960px){ body{overflow:auto} #app{height:auto} #screen-plan{display:flex;flex-direction:column;height:auto} #chevnav{overflow-x:auto} #topbar{flex-wrap:wrap;height:auto;padding:10px 12px;gap:10px} #mapwrap{height:52vh;min-height:340px;order:1} #left{order:2;border-right:none;border-top:1px solid var(--line)} #console{max-height:200px} #right{order:3;border-left:none;border-top:1px solid var(--line)} #routes{max-height:320px} #detail{max-height:280px} } @media (prefers-reduced-motion:reduce){ .anim{display:none} } /* ---------- customer pricing intelligence screen ---------- */ #screen-pricing{overflow-y:auto;height:100%;padding:22px 26px 80px} #prwrap{max-width:1150px;margin:0 auto} .pr-controls{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:18px} .pr-controls label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink3);margin-bottom:7px} .pr-controls input[type=number]{width:90px;background:var(--panel2);border:1px solid var(--line);border-radius:7px; color:var(--ink);font-family:var(--mono);font-size:14px;padding:9px 10px;text-align:center} .pr-controls input[type=number]:focus{outline:none;border-color:var(--amber)} .pr-look{display:flex;gap:6px} .pr-look button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--ink2); font-size:9.5px;letter-spacing:.08em;padding:10px 13px} .pr-look button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.1)} .pr-live{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;border-radius:5px;padding:6px 11px; background:rgba(123,201,111,.12);color:var(--green)} .pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:18px} .pr-tile{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 17px} .pr-tile .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink3)} .pr-tile .v{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);margin:7px 0 3px} .pr-tile .v small{font-size:11px;color:var(--ink3);font-weight:400} .pr-tile .c{font-family:var(--mono);font-size:9px;color:var(--ink2)} .pr-tile .c b{color:var(--amber)} .pr-tile.rate{border-color:rgba(255,176,32,.4)} .pr-tile.rate .v{color:var(--amber)} .pr-flex{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .pr-panel{flex:1;min-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px} .pr-panel .pt{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink3);margin-bottom:12px} table.pr-days{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10px} table.pr-days th{color:var(--ink3);font-weight:400;text-align:right;letter-spacing:.1em;font-size:8.5px;padding:5px 8px;border-bottom:1px solid var(--line)} table.pr-days th:first-child,table.pr-days td:first-child{text-align:left} table.pr-days td{color:var(--ink2);text-align:right;padding:6px 8px;border-bottom:1px solid var(--panel2)} table.pr-days td b{color:var(--ink)} .pr-prem{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-family:var(--mono);font-size:10px;color:var(--ink2)} .pr-prem input{width:64px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--amber); font-family:var(--mono);font-size:12px;padding:6px 8px;text-align:center} .pr-prem input:focus{outline:none;border-color:var(--amber)} .pr-prem .lab{flex:1} .pr-quote{font-family:var(--mono);font-size:10.5px;color:var(--ink2);line-height:2.1} .pr-quote b{color:var(--amber)} .pr-quote input,.pr-quote select{background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--ink); font-family:var(--mono);font-size:11px;padding:5px 8px;width:auto} .pr-note{font-family:var(--mono);font-size:8.5px;color:var(--ink3);line-height:1.9;margin-top:12px} /* MULTI-FILE BUILD: chevrons are hyperlinks between stage files. */ a.chev,a.chev:link,a.chev:visited{text-decoration:none;display:inline-block;cursor:pointer} a.chev.active,a.chev.active:visited{color:#1A1405} /* HEADER REDESIGN (CEO direct, 2026-07-26): logo-only branding — the wordmark TEXT is gone, the mark itself is the home button. .brandlogo is now a