/* ================================================================ SLATE — app shell. Tokens and layout carried over verbatim from /home/user/workspace/slate-mockups/styles.css (theme D · t-classic). ================================================================ */ *{box-sizing:border-box} html,body{margin:0;padding:0;height:100%} body{background:#fff;overflow:hidden} /* Theme variables must also exist at :root. Overlays (the project drawer, dialogs) are appended to , outside .app -- when the variables were scoped to .app alone, every colour in the drawer resolved to nothing and it rendered fully transparent on top of the EPS panel. */ :root, .app{ --bg:#fff; --panel:#f6f7f8; --fg:#1b1d21; --mut:#6b7280; --line:#dcdfe4; --acc:#0f766e; --crit:#c1272d; --critbar:#d94a4a; --bar:#3f6ea8; --done:#8a9aab; --ms:#1b1d21; --sum:#333; --row:#fff; --rowalt:#fafbfc; --grp:#eef1f4; --dd:#e0a300; --radius:2px; --fs:12.5px; --rowh:26px; --fam:'Inter',sans-serif; --fam-n:'IBM Plex Mono',monospace; --fam-h:'Inter',sans-serif; --barh:11px; --barr:1px; --gw:44%; --lp:#8e44ad; font-family:var(--fam);background:var(--bg);color:var(--fg);font-size:var(--fs);line-height:1.35; display:flex;flex-direction:column;height:100vh;overflow:hidden; } .app .ic{width:14px;height:14px;flex:0 0 auto} .app button{font:inherit;color:inherit} .app :focus-visible{outline:2px solid #1d4e79;outline-offset:1px} /* top bar */ .app .top{display:flex;align-items:center;gap:18px;padding:0 14px;height:48px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto} .app .brand{display:flex;align-items:center;gap:8px;flex:0 0 auto} .app .brand .logo{width:20px;height:20px;color:var(--acc)} .app .bn{font-family:var(--fam-h);font-weight:700;letter-spacing:-.02em;font-size:15px} .app .bt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .app .crumb{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .app .crumb em{font-style:normal;opacity:.5;margin:0 5px} .app .acts{margin-left:auto;display:flex;gap:7px;flex:0 0 auto} .app .btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:12px;white-space:nowrap} .app .btn:hover{filter:brightness(.97)} .app .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600} .app .btn.ghost{border-style:dashed} .app .btn[disabled]{opacity:.45;cursor:default} .app .btn.icon{padding:5px 7px} /* body split */ .app .body{display:flex;flex:1 1 auto;min-height:0} .app .side{width:300px;flex:0 0 auto;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;overflow:hidden} .app .sh{padding:10px 12px 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:6px} .app .sh .shx{margin-left:auto;display:flex;gap:3px} .app .sh .shx button{background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer;width:18px;height:18px;line-height:1;display:grid;place-items:center;font-size:12px;color:inherit;padding:0} .app .sh .shx button:hover{border-color:var(--line);background:#fff} .app .tree{padding:0 4px 8px;overflow:auto;flex:0 1 auto} .app .tree.eps{max-height:34%} .app .tree.wbstree{max-height:38%} .app .node{display:flex;align-items:center;gap:6px;padding:4px 8px 4px calc(8px + var(--d) * 13px);border-radius:var(--radius);cursor:pointer;font-size:12px;white-space:nowrap;overflow:hidden} .app .node .tw{color:var(--mut);font-size:9px;width:8px;flex:0 0 auto} .app .node .nl{overflow:hidden;text-overflow:ellipsis} .app .node.eps{font-weight:600} .app .node.prj .nl{color:var(--fg)} .app .node.prj:before{content:'';width:7px;height:7px;background:var(--acc);opacity:.55;margin-left:8px;flex:0 0 auto} .app .node.on{background:var(--acc);color:#fff;font-weight:600} .app .node.on .nl{color:#fff} .app .node.on:before{background:#fff;opacity:.9} .app .node.on .nm2{color:rgba(255,255,255,.85)} .app .node .nm2{margin-left:auto;font-family:var(--fam-n);font-size:10px;color:var(--mut);flex:0 0 auto;padding-left:6px} .app .node.wbs{color:var(--mut)} .app .node.wbs.root{color:var(--fg);font-weight:600} .app .node[draggable=true]{-webkit-user-drag:element} .app .node.dragover{box-shadow:inset 0 -2px 0 var(--crit)} .app .stats{margin-top:auto;border-top:1px solid var(--line);padding:8px 12px 12px;flex:0 0 auto} .app .stats div{display:flex;justify-content:space-between;padding:3px 0;font-size:11.5px;color:var(--mut);gap:8px} .app .stats b{font-family:var(--fam-n);color:var(--fg);font-weight:500;white-space:nowrap} .app .stats b.warn{color:var(--crit)} .app .stats b.link{cursor:pointer;text-decoration:underline dotted} /* grid + gantt */ .app .grid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--bg)} .app .gwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative} .app .ghead{flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--panel);display:flex;position:relative} .app .cols,.app tr{display:grid;grid-template-columns:var(--gtc)} .app .cols{width:100%} .app .cols span,.app .tscale{padding:7px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app .cols .n,.app .cols .d{text-align:right} /* --- column resize grips ------------------------------------------------- */ .app .cols span{position:relative;padding-right:11px} .app .cgrip{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize; z-index:3;display:block;background:transparent;border:0;padding:0} .app .cgrip::after{content:"";position:absolute;top:3px;bottom:3px;right:3px;width:1px; background:var(--acc);opacity:0;transition:opacity .12s} .app .cgrip:hover::after,.app .cgrip:focus-visible::after{opacity:1} .app .cgrip:focus-visible{outline:none} .app .cgrip:focus-visible::after{opacity:1;width:2px;right:2px} /* while dragging, keep the col-resize cursor everywhere and kill text select */ .app.colsizing,.app.colsizing *{cursor:col-resize !important;user-select:none} .app.colsizing .cgrip::after{opacity:1} .app .tscale{position:absolute;right:0;top:0;bottom:0;width:var(--gw);display:flex;padding:0;border-left:1px solid var(--line);overflow:hidden} .app .tscale .mo{padding:7px 0;text-align:center;border-right:1px solid var(--line);font-family:var(--fam-n);font-size:9.5px;letter-spacing:.06em;color:var(--mut);overflow:hidden;white-space:nowrap;flex:0 0 auto;width:var(--gpx);text-overflow:clip} .app .gscroll{flex:1 1 auto;overflow:auto;position:relative} .app table{width:100%;border-collapse:collapse;table-layout:fixed} .app tr{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);height:var(--rowh)} .app tbody tr:nth-child(even){background:var(--rowalt)} .app td{padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center} .app td.n,.app td.d{justify-content:flex-end;font-family:var(--fam-n);font-size:11px;color:var(--mut)} .app td.id{font-family:var(--fam-n);font-size:11px;color:var(--acc)} .app td.nm{font-size:12px} .app tr.r-crit td.nm{color:var(--crit)} .app tr.r-crit td.tf{color:var(--crit);font-weight:600} .app tr.r-lp td.nm{color:var(--lp)} .app tr.sel{background:#cfe0f5 !important;box-shadow:inset 2px 0 0 #1d4e79} .app tr.grp{background:var(--grp);font-weight:600} .app tr.grp td{font-size:11.5px;letter-spacing:.02em;color:var(--fg);padding-left:8px;display:flex;align-items:center} .app tr.grp td.lab{grid-column:1 / -2} .app tr.grp td.gc{grid-column:-2 / -1} .app tr.fill td.lab{grid-column:1 / -2} .app tr.fill td.gc{grid-column:-2 / -1;border-left:1px solid var(--line)} .app td.gc{position:relative;border-left:1px solid var(--line);padding:0;overflow:hidden;display:block} .app .gl{position:absolute;top:0;bottom:0;left:0;width:var(--gspan);transform:translateX(calc(-1 * var(--pan)));background: repeating-linear-gradient(90deg,transparent 0 calc(var(--gpx) - 1px),color-mix(in srgb,var(--line) 70%,transparent) calc(var(--gpx) - 1px),transparent var(--gpx))} .app .ddclip{position:absolute;top:0;bottom:0;right:0;width:var(--gw);overflow:hidden;z-index:3;pointer-events:none} .app .ddline{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--dd);z-index:3;pointer-events:none} .app .tscale .gl{background:none;display:flex} .app .gscroll{cursor:default} .app .gscroll.panning{cursor:grabbing} .app .bar{position:absolute;top:calc((var(--rowh) - var(--barh))/2 - 1px);height:var(--barh);background:var(--bar);border-radius:var(--barr);overflow:hidden;min-width:2px} .app .bar.crit{background:var(--critbar)} .app .bar.lp{background:var(--lp)} .app .bar.done{background:var(--done)} .app .bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.42)} .app .bar .grip{position:absolute;right:-3px;top:-3px;bottom:-3px;width:9px;cursor:crosshair} .app .gsum{position:absolute;top:calc(var(--rowh)/2 - 4px);height:7px;background:var(--sum);clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 5px) 40%,5px 40%,0 100%);min-width:6px} .app .ms{position:absolute;top:calc(var(--rowh)/2 - 5px);width:10px;height:10px;background:var(--ms);transform:rotate(45deg) translateX(-3px)} .app .ms.crit{background:var(--crit)} .app .ms.lp{background:var(--lp)} .app .bl{position:absolute;top:calc(var(--rowh)/2 + 5px);height:3px;background:#b9a06a;border-radius:1px;min-width:2px} /* splitter */ .app .split{position:absolute;top:0;bottom:0;width:7px;margin-left:-3px;left:calc(100% - var(--gw));cursor:col-resize;z-index:6} .app .split:hover{background:rgba(29,78,121,.22)} /* inline editing */ .app td.editable{cursor:text} .app td.editable:hover{box-shadow:inset 0 0 0 1px var(--line)} .app td input,.app td select{width:100%;min-width:0;border:1px solid #1d4e79;background:#fff;font:inherit;color:inherit;padding:1px 3px;border-radius:0;height:calc(var(--rowh) - 6px)} .app td.n input,.app td.d input{text-align:right;font-family:var(--fam-n)} /* detail pane */ .app .detail{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;height:270px;min-height:0} .app .detail.collapsed{height:30px} .app .dtabs{display:flex;align-items:center;gap:2px;padding:0 8px;height:30px;border-bottom:1px solid var(--line);flex:0 0 auto} .app .dtabs button{background:transparent;border:1px solid transparent;border-bottom:0;padding:5px 11px;font-size:11.5px;cursor:pointer;border-radius:2px 2px 0 0} .app .dtabs button.on{background:var(--bg);border-color:var(--line);font-weight:600} .app .dtabs .who{margin-left:auto;font-family:var(--fam-n);font-size:11px;color:var(--mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px} .app .dbody{flex:1 1 auto;overflow:auto;padding:10px 12px;background:var(--bg)} .app .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 16px} .app .f{display:flex;flex-direction:column;gap:3px;min-width:0} .app .f label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .app .f input,.app .f select,.app .f textarea{font:inherit;padding:3px 5px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);min-width:0} .app .f textarea{min-height:110px;resize:vertical} .app .f .ro{padding:3px 5px;border:1px solid transparent;font-family:var(--fam-n);font-size:11px;color:var(--mut)} .app table.rel{width:100%;border-collapse:collapse;font-size:11.5px;display:table} .app table.rel tr{display:table-row;height:auto;border:0} .app table.rel th,.app table.rel td{display:table-cell;text-align:left;padding:3px 6px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle} .app table.rel th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:400} .app table.rel td select,.app table.rel td input{padding:1px 3px;font:inherit;border:1px solid var(--line);height:auto} .app table.rel td input{width:60px;text-align:right;font-family:var(--fam-n)} .app .relhead{display:flex;align-items:center;gap:8px;margin:0 0 6px} .app .relhead h4{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600} .app .empty{color:var(--mut);font-size:12px;padding:14px 4px;font-style:italic} /* footer */ .app .foot{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap} .app .chip{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 9px;background:var(--bg);white-space:nowrap} .app .chip.ok{border-color:var(--acc);color:var(--acc)} .app .chip.warn{border-color:var(--crit);color:var(--crit)} .app .chip.btnchip{cursor:pointer} /* A save failure is not a warning among warnings — it means the work on screen is not written down. It is filled, not outlined, so it reads as an alarm. */ .app .chip.err{border-color:var(--crit);background:var(--crit);color:#fff;font-weight:600} .app .chip.err:hover{filter:brightness(1.1)} .app .foot .zoom{margin-left:auto;display:flex;gap:4px;align-items:center} .app .foot .zoom select,.app .foot .zoom label{font:inherit;font-size:11px} /* --- gantt zoom cluster --------------------------------------------------- */ .app .foot .zgrp{display:flex;align-items:center;gap:2px;margin-right:8px} .app .foot .zgrp .zb{min-width:24px;padding:2px 6px;font-size:13px;line-height:1;font-weight:600} .app .foot .zgrp .zb[disabled]{opacity:.4;cursor:default} .app .foot .zpct{min-width:46px;padding:2px 4px;font:inherit;font-size:11px; font-variant-numeric:tabular-nums;text-align:center;color:var(--mut); background:none;border:1px solid transparent;border-radius:3px;cursor:pointer} .app .foot .zpct:hover{border-color:var(--line);color:var(--ink)} /* menus, modals, slide-over, toasts */ .app .menu{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -10px rgba(0,0,0,.35);border-radius:var(--radius);min-width:208px;padding:4px} .app .menu button{display:flex;width:100%;align-items:center;gap:8px;background:transparent;border:0;text-align:left;padding:6px 10px;font-size:12px;cursor:pointer;border-radius:2px} .app .menu button:hover{background:var(--grp)} .app .menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px} .app .menu label{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12px;cursor:pointer} .ovl{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:100;display:grid;place-items:center;padding:24px} .dlg{background:#fff;border:1px solid #b9c4d0;border-radius:3px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);max-width:min(820px,94vw);max-height:88vh;display:flex;flex-direction:column;font-family:'Inter',sans-serif;font-size:12.5px;color:#1a1a1a} .dlg header{padding:11px 14px;border-bottom:1px solid #dcdfe4;font-weight:700;font-size:13px;display:flex;align-items:center;gap:10px;background:linear-gradient(#f2f7fc,#dfe8f2)} .dlg header .x{margin-left:auto;background:transparent;border:0;font-size:16px;cursor:pointer;line-height:1;padding:0 2px} .dlg .content{padding:14px;overflow:auto} .dlg footer{padding:10px 14px;border-top:1px solid #dcdfe4;display:flex;gap:8px;justify-content:flex-end;background:#f6f7f8} .dlg .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;background:linear-gradient(#fdfdfe,#eef2f7);border:1px solid #9fb0c2;border-radius:1px;cursor:pointer;font:inherit} .dlg .btn.primary{background:linear-gradient(#2f6fa8,#1d4e79);border-color:#1d4e79;color:#fff;font-weight:600} .dlg .btn.danger{background:linear-gradient(#d64b45,#b02a25);border-color:#8e211d;color:#fff;font-weight:600} .dlg table{width:100%;border-collapse:collapse;font-size:12px} .dlg th,.dlg td{text-align:left;padding:5px 8px;border-bottom:1px solid #e6e9ee;vertical-align:middle} .dlg th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5a6570;font-weight:600} .dlg td input,.dlg td select,.dlg .content input,.dlg .content select,.dlg .content textarea{font:inherit;padding:3px 5px;border:1px solid #b9c4d0;background:#fff} .dlg .loop{font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:#fff5f5;border:1px solid #e7bdbd;padding:7px 9px;margin-bottom:6px;white-space:pre-wrap;word-break:break-word} .dlg .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px} .dlg .f{display:flex;flex-direction:column;gap:3px;min-width:0} .dlg .f label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5a6570} .dlg .note{color:#5a6570;margin:0 0 10px} .dlg .cbrow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px} .health{position:fixed;top:0;right:0;bottom:0;width:min(470px,94vw);background:#fff;border-left:1px solid #b9c4d0;box-shadow:-18px 0 50px -20px rgba(0,0,0,.4);z-index:90;display:flex;flex-direction:column;font-family:'Inter',sans-serif;font-size:12.5px;transform:translateX(100%);transition:transform .18s ease} .health.open{transform:none} .health header{padding:11px 14px;border-bottom:1px solid #dcdfe4;font-weight:700;display:flex;align-items:center;gap:10px;background:linear-gradient(#f2f7fc,#dfe8f2)} .health header .x{margin-left:auto;background:transparent;border:0;font-size:16px;cursor:pointer} .health .hb{overflow:auto;padding:6px 0 20px} .health h4{margin:12px 14px 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5a6570} .health .hitem{display:flex;gap:8px;align-items:baseline;padding:5px 14px;border-bottom:1px solid #eef1f4;cursor:pointer} .health .hitem:hover{background:#eef4fa} .health .hitem code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#1d4e79;flex:0 0 78px} .health .hitem span{color:#3b4652;min-width:0;overflow-wrap:anywhere} .health .hnone{padding:5px 14px;color:#6b7280;font-style:italic} .health .hsum{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid #dcdfe4} .health .hsum b{font-family:'IBM Plex Mono',monospace} .toasts{position:fixed;right:14px;bottom:66px;z-index:120;display:flex;flex-direction:column;gap:7px;align-items:flex-end} .toast{background:#1a2b3c;color:#fff;font-family:'Inter',sans-serif;font-size:12px;padding:8px 13px;border-radius:2px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);max-width:420px} .toast.err{background:#8e211d} .toast.ok{background:#14532d} .tip{position:fixed;z-index:130;background:#1a2b3c;color:#fff;font-family:'Inter',sans-serif;font-size:11.5px;padding:7px 9px;border-radius:2px;pointer-events:none;box-shadow:0 8px 20px -6px rgba(0,0,0,.5);max-width:300px} .tip b{display:block;margin-bottom:3px} .tip table{border-collapse:collapse} .tip td{padding:1px 0} .tip td:first-child{color:#a9bacb;padding-right:10px} /* ================================================================ THEME D — P6 FAMILIAR (t-classic) — the approved direction ================================================================ */ :root:has(.app.t-classic), .collab-drawer-ovl.t-classic, .app.t-classic{ --bg:#ffffff; --panel:#e8eef5; --fg:#1a1a1a; --mut:#5a6570; --line:#b9c4d0; --acc:#1d4e79; --crit:#c00000; --critbar:#c00000; --bar:#2e6ca4; --done:#7f7f7f; --ms:#000; --sum:#000; --rowalt:#f2f6fa; --grp:#d6e2ee; --dd:#c00000; --radius:1px; --fs:12px; --rowh:23px; --barh:9px; --barr:0; --fam:'Inter',Tahoma,sans-serif; --fam-n:'Inter',Tahoma,sans-serif; --lp:#6b21a8; } .app.t-classic .top{background:linear-gradient(#f2f7fc,#dfe8f2);height:44px} .app.t-classic .bn{color:#1d4e79} .app.t-classic .btn{background:linear-gradient(#fdfdfe,#eef2f7);border-color:#9fb0c2} .app.t-classic .btn.primary{background:linear-gradient(#2f6fa8,#1d4e79);border-color:#173d5f;color:#fff} .app.t-classic .sh{background:#d6e2ee;color:#14395c;font-weight:700;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 10px;letter-spacing:.06em} .app.t-classic .tree{padding:4px 2px} .app.t-classic .node.on{background:#316ac5;color:#fff} .app.t-classic .node.on .nm2{color:#e6eefb} .app.t-classic .cols span{background:linear-gradient(#f7fafd,#e4ecf4);border-right:1px solid var(--line);text-transform:none;font-size:11px;letter-spacing:0;font-weight:600;color:#26333f} .app.t-classic .tscale .mo{background:linear-gradient(#f7fafd,#e4ecf4);font-weight:600;color:#26333f} .app.t-classic tr{border-bottom:1px solid #dde4ec} .app.t-classic tr.grp td{background:#d6e2ee;color:#14395c} .app.t-classic td.id{color:#1a1a1a;font-weight:600} .app.t-classic .chip{border-radius:2px} /* ---- self-test page ---- */ .st{font-family:'Inter',sans-serif;padding:26px 30px;max-width:1180px;margin:0 auto;color:#1a1a1a;height:100vh;overflow:auto} .st h1{font-size:21px;margin:0 0 4px;color:#1d4e79} .st .sub{color:#5a6570;font-size:13px;margin:0 0 18px} .st .banner{padding:10px 14px;border-radius:2px;font-weight:700;margin-bottom:18px;font-size:14px} .st .banner.pass{background:#dff5e5;border:1px solid #4a9e6a;color:#14532d} .st .banner.fail{background:#fdecec;border:1px solid #c00000;color:#8e211d} .st h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#5a6570;margin:22px 0 6px} .st table{width:100%;border-collapse:collapse;font-size:12px} .st th,.st td{text-align:left;padding:5px 8px;border-bottom:1px solid #e6e9ee;vertical-align:top} .st th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5a6570} .st td.r{width:64px;font-weight:700} .st tr.pass td.r{color:#14532d} .st tr.fail td.r{color:#c00000} .st tr.fail{background:#fdf3f3} .st code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere} /* ================================================================ v1.1 UX PASS — interaction affordances only. No change to the three-region layout or the t-classic visual language. ================================================================ */ /* ---- density: compact (23px) stays the default ---- */ .app.comfy{--rowh:30px;--fs:13px;--barh:12px} .app.comfy .cols span,.app.comfy td{padding-top:2px;padding-bottom:2px} /* ---- dirty state: computed dates dim, actuals never do ---- */ .app td.stale{color:#93a1ae;font-style:italic} .app.t-classic td.stale{color:#8b97a3} /* Calculated cells dim only while the schedule is out of date. Driving this from the app root means an edit that invalidates the dates costs one class toggle rather than a repaint of every row in the grid. */ .app.is-dirty td.computed{color:#93a1ae;font-style:italic} .app.t-classic.is-dirty td.computed{color:#8b97a3} .app .btn.primary .dot{width:7px;height:7px;border-radius:50%;background:#ffd24a; box-shadow:0 0 0 2px rgba(0,0,0,.18);margin-left:2px;flex:0 0 auto} @keyframes slate-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,74,.0)}50%{box-shadow:0 0 0 3px rgba(255,210,74,.45)}} .app .btn.primary.pulse{animation:slate-pulse 1.9s ease-in-out 3} @media (prefers-reduced-motion:reduce){.app .btn.primary.pulse{animation:none}} .app .chip.dirty{border-color:#b06f00;color:#7a4d00;background:#fff6e0;font-weight:600;cursor:pointer} .app .chip.dirty:hover{background:#ffefcd} .app .chip.toggle{cursor:pointer;user-select:none} .app .chip.toggle.on{border-color:var(--acc);color:var(--acc);font-weight:600;background:#eaf1f8} .app .stats b.flash{background:#fff2b8;box-shadow:0 0 0 3px #fff2b8} @keyframes slate-flash{0%{background:#ffe36e;box-shadow:0 0 0 3px #ffe36e}100%{background:transparent;box-shadow:none}} .app .stats b.flash{animation:slate-flash 2.2s ease-out 1 forwards} @media (prefers-reduced-motion:reduce){.app .stats b.flash{animation:none;background:#fff2b8}} /* ---- health badge ---- */ .app .btn.hbtn{position:relative;overflow:visible} .app .hbadge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px; border-radius:9px;background:var(--crit);color:#fff;font-size:10px;font-weight:700; line-height:16px;text-align:center;border:1px solid #fff} .app .stats b.link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px} .app .stats b.link:hover{color:var(--acc)} .health header .hn{margin-left:auto;margin-right:10px;font-size:11px;font-weight:700; padding:1px 8px;border-radius:9px} .health header .hn.bad{background:#ffe1e1;color:#8e211d} .health header .hn.good{background:#dff5e5;color:#14532d} .health .hfilter{display:flex;align-items:center;gap:10px;background:#eef3f8; border:1px solid var(--line);padding:6px 9px;margin:0 0 8px;font-size:11.5px} .health .hitem{cursor:pointer} .health .hitem:hover{background:#eef3f8} /* ---- grid toolbar strip ---- */ .app .gbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 8px; background:var(--panel);border-bottom:1px solid var(--line);min-height:28px} .app .btn.sm{padding:2px 8px;font-size:11px} .app .gbspace{flex:1 1 auto} .app .gbcount{font-size:11px;color:var(--mut);white-space:nowrap} .app .fchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;cursor:pointer; background:#e6f0fa;border:1px solid #7fa6cc;color:#14395c;border-radius:2px;padding:2px 8px; max-width:340px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .app .fchip .ic{width:12px;height:12px} .app .fchip b{font-weight:700;font-size:13px;line-height:1;margin-left:2px} .app .fchip:hover{background:#d6e6f6} /* ---- getting-started strip ---- */ .app .gstrip{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:7px 10px;background:#f4f9ee;border-bottom:1px solid #c6d9b4;font-size:11.5px;color:#31431f} .app .gstrip>b{color:#2c3f19;letter-spacing:.02em} .app .gs{display:inline-flex;align-items:center;gap:5px} .app .gs i{font-style:normal;width:15px;height:15px;border-radius:50%;background:#5c7a3c;color:#fff; font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .app .gs em{font-style:normal;color:#5a6b46} .app .gsep{color:#9db584} .app .gstrip .gx{margin-left:auto;background:transparent;border:1px solid #b0c79a;border-radius:2px; padding:2px 9px;font-size:11px;cursor:pointer;color:#31431f} .app .gstrip .gx:hover{background:#e7f0dc} /* ---- first run (empty workspace) ---- */ .app .firstrun{max-width:520px;margin:12vh auto;text-align:center;padding:0 20px} .app .firstrun h2{font-size:19px;margin:0 0 8px;color:#14395c} .app .firstrun p{color:var(--mut);font-size:13px;margin:0 0 20px;line-height:1.5} .app .fr-acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap} /* ---- WBS group rows and tree chevrons ---- */ .app tr.grp td.lab{font-weight:700} .app.t-classic tr.grp td{background:#cddcec;box-shadow:inset 3px 0 0 #1d4e79} .app tr.grp .gchev{display:inline-block;width:13px;cursor:pointer;color:#14395c; font-size:10px;user-select:none;margin-right:1px} .app tr.grp .gcount{font-weight:400;color:#4a5a6a;margin-left:8px;font-size:11px} .app .node .chev{cursor:pointer;text-align:center;font-size:9px;color:var(--mut);user-select:none} .app .node.on .chev{color:#e6eefb} /* ---- critical marker that is not colour alone ---- */ .app .nmtx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .app .cglyph{display:inline-block;min-width:12px;height:12px;line-height:12px;margin-right:5px; font-size:9px;font-weight:700;text-align:center;border:1px solid currentColor;border-radius:2px; color:var(--crit);flex:0 0 auto} .app tr.r-lp .cglyph{color:var(--lp)} .app .bar.crit,.app .bar.lp{background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 2px,transparent 2px 5px)} /* ---- data date tag ---- */ .app .ddline .ddtag{position:absolute;top:0;left:1px;background:var(--dd);color:#fff; font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 3px;line-height:1.1; pointer-events:auto;cursor:help} /* ---- pan affordance: grab cursor only while Space is held ---- */ .app.spacepan .gscroll td.gc{cursor:grab} .app .gscroll.panning,.app .gscroll.panning td.gc{cursor:grabbing} .app .tscale{cursor:ew-resize} .tip.pinned{pointer-events:auto;box-shadow:0 0 0 2px #ffd24a,0 8px 20px -6px rgba(0,0,0,.5)} /* ---- detail pane ---- */ .app .dtabs .dtoggle{margin-left:8px} .app .dsum{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:4px 10px;font-size:11.5px;color:var(--mut);background:#eef3f8; border-bottom:1px solid var(--line)} .app .dsum b{color:var(--fg);font-weight:700} .app .dsum i{font-style:normal;opacity:.45} .app .dsum.stale b{color:#93a1ae} .app .dsum .staleflag{margin-left:auto;color:#7a4d00;background:#fff6e0; border:1px solid #d6ab5c;border-radius:2px;padding:0 7px;font-weight:600} /* the primary + Predecessor / + Successor buttons sit on the section head */ .app .relhead{justify-content:space-between} .app .relhead .rhacts{margin-left:auto;display:flex;gap:6px} /* ---- type-ahead ---- */ .dlg .typeahead{position:relative} .dlg .tawrap{position:relative;display:flex;flex-direction:column} .dlg .talist{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff; border:1px solid #9fb0c2;box-shadow:0 10px 22px -10px rgba(0,0,0,.45);max-height:212px;overflow:auto} .dlg .taopt{display:flex;gap:9px;align-items:baseline;padding:4px 9px;cursor:pointer;font-size:12px} .dlg .taopt code{font-weight:700;color:#14395c;min-width:74px} .dlg .taopt.on,.dlg .taopt:hover{background:#316ac5;color:#fff} .dlg .taopt.on code,.dlg .taopt:hover code{color:#e6eefb} .dlg .tanone{padding:5px 9px;font-size:11.5px;color:#6b7280;font-style:italic} .dlg .tapick{margin-top:4px;font-size:11.5px;color:#5a6570} .dlg .warnnote{color:#8e211d} /* ---- keyboard map sheet ---- */ .kmap{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:14px 26px} .kmap section h4{margin:0 0 5px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#5a6570} .kmap dl{margin:0;display:grid;gap:3px} .kmap dl>div{display:flex;gap:10px;align-items:baseline} .kmap dt{flex:0 0 158px;margin:0} .kmap dd{margin:0;font-size:12px;color:#31414f} .kmap kbd{font-family:'Inter',sans-serif;font-size:10.5px;background:#eef3f8;border:1px solid #b9c4d0; border-bottom-width:2px;border-radius:3px;padding:1px 6px;white-space:nowrap;color:#14395c} /* ---- undo toast ---- */ .toast.undoable{display:flex;align-items:center;gap:4px} .toast .tundo{background:transparent;border:0;border-bottom:1px solid #ffd24a;color:#ffd24a; font:inherit;font-weight:700;padding:0 0 1px;cursor:pointer} .toast .tundo:hover{color:#fff;border-color:#fff} /* ---- EPS drop target ---- */ .app .node.dragover{outline:2px dashed #1d4e79;outline-offset:-2px;background:#dbe8f5} /* ================================================================ Print — real landscape output with a schedule header block ================================================================ */ @media print{ @page{size:A3 landscape;margin:10mm} html,body{height:auto;overflow:visible;background:#fff} .app{height:auto;overflow:visible;font-size:9.5px} .app .top,.app .foot,.app .gbar,.app .gstrip,.app .detail,.app .split, .toasts,.tip,.health,.ovl{display:none !important} .app .side{display:none !important} .app .body{display:block} .app .grid{display:block} .app .gwrap{display:block;overflow:visible} .app .gscroll{overflow:visible !important;height:auto !important} .app tr{break-inside:avoid} .app .ghead{position:static} .printhead{display:block !important;padding:0 0 6px;margin:0 0 6px;border-bottom:1.5px solid #1a1a1a} .printhead h1{margin:0;font-size:14px;font-family:'Inter',sans-serif;color:#1a1a1a} .printhead .meta{margin-top:2px;font-size:9.5px;color:#3a4652;font-family:'Inter',sans-serif} } .printhead{display:none} /* ===== collab ===== Identity chip, sync status chip, project/EPS drawer, conflict dialog and dev panel — web/js/11-collab.js. Same t-classic tokens as the rest of app.css (--acc/--line/--mut/--fam/etc.), same 23px compact row rhythm, no new fonts or accent colours. Append-only per docs/UI-SEAM.md. */ /* -- identity chip (topbar) -- */ .app .top .acts .collab-idchip{gap:6px} .app .collab-idchip-dot{width:7px;height:7px;border-radius:50%;background:var(--mut);flex:0 0 auto} .app .collab-idchip-dot.on{background:var(--acc)} .app .collab-idchip-dot.off{background:var(--crit)} .app .collab-idchip-label{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app .collab-idchip.collab-signedout{border-color:var(--crit);color:var(--crit)} .app .collab-drawerbtn{font-size:15px} /* -- read-only banner -- */ .app .collab-ro-banner{display:flex;align-items:center;gap:10px;padding:6px 14px; background:#fff6e0;border-bottom:1px solid #d6ab5c;color:#7a4d00;font-size:12px} .app .collab-ro-banner button{margin-left:auto;background:transparent;border:1px solid #d6ab5c; border-radius:var(--radius);padding:2px 9px;cursor:pointer;color:inherit;font:inherit} .app.collab-readonly .btn.primary[data-act="schedule"], .app.collab-readonly .btn[data-act="add-activity"], .app.collab-readonly .btn[data-act="link"]{opacity:.45;pointer-events:none} /* -- sync status chip (footer) — mirrors .chip.err's sticky pattern -- */ .app .foot .collab-syncchip{cursor:pointer} .app .foot .collab-syncchip.ok{border-color:var(--acc);color:var(--acc)} .app .foot .collab-syncchip.warn{border-color:#b06f00;color:#7a4d00;background:#fff6e0;font-weight:600} .app .foot .collab-syncchip.err{border-color:var(--crit);background:var(--crit);color:#fff;font-weight:600} /* -- fallback identity/menu dialog (used only if Slate.events.menuAt is unavailable to this file) -- */ .collab-menu-fallback{display:flex;flex-direction:column;gap:2px} .collab-menu-fallback button{text-align:left;background:transparent;border:0;padding:6px 4px; cursor:pointer;font:inherit;border-radius:var(--radius)} .collab-menu-fallback button:hover{background:#eef3f8} .collab-menu-fallback hr{border:0;border-top:1px solid var(--line);margin:4px 0} /* -- dev identity switcher -- */ .collab-userlist{display:flex;flex-direction:column;gap:4px} .collab-userrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px; text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:7px 10px;cursor:pointer;font:inherit} .collab-userrow:hover{border-color:var(--acc);background:#eaf1f8} .collab-userrow span{color:var(--mut);font-size:11px} /* -- project/EPS drawer -- */ .collab-drawer-ovl{position:fixed;inset:0;background:rgba(20,25,30,.28);z-index:40} .collab-drawer{position:absolute;top:0;left:0;bottom:0;width:340px;background:var(--bg); border-right:1px solid var(--line);box-shadow:8px 0 24px -12px rgba(0,0,0,.4); display:flex;flex-direction:column;font-family:var(--fam);font-size:var(--fs)} .collab-drawer header{display:flex;align-items:center;padding:12px 14px;font-weight:700; border-bottom:1px solid var(--line);background:var(--panel)} .collab-drawer header .x{margin-left:auto;background:transparent;border:0;font-size:18px; cursor:pointer;line-height:1;color:var(--mut)} .collab-drawer .content{overflow:auto;flex:1 1 auto;padding:6px 4px} .collab-drawer .node.collab-drawer-row{display:flex;align-items:center;gap:6px} .collab-drawer-meta{padding:0 8px 6px calc(8px + var(--d) * 13px + 14px);font-size:10px; color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .collab-badge{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px; border-radius:999px;border:1px solid var(--line);color:var(--mut);flex:0 0 auto;margin-left:6px} .collab-badge.role-admin{border-color:var(--acc);color:var(--acc)} .collab-badge.role-planner{border-color:#3f6ea8;color:#3f6ea8} .collab-badge.role-viewer{border-color:var(--mut);color:var(--mut)} /* -- sync detail dialog -- */ .collab-syncdetail .note{margin:0 0 8px} /* -- conflict dialog: per-field table, radios default to Mine. No plain "Overwrite" control exists anywhere in this stylesheet or its markup (ADR §3.2 / ARCHITECTURE §3.2, non-negotiable). -- */ .collab-conflict .collab-cf-shortcuts{display:flex;gap:8px;margin:8px 0} .collab-cf-table{width:100%;border-collapse:collapse;font-size:12px} .collab-cf-table th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--mut);padding:4px 8px;border-bottom:1px solid var(--line)} .collab-cf-table td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top} .collab-cf-table td.collab-cf-val label{display:flex;flex-direction:column;gap:2px;cursor:pointer} .collab-cf-who{color:var(--mut);font-style:normal;font-size:10.5px} /* Subject line is the Activity ID + name; the field name sits under it in muted small caps so the eye lands on "what" before "which property". */ .collab-cf-table td:first-child{max-width:260px} .collab-cf-table td:first-child b{font-weight:600;line-height:1.3} .collab-cf-field{color:var(--mut);font-size:10.5px;letter-spacing:.04em; text-transform:uppercase;display:inline-block;margin-top:2px} /* -- reauth prompt -- */ .collab-reauth .warnnote{color:#8e211d} /* -- dev panel -- */ .collab-devpanel .f{margin-bottom:12px} .collab-devpanel .f label{display:block;font-size:11.5px;color:var(--mut);margin-bottom:4px} .collab-devpanel input[type="range"]{width:100%} .collab-devpanel code{font-family:var(--fam-n);font-size:11px;background:#eef3f8; border-radius:2px;padding:0 3px} /* -- sign-in gate (full-shell replacement before boot completes) -- Rendered directly into #root, i.e. OUTSIDE .app, so none of the .app-scoped resets/typography/button rules above apply here — this block is intentionally self-contained rather than relying on any .app .btn / .app selector. */ .collab-gate{font-family:'Inter',sans-serif;font-size:13px;color:#1b1d21; padding:70px 40px;max-width:440px;margin:64px auto 0;text-align:left; border:1px solid #dcdfe4;border-radius:2px;background:#fff} .collab-gate h2{margin:0 0 10px;font-family:'Inter',sans-serif;font-size:19px;font-weight:700} .collab-gate p{margin:0 0 18px;color:#6b7280;line-height:1.5} .collab-gate .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px; border:1px solid #dcdfe4;border-radius:2px;cursor:pointer;font:inherit; text-decoration:none;color:#1b1d21;background:#fff} .collab-gate .btn:hover{filter:brightness(.97)} .collab-gate .btn.primary{background:#0f766e;border-color:#0f766e;color:#fff;font-weight:600;margin-right:8px} /* deploy touch */