/* =========================================================================== PROJECT LEVELLING CENTER A planning-control environment, not a BI dashboard. The design rules that produced it: · DENSITY IS A FEATURE. A planner compares numbers; whitespace between them is friction. Type scale is tight, tables are compact, and the screen is allowed to be full. · COLOUR MEANS ONE THING. Green = inside capacity / no schedule damage. Amber = approaching a limit. Red = over capacity or negative float. Slate = the "before" state. Nothing is coloured for decoration. · STATE IS ALWAYS VISIBLE. The simulation banner is the loudest element on the page, because the one thing a planner must never be unsure of is whether they are looking at the master schedule or a proposal. · NO ANIMATION that delays a reading. Transitions are on hover states only, and every one of them is under 150ms. Tokens sit on the same NEXORA palette the SOW Center and the input tab use, so the module reads as part of the product rather than a bolt-on. ========================================================================= */ #tp-levelling, .lvl-portal { --lvl-green:#24B47E; --lvl-green-d:#1B9A6B; --lvl-green-t:#EAF7F1; --lvl-ink:#14202A; --lvl-ink-2:#37424D; --lvl-mut:#6B7580; --lvl-mut-2:#8A94A0; --lvl-bg:#F5F7F9; --lvl-card:#FFFFFF; --lvl-wash:#FAFBFC; --lvl-line:#E6EAEE; --lvl-line-2:#EFF2F5; --lvl-line-3:#D9DFE5; --lvl-ok:#2E7D63; --lvl-warn:#C08A3A; --lvl-risk:#C0564A; --lvl-info:#4A77AE; --lvl-neutral:#8A94A0; --lvl-ok-t:#E9F7F1; --lvl-warn-t:#FDF4E5; --lvl-risk-t:#FBEEEC; --lvl-info-t:#EDF2F9; /* BEFORE AND AFTER ARE A CONTRAST, NOT A VERDICT. "After" was the same green the app uses for done, applied, within capacity — so a proposal nobody had agreed to yet was already wearing the colour of a settled fact. Blue is a state, not an approval. */ --lvl-before:#8A94A0; --lvl-after:#2563EB; /* Categorical slots — the validated 8-hue set. Assigned by ENTITY, never by rank, in lvl-charts.js. Passes lightness band, chroma floor, adjacent CVD separation and the normal-vision floor on this surface; three of them sit under 3:1 contrast in light mode, which is why every chart that uses them also ships a legend and a table twin (the relief rule). */ --lvl-s1:#2a78d6; --lvl-s2:#eb6834; --lvl-s3:#1baf7a; --lvl-s4:#eda100; --lvl-s5:#e87ba4; --lvl-s6:#008300; --lvl-s7:#4a3aa7; --lvl-s8:#e34948; --lvl-s9:#00a8b3; --lvl-s10:#a96a12; --lvl-s11:#bb3fb0; --lvl-s12:#6d8c14; --lvl-other:#8A94A0; --lvl-heat:#F7941D; --lvl-r:12px; --lvl-r-s:8px; --lvl-r-xs:5px; --lvl-sh:0 1px 2px rgba(20,32,42,.04),0 1px 3px rgba(20,32,42,.03); --lvl-sh-2:0 4px 16px rgba(20,32,42,.07),0 1px 3px rgba(20,32,42,.04); --lvl-font:"Inter","Segoe UI",system-ui,sans-serif; --lvl-head:"Plus Jakarta Sans","Inter","Segoe UI",sans-serif; --lvl-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace; background:var(--lvl-bg); color:var(--lvl-ink); } #tp-levelling *,#tp-levelling *::before,#tp-levelling *::after, .lvl-portal,.lvl-portal *,.lvl-portal *::before,.lvl-portal *::after{box-sizing:border-box} #tp-levelling *:focus-visible,.lvl-portal *:focus-visible{outline:2px solid var(--lvl-green);outline-offset:2px;border-radius:var(--lvl-r-xs)} /* The drawer is moved to at render time: an ancestor of the tab panel establishes a containing block for fixed positioning (a transform or a filter somewhere in the app shell), which clipped the drawer's own header and close button off the top of the screen. Living on it is fixed to the viewport, as intended — so it carries its own token block and its own font stack rather than inheriting the panel's. */ .lvl-portal{font-family:var(--lvl-font);font-size:12.5px;line-height:1.5;color:var(--lvl-ink);-webkit-font-smoothing:antialiased} #lvlOut{font-family:var(--lvl-font);font-size:12.5px;line-height:1.5;color:var(--lvl-ink);-webkit-font-smoothing:antialiased;padding:0} .lvl{display:flex;flex-direction:column;min-height:100%} .lvl-ic{width:16px;height:16px;flex:0 0 auto} .lvl-ic-s{width:14px;height:14px}.lvl-ic-xs{width:12px;height:12px}.lvl-ic-l{width:22px;height:22px}.lvl-ic-xl{width:38px;height:38px} /* ── top bar ─────────────────────────────────────────────────────────── */ .lvl-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:12px 18px;background:var(--lvl-card);border-bottom:1px solid var(--lvl-line);position:sticky;top:0;z-index:30} .lvl-top-l{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap} .lvl-title h1{margin:0;font:800 17px/1.15 var(--lvl-head);letter-spacing:-.01em} .lvl-title p{margin:2px 0 0;font-size:10.5px;color:var(--lvl-mut);letter-spacing:.04em;text-transform:uppercase;font-weight:600} .lvl-crumbs{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--lvl-mut);padding-left:16px;border-left:1px solid var(--lvl-line)} .lvl-crumbs .is-cur{color:var(--lvl-ink);font-weight:600} .lvl-top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lvl-search{display:flex;align-items:center;gap:7px;background:var(--lvl-wash);border:1px solid var(--lvl-line); border-radius:var(--lvl-r-s);padding:0 10px;height:32px;color:var(--lvl-mut);min-width:210px} .lvl-search input{border:0;background:none;outline:0;font:inherit;font-size:12px;color:var(--lvl-ink);width:100%;height:100%} .lvl-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--lvl-r-s); border:1px solid var(--lvl-line-3);background:var(--lvl-card);color:var(--lvl-ink-2);font:600 12px/1 var(--lvl-font); cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap} .lvl-btn:hover{background:var(--lvl-wash);border-color:var(--lvl-mut-2);color:var(--lvl-ink)} .lvl-btn.is-primary{background:var(--lvl-green);border-color:var(--lvl-green);color:#fff} .lvl-btn.is-primary:hover{background:var(--lvl-green-d);border-color:var(--lvl-green-d);color:#fff} .lvl-btn.is-ghost{background:none;border-color:transparent;color:var(--lvl-mut)} .lvl-btn.is-ghost:hover{background:var(--lvl-wash);color:var(--lvl-ink)} .lvl-btn.is-sm{height:26px;padding:0 9px;font-size:11px} .lvl-btn.is-lg{height:38px;padding:0 18px;font-size:13px} .lvl-btn[disabled]{opacity:.45;cursor:not-allowed} .lvl-icobtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--lvl-r-xs); border:1px solid transparent;background:none;color:var(--lvl-mut);cursor:pointer} .lvl-icobtn:hover{background:var(--lvl-wash);color:var(--lvl-ink)} .lvl-link{background:none;border:0;padding:0;font:inherit;color:var(--lvl-green-d);cursor:pointer;text-align:left; border-bottom:1px solid transparent} .lvl-link:hover{border-bottom-color:currentColor} /* ── rail nav ────────────────────────────────────────────────────────── */ .lvl-rail{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:7px 18px;background:var(--lvl-card); border-bottom:1px solid var(--lvl-line);position:sticky;top:57px;z-index:29} .lvl-rail-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--lvl-r-s); border:1px solid transparent;background:none;color:var(--lvl-ink-2);font:600 12px/1 var(--lvl-font);cursor:pointer;transition:background .12s} .lvl-rail-b i{font:800 9px/1 var(--lvl-mono);color:var(--lvl-mut-2);font-style:normal} .lvl-rail-b em{font-style:normal;font:700 10px/1 var(--lvl-mono);background:var(--lvl-line-2);color:var(--lvl-mut); padding:2px 5px;border-radius:20px} .lvl-rail-b:hover{background:var(--lvl-wash)} .lvl-rail-b.is-on{background:var(--lvl-green-t);border-color:rgba(36,180,126,.28);color:var(--lvl-green-d)} .lvl-rail-b.is-on i{color:var(--lvl-green-d)} .lvl-rail-b.is-on em{background:rgba(36,180,126,.18);color:var(--lvl-green-d)} /* ── simulation state banner — the loudest thing on the page ─────────── */ .lvl-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px; border-bottom:1px solid var(--lvl-line);font-size:12px} .lvl-state.is-live{background:var(--lvl-wash)} .lvl-state.is-sim{background:linear-gradient(90deg,#FFF8E8,#FFFDF7);border-bottom-color:#EFD9A8} .lvl-state.is-busy{opacity:.55;pointer-events:none} .lvl-state-tag{font:800 9px/1 var(--lvl-mono);letter-spacing:.12em;padding:5px 8px;border-radius:var(--lvl-r-xs); background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-state.is-sim .lvl-state-tag{background:#B9822A;color:#fff} .lvl-state b{font-weight:700} .lvl-state em{font-style:normal;color:var(--lvl-mut);font-size:11.5px} .lvl-state-a{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lvl-state-warn{font:700 10.5px/1 var(--lvl-font);color:#9A6A1E;text-transform:uppercase;letter-spacing:.05em} /* ── filters ─────────────────────────────────────────────────────────── */ /* the chrome is one 42px row and one 30px workflow strip now, not four bands, so the filter row sticks under 72px rather than 96 */ .lvl-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:8px 18px;background:var(--lvl-card); border-bottom:1px solid var(--lvl-line);position:sticky;top:72px;z-index:28} .lvl-fl{display:flex;flex-direction:column;gap:3px;min-width:0} .lvl-fl.is-wide{flex:1 1 100%} .lvl-fl>span{font:700 9px/1 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-fl select,.lvl-fl input,.lvl-sel-s,.lvl-num,.lvl-txt{height:28px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-xs); background:var(--lvl-card);color:var(--lvl-ink);font:500 12px/1 var(--lvl-font);padding:0 7px;max-width:230px;outline:0} .lvl-num{width:78px;font-family:var(--lvl-mono);text-align:right} .lvl-num.is-cap{width:66px} .lvl-txt{width:100%;max-width:none} .lvl-fl-r{margin-left:auto;display:flex;align-items:center;gap:8px} .lvl-seg{display:inline-flex;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s);overflow:hidden;background:var(--lvl-card)} .lvl-seg-b{height:28px;padding:0 11px;border:0;background:none;font:600 11.5px/1 var(--lvl-font);color:var(--lvl-mut);cursor:pointer} .lvl-seg-b+.lvl-seg-b{border-left:1px solid var(--lvl-line)} .lvl-seg-b.is-on{background:var(--lvl-green-t);color:var(--lvl-green-d)} .lvl-chip{height:26px;padding:0 10px;border-radius:20px;border:1px solid var(--lvl-line-3);background:var(--lvl-card); font:600 11.5px/1 var(--lvl-font);color:var(--lvl-mut);cursor:pointer} .lvl-chip.is-on{background:var(--lvl-green-t);border-color:rgba(36,180,126,.3);color:var(--lvl-green-d)} /* ── layout ──────────────────────────────────────────────────────────── */ .lvl-main{flex:1;padding:14px 18px 24px;display:flex;flex-direction:column;gap:12px} .lvl-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:12px} .lvl-3col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} .lvl-card{background:var(--lvl-card);border:1px solid var(--lvl-line);border-radius:var(--lvl-r);box-shadow:var(--lvl-sh);overflow:hidden} .lvl-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 14px 9px;border-bottom:1px solid var(--lvl-line-2)} .lvl-card-h h3{margin:0;font:700 12.5px/1.25 var(--lvl-head);letter-spacing:-.005em} .lvl-card-h p{margin:3px 0 0;font-size:11px;color:var(--lvl-mut);max-width:96ch;line-height:1.45} .lvl-card-b{padding:12px 14px 14px} .lvl-card-b>h4{margin:16px 0 8px;font:700 11px/1 var(--lvl-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lvl-mut)} .lvl-card-b>h4:first-child{margin-top:0} .lvl-card-b>h4 small{font-weight:500;text-transform:none;letter-spacing:0;margin-left:8px;color:var(--lvl-mut-2)} .lvl-card-b h5{margin:0 0 6px;font:700 11px/1 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-note{margin:10px 0 0;font-size:11px;color:var(--lvl-mut);line-height:1.6} .lvl-note code{font-family:var(--lvl-mono);font-size:10.5px;background:var(--lvl-line-2);padding:1px 4px;border-radius:3px} .lvl-more{margin-top:10px;background:none;border:0;color:var(--lvl-green-d);font:600 12px/1 var(--lvl-font);cursor:pointer;padding:0} .lvl-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--lvl-line); font:500 10.5px/1.5 var(--lvl-mono);color:var(--lvl-mut-2);background:var(--lvl-card)} /* ── KPIs ────────────────────────────────────────────────────────────── */ /* Cell borders rather than a 1px grid gap over a coloured background: a partly-filled final row used to render the empty tail as a slab of grey. Top accent per tone makes a critical KPI scannable at a glance. */ .lvl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); background:var(--lvl-card);border:1px solid var(--lvl-line);border-radius:var(--lvl-r);overflow:hidden} .lvl-kpis.is-sm{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:14px} .lvl-kpi{background:var(--lvl-card);padding:10px 12px 9px;display:flex;flex-direction:column;gap:1px; border-right:1px solid var(--lvl-line);border-bottom:1px solid var(--lvl-line); border-top:2px solid transparent;transition:border-color .12s} .lvl-kpi:last-child{border-right:0} .lvl-kpi-l{font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-kpi-v{font:800 20px/1.1 var(--lvl-mono);letter-spacing:-.02em;margin-top:1px} .lvl-kpi-s{font-style:normal;font-size:10.5px;color:var(--lvl-mut);margin-top:1px} .lvl-kpi.is-ok .lvl-kpi-v{color:var(--lvl-ok)} .lvl-kpi.is-ok{border-top-color:var(--lvl-ok)} .lvl-kpi.is-warn .lvl-kpi-v{color:var(--lvl-warn)} .lvl-kpi.is-warn{border-top-color:var(--lvl-warn)} .lvl-kpi.is-risk .lvl-kpi-v{color:var(--lvl-risk)} .lvl-kpi.is-risk{border-top-color:var(--lvl-risk)} /* ── charts ──────────────────────────────────────────────────────────── */ .lvl-chart{width:100%} .lvl-chart.is-scroll{overflow-x:auto;overflow-y:hidden} .lvl-svg{display:block;max-width:100%;height:auto;font-family:var(--lvl-font)} .lvl-chart.is-scroll .lvl-svg{max-width:none;min-width:100%} /* THE WORKSPACE PANES ARE DRAWN AT THEIR OWN WIDTH, NEVER SQUASHED TO FIT. `max-width:100%` on the shared chart class scaled a 3000px timeline down into an 830px pane — which is not a fit, it is a 3.6x reduction that made every bar four pixels wide and every header label unreadable. These four panes size from their width/height attributes and the pane scrolls. */ .lvl-ws svg.lvl-ws-head,.lvl-ws svg.lvl-ws-body, .lvl-ws svg.lvl-ws-hist,.lvl-ws svg.lvl-ws-hm{max-width:none;height:revert} .lvl-grid{stroke:var(--lvl-line-2);stroke-width:1} .lvl-axis{stroke:var(--lvl-line-3);stroke-width:1} .lvl-ax{font-size:9.5px;fill:var(--lvl-mut-2)} .lvl-bar{shape-rendering:crispEdges} .lvl-over{fill:var(--lvl-risk);opacity:.85} .lvl-cap{stroke:var(--lvl-ink);stroke-width:1.4;stroke-dasharray:5 3} .lvl-cap-l{font-size:9.5px;font-weight:700;fill:var(--lvl-ink)} .lvl-totline{fill:none;stroke:var(--lvl-ink);stroke-width:1.3;stroke-dasharray:2 4;opacity:.75} /* ── WBS TREE TABLE — the Gantt tab's own table, carrying manpower ──── */ .lvl-wbstbl .lvl-wbs-row>th,.lvl-wbstbl .lvl-wbs-row>td{background:var(--wb-bg);color:var(--wb-tx); border-bottom:1px solid rgba(255,255,255,.10);border-right:1px solid rgba(255,255,255,.07)} .lvl-wbstbl .lvl-wbs-row>th{border-left:4px solid var(--wb-ac)} .lvl-wbstbl .lvl-wbs-row.is-lvl0>th{font:800 12px/1.2 var(--lvl-head);letter-spacing:.02em} .lvl-wbstbl .lvl-wbs-row.is-lvl1>th{font:700 11.5px/1.2 var(--lvl-font)} .lvl-wbstbl .lvl-wbs-row.is-lvl2>th,.lvl-wbstbl .lvl-wbs-row.is-lvl3>th{font:600 10.5px/1.2 var(--lvl-font)} .lvl-wbstbl .lvl-wbs-code{font:800 8.5px/1 var(--lvl-mono);letter-spacing:.06em; padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.18);margin-right:6px;display:inline-block} .lvl-wbstbl .lvl-wbs-chev{display:inline-block;width:0;height:0;border-left:5px solid currentColor; border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:7px;vertical-align:middle; transition:transform .12s} .lvl-wbstbl .lvl-wbs-row.is-open .lvl-wbs-chev{transform:rotate(90deg)} .lvl-wbstbl .lvl-wbs-row[data-lvl]{cursor:pointer} .lvl-wbstbl .lvl-wbs-row[data-lvl]:hover>th,.lvl-wbstbl .lvl-wbs-row[data-lvl]:hover>td{filter:brightness(1.12)} .lvl-wbstbl td.is-zero{opacity:.28} .lvl-wbstbl-ctrl{display:flex;gap:6px;margin-bottom:8px} .lvl-wbstbl-ctrl .lvl-btn-sm{font:600 10px/1 var(--lvl-font);padding:4px 10px;border-radius:6px; background:var(--lvl-line-2);color:var(--lvl-ink-2);border:none;cursor:pointer;white-space:nowrap} .lvl-wbstbl-ctrl .lvl-btn-sm:hover{background:var(--lvl-accent);color:#fff} .lvl-wbs-res>th,.lvl-wbs-res>td{background:var(--lvl-card)!important;color:var(--lvl-ink-2)!important; border-bottom:1px solid var(--lvl-line-2)!important;border-right:1px solid var(--lvl-line-2)!important} .lvl-wbs-res>th{font:600 10.5px/1.3 var(--lvl-font)} .lvl-wbs-res .lvl-pv-t{font-family:var(--lvl-mono)} .lvl-wbs-rdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle; box-shadow:0 0 0 1px rgba(20,32,42,.15)} .lvl-avg{stroke:var(--lvl-warn);stroke-width:1;stroke-dasharray:2 3} .lvl-line{fill:none;stroke-width:1.9;stroke-linejoin:round} .lvl-area{opacity:.10} .lvl-pt{opacity:.9} .lvl-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px} .lvl-lg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--lvl-mut)} .lvl-lg i{width:9px;height:9px;border-radius:2px;flex:0 0 auto} .lvl-lg.is-more{color:var(--lvl-mut-2);font-style:italic} .lvl-spark polyline{fill:none;stroke:var(--lvl-green);stroke-width:1.4} /* before / after */ .lvl-ba{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:900px){.lvl-ba{grid-template-columns:1fr}} .lvl-ba-side{min-width:0;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);padding:10px;background:var(--lvl-wash)} .lvl-ba-h{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--lvl-font);letter-spacing:.08em;margin-bottom:8px} .lvl-ba-h em{font-style:normal;font-weight:500;letter-spacing:0;color:var(--lvl-mut);font-size:11px;margin-left:auto} .lvl-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto} .lvl-dot.is-before{background:var(--lvl-before)} .lvl-dot.is-after{background:var(--lvl-after)} .lvl-ba-head{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:12px;color:var(--lvl-mut)} .lvl-ba-head b{color:var(--lvl-ink);margin-right:5px} @media (max-width:900px){.lvl-ba-head{grid-template-columns:1fr}} /* heatmap */ .lvl-hm-wrap{overflow:auto;max-height:520px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s)} .lvl-hm,.lvl-mx{border-collapse:separate;border-spacing:0;width:100%;font-size:10.5px} .lvl-hm th,.lvl-mx th{position:sticky;top:0;z-index:3;background:var(--lvl-wash);font:700 9.5px/1.2 var(--lvl-font); color:var(--lvl-mut);padding:6px 5px;text-align:center;border-bottom:1px solid var(--lvl-line);white-space:nowrap} .lvl-hm th.lvl-hm-row,.lvl-mx tbody th{position:sticky;left:0;z-index:4;background:var(--lvl-card);text-align:left;min-width:160px; border-right:1px solid var(--lvl-line);padding:5px 9px} .lvl-hm-row span{display:block;font-weight:700;color:var(--lvl-ink);font-size:11px} .lvl-hm-row em{font-style:normal;color:var(--lvl-mut-2);font-size:9.5px} .lvl-hm-c{text-align:center;font-family:var(--lvl-mono);font-weight:600;border-bottom:1px solid var(--lvl-line-2); padding:4px 3px;color:#fff} .lvl-hm-c.is-zero{background:var(--lvl-wash)} .lvl-hm-c.is-low{background:rgba(46,125,99,calc(.20 + var(--i) * .55));color:#0E3A2C} .lvl-hm-c.is-mid{background:rgba(46,125,99,calc(.45 + var(--i) * .45))} .lvl-hm-c.is-high{fill:var(--lvl-warn)} .lvl-hm-c.is-over{fill:var(--lvl-risk)} .lvl-hm-c.is-ok{fill:var(--lvl-ok)} .lvl-hm-c.is-none{fill:var(--lvl-wash);fill-opacity:0} .lvl-mx-c{text-align:right;font-family:var(--lvl-mono);padding:4px 8px;border-bottom:1px solid var(--lvl-line-2); background:rgba(46,125,99,calc(var(--i) * .32))} .lvl-mx-c.is-zero{background:var(--lvl-wash);color:var(--lvl-line-3)} .lvl-mx-tot{text-align:right;font-family:var(--lvl-mono);font-weight:700;background:var(--lvl-wash)} .lvl-mx tfoot td,.lvl-mx tfoot th{background:var(--lvl-wash);font-weight:700;font-family:var(--lvl-mono);text-align:right;padding:5px 8px; border-top:1px solid var(--lvl-line)} .lvl-mx tbody th em.lvl-mx-share{display:block;font-style:normal;font-weight:600;font-size:9px;letter-spacing:.02em; color:var(--lvl-mut-2);margin-top:2px;white-space:nowrap} .lvl-mx-c.is-peak{box-shadow:inset 0 0 0 1.5px var(--lvl-green-d);position:relative} .lvl-mx-c.is-low{background:rgba(46,125,99,calc(.20 + var(--i) * .55));color:#0E3A2C} .lvl-mx-c.is-mid{background:rgba(46,125,99,calc(.45 + var(--i) * .45));color:#fff} .lvl-mx-c.is-high{background:rgba(192,138,58,calc(.55 + var(--i) * .40));color:#fff} .lvl-mx-c.is-over{background:var(--lvl-risk);color:#fff} /* mobility map */ .lvl-map{max-height:300px} .lvl-mp-e{stroke-width:2} .lvl-mp-e.is-high{stroke:var(--lvl-ok)} .lvl-mp-e.is-medium{stroke:var(--lvl-info);stroke-dasharray:6 3} .lvl-mp-e.is-limited{stroke:var(--lvl-warn);stroke-dasharray:2 4} .lvl-mp-el{font-size:8.5px;fill:var(--lvl-mut-2);text-transform:uppercase;letter-spacing:.06em} .lvl-mp-n circle{fill:var(--lvl-card);stroke:var(--lvl-line-3);stroke-width:1.5} .lvl-mp-n.is-here circle{fill:var(--lvl-green-t);stroke:var(--lvl-green);stroke-width:2} .lvl-mp-q{font:700 10px/1 var(--lvl-mono);fill:var(--lvl-ink)} .lvl-mp-t{font:600 10.5px/1 var(--lvl-font);fill:var(--lvl-ink-2)} /* movement gantt overlay */ .lvl-mg-l{font-size:10.5px;fill:var(--lvl-ink-2)} .lvl-mg-ghost{fill:var(--lvl-line-3)} .lvl-mg-new{fill:var(--lvl-after)} .lvl-mg-new.is-delay{fill:var(--lvl-warn)} .lvl-mg-arrow{stroke:var(--lvl-mut-2);stroke-width:1;stroke-dasharray:2 2} .lvl-mg-d{font:700 8.5px/1 var(--lvl-mono);fill:var(--lvl-mut)} /* bars */ .lvl-bars{display:flex;flex-direction:column;gap:5px} .lvl-bars-r{display:grid;grid-template-columns:minmax(90px,1.4fr) 3fr auto;align-items:center;gap:10px;font-size:11.5px} .lvl-bars-r[role="button"]{cursor:pointer} .lvl-bars-r[role="button"]:hover .lvl-bars-n{color:var(--lvl-green-d)} .lvl-bars-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lvl-ink-2)} .lvl-bars-t{display:block;height:9px;background:var(--lvl-line-2);border-radius:5px;overflow:hidden} .lvl-bars-t i{display:block;height:100%;border-radius:5px} .lvl-bars-r b{font-family:var(--lvl-mono);font-size:11px;white-space:nowrap} /* ── tables ──────────────────────────────────────────────────────────── */ .lvl-tbl-wrap{overflow:auto;max-height:560px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s)} .lvl-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px} .lvl-tbl thead th{position:sticky;top:0;z-index:3;background:var(--lvl-wash);font:700 9px/1.2 var(--lvl-font); letter-spacing:.06em;text-transform:uppercase;color:var(--lvl-mut);padding:7px 8px;text-align:left; border-bottom:1px solid var(--lvl-line);white-space:nowrap} .lvl-tbl thead th.n,.lvl-tbl td.n,.lvl-tbl th.n{text-align:right} .lvl-tbl tbody th{text-align:left;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--lvl-line-2);vertical-align:top} .lvl-tbl tbody td{padding:5px 8px;border-bottom:1px solid var(--lvl-line-2);vertical-align:top;color:var(--lvl-ink-2)} .lvl-tbl tbody td.n{font-family:var(--lvl-mono)} .lvl-tbl tbody tr:hover td,.lvl-tbl tbody tr:hover th{background:var(--lvl-wash)} .lvl-tbl tbody th em,.lvl-tbl tbody td em{display:block;font-style:normal;font-size:9.5px;color:var(--lvl-mut-2)} .lvl-tbl tr.is-over th,.lvl-tbl tr.is-over td{background:var(--lvl-risk-t)} .lvl-tbl tr.is-moved th,.lvl-tbl tr.is-moved td{background:var(--lvl-green-t)} .lvl-tbl tr.is-manual th,.lvl-tbl tr.is-manual td{background:var(--lvl-info-t)} .lvl-ba-tbl td:nth-child(2){color:var(--lvl-mut)} .lvl-ba-tbl td:nth-child(3){font-weight:700;color:var(--lvl-ink)} .lvl-cmp th.is-base,.lvl-cmp td.is-base{background:var(--lvl-wash)} .lvl-cmp thead th em{display:block;font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;color:var(--lvl-mut-2);font-size:10px} .lvl-cmp td em{display:block;font-style:normal;font-size:10px;margin-top:2px} .lvl-cmp-a td{background:var(--lvl-wash)} .lvl-cmp tbody th{position:sticky;left:0;z-index:2;background:var(--lvl-card);font-weight:700} .lvl-cmp tbody tr:hover th{background:var(--lvl-wash)} .lvl-cmp thead th:first-child{position:sticky;left:0;z-index:4} .lvl-cmp-v td{background:var(--lvl-wash);border-top:1px solid var(--lvl-line);font-weight:600} .lvl-cmp-v td.is-base{color:var(--lvl-mut-2)} .lvl-zn{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-why{max-width:340px} .lvl-why b{display:block;font-weight:600;color:var(--lvl-ink)} .lvl-why p{margin:6px 0 0;font-size:11px;color:var(--lvl-mut);line-height:1.55} .lvl-fbc{min-width:210px} .lvl-load{display:inline-block;padding:1px 6px;border-radius:20px;font:700 10.5px/1.5 var(--lvl-mono)} .lvl-load.is-low{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-load.is-mid{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-load.is-high{background:var(--lvl-warn-t);color:var(--lvl-warn)} .lvl-load.is-over{background:var(--lvl-risk-t);color:var(--lvl-risk)} /* tags / deltas */ .lvl-tag{display:inline-block;padding:2px 7px;border-radius:20px;font:700 9.5px/1.5 var(--lvl-font); letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .lvl-tag.is-ok{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-tag.is-warn{background:var(--lvl-warn-t);color:var(--lvl-warn)} .lvl-tag.is-risk{background:var(--lvl-risk-t);color:var(--lvl-risk)} .lvl-tag.is-info{background:var(--lvl-info-t);color:var(--lvl-info)} .lvl-tag.is-neutral{background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-d{font-family:var(--lvl-mono);font-size:10.5px;font-weight:700} .lvl-d.is-good{color:var(--lvl-ok)} .lvl-d.is-bad{color:var(--lvl-risk)} .lvl-d.is-flat{color:var(--lvl-mut-2);font-weight:500} /* float bar */ .lvl-fb{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--lvl-mut-2)} .lvl-fb-t{font-family:var(--lvl-mono);white-space:nowrap;font-size:9.5px} .lvl-fb-track{position:relative;flex:1;min-width:70px;height:8px;border-radius:4px;background:var(--lvl-line-2);overflow:hidden} .lvl-fb-used{position:absolute;left:0;top:0;height:100%;background:var(--lvl-warn)} .lvl-fb-free{position:absolute;top:0;height:100%;background:var(--lvl-ok);opacity:.42} .lvl-fb-dot{position:absolute;top:-2px;width:3px;height:12px;border-radius:2px;background:var(--lvl-ink)} .lvl-fb-v{font-family:var(--lvl-mono);font-size:10.5px;color:var(--lvl-ink);white-space:nowrap} .lvl-fb.is-critical .lvl-fb-track{background:var(--lvl-risk-t)} .lvl-fb.is-critical .lvl-fb-dot{background:var(--lvl-risk)} .lvl-fb.is-warning .lvl-fb-dot{background:var(--lvl-warn)} /* ── command panel ───────────────────────────────────────────────────── */ .lvl-cmd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} .lvl-cmd-col h4{margin:0 0 8px;font:700 10px/1 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut)} .lvl-cmd-col h4 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--lvl-mut-2);margin-left:6px} .lvl-mode{display:flex;flex-direction:column;gap:7px} .lvl-modec{text-align:left;padding:9px 11px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s); background:var(--lvl-card);cursor:pointer;transition:border-color .12s,background .12s} .lvl-modec:hover{border-color:var(--lvl-mut-2)} .lvl-modec.is-on{border-color:var(--lvl-green);background:var(--lvl-green-t)} .lvl-modec b{display:block;font:700 12px/1.3 var(--lvl-font);color:var(--lvl-ink)} .lvl-modec span{display:block;margin-top:3px;font-size:11px;color:var(--lvl-mut);line-height:1.5} .lvl-strats{display:flex;flex-direction:column;gap:5px;max-height:250px;overflow:auto} .lvl-strat{text-align:left;padding:8px 10px;border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s); background:var(--lvl-card);cursor:pointer} .lvl-strat:hover{border-color:var(--lvl-mut-2)} .lvl-strat.is-on{border-color:var(--lvl-green);background:var(--lvl-green-t)} .lvl-strat b{display:flex;align-items:center;gap:7px;font:700 11.5px/1.3 var(--lvl-font);color:var(--lvl-ink)} .lvl-strat b em{font-style:normal;font:700 8.5px/1 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase; background:var(--lvl-green);color:#fff;padding:2px 6px;border-radius:20px} .lvl-strat span{display:block;margin-top:3px;font-size:10.5px;color:var(--lvl-mut);line-height:1.5} .lvl-weights{display:flex;flex-direction:column;gap:7px} .lvl-w{display:grid;grid-template-columns:1fr 110px 30px;align-items:center;gap:9px;font-size:11.5px;color:var(--lvl-ink-2)} .lvl-w input[type=range]{width:100%;accent-color:var(--lvl-green)} .lvl-w b{font-family:var(--lvl-mono);font-size:11px;text-align:right} .lvl-toggles{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .lvl-tg{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s); background:var(--lvl-card);font:600 11.5px/1.3 var(--lvl-font);color:var(--lvl-ink-2);cursor:pointer;text-align:left} .lvl-tg i{width:28px;height:16px;border-radius:10px;background:var(--lvl-line-3);position:relative;flex:0 0 auto;transition:background .12s} .lvl-tg i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .12s} .lvl-tg.is-on{border-color:var(--lvl-green);color:var(--lvl-green-d)} .lvl-tg.is-on i{background:var(--lvl-green)} .lvl-tg.is-on i::after{left:14px} .lvl-cmd-run{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--lvl-line-2)} .lvl-cmd-hint{font-size:11px;color:var(--lvl-mut)} /* impact grid */ .lvl-imp{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); background:var(--lvl-card);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-imp-c{background:var(--lvl-card);padding:9px 11px;display:flex;flex-direction:column;gap:2px; border-right:1px solid var(--lvl-line);border-bottom:1px solid var(--lvl-line)} .lvl-imp-c:last-child{border-right:0} .lvl-imp-c span{font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-imp-c b{font:700 14px/1.2 var(--lvl-mono);margin-top:1px} .lvl-imp-c em{font-style:normal;font-size:10.5px;color:var(--lvl-mut)} /* bottlenecks / opportunities */ .lvl-bn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .lvl-bn-r{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border:1px solid var(--lvl-line-2); border-radius:var(--lvl-r-s);cursor:pointer;background:var(--lvl-card);transition:background .12s,border-color .12s} .lvl-bn-r:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-bn-n{width:20px;height:20px;border-radius:50%;background:var(--lvl-line-2);color:var(--lvl-mut); font:700 10px/20px var(--lvl-mono);text-align:center;flex:0 0 auto} .lvl-bn-m{flex:1;min-width:0} .lvl-bn-m b{display:block;font:700 12px/1.3 var(--lvl-font)} .lvl-bn-m em{display:block;font-style:normal;font-size:10.5px;color:var(--lvl-mut);margin-top:1px} .lvl-bn-x{color:var(--lvl-mut-2)!important} .lvl-opp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .lvl-opp-r{padding:8px 10px;border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s);background:var(--lvl-wash)} .lvl-opp-r b{display:block;margin-top:4px;font:700 12px/1.3 var(--lvl-font)} .lvl-opp-r p{margin:3px 0 0;font-size:11px;color:var(--lvl-mut);line-height:1.5} .lvl-opp-r em{display:block;margin-top:4px;font-style:normal;font:600 10.5px/1.4 var(--lvl-font);color:var(--lvl-ok)} .lvl-opp-r .lvl-link{margin-top:5px;font-size:11px} /* recommendation + quality */ .lvl-rec{display:grid;grid-template-columns:1fr;gap:14px} .lvl-card-b>.lvl-rec{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:900px){.lvl-card-b>.lvl-rec{grid-template-columns:1fr}} .lvl-rec-tag{display:inline-block;font:800 9px/1 var(--lvl-font);letter-spacing:.12em;padding:4px 8px;border-radius:20px; background:var(--lvl-green);color:#fff} .lvl-rec-l h4{margin:8px 0 2px;font:800 16px/1.2 var(--lvl-head)} .lvl-rec-name{margin:0;font-size:11px;color:var(--lvl-mut)} .lvl-rec-why{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .lvl-rec-why li{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--lvl-ink-2)} .lvl-rec-why li svg{color:var(--lvl-ok);margin-top:2px} .lvl-rec-a{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} .lvl-q{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);padding:10px 12px;background:var(--lvl-wash)} .lvl-q-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .lvl-q-h span{font:700 9.5px/1 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut)} .lvl-q-h b{font:800 26px/1 var(--lvl-mono);color:var(--lvl-green-d)} .lvl-q-h b i{font-style:normal;font-size:13px;color:var(--lvl-mut-2)} .lvl-q-h em{font-style:normal;font:700 10.5px/1 var(--lvl-font);color:var(--lvl-ink-2);margin-left:auto} .lvl-q-parts{display:flex;flex-direction:column;gap:6px} .lvl-q-p{display:grid;grid-template-columns:minmax(100px,1.1fr) 2fr auto;grid-template-rows:auto auto; column-gap:9px;align-items:center;font-size:11px} .lvl-q-p>span{color:var(--lvl-ink-2)} .lvl-q-t{grid-column:2;display:block;height:6px;border-radius:4px;background:var(--lvl-line-2);overflow:hidden} .lvl-q-t b{display:block;height:100%;background:var(--lvl-green);border-radius:4px} .lvl-q-p>u{grid-column:3;text-decoration:none;font-family:var(--lvl-mono);font-size:10.5px;white-space:nowrap} .lvl-q-p>u small{color:var(--lvl-mut-2)} .lvl-q-p>em{grid-column:1/-1;font-style:normal;font-size:9.5px;color:var(--lvl-mut-2);margin-top:1px} /* manual levelling */ .lvl-manual{display:grid;grid-template-columns:1.05fr 1fr;gap:18px} @media (max-width:900px){.lvl-manual{grid-template-columns:1fr}} .lvl-manual-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px} .lvl-manual-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .lvl-live{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);padding:12px;background:var(--lvl-wash)} .lvl-live.is-bad{border-color:#E5C4BE;background:var(--lvl-risk-t)} .lvl-live.is-ok{border-color:#BFE3D3;background:var(--lvl-ok-t)} .lvl-live h4{margin:0 0 10px;font:700 10px/1 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut)} .lvl-live-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px} .lvl-live-r{display:flex;flex-direction:column;gap:1px} .lvl-live-r span{font:700 9px/1.2 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-live-r b{font:700 13px/1.2 var(--lvl-mono)} .lvl-live-r em{font-style:normal;font-size:10.5px;color:var(--lvl-mut)} .lvl-viol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px} .lvl-viol li{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5} .lvl-viol li.is-error{color:var(--lvl-risk)} .lvl-viol li.is-warn{color:var(--lvl-warn)} .lvl-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:12px 0 0} .lvl-dl div{display:flex;flex-direction:column;gap:1px} .lvl-dl dt{font:700 9px/1.2 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-dl dd{margin:0;font:700 12px/1.3 var(--lvl-mono)} /* score breakdown / logs */ .lvl-score{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:center} .lvl-score>span{font:700 10px/1 var(--lvl-font);color:var(--lvl-mut);text-transform:uppercase;letter-spacing:.06em} .lvl-score>span b{font-family:var(--lvl-mono);color:var(--lvl-ink);margin-left:4px} .lvl-score i{font-style:normal;font:600 10px/1 var(--lvl-mono);padding:2px 6px;border-radius:3px;background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-score i.is-pos{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-score i.is-neg{background:var(--lvl-risk-t);color:var(--lvl-risk)} .lvl-score em{flex:1 1 100%;font-style:normal;font-size:10px;color:var(--lvl-mut-2);margin-top:3px} .lvl-log{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px} .lvl-log li{display:grid;grid-template-columns:34px minmax(120px,1fr) 3fr;gap:9px;align-items:baseline;font-size:11px; padding:4px 7px;border-radius:var(--lvl-r-xs)} .lvl-log li.is-move{background:var(--lvl-ok-t)} .lvl-log li.is-rejected{background:var(--lvl-wash);color:var(--lvl-mut)} .lvl-log li span{font-family:var(--lvl-mono);font-size:10px;color:var(--lvl-mut-2)} .lvl-log li em{font-style:normal;color:var(--lvl-mut)} /* validation / integrity */ .lvl-val-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .lvl-val-h em{font-style:normal;font-size:10.5px;color:var(--lvl-mut-2)} .lvl-val{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:3px} .lvl-val li{display:grid;grid-template-columns:16px minmax(110px,auto) 1fr auto;gap:8px;align-items:baseline; font-size:11.5px;padding:5px 8px;border-radius:var(--lvl-r-xs)} .lvl-val li.is-error{background:var(--lvl-risk-t);color:var(--lvl-risk)} .lvl-val li.is-warn{background:var(--lvl-warn-t);color:var(--lvl-warn)} .lvl-val li.is-info{background:var(--lvl-wash);color:var(--lvl-mut)} .lvl-val li b{font-family:var(--lvl-mono);font-size:10px} .lvl-val li em{font-style:normal;font-family:var(--lvl-mono);font-size:10px;opacity:.75} .lvl-integrity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .lvl-integrity li{display:grid;grid-template-columns:16px minmax(140px,auto) 1fr;gap:8px;align-items:baseline;font-size:11px} .lvl-integrity li.is-ok svg{color:var(--lvl-ok)} .lvl-integrity li.is-warn svg{color:var(--lvl-warn)} .lvl-integrity li span{color:var(--lvl-mut);line-height:1.55} .lvl-integrity code{font-family:var(--lvl-mono);font-size:10.5px;background:var(--lvl-line-2);padding:1px 4px;border-radius:3px} /* scenarios */ .lvl-sc-a{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px} .lvl-sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px} .lvl-sc{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);padding:12px;background:var(--lvl-card)} .lvl-sc.is-on{border-color:var(--lvl-green);box-shadow:0 0 0 2px var(--lvl-green-t)} .lvl-sc.is-stale{opacity:.72} .lvl-sc header{display:flex;flex-direction:column;align-items:stretch;gap:6px} .lvl-sc-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:20px} .lvl-sc header h4{font:700 13px/1.3 var(--lvl-font);margin:0} .lvl-sc header h4 .lvl-ic{margin-right:5px;vertical-align:-2px} .lvl-sc-s{margin:0;font-size:10.5px;color:var(--lvl-mut);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .lvl-sc-s b{color:var(--lvl-ink-2);font-weight:600} .lvl-sc-s em{font-style:normal;color:var(--lvl-mut-2)} .lvl-sc-v{margin:11px 0 10px;padding:9px 10px;border-radius:6px;background:var(--lvl-wash);border:1px solid var(--lvl-line); font-size:11px;line-height:1.5;color:var(--lvl-ink-2)} .lvl-sc-v b{font-family:var(--lvl-mono);font-weight:700} .lvl-sc-v .lvl-pos{color:var(--lvl-ok)} .lvl-sc-v .lvl-neg{color:var(--lvl-risk)} .lvl-sc-m{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lvl-sc-m div{display:flex;flex-direction:column;gap:1px} .lvl-sc-m span{font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-sc-m b{font:700 13px/1.2 var(--lvl-mono)} .lvl-sc-m em{font-style:normal;font-size:10px;color:var(--lvl-mut)} .lvl-sc-x{margin:10px 0 0;font-size:10.5px;color:var(--lvl-mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lvl-sc-b{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px} /* audit */ .lvl-audit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .lvl-audit-r{border:1px solid var(--lvl-line);border-left:3px solid var(--lvl-ok);border-radius:var(--lvl-r-s);padding:10px 12px;background:var(--lvl-card)} .lvl-audit-r.is-reverted{opacity:.65;border-left-color:var(--lvl-warn)} .lvl-audit-r header{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lvl-audit-r header b{font:700 12px/1.3 var(--lvl-font)} .lvl-audit-r time{margin-left:auto;font-family:var(--lvl-mono);font-size:10px;color:var(--lvl-mut-2)} .lvl-audit-m{margin:6px 0 0;font-size:11px;color:var(--lvl-ink-2)} .lvl-audit-x{margin:3px 0 0;font-size:10px;color:var(--lvl-mut);line-height:1.5} .lvl-audit-b{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px} /* panel */ .lvl-panel{border:1px solid var(--lvl-green);border-radius:var(--lvl-r);background:var(--lvl-card);box-shadow:var(--lvl-sh-2);overflow:hidden} .lvl-panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 15px; background:var(--lvl-green-t);border-bottom:1px solid rgba(36,180,126,.25)} .lvl-panel-h h3{margin:0;font:800 14px/1.2 var(--lvl-head)} .lvl-panel-h p{margin:3px 0 0;font-size:11px;color:var(--lvl-ink-2)} .lvl-panel-b{padding:14px 15px} .lvl-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px} /* misc */ .lvl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto} .lvl-list li{display:flex;align-items:baseline;gap:8px;font-size:11.5px;padding:3px 0;border-bottom:1px solid var(--lvl-line-2)} .lvl-list li em{font-style:normal;font-size:10px;color:var(--lvl-mut-2);margin-left:auto;font-family:var(--lvl-mono)} .lvl-ok-s{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--lvl-r-s);background:var(--lvl-ok-t); color:var(--lvl-ok);font:600 11.5px/1.4 var(--lvl-font)} .lvl-warn-s{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11px;color:var(--lvl-warn)} .lvl-empty-s{padding:22px;text-align:center;color:var(--lvl-mut-2);font-size:11.5px;background:var(--lvl-wash);border-radius:var(--lvl-r-s)} .lvl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 20px;color:var(--lvl-mut)} .lvl-empty svg{color:var(--lvl-line-3);margin-bottom:12px} .lvl-empty h2{margin:0 0 8px;font:800 15px/1.2 var(--lvl-head);color:var(--lvl-ink)} .lvl-empty p{margin:0;max-width:70ch;font-size:12px;line-height:1.65} .lvl-err{display:flex;align-items:flex-start;gap:9px;padding:14px;border-radius:var(--lvl-r-s);background:var(--lvl-risk-t); color:var(--lvl-risk);font-size:12px} .lvl-err b{display:block} .lvl-err span{display:block;font-family:var(--lvl-mono);font-size:11px;margin-top:4px} .lvl-start{display:flex;justify-content:center;padding:48px 20px} .lvl-start-card{max-width:720px;background:var(--lvl-card);border:1px solid var(--lvl-line);border-radius:var(--lvl-r); padding:30px;box-shadow:var(--lvl-sh);text-align:center} .lvl-start-card svg{color:var(--lvl-green);opacity:.5} .lvl-start-card h2{margin:14px 0 10px;font:800 19px/1.2 var(--lvl-head)} .lvl-start-card p{margin:0;font-size:12.5px;color:var(--lvl-mut);line-height:1.7} .lvl-start-l{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;text-align:left} .lvl-start-l li{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--lvl-mut); padding:9px 11px;border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s)} .lvl-start-l li svg{color:var(--lvl-green);margin-top:1px} .lvl-start-l li b{color:var(--lvl-ink);margin-right:4px} .lvl-deploy{margin-top:12px} /* ── dark theme ──────────────────────────────────────────────────────── */ body[data-gantt-theme="dark"] #tp-levelling,body[data-gantt-theme="dark"] .lvl-portal{ --lvl-ink:#E6EDF3; --lvl-ink-2:#C3CDD6; --lvl-mut:#8B98A5; --lvl-mut-2:#6E7B88; --lvl-bg:#0B1220; --lvl-card:#101A2B; --lvl-wash:#0D1626; --lvl-line:#1E2B3F; --lvl-line-2:#182437; --lvl-line-3:#27364C; --lvl-green-t:#0F2A22; --lvl-ok-t:#0F2A22; --lvl-warn-t:#2A2113; --lvl-risk-t:#2C1614; --lvl-info-t:#131E2E; --lvl-ok:#4ADE9B; --lvl-warn:#E3B25C; --lvl-risk:#F08579; --lvl-info:#7FB0E8; --lvl-before:#6E7B88; --lvl-after:#60A5FA; /* the same eight hues stepped for the dark surface, validated as a set */ --lvl-s1:#3987e5; --lvl-s2:#d95926; --lvl-s3:#199e70; --lvl-s4:#c98500; --lvl-s5:#d55181; --lvl-s6:#008300; --lvl-s7:#9085e9; --lvl-s8:#e66767; --lvl-s9:#12a6b0; --lvl-s10:#a5701e; --lvl-s11:#c257b6; --lvl-s12:#77921f; --lvl-other:#6E7B88; --lvl-heat:#F0A93E; } body[data-gantt-theme="dark"] #tp-levelling .lvl-state.is-sim{background:linear-gradient(90deg,#241C0C,#15100A);border-bottom-color:#4A3A18} body[data-gantt-theme="dark"] #tp-levelling .lvl-state-warn{color:#E3B25C} body[data-gantt-theme="dark"] #tp-levelling .lvl-cap{stroke:#E6EDF3} body[data-gantt-theme="dark"] #tp-levelling .lvl-cap-l{fill:#E6EDF3} body[data-gantt-theme="dark"] #tp-levelling .lvl-hm-c.is-low{color:#CDEBDF} body[data-gantt-theme="dark"] #tp-levelling .lvl-tg i::after{background:#0B1220} body[data-gantt-theme="dark"] #tp-levelling .lvl-verdict.is-sim{background:linear-gradient(90deg,#241C0C,#15100A);border-left-color:#B9822A} body[data-gantt-theme="dark"] #tp-levelling .lvl-verdict.is-ok{border-left-color:#4ADE9B} body[data-gantt-theme="dark"] #tp-levelling .lvl-verdict.is-warn{border-left-color:#E3B25C} body[data-gantt-theme="dark"] #tp-levelling .lvl-verdict.is-risk{border-left-color:#F08579} body[data-gantt-theme="dark"] #tp-levelling .lvl-kpi.is-ok{border-top-color:#4ADE9B} body[data-gantt-theme="dark"] #tp-levelling .lvl-kpi.is-warn{border-top-color:#E3B25C} body[data-gantt-theme="dark"] #tp-levelling .lvl-kpi.is-risk{border-top-color:#F08579} /* ── print ───────────────────────────────────────────────────────────── */ @media print{ #tp-levelling .lvl-top,#tp-levelling .lvl-rail,#tp-levelling .lvl-filters,#tp-levelling .lvl-state-a{display:none!important} #tp-levelling .lvl-card{break-inside:avoid;box-shadow:none} #tp-levelling .lvl-tbl-wrap,#tp-levelling .lvl-hm-wrap{max-height:none;overflow:visible} } /* ── narrow screens ──────────────────────────────────────────────────── */ @media (max-width:760px){ .lvl-top,.lvl-rail,.lvl-filters,.lvl-main{padding-left:12px;padding-right:12px} .lvl-rail{top:auto;position:static} .lvl-filters{position:static} .lvl-top{position:static} .lvl-search{min-width:150px} .lvl-cmd-grid{grid-template-columns:1fr} .lvl-kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))} } /* ── "why nothing moved" diagnosis ───────────────────────────────────── */ .lvl-card-blocked{border-color:#EFD9A8;border-left:4px solid var(--lvl-warn)} .lvl-card-blocked .lvl-card-h{background:var(--lvl-warn-t);border-bottom-color:#EFD9A8} .lvl-blocked-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px} .lvl-blocked-h div{display:flex;flex-direction:column;gap:1px} .lvl-blocked-h span{font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-blocked-h b{font:700 13px/1.2 var(--lvl-font)} .lvl-blocked-h em{font-style:normal;font-size:10.5px;color:var(--lvl-mut)} .lvl-rej{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:5px} .lvl-rej li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;font-size:11.5px; padding:6px 9px;border-radius:var(--lvl-r-xs);background:var(--lvl-wash)} .lvl-rej li b{font-family:var(--lvl-mono);font-weight:700;text-align:right;color:var(--lvl-ink)} .lvl-rej li span{color:var(--lvl-ink-2)} .lvl-rej li em{font-style:normal;font-size:10px;color:var(--lvl-mut-2)} .lvl-suggest{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--lvl-r-s); background:var(--lvl-green-t);border:1px solid rgba(36,180,126,.25)} .lvl-suggest>svg{color:var(--lvl-green-d);margin-top:2px} .lvl-suggest b{display:block;font:700 11px/1 var(--lvl-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lvl-green-d)} .lvl-suggest p{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--lvl-ink-2)} .lvl-suggest-a{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px} .lvl-audit-r-warn{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;padding:8px 10px;border-radius:var(--lvl-r-xs); background:var(--lvl-warn-t);color:var(--lvl-warn);font-size:11px;line-height:1.55} .lvl-audit-r-warn svg{margin-top:2px;flex:0 0 auto} /* ══ VERDICT BANNER ═══════════════════════════════════════════════════════ The first thing on the page: one sentence of diagnosis and the action that follows from it. Everything else on the overview elaborates this. */ /* Left accent stripe: tone is readable at a glance, before any text is read. */ .lvl-verdict{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start; padding:14px 18px;border-radius:var(--lvl-r);border:1px solid var(--lvl-line);background:var(--lvl-card); border-left:4px solid var(--lvl-line-3)} .lvl-verdict-i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .lvl-verdict h2{margin:0;font:800 15px/1.3 var(--lvl-head);letter-spacing:-.01em} .lvl-verdict p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--lvl-ink-2);max-width:100ch} .lvl-verdict-x{color:var(--lvl-mut)!important;font-size:11px!important} .lvl-verdict-a{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;align-items:center} .lvl-verdict.is-ok{border-left-color:var(--lvl-ok);background:var(--lvl-ok-t)} .lvl-verdict.is-ok .lvl-verdict-i{background:var(--lvl-ok);color:#fff} .lvl-verdict.is-warn{border-left-color:var(--lvl-warn);background:var(--lvl-warn-t)} .lvl-verdict.is-warn .lvl-verdict-i{background:var(--lvl-warn);color:#fff} .lvl-verdict.is-risk{border-left-color:var(--lvl-risk);background:var(--lvl-risk-t)} .lvl-verdict.is-risk .lvl-verdict-i{background:var(--lvl-risk);color:#fff} .lvl-verdict.is-sim{border-left-color:#B9822A;background:linear-gradient(90deg,#FFF8E8,#FFFDF7)} .lvl-verdict.is-sim .lvl-verdict-i{background:#B9822A;color:#fff} @media (max-width:900px){.lvl-verdict{grid-template-columns:auto 1fr}.lvl-verdict-a{grid-column:1/-1;justify-content:flex-start}} .lvl-kpi-v i{font-style:normal;font-size:13px;color:var(--lvl-mut-2)} .lvl-neg{color:var(--lvl-risk);font-family:var(--lvl-mono)} /* ══ SMALL MULTIPLES — the signature overview chart ═══════════════════════ */ .lvl-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px} .lvl-sm-c{margin:0;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);padding:7px 9px 3px;background:var(--lvl-card)} .lvl-sm-c[role="button"]{cursor:pointer;transition:border-color .12s,background .12s} .lvl-sm-c[role="button"]:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-sm-c.is-over{border-color:#E5C4BE;background:var(--lvl-risk-t)} .lvl-sm-c figcaption{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:1px;font-size:11px} .lvl-sm-dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .lvl-sm-c figcaption b{font-weight:700;color:var(--lvl-ink)} .lvl-sm-n{margin-left:auto;font-family:var(--lvl-mono);font-size:10px;color:var(--lvl-mut)} .lvl-sm-n b{color:var(--lvl-ink)} .lvl-sm-c figcaption em{font-style:normal;font:700 8.5px/1 var(--lvl-font);letter-spacing:.05em;text-transform:uppercase; padding:2px 5px;border-radius:20px;flex:0 0 auto} .lvl-sm-bad{background:var(--lvl-risk);color:#fff} .lvl-sm-ok{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-sm-svg{width:100%;height:auto} .lvl-sm-band{fill:var(--lvl-ok);opacity:.05} /* ══ CHART MARKS ══════════════════════════════════════════════════════════ */ .lvl-bar.is-over{fill:var(--lvl-risk)} .lvl-over{fill:var(--lvl-risk);opacity:.9} .lvl-hit{fill:transparent;pointer-events:all} .lvl-endlbl{font:700 10px/1 var(--lvl-mono);fill:var(--lvl-mut)} .lvl-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .lvl-area{opacity:.09} .lvl-cap{stroke:var(--lvl-ink);stroke-width:1.5;stroke-dasharray:6 3} .lvl-cap-l{font:700 10px/1 var(--lvl-font);fill:var(--lvl-ink)} /* ══ SCALE LEGENDS — a colour scale that means something says so ══════════ */ .lvl-scale{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:10.5px;color:var(--lvl-mut)} .lvl-scale>span{font:700 9px/1 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2);margin-right:3px} .lvl-scale b{font-weight:500;margin-right:9px} .lvl-scale i{display:inline-block;width:16px;height:11px;border-radius:2px;border:1px solid var(--lvl-line)} .lvl-ramp{width:90px!important;background:linear-gradient(90deg,rgba(46,125,99,.06),rgba(46,125,99,.55))} .lvl-lg-e{width:20px!important;height:0!important;border:0!important;border-top:2px solid var(--lvl-ok)!important;border-radius:0!important} .lvl-lg-e.is-medium{border-top-color:var(--lvl-info)!important;border-top-style:dashed!important} .lvl-lg-e.is-limited{border-top-color:var(--lvl-warn)!important;border-top-style:dotted!important} .lvl-lg-n{border-radius:50%!important;width:12px!important;height:12px!important;background:var(--lvl-green-t);border-color:var(--lvl-green)!important} /* ══ PIVOT TABLE — the numbers half of every deployment view ══════════════ */ .lvl-pv-wrap{overflow:auto;max-height:600px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s)} .lvl-pv{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px} .lvl-pv thead th{position:sticky;top:0;z-index:4;background:var(--lvl-wash);font:700 9.5px/1.2 var(--lvl-font); letter-spacing:.05em;text-transform:uppercase;color:var(--lvl-mut);padding:8px 7px;text-align:right; border-bottom:1px solid var(--lvl-line);white-space:nowrap} .lvl-pv thead th.lvl-pv-h{text-align:left;left:0;z-index:6} .lvl-pv-h{position:sticky;left:0;z-index:3;background:var(--lvl-card);text-align:left;min-width:220px; border-right:1px solid var(--lvl-line);padding:6px 9px;font-weight:600} .lvl-pv-h em{display:inline-block;margin-left:6px;font-style:normal;font:700 9px/1 var(--lvl-mono); background:var(--lvl-line-2);color:var(--lvl-mut);padding:2px 5px;border-radius:20px} .lvl-pv-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:baseline} .lvl-pv-c{text-align:right;font-family:var(--lvl-mono);padding:5px 7px;border-bottom:1px solid var(--lvl-line-2);color:var(--lvl-ink-2)} .lvl-pv-c.is-zero{color:transparent} .lvl-pv-c.is-mid{background:rgba(46,125,99,.08)} .lvl-pv-c.is-high{background:var(--lvl-warn-t);color:var(--lvl-warn);font-weight:700} .lvl-pv-c.is-over{background:var(--lvl-risk);color:#fff;font-weight:800} .lvl-pv-c.is-peak{font-weight:800;color:var(--lvl-ink);box-shadow:inset 0 0 0 1px var(--lvl-line-3)} .lvl-pv-t{text-align:right;font-family:var(--lvl-mono);font-weight:700;background:var(--lvl-wash);padding:5px 9px; border-bottom:1px solid var(--lvl-line-2);border-left:1px solid var(--lvl-line)} .lvl-pv-g>th,.lvl-pv-g>td{background:var(--lvl-wash);font-weight:700;border-bottom:1px solid var(--lvl-line)} .lvl-pv-g[role="button"]{cursor:pointer} .lvl-pv-g[role="button"]:hover>th,.lvl-pv-g[role="button"]:hover>td{background:var(--lvl-line-2)} .lvl-pv-r>th{padding-left:26px;font-weight:400;color:var(--lvl-ink-2)} .lvl-pv-r>th em{display:block;margin:1px 0 0;background:none;padding:0;color:var(--lvl-mut-2);font-size:9.5px} .lvl-pv-arrow{display:inline-block;width:0;height:0;margin-right:7px;vertical-align:middle; border-left:5px solid var(--lvl-mut);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s} .lvl-pv-g.is-open .lvl-pv-arrow{transform:rotate(90deg)} .lvl-pv-nub{display:inline-block;width:5px;margin-right:7px} .lvl-pv tfoot td,.lvl-pv tfoot th{position:sticky;bottom:0;background:var(--lvl-card);font-weight:800;font-family:var(--lvl-mono); text-align:right;padding:7px;border-top:2px solid var(--lvl-line-3)} .lvl-pv tfoot th{text-align:left;left:0;z-index:5;font-family:var(--lvl-font)} .lvl-dep-ctl{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 12px} /* ══ SETUP DRAWER ═════════════════════════════════════════════════════════ */ .lvl-drawer-bd{position:fixed;inset:0;background:rgba(20,32,42,.32);z-index:998;animation:lvlFade .12s ease} .lvl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:999;background:var(--lvl-card); border-left:1px solid var(--lvl-line);box-shadow:-16px 0 48px rgba(20,32,42,.16);display:flex;flex-direction:column; animation:lvlSlide .16s ease} @keyframes lvlFade{from{opacity:0}to{opacity:1}} @keyframes lvlSlide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}} .lvl-drawer-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--lvl-line)} .lvl-drawer-h h3{margin:0;font:800 15px/1.2 var(--lvl-head)} .lvl-drawer-h p{margin:4px 0 0;font-size:11.5px;color:var(--lvl-mut);max-width:52ch} /* MIN-HEIGHT:0 IS WHAT MAKES THIS SCROLL. In a column flex container a child with flex:1 still has min-height:auto, so it refuses to shrink below its content: the body grew past the drawer, the drawer's own scrollbar never appeared, and the wheel went to the page behind it instead. "The scroll moves the page, not the window" is exactly that. overscroll-behavior stops the page taking over again when the body reaches its end. */ .lvl-drawer-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:4px 18px 18px} .lvl-drawer-h,.lvl-drawer-f{flex:0 0 auto} .lvl-drawer-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-set{padding:16px 0;border-bottom:1px solid var(--lvl-line-2)} .lvl-set:last-child{border-bottom:0} .lvl-set h4{margin:0 0 4px;font:700 11px/1 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-ink)} .lvl-set h4 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--lvl-mut-2);margin-left:7px} .lvl-set-p{margin:0 0 10px;font-size:11.5px;color:var(--lvl-mut);line-height:1.6} .lvl-set .lvl-fl{margin-top:10px} .lvl-set .lvl-strats{max-height:none} /* ══ MANUAL WORKBENCH ═════════════════════════════════════════════════════ */ .lvl-card-wb .lvl-card-b>h4{display:flex;align-items:baseline;gap:9px;margin:18px 0 8px} .lvl-card-wb .lvl-card-b>h4 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--lvl-mut-2);font-size:11px} .lvl-wb-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:11px 12px;margin-bottom:14px; background:var(--lvl-wash);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s)} .lvl-fl.is-grow{flex:1 1 260px} .lvl-fl.is-grow select{max-width:none;width:100%} .lvl-wb-nudge{display:flex;align-items:center;gap:5px;padding-bottom:2px} .lvl-wb-nudge>span{font:700 9px/1 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2);margin-right:2px} .lvl-wb-shift{min-width:46px;text-align:center;font:800 14px/1 var(--lvl-mono);color:var(--lvl-ink)} .lvl-wb-jump,.lvl-wb-act{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px} .lvl-wb-act{margin-left:auto} .lvl-wb-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px} @media (max-width:1100px){.lvl-wb-grid{grid-template-columns:1fr}} .lvl-wb-grid h4{margin:0 0 8px;font:700 10px/1 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut)} .lvl-wb-load .lvl-ba{grid-template-columns:1fr 1fr;gap:10px} .lvl-wb-load .lvl-note{margin-top:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* ══ TIMELINE ═════════════════════════════════════════════════════════════ */ .lvl-tl-wrap{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-card)} .lvl-tl{display:block} .lvl-tl.is-dragging{cursor:grabbing} .lvl-tl-zebra{fill:transparent} .lvl-tl-row:nth-child(even) .lvl-tl-zebra{fill:var(--lvl-wash)} .lvl-tl-row.is-sel .lvl-tl-zebra{fill:var(--lvl-green-t)} .lvl-tl-l{font-size:11px;fill:var(--lvl-ink-2);cursor:pointer} .lvl-tl-row.is-sel .lvl-tl-l{font-weight:700;fill:var(--lvl-ink)} .lvl-tl-row.is-crit .lvl-tl-l{fill:var(--lvl-risk)} .lvl-tl-win{fill:var(--lvl-ok);opacity:.16} .lvl-tl-ghost{fill:var(--lvl-line-3)} .lvl-tl-bar{fill:var(--lvl-info)} .lvl-tl-row.is-crit .lvl-tl-bar{fill:var(--lvl-risk)} .lvl-tl-bar.is-moved{fill:var(--lvl-after)} .lvl-tl-row.is-sel .lvl-tl-bar{stroke:var(--lvl-ink);stroke-width:1.5} .lvl-tl-bar[data-lvl-drag]{cursor:grab} .lvl-tl-bar[data-lvl-drag]:hover{filter:brightness(1.12)} .lvl-tl-d{font:700 10px/1 var(--lvl-mono);fill:var(--lvl-warn)} .lvl-tl-now{stroke:var(--lvl-risk);stroke-width:1.5;stroke-dasharray:3 3} /* ══ DARK ADJUSTMENTS ═════════════════════════════════════════════════════ */ body[data-gantt-theme="dark"] #tp-levelling .lvl-verdict.is-sim{background:linear-gradient(90deg,#241C0C,#15100A);border-left-color:#B9822A} body[data-gantt-theme="dark"] #tp-levelling .lvl-drawer-bd{background:rgba(0,0,0,.55)} body[data-gantt-theme="dark"] #tp-levelling .lvl-ramp{background:linear-gradient(90deg,rgba(74,222,155,.08),rgba(74,222,155,.6))} body[data-gantt-theme="dark"] #tp-levelling .lvl-pv-c.is-mid{background:rgba(74,222,155,.10)} body[data-gantt-theme="dark"] #tp-levelling .lvl-shape-score{background:var(--lvl-card)} /* ══ SCENARIO TRADE-OFF ═══════════════════════════════════════════════════ */ .lvl-to{display:flex;flex-direction:column;gap:2px} .lvl-to-hd,.lvl-to-r{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(110px,1fr)) auto;gap:12px;align-items:center} .lvl-to-hd{padding:0 10px 6px;border-bottom:1px solid var(--lvl-line)} .lvl-to-hd span{font:700 9px/1.2 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-to-r{padding:9px 10px;border-radius:var(--lvl-r-s)} .lvl-to-r:hover{background:var(--lvl-wash)} .lvl-to-r.is-flagged{background:var(--lvl-warn-t)} .lvl-to-r.is-rec{box-shadow:inset 0 0 0 1.5px var(--lvl-ok)} .lvl-to-n b{display:block;font:700 12.5px/1.3 var(--lvl-font)} .lvl-to-n em{display:block;font-style:normal;font-size:10.5px;color:var(--lvl-mut);margin-top:1px} .lvl-to-r>div{display:flex;align-items:center;gap:8px} .lvl-to-t{flex:1;display:block;height:8px;border-radius:4px;background:var(--lvl-line-2);overflow:hidden;min-width:40px} .lvl-to-t b{display:block;height:100%;border-radius:4px} .lvl-to-t b.is-good{background:var(--lvl-ok)} .lvl-to-t b.is-warn{background:var(--lvl-warn)} .lvl-to-t b.is-bad{background:var(--lvl-risk)} .lvl-to-r u{text-decoration:none;font-family:var(--lvl-mono);font-size:11px;min-width:42px;text-align:right;white-space:nowrap} .lvl-to-a{justify-content:flex-end} @media (max-width:900px){ .lvl-to-hd{display:none} .lvl-to-r{grid-template-columns:1fr;gap:5px;border:1px solid var(--lvl-line);margin-bottom:8px} } /* ══ DEPLOYMENT SHAPE ═════════════════════════════════════════════════════ */ .lvl-shape-gap{fill:var(--lvl-warn);opacity:.10} .lvl-shape-ideal{fill:none;stroke:var(--lvl-ink);stroke-width:2;stroke-dasharray:7 4;stroke-linejoin:round} .lvl-shape-lbl{font:700 10px/1 var(--lvl-font);fill:var(--lvl-ink)} .lvl-shape-b{fill:var(--lvl-s1,#2a78d6)} .lvl-shape-b.is-over{fill:var(--lvl-warn)} .lvl-shape-b.is-under{fill:var(--lvl-line-3)} .lvl-scurve{stroke:var(--lvl-ok);stroke-width:2.4} .lvl-lg-b{background:var(--lvl-s1,#2a78d6)} .lvl-lg-b.is-over{background:var(--lvl-warn)} .lvl-lg-b.is-under{background:var(--lvl-line-3)} .lvl-lg-l{width:22px!important;height:0!important;border:0!important;border-top:2px dashed var(--lvl-ink)!important;border-radius:0!important} .lvl-shape-hd{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:11px 14px;margin-bottom:12px; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-wash)} .lvl-shape-score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:86px; padding:6px 10px;border-radius:var(--lvl-r-s);background:var(--lvl-card);border:1px solid var(--lvl-line)} .lvl-shape-score b{font:800 24px/1 var(--lvl-mono)} .lvl-shape-score i{font-style:normal;font-size:11px;color:var(--lvl-mut-2)} .lvl-shape-score em{font-style:normal;font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;text-align:center} .lvl-shape-score.is-good b{color:var(--lvl-ok)} .lvl-shape-score.is-good{border-color:var(--lvl-ok);background:var(--lvl-ok-t)} .lvl-shape-score.is-mid b{color:var(--lvl-warn)} .lvl-shape-score.is-mid{border-color:var(--lvl-warn);background:var(--lvl-warn-t)} .lvl-shape-score.is-bad b{color:var(--lvl-risk)} .lvl-shape-score.is-bad{border-color:var(--lvl-risk);background:var(--lvl-risk-t)} .lvl-shape-note{margin:0;font-size:12px;line-height:1.5;color:var(--lvl-ink-2)} .lvl-shape-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px} .lvl-shape-facts div{display:flex;flex-direction:column;gap:1px} .lvl-shape-facts span{font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-shape-facts b{font:700 13px/1.2 var(--lvl-mono)} /* ══ CREW LIMIT PANEL ═════════════════════════════════════════════════════ */ .lvl-lim-note{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;margin-bottom:12px;border-radius:var(--lvl-r-s); background:var(--lvl-info-t);border:1px solid rgba(74,119,174,.22);font-size:11.5px;line-height:1.6;color:var(--lvl-ink-2)} .lvl-lim-note svg{color:var(--lvl-info);margin-top:2px;flex:0 0 auto} .lvl-crew{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--lvl-mono);font-size:11px} .lvl-crew b{font-weight:700} .lvl-crew em{font-style:normal;color:var(--lvl-mut-2)} .lvl-src{display:inline-block;padding:2px 6px;border-radius:20px;font:700 9px/1.5 var(--lvl-font);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .lvl-src.is-crew{background:var(--lvl-info-t);color:var(--lvl-info)} .lvl-src.is-user{background:var(--lvl-green-t);color:var(--lvl-green-d)} .lvl-src.is-auto{background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-num.is-crew{width:64px} .lvl-inline-sel{display:inline-flex;align-items:center;gap:6px;margin-top:8px} .lvl-inline-sel>span{font:700 9px/1 var(--lvl-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-inline-sel select{height:26px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-xs);background:var(--lvl-card); color:var(--lvl-ink);font:500 11.5px/1 var(--lvl-font);padding:0 7px} .lvl-wb-sub{margin-bottom:14px} .lvl-wb-sub h5{display:flex;align-items:baseline;gap:9px;margin:0 0 7px;font:700 11px/1 var(--lvl-font);color:var(--lvl-ink)} .lvl-wb-sub h5 em{font-style:normal;font-weight:500;font-size:10.5px;color:var(--lvl-mut-2)} .lvl-wb-sub h5 b{margin-left:auto;font-size:11px} .lvl-wb-scale{display:flex;justify-content:flex-end} /* ══ WORKFLOW STEPPER ═════════════════════════════════════════════════════ */ .lvl-steps{display:flex;list-style:none;margin:0;padding:8px 18px;gap:6px;background:var(--lvl-card); border-bottom:1px solid var(--lvl-line);overflow-x:auto} .lvl-step{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 8px;border-radius:var(--lvl-r-s); border:1px solid transparent;cursor:pointer;flex:1 1 0;min-width:158px;transition:background .12s,border-color .12s} .lvl-step:hover{background:var(--lvl-wash)} .lvl-step-n{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:var(--lvl-line-2);color:var(--lvl-mut);font:800 11px/1 var(--lvl-mono)} .lvl-step-t{display:flex;flex-direction:column;gap:1px;min-width:0} .lvl-step-t b{font:700 11.5px/1.2 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-step-t em{font-style:normal;font-size:10px;line-height:1.35;color:var(--lvl-mut-2)} .lvl-step.is-done .lvl-step-n{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-step.is-done .lvl-step-t b{color:var(--lvl-ink)} .lvl-step.is-now{background:var(--lvl-green-t);border-color:rgba(36,180,126,.3)} .lvl-step.is-now .lvl-step-n{background:var(--lvl-green);color:#fff} .lvl-step.is-now .lvl-step-t b{color:var(--lvl-green-d)} @media (max-width:900px){.lvl-step-t em{display:none}.lvl-step{min-width:0;flex:0 0 auto}} /* ══ LOAD GANTT ═══════════════════════════════════════════════════════════ */ .lvl-lg-gantt .lvl-lg-l{font-size:10.5px;fill:var(--lvl-ink-2);cursor:pointer} .lvl-lg-row.is-sel .lvl-lg-l{font-weight:700;fill:var(--lvl-ink)} .lvl-lg-row:nth-child(even) .lvl-tl-zebra{fill:var(--lvl-wash)} .lvl-lg-row.is-sel .lvl-tl-zebra{fill:var(--lvl-green-t)} .lvl-lg-win{fill:var(--lvl-mut-2);opacity:.13} .lvl-lg-bar{fill:var(--lvl-line-3);cursor:grab} .lvl-lg-bar.is-ok{fill:var(--lvl-ok)} .lvl-lg-bar.is-high{fill:var(--lvl-warn)} .lvl-lg-bar.is-over{fill:var(--lvl-risk)} .lvl-lg-bar.is-none{fill:var(--lvl-line-3)} .lvl-lg-bar.is-crit{stroke:var(--lvl-ink);stroke-width:1;stroke-opacity:.55} .lvl-lg-bar.is-moved{stroke:var(--lvl-after);stroke-width:1.4;stroke-opacity:1} .lvl-lg-bar:hover{filter:brightness(1.12)} .lvl-lg-hot{fill:var(--lvl-risk);opacity:.07;pointer-events:none} .lvl-lg-hot.is-shape{fill:var(--lvl-warn);opacity:.07} .lvl-lg-p{background:var(--lvl-line-3)} .lvl-lg-p.is-over{background:var(--lvl-risk)} .lvl-lg-p.is-high{background:var(--lvl-warn)} .lvl-lg-p.is-ok{background:var(--lvl-ok)} .lvl-lg-w{background:var(--lvl-mut-2);opacity:.3} /* ══ CHANGE GANTT ═════════════════════════════════════════════════════════ */ .lvl-cg .lvl-cg-gb{fill:var(--lvl-wash)} .lvl-cg .lvl-cg-gt{font:800 11px/1 var(--lvl-font);fill:var(--lvl-ink)} .lvl-cg .lvl-cg-gs{font:600 10px/1 var(--lvl-mono);fill:var(--lvl-mut)} .lvl-cg .lvl-cg-l{font-size:10.5px;fill:var(--lvl-ink-2);cursor:pointer} .lvl-cg-row.is-sel .lvl-cg-l{font-weight:700;fill:var(--lvl-ink)} .lvl-cg-row:hover .lvl-tl-zebra{fill:var(--lvl-wash)} .lvl-cg-row.is-sel .lvl-tl-zebra{fill:var(--lvl-green-t)} .lvl-cg-was{fill:none;stroke:var(--lvl-before);stroke-width:1;stroke-dasharray:3 2} .lvl-cg-now{fill:var(--lvl-neutral);cursor:pointer} .lvl-cg-row.is-later .lvl-cg-now{fill:var(--lvl-warn)} .lvl-cg-row.is-earlier .lvl-cg-now{fill:var(--lvl-ok)} .lvl-cg-row.is-logic .lvl-cg-now{fill:var(--lvl-info)} .lvl-cg-now:hover{filter:brightness(1.12)} .lvl-cg-arw{stroke:var(--lvl-mut-2);stroke-width:1;stroke-dasharray:2 2} .lvl-cg-arh{fill:var(--lvl-mut-2)} .lvl-cg-row.is-later .lvl-cg-arw,.lvl-cg-row.is-later .lvl-cg-arh{stroke:var(--lvl-warn);fill:var(--lvl-warn)} .lvl-cg-row.is-earlier .lvl-cg-arw,.lvl-cg-row.is-earlier .lvl-cg-arh{stroke:var(--lvl-ok);fill:var(--lvl-ok)} .lvl-cg-d{font:700 10px/1 var(--lvl-mono);fill:var(--lvl-mut)} .lvl-cg-row.is-later .lvl-cg-d{fill:var(--lvl-warn)} .lvl-cg-row.is-earlier .lvl-cg-d{fill:var(--lvl-ok)} .lvl-cg-row.is-logic .lvl-cg-d{fill:var(--lvl-info)} .lvl-grid.is-year{stroke:var(--lvl-line);stroke-width:1.2;opacity:.9} .lvl-cg-mk{stroke:var(--lvl-before);stroke-width:1.4;stroke-dasharray:4 3} .lvl-cg-mk.is-after{stroke:var(--lvl-after)} .lvl-cg-mkt{font:800 9px/1 var(--lvl-mono);fill:var(--lvl-before)} .lvl-cg-mkt.is-after{fill:var(--lvl-after)} .lvl-cg-lg{width:14px;height:9px;border-radius:2px;background:var(--lvl-neutral)} .lvl-cg-lg.is-was{background:transparent;border:1px dashed var(--lvl-before)} .lvl-cg-lg.is-later{background:var(--lvl-warn)} .lvl-cg-lg.is-earlier{background:var(--lvl-ok)} .lvl-cg-lg.is-logic{background:var(--lvl-info)} .lvl-cg-lg.is-mk{background:transparent;border-left:2px dashed var(--lvl-after);width:4px} /* ══ SCENARIO LEDGER ══════════════════════════════════════════════════════ */ .lvl-lg-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px} .lvl-lg-head>span{margin-left:auto;font-size:11px;color:var(--lvl-mut)} .lvl-led{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-led-g+.lvl-led-g{border-top:1px solid var(--lvl-line)} .lvl-led-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--lvl-wash);cursor:pointer;width:100%; border:0;text-align:left;font:inherit;color:inherit} .lvl-led-h:hover{background:var(--lvl-line-2)} .lvl-led-h i{width:4px;height:16px;border-radius:2px;flex:0 0 auto} .lvl-led-h b{font:700 12px/1.3 var(--lvl-font)} .lvl-led-h em{font-style:normal;font-size:11px;color:var(--lvl-mut)} .lvl-led-h u{margin-left:auto;text-decoration:none;font:700 10px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-led-b{padding:0} .lvl-led-b table{width:100%;border-collapse:collapse} .lvl-led-r>td{padding:7px 12px;border-top:1px solid var(--lvl-line-2);font-size:11.5px;vertical-align:top} .lvl-led-n b{display:block;font:600 12px/1.3 var(--lvl-font)} .lvl-led-n em{display:block;font-style:normal;font-size:10.5px;color:var(--lvl-mut);margin-top:2px} .lvl-led-dt{font-family:var(--lvl-mono);font-size:10.5px;white-space:nowrap} .lvl-led-dt s{color:var(--lvl-mut-2);text-decoration:line-through} .lvl-led-dt b{color:var(--lvl-ink)} .lvl-led-sh{font:800 11px/1 var(--lvl-mono);white-space:nowrap} .lvl-led-sh.is-later{color:var(--lvl-warn)} .lvl-led-sh.is-earlier{color:var(--lvl-ok)} .lvl-led-sh.is-logic{color:var(--lvl-info)} .lvl-led-w{color:var(--lvl-mut);font-size:11px;line-height:1.5} .lvl-led-f{font-family:var(--lvl-mono);font-size:10.5px;white-space:nowrap;text-align:right} .lvl-led-f.is-tight{color:var(--lvl-risk)} /* ══ RESOURCE CHANGE (scenario) ═══════════════════════════════════════════ */ .lvl-rc{display:grid;gap:14px} .lvl-rc-r{border:1px solid var(--lvl-line);border-left-width:3px;border-radius:var(--lvl-r-s);padding:12px 14px;background:var(--lvl-card)} .lvl-rc-r.is-good{border-left-color:var(--lvl-ok)} .lvl-rc-r.is-bad{border-left-color:var(--lvl-risk)} .lvl-rc-r.is-neutral{border-left-color:var(--lvl-line-3)} .lvl-rc-r>header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px} .lvl-rc-r>header i{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .lvl-rc-r>header b{font:700 13px/1.3 var(--lvl-font)} .lvl-rc-r>header em{font-style:normal;font-size:11px;color:var(--lvl-mut)} .lvl-rc-r>header .lvl-tag{margin-left:auto} .lvl-rc-m{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px} .lvl-rc-m>div{border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-xs);padding:7px 9px} .lvl-rc-m span{display:block;font:700 9px/1 var(--lvl-mono);letter-spacing:.1em;color:var(--lvl-mut-2);text-transform:uppercase} .lvl-rc-m b{display:block;font:800 15px/1.2 var(--lvl-mono);margin-top:4px} .lvl-rc-m em{display:block;font-style:normal;font-size:10.5px;color:var(--lvl-mut);margin-top:2px} /* ══ SHARED SMALL BITS ════════════════════════════════════════════════════ */ .lvl-warn-l{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 12px;border-radius:var(--lvl-r-xs); background:var(--lvl-warn-t);border:1px solid var(--lvl-warn);color:var(--lvl-ink-2);font-size:12px} .lvl-sub{display:block;font-style:normal;font:500 10px/1.3 var(--lvl-mono);color:var(--lvl-mut-2);margin-top:2px} .lvl-num-c{font-family:var(--lvl-mono);font-size:11px;text-align:center;white-space:nowrap} .lvl-num-c s{color:var(--lvl-mut-2)} /* ══════════════════════════════════════════════════════════════════════════ THE WORKSPACE — one screen, four panes The page does not scroll. The programme scrolls down, time scrolls sideways, and the toolbar, the column headers and the inspector never move. Everything is sized from the viewport so a planner can work without losing the thing they were looking at. ══════════════════════════════════════════════════════════════════════════ */ /* the panel becomes a viewport-height column when the workspace is open, and `--lvl-vh` is measured after paint — the chrome above it is not a constant anyone can hard-code, and guessing it is what left the page scrolling */ .lvl.is-ws{display:block} /* `.lvl-main` is a COLUMN flex container in the base stylesheet. Giving its children `flex:1` there made the workspace a flex ITEM whose MAIN size is its height — and flex-grow beats the height property, so the panel ignored even an `!important` height and grew to its content. It is a plain block here, and the workspace sizes itself. */ .lvl.is-ws .lvl-main{display:block;padding-bottom:0;min-height:0} .lvl.is-ws .lvl-steps{display:none} /* the workspace toolbar carries the view controls, so the page-level filter bar is duplication until it is asked for */ /* ON EVERY VIEW, NOT JUST THE WORKSPACE. Six selects a planner sets once a session sat permanently above the content on six of the eight views. */ .lvl .lvl-filters{display:none} .lvl.is-wsf .lvl-filters{display:flex} .lvl.is-ws .lvl-foot{display:none} .lvl-tb-btn.is-on{background:var(--lvl-green-t);border-color:rgba(36,180,126,.3);color:var(--lvl-green-d)} .lvl.is-ws .lvl-foot{padding-top:6px;padding-bottom:6px} .lvl-ws{--ws-cols:clamp(198px,22vw,330px);--ws-insp:clamp(272px,24vw,340px);--ws-row:22px; display:flex;flex-direction:column;height:var(--lvl-vh,calc(100vh - 300px));min-height:360px; border:1px solid var(--lvl-line);border-radius:var(--lvl-r);background:var(--lvl-card);overflow:hidden} .lvl-ws-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) var(--ws-insp);min-height:0} /* the inspector shut to a rail — 30px instead of 326, and the timeline takes every pixel it gives back */ .lvl-ws-grid:has(.lvl-ws-insp.is-rail){grid-template-columns:minmax(0,1fr) 30px} .lvl-ws-insp.is-rail{padding:0;overflow:hidden;background:var(--lvl-wash);border-left:1px solid var(--lvl-line)} .lvl-ws-insp-o{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:100%;padding:10px 0; border:0;background:none;cursor:pointer;color:var(--lvl-mut);font:600 10px/1 var(--lvl-font)} .lvl-ws-insp-o:hover{background:var(--lvl-line-2);color:var(--lvl-ink)} .lvl-ws-insp-o svg{transform:rotate(180deg);flex:0 0 auto} .lvl-ws-insp-o span{writing-mode:vertical-rl;letter-spacing:.08em;text-transform:uppercase;font-size:9px} .lvl-ws-insp-o em{font-style:normal;padding:1px 5px;border-radius:99px;background:var(--lvl-green);color:#fff;font:700 9px/1.5 var(--lvl-mono)} .lvl-ws-insp{position:relative} .lvl-ws-insp-x{position:absolute;top:6px;right:8px;z-index:4;width:20px;height:20px;border:0;border-radius:5px; background:none;cursor:pointer;color:var(--lvl-mut-2);display:flex;align-items:center;justify-content:center} .lvl-ws-insp-x:hover{background:var(--lvl-line-2);color:var(--lvl-ink)} /* EVERY PANE HAS A FIXED PLACE ON THE PAGE. The rows are declared here, once, so opening the crew heat or the week drill-in can never resize the Gantt under the planner's hands — a pane that moves its neighbours is a pane you cannot learn. Each pane scrolls INSIDE its own row instead. */ /* THE PROGRAMME GETS THE ROOM. The rows used to be `minmax(120px,1fr) 104px 168px` — 272 fixed pixels for the two subordinate panes, which on a 1280x720 laptop left the Gantt 125px and six rows of seventy-one. The subordinate panes are now SHARES with floors, so the split holds at every screen size, and each one can be shut when it is not being read. */ .lvl-ws-chart{position:relative;display:grid; grid-template-rows:minmax(112px,2.05fr) minmax(104px,1.5fr) minmax(78px,1.05fr); min-width:0;min-height:0;border-right:1px solid var(--lvl-line);overflow:hidden} /* a shut pane is its own header strip and nothing more */ .lvl-ws-chart.hm-shut{grid-template-rows:minmax(112px,2.4fr) 24px minmax(78px,1fr)} .lvl-ws-chart.hg-shut{grid-template-rows:minmax(112px,2.05fr) minmax(104px,1.5fr) 24px} .lvl-ws-chart.hm-shut.hg-shut{grid-template-rows:minmax(112px,1fr) 24px 24px} /* on a short screen the programme takes an even bigger share — 720px of laptop cannot carry all three panes at a comfortable height */ @media (max-height:820px){ .lvl-ws-chart{grid-template-rows:minmax(96px,1.7fr) minmax(88px,1.35fr) minmax(80px,1.05fr)} .lvl-ws-chart.hm-shut{grid-template-rows:minmax(104px,2.3fr) 24px minmax(88px,1.15fr)} } .lvl-ws-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; height:100%;color:var(--lvl-mut);text-align:center;padding:40px} .lvl-ws-blank b{font:700 14px/1.4 var(--lvl-font);color:var(--lvl-ink)} .lvl-ws-blank p{font-size:12px;max-width:340px;margin:0} /* ── toolbar ─────────────────────────────────────────────────────────── */ /* ONE ROW, ALWAYS. Wrapping put 61px of controls above the programme the moment the pane was narrow — and a control that moves to a second line when you resize the window is a control you have to hunt for. It scrolls sideways instead, with the two chips a planner checks first pinned to the end so they cannot scroll away. */ /* ── IT WRAPS, IT DOES NOT HIDE ─────────────────────────────────────── The row was nowrap + overflow-x:auto with the scrollbar suppressed, so a toolbar 2229px wide in a 1402px bar simply ENDED — 692px of controls off the right edge at 1440, 852px at 1280, with nothing on screen to suggest they existed. Regrouped it now fits one row on a laptop; where it does not it takes a second row, which is a toolbar you can see rather than one you have to know how to drag. Overflow is visible so the Layers menu can hang below the bar. */ .lvl-ws-tb{display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding:5px 12px;border-bottom:1px solid var(--lvl-line);background:var(--lvl-card); position:relative;z-index:12} .lvl-ws-tb>*{flex:0 0 auto} .lvl-tbg{display:flex;align-items:center;gap:7px} .lvl-tbg.is-tog{gap:4px} .lvl-tbg.is-end{margin-left:auto;gap:8px} .lvl-tbg>label{font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-tb-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--lvl-r-s); border:1px solid var(--lvl-line-3);background:var(--lvl-card);color:var(--lvl-ink-2); font:600 12px/1 var(--lvl-font);cursor:pointer} .lvl-tb-btn:hover{background:var(--lvl-wash)} .lvl-tb-btn em{font-style:normal;font:800 9px/1 var(--lvl-mono);background:var(--lvl-green-t);color:var(--lvl-green-d); padding:2px 5px;border-radius:9px} .lvl-ws-tb .lvl-sel-s{height:28px;min-width:104px;max-width:180px} .lvl-ws-tb .lvl-tb-btn{height:28px;padding:0 10px} .lvl-ws-tb .lvl-seg-b{height:28px;padding:0 10px} /* ── TWO MENUS, ONE MECHANISM ───────────────────────────────────────── View holds how the programme is being looked at — which trade, how wide a column, the date it is measured against. Show holds what is drawn on top of the bars. Both are decisions a planner makes a few times a session; on the bar the four Show switches alone cost 450px of a 1402px row to say so. */ .lvl-tbg.is-menu{position:relative} .lvl-tb-btn.is-menu.is-open{background:var(--lvl-wash);border-color:var(--lvl-line-3)} .lvl-tb-car{width:0;height:0;border:3.5px solid transparent;border-top-color:var(--lvl-mut-2); margin-left:1px;transform:translateY(2px)} .lvl-tb-btn.is-menu.is-open .lvl-tb-car{transform:translateY(-1px) rotate(180deg)} .lvl-tb-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:232px; padding:5px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s);background:var(--lvl-card); box-shadow:0 12px 30px -12px rgba(15,30,45,.34);display:flex;flex-direction:column;gap:1px} .lvl-tb-opt{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border:0;border-radius:var(--lvl-r-xs); background:none;cursor:pointer;text-align:left;color:var(--lvl-ink-2);font:600 11.5px/1.3 var(--lvl-font)} .lvl-tb-opt:hover{background:var(--lvl-wash)} .lvl-tb-opt>i{flex:0 0 auto;width:22px;height:13px;border-radius:8px;background:var(--lvl-line-3); position:relative;margin-top:1px;transition:background .14s} .lvl-tb-opt>i::after{content:"";position:absolute;top:1.5px;left:1.5px;width:10px;height:10px;border-radius:50%; background:#FFF;box-shadow:0 1px 2px rgba(15,30,45,.3);transition:transform .14s} .lvl-tb-opt.is-on{color:var(--lvl-ink)} .lvl-tb-opt.is-on>i{background:var(--lvl-green)} .lvl-tb-opt.is-on>i::after{transform:translateX(9px)} .lvl-tb-opt em{display:block;font-style:normal;font:400 10px/1.35 var(--lvl-font);color:var(--lvl-mut);margin-top:2px} /* the View menu holds controls rather than switches, so each one gets its name and the one line saying what it changes */ .lvl-tb-pop.is-wide{min-width:288px;padding:9px;gap:0} .lvl-tb-fld{display:block;padding:7px 3px} .lvl-tb-fld+.lvl-tb-fld{border-top:1px solid var(--lvl-line-2)} .lvl-tb-fld>label{display:block;font:700 11px/1.3 var(--lvl-font);color:var(--lvl-ink)} .lvl-tb-fld>em{display:block;font-style:normal;font:400 10px/1.4 var(--lvl-font);color:var(--lvl-mut);margin:2px 0 6px} .lvl-tb-fld .lvl-sel-s{width:100%;max-width:none} .lvl-tb-fldr{display:flex;align-items:center;gap:4px} .lvl-tb-fldr .lvl-sel-s{flex:1} .lvl-tb-more{display:block;width:100%;margin-top:7px;padding:8px 9px;border:0;border-top:1px solid var(--lvl-line-2); border-radius:0 0 var(--lvl-r-xs) var(--lvl-r-xs);background:none;cursor:pointer;text-align:left; font:700 11px/1.3 var(--lvl-font);color:var(--lvl-green-d)} .lvl-tb-more:hover{background:var(--lvl-green-t)} .lvl-tb-more span{display:block;font-weight:400;font-size:10px;line-height:1.4;color:var(--lvl-mut);margin-top:2px} /* a filter narrows the programme silently, so the bar says which trade */ .lvl-tb-stat.is-note{background:var(--lvl-info-t);color:var(--lvl-info);font-weight:700} /* ── THREE LEVERS, ALL OF THEM ON SCREEN ────────────────────────────── The guide costs move, spread and shorten on every bar and reported only the winner, so "spread it" — which is the answer on a peak, and the one lever that spends no float — lost by a point and vanished. */ .lvl-lv{display:flex;flex-direction:column;gap:4px} .lvl-lv-b{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;cursor:pointer;text-align:left; border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s);background:var(--lvl-card);color:inherit;font:inherit} .lvl-lv-b:hover{border-color:var(--lvl-green);background:var(--lvl-green-t)} .lvl-lv-b.is-best{border-color:rgba(36,180,126,.42);box-shadow:inset 2.5px 0 0 var(--lvl-green)} .lvl-lv-k{flex:0 0 16px;font-style:normal;font:800 13px/1 var(--lvl-mono);text-align:center;color:var(--lvl-info)} .lvl-lv-b.is-best .lvl-lv-k{color:var(--lvl-green-d)} .lvl-lv-t{flex:1;min-width:0} .lvl-lv-t b{display:block;font:700 11.5px/1.3 var(--lvl-font)} .lvl-lv-t b em{font-style:normal;font:800 8px/1 var(--lvl-mono);letter-spacing:.08em;text-transform:uppercase; color:var(--lvl-green-d);background:var(--lvl-green-t);padding:2px 4px;border-radius:3px;margin-left:6px;vertical-align:1px} .lvl-lv-t>em{display:block;font-style:normal;font:400 10px/1.4 var(--lvl-mono);color:var(--lvl-mut);margin-top:2px} .lvl-lv-g{flex:0 0 auto;text-decoration:none;font:800 11px/1 var(--lvl-mono);color:var(--lvl-ok)} .lvl-lv-c{flex:0 0 auto;font:700 8.5px/1 var(--lvl-mono);letter-spacing:.05em;text-transform:uppercase; color:var(--lvl-warn);background:var(--lvl-warn-t);padding:3px 5px;border-radius:3px} .lvl-zoom{width:104px;accent-color:var(--lvl-green)} .lvl-tog{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 4px;border-radius:14px; border:1px solid var(--lvl-line-3);background:var(--lvl-card);color:var(--lvl-mut); font:600 11px/1 var(--lvl-font);cursor:pointer} .lvl-tog i{width:22px;height:13px;border-radius:8px;background:var(--lvl-line-3);position:relative;transition:background .14s} .lvl-tog i::after{content:"";position:absolute;top:1.5px;left:1.5px;width:10px;height:10px;border-radius:50%; background:#fff;transition:transform .14s} .lvl-tog.is-on{color:var(--lvl-ink);border-color:rgba(36,180,126,.32)} .lvl-tog.is-on i{background:var(--lvl-green)} .lvl-tog.is-on i::after{transform:translateX(9px)} .lvl-tb-stat{font:600 11px/1 var(--lvl-font);color:var(--lvl-mut);padding:5px 9px;border-radius:14px;background:var(--lvl-line-2)} .lvl-tb-stat b{font-family:var(--lvl-mono);font-weight:800} .lvl-tb-stat.is-bad{background:var(--lvl-risk-t);color:var(--lvl-risk)} .lvl-tb-stat.is-good{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-tb-stat.is-ok{background:var(--lvl-ok-t);color:var(--lvl-ok)} /* ── gantt: fixed columns + scrolling timeline ───────────────────────── */ .lvl-gt{display:grid;grid-template-columns:var(--ws-cols) minmax(0,1fr);min-height:0;overflow:hidden;border-bottom:1px solid var(--lvl-line)} .lvl-gt-cols{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--lvl-line);background:var(--lvl-card)} .lvl-gt-colh{display:grid;grid-template-columns:minmax(0,1fr) 32px 46px;align-items:center;gap:4px; height:54px;padding:0 8px;border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash); font:700 9px/1 var(--lvl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-gt-colh .c-num,.lvl-gt-colh .c-float{text-align:right} .lvl-gt-colb{flex:1;overflow:hidden auto;scrollbar-width:none} .lvl-gt-colb::-webkit-scrollbar{display:none} .lvl-gtr{display:grid;grid-template-columns:minmax(0,1fr) 32px 46px;align-items:center;gap:4px; height:var(--ws-row);padding:0 8px;font-size:10.5px;color:var(--lvl-ink-2);cursor:pointer; border-bottom:1px solid transparent} .lvl-gtr:hover{background:var(--lvl-wash)} .lvl-gtr .c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-gtr .c-num{text-align:right;font:600 9.5px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-gtr .c-num.is-over{color:var(--lvl-risk);font-weight:800} .lvl-gtr .c-float{display:flex;align-items:center;justify-content:flex-end;gap:4px; font:600 9.5px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-gtr .c-float.is-tight{color:var(--lvl-warn)} .lvl-gtr .c-float.is-none{color:var(--lvl-risk);font-weight:800} .lvl-gtr .c-float svg{width:10px;height:10px;opacity:.6} .lvl-gtr.is-wbs{font:700 10.5px/1 var(--lvl-font)} .lvl-gtr.is-wbs .c-float{color:var(--lvl-mut-2);font-weight:600} .lvl-gtr.is-wbs:hover{filter:brightness(1.15)} .lvl-gt-tw{font-style:normal;font-size:8px;color:var(--lvl-mut-2);width:11px;flex:0 0 11px} .lvl-gt-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;vertical-align:1px} .lvl-gt-dot.is-over{background:var(--lvl-risk)} .lvl-gtr.is-wbs .c-name b{font-family:var(--lvl-mono);font-size:9.5px;opacity:.8;margin-right:5px;font-weight:700} .lvl-gtr.is-wbs.is-l0 .c-name{font-size:11px} .lvl-gtr.is-wbs .c-name{display:flex;align-items:center;gap:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-gtr.is-sel{background:var(--lvl-green-t);font-weight:700;color:var(--lvl-ink)} .lvl-gtr.is-rel{background:var(--lvl-wash)} .lvl-gtr.is-lit{background:var(--lvl-green-t)} .lvl-gtr.is-dim{opacity:.35} /* ── THE SIGNED GAP RIBBON ──────────────────────────────────────────── Sits under the time header, on the Gantt's own axis, so the column above a bar is that bar's week. Warm and up = above the ideal (move work out); cool and down = below it (room to fill). */ .lvl-gt-gaph{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px; border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash); font:600 8.5px/1 var(--lvl-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--lvl-mut-2); overflow:hidden;white-space:nowrap} .lvl-gt-gaph b{font-weight:800;color:var(--lvl-mut)} .lvl-gt-gaph span{display:flex;align-items:center;gap:3px;text-transform:none;letter-spacing:0;font-size:8.5px} .lvl-gt-gaph i{width:7px;height:7px;border-radius:1.5px;flex:0 0 7px} .lvl-gt-gaph i.is-over{background:var(--lvl-risk)} .lvl-gt-gaph i.is-under{background:var(--lvl-info)} .lvl-ws-gap{border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-gap-mid{stroke:var(--lvl-line);stroke-width:1} .lvl-gap-c{cursor:pointer} .lvl-gap-c.is-over{fill:var(--lvl-risk);fill-opacity:.72} .lvl-gap-c.is-under{fill:var(--lvl-info);fill-opacity:.62} .lvl-gap-c.is-flat{fill:var(--lvl-mut-2);fill-opacity:.5} .lvl-gap-c:hover{fill-opacity:1} .lvl-gap-none{fill:var(--lvl-mut);font:600 10px/1 var(--lvl-font)} /* ── WHAT THIS BAR SHOULD DO ────────────────────────────────────────── A hollow target where the curve wants the activity, an arrow from here to there, and the score it buys. The dash MARCHES toward the target: on a programme of several hundred rows a static hairline is not findable, and the one thing this mark has to be is findable. Motion is the only channel left — colour is carrying pressure and fill is carrying trade. */ /* THE TARGET FINISH. Everything to the right of it is time the programme does not have — a different statement from "later than planned", so the zone is shaded rather than the edge merely drawn. A hairline at week 84 is not something anybody notices while dragging a bar at week 40. */ .lvl-ws-limit{stroke:var(--lvl-risk);stroke-width:1.6;stroke-dasharray:5 3;opacity:.9} .lvl-ws-past{fill:var(--lvl-risk);fill-opacity:.055;pointer-events:none} .lvl-ws-limb{fill:var(--lvl-risk)} .lvl-ws-limt{fill:#fff;font:800 8.5px/1 var(--lvl-mono);letter-spacing:.06em} .lvl-tb-date{font:600 10.5px/1 var(--lvl-mono);padding:4px 6px} .lvl-tb-x{border:0;background:none;cursor:pointer;color:var(--lvl-mut);font-size:11px;padding:2px 4px;border-radius:4px} .lvl-tb-x:hover{background:var(--lvl-line-2);color:var(--lvl-risk)} .lvl-ws-guide{cursor:pointer} /* ── A SUGGESTION SHOULD READ AS ONE OBJECT ────────────────────────── The lane, the arrow and the label were three marks of three weights that happened to be near each other. Now the connector is a quiet hairline that only carries DISTANCE, and the weight is all in the target — the thing the planner is actually being asked to look at. The march is slower and shallower too: at 1.1s it read as an alarm on a screen with forty of them. */ .lvl-ws-gline{stroke:var(--lvl-info);stroke-width:1;stroke-dasharray:3 3;opacity:.55; animation:lvlGuideMarch 2.2s linear infinite} @keyframes lvlGuideMarch{from{stroke-dashoffset:6}to{stroke-dashoffset:0}} .lvl-ws-ghead{fill:var(--lvl-info);opacity:.75} /* the target is the statement: a solid, rounded, slightly inset bar with a little lift under it, so on a dense programme the eye finds the SET of suggestions before it reads any one of them */ .lvl-ws-gtarget{fill:var(--lvl-info);fill-opacity:1;stroke:none; filter:drop-shadow(0 1px 0 rgba(11,18,32,.18))} .lvl-ws-gt{fill:var(--lvl-info);font:800 8.5px/1 var(--lvl-mono);opacity:.9} .lvl-ws-ggain{fill:var(--lvl-ok);font-weight:800} .lvl-ws-guide:hover .lvl-ws-gt{opacity:1} .lvl-ws-guide:hover .lvl-ws-gline{opacity:.9} .lvl-ws-guide:hover .lvl-ws-gtarget{fill-opacity:1} .lvl-ws-guide:hover .lvl-ws-gtarget{filter:drop-shadow(0 1px 3px rgba(74,119,174,.5))} /* spending float, and spending the finish date, are different asks */ .lvl-ws-guide.is-float .lvl-ws-gline,.lvl-ws-guide.is-float .lvl-ws-gtarget{stroke:var(--lvl-warn)} .lvl-ws-guide.is-float .lvl-ws-ghead{fill:var(--lvl-warn)} .lvl-ws-guide.is-float .lvl-ws-gt{fill:var(--lvl-warn)} .lvl-ws-guide.is-float .lvl-ws-gtarget{fill:var(--lvl-warn)} .lvl-ws-guide.is-costly .lvl-ws-gline,.lvl-ws-guide.is-costly .lvl-ws-gtarget{stroke:var(--lvl-risk)} .lvl-ws-guide.is-costly .lvl-ws-ghead{fill:var(--lvl-risk)} .lvl-ws-guide.is-costly .lvl-ws-gt{fill:var(--lvl-risk)} .lvl-ws-guide.is-costly .lvl-ws-gtarget{fill:var(--lvl-risk)} /* BLOCKED is not an instruction, it is an explanation: above the curve with no float, so no drag fixes it and only the logic can. It does not march — there is nothing to march towards. */ /* RE-CREWING IS NOT RESCHEDULING. A duration suggestion holds the start and moves the finish, so its target is drawn as a bracket round the new span in a colour of its own — telling a planner to move work when you meant "put fewer people on it for longer" is the wrong instruction entirely. */ .lvl-ws-guide.is-dur .lvl-ws-gline,.lvl-ws-guide.is-dur .lvl-ws-gtarget{stroke:var(--lvl-s1,#6E8BC0)} .lvl-ws-guide.is-dur .lvl-ws-ghead{fill:var(--lvl-s1,#6E8BC0)} .lvl-ws-guide.is-dur .lvl-ws-gt{fill:var(--lvl-s1,#6E8BC0)} .lvl-ws-guide.is-dur .lvl-ws-gtarget{fill:var(--lvl-s1,#6E8BC0);fill-opacity:.95} .lvl-ws-gblock{fill:none;stroke:var(--lvl-risk);stroke-width:1.4;stroke-dasharray:2 2;opacity:.75} @media (prefers-reduced-motion:reduce){ .lvl-ws-gline{animation:none;stroke-dasharray:none} } /* ── THE CURVE READOUT ─────────────────────────────────────────────── The score every mark in curve mode serves, on the same screen as the marks. It used to live on another tab, which meant moving a bar and then going to look for whether it had helped. */ .lvl-ws-key.is-curve{gap:14px} .lvl-cv-score{display:flex;align-items:baseline;gap:3px} .lvl-cv-score b{font:800 15px/1 var(--lvl-mono)} .lvl-cv-score i{font-style:normal;font-size:9px;color:var(--lvl-mut-2)} .lvl-cv-score em{font-style:normal;font-weight:700;font-size:9.5px;margin-left:4px;color:var(--lvl-mut)} .lvl-cv-score.is-good b{color:var(--lvl-ok)} .lvl-cv-score.is-mid b{color:var(--lvl-warn)} .lvl-cv-score.is-bad b{color:var(--lvl-risk)} .lvl-cv-f{color:var(--lvl-mut);white-space:nowrap} .lvl-cv-f u{text-decoration:none;font:800 10.5px/1 var(--lvl-mono);color:var(--lvl-ink-2);margin-right:3px} .lvl-cv-i{font-style:normal;font-size:8.5px;color:var(--lvl-mut-2);margin-left:4px} .lvl-cv-next{color:var(--lvl-ink-2);white-space:nowrap} .lvl-cv-next b{color:var(--lvl-info);font-weight:800} .lvl-cv-blk{color:var(--lvl-risk);white-space:nowrap} .lvl-cv-blk b{font-weight:800} .lvl-ws-key i.k-guide{width:14px;height:0;border-top:1.6px dashed var(--lvl-info);border-radius:0;background:none} /* ── THE FIT REVIEW LIST ──────────────────────────────────────────────── */ /* the before curve sits behind the after one, quieter and dashed */ .lvl-scurve.is-before{stroke:var(--lvl-before);stroke-width:1.8;stroke-dasharray:5 4;opacity:.85} .lvl-fit-tabs{display:flex;align-items:center;gap:6px;padding:8px 12px 0} .lvl-fit-tab{border:1px solid var(--lvl-line);background:var(--lvl-card);border-radius:6px;cursor:pointer; padding:4px 10px;font:700 10px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-fit-tab.is-on{background:var(--lvl-green-t);border-color:var(--lvl-green);color:var(--lvl-ink)} .lvl-fit-legend{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--lvl-mut)} .lvl-fit-legend i{width:12px;height:0;border-top:2px solid var(--lvl-after);margin-left:6px} .lvl-fit-legend i.k-before{border-top:2px dashed var(--lvl-before)} .lvl-fit-legend i.k-ideal{border-top:2px dashed var(--lvl-mut-2)} /* THE BEFORE AND AFTER IS THE DECISION, so it gets the room. At 18px rows in a third of a panel it was a thumbnail of a chart rather than a chart. */ .lvl-rp-g.is-gantt{min-height:170px;overflow:auto;flex:1 1 auto} /* the before/after uses the workspace Gantt itself: activity names pinned on the left, the same bars and shadows on the right */ .lvl-fit-ba{display:grid;grid-template-columns:140px max-content;background:var(--lvl-card)} .lvl-fit-ba-l{border-right:1px solid var(--lvl-line)} .lvl-fit-ba-r{height:22px;display:flex;align-items:center;padding:0 8px;font-size:10px; color:var(--lvl-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-fit-ba-t{min-width:0} /* IT IS DRAWN AT ITS OWN SIZE AND THE COLUMN SCROLLS. Scaling the SVG to its column lined the labels up at exactly one width: the HTML label gutter beside it does not scale, so a chart stretched 1.8x drew a 38px header 68px tall against a gutter still padded 38. Same factor or no factor — this is no factor. */ .lvl-fit-ba{overflow-x:auto} .lvl-fit-ba-t svg{display:block} .lvl-fit-ba-more{margin:6px 12px 8px;font-size:10px;color:var(--lvl-mut)} .lvl-fit-bahead{display:flex;align-items:center;gap:8px;padding:9px 12px 5px; font:700 11px/1 var(--lvl-font);color:var(--lvl-ink)} .lvl-fit-balg{margin-left:auto;display:flex;align-items:center;gap:5px;font:600 9.5px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-fit-balg i{width:14px;height:7px;border-radius:2px;margin-left:7px} .lvl-fit-balg i.k-was{background:var(--lvl-before);opacity:.5} .lvl-fit-balg i.k-now{background:var(--lvl-after)} /* the list is secondary to the picture now */ /* the list of dates is secondary to the picture above it */ .lvl-fit-l{flex:0 1 auto;min-height:0;max-height:20%;overflow:auto;border-bottom:1px solid var(--lvl-line)} .lvl-fit-r{display:flex;align-items:center;gap:9px;padding:7px 14px;cursor:pointer; border-bottom:1px solid var(--lvl-line-2)} .lvl-fit-r:hover{background:var(--lvl-wash)} .lvl-fit-r.is-off{opacity:.42} /* a re-phase reads as one decision, with its bars underneath it ---------- */ .lvl-fit-r.is-cohort{background:var(--lvl-wash);border-bottom:0; box-shadow:inset 3px 0 0 var(--lvl-info)} .lvl-fit-r.is-cohort .lvl-fit-n>b{font-weight:700} .lvl-fit-more{display:block;width:100%;text-align:left;padding:4px 14px 6px 46px; border:0;border-bottom:1px solid var(--lvl-line-2);background:var(--lvl-wash); font:600 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut);cursor:pointer} .lvl-fit-more:hover{color:var(--lvl-ink)} .lvl-fit-sub{border-bottom:1px solid var(--lvl-line-2);background:var(--lvl-card); max-height:190px;overflow-y:auto;overscroll-behavior:contain} .lvl-fit-subr{flex:0 0 auto;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto) 48px;gap:8px;align-items:center; padding:4px 14px 4px 46px} .lvl-fit-subr>b{font:500 10px/1.3 var(--lvl-font);color:var(--lvl-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-fit-subr>em{font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut-2);font-style:normal; white-space:nowrap} .lvl-fit-subr>u{font:700 10px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut); text-align:right;text-decoration:none} .lvl-fit-x{font-style:normal;font-size:13px;color:var(--lvl-green);flex:0 0 auto} .lvl-fit-k{font-style:normal;font:800 12px/1 var(--lvl-mono);flex:0 0 14px;text-align:center;color:var(--lvl-info)} .lvl-fit-r.is-stretch .lvl-fit-k,.lvl-fit-r.is-compress .lvl-fit-k{color:var(--lvl-s1,#6E8BC0)} /* THE RESULT, BEFORE THE WORKING. The panel opens with the curve the plan produces against the one it was aiming at, because a list of twenty date changes is not an answer to "make the deployment look like the curve". */ /* ── THE PANEL'S BUDGET ─────────────────────────────────────────────── Four things compete for one fixed-height panel: the curve it produces, the numbers, the before/after, and the list of dates. The before/after is the DECISION, so it gets the flexible space and the other three are capped — it was being pushed below the fold by a chart and a table nobody has to read to answer "do I accept this". */ .lvl-rp-g.is-curve{max-height:none;flex:0 0 auto;padding:4px 8px 0} .lvl-rp-g.is-curve .lvl-chart{border:0;overflow:hidden} /* ── ONE SCROLLING COLUMN, NOT SIX FIGHTING OVER 516 PIXELS ─────────── Measured, in a 1440x900 viewport: header, tabs, the S-curve, four stat tiles, the before/after Gantt, forty-two change lines, the "what is still off" notes and the buttons were all flex children of ONE fixed-height panel. The before/after collapsed to its 170px min-height while the chart inside it was 434px tall — a Gantt seen through a letterbox — the S-curve was squeezed from 150px to 83, and .lvl-fit-l, the whole list of changes, computed to LITERALLY ZERO HEIGHT. That is the "before and after is the same / I cannot see anything" report, and no amount of tuning the chart fixes it: the layout itself was the bug. The header and the buttons pin. Everything between them is one column that scrolls, and each section draws at its natural height. */ .lvl-rp.is-fit>.lvl-rp-b{flex:1 1 auto;min-height:0;overflow:auto;display:block} .lvl-rp.is-fit .lvl-rp-g.is-gantt, .lvl-rp.is-fit .lvl-rp-g.is-curve, .lvl-rp.is-fit .lvl-fit-l, .lvl-rp.is-fit .lvl-fit-rest{flex:none;max-height:none;min-height:0;overflow:visible} .lvl-rp.is-fit .lvl-rp-g.is-curve .lvl-chart{overflow:visible} /* ── COLLAPSED, AND THE PROPOSAL IS STILL LIVE ──────────────────────── The panel is anchored over the right-hand half of the timeline, which on a front-loaded programme is exactly where the changes are. Collapsed it is a strip along the bottom and the whole Gantt is the before/after. */ .lvl-rp.is-fit.is-min{top:auto;bottom:0;width:min(520px,46%);height:auto; border-top:2px solid var(--lvl-green);border-radius:var(--lvl-r-s) 0 0 0; box-shadow:-10px -6px 26px -16px rgba(15,30,45,.34)} .lvl-fit-min{display:flex;align-items:center;gap:8px;padding:9px 12px} .lvl-fit-min-t{flex:1;min-width:0} .lvl-fit-min-t b{display:block;font:700 11.5px/1.3 var(--lvl-font)} .lvl-fit-min-t em{display:block;font-style:normal;font-size:10px;line-height:1.45;color:var(--lvl-mut);margin-top:1px} .lvl-fit-rest .lvl-note.is-bad{color:var(--lvl-risk)} .lvl-fit-r.is-off .lvl-fit-x{color:var(--lvl-mut-2)} .lvl-fit-n{flex:1;min-width:0} .lvl-fit-n b{display:block;font:700 11.5px/1.3 var(--lvl-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-fit-n em{display:block;font-style:normal;font-size:10px;color:var(--lvl-mut);margin-top:1px} .lvl-fit-s{font:800 11px/1 var(--lvl-mono);color:var(--lvl-ink-2);flex:0 0 auto} .lvl-fit-g{font:800 11px/1 var(--lvl-mono);color:var(--lvl-ok);flex:0 0 auto;min-width:32px;text-align:right} .lvl-fit-rest{flex:0 0 auto;padding:4px 14px 10px;border-bottom:1px solid var(--lvl-line); max-height:20%;overflow:auto} .lvl-fit-rest .lvl-note{margin:6px 0 0} .lvl-fit-rej{margin-top:8px;font-size:10.5px} .lvl-fit-rej summary{cursor:pointer;color:var(--lvl-mut);font-weight:700} .lvl-fit-rej ul{margin:6px 0 0;padding-left:16px;color:var(--lvl-mut)} .lvl-fit-rej li{margin:3px 0} .lvl-gt-time{overflow:auto;min-height:0;position:relative} .lvl-gt-headw{position:sticky;top:0;z-index:3;background:var(--lvl-card); box-shadow:0 1px 0 var(--lvl-line)} .lvl-gt-bodyw{position:relative} .lvl-gt-time svg{display:block} /* header bands */ .lvl-hb{fill:var(--lvl-card);stroke:var(--lvl-line-2);stroke-width:1} .lvl-hb.is-year{fill:var(--lvl-wash)} .lvl-hb.is-month{fill:var(--lvl-wash)} .lvl-ht{font:600 9px/1 var(--lvl-mono);fill:var(--lvl-ink)} .lvl-ht.is-year{font-weight:800;font-size:10px;fill:var(--lvl-ink)} .lvl-ht.is-week{fill:var(--lvl-mut-2);font-size:8.5px} .lvl-ht.is-month{fill:var(--lvl-ink);font-weight:700} .lvl-ws-nowl{stroke:var(--lvl-ink);stroke-width:1;stroke-dasharray:3 2} .lvl-ws-nowb{fill:var(--lvl-ink)} .lvl-ws-nowt{font:700 8px/1 var(--lvl-mono);fill:#fff} /* body */ .lvl-ws-grid2{} .lvl-ws-z{fill:transparent} .lvl-ws-r:nth-child(even) .lvl-ws-z{fill:rgba(20,32,42,.014)} .lvl-ws-r.is-sel .lvl-ws-z{fill:var(--lvl-green-t)} .lvl-ws-r.is-lit .lvl-ws-z{fill:var(--lvl-green-t)} .lvl-ws-r.is-dim{opacity:.3} .lvl-ws-grid{stroke:var(--lvl-line-2);stroke-width:1} .lvl-ws-grid.is-group{stroke:var(--lvl-line-3)} .lvl-ws-hgrid{stroke:var(--lvl-line-2);stroke-width:1} /* the WBS roll-up reads as a BRACKET over what it contains, not as another task bar — tapered ends are the convention every scheduler already knows */ .lvl-ws-sum{fill:var(--lvl-ink-2);opacity:.62} .lvl-ws-r.is-wbs:hover .lvl-ws-sum{opacity:.85} /* BAR COLOUR IS PRESSURE — whether this activity's own crews are over their limit while it runs. That is the diagnosis the chart exists to carry, and it owns the fill. The proposed position is a hollow outline in the proposed hue, so identity and magnitude never compete for the same pixels. */ /* A BAR IS AN OBJECT, NOT A BLOCK OF COLOUR. A flat fill with no boundary dissolves into the heat wash behind it and into its neighbours above and below; the eye needs an edge to find the shape. A 1px edge in the fill's own hue, darkened, gives it one without introducing a second colour. */ .lvl-ws-bar{cursor:grab;stroke:rgba(11,18,32,.34);stroke-width:1;paint-order:fill stroke} .lvl-ws-bar.is-actual{fill:var(--lvl-ok)} .lvl-ws-bar.is-actual.is-high{fill:var(--lvl-warn)} .lvl-ws-bar.is-actual.is-over{fill:var(--lvl-risk)} .lvl-ws-bar.is-actual.is-none{fill:var(--lvl-mut-2);fill-opacity:.55} /* COOL BARS ON A WARM FIELD. With the heat map on, the field carries crew pressure per period — so the bar carrying it too in the same warm hues gave the two marks no edge between them and they read as one shape. Slate separates from every step of the warm ramp, and the critical outline and the milestone diamond still read on top of it. */ .lvl-ws-bar.is-actual.is-cool{fill:#55637E;fill-opacity:1} .lvl-ws-bar.is-actual.is-cool.is-over{fill:#3E4A63} .lvl-ws-bar.is-actual.is-cool.is-none{fill:#8A93A6;fill-opacity:.8} /* trade fills come from `style`, so no class may override them */ .lvl-ws-bar.is-trade{fill:inherit} .lvl-ws-seg{cursor:grab} .lvl-ws-seg.is-crit .lvl-ws-bar{stroke:var(--lvl-ink);stroke-width:1;stroke-opacity:.55} .lvl-ws-seg:hover .lvl-ws-bar{filter:brightness(1.1)} .lvl-ws-brk{fill:var(--lvl-risk)} .lvl-ws-grip{fill:transparent;cursor:ew-resize} .lvl-ws-grip:hover{fill:var(--lvl-ink);fill-opacity:.28} /* MOVED: the bar keeps whatever fill it earned — crew colours, the density ramp, its pressure band — and says "moved" with an outline instead. Painting it one flat green was the same mark meaning two things, and it cost the planner the crew and period reading on the one bar they had just edited. */ .lvl-ws-bar.is-moved{stroke:var(--lvl-after);stroke-width:1.7;stroke-opacity:1;cursor:grab} .lvl-ws-seg.is-moved .lvl-ws-bar{stroke:var(--lvl-after);stroke-width:1.7;stroke-opacity:1} .lvl-ws-seg.is-moved.is-crit .lvl-ws-bar,.lvl-ws-bar.is-moved.is-crit{stroke:var(--lvl-after)} /* legacy single-fill proposed bar — kept for the older timeline charts */ .lvl-ws-bar.is-proposed{fill:var(--lvl-ok);fill-opacity:.9;stroke:var(--lvl-ok);stroke-width:1.6;cursor:grab} .lvl-ws-bar.is-proposed.is-p-over{stroke:var(--lvl-risk);fill:var(--lvl-risk)} .lvl-ws-bar.is-proposed.is-p-high{stroke:var(--lvl-warn);fill:var(--lvl-warn)} .lvl-ws-bar.is-proposed.is-p-ok{stroke:var(--lvl-ok);fill:var(--lvl-ok)} /* ghost: faded dotted gray baseline at old position */ /* A SHADOW, NOT AN OUTLINE. Dashed strokes were the problem: the baseline shadow and the suggestion target were both dashed low-opacity rectangles, and two of those at the same height are one shape to the eye. The shadow is now a soft solid block with no stroke at all — it recedes, which is what a shadow is for — and the suggestion lives on its own lane below the bar. */ .lvl-ws-ghost{fill:var(--lvl-mut-2);fill-opacity:.26;stroke:none;pointer-events:none} /* cascade ghost: amber for indirectly-affected activities (not the dragged one) */ .lvl-ws-cascade{fill:rgba(247,148,29,.20);stroke:none} .lvl-ws-ghostbar{opacity:.12;pointer-events:none} .lvl-ws-bar.is-actual.is-ghost{opacity:0;pointer-events:none} .lvl-ws-bar.is-crit{stroke:var(--lvl-ink);stroke-width:1.2;stroke-opacity:.6} .lvl-ws-bar:hover{filter:brightness(1.1)} /* BESIDE the bar, in ink. White-on-fill made the label a hostage to whatever the fill was doing and stole the bar's own length; the thin halo is the surface colour, so it survives a heat cell behind it without becoming an outline. */ .lvl-ws-q{font:600 10px/1 var(--lvl-font);font-variant-numeric:tabular-nums;fill:var(--lvl-ink); pointer-events:none;letter-spacing:.005em; paint-order:stroke;stroke:var(--lvl-card);stroke-width:2.6px;stroke-linejoin:round} .lvl-ws-q.is-quiet{fill:var(--lvl-mut)} .lvl-ws-over{fill:var(--lvl-risk)} .lvl-ws-shift{stroke:var(--lvl-s1);stroke-width:1;stroke-dasharray:2 2} .lvl-ws-shift.is-stretch{stroke-dasharray:1 2;stroke-width:1.6} .lvl-ws-shiftt{font:700 8.5px/1 var(--lvl-mono);fill:var(--lvl-s1)} .lvl-ws-float{fill:var(--lvl-mut-2);opacity:.4} .lvl-ws-ms{fill:var(--lvl-ink);cursor:pointer} .lvl-ws-link{fill:none;stroke:var(--lvl-mut-2);stroke-width:1.1;opacity:.75;stroke-linejoin:round;stroke-linecap:round} .lvl-ws-link.is-driving{stroke:var(--lvl-risk);stroke-width:1.6;opacity:1} .lvl-ws-link.is-changed{stroke:var(--lvl-info);stroke-width:1.6;opacity:1;stroke-dasharray:4 2.5} .lvl-ws-linka{fill:var(--lvl-mut-2);opacity:.75} .lvl-ws-linka.is-driving{fill:var(--lvl-risk);opacity:1} .lvl-ws-linka.is-changed{fill:var(--lvl-info);opacity:1} .lvl-ws-linkt{font:700 7.5px/1 var(--lvl-mono);fill:var(--lvl-mut-2);letter-spacing:.03em;dominant-baseline:middle; paint-order:stroke;stroke:var(--lvl-card);stroke-width:2.6px;stroke-linejoin:round} .lvl-ws-linkt.is-changed{fill:var(--lvl-info)} /* the old dot the arrowhead replaced — kept so nothing that still emits it breaks */ .lvl-ws-linkd{fill:var(--lvl-mut-2)} .lvl-ws-linkd.is-driving{fill:var(--lvl-risk)} .lvl-ws-lit{fill:var(--lvl-green);opacity:.1;pointer-events:none} /* ── the heat wash: ONE hue, stepped by opacity ──────────────────────── */ /* TWO WASHES THAT MULTIPLY. The vertical carries the period's pressure, the horizontal carries the activity's own; `multiply` makes the crossing darker than either band alone, so the place to work emerges from the chart instead of having to be computed and announced. Neither band alone is loud — it is the product that has to be unmissable. */ /* ── THE HEAT MAP ────────────────────────────────────────────────────── THE CELLS ARE SOLID. Three rounds of this were translucent washes that multiplied into the surface, and the pixel measurement is why that ends here: a 0.24-alpha red over white lands at rgb(240,215,212) — ten to forty units from the surface it sits on — and the orange never reached the screen at all. A heat map you have to be told is there is not a heat map. The ramp is warm sequential: pale yellow through orange to deep red, with relative lightness falling at EVERY step (0.887 → 0.086), so it is a real sequential scheme rather than a rainbow. The cell's step is half the weight of each axis, so a mildly loaded activity in a quiet period is pale yellow and a heavy one inside an over-limit period is deep red — orange running into red as the two pressures compound, carried in the fill itself rather than in a blend mode, which is what makes it survive onto the screen. */ .lvl-cell{pointer-events:none} /* the crossing — both pressures over at once — is the only thing on the chart that reaches the deep reds, so it needs no second marker */ .lvl-cell.is-x{} /* a surface halo round every bar, so a cell behind it reads as a cell the bar sits in rather than as a coloured border on the bar */ .lvl-ws-halo{fill:var(--lvl-card);pointer-events:none} /* a group row is structure, not a measurement */ /* TWO RAMPS, BECAUSE ONE CANNOT ANSWER TWO QUESTIONS. With a single ramp a dark cell and a dark column are the same colour, and the eye cannot tell "this period is loaded" from "this activity is loaded" — which is the only thing the chart is for. The COLUMN is red and stays in the pale half: pink context. The CELL is the warm yellow-to-red ramp and reaches the deep end. A pink field with orange cells on it separates cleanly, and the cells that go deep red are where both pressures are at the limit. */ .lvl-cell.is-f1{fill:#FFF1D0} .lvl-cell.is-f2{fill:#FEE0A3} .lvl-cell.is-f3{fill:#FDC873} .lvl-cell.is-f4{fill:#FBA94A} .lvl-cell.is-f5{fill:#F4862E} .lvl-cell.is-f6{fill:#E3611D} .lvl-cell.is-f7{fill:#C63E16} .lvl-cell.is-f8{fill:#9E2411} .lvl-cell.is-v.is-f1{fill:#FDEFEC} .lvl-cell.is-v.is-f2{fill:#FADFD9} .lvl-cell.is-v.is-f3{fill:#F6CAC1} .lvl-cell.is-v.is-f4{fill:#F0AFA2} .lvl-cell.is-v.is-f5{fill:#E88E7E} .lvl-cell.is-v.is-f6{fill:#DC6D5C} .lvl-cell.is-v.is-f7{fill:#CB5243} .lvl-cell.is-v.is-f8{fill:#B03B2E} /* THE COLUMN IS SOLID TOO, stepped at 0.6 of its own value so it lands in the pale half of the ramp: it fills the plot the way a heat map's background is supposed to, and leaves the deep end for the cells that carry the crossing. As a wash it measured ten units from the surface and the cells had nothing to stand out from. */ /* the old translucent wash class, kept only so nothing that still emits it paints something unexpected */ .lvl-heat{pointer-events:none;fill:var(--lvl-risk);opacity:.18} /* the whole layer goes with the Heatmap toggle — switched off in the markup rather than hidden in CSS, so it costs nothing when it is off */ /* ── the crew heat matrix ────────────────────────────────────────────── */ /* ── CREW HEAT: A MATRIX, AND A STRIP WHEN IT IS SHUT ────────────────── */ .lvl-hm.is-shut{display:block;overflow:hidden} .lvl-hm-h{display:flex;align-items:center;gap:8px;width:100%;padding:4px 10px;border:0;background:none; cursor:pointer;text-align:left;color:var(--lvl-ink-2);min-height:24px} .lvl-hm-h:hover{background:var(--lvl-line-2)} .lvl-hm-h b{font:700 10.5px/1 var(--lvl-font);color:var(--lvl-ink);flex:0 0 auto} .lvl-hm-h em{font-style:normal;font:500 10px/1 var(--lvl-font);color:var(--lvl-mut);flex:0 0 auto} .lvl-hm-tw{font-style:normal;font-size:9px;color:var(--lvl-mut-2);flex:0 0 auto} .lvl-hm-peek{display:flex;align-items:center;gap:10px;margin-left:auto;overflow:hidden;flex:1 1 auto;justify-content:flex-end} .lvl-hm-peek u{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font:600 10px/1 var(--lvl-font);color:var(--lvl-mut);white-space:nowrap} .lvl-hm-peek i{width:7px;height:7px;border-radius:2px;flex:0 0 auto} .lvl-hm-peek b{font:700 10px/1 var(--lvl-mono);color:var(--lvl-risk)} /* the matrix's own period band, so it reads without borrowing the Gantt's */ .lvl-hm-ax{font:600 8px/1 var(--lvl-mono);fill:var(--lvl-mut-2);letter-spacing:.02em} .lvl-hm-ax-r{stroke:var(--lvl-line-2);stroke-width:1;opacity:.55} .lvl-hm-v{font:700 9.5px/1 var(--lvl-mono);fill:var(--lvl-ink);pointer-events:none;opacity:.72} .lvl-hm-v.is-deep{fill:#fff;opacity:.96} .lvl-hm{display:grid;grid-template-columns:var(--ws-cols) minmax(0,1fr);border-bottom:1px solid var(--lvl-line); background:var(--lvl-wash);min-height:0;overflow:hidden} .lvl-hm-side{border-right:1px solid var(--lvl-line);padding:4px 8px 6px;min-width:0;overflow:hidden auto;scrollbar-width:none} .lvl-hm-side::-webkit-scrollbar{display:none} .lvl-hm-t{display:flex;align-items:center;gap:6px;padding:3px 0 5px; font:700 9.5px/1 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-hm-t i{font-style:normal;font-size:8px;color:var(--lvl-mut-2)} .lvl-hm-t em{font-style:normal;margin-left:auto;font:500 9px/1 var(--lvl-mono);color:var(--lvl-mut-2)} .lvl-hm-names{display:grid;gap:0} .lvl-hm-n{display:flex;align-items:center;gap:5px;height:14px;font-size:9.5px;color:var(--lvl-ink-2);cursor:pointer;min-width:0} .lvl-hm-n i{width:6px;height:6px;border-radius:2px;flex:0 0 auto} .lvl-hm-n b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-hm-n u{margin-left:auto;text-decoration:none;font:600 9px/1 var(--lvl-mono);color:var(--lvl-mut-2)} .lvl-hm-n u.is-over{color:var(--lvl-risk);font-weight:800} .lvl-hm-n:hover{color:var(--lvl-ink)} .lvl-hm-n.is-on{font-weight:700;color:var(--lvl-green-d)} .lvl-hm-side .lvl-link{font-size:9.5px;margin-top:3px} .lvl-hm-time{overflow:hidden auto;scrollbar-width:none} .lvl-hm-time::-webkit-scrollbar{display:none} .lvl-hm-time svg{display:block} /* sequential: ONE hue, stepped. The cells are marks, not a wash, so they get the full range the background wash deliberately gives up. */ /* SEQUENTIAL TO THE LIMIT, STATUS BEYOND IT. One hue light-to-dark carries "how hard is this crew being worked"; the reserved red carries "this is over the limit". Changing hue at the boundary is legitimate because that is where the meaning changes — below it the answer is a quantity, at it the answer is a breach. */ .lvl-hm-c{fill:var(--lvl-heat,#3f6ea8);cursor:pointer} .lvl-hm-c.is-h0{fill:var(--lvl-line-2);opacity:.5} .lvl-hm-c.is-h1{opacity:.26} .lvl-hm-c.is-h2{opacity:.46} .lvl-hm-c.is-h3{opacity:.66} .lvl-hm-c.is-h4{opacity:.88} .lvl-hm-c.is-h5{fill:var(--lvl-risk);opacity:.88} .lvl-hm-c.is-h6{fill:var(--lvl-risk);opacity:1} .lvl-hm-c.is-lit{stroke:var(--lvl-ink);stroke-width:1.4} .lvl-hm-c:hover{stroke:var(--lvl-ink);stroke-width:1.2} /* ── histogram pane ──────────────────────────────────────────────────── */ .lvl-hg{display:grid;grid-template-columns:var(--ws-cols) minmax(0,1fr);border-bottom:1px solid var(--lvl-line); background:var(--lvl-card);min-height:0;overflow:hidden} .lvl-hg-legend{padding:8px 10px;border-right:1px solid var(--lvl-line);min-width:0} .lvl-hg-legend>b{display:block;font:700 11px/1.3 var(--lvl-font);color:var(--lvl-ink)} .lvl-hg-sub{display:block;font-size:9.5px;line-height:1.45;color:var(--lvl-mut);margin-top:2px} .lvl-hg-mode{margin-top:6px} .lvl-hg-mode .lvl-seg{height:22px} .lvl-hg-mode .lvl-seg-b{height:20px;padding:0 8px;font-size:10px} .lvl-hg-keys{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:6px} .lvl-hgk{display:inline-flex;align-items:center;gap:5px;padding:2px 0;border:0;background:none;cursor:pointer; font:500 10px/1 var(--lvl-font);color:var(--lvl-mut);text-align:left} .lvl-hgk i{width:9px;height:9px;border-radius:2px;background:var(--lvl-line-3);flex:0 0 auto} .lvl-hgk.is-on{color:var(--lvl-ink-2)} .lvl-hgk.is-actual.is-on i{background:var(--lvl-s3)} .lvl-hgk.is-proposed.is-on i{background:var(--lvl-s1)} .lvl-hgk.is-cap.is-on i{background:none;height:0;border-top:2px dashed var(--lvl-ink-2)} .lvl-hgk.is-ideal.is-on i{background:none;height:0;border-top:2px dashed var(--lvl-s7)} .lvl-hgk.is-off{opacity:.35;cursor:default} .lvl-hg-peak{margin-top:7px;font:600 10px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-hg-peak b{color:var(--lvl-risk);font-weight:800} .lvl-hg-time{overflow:hidden auto;scrollbar-width:none} .lvl-hg-time::-webkit-scrollbar{display:none} .lvl-hg-time svg{display:block} .lvl-ws-hb.is-actual{fill:var(--lvl-s3)} .lvl-ws-hb.is-proposed{fill:var(--lvl-s1)} .lvl-ws-hb.is-over{fill:var(--lvl-risk)} .lvl-ws-hb.is-series{stroke:var(--lvl-card);stroke-width:.5} .lvl-ws-hotband{fill:var(--lvl-risk);opacity:.06} .lvl-ws-cap{stroke:var(--lvl-ink-2);stroke-width:1.4;stroke-dasharray:5 3} .lvl-ws-ideal{fill:none;stroke:var(--lvl-s7);stroke-width:1.6;stroke-dasharray:5 3;opacity:.75} .lvl-ws-peak line{stroke:var(--lvl-risk);stroke-width:1.2} .lvl-ws-peak rect{fill:var(--lvl-risk)} .lvl-ws-peak text{font:800 9px/1 var(--lvl-mono);fill:#fff} .lvl-ws-hhit{cursor:pointer;fill:transparent} .lvl-ws-hhit.is-lit{fill:var(--lvl-green);opacity:.12} /* ── foot: minimap + legend ──────────────────────────────────────────── */ .lvl-ws-foot{display:flex;align-items:center;gap:14px;padding:4px 10px;background:var(--lvl-wash); border-top:1px solid var(--lvl-line);flex:0 0 auto} .lvl-ws-mini-w{flex:0 0 180px;height:26px;border-radius:3px} .lvl-ws-mini-w.is-nav{cursor:ew-resize;box-shadow:inset 0 0 0 1px var(--lvl-line-2)} .lvl-ws-mini-w.is-nav svg{touch-action:none} .lvl-ws-mini{width:100%;height:26px} .lvl-ws-mb{fill:var(--lvl-mut-2);opacity:.55} .lvl-ws-mb.is-over{fill:var(--lvl-risk);opacity:.85} .lvl-ws-mview{fill:color-mix(in srgb,var(--lvl-green) 13%,transparent);stroke:var(--lvl-green);stroke-width:1.2;pointer-events:none; transition:x .08s linear,width .08s linear} @media (prefers-reduced-motion:reduce){.lvl-ws-mview{transition:none}} .lvl-ws-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:9.5px;color:var(--lvl-mut)} .lvl-ws-key i{width:11px;height:8px;border-radius:2px;margin-left:8px;flex:0 0 auto} .lvl-ws-key i:first-child{margin-left:0} .lvl-ws-key b{font-weight:700;color:var(--lvl-ink-2);margin-right:2px} .lvl-ws-key .k-over{background:var(--lvl-risk)} .lvl-ws-key .k-high{background:var(--lvl-warn)} .lvl-ws-key .k-ok{background:var(--lvl-ok)} .lvl-ws-key .k-none{background:var(--lvl-mut-2);opacity:.55} .lvl-ws-key .k-actual{background:var(--lvl-ok)} .lvl-ws-key .k-proposed{background:rgba(42,120,214,.14);border:1.4px solid var(--lvl-s1)} .lvl-ws-key .k-crit{background:none;border:1.2px solid var(--lvl-ink)} .lvl-ws-key .k-float{background:var(--lvl-mut-2);opacity:.4;height:3px} /* the swatch has to be the ramp the matrix actually draws: sequential to the limit, then the reserved red */ .lvl-ws-key .k-heat{width:42px;background:linear-gradient(90deg, color-mix(in srgb,var(--lvl-heat) 26%,transparent) 0%, color-mix(in srgb,var(--lvl-heat) 88%,transparent) 58%, var(--lvl-risk) 62%,var(--lvl-risk) 100%)} .lvl-ws-key .k-brk{background:var(--lvl-risk);height:3px} .lvl-ws-key .k-other{background:var(--lvl-other,#8A94A0)} .lvl-ws-key-n{color:var(--lvl-mut-2);margin-left:6px} .lvl-ws-key .k-ms{background:var(--lvl-ink);transform:rotate(45deg);width:7px;height:7px;border-radius:1px} /* ── drag a trade across the calendar ────────────────────────────────── */ .lvl-hm-c[data-lvl-resdrag]{cursor:grab} .lvl-ws-hm.is-resdrag,.lvl-ws-hist.is-resdrag{cursor:grabbing} .lvl-ws-hm.is-resdrag .lvl-hm-c,.lvl-ws-hist.is-resdrag .lvl-ws-hb{pointer-events:none} .lvl-ws-hb[data-lvl-resdrag]{cursor:grab} .lvl-hm-ghost{fill:var(--lvl-ink);opacity:.35;pointer-events:none} .lvl-hm-ghostt{font:800 8.5px/1 var(--lvl-mono);fill:var(--lvl-ink);pointer-events:none} /* ── a trade-move proposal, over the chart column ────────────────────── */ /* THE PROPOSAL SITS BESIDE THE PROGRAMME, NOT OVER IT. It used to cover the whole workspace, which hid the very Gantt the change is drawn on — and the Gantt now shows the proposal live, so covering it threw away the answer. It takes the right-hand column and leaves the timeline readable. */ .lvl-rp{position:absolute;right:0;top:0;bottom:0;width:min(600px,48%);z-index:8;display:flex;flex-direction:column; border-left:2px solid var(--lvl-green);border-radius:var(--lvl-r-s) 0 0 var(--lvl-r-s);background:var(--lvl-card); box-shadow:-14px 0 34px -18px rgba(15,30,45,.34);animation:lvlRpIn .16s ease-out} .lvl-rp.is-narrow{width:min(400px,34%);bottom:auto;max-height:100%} @keyframes lvlRpIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.lvl-rp{animation:none}} .lvl-rp-h{position:relative;padding:11px 40px 11px 14px;border-bottom:1px solid var(--lvl-line);background:var(--lvl-green-t)} .lvl-rp-h b{display:block;font:700 13px/1.35 var(--lvl-font)} .lvl-rp-h em{display:block;font-style:normal;font-size:11px;color:var(--lvl-mut);margin-top:2px} .lvl-rp-x{position:absolute;top:9px;right:10px;width:24px;height:24px;border:0;border-radius:6px;background:none; cursor:pointer;color:var(--lvl-mut);font-size:13px} .lvl-rp-x:hover{background:var(--lvl-line-2);color:var(--lvl-ink)} .lvl-rp-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:1px;background:var(--lvl-line); border-bottom:1px solid var(--lvl-line)} .lvl-rp-s{background:var(--lvl-card);padding:8px 12px} .lvl-rp-s span{display:block;font:700 8.5px/1 var(--lvl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-rp-s b{display:block;font:800 13px/1.2 var(--lvl-mono);margin-top:4px} .lvl-rp-s em{display:block;font-style:normal;font-size:10px;color:var(--lvl-mut);margin-top:2px} .lvl-rp-s.is-good b{color:var(--lvl-ok)} .lvl-rp-s.is-bad b{color:var(--lvl-risk)} /* ── DRAGGED INTO THE LOGIC ─────────────────────────────────────────── One row per relationship that is holding the bar, and on each row the relationships it could become. The planner picks per row, because a programme rarely has one answer for two different predecessors. */ .lvl-rlx{flex:0 0 auto;max-height:34%;overflow:auto;border-bottom:1px solid var(--lvl-line);background:var(--lvl-card)} .lvl-rlx-r{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--lvl-line-2)} .lvl-rlx-r:last-child{border-bottom:0} .lvl-rlx-n{flex:1;min-width:0} .lvl-rlx-n b{display:block;font:700 12px/1.3 var(--lvl-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-rlx-n em{display:block;font-style:normal;font-size:10px;color:var(--lvl-mut);margin-top:2px} .lvl-rlx-o{display:flex;gap:5px;flex-shrink:0} .lvl-rlx-b{position:relative;border:1px solid var(--lvl-line);border-radius:6px;background:var(--lvl-card);cursor:pointer; padding:5px 9px;font:800 11px/1 var(--lvl-mono);color:var(--lvl-ink-2)} .lvl-rlx-b:hover{border-color:var(--lvl-green);color:var(--lvl-ink)} .lvl-rlx-b.is-on{background:var(--lvl-green-t);border-color:var(--lvl-green);color:var(--lvl-ink)} .lvl-rlx-b.is-warn{border-style:dashed;color:var(--lvl-warn)} .lvl-rlx-b i{display:block;font:700 7.5px/1 var(--lvl-mono);letter-spacing:.08em;text-transform:uppercase; color:var(--lvl-ok);font-style:normal;margin-top:3px} .lvl-rlx-warn{display:flex;align-items:flex-start;gap:6px;margin:0;padding:9px 14px; background:var(--lvl-amber-t,rgba(247,148,29,.08));border-bottom:1px solid var(--lvl-line)} .lvl-rp-g{flex:0 0 auto;max-height:40%;overflow:auto;border-bottom:1px solid var(--lvl-line);background:var(--lvl-card)} .lvl-rp-g .lvl-chart{border:0} .lvl-rp .lvl-tbl-wrap{flex:1;min-height:0;overflow:auto;border:0;border-radius:0} .lvl-rp-t tbody tr{cursor:pointer} .lvl-rp-t tbody tr.is-off{opacity:.42} .lvl-rp-t tbody tr.is-blocked{opacity:.55;cursor:default} .lvl-rp-t tbody tr:hover{background:var(--lvl-wash)} .lvl-rp-c{width:26px} .lvl-rp-c i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px; border:1px solid var(--lvl-line-3);font-style:normal;font-size:9px;color:#fff} .lvl-rp-c i.is-on{background:var(--lvl-green);border-color:var(--lvl-green)} .lvl-rp-why{color:var(--lvl-mut);font-size:11px} .lvl-rp-a{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--lvl-line); background:var(--lvl-wash)} /* ── stretch panel + relationship editor ─────────────────────────────── */ .lvl-rp.is-narrow{left:auto;right:0;width:min(400px,34%);top:0;bottom:auto;max-height:100%} .lvl-rp-crew{padding:10px 14px;border-bottom:1px solid var(--lvl-line)} .lvl-rp-crew h6{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 7px; font:700 8.5px/1.4 var(--lvl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-rp-crew h6>span{flex:0 0 auto} .lvl-rp-crew h6 small{flex:1 1 auto;font:600 9px/1.4 var(--lvl-mono);letter-spacing:.02em;text-transform:none;color:var(--lvl-mut);text-align:right} .lvl-rp-cr{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:3px 0} .lvl-rp-cr i{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .lvl-rp-cr b{margin-left:auto;font-family:var(--lvl-mono);font-weight:700} .lvl-rp-cr em{font-style:normal;font:700 10px/1 var(--lvl-mono);color:var(--lvl-mut);min-width:38px;text-align:right} .lvl-rp-cr em.is-good{color:var(--lvl-ok)} .lvl-rp-nudge{display:flex;align-items:center;gap:5px;padding:9px 14px;border-bottom:1px solid var(--lvl-line)} .lvl-rp-nudge span{font:700 8.5px/1 var(--lvl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2);margin-right:3px} .lvl-rp-none{padding:14px} /* the honest answer when the float cannot pay for the gesture: what is in the way, and the two ways out, on the screen instead of in a toast */ .lvl-rp-none-b{display:grid;grid-template-columns:22px 1fr;gap:6px 11px;align-items:start; margin:12px 14px 0;padding:12px 14px;border-radius:var(--lvl-r-xs); background:color-mix(in srgb,var(--lvl-warn) 8%,transparent); border:1px solid color-mix(in srgb,var(--lvl-warn) 26%,transparent)} .lvl-rp-none-b svg{grid-row:1/3;color:var(--lvl-warn)} .lvl-rp-none-b b{font:700 12px/1.35 var(--lvl-sans);color:var(--lvl-ink)} .lvl-rp-none-b p{grid-column:2;margin:0;font:400 11px/1.55 var(--lvl-sans);color:var(--lvl-mut)} .lvl-rp-none-b .lvl-btn{grid-column:2;justify-self:start;margin-top:4px} .lvl-rp-forced{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:99px;font:700 8.5px/1.6 var(--lvl-mono); letter-spacing:.08em;text-transform:uppercase;font-style:normal; background:color-mix(in srgb,var(--lvl-warn) 20%,transparent);color:var(--lvl-warn)} .lvl-ws-body.is-stretching{cursor:ew-resize} .lvl-rel{display:grid;gap:4px} .lvl-rel-r{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-xs);overflow:hidden;background:var(--lvl-card)} .lvl-rel-r.is-staged{border-color:var(--lvl-info)} .lvl-rel-h{display:flex;align-items:center;gap:7px;width:100%;padding:6px 9px;border:0;background:none;cursor:pointer; font:inherit;color:inherit;text-align:left} .lvl-rel-h:hover{background:var(--lvl-wash)} .lvl-rel-r.is-open .lvl-rel-h{background:var(--lvl-green-t)} .lvl-rel-d{font-style:normal;font-size:11px;color:var(--lvl-mut-2);flex:0 0 auto} .lvl-rel-h b{font:600 11px/1.3 var(--lvl-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-rel-h u{margin-left:auto;text-decoration:none;font:700 9.5px/1 var(--lvl-mono);color:var(--lvl-ink-2); background:var(--lvl-line-2);padding:3px 6px;border-radius:3px;flex:0 0 auto} .lvl-rel-s{font-style:normal;font:700 8px/1 var(--lvl-mono);letter-spacing:.06em;text-transform:uppercase; color:var(--lvl-info);background:var(--lvl-info-t);padding:3px 5px;border-radius:3px;flex:0 0 auto} .lvl-rel-b{padding:8px 9px;border-top:1px solid var(--lvl-line-2)} .lvl-rel-opts{display:flex;gap:4px} .lvl-rel-t{flex:1;height:26px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-xs);background:var(--lvl-card); cursor:pointer;font:700 10.5px/1 var(--lvl-mono);color:var(--lvl-ink-2)} .lvl-rel-t:hover{border-color:var(--lvl-green)} .lvl-rel-t.is-on{background:var(--lvl-green);border-color:var(--lvl-green);color:#fff} .lvl-rel-lag{display:flex;align-items:center;gap:4px;margin-top:6px} .lvl-rel-lag span{font:700 8.5px/1 var(--lvl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-rel-l{flex:1;height:24px;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-xs);background:var(--lvl-card); cursor:pointer;font:600 10px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-rel-l:hover{border-color:var(--lvl-green);color:var(--lvl-ink)} .lvl-in-s h5 small{font-weight:600;font-size:9.5px;color:var(--lvl-mut-2);margin-left:auto} /* ── inspector ───────────────────────────────────────────────────────── */ .lvl-ws-insp{display:flex;flex-direction:column;min-height:0;background:var(--lvl-card)} .lvl-in-tabs{display:flex;border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-in-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;border:0; background:none;cursor:pointer;font:600 11px/1 var(--lvl-font);color:var(--lvl-mut); border-bottom:2px solid transparent} .lvl-in-tab:hover{color:var(--lvl-ink-2)} .lvl-in-tab.is-on{color:var(--lvl-ink);border-bottom-color:var(--lvl-green);background:var(--lvl-card)} .lvl-in-tab em{font-style:normal;font:800 8.5px/1 var(--lvl-mono);background:var(--lvl-green-t);color:var(--lvl-green-d); padding:2px 5px;border-radius:8px} .lvl-in-body{flex:1;overflow-y:auto;min-height:0} .lvl-in-blank{padding:34px 20px;text-align:center;color:var(--lvl-mut)} .lvl-in-blank b{display:block;font:700 13px/1.4 var(--lvl-font);color:var(--lvl-ink);margin:10px 0 6px} .lvl-in-blank p{font-size:11.5px;line-height:1.55;margin:0 0 8px} .lvl-in-lede{padding:12px 14px 0;margin:0;font-size:11px;line-height:1.55;color:var(--lvl-mut)} .lvl-in-h{padding:12px 14px;border-bottom:1px solid var(--lvl-line)} .lvl-in-h>b{display:block;font:700 13px/1.35 var(--lvl-font)} .lvl-in-h>em{display:block;font-style:normal;font:500 10px/1.3 var(--lvl-mono);color:var(--lvl-mut-2);margin-top:2px} .lvl-in-tags{display:flex;gap:5px;margin-top:8px} .lvl-in-cols{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--lvl-line)} .lvl-in-col{padding:11px 14px} .lvl-in-col+.lvl-in-col{border-left:1px solid var(--lvl-line)} .lvl-in-col.is-prop{background:var(--lvl-green-t)} .lvl-in-col.is-idle{opacity:.55} .lvl-in-col h6{margin:0 0 8px;font:700 9px/1 var(--lvl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-in-col dl{margin:0;display:grid;gap:5px} .lvl-in-col dl>div{display:flex;justify-content:space-between;gap:8px;font-size:11px} .lvl-in-col dt{color:var(--lvl-mut)} .lvl-in-col dd{margin:0;font-family:var(--lvl-mono);font-weight:600;color:var(--lvl-ink)} .lvl-in-s{padding:12px 14px;border-bottom:1px solid var(--lvl-line)} .lvl-in-s h5{display:flex;align-items:baseline;gap:6px;margin:0 0 9px;font:700 11px/1.3 var(--lvl-font)} .lvl-in-s h5 u{margin-left:auto;text-decoration:none;font:800 9px/1 var(--lvl-mono);color:var(--lvl-ok); background:var(--lvl-ok-t);padding:3px 6px;border-radius:3px} .lvl-in-s h5 u.is-hold{color:var(--lvl-mut);background:var(--lvl-line-2)} .lvl-in-s .lvl-note{margin:8px 0 0;font-size:10.5px;line-height:1.5} .lvl-in-fl{display:flex;justify-content:space-between;font:600 10.5px/1 var(--lvl-mono);color:var(--lvl-ink-2)} .lvl-in-fl.is-scale{color:var(--lvl-mut-2);font-weight:500;margin-top:4px} .lvl-in-flt{height:6px;border-radius:3px;background:var(--lvl-line-2);margin-top:6px;overflow:hidden} .lvl-in-flt i{display:block;height:100%;background:var(--lvl-green);border-radius:3px} .lvl-in-im{margin:0;display:grid;gap:6px} .lvl-in-im>div{display:flex;justify-content:space-between;gap:8px;font-size:11px} .lvl-in-im dt{color:var(--lvl-mut)} .lvl-in-im dd{margin:0;font-family:var(--lvl-mono);font-weight:600;display:flex;gap:6px;align-items:baseline} .lvl-in-im dd em{font-style:normal;font-size:10px} .lvl-in-im dd em.is-good{color:var(--lvl-ok)} .lvl-in-im dd em.is-bad{color:var(--lvl-risk)} .lvl-pos{color:var(--lvl-ok)} .lvl-in-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--lvl-line);background:var(--lvl-wash); position:sticky;bottom:0} .lvl-in-foot .lvl-btn{flex:1;justify-content:center} .lvl-qz{padding:10px 12px;display:grid;gap:7px} .lvl-qz-r{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--lvl-line); border-radius:var(--lvl-r-xs);background:var(--lvl-card)} .lvl-qz-n{flex:0 0 20px;height:20px;border-radius:50%;background:var(--lvl-green-t);color:var(--lvl-green-d); display:inline-flex;align-items:center;justify-content:center;font:800 10px/1 var(--lvl-mono)} .lvl-qz-r.is-logic .lvl-qz-n{background:var(--lvl-info-t);color:var(--lvl-info)} .lvl-qz-m{min-width:0} .lvl-qz-m b{display:block;font:600 11.5px/1.35 var(--lvl-font)} .lvl-qz-m em{display:block;font-style:normal;font:500 10px/1.4 var(--lvl-mono);color:var(--lvl-mut);margin-top:2px} .lvl-qz-r{position:relative} .lvl-qz-undo{position:absolute;top:8px;right:8px;width:22px;height:22px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-xs); background:var(--lvl-card);color:var(--lvl-mut);cursor:pointer;font:12px/1 var(--lvl-mono); display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s} .lvl-qz-r:hover .lvl-qz-undo{opacity:1} .lvl-qz-undo:hover{background:var(--lvl-risk-t);color:var(--lvl-risk);border-color:var(--lvl-risk)} .lvl-qz-metrics{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-bottom:1px solid var(--lvl-line); background:var(--lvl-wash)} .lvl-qz-metric{font:500 10.5px/1.3 var(--lvl-font);color:var(--lvl-ink);padding:2px 8px; border-radius:var(--lvl-r-xs);background:var(--lvl-card);border:1px solid var(--lvl-line)} .lvl-qz-metric b{font-weight:700} .lvl-qz-metric.is-good{border-color:var(--lvl-green);color:var(--lvl-green-d);background:var(--lvl-green-t)} .lvl-qz-metric.is-bad{border-color:var(--lvl-risk);color:var(--lvl-risk);background:var(--lvl-risk-t)} /* ── impact strip ───────────────────────────────────────────────────── */ .lvl-is{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--lvl-line); font:500 11px/1.4 var(--lvl-font);color:var(--lvl-ink);background:var(--lvl-wash);flex-wrap:wrap} .lvl-is.is-ok{border-left:3px solid var(--lvl-green)} .lvl-is.is-warn{border-left:3px solid #F7941D} .lvl-is.is-err{border-left:3px solid var(--lvl-risk);background:var(--lvl-risk-t)} .lvl-is-icon{font-size:14px;flex:0 0 18px;text-align:center} .lvl-is.is-ok .lvl-is-icon{color:var(--lvl-green)} .lvl-is.is-warn .lvl-is-icon{color:#F7941D} .lvl-is.is-err .lvl-is-icon{color:var(--lvl-risk)} .lvl-is-parts{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .lvl-is-seg{white-space:nowrap} .lvl-is-seg b{font-weight:700} .lvl-is-dot{color:var(--lvl-line);margin:0 2px} .lvl-is-note{font:400 10px/1.3 var(--lvl-font);color:var(--lvl-risk);margin-left:8px;flex-basis:100%} .lvl-is-good{color:var(--lvl-green-d);font-weight:600} .lvl-is-bad{color:var(--lvl-risk);font-weight:600} .lvl-is-warn{color:#F7941D;font-weight:600} /* ── floating apply bar ────────────────────────────────────────────── */ .lvl-fab{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 14px;border-top:2px solid var(--lvl-green);background:var(--lvl-card); box-shadow:0 -2px 8px rgba(0,0,0,.06);position:relative;z-index:10;flex-wrap:wrap} .lvl-fab-info{display:flex;align-items:center;gap:6px;flex-wrap:wrap; font:500 11px/1.4 var(--lvl-font);color:var(--lvl-ink)} .lvl-fab-count b{font-weight:700} .lvl-fab-sep{color:var(--lvl-line)} .lvl-fab-stat{white-space:nowrap} .lvl-fab-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .lvl-btn.is-xs{font:500 10px/1 var(--lvl-font);padding:4px 8px;border-radius:var(--lvl-r-xs)} .lvl-btn.is-sm{font:600 11px/1 var(--lvl-font);padding:6px 14px} .lvl-in-body .lvl-ov-list{padding:0 12px 12px} .lvl-in-body .lvl-ov{font-size:11px} @media (max-width:1180px){ .lvl-ws{height:auto;min-height:0} .lvl-ws-grid{grid-template-columns:1fr} .lvl-ws-chart{border-right:0;border-bottom:1px solid var(--lvl-line)} .lvl-gt{height:460px} } /* ══ WORK GANTT (WBS) ═════════════════════════════════════════════════════ Density is the point. A planning Gantt is read by scanning, and a scan needs rows close enough that the eye does not travel — so the type is small, the weight carries the hierarchy, and no row is given a coloured slab when a 2px accent and a dot will do. */ .lvl-wg-wrap{border:1px solid var(--lvl-line);border-top:0;border-radius:0 0 var(--lvl-r-s) var(--lvl-r-s);background:var(--lvl-card)} .lvl-lp-wrap{border:1px solid var(--lvl-line);border-bottom:0;border-radius:var(--lvl-r-s) var(--lvl-r-s) 0 0;background:var(--lvl-card)} .lvl-wg .lvl-wg-wbsb{fill:var(--lvl-wash)} .lvl-wg-wbs{cursor:pointer} .lvl-wg-wbs:hover .lvl-wg-wbsb{fill:var(--lvl-line-2)} .lvl-wg-acc{opacity:.75} .lvl-wg-tw{font-size:8px;fill:var(--lvl-mut-2)} .lvl-wg-wl{font:700 10px/1 var(--lvl-font);fill:var(--lvl-ink);letter-spacing:-.005em} .lvl-wg-wn{font:600 9px/1 var(--lvl-mono);fill:var(--lvl-mut-2)} .lvl-wg-wnp{fill:var(--lvl-mut-2);opacity:.7} .lvl-wg-dot{fill:var(--lvl-risk)} .lvl-wg-sum{fill:var(--lvl-mut-2);opacity:.3} .lvl-wg-cap{fill:var(--lvl-mut-2);opacity:.5} .lvl-wg-hd{stroke:var(--lvl-line);stroke-width:1} .lvl-wg-ind{stroke:var(--lvl-line-2);stroke-width:1} .lvl-wg .lvl-lg-l{font-size:10px;fill:var(--lvl-ink-2);cursor:pointer} .lvl-wg-ax{font-size:9px;fill:var(--lvl-mut-2)} .lvl-wg-ax.is-q{fill:var(--lvl-mut);font-weight:700} .lvl-grid.is-q{stroke:var(--lvl-line-3)} .lvl-wg-q{font:600 9px/1 var(--lvl-mono);fill:var(--lvl-mut)} .lvl-wg-q.is-over{fill:var(--lvl-risk);font-weight:800} .lvl-wg-tf{font:600 9px/1 var(--lvl-mono);fill:var(--lvl-mut-2)} .lvl-wg-tf.is-tight{fill:var(--lvl-warn)} .lvl-wg-tf.is-none{fill:var(--lvl-risk);font-weight:800} .lvl-tl-d{font:700 9px/1 var(--lvl-mono);fill:var(--lvl-after)} .lvl-lg-wend{stroke:var(--lvl-mut-2);stroke-width:1;opacity:.4} .lvl-wg-lit,.lvl-lp-lit{fill:var(--lvl-green);opacity:.09;pointer-events:none} .lvl-wg-row.is-lit .lvl-tl-zebra{fill:var(--lvl-green-t)} .lvl-wg-row.is-lit .lvl-lg-l{fill:var(--lvl-ink);font-weight:700} .lvl-wg-row.is-dim{opacity:.28} .lvl-wg-row.is-sel .lvl-tl-zebra{fill:var(--lvl-green-t)} .lvl-wg-row.is-sel .lvl-lg-l{font-weight:800;fill:var(--lvl-ink)} .lvl-wg-h{display:flex;align-items:baseline;gap:12px;margin:14px 0 7px} .lvl-wg-h h4{margin:0} .lvl-wg-live{margin-left:auto;font-size:11px;color:var(--lvl-mut);min-height:15px;text-align:right;flex:1 1 40%} .lvl-wg-live b{color:var(--lvl-ink)} .lvl-wg-scale{margin-top:7px} .lvl-scale-x{color:var(--lvl-mut-2);font-size:10px} /* ══ LOAD PROFILE (drawn in the gantt's geometry) ═════════════════════════ */ .lvl-lp-b{fill:var(--lvl-neutral)} .lvl-lp-b.is-series{fill:none} .lvl-lp-b.is-over{fill:var(--lvl-risk)} .lvl-lp-over{fill:var(--lvl-risk);opacity:.85} .lvl-lp-flag{fill:var(--lvl-risk)} .lvl-lp-ideal{fill:none;stroke:var(--lvl-ink-2);stroke-width:1.5;stroke-dasharray:5 3;opacity:.5} .lvl-lp-ghost{fill:none;stroke:var(--lvl-before);stroke-width:1.4;opacity:.75} .lvl-lp-t{font:700 11px/1 var(--lvl-font);fill:var(--lvl-ink)} .lvl-lp-s{font:500 9.5px/1 var(--lvl-font);fill:var(--lvl-mut)} .lvl-lp-lgt{font:500 9px/1 var(--lvl-font);fill:var(--lvl-mut)} .lvl-lp-hit{cursor:pointer} .lvl-lp-hit.is-lit{fill:var(--lvl-green);opacity:.12} .lvl-hg-lit{fill:var(--lvl-green);opacity:.10;pointer-events:none} .lvl-wg-link{fill:none;stroke:var(--lvl-mut-2);stroke-width:1;opacity:.75} .lvl-wg-link.is-driving{stroke:var(--lvl-risk);stroke-width:1.5;opacity:1} .lvl-wg-linkd{fill:var(--lvl-mut-2)} .lvl-wg-linkd.is-driving{fill:var(--lvl-risk)} .lvl-lg-k{width:12px;height:0;border-top:1px solid var(--lvl-mut-2)} .lvl-lg-k.is-driving{border-top:1.5px solid var(--lvl-risk)} .lvl-wg-row.is-rel .lvl-lg-l{fill:var(--lvl-ink);font-weight:600} .lvl-wg-row.is-rel .lvl-tl-zebra{fill:var(--lvl-wash)} /* ══ THE SPLIT: gantt beside the decision rail ════════════════════════════ */ .lvl-split{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:14px;align-items:start} .lvl-split-main{min-width:0} .lvl-side{position:sticky;top:8px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-card);max-height:calc(100vh - 40px);overflow-y:auto} @media (max-width:1240px){.lvl-split{grid-template-columns:1fr}.lvl-side{position:static;max-height:none}} .lvl-side-empty{padding:26px 18px;text-align:center;color:var(--lvl-mut)} .lvl-side-empty b{display:block;font:700 13px/1.4 var(--lvl-font);color:var(--lvl-ink);margin:8px 0 6px} .lvl-side-empty p{font-size:11.5px;line-height:1.55;margin:0 0 8px} .lvl-rl-h{padding:12px 14px;border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-rl-h>b{display:block;font:700 13px/1.35 var(--lvl-font)} .lvl-rl-h>em{display:block;font-style:normal;font:500 10px/1.3 var(--lvl-mono);color:var(--lvl-mut-2);margin-top:2px} .lvl-rl-d{display:grid;gap:5px;margin-top:9px} .lvl-rl-d span{display:flex;gap:8px;font-size:11px;color:var(--lvl-ink-2)} .lvl-rl-d i{flex:0 0 66px;font-style:normal;font:700 8.5px/1.5 var(--lvl-mono);letter-spacing:.08em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-rl-nudge{display:flex;align-items:center;gap:4px;margin-top:11px;flex-wrap:wrap} .lvl-rl-nudge .lvl-btn{min-width:30px;padding:0 6px} .lvl-rl-date{flex:1 1 100%;margin-top:5px} .lvl-wb-shift{min-width:44px;text-align:center;font:800 12px/1 var(--lvl-mono);color:var(--lvl-green-d)} .lvl-rl-s{padding:12px 14px;border-bottom:1px solid var(--lvl-line)} .lvl-rl-s:last-child{border-bottom:0} .lvl-rl-s.is-live{background:var(--lvl-green-t)} .lvl-rl-s h5{display:flex;align-items:baseline;gap:6px;margin:0 0 9px;font:700 11px/1.3 var(--lvl-font)} .lvl-rl-s h5 small{font-weight:500;font-size:10px;color:var(--lvl-mut-2)} .lvl-rl-s h5 u{margin-left:auto;text-decoration:none;font:800 9.5px/1 var(--lvl-mono);color:var(--lvl-ok); background:var(--lvl-ok-t);padding:3px 6px;border-radius:3px} .lvl-rl-s h5 u.is-hold{color:var(--lvl-mut);background:var(--lvl-line-2)} .lvl-rl-s .lvl-note{margin:8px 0 0;font-size:10.5px;line-height:1.5} .lvl-rl-cur{margin:7px 0 0;font:600 11px/1.4 var(--lvl-mono);color:var(--lvl-ink-2)} .lvl-rl-g{display:grid;gap:6px} .lvl-rl-a{display:flex;gap:7px;margin-top:10px} .lvl-rl-a .lvl-btn{flex:1} /* ══ SHIFT EXPLORER ═══════════════════════════════════════════════════════ */ .lvl-sx-wrap{margin:0 -2px} .lvl-sx-fill{fill:var(--lvl-green);opacity:.13} .lvl-sx-line{fill:none;stroke:var(--lvl-green-d);stroke-width:1.8;stroke-linejoin:round} .lvl-sx-nowline{stroke:var(--lvl-mut-2);stroke-width:1;stroke-dasharray:3 3;opacity:.7} .lvl-sx-zone{fill:var(--lvl-risk);opacity:.05} .lvl-sx-zero{stroke:var(--lvl-ink);stroke-width:1.2} .lvl-sx-rule{stroke:var(--lvl-mut-2);stroke-width:1;stroke-dasharray:2 3} .lvl-sx-rule.is-tf{stroke:var(--lvl-risk)} .lvl-sx-rt{font:800 8px/1 var(--lvl-mono);fill:var(--lvl-mut-2)} .lvl-sx-rt.is-tf{fill:var(--lvl-risk)} .lvl-sx-p{fill:var(--lvl-mut-2);stroke:var(--lvl-card);stroke-width:1} .lvl-sx-p.is-good{fill:var(--lvl-ok)} .lvl-sx-p.is-bad{fill:var(--lvl-risk)} .lvl-sx-p.is-now{fill:var(--lvl-ink);stroke-width:1.5} .lvl-sx-p.is-best{fill:var(--lvl-ok);stroke:var(--lvl-ok);stroke-width:2.5;fill-opacity:1} .lvl-sx-p.is-blocked{fill:var(--lvl-line-3);stroke-dasharray:1 1} .lvl-sx-hit{fill:transparent;cursor:pointer} .lvl-sx-hit:hover{fill:var(--lvl-green);fill-opacity:.08} .lvl-sx-bl{font:800 9px/1 var(--lvl-mono);fill:var(--lvl-ok)} .lvl-sx-empty{padding:16px 12px;font-size:11px;line-height:1.5;color:var(--lvl-mut); border:1px dashed var(--lvl-line-3);border-radius:var(--lvl-r-xs);text-align:center} /* ══ CREW METERS ══════════════════════════════════════════════════════════ */ .lvl-mtr{display:grid;gap:7px} .lvl-mtr-r{display:grid;grid-template-columns:1fr 74px 42px 60px;align-items:center;gap:7px} .lvl-mtr-n{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--lvl-ink-2);min-width:0} .lvl-mtr-n i{width:7px;height:7px;border-radius:2px;flex:0 0 auto} .lvl-mtr-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-mtr-t{position:relative;height:7px;border-radius:4px;background:var(--lvl-line-2);overflow:visible} .lvl-mtr-t u{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--lvl-ok);display:block} .lvl-mtr-t s{position:absolute;top:0;height:100%;background:var(--lvl-risk);border-radius:0 4px 4px 0;display:block} .lvl-mtr-t b{position:absolute;top:-2px;width:2px;height:11px;background:var(--lvl-before);border-radius:1px} .lvl-mtr-r.is-high .lvl-mtr-t u{background:var(--lvl-warn)} .lvl-mtr-r.is-over .lvl-mtr-t u{background:var(--lvl-risk)} .lvl-mtr-r.is-none .lvl-mtr-t{background:repeating-linear-gradient(90deg,var(--lvl-line-2) 0 3px,transparent 3px 6px)} .lvl-mtr-v{font:700 10.5px/1 var(--lvl-mono);text-align:right} .lvl-mtr-v i{font-style:normal;font-size:8.5px;color:var(--lvl-mut-2)} .lvl-mtr-c{font:600 9.5px/1 var(--lvl-mono);color:var(--lvl-mut);text-align:right} .lvl-mtr-c em{font-style:normal;display:block;margin-top:2px;color:var(--lvl-ok)} .lvl-mtr-r.is-over .lvl-mtr-c{color:var(--lvl-risk)} /* ══ ONE PERIOD, OPENED ═══════════════════════════════════════════════════ */ .lvl-pp{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;max-height:52%;overflow:auto; border:1px solid var(--lvl-green);border-radius:var(--lvl-r-s);background:var(--lvl-card); box-shadow:var(--lvl-sh-2)} .lvl-pp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;background:var(--lvl-green-t)} .lvl-pp-h b{font:700 12.5px/1.3 var(--lvl-font)} .lvl-pp-h em{font-style:normal;font-size:11px;color:var(--lvl-mut)} .lvl-pp-h .lvl-btn{margin-left:auto} .lvl-pp .lvl-tbl-wrap{border:0;border-radius:0} /* ══ QUICK ACTIONS (in the rail) ══════════════════════════════════════════ */ .lvl-qa.is-empty{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.5;color:var(--lvl-mut)} .lvl-qa-g{display:grid;gap:7px} .lvl-qa-c{display:block;width:100%;text-align:left;border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-xs); background:var(--lvl-card);padding:8px 10px;cursor:pointer;font:inherit;color:inherit; transition:border-color .12s,background .12s} .lvl-qa-c:hover{border-color:var(--lvl-green);background:var(--lvl-green-t)} .lvl-qa-c.is-on{border-color:var(--lvl-green);background:var(--lvl-green-t);box-shadow:inset 2px 0 0 var(--lvl-green)} .lvl-qa-c.is-best{border-left:2.5px solid var(--lvl-ok)} .lvl-qa-c.is-warn{border-left:2.5px solid var(--lvl-warn)} .lvl-qa-c.is-best.is-warn{border-left-color:var(--lvl-ok)} .lvl-qa-t{display:block;font:600 11px/1.35 var(--lvl-font)} .lvl-qa-t i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--lvl-ok);background:var(--lvl-ok-t);padding:2px 4px;border-radius:3px;margin-left:5px;vertical-align:1px} .lvl-qa-r{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px} .lvl-qa-r u{display:block;text-decoration:none;font:800 10.5px/1 var(--lvl-mono)} .lvl-qa-r i{display:block;font-style:normal;font-size:8px;color:var(--lvl-mut-2);margin-top:2px} .lvl-qa-w{display:inline-block;margin-top:6px;font:700 8.5px/1 var(--lvl-mono);color:var(--lvl-warn); background:var(--lvl-warn-t);padding:3px 5px;border-radius:3px} .lvl-qa-w.is-bad{color:var(--lvl-risk);background:var(--lvl-risk-t)} /* ══ WORKBENCH (whole-programme) ══════════════════════════════════════════ */ .lvl-wb-top{margin-bottom:16px} .lvl-wb-top-h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px} .lvl-wb-top-h h4{margin:0} .lvl-wb-top-h>span{margin-left:auto} .lvl-wb-sel{margin-top:16px;border:1px solid var(--lvl-green);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-wb-sel .lvl-wb-bar{margin:0;border:0;border-bottom:1px solid var(--lvl-line);border-radius:0;background:var(--lvl-green-t)} .lvl-wb-sel .lvl-live{border:0;border-radius:0} .lvl-wb-who{flex:1 1 260px;min-width:0} .lvl-wb-who b{display:block;font:700 13px/1.3 var(--lvl-font)} .lvl-wb-who em{display:block;font-style:normal;font-size:11px;color:var(--lvl-mut);margin-top:2px} .lvl-arrow{font-style:normal;color:var(--lvl-mut-2);margin:0 4px} .lvl-mono{font-family:var(--lvl-mono);font-size:11px} /* ── THE CHROME GETS OUT OF THE WAY ON A SHORT SCREEN ────────────────── On a 1280x720 laptop the page header, the section rail and the master bar were 190px — a quarter of the screen spent before any data. Gated on a media query rather than on the measured height, because the measurement reads this chrome and a rule that changed it would chase its own tail. */ @media (max-height:860px){ .lvl-ws-tb{gap:8px;padding:4px 10px} .lvl-tb-btn,.lvl-ws-tb .lvl-sel-s,.lvl-ws-tb .lvl-seg-b{height:26px} .lvl-tog{height:26px} .lvl-ws-foot{padding:2px 10px;gap:10px} .lvl-ws-mini-w,.lvl-ws-mini{height:20px} .lvl.is-ws .lvl-top{padding:8px 18px} .lvl.is-ws .lvl-title p,.lvl.is-ws .lvl-crumbs{display:none} .lvl.is-ws .lvl-title h1{font-size:15px} .lvl.is-ws .lvl-rail{padding:4px 18px} .lvl.is-ws .lvl-rail-b{padding:5px 9px} .lvl.is-ws .lvl-state{padding:7px 18px} .lvl.is-ws .lvl-state em{display:none} } @media (max-height:760px){ .lvl.is-ws .lvl-rail-b span{display:none} .lvl.is-ws .lvl-rail-b{padding:5px 8px;gap:5px} } /* ── A LABEL COLUMN THAT CAN BE READ ────────────────────────────────── "WBS-100-A General Clearance" in 120px is "WBS-100-A Genera". The code is worth its width on a wide screen and not on a narrow one — the indent already carries the level, and the full string stays in the row's title. */ @media (max-width:1560px){ .lvl-gtr.is-wbs .c-name b{display:none} } @media (max-width:1300px){ .lvl-gt-colh,.lvl-gtr{grid-template-columns:minmax(0,1fr) 28px 40px} .lvl-gt-colh{font-size:8.5px} } /* the histogram's caption is worth 55px of a 900px screen and not of a 720px one — the chart is the point, the sentence is the footnote */ @media (max-height:820px){ .lvl-hg-sub{display:none} .lvl-ws-key{font-size:9.5px;gap:7px} } /* ══ THE WORKSPACE'S ONE HEADER ROW ═══════════════════════════════════════ Three stacked bars — title, 01→08 rail, master/simulation state — were 176px of furniture before the programme started, on the one view where every pixel is the programme. One 42px row carries all three jobs. */ .lvl-hdr1{display:flex;align-items:center;gap:12px;padding:5px 14px;min-height:42px;flex-wrap:nowrap; background:var(--lvl-card);border-bottom:1px solid var(--lvl-line);position:sticky;top:0;z-index:30} /* the actions never shrink — Apply and Generate are the point of the row — so the state chip is the one that gives ground, and the nav drops its labels before either of them is squeezed */ .lvl-hdr1-a{flex:0 0 auto} .lvl-hdr1-nav{flex:0 0 auto;min-width:0} .lvl-hdr1-st{flex:1 1 0;min-width:0} .lvl-hdr1-nav{display:flex;align-items:center;gap:2px;flex:0 0 auto} .lvl-hdr1-b{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border:1px solid transparent; border-radius:var(--lvl-r-xs);background:none;cursor:pointer;color:var(--lvl-mut); font:600 11.5px/1 var(--lvl-font);white-space:nowrap} .lvl-hdr1-b:hover{background:var(--lvl-wash);color:var(--lvl-ink)} .lvl-hdr1-b.is-on{background:var(--lvl-green-t);border-color:rgba(36,180,126,.32);color:var(--lvl-green-d)} .lvl-hdr1-b em{font-style:normal;font:800 9px/1 var(--lvl-mono);padding:2px 4px;border-radius:8px; background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-hdr1-b.is-on em{background:var(--lvl-green);color:#fff} .lvl-hdr1-st{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto; font:500 11px/1 var(--lvl-font);color:var(--lvl-mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .lvl-hdr1-st b{flex:0 0 auto;padding:3px 7px;border-radius:99px;font:800 8.5px/1 var(--lvl-mono);letter-spacing:.09em} .lvl-hdr1-st.is-live b{background:var(--lvl-line-2);color:var(--lvl-mut)} .lvl-hdr1-st.is-sim b{background:var(--lvl-warn);color:#fff} .lvl-hdr1-st.is-sim{color:var(--lvl-ink);font-weight:700} .lvl-hdr1-st u{text-decoration:none;font:600 10px/1 var(--lvl-mono);color:var(--lvl-mut-2);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .lvl-hdr1-a{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto} .lvl-hdr1-a .lvl-tb-btn{height:28px;padding:0 8px} .lvl-btn.is-sm{height:28px;padding:0 11px;font-size:11.5px} /* the workspace is the whole panel now — no page chrome above it to allow for */ .lvl.is-ws .lvl-foot{display:none} /* Keyed at 1720px, not 1400: the constraint is the PANEL, and the app shell takes ~300px of the viewport before the panel starts. At 1600 the labelled nav plus the state chip plus the actions overflowed and Generate was clipped off the right edge. */ @media (max-width:1720px){ .lvl-hdr1-b span{display:none} .lvl-hdr1-b{padding:0 7px} } /* the two heat axes and their crossing, in the legend — an encoding nobody can name is decoration */ .lvl-ws-key .k-hv{width:44px;background:linear-gradient(90deg,#FDEFEC,#F6CAC1,#F0AFA2,#E88E7E)} .lvl-ws-key .k-ha{width:44px;background:linear-gradient(90deg,#FFF1D0,#FDC873,#F4862E,#C63E16)} .lvl-ws-key .k-hx{background:#9E2411} .lvl-ws-key b{font:700 10px/1 var(--lvl-font);color:var(--lvl-ink)} /* the right-hand end of the toolbar carries the two things a planner checks first — how many periods are over, and whether a filter is on. When the row scrolls they must not scroll away with it. */ .lvl-tbg.is-end{padding-left:10px} /* MULTIPLY DARKENS, WHICH IS THE POINT ON A LIGHT SURFACE AND WRONG ON A DARK ONE — two washes multiplied over #101A2B go to black and the crossing disappears into the background. Screen is the dual: it lightens, so the crossing is still the brightest thing where the two axes meet. */ /* ON A DARK SURFACE the same ramp reads as a light block. Stepped for #101A2B instead: it climbs INTO the warm hues from the surface rather than down from white, and lightness still moves monotonically across the ramp. */ /* ON A DARK SURFACE the same ramps read as a light block, so both are stepped again for #101A2B: they climb INTO the warm hues from the surface rather than down from white, and lightness still moves monotonically. KEYED ON THE APP'S OWN THEME ATTRIBUTE, never on `prefers-color-scheme`. This app does not follow the OS: it switches on `body[data-gantt-theme]`. A bare media query meant that on a machine whose OS was dark but whose app was light, THIS BLOCK ALONE flipped — dark-mode fills painted across a white page, and the whole plot came out brown. Nothing in this stylesheet may key on the OS preference while the rest of it keys on the attribute. */ body[data-gantt-theme="dark"] .lvl-cell.is-f1{fill:#3A2E1C} body[data-gantt-theme="dark"] .lvl-cell.is-f2{fill:#4E3A1E} body[data-gantt-theme="dark"] .lvl-cell.is-f3{fill:#654721} body[data-gantt-theme="dark"] .lvl-cell.is-f4{fill:#7E5423} body[data-gantt-theme="dark"] .lvl-cell.is-f5{fill:#985E22} body[data-gantt-theme="dark"] .lvl-cell.is-f6{fill:#B3641F} body[data-gantt-theme="dark"] .lvl-cell.is-f7{fill:#CE651B} body[data-gantt-theme="dark"] .lvl-cell.is-f8{fill:#E86416} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f1{fill:#2A1D1C} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f2{fill:#37231F} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f3{fill:#472922} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f4{fill:#582F26} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f5{fill:#6B3529} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f6{fill:#7F3B2C} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f7{fill:#93412F} body[data-gantt-theme="dark"] .lvl-cell.is-v.is-f8{fill:#A84732} /* ── THE WORKFLOW, AS A STRIP ───────────────────────────────────────── Six steps, left to right, the one you are on lit. It replaces a 70px band of five cards with a sentence each that said the same thing on every view forever; the sentences are titles now and each step is still the button that takes you there. */ .lvl-flow{display:flex;align-items:center;gap:2px;margin:0;padding:0 14px;list-style:none; height:30px;background:var(--lvl-card);border-bottom:1px solid var(--lvl-line); position:sticky;top:42px;z-index:29;overflow-x:auto;scrollbar-width:none} .lvl-flow::-webkit-scrollbar{display:none} .lvl-flow-s{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:22px;padding:0 9px 0 6px; border-radius:99px;cursor:pointer;font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut-2);white-space:nowrap} .lvl-flow-s:hover{background:var(--lvl-wash);color:var(--lvl-ink-2)} .lvl-flow-s i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%; font-style:normal;font:800 8.5px/1 var(--lvl-mono);background:var(--lvl-line-2);color:var(--lvl-mut-2)} .lvl-flow-s.is-done{color:var(--lvl-mut)} .lvl-flow-s.is-done i{background:var(--lvl-ok-t);color:var(--lvl-ok)} .lvl-flow-s.is-now{background:var(--lvl-green-t);color:var(--lvl-green-d);font-weight:700} .lvl-flow-s.is-now i{background:var(--lvl-green);color:#fff} .lvl-flow-s+.lvl-flow-s::before{content:"";width:10px;height:1px;background:var(--lvl-line-3);margin-right:4px} /* search, on the one header row that survived */ .lvl-hdr1-q{display:flex;align-items:center;gap:5px;height:28px;padding:0 9px;border-radius:99px; border:1px solid var(--lvl-line-3);background:var(--lvl-card);color:var(--lvl-mut-2);max-width:210px} .lvl-hdr1-q input{border:0;background:none;outline:0;min-width:0;width:100%; font:500 11.5px/1 var(--lvl-font);color:var(--lvl-ink)} .lvl-hdr1-q:focus-within{border-color:var(--lvl-green)} @media (max-width:1180px){.lvl-hdr1-q{display:none}} /* ── A PAGE OF SECTIONS, NOT A STACK OF CARDS ───────────────────────── The Control Centre was 3014px of ten cards with identical weight, so a planner scrolling it had no way to tell the diagnosis from a detail. A section head is the one thing that was missing: it groups the cards under it, numbers the reading order, and gives the page a rhythm the cards themselves cannot. */ .lvl-sec{display:flex;flex-direction:column;gap:10px} .lvl-sec+.lvl-sec{margin-top:8px} .lvl-sec-h{display:flex;align-items:baseline;gap:10px;padding:2px 2px 0} .lvl-sec-h h2{margin:0;font:800 13px/1.2 var(--lvl-head);letter-spacing:-.01em;color:var(--lvl-ink)} .lvl-sec-h i{font-style:normal;font:800 9px/1 var(--lvl-mono);letter-spacing:.1em;color:var(--lvl-mut-2); background:var(--lvl-line-2);padding:4px 6px;border-radius:4px} .lvl-sec-h p{margin:0;flex:1;font-size:11px;line-height:1.45;color:var(--lvl-mut)} .lvl-sec-h .lvl-btn{flex:0 0 auto;align-self:center} /* ── THE KPI STRIP GETS A PRIORITY ──────────────────────────────────── Eight equal tiles gave "143 overload days" and "levelling state: none" the same weight. The lead tiles are the diagnosis and read at a glance; the rest are context and sit at two-thirds the size. */ .lvl-kpis.is-lead{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .lvl-kpis.is-lead .lvl-kpi{padding:13px 15px 12px} .lvl-kpis.is-lead .lvl-kpi-v{font-size:26px} .lvl-kpis.is-lead .lvl-kpi-l{font-size:9px} .lvl-kpis.is-rest{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));margin-top:-2px} .lvl-kpis.is-rest .lvl-kpi{padding:8px 11px 7px} .lvl-kpis.is-rest .lvl-kpi-v{font-size:15px} .lvl-kpis.is-rest .lvl-kpi-s{font-size:9.5px} /* ── THE RULES OF THE RUN ───────────────────────────────────────────── Mode, strategy, the finish, the target date, milestones, crew limits and existing pins — every one of them was already stored and every one was invisible until the setup drawer was opened, so the Control Centre showed a result and never the rules that produced it. */ /* the dividers ride the tiles, not the grid gaps — a gap-coloured grid shows a grey slab wherever the last row is short of a full set */ .lvl-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); background:var(--lvl-card);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-rule{position:relative;display:block;width:100%;text-align:left;font:inherit;cursor:pointer; background:none;border:0;padding:10px 22px 11px 12px;border-top:2px solid transparent; border-right:1px solid var(--lvl-line);border-bottom:1px solid var(--lvl-line)} .lvl-rule:hover{background:var(--lvl-wash)} .lvl-rule-g{position:absolute;right:7px;top:11px;display:flex;color:var(--lvl-mut-2);opacity:0;transition:opacity .12s} .lvl-rule:hover .lvl-rule-g{opacity:1} .lvl-rule-l{display:block;font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-rule-v{display:block;font:800 14px/1.25 var(--lvl-head);color:var(--lvl-ink);margin-top:4px} .lvl-rule-n{display:block;font-style:normal;font-size:10.5px;line-height:1.45;color:var(--lvl-mut);margin-top:3px} .lvl-rule.is-ok{border-top-color:var(--lvl-ok)} .lvl-rule.is-ok .lvl-rule-v{color:var(--lvl-ok)} .lvl-rule.is-warn{border-top-color:var(--lvl-warn)} .lvl-rule.is-warn .lvl-rule-v{color:var(--lvl-warn)} .lvl-rule.is-risk{border-top-color:var(--lvl-risk)} .lvl-rule.is-risk .lvl-rule-v{color:var(--lvl-risk)} .lvl-rule.is-idle .lvl-rule-v{color:var(--lvl-mut-2);font-weight:700} /* ── BEFORE → AFTER, AS CARDS ───────────────────────────────────────── Six questions with six answers: how long, when it ends, how many bars moved, how many people at the peak, how many days break a limit, and whether the critical path changed. The ten-row table is still underneath for everything else — it is just no longer the first thing on the page. */ .lvl-ba-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:9px} .lvl-ba-c{border:1px solid var(--lvl-line);border-left:3px solid var(--lvl-line-3); border-radius:var(--lvl-r-s);padding:10px 12px 11px;background:var(--lvl-card)} .lvl-ba-l{display:block;font:700 8.5px/1.2 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-ba-p{display:flex;align-items:baseline;gap:7px;margin-top:5px;flex-wrap:wrap} .lvl-ba-p b{font:700 15px/1.15 var(--lvl-mono);color:var(--lvl-before)} .lvl-ba-p i{font-style:normal;font-size:11px;color:var(--lvl-mut-2)} .lvl-ba-p u{text-decoration:none;font:800 19px/1.1 var(--lvl-mono);letter-spacing:-.02em;color:var(--lvl-ink)} .lvl-ba-c>em{display:block;font-style:normal;font-size:10.5px;line-height:1.4;color:var(--lvl-mut);margin-top:4px} .lvl-ba-c.is-good{border-left-color:var(--lvl-ok)} .lvl-ba-c.is-good .lvl-ba-p u,.lvl-ba-c.is-good>em{color:var(--lvl-ok)} .lvl-ba-c.is-bad{border-left-color:var(--lvl-risk)} .lvl-ba-c.is-bad .lvl-ba-p u,.lvl-ba-c.is-bad>em{color:var(--lvl-risk)} .lvl-ba-c.is-info{border-left-color:var(--lvl-info)} .lvl-ba-c.is-info .lvl-ba-p u{color:var(--lvl-info)} .lvl-ba-c.is-flat{border-left-color:var(--lvl-line-3)} /* the full table, kept but folded away */ .lvl-more-d>summary{cursor:pointer;padding:9px 12px;border:1px dashed var(--lvl-line-3);border-radius:var(--lvl-r-s); font:600 11px/1 var(--lvl-font);color:var(--lvl-mut);background:var(--lvl-card);list-style:none} .lvl-more-d>summary::-webkit-details-marker{display:none} .lvl-more-d>summary::before{content:"\25B8 ";color:var(--lvl-mut-2)} .lvl-more-d[open]>summary::before{content:"\25BE "} .lvl-more-d>summary:hover{border-color:var(--lvl-green);color:var(--lvl-ink)} .lvl-more-d[open]>summary{margin-bottom:9px} /* ══ THE LEVELLING BRIEF ═══════════════════════════════════════════════ Measured, then rebuilt: the first version was 2,057 characters of prose for 15 controls, zero charts in a panel whose subject is a shape, and 1,431px of content in an 836px window. Two questions now, both of them pictures, and the prose lives in title attributes. */ .lvl-drawer.is-brief{width:min(560px,96vw)} .lvl-drawer.is-brief .lvl-drawer-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:0} /* a question label — the whole structure of the panel, in 20px */ .lvl-q{display:flex;align-items:baseline;gap:9px;margin:16px 0 7px;flex:0 0 auto} .lvl-drawer.is-brief .lvl-brief-say{margin-top:auto} .lvl-q:first-child{margin-top:0} .lvl-q>span{font:800 9.5px/1 var(--lvl-font);letter-spacing:.1em;text-transform:uppercase;color:var(--lvl-ink-2)} .lvl-q>em{font-style:normal;font-size:10px;color:var(--lvl-mut-2);flex:1;min-width:0} /* ── the two paths, each drawing its own question ── */ .lvl-paths{display:grid;grid-template-columns:1fr 1fr;gap:9px} .lvl-path{display:block;width:100%;text-align:left;padding:10px 11px 11px;cursor:pointer;font:inherit;color:inherit; border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s);background:var(--lvl-card); transition:border-color .12s,background .12s,box-shadow .12s} .lvl-path:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-path.is-on{border-color:var(--lvl-green);background:var(--lvl-green-t); box-shadow:inset 0 0 0 1px rgba(36,180,126,.35)} .lvl-path b{display:block;font:700 12px/1.25 var(--lvl-font);color:var(--lvl-ink);margin-top:8px} .lvl-path em{display:block;font-style:normal;font:500 10.5px/1.35 var(--lvl-font);color:var(--lvl-mut);margin-top:3px} .lvl-path em b{display:inline;font:800 12px/1 var(--lvl-mono)} .lvl-path em.is-bad{color:var(--lvl-risk)} .lvl-path em.is-bad b{color:var(--lvl-risk)} .lvl-path em.is-ok{color:var(--lvl-ok)} .lvl-path em.is-ok b{color:var(--lvl-ok)} .lvl-path-art{display:block;width:100%;height:46px} .lvl-path-art .a-now{fill:none;stroke:var(--lvl-green);stroke-width:2;stroke-linejoin:round} .lvl-path-art .a-ideal{fill:none;stroke:var(--lvl-mut-2);stroke-width:1.4;stroke-dasharray:3 3} .lvl-path-art .a-bar{fill:var(--lvl-line-3)} .lvl-path-art .a-bar.is-over{fill:var(--lvl-risk)} .lvl-path-art .a-cap{stroke:var(--lvl-mut-2);stroke-width:1.2;stroke-dasharray:3 2} .lvl-path.is-on .lvl-path-art .a-bar{fill:var(--lvl-mut-2)} .lvl-path.is-on .lvl-path-art .a-bar.is-over{fill:var(--lvl-risk)} /* ── everything else is a chip on a row ── */ .lvl-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .lvl-push{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .lvl-push-n{display:flex;align-items:center;gap:6px;margin-left:2px} .lvl-push-n .lvl-num{width:58px} .lvl-push-n span{font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-push-n.is-off{opacity:.4} .lvl-inline{display:inline-flex;align-items:center;gap:5px} .lvl-inline .lvl-num.is-tiny{width:46px} .lvl-inline span{font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-hint{font-style:normal;font-size:10.5px;color:var(--lvl-mut-2);margin-left:auto} .lvl-hint.is-ok{color:var(--lvl-ok)} .lvl-hint.is-bad{color:var(--lvl-risk);font-weight:600} .lvl-drawer.is-brief .lvl-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px} .lvl-drawer.is-brief .lvl-chip u{text-decoration:none;font:800 9px/1 var(--lvl-mono); background:var(--lvl-green);color:#fff;padding:2px 4px;border-radius:8px} .lvl-chip.is-res{height:26px;padding:0 9px;font-size:11px} .lvl-chip.is-res i{width:8px;height:8px;border-radius:2px;display:inline-block} .lvl-ceilpick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;padding:9px;border-radius:var(--lvl-r-s); background:var(--lvl-wash);border:1px solid var(--lvl-line-2)} .lvl-brief-say{margin:18px 0 0;align-self:stretch;padding:11px 13px;border-radius:var(--lvl-r-s);background:var(--lvl-green-t); border:1px solid rgba(36,180,126,.3);font-size:11.5px;line-height:1.65;color:var(--lvl-ink-2)} .lvl-brief-say b{color:var(--lvl-ink)} .lvl-brief-say i{font-style:italic;color:var(--lvl-mut)} /* the two overall goals — a rectangle beside a trapezoid says the difference faster than a sentence can */ .lvl-goals{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lvl-goal{display:block;width:100%;text-align:left;padding:9px 10px 10px;cursor:pointer;font:inherit;color:inherit; border:1px solid var(--lvl-line-3);border-radius:var(--lvl-r-s);background:var(--lvl-card)} .lvl-goal:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-goal.is-on{border-color:var(--lvl-green);background:var(--lvl-green-t); box-shadow:inset 0 0 0 1px rgba(36,180,126,.35)} .lvl-goal b{display:block;font:700 11.5px/1.2 var(--lvl-font);color:var(--lvl-ink);margin-top:6px} .lvl-goal em{display:block;font-style:normal;font:500 10px/1.4 var(--lvl-font);color:var(--lvl-mut);margin-top:3px} .lvl-goal-art{display:block;width:100%;height:30px} .lvl-goal-art polyline{fill:none;stroke:var(--lvl-mut-2);stroke-width:1.8;stroke-linejoin:round} .lvl-goal.is-on .lvl-goal-art polyline{stroke:var(--lvl-green)} .lvl-ramps{margin-top:8px} .lvl-ramps .lvl-inline span{min-width:0} .lvl-ramps .lvl-inline>b{font:700 10.5px/1 var(--lvl-mono);color:var(--lvl-mut-2)} /* ── WHICH TRADES ARE OVER, AND BY HOW MUCH ─────────────────────────── "5 of 22 over their ceiling" is a count, and a count is not something a planner can act on. The next question is always WHICH. */ .lvl-ceils{margin-top:8px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-card);overflow:hidden} .lvl-ceils-h{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--lvl-risk-t); font:700 9.5px/1 var(--lvl-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lvl-risk)} .lvl-ceils-h.is-ok{background:var(--lvl-ok-t);color:var(--lvl-ok);text-transform:none;letter-spacing:0;font-size:11px} .lvl-ceils-h .lvl-link{margin-left:auto;font:700 10px/1 var(--lvl-font);text-transform:none;letter-spacing:0} .lvl-ceil{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0; border-top:1px solid var(--lvl-line-2);background:var(--lvl-card);font:inherit;color:inherit;text-align:left;cursor:pointer} .lvl-ceil[disabled]{cursor:default} .lvl-ceil:not([disabled]):hover{background:var(--lvl-wash)} .lvl-ceil-x{font-style:normal;font-size:12px;color:var(--lvl-mut-2);flex:0 0 auto} .lvl-ceil.is-on .lvl-ceil-x{color:var(--lvl-green)} .lvl-ceil-d{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .lvl-ceil-n{flex:0 0 96px;font:600 11px/1.2 var(--lvl-font);color:var(--lvl-ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-ceil-b{position:relative;flex:1;min-width:40px;height:7px;border-radius:4px;background:var(--lvl-line-2);overflow:hidden} .lvl-ceil-b>i{position:absolute;left:0;top:0;bottom:0;background:var(--lvl-ok);border-radius:4px} .lvl-ceil-b>u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--lvl-ink);opacity:.85;border-radius:1px} .lvl-ceil.is-over .lvl-ceil-b>i{background:var(--lvl-risk)} .lvl-ceil-v{flex:0 0 auto;font:800 11px/1 var(--lvl-mono);color:var(--lvl-ink)} .lvl-ceil-v em{font-style:normal;font-weight:600;color:var(--lvl-mut-2)} .lvl-ceil-p{flex:0 0 42px;text-align:right;text-decoration:none;font:700 10px/1 var(--lvl-mono);color:var(--lvl-mut)} .lvl-ceil.is-over .lvl-ceil-p{color:var(--lvl-risk)} .lvl-ceil:not(.is-on):not([disabled]){opacity:.5} .lvl-ceils-more{display:block;width:100%;padding:7px 10px;border:0;border-top:1px solid var(--lvl-line-2); background:var(--lvl-wash);cursor:pointer;font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut)} .lvl-ceils-more:hover{color:var(--lvl-ink);background:var(--lvl-line-2)} /* ══ THE LEVELLING RESULT, TRADE BY TRADE ═══════════════════════════════ Same panel chrome as the curve match — one visual language, two objectives. Each block is a trade a planner can sign off on its own, so the block is the card and the approval sits inside it, not in a footer that applies to everything at once. */ /* ── THE PANEL IS FIXED TO THE VIEWPORT, NOT TO THE DOCUMENT ────────── .lvl-rp is position:absolute, which was right while it lived inside the workspace pane. This one is chrome — it is rendered beside the drawer so a run started from the Control Centre has somewhere to appear — and against an unpositioned ancestor "top:0;bottom:0" resolved to the whole DOCUMENT. On a long page that is a panel several thousand pixels tall with its header scrolled off the top, its footer somewhere below the fold, and no scrollbar of its own. Fixed to the viewport it is a panel again: header, a body that scrolls, actions on the bottom edge, all of it always in view. */ .lvl-rp.is-trades{position:fixed;top:0;right:0;bottom:0;left:auto; width:min(560px,44vw);height:auto;max-height:100vh;z-index:997; border-radius:0;box-shadow:-16px 0 48px rgba(20,32,42,.18)} .lvl-rp.is-trades>.lvl-rp-h, .lvl-rp.is-trades>.lvl-rp-a{flex:0 0 auto} .lvl-rp.is-trades>.lvl-rp-b{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;display:block;padding:10px} .lvl-rp.is-trades>.lvl-rp-a{border-top:1px solid var(--lvl-line);background:var(--lvl-wash); padding:10px 12px;gap:8px} .lvl-rp.is-trades.is-min{top:auto;bottom:0;right:0;width:min(560px,44vw);height:auto; max-height:none;border-radius:var(--lvl-r) var(--lvl-r) 0 0} /* narrow screens: it takes the width it needs rather than half a panel */ @media (max-width:1100px){ .lvl-rp.is-trades,.lvl-rp.is-trades.is-min{width:min(460px,94vw)} } .lvl-tp{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-card); margin-bottom:8px;overflow:hidden} .lvl-tp.is-clear{border-color:color-mix(in srgb,var(--lvl-ok) 45%,var(--lvl-line))} .lvl-tp.is-over{border-color:color-mix(in srgb,var(--lvl-risk) 40%,var(--lvl-line))} .lvl-tp.is-off{opacity:.45} .lvl-tp-h{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--lvl-wash); border-bottom:1px solid var(--lvl-line-2)} .lvl-tp-d{width:9px;height:9px;border-radius:50%;flex:none} .lvl-tp-n{font:700 12px/1 var(--lvl-font);color:var(--lvl-ink);flex:1 1 auto; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-tp-pk{font:700 12px/1 var(--lvl-font-n,var(--lvl-font));color:var(--lvl-ink); display:inline-flex;align-items:baseline;gap:3px;flex:none} .lvl-tp-pk i{font-style:normal;color:var(--lvl-mut);font-size:11px} .lvl-tp-pk em{font-style:normal;font-weight:600;color:var(--lvl-mut);font-size:10.5px} .lvl-tp-b{display:flex;align-items:flex-start;gap:10px;padding:9px} /* before is the shape you are cutting down; after is the line you get */ .lvl-tp-spark{flex:none;border:1px solid var(--lvl-line-2);border-radius:5px; background:var(--lvl-wash);display:block} .lvl-tp-spark .k-before{fill:var(--lvl-mut);opacity:.20;stroke:none} .lvl-tp-spark .k-after{fill:none;stroke:var(--lvl-green);stroke-width:1.6; vector-effect:non-scaling-stroke;stroke-linejoin:round} .lvl-tp-spark .k-cap{stroke:var(--lvl-risk);stroke-width:1.2;stroke-dasharray:4 3; vector-effect:non-scaling-stroke} .lvl-tp.is-over .lvl-tp-spark .k-after, .lvl-tp.is-pushed .lvl-tp-spark .k-after{stroke:var(--lvl-risk)} .lvl-tp-w{flex:1 1 auto;min-width:0} .lvl-tp-k{font:600 10.5px/1.4 var(--lvl-font);color:var(--lvl-mut);margin-bottom:3px} .lvl-tp-l{list-style:none;margin:0;padding:0} .lvl-tp-l li{font:500 11px/1.45 var(--lvl-font);color:var(--lvl-ink); display:flex;gap:6px;justify-content:space-between;padding:1px 0} .lvl-tp-l li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-tp-l li em{font-style:normal;color:var(--lvl-mut);font-size:10.5px;flex:none} .lvl-tp-l li.is-more{color:var(--lvl-mut);font-size:10.5px} .lvl-tp-no{display:flex;gap:6px;align-items:flex-start; font:500 11px/1.45 var(--lvl-font);color:var(--lvl-mut)} .lvl-tp-alone{margin-top:6px;padding:6px 7px;border-radius:4px; background:color-mix(in srgb,var(--lvl-risk) 8%,transparent); border:1px solid color-mix(in srgb,var(--lvl-risk) 22%,transparent)} .lvl-tp-alone span{display:block;font:500 10.5px/1.5 var(--lvl-font);color:var(--lvl-ink)} .lvl-tp-alone b{font-weight:700} .lvl-tp-a{display:flex;justify-content:flex-end;padding:0 9px 8px} /* the finish date and its consequence, as one block */ .lvl-ends{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-wash);padding:8px;margin-bottom:2px} .lvl-ends-now{display:flex;align-items:baseline;gap:6px;margin-bottom:6px} .lvl-ends-now span{font:600 10.5px/1 var(--lvl-font);color:var(--lvl-mut); text-transform:uppercase;letter-spacing:.04em} .lvl-ends-now b{font:700 12.5px/1 var(--lvl-font);color:var(--lvl-ink)} .lvl-ends .lvl-push{margin:0} .lvl-ends-w{display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:7px; border-top:1px dashed var(--lvl-line-2);font:500 11px/1.3 var(--lvl-font);color:var(--lvl-mut)} .lvl-ends-w b{font-weight:700;color:var(--lvl-ink)} /* the page holds still while an overlay is open — see portalOverlays() */ body.lvl-locked{overflow:hidden} /* a trade this run pushed over is the loudest card in the panel */ .lvl-tp.is-pushed{border-color:var(--lvl-risk); box-shadow:0 0 0 1px color-mix(in srgb,var(--lvl-risk) 30%,transparent) inset} .lvl-tp.is-pushed .lvl-tp-h{background:color-mix(in srgb,var(--lvl-risk) 10%,var(--lvl-wash))} /* ══ THE IMPACT, AT THE TOP OF THE PROPOSAL ════════════════════════════ A list of activities is the change. This is what the change DOES — the five numbers a planner is accountable for, before on the left and after on the right, with a bar for the one that has a proportion worth seeing. */ .lvl-tim{border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-wash);padding:9px;margin-bottom:10px} .lvl-tim-bar{position:relative;height:20px;border-radius:10px;overflow:hidden; background:color-mix(in srgb,var(--lvl-risk) 16%,var(--lvl-card));margin-bottom:9px} .lvl-tim-bar>i{position:absolute;inset:0 auto 0 0;background:var(--lvl-green); border-radius:10px 0 0 10px;transition:width .18s ease} .lvl-tim-bar>span{position:relative;display:block;text-align:center; font:700 10.5px/20px var(--lvl-font);color:var(--lvl-ink); text-shadow:0 0 3px color-mix(in srgb,var(--lvl-card) 70%,transparent)} .lvl-tim-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px; background:var(--lvl-line);border:1px solid var(--lvl-line);border-radius:5px;overflow:hidden} .lvl-tim-c{background:var(--lvl-card);padding:6px 8px;min-width:0} .lvl-tim-c>span{display:block;font:700 8.5px/1 var(--lvl-mono,var(--lvl-font)); letter-spacing:.08em;text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-tim-c>b{display:flex;align-items:baseline;gap:3px;margin-top:4px; font:800 12.5px/1.15 var(--lvl-font);color:var(--lvl-mut);flex-wrap:wrap} .lvl-tim-c>b i{font-style:normal;font-size:10px;color:var(--lvl-mut-2)} .lvl-tim-c>b u{text-decoration:none;color:var(--lvl-ink)} .lvl-tim-c>em{display:block;font-style:normal;font-size:9.5px;color:var(--lvl-mut);margin-top:2px} .lvl-tim-c.is-ok>b u{color:var(--lvl-ok)} .lvl-tim-c.is-warn>b u{color:var(--lvl-warn,#B7791F)} .lvl-tim-c.is-bad>b u{color:var(--lvl-risk)} /* the trades the brief was never looking at */ .lvl-tp-out{border:1px solid var(--lvl-risk);border-radius:var(--lvl-r-s); background:color-mix(in srgb,var(--lvl-risk) 7%,var(--lvl-card));padding:9px;margin-top:4px} .lvl-tp-out-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px} .lvl-tp-out-h b{font:700 11.5px/1.35 var(--lvl-font);color:var(--lvl-ink);flex:1 1 auto;min-width:0} .lvl-tp-out-h em{font-style:normal;font-size:10px;color:var(--lvl-mut);width:100%} .lvl-tp-out-l{list-style:none;margin:7px 0;padding:0} .lvl-tp-out-l li{display:flex;align-items:center;gap:7px;padding:3px 0; font:500 11px/1.35 var(--lvl-font);color:var(--lvl-ink)} .lvl-tp-out-l li i{width:8px;height:8px;border-radius:50%;flex:none} .lvl-tp-out-l li b{font-weight:600;flex:1 1 auto;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-tp-out-l li span{font:700 11.5px/1 var(--lvl-font);color:var(--lvl-risk);flex:none} .lvl-tp-out-l li span em{font-style:normal;font-weight:600;font-size:10px;color:var(--lvl-mut)} .lvl-tp-out-l li u{text-decoration:none;font-size:10px;color:var(--lvl-mut);flex:none} /* ── THE PLANS THIS RUN WEIGHED ──────────────────────────────────────── The same block as the out-of-brief warning, without the warning: this is the run showing its working, not flagging a problem. So the risk border comes off, the chosen plan reads at full strength, and the ones it was measured against sit back a step — a planner can see in one glance what the alternative would have cost them. */ .lvl-tp-out.is-weighed{border-color:var(--lvl-line);background:var(--lvl-wash)} .lvl-tp-out.is-weighed .lvl-tp-out-l li{padding:4px 0;border-top:1px solid var(--lvl-line); align-items:baseline;flex-wrap:wrap} .lvl-tp-out.is-weighed .lvl-tp-out-l li:first-child{border-top:0} .lvl-tp-out.is-weighed .lvl-tp-out-l li span{color:var(--lvl-mut)} .lvl-tp-out.is-weighed .lvl-tp-out-l li u{width:100%;padding-left:0} .lvl-tp-out.is-weighed .lvl-tp-out-l li:not(.is-win){opacity:.62} .lvl-tp-out.is-weighed .lvl-tp-out-l li.is-win b, .lvl-tp-out.is-weighed .lvl-tp-out-l li.is-win span{color:var(--lvl-ink)} .lvl-tp-out.is-weighed .lvl-tp-out-l li.is-win b{font-weight:700} /* ── THE BRIEF, MEASURED AGAINST THE PROGRAMME ───────────────────────── Not a warning and not a result: the run telling the planner that the question it was asked is not the question the programme is worst at, and what a lever they never granted would have been worth. It reads as advice, so it takes the informational colour rather than the risk one. */ .lvl-tp-out.is-advice{border-color:var(--lvl-info);background:var(--lvl-info-t)} .lvl-tp-out.is-advice .lvl-tp-out-h em{line-height:1.45;color:var(--lvl-ink-2)} .lvl-tp-out.is-advice .lvl-btn{margin-top:8px} .lvl-tp-adv-l{margin-top:10px;padding-top:9px;border-top:1px solid var(--lvl-line)} .lvl-tp-adv-l b{display:block;font:700 11.5px/1.35 var(--lvl-font);color:var(--lvl-ink)} .lvl-tp-adv-l em{display:block;margin-top:2px;font-style:normal;font-size:10.5px; line-height:1.45;color:var(--lvl-ink-2)} .lvl-tp-adv-l .lvl-btn{margin-right:6px} /* ── THE BRIEF, ON THE BOARD THE PLANNER JUDGES THE TOOL ON ──────────── Under the four meters, above the chart. It is not a warning — the run did what it was asked — so it takes the informational colour, and the button that changes the question sits inside it rather than somewhere else. */ .lvl-cc-fit{display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;padding:9px 11px; border:1px solid var(--lvl-info);border-radius:var(--lvl-r-s);background:var(--lvl-info-t)} .lvl-cc-fit > svg{flex:none;margin-top:1px;color:var(--lvl-info)} .lvl-cc-fit-t{flex:1 1 auto;min-width:0} .lvl-cc-fit-t b{display:block;font:700 12px/1.35 var(--lvl-font);color:var(--lvl-ink)} .lvl-cc-fit-t em{display:block;margin-top:2px;font-style:normal;font-size:11px; line-height:1.5;color:var(--lvl-ink-2)} .lvl-cc-fit .lvl-btn{flex:none;align-self:center} @media (max-width:720px){.lvl-cc-fit{flex-wrap:wrap}.lvl-cc-fit .lvl-btn{width:100%}} /* what the run actually did, in numbers, under the score it produced */ .lvl-cc-effort{margin:0 0 9px;font:500 10.5px/1.5 var(--lvl-font);color:var(--lvl-mut); letter-spacing:.01em} /* the same line, about a run that is no longer the one on screen */ .lvl-cc-effort.is-stale{color:var(--lvl-warn)} /* the relief the brief declined — a price, not a problem */ .lvl-cc-fit.is-cost{border-color:var(--lvl-warn); background:color-mix(in srgb,var(--lvl-warn) 7%,var(--lvl-card))} .lvl-cc-fit.is-cost > svg{color:var(--lvl-warn)} /* ══ THE PROGRAMME, BEFORE AGAINST AFTER ═══════════════════════════════ The workspace Gantt's geometry, twice. The label column is HTML and the chart is SVG, so both are drawn at the width they are given and the container scrolls — two boxes that scale by different factors cannot be made to line up by choosing a better number. */ .lvl-bap-tb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .lvl-bap-key{display:inline-flex;align-items:center;gap:5px; font:600 10px/1 var(--lvl-font);color:var(--lvl-mut);margin-left:auto} .lvl-bap-key i{width:16px;height:8px;border-radius:2px;display:inline-block} .lvl-bap-key i.k-was{background:var(--lvl-line);border:1px solid var(--lvl-mut-2)} .lvl-bap-key i.k-now{background:var(--lvl-green)} .lvl-bap-key i+i{margin-left:8px} .lvl-bap{display:flex;align-items:flex-start;gap:0;overflow-x:auto; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-card)} .lvl-bap-l{flex:none;width:250px;position:sticky;left:0;z-index:2; background:var(--lvl-card);border-right:1px solid var(--lvl-line)} .lvl-bap-r{height:20px;display:flex;align-items:center;gap:5px;padding-right:8px; font:500 10.5px/20px var(--lvl-font);color:var(--lvl-ink); white-space:nowrap;overflow:hidden} .lvl-bap-r>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .lvl-bap-r>i{width:7px;height:7px;border-radius:50%;flex:none} .lvl-bap-r>u{text-decoration:none;font:700 9px/1 var(--lvl-mono,var(--lvl-font)); color:var(--lvl-mut-2);flex:none} .lvl-bap-r.is-g{font-weight:800;background:var(--lvl-wash);color:var(--lvl-ink-2)} .lvl-bap-r.is-same{opacity:.55} .lvl-bap-t{flex:none} .lvl-bap.is-split{gap:0} .lvl-bap.is-split .lvl-bap-p{flex:none;border-left:1px solid var(--lvl-line)} .lvl-bap.is-split .lvl-bap-p h6{margin:0;padding:5px 8px; font:800 9.5px/1 var(--lvl-font);letter-spacing:.09em;text-transform:uppercase; color:var(--lvl-mut);background:var(--lvl-wash);border-bottom:1px solid var(--lvl-line-2)} .lvl-bap.is-split .lvl-bap-l{padding-top:0} .lvl-bap.is-split .lvl-bap-l::before{content:"";display:block;height:22px; border-bottom:1px solid var(--lvl-line-2);background:var(--lvl-wash)} /* BEFORE reads as before: one flat neutral, no pressure colouring, nothing that could be mistaken for a change. AFTER keeps the module's own marks. */ .lvl-ws-bar.is-was,.lvl-ws-seg.is-was .lvl-ws-bar{fill:var(--lvl-line); stroke:var(--lvl-before);stroke-width:1;stroke-opacity:.7} .lvl-ws-seg.is-was .lvl-ws-seg-c{fill:var(--lvl-line);opacity:.85} .lvl-bap-p h6 em{font-style:normal;font-weight:600;text-transform:none; letter-spacing:0;color:var(--lvl-mut-2);margin-left:6px} .lvl-bap-p.is-now h6{color:var(--lvl-after)} /* a row that changed is the one worth finding in a list of a hundred */ .lvl-bap-r.is-chg:not(.is-g){background:color-mix(in srgb,var(--lvl-after) 7%,transparent)} .lvl-bap-r.is-chg:not(.is-g)>span{font-weight:700;color:var(--lvl-ink)} .lvl-bap-r.is-same:not(.is-g){opacity:.55} /* ══════════════════════════════════════════════════════════════════════ THE CONTROL CENTRE — A COCKPIT One screen, four fixed regions, one stage that changes. The whole shell becomes viewport-height while it is on: nothing here scrolls, because a control surface you have to scroll is a document with buttons on it. min-height:0 on every flex child is what makes that true rather than aspirational — without it a child refuses to shrink below its content and the overflow reappears at the bottom of the page. ══════════════════════════════════════════════════════════════════════ */ .lvl.is-cc{height:calc(100dvh - var(--lvl-cc-top, 0px)); max-height:calc(100dvh - var(--lvl-cc-top, 0px)); display:flex;flex-direction:column;overflow:hidden} .lvl.is-cc>.lvl-main{flex:1 1 auto;min-height:0;overflow:hidden;padding:0} .lvl.is-cc .lvl-foot{flex:0 0 auto} .lvl-cc{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px} /* ── the verdict, and the decision on the same row ────────────────── */ .lvl-cc-verdict{flex:0 0 auto;display:flex;align-items:center;gap:12px; padding:10px 14px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r); background:var(--lvl-card);border-left-width:4px} .lvl-cc-verdict.is-ok{border-left-color:var(--lvl-ok);background:color-mix(in srgb,var(--lvl-ok) 5%,var(--lvl-card))} .lvl-cc-verdict.is-warn{border-left-color:var(--lvl-warn);background:color-mix(in srgb,var(--lvl-warn) 6%,var(--lvl-card))} .lvl-cc-verdict.is-risk{border-left-color:var(--lvl-risk);background:color-mix(in srgb,var(--lvl-risk) 6%,var(--lvl-card))} .lvl-cc-verdict.is-sim{border-left-color:var(--lvl-after);background:color-mix(in srgb,var(--lvl-after) 6%,var(--lvl-card))} .lvl-cc-verdict-i{flex:none;display:flex;color:var(--lvl-mut)} .lvl-cc-verdict.is-ok .lvl-cc-verdict-i{color:var(--lvl-ok)} .lvl-cc-verdict.is-risk .lvl-cc-verdict-i{color:var(--lvl-risk)} .lvl-cc-verdict.is-warn .lvl-cc-verdict-i{color:var(--lvl-warn)} .lvl-cc-verdict.is-sim .lvl-cc-verdict-i{color:var(--lvl-after)} .lvl-cc-verdict-m{flex:1 1 auto;min-width:0} .lvl-cc-verdict-m h2{margin:0;font:800 15px/1.25 var(--lvl-head);color:var(--lvl-ink)} .lvl-cc-verdict-m p{margin:2px 0 0;font:500 11.5px/1.35 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-verdict-a{flex:none;display:flex;gap:6px} /* ── the body: signals down the left, the stage filling the rest ──── */ .lvl-cc-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:236px 1fr;gap:8px} /* ── THE RAIL SIZES TO ITS TEXT AND SCROLLS, IT DOES NOT SLICE IT ──────── The three groups were flex:1 1 0 over a pair of 1fr grid rows, so on a short window the cards took whatever height was left and overflow:hidden cut the labels through the middle. Measured: a card 94px tall on a desktop was 34px on a 1280x720 laptop, against 65px of text — and because the label, the figure and the note are flex children too, they shrank with it and every measurement taken inside the card agreed with itself all the way down. Cards are content-height now and the RAIL is what scrolls, which is what every other list on these boards already does. */ .lvl-cc-rail{min-height:0;display:flex;flex-direction:column;gap:9px; overflow-y:auto;overscroll-behavior:contain} /* three captioned pairs, not six tiles of identical weight — the caption is what turns a column into a reading order */ .lvl-cc-grp{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;gap:4px} .lvl-cc-grp>h6{margin:0;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.13em; text-transform:uppercase;color:var(--lvl-mut-2);padding-left:2px} .lvl-cc-grp>div{flex:0 0 auto;display:grid;grid-template-rows:auto auto;gap:4px; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden;background:var(--lvl-line);gap:1px} .lvl-cc-sig{flex:0 0 auto;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px; border-radius:0!important;border:0!important; padding:7px 10px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-card);cursor:pointer;overflow:hidden; transition:border-color .12s ease,background .12s ease} .lvl-cc-sig>*{flex:0 0 auto} .lvl-cc-sig:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-cc-sig.is-on{box-shadow:inset 3px 0 0 var(--lvl-green)} .lvl-cc-sig.is-on .lvl-cc-sig-l{color:var(--lvl-ink-2)} .lvl-cc-sig-l{font:700 8.5px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-sig-v{font:800 19px/1.05 var(--lvl-head);color:var(--lvl-ink);display:flex;align-items:baseline;gap:1px} .lvl-cc-sig-v i{font-style:normal;font-size:11px;font-weight:700;color:var(--lvl-mut-2)} .lvl-cc-sig.is-ok .lvl-cc-sig-v{color:var(--lvl-ok)} .lvl-cc-sig.is-warn .lvl-cc-sig-v{color:var(--lvl-warn)} .lvl-cc-sig.is-risk .lvl-cc-sig-v{color:var(--lvl-risk)} .lvl-cc-sig-m{display:block;height:3px;border-radius:2px;background:var(--lvl-line);overflow:hidden} .lvl-cc-sig-m>i{display:block;height:100%;background:var(--lvl-mut-2);border-radius:2px} .lvl-cc-sig.is-ok .lvl-cc-sig-m>i{background:var(--lvl-ok)} .lvl-cc-sig.is-warn .lvl-cc-sig-m>i{background:var(--lvl-warn)} .lvl-cc-sig.is-risk .lvl-cc-sig-m>i{background:var(--lvl-risk)} .lvl-cc-sig-n{font-style:normal;font:500 10px/1.25 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-stage{min-height:0;display:flex;flex-direction:column; border:1px solid var(--lvl-line);border-radius:var(--lvl-r);background:var(--lvl-card);overflow:hidden} .lvl-cc-tabs{flex:0 0 auto;display:flex;gap:0;border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-cc-tab{flex:1 1 0;min-width:0;text-align:left;padding:7px 12px;border:0;border-right:1px solid var(--lvl-line-2); background:none;cursor:pointer;position:relative} .lvl-cc-tab:last-child{border-right:0} .lvl-cc-tab b{display:block;font:700 11.5px/1.2 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-tab em{display:block;font-style:normal;font:500 9.5px/1.25 var(--lvl-font);color:var(--lvl-mut-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-tab b{display:flex;align-items:center;gap:5px} .lvl-cc-tab-n{text-decoration:none;flex:none;min-width:15px;height:15px;padding:0 4px; display:inline-flex;align-items:center;justify-content:center;border-radius:8px; background:var(--lvl-line);color:var(--lvl-mut); font:800 9px/1 var(--lvl-mono,var(--lvl-font))} .lvl-cc-tab-n.is-risk{background:color-mix(in srgb,var(--lvl-risk) 16%,transparent);color:var(--lvl-risk)} .lvl-cc-tab:hover b{color:var(--lvl-ink)} .lvl-cc-tab.is-on{background:var(--lvl-card)} .lvl-cc-tab.is-on b{color:var(--lvl-ink)} .lvl-cc-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lvl-green)} .lvl-cc-board{flex:1 1 auto;min-height:0;overflow:hidden;padding:10px 12px} /* ── board: the curve ─────────────────────────────────────────────── */ .lvl-cc-curve{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px} .lvl-cc-curve-hd{flex:0 0 auto;display:flex;gap:12px;align-items:stretch} .lvl-cc-score{flex:none;width:112px;display:flex;flex-direction:column;justify-content:center; padding:8px 10px;border-radius:var(--lvl-r-s);border:1px solid var(--lvl-line)} .lvl-cc-score b{font:800 30px/1 var(--lvl-head)} .lvl-cc-score i{font-style:normal;font:700 11px/1 var(--lvl-font);color:var(--lvl-mut-2)} .lvl-cc-score em{font-style:normal;font:700 10px/1.2 var(--lvl-font);text-transform:uppercase; letter-spacing:.07em;margin-top:3px} .lvl-cc-score u{text-decoration:none;font-size:10px;margin-top:3px} .lvl-cc-score.is-good{background:color-mix(in srgb,var(--lvl-ok) 8%,var(--lvl-card));border-color:color-mix(in srgb,var(--lvl-ok) 35%,var(--lvl-line))} .lvl-cc-score.is-good b,.lvl-cc-score.is-good em{color:var(--lvl-ok)} .lvl-cc-score.is-mid{background:color-mix(in srgb,var(--lvl-warn) 9%,var(--lvl-card));border-color:color-mix(in srgb,var(--lvl-warn) 35%,var(--lvl-line))} .lvl-cc-score.is-mid b,.lvl-cc-score.is-mid em{color:var(--lvl-warn)} .lvl-cc-score.is-bad{background:color-mix(in srgb,var(--lvl-risk) 8%,var(--lvl-card));border-color:color-mix(in srgb,var(--lvl-risk) 35%,var(--lvl-line))} .lvl-cc-score.is-bad b,.lvl-cc-score.is-bad em{color:var(--lvl-risk)} .lvl-cc-meters{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--lvl-line);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-cc-meter{background:var(--lvl-card);padding:7px 9px;min-width:0} .lvl-cc-meter span{display:block;font:700 8.5px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.07em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-meter b{display:block;font:800 16px/1.15 var(--lvl-head);margin-top:3px} .lvl-cc-meter.is-ok b{color:var(--lvl-ok)} .lvl-cc-meter.is-bad b{color:var(--lvl-risk)} .lvl-cc-meter em{display:block;font-style:normal;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut);margin-top:2px} .lvl-cc-curve-art{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding-right:4px;display:block; border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s);background:var(--lvl-wash);padding:6px 8px 4px} .lvl-cc-foot{flex:0 0 auto;margin:0;font:500 10.5px/1.35 var(--lvl-font);color:var(--lvl-mut)} /* ── board: the crews ─────────────────────────────────────────────── */ .lvl-cc-crews{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px} .lvl-cc-crews-h{flex:0 0 auto;display:flex;align-items:baseline;gap:8px} .lvl-cc-crews-h b{font:700 12px/1 var(--lvl-font);color:var(--lvl-ink)} .lvl-cc-crews-h span{font:500 10px/1 var(--lvl-font);color:var(--lvl-mut-2);flex:1 1 auto} /* the trades that are OVER are the ones that must be on screen without reaching for a scrollbar; the rest of the board is the work they cause */ .lvl-cc-crews-l{flex:0 1 auto;min-height:0;max-height:52%; overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px} .lvl-cc-crews-l{gap:2px} .lvl-cc-crew{flex:0 0 auto;display:grid; grid-template-columns:10px minmax(84px,1fr) minmax(80px,1.5fr) 74px minmax(180px,3fr) 96px; align-items:center;gap:9px;padding:5px 6px;border:0;border-radius:4px;background:none; cursor:pointer;text-align:left;width:100%} /* WHEN each trade breaches, on one shared axis — three crews breaching the same month is a sequencing problem, and it is invisible as three sentences */ .lvl-cc-when{position:relative;display:block;height:11px;border-radius:3px; background:var(--lvl-wash);border:1px solid var(--lvl-line-2);overflow:hidden} .lvl-cc-when>i{position:absolute;top:0;bottom:0;background:var(--lvl-risk);opacity:.85;border-radius:1px} .lvl-cc-when.is-clear{background:var(--lvl-line);opacity:.35;border-color:transparent} .lvl-cc-crews-f{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding-top:5px;margin-top:2px; border-top:1px dashed var(--lvl-line-2)} .lvl-cc-crews-f span{font:600 9px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut-2)} .lvl-cc-crews-f em{flex:1 1 auto;text-align:center;font-style:normal; font:500 9.5px/1 var(--lvl-font);color:var(--lvl-mut-2)} .lvl-cc-crew:hover{background:var(--lvl-wash)} .lvl-cc-crew.is-over{background:color-mix(in srgb,var(--lvl-risk) 5%,transparent)} .lvl-cc-crew.is-over:hover{background:color-mix(in srgb,var(--lvl-risk) 10%,transparent)} .lvl-cc-crew-d{width:8px;height:8px;border-radius:50%} .lvl-cc-crew-n{font:600 11px/1.2 var(--lvl-font);color:var(--lvl-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-crew-b{position:relative;height:9px;border-radius:5px;background:var(--lvl-line);overflow:visible} .lvl-cc-crew-b>i{position:absolute;inset:0 auto 0 0;border-radius:5px;opacity:.9} .lvl-cc-crew-b>u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--lvl-ink-2);border-radius:1px} .lvl-cc-crew-v{font:800 11.5px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-ink);text-align:right} .lvl-cc-crew.is-over .lvl-cc-crew-v{color:var(--lvl-risk)} .lvl-cc-crew-v em{font-style:normal;font-weight:600;font-size:10px;color:var(--lvl-mut-2)} .lvl-cc-crew-x{font:500 10px/1.2 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── board: rules and room ────────────────────────────────────────── */ .lvl-cc-rules{height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .lvl-cc-rules-a,.lvl-cc-rules-b{min-height:0;overflow-y:auto;overscroll-behavior:contain} .lvl-cc-h{display:flex;align-items:center;gap:8px;margin:0 0 6px} .lvl-cc-h b{font:700 11.5px/1 var(--lvl-font);color:var(--lvl-ink);flex:1 1 auto} .lvl-cc-sess{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain} .lvl-cc-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; color:var(--lvl-mut)} .lvl-cc-empty b{font:700 13px/1.2 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-cc-empty span{font:500 11px/1.4 var(--lvl-font);max-width:38ch;text-align:center} /* ── the trades strip: always on screen, worst first ──────────────── */ .lvl-cc-strip{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px; padding:7px 8px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r);background:var(--lvl-card); max-height:66px;overflow:hidden} .lvl-cc-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px; border:1px solid var(--lvl-line);border-radius:12px;background:var(--lvl-card);cursor:pointer} .lvl-cc-chip:hover{border-color:var(--lvl-mut-2);background:var(--lvl-wash)} .lvl-cc-chip i{width:7px;height:7px;border-radius:50%;flex:none} .lvl-cc-chip span{font:600 10.5px/1 var(--lvl-font);color:var(--lvl-ink-2); max-width:12ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-chip b{font:800 10px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut)} .lvl-cc-chip.is-over{border-color:color-mix(in srgb,var(--lvl-risk) 45%,var(--lvl-line)); background:color-mix(in srgb,var(--lvl-risk) 8%,var(--lvl-card))} .lvl-cc-chip.is-over b{color:var(--lvl-risk)} @media (max-width:1180px){ .lvl-cc-body{grid-template-columns:190px 1fr} .lvl-cc-meters{grid-template-columns:repeat(2,1fr)} } /* what is driving the breaches — the board ends on the work, not the reading */ .lvl-cc-drivers{flex:1 1 auto;min-height:0;display:flex;flex-direction:column; margin-top:8px;padding-top:8px;border-top:1px solid var(--lvl-line)} .lvl-cc-drivers-l{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:1px} .lvl-cc-driver{flex:0 0 auto;display:grid; grid-template-columns:9px minmax(140px,3fr) minmax(64px,1fr) 78px 118px 84px; align-items:center;gap:9px;padding:4px 6px;border:0;border-radius:4px;background:none; cursor:pointer;text-align:left;width:100%} .lvl-cc-driver:hover{background:var(--lvl-wash)} .lvl-cc-driver>i{width:8px;height:8px;border-radius:50%} .lvl-cc-driver-n{font:600 11px/1.2 var(--lvl-font);color:var(--lvl-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-driver-r{font:500 10px/1.2 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-driver>b{font:800 11.5px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-ink);text-align:right} .lvl-cc-driver>b em{font-style:normal;font-weight:600;font-size:9.5px;color:var(--lvl-mut-2)} .lvl-cc-driver-d{font:500 10px/1.2 var(--lvl-font);color:var(--lvl-mut)} .lvl-cc-driver-f{font:700 9.5px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-ok);text-align:right} .lvl-cc-driver-f.is-none{color:var(--lvl-risk)} /* ══════════════════════════════════════════════════════════════════════ THE COCKPIT, SECOND PASS Six boards, three of which used to be tabs of their own. The rule that decides every measurement below: the verdict, the rail and the tab row never move, and a board scrolls INSIDE itself — so the window never does. ═══════════════════════════════════════════════════════════════════ */ /* the curve board: the real chart, and the S-curve under it */ .lvl-cc-curve-art .lvl-chart{margin:0 0 4px} .lvl-cc-curve-art .lvl-svg{width:100%;height:auto} .lvl-cc-curve-art .lvl-q-parts{margin-top:4px} /* the profile chart carries its own legend row; a heading that follows it must clear it, or the two are drawn on top of each other */ .lvl-cc-curve-art>.lvl-cc-h{margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--lvl-line-2)} .lvl-cc-curve-art>.lvl-cc-h:first-child{margin-top:0;padding-top:0;border-top:0} .lvl-cc-curve-art .lvl-scale{margin-bottom:2px} .lvl-cc-curve-art .lvl-note{margin:6px 0 2px} /* ── the over-allocation board, split by a selected trade ───────────── */ .lvl-cc-crew.is-on{background:color-mix(in srgb,var(--lvl-green) 10%,transparent); box-shadow:inset 2px 0 0 var(--lvl-green)} .lvl-cc-crews.is-split{display:grid;column-gap:12px;row-gap:5px; grid-template-columns:minmax(280px,33%) 1fr;grid-template-rows:auto 1fr auto; grid-template-areas:"h d" "l d" "f d"} .lvl-cc-crews.is-split>.lvl-cc-crews-h{grid-area:h} .lvl-cc-crews.is-split>.lvl-cc-crews-l{grid-area:l;max-height:none} .lvl-cc-crews.is-split>.lvl-cc-crews-f{grid-area:f} .lvl-cc-crews.is-split>.lvl-cc-rd{grid-area:d;min-height:0} .lvl-cc-crews.is-split .lvl-cc-crews-h span, .lvl-cc-crews.is-split .lvl-cc-crews-h .lvl-link{display:none} .lvl-cc-crews.is-split .lvl-cc-crew{grid-template-columns:10px minmax(70px,1fr) minmax(50px,1.1fr) 62px} .lvl-cc-crews.is-split .lvl-cc-when, .lvl-cc-crews.is-split .lvl-cc-crew-x, .lvl-cc-crews.is-split .lvl-cc-crews-f em{display:none} .lvl-cc-crews.is-split>.lvl-cc-crews-f{justify-content:space-between} /* ── the trade, in place ────────────────────────────────────────────── */ .lvl-cc-rd{min-height:0;display:flex;flex-direction:column; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-card);overflow:hidden} .lvl-cc-rd-h{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px; border-bottom:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-cc-rd-h>i{width:9px;height:9px;border-radius:50%;flex:none} .lvl-cc-rd-h>b{font:800 13px/1.2 var(--lvl-head);color:var(--lvl-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch} .lvl-cc-rd-h>em{flex:1 1 auto;min-width:0;font-style:normal;font:500 10px/1.3 var(--lvl-font); color:var(--lvl-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-rd-b{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(240px,42%) 1fr;gap:0} .lvl-cc-rd-l{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px; border-right:1px solid var(--lvl-line)} .lvl-cc-rd-r{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px; display:flex;flex-direction:column} .lvl-cc-rd-k{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lvl-line); border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden;margin-bottom:9px} .lvl-cc-rd-k>div{background:var(--lvl-card);padding:6px 8px} .lvl-cc-rd-k span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-rd-k b{display:block;font:800 17px/1.1 var(--lvl-head);color:var(--lvl-ink);margin-top:3px} .lvl-cc-rd-k b.is-risk{color:var(--lvl-risk)} .lvl-cc-rd-f{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:9px} .lvl-cc-fld{display:flex;flex-direction:column;gap:3px;min-width:0} .lvl-cc-fld>span{font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-fld>em{font-style:normal;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut-2)} .lvl-cc-fld .lvl-num,.lvl-cc-fld .lvl-sel-s{width:100%} .lvl-cc-rd-w{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .lvl-cc-rd-w>li{display:grid;grid-template-columns:1fr 64px 52px;align-items:center;gap:8px; padding:4px 6px;border-radius:4px;background:color-mix(in srgb,var(--lvl-risk) 6%,transparent)} .lvl-cc-rd-w time{font:600 10px/1.2 var(--lvl-mono,var(--lvl-font));color:var(--lvl-ink-2)} .lvl-cc-rd-w b{font:800 11px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-risk);text-align:right} .lvl-cc-rd-w b em{font-style:normal;font-weight:600;font-size:9.5px;color:var(--lvl-mut-2)} .lvl-cc-rd-w span{font:500 9.5px/1.2 var(--lvl-font);color:var(--lvl-mut);text-align:right} .lvl-cc-rd-r .lvl-cc-drivers{margin-top:8px} /* the drivers list is drawn for a full board; inside the trade pane it has half the width, so it drops the columns it can afford to lose rather than running its rows off the edge */ .lvl-cc-rd-r .lvl-cc-driver{grid-template-columns:9px minmax(110px,2.6fr) minmax(36px,1fr) 60px 84px 58px;gap:7px} .lvl-cc-rd-r .lvl-cc-driver-g{display:none} .lvl-cc-rd-r .lvl-cc-driver-d,.lvl-cc-rd-r .lvl-cc-driver-f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── the drivers, with a share bar and a date ───────────────────────── */ .lvl-cc-driver{grid-template-columns:9px minmax(150px,3fr) minmax(60px,1.3fr) 74px 106px 74px 16px} .lvl-cc-driver-n u{display:block;text-decoration:none;font:500 9.5px/1.3 var(--lvl-font); color:var(--lvl-mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-driver-s{position:relative;display:block;height:6px;border-radius:3px; background:var(--lvl-line);overflow:hidden} .lvl-cc-driver-s>i{position:absolute;inset:0 auto 0 0;border-radius:3px;opacity:.85} .lvl-cc-driver-g{display:flex;justify-content:flex-end;color:var(--lvl-mut-2);opacity:0;transition:opacity .12s} .lvl-cc-driver:hover .lvl-cc-driver-g{opacity:1} /* ── the brief ──────────────────────────────────────────────────────── */ .lvl-cc-lead{margin:0 0 7px;font:600 12px/1.4 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-cc-h span{flex:1 1 auto;min-width:0;font:500 10px/1.3 var(--lvl-font);color:var(--lvl-mut-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-h.is-lead{padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--lvl-line)} .lvl-cc-h.is-lead b{font:800 14px/1.2 var(--lvl-head);flex:none} /* how much room the brief grants, before the chart of how it is spread */ .lvl-cc-room{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lvl-line); border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden;margin-bottom:10px} .lvl-cc-room>div{background:var(--lvl-card);padding:7px 10px;border-top:2px solid transparent} .lvl-cc-room>div.is-ok{border-top-color:var(--lvl-ok)} .lvl-cc-room>div.is-warn{border-top-color:var(--lvl-warn)} .lvl-cc-room>div.is-risk{border-top-color:var(--lvl-risk)} .lvl-cc-room span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-room b{display:block;font:800 16px/1.15 var(--lvl-head);color:var(--lvl-ink);margin-top:3px} .lvl-cc-room b i{font-style:normal;font-size:11px;font-weight:700;color:var(--lvl-mut-2)} .lvl-cc-room>div.is-warn b{color:var(--lvl-warn)} .lvl-cc-room>div.is-risk b{color:var(--lvl-risk)} .lvl-cc-room em{display:block;font-style:normal;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut);margin-top:2px} /* ── the utilisation ladder ─────────────────────────────────────────── */ .lvl-cc-strip{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;max-height:none; padding:7px 9px 8px;border:1px solid var(--lvl-line);border-radius:var(--lvl-r);background:var(--lvl-card)} .lvl-cc-strip-h{display:flex;align-items:baseline;gap:8px} .lvl-cc-strip-h b{font:700 10px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-strip-h em{font-style:normal;font:700 10.5px/1 var(--lvl-font);color:var(--lvl-ink-2)} .lvl-cc-strip-h u{text-decoration:none;flex:1 1 auto;text-align:right; font:500 9.5px/1 var(--lvl-font);color:var(--lvl-mut-2)} .lvl-cc-strip-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:2px 14px; max-height:74px;overflow-y:auto;overscroll-behavior:contain} .lvl-cc-chip{display:grid;grid-template-columns:minmax(88px,1.1fr) minmax(44px,1.2fr) 34px; align-items:center;gap:7px;height:20px;padding:0 4px;border:0;border-radius:4px; background:none;cursor:pointer;text-align:left} .lvl-cc-chip:hover{background:var(--lvl-wash)} .lvl-cc-chip.is-on{background:color-mix(in srgb,var(--lvl-green) 12%,transparent)} .lvl-cc-chip-n{display:flex;align-items:center;gap:5px;min-width:0; font:600 10px/1 var(--lvl-font);color:var(--lvl-ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-chip-n i{width:6px;height:6px;border-radius:50%;flex:none} .lvl-cc-chip-b{position:relative;display:block;height:6px;border-radius:3px; background:var(--lvl-line);overflow:visible} .lvl-cc-chip-b>i{position:absolute;inset:0 auto 0 0;border-radius:3px;opacity:.9} .lvl-cc-chip-b>u{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--lvl-ink-2);border-radius:1px} .lvl-cc-chip>b{font:800 10px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut);text-align:right} .lvl-cc-chip.is-over>b{color:var(--lvl-risk)} .lvl-cc-chip.is-over .lvl-cc-chip-n{color:var(--lvl-ink)} @media (max-width:1240px){ .lvl-cc-rd-b{grid-template-columns:1fr} .lvl-cc-rd-l{border-right:0;border-bottom:1px solid var(--lvl-line)} .lvl-cc-crews.is-split{grid-template-columns:minmax(240px,38%) 1fr} .lvl-cc-2{grid-template-columns:1fr} .lvl-cc-hist-k{grid-template-columns:repeat(2,1fr)} } /* ══════════════════════════════════════════════════════════════════════ THE COCKPIT, THIRD PASS — the boards that were "weak" The rule everywhere below: a board never scrolls vertically. Where it has more to say than fits, it says it one pane at a time and you step sideways. ═══════════════════════════════════════════════════════════════════ */ /* ── STEPPING BETWEEN PICTURES, UNDER THE PICTURE ───────────────────── A full-width row of labelled panes directly beneath the board's own tab row read as a second set of tabs, and two tab rows stacked is a page that looks like it has twelve destinations when it has five. This is one small control, under the chart where the thing it changes is, and it says which of how many you are looking at. */ .lvl-cc-flip{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:5px 2px 0} .lvl-cc-flip-b{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center; border:1px solid var(--lvl-line);border-radius:6px;background:var(--lvl-card); color:var(--lvl-mut);cursor:pointer} .lvl-cc-flip-b:hover{border-color:var(--lvl-mut-2);color:var(--lvl-ink);background:var(--lvl-wash)} .lvl-cc-flip-l{flex:1 1 auto;min-width:0} .lvl-cc-flip-l b{display:block;font:700 12px/1.2 var(--lvl-font);color:var(--lvl-ink)} .lvl-cc-flip-l em{display:block;font-style:normal;font:500 10px/1.3 var(--lvl-font);color:var(--lvl-mut-2);margin-top:1px} .lvl-cc-flip-n{flex:none;display:flex;gap:4px;align-items:center} .lvl-cc-flip-n>i{width:6px;height:6px;border-radius:50%;background:var(--lvl-line);cursor:pointer; border:0;padding:0;display:block} .lvl-cc-flip-n>i.is-on{background:var(--lvl-green)} .lvl-cc-flip>.lvl-link{flex:none} /* the session board keeps a labelled row: its four panes are four different questions, not four views of one picture, so naming them earns the space */ .lvl-cc-steps{flex:0 0 auto;display:flex;align-items:stretch;gap:1px;margin:8px 0 8px; background:var(--lvl-line);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-cc-step{flex:1 1 0;min-width:0;text-align:left;padding:6px 11px;border:0;cursor:pointer; background:var(--lvl-wash);position:relative} .lvl-cc-step b{display:block;font:700 11.5px/1.2 var(--lvl-font);color:var(--lvl-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-step em{display:block;font-style:normal;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .lvl-cc-step:hover{background:var(--lvl-card)} .lvl-cc-step.is-on{background:var(--lvl-card)} .lvl-cc-step.is-on b{color:var(--lvl-ink)} .lvl-cc-step.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lvl-green)} .lvl-cc-step.is-bad.is-on::after{background:var(--lvl-risk)} .lvl-cc-step.is-bad b{color:var(--lvl-risk)} /* ── the curve board: one picture, full height, no scroll ───────────── AND A FLOOR UNDER IT, BECAUSE `min-height:0` GOES ALL THE WAY DOWN. The picture is a flex child of a flex child, every level carrying `min-height:0` so the board can shrink — and the svg's own height is 100% of that. Three levels of "you may be zero" means the picture IS zero the moment anything above it grows: an extra advisory line, a shortfall banner and an effort line that wraps to three, and the chart collapsed to a sliver pinned to the left of an empty box. It reads as "the curve is gone", which is what it looked like on a real board. The score, the meters and the advisories are all things a planner can scroll past. The picture is the one thing on this board that cannot be allowed to disappear, so it gets a floor. The layout still gives it every pixel that is going spare; it just may not give it none. */ .lvl-cc-curve-art{flex:1 1 auto;min-height:220px;overflow:hidden;display:flex;flex-direction:column; margin-top:8px;border:1px solid var(--lvl-line-2);border-radius:var(--lvl-r-s); background:var(--lvl-wash);padding:6px 8px} .lvl-cc-curve-art .lvl-chart{flex:1 1 auto;min-height:200px;margin:0;overflow:hidden;display:flex;align-items:center} .lvl-cc-curve-art .lvl-svg{width:100%;height:100%;min-height:190px;max-height:100%} .lvl-cc-curve-art .lvl-scale{flex:0 0 auto} /* ── the ceilings register, read down a column ──────────────────────── */ .lvl-cc-lim{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px} .lvl-cc-lim-h{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px} .lvl-cc-lim-h b{font:700 12.5px/1.2 var(--lvl-font);color:var(--lvl-ink)} .lvl-cc-lim-h span{font:500 10px/1.3 var(--lvl-font);color:var(--lvl-mut-2);flex:1 1 auto;min-width:0} .lvl-cc-lim-hd,.lvl-cc-lrow{display:grid; grid-template-columns:minmax(130px,1.4fr) minmax(160px,2.1fr) 68px 78px 82px minmax(100px,1fr) 58px; gap:10px;align-items:center} /* the three numbers that MAKE the ceiling belong together and say so */ .lvl-cc-lim-hd i.g{color:var(--lvl-ink-2)} .lvl-cc-lim-hd i.g1{border-left:1px solid var(--lvl-line);padding-left:8px;margin-left:-8px} .lvl-cc-lim-hd{flex:0 0 auto;padding:0 8px 5px;border-bottom:1px solid var(--lvl-line)} .lvl-cc-lim-hd i{font-style:normal;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-lim-hd i.n{text-align:right} .lvl-cc-lim-l{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:1px;padding-right:2px} .lvl-cc-lrow{flex:0 0 auto;padding:5px 8px;border-radius:5px;border-left:3px solid transparent} .lvl-cc-lrow:hover{background:var(--lvl-wash)} .lvl-cc-lrow.is-over{background:color-mix(in srgb,var(--lvl-risk) 5%,transparent);border-left-color:var(--lvl-risk)} .lvl-cc-lrow.is-on{box-shadow:inset 0 0 0 1px var(--lvl-green)} .lvl-cc-lname{display:flex;align-items:center;gap:7px;min-width:0;border:0;background:none; cursor:pointer;text-align:left;padding:0;flex-wrap:wrap} .lvl-cc-lname>i{width:8px;height:8px;border-radius:50%;flex:none} .lvl-cc-lname>b{font:700 11.5px/1.2 var(--lvl-font);color:var(--lvl-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .lvl-cc-lname>em{flex:1 0 100%;font-style:normal;font:500 9.5px/1.2 var(--lvl-font);color:var(--lvl-mut-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:15px} .lvl-cc-lrow.is-over .lvl-cc-lname>em{color:var(--lvl-risk)} .lvl-cc-lbar{display:grid;grid-template-columns:1fr 62px 40px;gap:8px;align-items:center;min-width:0} .lvl-cc-lbar>u{text-decoration:none;position:relative;display:block;height:9px;border-radius:5px; background:var(--lvl-line);overflow:visible} .lvl-cc-lbar>u>i{position:absolute;inset:0 auto 0 0;border-radius:5px;opacity:.9} .lvl-cc-lbar>u>s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--lvl-ink-2);border-radius:1px} .lvl-cc-lbar>b{font:800 11.5px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-ink);text-align:right} .lvl-cc-lbar>b em{font-style:normal;font-weight:600;font-size:10px;color:var(--lvl-mut-2)} .lvl-cc-lpct{font:800 11px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut);text-align:right} .lvl-cc-lpct.is-over{color:var(--lvl-risk)} .lvl-cc-lrow .lvl-num{width:100%;text-align:right} .lvl-cc-lsrc{min-width:0} .lvl-cc-lsrc em{display:block;font-style:normal;font:500 9px/1.2 var(--lvl-font);color:var(--lvl-mut-2);margin-top:2px} /* ── this session: the decision on top, the evidence behind it ──────── */ .lvl-cc-sess{height:100%;min-height:0;display:flex;flex-direction:column} .lvl-cc-sess-h{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:9px 11px; border:1px solid color-mix(in srgb,var(--lvl-after) 35%,var(--lvl-line));border-radius:var(--lvl-r-s); background:color-mix(in srgb,var(--lvl-after) 6%,var(--lvl-card))} .lvl-cc-sess-h.is-blocked{border-color:color-mix(in srgb,var(--lvl-risk) 40%,var(--lvl-line)); background:color-mix(in srgb,var(--lvl-risk) 7%,var(--lvl-card))} .lvl-cc-sess-h>i{flex:none;display:flex;color:var(--lvl-after)} .lvl-cc-sess-h.is-blocked>i{color:var(--lvl-risk)} .lvl-cc-sess-h>div{flex:1 1 auto;min-width:0} .lvl-cc-sess-h b{display:block;font:800 14px/1.2 var(--lvl-head);color:var(--lvl-ink)} .lvl-cc-sess-h em{display:block;font-style:normal;font:500 11px/1.4 var(--lvl-font);color:var(--lvl-mut);margin-top:2px} .lvl-cc-sess-a{flex:none;display:flex;gap:6px;align-items:center} .lvl-cc-sess-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px} .lvl-cc-sess-b>*{margin-bottom:9px} .lvl-cc-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start} .lvl-cc-1{display:flex;flex-direction:column;gap:10px} .lvl-cc-3 h5,.lvl-cc-2 h5{margin:0 0 5px;font:700 10.5px/1 var(--lvl-font);color:var(--lvl-mut); text-transform:uppercase;letter-spacing:.05em} /* ── the change log: four facts and two buttons ─────────────────────── */ .lvl-cc-hist{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px} .lvl-cc-hist-k{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--lvl-line);border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);overflow:hidden} .lvl-cc-hist-k>div{background:var(--lvl-card);padding:7px 10px} .lvl-cc-hist-k span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-hist-k b{display:block;font:800 20px/1.1 var(--lvl-head);color:var(--lvl-ink);margin-top:3px} .lvl-cc-hist-k b.is-warn{color:var(--lvl-warn)} .lvl-cc-hist-k b.is-date{font-size:14px;font-family:var(--lvl-mono,var(--lvl-head))} .lvl-cc-hist-k em{display:block;font-style:normal;font:500 9.5px/1.3 var(--lvl-font); color:var(--lvl-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-hist-k .lvl-link{margin-top:3px;font-size:9.5px} .lvl-cc-hist-l{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:6px;padding-right:4px} /* ── WHY EVERY LOG ENTRY RENDERED AS AN EMPTY STRIPE ───────────────── A flex column shrinks its children to fit before it will scroll, and the default flex-shrink is 1. With twenty-one entries in a 500px board every article was squashed to 21px against its own 42px header, and overflow hidden did the rest: twenty-one blank white bars, every one of them a correctly-rendered entry nobody could see. The rule for every scrolling list in this file: the rows keep their height and the CONTAINER scrolls. */ .lvl-cc-ent{flex:0 0 auto;border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s); background:var(--lvl-card);border-left:3px solid var(--lvl-ok);overflow:hidden} .lvl-cc-ent.is-off{border-left-color:var(--lvl-mut-2);opacity:.72} .lvl-cc-ent-h{display:flex;align-items:center;gap:9px;padding:7px 10px;flex-wrap:wrap} .lvl-cc-ent-h time{font:600 9.5px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut-2);flex:none} .lvl-cc-ent-h>b{font:700 12.5px/1.2 var(--lvl-font);color:var(--lvl-ink);flex:1 1 auto;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-ent-a{flex:none;display:flex;gap:5px} .lvl-cc-ent-m{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--lvl-line); border-top:1px solid var(--lvl-line)} .lvl-cc-fact{background:var(--lvl-card);padding:6px 10px} .lvl-cc-fact span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-fact b{display:block;font:700 12px/1.2 var(--lvl-font);color:var(--lvl-ink);margin-top:3px} .lvl-cc-fact.is-good b{color:var(--lvl-ok)} .lvl-cc-fact.is-bad b{color:var(--lvl-warn)} .lvl-cc-ent-d{padding:9px 10px;border-top:1px solid var(--lvl-line);background:var(--lvl-wash)} .lvl-cc-ent-x{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 14px;margin-bottom:9px} .lvl-cc-ent-x span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-cc-ent-x b{display:block;font:500 10.5px/1.35 var(--lvl-font);color:var(--lvl-ink-2);margin-top:2px} .lvl-cc-mt{max-height:210px;overflow:auto;overscroll-behavior:contain; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-card);margin-bottom:8px} .lvl-cc-mt table{width:100%} .lvl-cc-mt thead th{position:sticky;top:0;z-index:2;background:var(--lvl-wash)} /* ── the room, and the float ladder under it ────────────────────────── */ .lvl-cc-ladder{display:flex;flex-direction:column;gap:2px;margin-bottom:9px} .lvl-cc-rung{flex:0 0 auto;display:grid;grid-template-columns:46px minmax(70px,1.3fr) minmax(150px,2fr) 42px; gap:10px;align-items:center;padding:6px 8px;border:0;border-radius:5px;background:none; cursor:pointer;text-align:left;border-left:3px solid var(--lvl-line-2)} .lvl-cc-rung:hover{background:var(--lvl-wash)} .lvl-cc-rung.is-risk{border-left-color:var(--lvl-risk)} .lvl-cc-rung.is-warn{border-left-color:var(--lvl-warn)} .lvl-cc-rung.is-ok{border-left-color:var(--lvl-ok)} .lvl-cc-rung.is-good{border-left-color:var(--lvl-after)} .lvl-cc-rung>b{font:800 17px/1 var(--lvl-head);color:var(--lvl-ink);text-align:right} .lvl-cc-rung.is-risk>b{color:var(--lvl-risk)} .lvl-cc-rung>u{text-decoration:none;display:block;height:8px;border-radius:4px;background:var(--lvl-line);overflow:hidden} .lvl-cc-rung>u>i{display:block;height:100%;border-radius:4px;background:var(--lvl-mut-2)} .lvl-cc-rung.is-risk>u>i{background:var(--lvl-risk)} .lvl-cc-rung.is-warn>u>i{background:var(--lvl-warn)} .lvl-cc-rung.is-ok>u>i{background:var(--lvl-ok)} .lvl-cc-rung.is-good>u>i{background:var(--lvl-after)} .lvl-cc-rung>span{font:600 11px/1.2 var(--lvl-font);color:var(--lvl-ink-2);min-width:0} .lvl-cc-rung>span em{display:block;font-style:normal;font:500 9.5px/1.25 var(--lvl-font); color:var(--lvl-mut-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lvl-cc-rung>s{text-decoration:none;text-align:right;font:700 10px/1 var(--lvl-mono,var(--lvl-font));color:var(--lvl-mut-2)} .lvl-cc-room-f{margin:0;font:500 10.5px/1.5 var(--lvl-font);color:var(--lvl-mut)} /* the bars nothing holds -------------------------------------------------- */ .lvl-loose{display:flex;flex-direction:column;gap:5px;margin-top:8px} .lvl-loose-r{flex:0 0 auto;display:grid; grid-template-columns:minmax(120px,1.5fr) minmax(140px,2fr) auto; gap:9px;align-items:center;padding:7px 9px;border-radius:8px; border:1px solid var(--lvl-line);background:var(--lvl-card)} .lvl-loose-n{display:block;min-width:0;text-align:left;padding:0;border:0; background:none;cursor:pointer} .lvl-loose-n>b{display:block;font:600 11px/1.25 var(--lvl-font);color:var(--lvl-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-loose-n>em{display:block;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut-2); font-style:normal;margin-top:2px} .lvl-loose-n:hover>b{color:var(--lvl-info)} .lvl-loose-s{min-width:0} .lvl-loose-s>span{display:block;font:600 9px/1 var(--lvl-font);color:var(--lvl-mut-2); letter-spacing:.06em;text-transform:uppercase} .lvl-loose-s>b{display:block;font:600 11px/1.25 var(--lvl-font);color:var(--lvl-ink); margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl-loose-s>em{display:block;font:500 9.5px/1.35 var(--lvl-font);color:var(--lvl-mut); font-style:normal;margin-top:2px} @media (max-width:900px){ .lvl-loose-r{grid-template-columns:1fr auto} .lvl-loose-s{grid-column:1/-1} } @media (max-width:1240px){ .lvl-cc-3{grid-template-columns:1fr} .lvl-cc-ent-m{grid-template-columns:repeat(3,1fr)} .lvl-cc-lim-hd,.lvl-cc-lrow{grid-template-columns:minmax(120px,1.4fr) minmax(140px,2fr) 50px 54px 58px 0 56px} .lvl-cc-lim-hd i:nth-child(6),.lvl-cc-lsrc{display:none} } /* the back arrow is the same glyph, turned round */ .lvl-cc-flip-b.is-back .lvl-ic{transform:rotate(180deg)} /* two-line column captions in the register header */ .lvl-cc-lim-hd i{line-height:1.25} /* ── the dates, all of them, in one block ───────────────────────────── */ .lvl-dates{display:flex;flex-direction:column;gap:8px;padding:10px;margin-bottom:4px; border:1px solid var(--lvl-line);border-radius:var(--lvl-r-s);background:var(--lvl-wash)} .lvl-dates-r{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px} .lvl-dates-f{display:flex;flex-direction:column;gap:3px;min-width:0} .lvl-dates-f>span{font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-dates-f>em{font-style:normal;font:500 9.5px/1.3 var(--lvl-font);color:var(--lvl-mut-2)} .lvl-dates-now{margin-left:auto;text-align:right} .lvl-dates-now span{display:block;font:700 8px/1 var(--lvl-mono,var(--lvl-font));letter-spacing:.09em; text-transform:uppercase;color:var(--lvl-mut-2)} .lvl-dates-now b{display:block;font:800 15px/1.2 var(--lvl-head);color:var(--lvl-ink);margin-top:3px} /* an apply the validator refused, named so it can be acted on ------------- */ .lvl-blockapply{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;padding:10px 12px} .lvl-blockapply-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lvl-blockapply-h>b{font:700 12px/1.3 var(--lvl-font);color:var(--lvl-risk)} .lvl-blockapply-h>span{flex:1 1 auto;font:500 10px/1.35 var(--lvl-font);color:var(--lvl-mut)} .lvl-blockapply-l{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto; overscroll-behavior:contain} .lvl-blockapply-r{flex:0 0 auto;padding:5px 8px;border-radius:6px;background:var(--lvl-card); border:1px solid var(--lvl-line)} .lvl-blockapply-r>b{display:block;font:600 10.5px/1.35 var(--lvl-font);color:var(--lvl-ink)} .lvl-blockapply-r>em{display:block;font:500 9.5px/1.3 var(--lvl-mono,var(--lvl-font)); color:var(--lvl-mut-2);font-style:normal;margin-top:2px} .lvl-blockapply>.lvl-btn{align-self:flex-start} .lvl-blockapply-n{font:500 10px/1.4 var(--lvl-font);color:var(--lvl-mut)} /* the banner a long search paints before it blocks the screen ------------ */ .lvl-searching{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:60; max-width:min(460px,88vw);display:flex;flex-direction:column;gap:5px; padding:14px 18px;border-radius:var(--lvl-r);border:1px solid var(--lvl-line); background:var(--lvl-card);box-shadow:var(--lvl-sh-2);text-align:center} .lvl-searching>b{font:700 12.5px/1.3 var(--lvl-head);color:var(--lvl-ink)} .lvl-searching>span{font:500 10.5px/1.5 var(--lvl-font);color:var(--lvl-mut)} /* ══ SMALL SCREENS AND PHONES ═══════════════════════════════════════════ The cockpit's smallest breakpoint was 900px, so below that there was no layout at all — just a desktop one clipped. Measured on the control centre before this existed: phone 390x844 curve chart overhangs by 779px crews rows overhang by 406px limits board 36 controls entirely off screen rules board 11 controls entirely off screen tablet 768x1024 crews and rules already overhanging Nothing scrolled sideways to reach them — the shell clipped, so the content was simply unreachable. Below 1024 the cockpit stops pretending to be two columns; below 720 every wide row becomes a stack, and the charts scroll inside their own box rather than off the side of the page. */ @media (max-width:1024px){ /* the rail stops being a column and becomes a band above the board */ .lvl-cc-body{grid-template-columns:1fr;grid-template-rows:auto 1fr} .lvl-cc-rail{flex-direction:row;flex-wrap:wrap;gap:6px;overflow:visible;max-height:none} .lvl-cc-grp{flex:1 1 210px;min-width:0} .lvl-cc-meters{grid-template-columns:repeat(2,1fr)} .lvl-cc-rules{grid-template-columns:1fr} .lvl-cc-crews.is-split{grid-template-columns:1fr;grid-template-rows:auto auto 1fr} .lvl-cc-rd-b{grid-template-columns:1fr} .lvl-cc-strip-l{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} } @media (max-width:720px){ /* one column, and the board is allowed to be as tall as it needs */ .lvl.is-cc{height:auto;min-height:0} .lvl-cc-body{display:flex;flex-direction:column;gap:10px} .lvl-cc-board,.lvl-cc-stage{min-height:0;overflow:visible} /* nowrap matters: the band above inherits flex-wrap:wrap, and a WRAPPING COLUMN lays its items out in further columns to the right — which is precisely the 146px of unreachable content this was measured at */ .lvl-cc-rail{flex-direction:column;flex-wrap:nowrap} .lvl-cc-grp{flex:0 0 auto} .lvl-cc-meters{grid-template-columns:1fr} .lvl-cc-strip-l{grid-template-columns:1fr} /* every wide row stacks: the label and figure on one line, the bar under */ .lvl-cc-crew,.lvl-cc-driver,.lvl-cc-chip,.lvl-cc-lrow{ grid-template-columns:1fr auto!important;gap:4px 8px} .lvl-cc-crew>*,.lvl-cc-driver>*,.lvl-cc-chip>*,.lvl-cc-lrow>*{min-width:0} .lvl-cc-when,.lvl-cc-driver-s,.lvl-cc-chip-b{grid-column:1/-1} .lvl-cc-room,.lvl-cc-rd-k,.lvl-cc-rd-f{grid-template-columns:1fr} .lvl-cc-rd-w>li{grid-template-columns:1fr auto} /* charts scroll inside their own box instead of off the side of the page */ .lvl-cc-curve,.lvl-cc-board svg,.lvl-ws-wrap,.lvl-ba{max-width:100%} .lvl-cc-board>div,.lvl-cc-curve{overflow-x:auto;overscroll-behavior-x:contain} .lvl-cc-tabs{overflow-x:auto;overscroll-behavior-x:contain;flex-wrap:nowrap} .lvl-cc-tab{flex:0 0 auto} /* the verdict and its actions wrap rather than push each other off */ .lvl-cc-verdict,.lvl-verdict{flex-wrap:wrap;grid-template-columns:1fr!important} .lvl-cc-verdict-a,.lvl-verdict-a{width:100%;justify-content:flex-start;flex-wrap:wrap} /* a finger needs a target, and the panels stop being fixed-width */ .lvl-cc-board .lvl-btn,.lvl-cc-board button.lvl-link{min-height:32px} .lvl-blockapply,.lvl-searching{max-width:calc(100vw - 24px)} .lvl-fit-subr{grid-template-columns:1fr auto;padding-left:22px} .lvl-fit-more{padding-left:22px} }