/* BR-0175: the Gantt's one stacking order, mirrored from lib/gantt-layers.ts (gantt-layers.test.ts keeps them equal). Every Gantt z-index reads one of these; never write a bare number. */ :root{--gz-chart-calendar:1;--gz-chart-links:2;--gz-chart-track:3;--gz-chart-table:7;--gz-chart-head:8;--gz-chart-divider:9;--gz-row-anchor:0;--gz-row-behind:2;--gz-row-bar:3;--gz-row-on-bar:4;--gz-row-marker:5;--gz-row-handle:6;--gz-row-parts:7;--gz-head-period-label:1;--gz-panel-raised-tile:1;--gz-shell-local:2;--gz-shell-status:5;--gz-shell-toolbar:12;--gz-shell-menu:20;--gz-shell-toolbar-menu:30;--gz-shell-hover-card:55;--gz-shell-drop-marker:60;--gz-shell-cover:2147483647} .takt-gantt-workspace .chart>.calendar-layer{z-index:var(--gz-chart-calendar,1)} /* #1041: the chart's day width (--day, set inline on .chart) is read by script only; no hosted rule uses it below the chart (.gantt-coarse-grid drops the track grid that did). Not inherited, so a zoom restyles .chart alone instead of all ~12,000 chart elements. */ @property --day{syntax:"*";inherits:false} /* BR-0103 / L24: exclude chart paint, not just cover it with sticky cells. The viewport owns the native horizontal offset; the divider owns the edge. Invert each surface's zoom/drag transform so the clip stays on that edge. Keep vertical overflow for row glides and marks. Plain vertical flings never rewrite the clip. BR-0134: --gantt-paint-left is set once on #gantt and inherited (per-track copies left bars clipped at an old offset). */ @property --gantt-paint-shift{syntax:"";inherits:false;initial-value:0px} @property --gantt-paint-scale{syntax:"";inherits:false;initial-value:1} .gantt-usability #gantt :is(.track,.timeline-head,.calendar-layer,.links){clip-path:inset(-10000px 0 -10000px max(0px,calc((var(--gantt-paint-left,0px) + var(--gantt-table-edge,var(--table)) - var(--table) - var(--gantt-paint-shift,0px))/var(--gantt-paint-scale,1))))} /* #1234 / UI §7: keep selection inheritance fixed before a drag. Flipping it on body at the first pointer move otherwise restyles the whole plan. Cell editors retain their explicit text selection. */ .gantt-usability #gantt{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .gantt-usability #gantt.hide-table{--gantt-table-edge:0px} .gantt-usability #gantt .track{z-index:var(--gz-chart-track,3)} .takt-gantt-workspace .table-cells{background-color:var(--tk-surface,#fff);isolation:isolate;will-change:transform;backdrop-filter:none;-webkit-backdrop-filter:none} :root{--takt-gantt-inspector-width:380px;--gantt-date-trim:12px}.takt-gantt-inspector{position:fixed;z-index:var(--tk-z-panel-layer,9000);right:0;top:var(--takt-topbar,48px);bottom:0;width:var(--takt-gantt-inspector-width);background:#fff;border-left:1px solid #e2e2de;box-shadow:-8px 0 24px #15151512;color:#202020;font:12px/1.45 var(--tk-font,"Saira",Arial,sans-serif)}.takt-gantt-inspector[hidden]{display:none}.takt-gantt-inspector *{box-sizing:border-box}.takt-gantt-resize{position:absolute;inset:0 auto 0 -5px;width:10px;border:0;border-radius:0;background:transparent;cursor:ew-resize;z-index:var(--gz-shell-local,2)}.takt-gantt-empty{padding:24px;color:#777}.takt-gantt-empty+[role=status]{display:block;padding:0 24px;color:#777;font-size:12px}.takt-gantt-inspector-open main{margin-right:var(--takt-gantt-inspector-width)} .takt-gantt-commitment{position:absolute;top:8px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);border:2px solid #1f1f1f;background:#fff;z-index:var(--gz-row-bar,3);pointer-events:none}.takt-gantt-commitment.late{border-color:#b45a4a}.takt-gantt-commitment.early{border-color:#287366}.takt-gantt-variance{position:absolute;top:15px;border-top:2px solid #555;z-index:var(--gz-row-behind,2);pointer-events:none}.takt-gantt-variance.late{border-color:#b45a4a}.takt-gantt-variance.early{border-color:#287366}#takt-gantt-commitments[aria-pressed=false]{opacity:.55} @media(max-width:900px){.takt-gantt-inspector{top:var(--takt-topbar,56px);width:min(var(--takt-gantt-inspector-width),calc(100vw - 24px))}.takt-gantt-inspector-open main{margin-right:0}.takt-gantt-resize{display:none}} /* Operational host layer: approved Unified UI v1 and Checkpoint 2 tokens. Scoped to Gantt; Timeline's presentation styles and engine are unchanged. */ body.takt-gantt-workspace{--bg:var(--tk-bg,#f4f5fb);--panel:var(--tk-surface,#fff);--line:var(--tk-line,#e1e4f2);--text:var(--tk-ink,#14163a);--muted:var(--tk-ink-3,#5a5f8f);--accent:var(--tk-accent,#4b5bd6);--selected:var(--tk-accent-soft,#e8ebfd);--bar:#628fe4;--critical:#e4979e;--grid:var(--tk-grid-line,#eceef8);--weekend:var(--tk-weekend,#f5f6fb);--table:680px;background:var(--bg);color:var(--text);font:12px/1.4 var(--tk-font,"Saira",Arial,sans-serif);overflow:hidden;height:100dvh;display:flex;flex-direction:column} .takt-gantt-workspace>.topbar{height:48px;min-height:48px;gap:7px;padding:7px 14px;background:#fff;flex:none}.takt-gantt-workspace .schedule-name{max-width:180px;color:#333}.takt-gantt-workspace>main{height:auto;flex:1;min-height:0;background:#fff}.takt-gantt-workspace .gantt{min-height:180px}.takt-gantt-workspace .table-cells{grid-template-columns:44px minmax(152px,1fr) calc(82px - var(--gantt-date-trim,0px)) calc(82px - var(--gantt-date-trim,0px)) 48px 46px 96px 64px;background:#fff}.takt-gantt-workspace .chart-head .table-cells{background:#f1f1ed;color:#777772;letter-spacing:.08em;font-size:9px}.takt-gantt-workspace .table-cells>span{border-bottom:1px solid var(--tk-grid-line)}.takt-gantt-workspace .cell{color:#62625e;font-variant-numeric:tabular-nums}.takt-gantt-workspace .task-name{font-size:12px;color:#30302f}.takt-gantt-workspace .summary-name{font-weight:700;color:#6b64c9}.takt-gantt-workspace .bar{z-index:var(--gz-row-bar,3);--bar-c:var(--tk-gantt-bar);background:var(--bar-paint,var(--bar-c));border:0;box-shadow:inset 0 0 0 1px #507bc433;border-radius:3px;height:16px}.takt-gantt-workspace .bar.milestone{background:var(--tk-milestone);height:12px}.takt-gantt-workspace .bar.summary{background:#7068cf;height:8px;box-shadow:none}.takt-gantt-workspace .today-line{border-left:2px solid var(--tk-today,#0e8f7d)}.takt-gantt-workspace .chart-row.selected .table-cells{box-shadow:inset 3px 0 #4b5bd6}.takt-gantt-workspace .chart-row.selected .bar{outline:2px solid #4b5bd6;outline-offset:3px}.takt-gantt-workspace .timeline-head{background:#f6f6f3}.takt-gantt-workspace .month-row{font-weight:700;color:#595954}.takt-gantt-workspace>main>footer{height:auto;min-height:30px;flex-wrap:wrap;gap:6px 16px;padding:5px 14px;background:#fff;color:#73736e}.takt-gantt-workspace>main>footer button{padding:3px 6px}.takt-gantt-workspace footer a{color:#2532a6}.takt-gantt-workspace #critical{pointer-events:none}.takt-gantt-workspace .critical-toggle{opacity:.45;cursor:not-allowed}.takt-gantt-workspace .links{z-index:var(--gz-chart-links,2)}.takt-gantt-workspace .links>.dependency-line{fill:none;stroke:#8a94a6;stroke-width:1.25;pointer-events:stroke;cursor:pointer;stroke-linejoin:round;stroke-linecap:round}.takt-gantt-workspace .links>.dependency-line:hover,.takt-gantt-workspace .links>.dependency-line:focus{stroke:#4b5bd6;stroke-width:3;outline:none}.takt-gantt-workspace .connection-handle{position:absolute;top:9px;width:12px;height:12px;min-width:0;padding:0;border:2px solid #4b5bd6;border-radius:50%;background:white;transform:translateX(-50%);z-index:var(--gz-row-handle,6);opacity:0;pointer-events:none;cursor:crosshair;touch-action:none}.takt-gantt-workspace .chart-row:hover .connection-handle,.takt-gantt-workspace .connection-handle:focus-visible,.takt-gantt-workspace .connection-handle.valid-target{opacity:1;pointer-events:auto}.takt-gantt-workspace .connection-handle.target-active{background:#4b5bd6;box-shadow:0 0 0 4px #4b5bd633}.takt-gantt-workspace .row-num{padding:0 2px;font-size:10px;color:#8b8b83;gap:0}.takt-gantt-workspace .takt-row-drag{font-size:14px;color:#a3a39a;padding:0;border:0;width:18px;min-width:18px;background:transparent;cursor:grab;touch-action:none}.takt-gantt-workspace .takt-row-drag:hover{color:#4b5bd6}.takt-drop-inside .table-cells{outline:2px solid #4b5bd6;outline-offset:-2px;background:#e8ebfd!important}.takt-gesture-active{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.takt-gantt-workspace #connection-preview{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:var(--tk-z-toast-layer,14000);overflow:visible}.takt-gantt-workspace #connection-preview path{stroke:#4b5bd6;stroke-width:2;stroke-dasharray:5 4;fill:none}#takt-gesture-status{position:fixed;max-width:340px;background:#202020;color:#fff;border-radius:6px;padding:10px 12px;z-index:calc(var(--tk-z-toast-layer,14000) + 1);font:12px/1.5 var(--tk-font,"Saira",Arial,sans-serif);pointer-events:none}#takt-gesture-status[hidden]{display:none}.takt-gantt-workspace #toast{z-index:var(--tk-z-toast-layer,14000);background:#202020;max-width:80vw}#dependency-editor [data-error]{color:#a72a27;line-height:1.5} /* #1234: the column fitter owns the condensed fallback; Inspector room changes leave fitted rows alone. */ .gantt.gantt-natural-condensed:not(.hide-table){--table:460px}.gantt-natural-condensed .table-cells{grid-template-columns:38px minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}.gantt-natural-condensed .table-cells>span:nth-child(n+6){display:none}.takt-gantt-inspector-open:not(.takt-gantt-inspector-overlay)>main{margin-right:var(--takt-gantt-inspector-width)}.takt-gantt-inspector-overlay>main{margin-right:0}.takt-gantt-inspector{top:calc(var(--takt-topbar,48px) + 48px);box-shadow:-5px 0 20px #15151509}.takt-gantt-nav button{font-size:16px!important;padding:4px 7px;border:1px solid #e6e6e2!important}.takt-gantt-resize:focus-visible{background:#4b5bd633;outline:none} @media(max-width:1259px){.takt-gantt-workspace{--table:460px}.takt-gantt-workspace .table-cells{grid-template-columns:38px minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}.takt-gantt-workspace .table-cells>span:nth-child(n+6){display:none}.takt-gantt-inspector{box-shadow:-12px 0 32px #1515151a}.takt-gantt-workspace .schedule-name{max-width:120px}}@media(max-width:650px){.takt-gantt-workspace .schedule-name,.takt-gantt-workspace .critical-toggle,.takt-gantt-workspace .finish-badge{display:none}.takt-gantt-inspector{width:calc(100vw - 20px);max-width:560px}.takt-gantt-workspace{--table:310px}.takt-gantt-workspace .table-cells{grid-template-columns:34px minmax(110px,1fr) 70px 70px}.takt-gantt-workspace .table-cells>span:nth-child(n+5){display:none}}@media(pointer:coarse){.takt-gantt-workspace .takt-row-drag{width:22px;min-width:22px}.takt-gantt-resize{display:block;width:16px;left:-8px}} .takt-gantt-workspace .links>.dependency-hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}.takt-gantt-workspace .links>.dependency-line.selected-dependency{stroke:#4b5bd6;stroke-width:3} /* Keep recovery/navigation controls reachable while the narrow inspector overlays the chart. Never place Synchronize beneath the inspector's fixed footer. */ .takt-gantt-workspace>main>footer{justify-content:flex-start}.takt-gantt-workspace>main>footer>button{order:0}.takt-gantt-workspace>main>footer>a{order:1}.takt-gantt-workspace>main>footer>#saveState{order:2;flex:1 1 160px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.takt-gantt-workspace>main>footer>span:nth-child(2){order:3;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.takt-gantt-workspace>main>footer>b{display:none}.takt-gantt-inspector-open.takt-gantt-inspector-overlay>main>footer{padding-right:calc(var(--takt-gantt-inspector-width) + 12px)} /* Gantt-owned controls use the approved shell tokens; no application-wide restyling. */ .gantt-usability-toolbar{height:auto!important;min-height:48px;display:flex;flex-wrap:wrap;gap:6px 12px!important;overflow:visible!important;padding:8px 12px!important;position:relative;z-index:var(--gz-shell-toolbar,12)} .gantt-usability-toolbar .gantt-tools{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:0;max-width:100%}.gantt-usability-toolbar .gantt-tools[aria-label="Gantt navigation"]{flex:1 1 100%;border-bottom:1px solid var(--takt-line,#e6e6e2);padding-bottom:6px}.gantt-usability-toolbar #title{max-width:none;min-width:0;white-space:normal;overflow-wrap:anywhere;flex:1;text-align:left;font-size:16px;font-weight:700;height:auto!important}.gantt-usability-toolbar input[type=date]{width:140px;min-width:0;height:32px;padding:4px}.gantt-usability-toolbar .gantt-more{position:relative;margin-left:auto}:is(.gantt-more)>div{position:absolute;right:0;top:100%;z-index:var(--gz-shell-menu,20);display:flex;flex-wrap:wrap;gap:6px;min-width:260px;width:min(380px,85vw);padding:12px;background:var(--takt-paper,#fff);border:1px solid var(--takt-line,#e6e6e2);border-radius:6px;box-shadow:0 8px 24px #0002}.gantt-more:not([open])>div{display:none}.gantt-more p{font-size:11px;line-height:1.5;margin:4px 0} body.gantt-usability>main{height:calc(100dvh - var(--takt-topbar,0px) - var(--gantt-toolbar-height,96px))!important;min-height:160px}body.gantt-usability .takt-gantt-inspector{top:calc(var(--takt-topbar,0px) + var(--gantt-toolbar-height,96px))}.gantt-input-status{margin:0;padding:4px 12px;min-height:21px;font-size:11px;background:var(--takt-sunken,#f1f1ed);color:var(--takt-ink-2,#4e4e4e)} .gantt-usability .days-row{display:block;position:relative}.gantt-date-bucket{position:absolute;top:0;overflow:hidden;white-space:nowrap;text-overflow:clip;border-left:1px solid var(--takt-line,#e6e6e2);text-align:center}/* #1235: a date's words stay centred on their day while zooming even when a fading-out tier's cell is narrower than them (centred text that overflows would otherwise align left); equal negative margins of half the cell keep the centre. */[data-zooming] .gantt-date-text{display:inline-block;margin-inline:-50%}.gantt-usability .month-row{overflow:hidden}.gantt-usability .month-row span{white-space:nowrap}.gantt-usability .days-row .gantt-week-bucket{padding-top:1px;line-height:11px}.gantt-week-bucket b{display:block;font-weight:500;color:var(--takt-ink-3,#8b8b83)}.gantt-usability .month-row .gantt-week-label{font-weight:500;font-size:10px;color:var(--takt-ink-3,#8b8b83);border-left-color:var(--takt-line,#e6e6e2)}.gantt-usability .track{overflow:hidden}.gantt-usability .gantt-bar-label{position:absolute;top:7px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:16px;pointer-events:none;color:var(--takt-ink-2,#4e4e4e)}.gantt-bar-label.left{transform:translateX(-100%)}.gantt-usability .bar-label,.gantt-usability .summary-label{display:none}.gantt-hide-today .today-line{display:none!important} .gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(210px + 2*var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px 48px 90px 72px;width:calc(806px + var(--gantt-wbs-grow))}.gantt-show-wbs .gantt-natural-condensed .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px;width:500px}.gantt-show-wbs .chart-head .table-cells>span:first-child,.gantt-show-wbs .row-num{justify-content:flex-start}.gantt-wbs{overflow:hidden;text-overflow:ellipsis;max-width:58px;white-space:nowrap;font-size:10px}.gantt-usability [role=gridcell]:focus-visible{outline:2px solid var(--takt-accent,#4b5bd6);outline-offset:-2px}.gantt-usability .takt-cell-editor{width:100%;min-width:0;font:inherit;padding:2px;height:26px}.takt-drop-invalid .table-cells{outline:2px solid #b3261e;outline-offset:-2px}.gantt-usability .connection-handle:focus:not(:focus-visible){opacity:0;pointer-events:none} .gantt-view-dialog{width:min(580px,94vw);max-height:85dvh;overflow:auto;background:var(--takt-paper,#fff);color:var(--takt-ink,#202020);border:1px solid var(--takt-line,#e6e6e2);border-radius:8px;padding:20px;font:13px/1.5 var(--font-sans,Arial,sans-serif)}.gantt-view-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.gantt-view-dialog h2{margin:0}.gantt-view-dialog label{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:12px 0}.gantt-view-dialog input:not([type=checkbox]),.gantt-view-dialog select{max-width:65%;min-width:0}.gantt-view-dialog [role=listbox]{max-height:260px;overflow:auto;border:1px solid var(--takt-line,#e6e6e2);padding:4px}.gantt-view-dialog [role=option]{display:block;width:100%;text-align:left;white-space:normal;border:0;font-size:12px}.gantt-view-dialog [aria-selected=true]{background:#e8ebfd;box-shadow:inset 2px 0 #4b5bd6}.gantt-view-dialog dl,.gantt-editor-extras dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.gantt-view-dialog dd,.gantt-editor-extras dd{margin:0;font-weight:700}.gantt-view-dialog [role=alert],.gantt-editor-extras [role=status]{color:#b3261e}.gantt-editor-extras{border-top:1px solid var(--takt-line,#e6e6e2);margin-top:12px;padding-top:10px}.gantt-editor-extras p{font-size:11px;overflow-wrap:anywhere}.gantt-editor-extras a{color:var(--takt-accent-ink,#16239a)} @media(max-width:1100px){.gantt-usability-toolbar .gantt-tools[aria-label="Activity commands"] button:nth-last-child(-n+2){font-size:11px}.gantt-usability-toolbar .gantt-tools[aria-label="Schedule view"]{flex:1 1 100%}.gantt-usability-toolbar .gantt-tools[aria-label="Dependency commands"]{flex:1 1 auto}} @media(pointer:coarse){.gantt-usability-toolbar button,.gantt-usability-toolbar summary{min-height:44px}.gantt-usability-toolbar input[type=date]{height:44px;font-size:16px}.gantt-view-dialog button,.gantt-view-dialog select,.gantt-view-dialog input{min-height:40px}.gantt-show-wbs .takt-row-drag{min-width:24px}} @media(max-width:760px){.gantt-usability-toolbar .gantt-tools{gap:3px}.gantt-usability-toolbar .gantt-tools[aria-label="Schedule view"] button{padding:5px 7px}.gantt-usability-toolbar .gantt-tools[aria-label="Schedule view"]{gap:3px}.gantt-usability-toolbar #title{font-size:14px}.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(170px + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px 48px 90px 72px;width:calc(652px + var(--gantt-wbs-grow))}.gantt-show-wbs .gantt-natural-condensed .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(150px + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px;width:calc(422px + var(--gantt-wbs-grow))}} .gantt-show-wbs .gantt{--table:calc(806px + var(--gantt-wbs-grow))}.gantt-show-wbs .gantt.gantt-natural-condensed{--table:500px}@media(max-width:760px){.gantt-show-wbs .gantt{--table:calc(652px + var(--gantt-wbs-grow))}.gantt-show-wbs .gantt.gantt-natural-condensed{--table:calc(422px + var(--gantt-wbs-grow))}} /* Keep room for the chart on tablets while retaining the complete table on desktop. */ @media(max-width:1259px){.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px;width:500px}.gantt-show-wbs .gantt{--table:500px}} @media(max-width:760px){.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(150px + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px;width:calc(422px + var(--gantt-wbs-grow))}.gantt-show-wbs .gantt{--table:calc(422px + var(--gantt-wbs-grow))}} body.gantt-usability>main{min-width:0;max-width:100%} /* Keep the sticky task grid above bars, markers and dependency hit areas as the shared Gantt scroller moves the chart beneath the divider. */ .takt-gantt-workspace .table-cells{z-index:var(--gz-chart-table,7)} .gantt-usability .critical-toggle:has(input:disabled){opacity:.55;cursor:not-allowed} @media(pointer:coarse){.gantt-usability:not(.takt-linking) .chart-row:not(:focus-within) .connection-handle:not(.valid-target):not(.target-active){opacity:0;pointer-events:none}.gantt-usability .chart-row:focus-within .connection-handle{opacity:.85;pointer-events:auto}} /* SVG link hit areas must not swallow a fast pointer arriving at an invalid endpoint. Keep endpoints reachable only during drawing; validation still rejects cycles, duplicates and self-links before any command is queued. Only drawing a link shows every circle: panning, bar drags and row drags also hold the gesture lock, and must not light up the chart (Justin, 2026-11-04). */ .takt-gesture-active:not(.takt-linking) .chart-row .connection-handle:not(:focus-visible){opacity:0;pointer-events:none} .gantt-usability.takt-linking .chart-row .connection-handle{opacity:.35;pointer-events:auto} .gantt-usability.takt-linking .chart-row .connection-handle.valid-target,.gantt-usability.takt-linking .chart-row .connection-handle.target-active{opacity:1} .gantt-usability.takt-linking .chart-row .connection-handle.target-invalid{opacity:1;border-color:#b3261e;background:#fce8e6;box-shadow:0 0 0 3px #b3261e22} /* G-203: one width drives the sticky grid, track origin and SVG links. Keep G-202's grid stacking order; narrower tables clip trailing columns. */ .gantt-usability .gantt.gantt-grid-resized .table-cells{width:var(--table);overflow:hidden} @media(min-width:1260px){.gantt-show-wbs .gantt-grid-resized:not(.gantt-natural-condensed) .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(152px,1fr) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px 48px 90px 72px}} /* Divider kit (#918): the grip is a sticky child of .chart-head at the table edge, so the browser keeps it there. Its width nets to zero in the header row; it hangs down the pane to --gantt-divider-h. */ /* BR-0132: the grip's own place in the header row is the table edge too (margin-left), not the row's start, so it only sticks where the table cells stick. iPad bounce at the left edge pulls the whole grid right past its sticky points; a grip placed only by sticky stayed put while the table bounced under it. The margins still net to zero. */ .gantt-grid-divider{position:sticky;left:calc(var(--gantt-table-edge,var(--table)) - 10px);flex:none;align-self:flex-start;width:var(--gantt-grip-w,10px);margin-left:calc(var(--gantt-table-edge,var(--table)) - 10px);margin-right:calc(10px - var(--gantt-table-edge,var(--table)) - var(--gantt-grip-w,10px));height:var(--gantt-divider-h,100%);z-index:var(--gz-chart-divider,9);cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .gantt-grid-divider::before{content:'';position:absolute;top:0;bottom:0;left:4px;width:2px;background:var(--line,#e6e6e2)} /* BR-0110: the handle is sticky at the middle of the pane (--gantt-pane-h, written by the kit only on a resize), so the browser holds it still while rows scroll; it never rides a height that script rewrites on scroll. Its natural place is just under the header, which is where it stays while a tall Timeline strip is still in view. */ .gantt-grid-divider::after{content:'';display:block;position:sticky;top:calc(var(--gantt-pane-h,100%) / 2 - var(--gantt-grip-h,22px) / 2);margin:calc(var(--gantt-head-h,46px) + 8px) 0 0 3px;width:4px;height:var(--gantt-grip-h,22px);border-radius:3px;background:var(--muted,#73736e);opacity:.5} .gantt-grid-divider:hover::before,.gantt-grid-divider:focus-visible::before,.gantt-divider-dragging .gantt-grid-divider::before{background:var(--accent,#4b5bd6)} .gantt-grid-divider:focus-visible{outline:1px solid var(--accent,#4b5bd6);outline-offset:-1px} /* BR-0115: one cover carries the drag cursor; a rule on every element restyled the whole Gantt on grab and release. */ .gantt-divider-dragging{cursor:col-resize!important}.gantt-divider-cover{position:fixed;inset:0;z-index:var(--gz-shell-cover,2147483647);cursor:col-resize!important;background:transparent;touch-action:none} .gantt-grid-divider[hidden]{display:none} @media print{.gantt-grid-divider{display:none}} /* Approved toolbar: one row of labelled icon tools, no outlines (Actions design language). */ .gantt-usability-toolbar{flex-wrap:wrap;align-items:flex-end}.gantt-usability-toolbar .gantt-tools[aria-label="Schedule view"],.gantt-usability-toolbar .gantt-tools[aria-label="Dependency commands"]{flex:0 1 auto}.gantt-usability-toolbar .gantt-tools[aria-label="Dependency commands"]:empty{display:none} .gantt-usability-toolbar .gantt-tools:not([aria-label="Gantt navigation"])+.gantt-tools{padding-left:10px} /* Pressed look: web/precision/precision2.css (icon colour B). */ .gantt-usability-toolbar .gantt-zoom{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;font-size:11px;color:#45484e;margin:0 4px}.gantt-usability-toolbar .gantt-zoom input{width:120px;min-height:24px;accent-color:#4b5bd6} .gantt-usability-toolbar #totals{display:inline-flex;align-items:baseline;gap:6px;border:0;background:transparent;font-size:13px;color:#17181a;white-space:nowrap}.gantt-usability-toolbar #totals small{color:#6c7078;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.gantt-usability-toolbar #totals #finish{display:inline!important} .gantt-usability-toolbar :is(.gantt-more)>div{display:flex;flex-direction:column;min-width:220px}.gantt-usability-toolbar :is(.gantt-more)>div>button{text-align:left;border:0;background:transparent;justify-content:flex-start}.gantt-usability-toolbar :is(.gantt-more)>div>button:hover{background:#f1f2f4}.gantt-more-date{display:flex;flex-direction:column;gap:4px;padding:6px 9px;font-size:12px} /* Hidden links keep their geometry (visibility, not display) so bar labels lay out the same either way and nothing moves (§17A.2a). */ body.gantt-hide-links .links:not([style*="opacity"]){visibility:hidden} @media(max-width:650px){.gantt-usability-toolbar .gantt-zoom,.gantt-usability-toolbar .gantt-zoom input{width:90px;min-width:90px}} /* Redesign part 2: Saved dot, WBS first, visible divider grip, larger milestone grab area, Add menu. */ .takt-gantt-workspace>main>footer>span:nth-child(2){display:none} #saveState{display:inline-flex;align-items:center;gap:6px}#saveState::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#9a9ca3}#saveState[data-state=saved]::before{background:#1a7f5a}#saveState[data-state=pending]::before{background:#c27c0e}#saveState[data-state=error]::before{background:#c4321f}#saveState[data-state=preview]::before{background:#4b5bd6} .takt-gantt-workspace .row-num{justify-content:flex-start}.takt-gantt-workspace .row-num .gantt-wbs{order:-1;min-width:2.2em;text-align:left;font-variant-numeric:tabular-nums;color:#45484e;font-size:11px} .gantt-grid-divider::after{--gantt-grip-h:28px;margin-left:2px;width:6px;border-radius:3px;opacity:.8;background:radial-gradient(circle,#8b8e96 1px,transparent 1.4px) 0 0/3px 4px,#f1f2f4;border:1px solid #d7d9de} /* Easier to find and grab on iPad (Justin, 2026-10-22): a 20px touch strip centred on the line, and a bigger solid darker-grey grip. */ .gantt-grid-divider{--gantt-grip-w:20px}.gantt-grid-divider::before{left:9px} .gantt-grid-divider::after{--gantt-grip-h:48px;margin-left:6px;width:8px;border-radius:4px;opacity:1;background:#5f636b;border:0;box-shadow:0 1px 3px #0000002e} .gantt-grid-divider:hover::after,.gantt-grid-divider:focus-visible::after{background:#454950} .gantt-divider-dragging .gantt-grid-divider::after{background:var(--accent,#4b5bd6);transform:scaleY(1.08)} .gantt-divider-dragging .gantt-grid-divider{outline:none} /* The Timeline strip's left panel follows the table width while the divider is dragged. */ .gantt-grid-resized:not(.hide-table) .tl-strip-head{width:var(--table)!important} .takt-gantt-workspace .bar.milestone::after{content:'';position:absolute;inset:-8px;border-radius:50%} .gantt-add-menu{position:absolute;z-index:var(--gz-shell-toolbar-menu,30);min-width:240px;padding:6px;background:#fff;border:1px solid #e8e9ec;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column}.gantt-add-menu[hidden],.gantt-usability-toolbar .gantt-outline-menu[hidden]{display:none}.gantt-outline-toggle{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none} .gantt-add-menu button{display:flex;align-items:center;gap:12px;border:0!important;background:transparent!important;border-radius:7px;padding:10px!important;text-align:left;min-height:44px}.gantt-add-menu button:hover,.gantt-add-menu button:focus-visible{background:#f3f4f6!important;outline:none} /* Only the task icon is a bar: a colour on every icon came back in dark mode as a square behind the commitment flag. */ .gantt-add-menu i{flex:none;width:26px;height:12px;border-radius:3px}.gantt-add-menu [data-kind=task] i{background:#8eb2f2;border:1px solid #5b8fe6}.gantt-add-menu [data-kind=milestone] i{width:9px;height:9px;margin:0 8.5px;border:0;border-radius:1px;background:#17181a;transform:rotate(45deg)} /* Commitment uses the same flag as its row on the chart (Justin, 2026-10-23), not the task bar. */ .gantt-add-menu [data-kind=commitment] i{width:12px;height:16px;margin:0 7px;border:0;border-radius:0;background:none}.gantt-add-menu [data-kind=commitment] svg{display:block;width:12px;height:16px;fill:none;stroke:#17181a;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.gantt-add-menu [data-kind=commitment] .f{fill:#fff} .gantt-add-menu span{display:flex;flex-direction:column;gap:2px}.gantt-add-menu b{font-size:13px;font-weight:600}.gantt-add-menu small{font-size:11.5px;color:#6c7078}.gantt-add-menu kbd{margin-left:auto;font:11px inherit;color:#6c7078} /* Approved redesign part 3: compact two-column inspector that fits without scrolling on a laptop screen; Delete stays pinned in the footer. */ /* Bar edges (option C, outside grips): a grab zone centred on each task bar edge, half outside the bar so 1-day bars resize from both ends. A 6px white grip shows faintly on hover and solid on the selected row; on touch it shows only when selected. */ .takt-gantt-workspace .bar .resize,.takt-gantt-workspace .bar .takt-resize-start{position:absolute;top:-3px;bottom:-3px;width:10px;cursor:ew-resize;z-index:var(--gz-row-on-bar,4);background:none} .takt-gantt-workspace .bar .resize{left:auto;right:-5px}.takt-gantt-workspace .bar .takt-resize-start{left:-5px} .takt-gantt-workspace .bar .resize::after,.takt-gantt-workspace .bar .takt-resize-start::after{content:'';position:absolute;left:2px;top:0;bottom:0;width:6px;box-sizing:border-box;background:#fff;border:1.5px solid #4b5bd6;border-radius:3px;opacity:0;pointer-events:none} .takt-gantt-workspace .bar:hover :is(.resize,.takt-resize-start)::after{opacity:.55} .takt-gantt-workspace .chart-row.selected .bar :is(.resize,.takt-resize-start)::after{opacity:1} /* #1140 (Justin 2026-11-05): the selected look hugs the mark's own shape, never a square box. Diamond: a thin ring on the rotated ::before, so it follows the diamond. One-day bar (row.takt-narrow-bar, under 48px): the ring sits close and only the finish grip shows; dragging the bar moves it (Justin 2026-11-05: one grip on one-day tasks; longer bars keep both, #930). Link circles are placed by the row scene (lib/gantt-row-scene.ts): on a diamond, level with its tips and clear of the ring. */ .takt-gantt-workspace .chart-row.selected .bar.milestone{outline:none} body.gantt-usability .chart-row.selected .gantt-row-layer>.bar.milestone::before{box-shadow:0 0 0 1.5px var(--panel,#fff),0 0 0 3px var(--accent,#4b5bd6)} .takt-gantt-workspace .chart-row.takt-narrow-bar.selected .bar{outline-offset:1px} .takt-gantt-workspace .chart-row.takt-narrow-bar .bar .takt-resize-start{display:none} @media(pointer:coarse){.takt-gantt-workspace .bar .resize,.takt-gantt-workspace .bar .takt-resize-start{width:16px}.takt-gantt-workspace .bar .resize{right:-8px}.takt-gantt-workspace .bar .takt-resize-start{left:-8px}.takt-gantt-workspace .bar :is(.resize,.takt-resize-start)::after{left:5px}.takt-gantt-workspace .chart-row:not(.selected) .bar:hover :is(.resize,.takt-resize-start)::after{opacity:0}} /* Row height (device preference). The preserved renderer lays rows out on a 30px pitch, so rows resize here, row contents shift to stay centred and the dependency layer is scaled to the same pitch. */ body[data-takt-rows=compact]{--takt-row:24px;--takt-row-shift:-3px;--takt-row-scale:.8} body[data-takt-rows=comfortable]{--takt-row:38px;--takt-row-shift:4px;--takt-row-scale:1.2667} body.takt-gantt-workspace:is([data-takt-rows=compact],[data-takt-rows=comfortable]) .chart-row{height:var(--takt-row)} body.takt-gantt-workspace:is([data-takt-rows=compact],[data-takt-rows=comfortable]) .chart-row .table-cells>span{padding-top:0;padding-bottom:0} body.takt-gantt-workspace:is([data-takt-rows=compact],[data-takt-rows=comfortable]) .links path{vector-effect:non-scaling-stroke} body.takt-gantt-workspace[data-takt-rows=compact] .chart-row .table-cells>span{font-size:11px} /* Option A command bar (approved 2026-10-21): one row at desktop widths (1280 with the collapsed rail); More and Inspector stay top right. Wrapping is for narrow screens only. */ .gantt-usability-toolbar{flex-wrap:nowrap;align-items:center;gap:0 4px!important;padding:6px 10px!important} .gantt-usability-toolbar .gantt-tools{flex-wrap:nowrap;gap:1px} .gantt-usability-toolbar .gantt-tools[aria-label="Gantt navigation"]{flex:0 1 auto;min-width:96px;border-bottom:0;padding-bottom:0} .gantt-usability-toolbar .gantt-tools:not([aria-label="Gantt navigation"])+.gantt-tools{padding-left:4px;margin-left:2px} .gantt-usability-toolbar .gantt-zoom{min-width:96px;margin:0 2px}.gantt-usability-toolbar .gantt-zoom input{width:96px} .gantt-title-block{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;margin-right:6px} .gantt-title-line{display:flex;align-items:center;gap:6px;min-width:0;max-width:190px} .gantt-usability-toolbar .gantt-title-line #title{flex:0 1 auto;min-width:0;padding:0!important;min-height:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0} .gantt-saved-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#1a7f5a}.gantt-saved-dot[data-state=pending]{background:#c27c0e}.gantt-saved-dot[data-state=error]{background:#c4321f}.gantt-saved-dot[data-state=preview]{background:#4b5bd6} .gantt-status-line{display:flex;align-items:baseline;white-space:nowrap;font-size:12px;color:#6c7078;max-width:200px;overflow:hidden} .gantt-usability-toolbar .gantt-status-line #totals{padding:0!important;min-height:0;font-size:12px;color:#45484e;gap:4px}.gantt-usability-toolbar .gantt-status-line #totals small{font-size:12px;text-transform:none;letter-spacing:0} .gantt-late{color:#a4460a;font-weight:600} .gantt-command-spacer{flex:1 1 0;min-width:0} .gantt-usability-toolbar .gantt-tools[aria-label="Share"]{flex-shrink:0;border-left:0!important;padding-left:0;margin-left:0;align-items:center} .gantt-usability-toolbar .gantt-more{margin-left:0} .gantt-menu-heading{margin:4px 9px 2px;font-size:11px;font-weight:600;color:#6c7078;text-transform:uppercase;letter-spacing:.04em} .gantt-export{position:relative}.gantt-export>div{position:absolute;right:0;top:100%;z-index:var(--gz-shell-menu,20);display:flex;flex-direction:column;min-width:220px;padding:6px;background:var(--takt-paper,#fff);border:1px solid var(--takt-line,#e6e6e2);border-radius:8px;box-shadow:0 8px 24px #0002} .gantt-usability-toolbar .gantt-export>div>button{text-align:left;border:0;background:transparent;justify-content:flex-start}.gantt-usability-toolbar .gantt-export>div>button:hover{background:#f1f2f4} .gantt-usability-toolbar :is(.gantt-more)>div{right:0;left:auto} @media(max-width:1199px){.gantt-usability-toolbar{flex-wrap:wrap;row-gap:4px!important}.gantt-command-spacer{display:none}.gantt-usability-toolbar .gantt-tools[aria-label="Share"]{margin-left:auto}} /* Compact tier: the Gantt · Actions · Storyboard switch (about 190px) or the bare development page leaves less room; tighten the tools before anything wraps. */ @media(max-width:1519px){body.takt-unified:has(.tk-views) body.takt-unified:has(.tk-views) .gantt-usability-toolbar .gantt-zoom,body.takt-unified:has(.tk-views) .gantt-usability-toolbar .gantt-zoom input{min-width:72px;width:72px}body.takt-unified:has(.tk-views) .gantt-title-line,body.takt-unified:has(.tk-views) .gantt-status-line{max-width:160px}} @media(max-width:1365px){body:not(.takt-unified) body:not(.takt-unified) .gantt-usability-toolbar .gantt-zoom,body:not(.takt-unified) .gantt-usability-toolbar .gantt-zoom input{min-width:72px;width:72px}body:not(.takt-unified) .gantt-title-line,body:not(.takt-unified) .gantt-status-line{max-width:160px}} /* At 1280 the project switch needs the last 40px: the title gives way a little more so the bar stays one row. */ @media(max-width:1365px){body.takt-unified:has(.tk-views) .gantt-title-line,body.takt-unified:has(.tk-views) .gantt-status-line{max-width:120px}} /* Baseline menu (2026-10-23) made the one-row bar 2px too wide at 1440 with the rail collapsed: the title gives way first, and the right-hand group (with ?) never shrinks. */ @media(max-width:1519px){body.takt-unified .gantt-title-line,body.takt-unified .gantt-status-line{max-width:160px}} .takt-toast-action{margin-left:10px;border:0;background:transparent;color:#9ca5f1;font:inherit;font-weight:600;cursor:pointer;padding:0}.takt-toast-action:hover{text-decoration:underline} .takt-note-action{margin-left:4px;border:0;background:transparent;color:#2532a6;font:inherit;font-weight:600;cursor:pointer;padding:0}.takt-note-action:hover{text-decoration:underline} /* The original v0.2 toolbar is static HTML; keep it unpainted until the maintained workspace has replaced it. The delayed reveal covers a script that never runs. */ body:not(.takt-gantt-ready)>header.topbar,body:not(.takt-gantt-ready)>main{visibility:hidden;animation:takt-gantt-reveal 0s 8s forwards} @keyframes takt-gantt-reveal{to{visibility:visible}} /* Export and More open over the inspector panel. */ .gantt-usability-toolbar:has(details[open]){z-index:var(--tk-z-popup-layer,13000)} /* Chart pane scrollbar (Justin 2026-10-21): the native horizontal bar is hidden and .gantt-hscroll, starting at the table divider, scrolls the same pane. */ .gantt.gantt-proxy-scroll::-webkit-scrollbar{width:11px;height:0}.gantt.gantt-proxy-scroll::-webkit-scrollbar-thumb{background:#c8c8c4;border-radius:6px;border:3px solid #fff}.gantt.gantt-proxy-scroll::-webkit-scrollbar-track{background:#fff} .gantt-hscroll{flex:none;height:12px;overflow-x:auto;overflow-y:hidden;background:#fff;border-top:1px solid #ecece8}.gantt-hscroll[hidden]{display:none}.gantt-hscroll>div{height:1px}.gantt-hscroll::-webkit-scrollbar{height:12px}.gantt-hscroll::-webkit-scrollbar-thumb{background:#c8c8c4;border-radius:6px;border:3px solid #fff}.gantt-hscroll::-webkit-scrollbar-thumb:hover{background:#a9a9a4}.gantt-hscroll::-webkit-scrollbar-track{background:#fff} .gantt-usability-toolbar :is(.gantt-export,.gantt-more)>div{right:0;left:auto} /* Toolbar menus (Export, More) share one popover look, matching the approved Add menu. */ .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu){position:absolute;top:calc(100% + 4px);z-index:var(--gz-shell-toolbar-menu,30);display:flex;flex-direction:column;gap:0;min-width:240px;width:auto;padding:6px;background:#fff;border:1px solid #e8e9ec;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:13px;color:#17181a;text-align:left} .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu)>button{display:flex;align-items:center;justify-content:flex-start;min-height:34px;padding:8px 10px!important;border:0!important;border-radius:7px;background:transparent!important;font:inherit;font-size:13px;color:#17181a;text-align:left;cursor:pointer} .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu)>button[hidden]{display:none} .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu)>button:is(:hover,:focus-visible):not(:disabled){background:#f3f4f6!important;outline:none} .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu)>button:disabled{color:#8a8d94;cursor:default;min-height:28px;padding-bottom:0!important} .gantt-usability-toolbar :is(:is(.gantt-more)>div,.gantt-outline-menu)>button[aria-keyshortcuts]::after{content:attr(aria-keyshortcuts);margin-left:auto;padding-left:16px;font-size:11px;color:#6c7078} .gantt-usability-toolbar :is(.gantt-more)>div>button{gap:10px}.gantt-usability-toolbar :is(.gantt-more)>div>button>.gantt-mi-icon{flex:none;color:#45484e} .gantt-menu-reason{display:block;padding:0 10px 8px;font-size:11px;color:#6c7078} .gantt-usability-toolbar .gantt-more-date{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;font-size:13px;white-space:nowrap}.gantt-usability-toolbar .gantt-more-date input{width:150px;height:30px;font:inherit;font-size:12px} /* Gantt › Display (restyle round 3, Justin 2026-10-31): a settings window. Sections down the left, a sample Gantt on top of the right side, then one column of rows: the setting's name on the left, its drop-down or switch on the right. */ [data-colours][aria-busy=true]{opacity:.6;pointer-events:none} /* The sample Gantt: two weeks of a made-up plan with every mark Display can show. UI-STANDARD §17A.2a: reserve the header, five comfortable rows and borders so settings never shift. */ /* #1007 Display › Labels: starting points and every kind's mark and words (controls kit segments, .tk-seg). */ /* Bar labels grid (Display › Labels): a row per row type, a picker for left, inside and right of the bar. */ @media(pointer:coarse){.gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu)>button{min-height:44px}} /* Bar label look (Display › Labels): size, long names in full, critical in red, done work faded; parts after the first are quieter. */ body[data-takt-labels=small] .gantt-bar-label{font-size:9px}body[data-takt-labels=large] .gantt-bar-label{font-size:12px;line-height:18px} body.gantt-full-names .gantt-bar-label:not(.inside){max-width:none}.gantt-bar-label .gantt-label-meta{font-weight:400;color:#6c7078}.gantt-bar-label.inside .gantt-label-meta{color:inherit} body.gantt-crit-labels.gantt-critical-on .gantt-bar-label.critical:not(.inside){color:#d1343a}body.gantt-fade-done .gantt-bar-label.done{opacity:.5} /* Unified inspector (Option A §6): same style as the approved Milestones/List inspector. One pane, no tabs. */ /* The Storyboard opens over the Gantt: keep the Gantt hidden until it does, so switching to it never flashes the chart. */ /* Option A §7 grid touches. Columns: WBS, Name, Start, Finish, Dur, Pred. Float and Assigned are hidden; their width goes to Name and Pred so the table keeps its width. Bar labels sit on a light background so link lines never strike through them. */ .takt-gantt-workspace .table-cells>span:nth-child(6),.takt-gantt-workspace .table-cells>span:nth-child(8){display:none} .takt-gantt-workspace .table-cells{grid-template-columns:44px minmax(152px,1fr) calc(82px - var(--gantt-date-trim,0px)) calc(82px - var(--gantt-date-trim,0px)) 48px 160px} .gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(280px + var(--gantt-status-room) + 2*var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px minmax(138px,1fr)}.takt-gantt-workspace .chart-head .table-cells>span{text-transform:uppercase} @media(min-width:1260px){.gantt-show-wbs .gantt-grid-resized:not(.gantt-natural-condensed) .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(152px,1fr) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px 138px}} @media(max-width:760px){.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(230px + var(--gantt-status-room) + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px minmax(150px,1fr)}} @media(max-width:1259px){.takt-gantt-workspace .table-cells{grid-template-columns:38px minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}} @media(max-width:760px){.gantt-show-wbs .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(150px + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}} .gantt-natural-condensed .table-cells{grid-template-columns:38px minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}.gantt-show-wbs .gantt-natural-condensed .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(140px,1fr) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px} @media(max-width:760px){.gantt-show-wbs .gantt-natural-condensed .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(150px + 2*var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) calc(80px - var(--gantt-date-trim,0px)) 44px}} /* #1177 / L24: docking keeps the desktop Start, Finish and Duration tracks unchanged. The columns kit keeps fitted Name/WBS and enabled extra columns; the divider kit owns table width. */ @media(min-width:1260px){ .gantt-natural-condensed .table-cells{grid-template-columns:44px minmax(152px,1fr) calc(82px - var(--gantt-date-trim,0px)) calc(82px - var(--gantt-date-trim,0px)) 48px} .gantt-show-wbs .gantt-natural-condensed .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(140px,1fr) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px} } @media(max-width:650px){.takt-gantt-workspace .table-cells{grid-template-columns:34px minmax(110px,1fr) 70px 70px}} .gantt-usability .gantt-bar-label{z-index:var(--gz-row-on-bar,4);padding:0 4px;border-radius:3px;background:rgba(255,255,255,.88);line-height:16px;top:7px} .gantt-usability .gantt-bar-label.left{margin-left:4px}.gantt-usability .gantt-bar-label.right{margin-left:-4px} /* Critical path (Marga idea 1): critical bars, milestone diamonds and links between two critical activities turn red. */ /* Justin 2026-10-23 (Gantt colours): a red outline around the bar's own colour, never a red fill, so the colour still shows. */ .takt-gantt-workspace.gantt-critical-on .links>.dependency-line.critical{stroke:#d1343a;stroke-width:1.6} /* Float tails come with their Display switch (Marga idea 3); until then the original renderer's tails stay hidden. */ .takt-gantt-workspace .float-tail{display:none} /* Finish chip and its totals popover (Marga idea 2). */ .gantt-status-line #totals{display:inline-flex;align-items:baseline;gap:5px;min-height:0!important;padding:1px 8px!important;border:0!important;border-radius:11px;background:#f2f2f4!important;cursor:pointer;white-space:nowrap}.gantt-status-line #totals:hover,.gantt-status-line #totals[aria-expanded=true]{background:#e8e9ec!important} .gantt-totals{position:absolute;z-index:var(--tk-z-popup-layer,13000);width:290px;padding:12px 14px;background:#fff;border:1px solid #e8e9ec;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);font-size:12.5px;color:#17181a}.gantt-totals[hidden]{display:none} .gantt-totals h2{margin:0 0 8px;font-size:13px;font-weight:600}.gantt-totals dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:0}.gantt-totals dt{color:#6c7078}.gantt-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} /* Completion and notes for tasks and milestones (Justin, 2026-10-21), in the unified inspector's style. */ #helpDialog h3{margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7280} /* Pinned start (Start No Earlier Than): a small red pin at the bar's start, and the inspector switch. */ /* Pin badge (option 3, Justin 2026-10-23; the old pin tilted with the milestone diamond): a red disc with a white pin, centred over the start edge (on milestones, a smaller one upright at the diamond's upper-left edge). It stays inside the row (rows clip) and covers only the top of the bar, so the start grip below it stays draggable. */ /* BR-0178 (Justin, 2026-11-08, option A): the pin is a start bracket, at every zoom. It takes no mouse or touch press: the start link bubble under it owns those (BR-0170/#1502), and the pin by the Start date in the table unpins. A pushed task's bracket stays on the pin date with a dotted run to the bar. */ .gantt-pin{appearance:none;padding:0;margin:0;min-width:0;min-height:0;border:0;border-radius:0;box-shadow:none;cursor:default;pointer-events:none;z-index:var(--gz-row-marker,5);color:var(--tk-ink-2);background:linear-gradient(currentColor,currentColor) left top/2px 100% no-repeat,linear-gradient(currentColor,currentColor) left top/6px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/6px 2px no-repeat} .gantt-pin.is-gap{background:linear-gradient(currentColor,currentColor) left top/2px 100% no-repeat,linear-gradient(currentColor,currentColor) left top/6px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/6px 2px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px) 4px 50%/calc(100% - 6px) 1px no-repeat} .gantt-pin:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px} /* BR-0178: the pin by a pinned task's Start date; it unpins. Ink-3 at rest, accent on hover, like the other table controls. */ .takt-start-pin{appearance:none;flex:none;display:inline-grid;place-items:center;width:16px;height:18px;margin-left:3px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--tk-ink-3);cursor:pointer} .takt-start-pin svg{width:9px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .takt-start-pin:hover{color:var(--tk-accent);background:var(--tk-accent-soft)} .takt-start-pin:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px} /* Marga idea 3: slack tails (with Critical; Display > Slack tails). Muted dashed line to the late finish with a short end tick. */ .takt-gantt-workspace.gantt-float-tails .float-tail:not([hidden]){display:block;height:0;border-top:1.5px dashed #9aa3b2;z-index:var(--gz-row-behind,2)} /* z-index 2: above the weekend and day-off shading (.calendar-layer is z-index 1 and comes later), so the SLACK readout is never hidden behind a weekend (Justin, 2026-11-02). */ .takt-gantt-workspace.gantt-float-tails .float-tail::after{content:'';position:absolute;right:0;top:-5px;height:8px;border-left:1.5px solid #9aa3b2} /* Task slack (Justin 2026-10-24, option A): slack tails show whenever Critical is on and end in "+Nd". The tail runs just under the bar so it never strikes through labels; with a baseline (whose ghost bar sits there) or compact rows it stays on the mid-line. */ .takt-gantt-workspace .float-tail{pointer-events:none} body.takt-gantt-workspace.gantt-float-tails:not([data-takt-rows=compact]) .float-tail{top:27px} body.takt-gantt-workspace.gantt-float-tails:not([data-takt-rows=compact]) .float-tail .slack-num{top:-11px;line-height:13px} .float-tail .slack-num{position:absolute;left:100%;top:-8px;padding:0 3px;margin-left:3px;border-radius:3px;background:var(--tk-surface,#fff);font:600 10px/15px 'Obel Mono',ui-monospace,Menlo,monospace;color:var(--tk-ink-3,#6c7078);white-space:nowrap;font-variant-numeric:tabular-nums} .takt-gantt-workspace .table-cells>span.float-zero{color:var(--tk-critical,#e5484d);font-weight:600} /* Critical from here (look B, Justin 2026-10-25): a 16px box with the Critical icon left of every activity where a red chain starts; it opens a note with the reason. */ .gantt-crit-start{position:absolute;top:8px;z-index:var(--gz-row-on-bar,4);height:14px;box-sizing:border-box;transform:translateX(calc(-100% - 22px));padding:0 3px 0 7px;border:0;border-radius:0;background:var(--tk-surface,#fff);color:var(--tk-critical,#e5484d);cursor:pointer} .gantt-crit-start:hover{background:var(--tk-hover,#f3f4f6)}.gantt-crit-start:focus-visible{outline:2px solid var(--tk-accent,#1f6feb);outline-offset:1px} body:not(.gantt-critical-on) .gantt-crit-start{display:none} .gantt-crit-pop{position:fixed;z-index:var(--tk-z-popup-layer,13000);width:290px;box-sizing:border-box;padding:12px 14px;background:var(--tk-surface,#fff);border:1px solid var(--tk-critical,#e5484d);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:12.5px;line-height:1.45;color:var(--tk-ink,#17181a)}.gantt-crit-pop[hidden]{display:none} .gantt-crit-pop .crit-kind{display:block;margin-bottom:6px;font:600 10px/1 'Obel Mono',ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--tk-ink-3,#6c7078)} .gantt-crit-pop strong{display:block;margin-bottom:4px;font-size:12px;color:var(--tk-critical,#e5484d)}.gantt-crit-pop p{margin:0 0 10px} .gantt-crit-pop div{display:flex;flex-wrap:wrap;gap:6px} /* Click-to-move asks first (Justin, 2026-10-31): a small question by the click, like the critical-start note. */ .gantt-place-pop{position:fixed;z-index:var(--tk-z-popup-layer,13000);width:260px;box-sizing:border-box;padding:12px 14px;background:var(--tk-surface,#fff);border:1px solid var(--tk-line,#e8e9ec);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:12.5px;line-height:1.45;color:var(--tk-ink,#17181a)}.gantt-place-pop[hidden]{display:none} .gantt-place-pop strong{display:block;margin-bottom:2px;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}.gantt-place-pop p{margin:0 0 10px;color:var(--tk-ink-2,#45484e)} .gantt-place-pop div{display:flex;gap:6px} @media(pointer:coarse){.gantt-place-pop{--tk-ctl-h-sm:36px}} /* Lead and lag (Justin 2026-10-23, option A): the Help explainer's amber band on the lagged activity's row. Lag is solid and sits in the gap before the bar; lead is dashed and frames the overlapping part of the bar, its days written to the left, clear of the link line and the bar's link handle. */ .takt-lag{position:absolute;top:8px;height:14px;box-sizing:border-box;background:#fff3dd;border:1px solid #b86e00;border-radius:3px;z-index:var(--gz-row-behind,2);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:visible} .takt-lag.is-lead{border-style:dashed} .takt-lag.is-around{top:3px;height:24px} .takt-lag-label{font-size:10px;font-weight:650;line-height:1;color:#b86e00;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none} .takt-lag.is-around .takt-lag-label{position:absolute;right:calc(100% + 24px);top:1px} .takt-lag:hover{border-width:2px} body.gantt-no-lag .takt-lag{display:none} /* Summary bars (option B, Justin 2026-10-23): a soft pill that fills with the phase's rolled-up progress; its label adds the percent. Bracket (Display > Summary bars, Marga idea 7) is the MS Project shape: a dark bar with square feet. Both stay inside the bar row, above baseline ghosts. */ .takt-gantt-workspace .bar.summary{clip-path:none;top:10px;height:10px;border-radius:5px;background:color-mix(in srgb,var(--tk-gantt-sum) 18%,var(--tk-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tk-gantt-sum) 40%,transparent);overflow:hidden} .takt-gantt-workspace .bar.summary .takt-summary-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--tk-gantt-sum);pointer-events:none} .gantt-bar-label.summary{font-weight:700;color:#3f3a8f}.gantt-summary-pct{font-weight:400;color:#6c7078} .takt-gantt-workspace.gantt-summary-bracket .bar.summary{top:9px;height:13px;border-radius:2px 2px 0 0;background:none;box-shadow:inset 0 5px color-mix(in srgb,var(--tk-gantt-sum) 75%,var(--tk-ink));overflow:visible} .takt-gantt-workspace.gantt-summary-bracket .bar.summary::before,.takt-gantt-workspace.gantt-summary-bracket .bar.summary::after{content:'';position:absolute;top:0;width:4px;height:13px;border-radius:1px 1px 2px 2px;background:color-mix(in srgb,var(--tk-gantt-sum) 75%,var(--tk-ink))} .takt-gantt-workspace.gantt-summary-bracket .bar.summary::before{left:0}.takt-gantt-workspace.gantt-summary-bracket .bar.summary::after{right:0} .takt-gantt-workspace.gantt-summary-bracket .bar.summary .takt-summary-fill,body.gantt-summary-bracket .gantt-summary-pct{display:none} .gantt-bar-label.inside{z-index:var(--gz-row-marker,5);color:#fff;background:none;pointer-events:none} /* Actions as bubbles (option C, Justin 2026-10-22): dots on the bar's top edge at each due date, merged into a count badge when crowded or on a milestone. The button is only the strip above the bar (the drawn dot overhangs it), so drags, grips and link circles keep the bar itself. */ /* Toolbar: Actions Selected / All / None, laid out like the other labelled tools (control on top, caption below). */ :is(.gantt-show-menu){position:relative} .gantt-usability-toolbar :is(.gantt-show-menu)>summary{list-style:none}.gantt-usability-toolbar :is(.gantt-show-menu)>summary::-webkit-details-marker{display:none} .gantt-usability-toolbar :is(.gantt-show-menu)>div{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--gz-shell-toolbar-menu,30);display:flex;flex-direction:column;min-width:260px;padding:6px;background:#fff;border:1px solid #e8e9ec;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:13px;color:#17181a;text-align:left} .gantt-usability-toolbar :is(.gantt-show-menu)>div>button{display:flex;align-items:flex-start;gap:8px;min-height:40px;height:auto!important;padding:7px 10px!important;border:0!important;border-radius:7px;background:transparent!important;font:inherit;color:#17181a;text-align:left;cursor:pointer} .gantt-usability-toolbar :is(.gantt-show-menu)>div>button:is(:hover,:focus-visible){background:#f3f4f6!important;outline:none} :is(.gantt-show-menu)>div>button>i{flex:0 0 16px;height:16px;margin-top:1px}:is(.gantt-show-menu)>div>button[aria-checked=true]>i::before{content:'✓';font-style:normal;font-weight:600;color:#4b5bd6} :is(.gantt-show-menu)>div>button>span{display:flex;flex-direction:column;gap:1px}:is(.gantt-show-menu)>div>button b{font-weight:500}:is(.gantt-show-menu)>div>button small{font-size:11.5px;color:#6c7078} @media(pointer:coarse){.gantt-usability-toolbar :is(.gantt-show-menu)>div>button{min-height:44px}} .takt-gantt-workspace .takt-gantt-action-row .task-name{font-style:italic} /* Row menu (right-click) and hover card */ :is(.gantt-context,.gantt-columns-menu){position:fixed;z-index:var(--tk-z-popup-layer,13000);min-width:250px;max-width:320px;padding:6px;background:#fff;border:1px solid #e8e9ec;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;font-size:13px}:is(.gantt-context,.gantt-columns-menu)[hidden]{display:none} .gantt-context-head{margin:0;padding:6px 10px 4px;font-size:11.5px;color:#5f636b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(.gantt-context,.gantt-columns-menu) button:not(.tk-swatch){display:flex;align-items:center;justify-content:space-between;gap:16px;border:0!important;background:transparent!important;border-radius:7px;padding:8px 10px!important;min-height:34px;text-align:left;color:#17181a;font:inherit;cursor:pointer} :is(.gantt-context,.gantt-columns-menu) button:not(.tk-swatch):hover,:is(.gantt-context,.gantt-columns-menu) button:not(.tk-swatch):focus-visible{background:#f3f4f6!important;outline:none} :is(.gantt-context,.gantt-columns-menu) kbd{font:inherit;font-size:12px;color:#5f636b}.gantt-context button.danger,.gantt-context button.danger kbd{color:#b42318} /* .danger twice: the Actions app's .danger:hover (white words) also loads here and turned Delete's words dark on hover in dark mode. */ .gantt-context button.danger.danger:hover:not(:disabled),.gantt-context button.danger.danger:focus-visible{color:#b42318} :is(.gantt-context,.gantt-columns-menu) hr{border:0;border-top:1px solid #eceef1;margin:4px 0} @media (pointer:coarse){:is(.gantt-context,.gantt-columns-menu) button:not(.tk-swatch){min-height:44px}} /* Row menu (#1014): every row has a 16px icon slot so the words line up; keys and checks sit at the right. */ .gantt-context button:not(.tk-swatch){justify-content:flex-start;gap:8px}.gantt-context button:not(.tk-swatch)>kbd{margin-left:auto} .gantt-context-icon{display:inline-flex;flex:none;width:16px;height:16px;align-items:center;justify-content:center} /* Appearance: the Inspector's section title, words and icon (lib/item-actions.ts SECTIONS). */ .gantt-context-section{display:flex;align-items:center;gap:8px;margin:0;padding:6px 10px 2px;font-size:13px;font-weight:600;color:var(--tk-ink,#17181a)}.gantt-context-section>svg{flex:none;width:16px;color:var(--tk-ink-2,#45484e)} .gantt-context-label{display:flex;justify-content:space-between;gap:12px;margin:0;padding:6px 10px 2px 34px;font-size:13px;color:#17181a}.gantt-context-label b{font-weight:400;color:#5f636b} .gantt-context button.gantt-context-quick{font-weight:600}.gantt-context-quick i{width:14px;height:14px;border-radius:3px;flex:none;background:var(--sw);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw) 70%,#000)} /* The shared swatch grid (web/ui-parts.ts), sized for the menu: two even rows of 13. */ .gantt-context .tk-swatches{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:18px;gap:5px;padding:4px 10px 6px} .gantt-context .tk-swatch{width:18px;height:18px} @media (pointer:coarse){.gantt-context:has(.tk-swatches){max-width:372px}.gantt-context .tk-swatches{grid-auto-columns:24px;gap:2px}.gantt-context .tk-swatch{width:24px;height:24px}} .gantt-context-check{margin-left:auto;flex:none;font-style:normal;font-weight:600;color:var(--tk-accent-ink,#3f4fc4)} .gantt-context button.gantt-context-details{font-weight:600;color:var(--tk-accent-ink,#3f4fc4)} .gantt-hover-card{position:fixed;z-index:var(--gz-shell-hover-card,55);max-width:420px;padding:7px 10px;background:#fff;border:1px solid var(--tk-accent-line,#c9cdf3);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:12px;line-height:1.4;color:#3d4048;cursor:pointer;display:grid;gap:1px}.gantt-hover-card[hidden]{display:none}.gantt-hover-card:hover{border-color:var(--tk-accent,#4b5bd6)} .gantt-hover-head{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}.gantt-hover-head b{overflow:hidden;text-overflow:ellipsis;min-width:0}.gantt-hover-head span{flex:none;color:#5f636b}.gantt-hover-head .gantt-hover-wbs{font-variant-numeric:tabular-nums} .gantt-hover-card small{margin-top:3px;font-size:10.5px;color:#5f636b} .gantt-hover-card b{color:#1d1d1f;font-weight:600;overflow-wrap:anywhere}.gantt-hover-card span{overflow-wrap:anywhere}.gantt-hover-card .gantt-hover-also{color:#5f636b} .gantt-hover-card .critical{color:#b42318;font-weight:600} /* Option A: the footer's commands live in More (2026-10-22); the hidden footer still carries #saveState for the Saved dot. */ body.gantt-footer-moved footer:has(#saveState){display:none!important} .gantt-usability-toolbar :is(.gantt-more)>div>a.gantt-menu-link{display:flex;align-items:center;min-height:34px;padding:8px 10px;border-radius:7px;font-size:13px;color:inherit;text-decoration:none}.gantt-usability-toolbar :is(.gantt-more)>div>a.gantt-menu-link:is(:hover,:focus-visible){background:#f3f4f6;outline:none} /* Optional date picker in Start and Finish (Justin, 2026-10-22): shown on the hovered or selected row and while editing. */ /* Scoped off Settings › Calendar, whose Date/Through buttons reuse the class for popover clicks (#874 audit). */ .takt-date-pick:not(.takt-cal-pick){display:none;flex:none;margin-left:auto;width:20px;height:20px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:#6b7280;cursor:pointer} /* BR-0061: with a mouse the calendar shows only over its own date cell, so it never sits against the next date. */ .table-cells>span:hover>.takt-date-pick,.takt-cell-editor~.takt-date-pick{display:grid} @media(hover:none){.chart-row.selected .takt-date-pick{display:grid}} .takt-date-pick:not(.takt-cal-pick):hover{background:#e8ecf2;color:#252a34} .table-cells>span:has(>.takt-cell-editor~.takt-date-pick){gap:2px} @media(hover:none){.chart-row:not(.selected) .table-cells>span:hover>.takt-date-pick{display:none}} /* Long press opens the row menu on iPad: no text selection or callout on the grid. */ .chart-row .table-cells{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .chart-row .takt-cell-editor{-webkit-user-select:text;user-select:text} /* Inspector fits on one screen (Justin, 2026-10-22: ~830px desktop browser and iPad). Tighter header, two-column fields, one row of pill switches, empty states in the section headings, collapsed Notes. The Customer commitment section left the panel while Commitments are redesigned; the records and the Gantt markers are unchanged. */ /* iPad: 36px touch controls instead of the generic 44px, so the panel still fits a landscape screen. */ /* Commitment rows (option B, 2026-10-22): a flag at the end of the committed day, never a bar. Filled = Customer, outlined = Internal. */ .chart-row .bar.commitment,.chart-row .bar.commitment *{opacity:0;pointer-events:none!important} /* Work waits for a commitment (option A, 2026-10-23): drag from the circle after the flag. A link dropped on that circle from a task or milestone makes the commitment due after it (2026-10-28). */ .takt-commitment-row .connection-handle[data-endpoint=S]{display:none} /* #932: on a commitment row the flag itself starts links (flag pointerdown in gantt-interactions), so the finish handle never takes the flag's clicks or hover (UI-STANDARD §20.3 L17/L25). */ [data-row]:has(.takt-commitment-flag) .connection-handle[data-endpoint=F]{pointer-events:none} .takt-gantt-workspace .links>.dependency-line.waits-for{stroke-dasharray:3 2}.takt-gantt-workspace .links>.dependency-line.waits-for:not(.broken):not(.in-chain):not(.takt-hl){stroke:#45484e} .takt-commitment-flag{position:absolute;top:5px;width:12px;height:16px;margin-left:-1px;z-index:var(--gz-row-on-bar,4);pointer-events:auto;cursor:crosshair;touch-action:none} /* #967: the flag keeps its 12x16 look but takes clicks from a 24x22 area around it (UI-STANDARD §17A.2a: nothing grows or moves). Its own finish circle sits on top of the flag, so outside a link drag it stays hidden; the flag itself is the link start. */ .takt-commitment-flag::before{content:"";position:absolute;inset:-3px -6px} body:not(.takt-linking) [data-row]:has(.takt-commitment-flag) .connection-handle[data-endpoint=F]{opacity:0!important;pointer-events:none!important} .takt-commitment-flag svg{display:block;width:12px;height:16px;fill:none;stroke:var(--tk-commit);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round} .takt-commitment-flag.internal .f{fill:#fff}.takt-commitment-flag.customer .f{fill:#17181a} .takt-commitment-flag.late svg{stroke:var(--takt-late-mark,#d1343a)}.takt-commitment-flag.customer.late .f{fill:var(--takt-late-mark,#d1343a)} /* Due after (2026-10-28): a dashed accent line into the flag, and a faint flag on the first committed date once it moved. */ .takt-gantt-workspace .links>.dependency-line.due-after:not(.broken):not(.critical){stroke:var(--tk-accent,#4b5bd6);stroke-dasharray:4 3} .takt-commitment-ghost{color:var(--takt-slip,var(--tk-ink,#17181a));position:absolute;top:5px;width:12px;height:16px;margin-left:-1px;z-index:var(--gz-row-bar,3);opacity:.35;pointer-events:auto} .takt-commitment-ghost svg{display:block;width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:2 1.5;stroke-linejoin:round} .takt-commitment-ghost.customer .f{fill:currentColor;fill-opacity:.4} .takt-commitment-gap{position:absolute;top:12px;height:0;border-top:2px dashed #287366;z-index:var(--gz-row-behind,2);pointer-events:auto} .takt-commitment-gap.late{border-color:var(--takt-late-mark,#d1343a)} /* The "+Nd" sits beside the end ring, clear of the flag even on a one-day line (Justin, 2026-10-24). */ .takt-commitment-gap::before{content:attr(data-label);position:absolute;top:-8px;font-size:10px;font-weight:600;line-height:14px;color:#287366;white-space:nowrap} .takt-commitment-gap.late::before{left:calc(100% + 10px)}.takt-commitment-gap.early::before{right:calc(100% + 10px)} .takt-commitment-gap.late::before{color:#b45a4a} .takt-name-flag{display:inline-flex;flex:none;margin-right:6px}.takt-name-flag svg{display:block;width:9px;height:12px;fill:none;stroke:#17181a;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.takt-name-flag .f{fill:#fff}.takt-commitment-row.customer .takt-name-flag .f{fill:#17181a} /* Commitment panel laid out like the activity panel (Justin, 2026-10-23): two-column fields, pill switches, compact sections. */ /* Link look C (Justin 2026-10-22): a dot where each line lands, the selected activity's links in blue with the rest faded, and a broken link (duplicate, summary end, or a start earlier than it allows) dashed orange. */ .takt-gantt-workspace .links>.dependency-dot{fill:#8a94a6;pointer-events:none} .takt-gantt-workspace .links.has-chain>.dependency-line:not(.in-chain):not(.broken),.takt-gantt-workspace .links.has-chain>.dependency-dot:not(.in-chain):not(.broken){opacity:.35} .takt-gantt-workspace .links>.dependency-line.in-chain{stroke:#4b5bd6;stroke-width:2}.takt-gantt-workspace .links>.dependency-dot.in-chain{fill:#4b5bd6} .takt-gantt-workspace .links>.dependency-line.broken.broken{stroke:#c2410c;stroke-width:1.75;stroke-dasharray:4 3}.takt-gantt-workspace .links>.dependency-dot.broken{fill:#c2410c} .takt-gantt-workspace.gantt-critical-on .links>.dependency-dot.critical{fill:#d1343a} #dependency-editor .takt-link-problem{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0 8px;padding:10px 12px;border-radius:6px;background:#fff4ed;color:#7c2d12;line-height:1.45}#dependency-editor .takt-link-problem[hidden]{display:none}#dependency-editor .takt-link-problem p{margin:0} /* Zoomed out, the calendar layer draws one line per week, month or quarter instead of each row's per-day pattern (#234). */ .gantt-coarse-grid .track{background-image:none} .gantt-grid-line{position:absolute;top:0;bottom:0;border-left:1px solid var(--grid);pointer-events:none} /* #1116 / UI §20.2: open date cells; only shared header/body boundaries draw a line. */ .gantt-usability .days-row .gantt-date-bucket{border-left:0;border-right:0} .gantt-usability .days-row .gantt-date-boundary{border-left:1px solid var(--tk-grid-line)} /* BR-0108: a date or pinned period name that reaches the table edge fades out quickly (filter, so it composes with the tier fades on opacity). */ .gantt-usability :is(.days-row,.month-row) [data-key]>*{transition:filter var(--tk-dur-fast,120ms) ease-out}.gantt-usability :is(.days-row,.month-row) [data-edge-gone]>*{filter:opacity(0)} @media (prefers-reduced-motion:reduce){.gantt-usability :is(.days-row,.month-row) [data-key]>*{transition:none}} .gantt-usability .days-row .gantt-date-major,.gantt-usability .gantt-grid-line.gantt-date-major{border-left-color:var(--tk-grid-line-major)} /* clip preserves the chart viewport without making an intervening scroll container for sticky period labels. */ .gantt-usability :is(.timeline-head,.month-row){overflow:clip} .gantt-usability .month-row .gantt-period{padding:0;height:100%} .gantt-usability .month-row .gantt-period-label{position:sticky;left:var(--table);display:inline-block;width:max-content;border:0;z-index:var(--gz-head-period-label,1);background:var(--tk-surface)} /* Baseline drift (option B, Justin 2026-10-22): a grey ghost bar under each bar at its baseline dates, a slip badge after every moved bar (orange later, blue earlier, working days), and a Variance column on wide screens. */ /* z-index 2: above the weekend and day-off shading (.calendar-layer is z-index 1 and comes later), below bars and links (#934). */ .takt-baseline-ghost{position:absolute;top:25px;height:4px;border-radius:2px;background:var(--tk-baseline-ghost,#b4b8c0);z-index:var(--gz-row-behind,2);pointer-events:none} .takt-baseline-ghost.summary{height:3px;background:#c9ccd2} /* A baseline milestone is a solid grey diamond the size of the milestone (#910, History kit #913), behind the real one: it shows once the milestone has moved. */ .takt-baseline-ghost.milestone{top:10px;width:12px;height:12px;border:0;border-radius:0;background:var(--tk-baseline-ghost,#b4b8c0);transform:rotate(45deg)} .takt-baseline-slip{position:absolute;top:8px;min-width:36px;box-sizing:border-box;padding:0 5px;border-radius:4px;font:700 10.5px/15px var(--tk-font,"Saira",Arial,sans-serif);text-align:center;z-index:var(--gz-row-on-bar,4);pointer-events:auto;cursor:default;font-variant-numeric:tabular-nums} .takt-baseline-slip.late{color:#8a3608;background:#fdebdd}.takt-baseline-slip.early{color:#172394;background:#e3e5fb} .takt-gantt-workspace .chart-row .table-cells>span[data-slip]{font-weight:600;font-variant-numeric:tabular-nums;color:#8b8b83}.takt-gantt-workspace .chart-row .table-cells>span[data-slip=late]{color:#b4470b}.takt-gantt-workspace .chart-row .table-cells>span[data-slip=early]{color:#3f4fc4} body.takt-gantt-workspace:is([data-takt-rows=compact],[data-takt-rows=comfortable]) .chart-row :is(.takt-baseline-ghost,.takt-baseline-slip){translate:0 var(--takt-row-shift)} body[data-takt-rows=compact] .takt-baseline-ghost:not(.milestone){top:23px;height:3px} @media(min-width:1260px){ body.takt-gantt-workspace.gantt-baseline-on .gantt:not(.gantt-natural-condensed) .table-cells>span:nth-child(8){display:flex} body.takt-gantt-workspace.gantt-baseline-on .gantt:not(.gantt-natural-condensed) .table-cells{grid-template-columns:44px minmax(152px,1fr) calc(82px - var(--gantt-date-trim,0px)) calc(82px - var(--gantt-date-trim,0px)) 48px 108px 52px} body.gantt-show-wbs.gantt-baseline-on .gantt:not(.gantt-natural-condensed) .table-cells{grid-template-columns:var(--gantt-wbs-col) calc(250px + var(--gantt-status-room) + 2*var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px minmax(96px,1fr) 52px} body.gantt-show-wbs.gantt-baseline-on .gantt-grid-resized:not(.gantt-natural-condensed) .table-cells{grid-template-columns:var(--gantt-wbs-col) minmax(152px,1fr) calc(83px - var(--gantt-date-trim,0px)) calc(83px - var(--gantt-date-trim,0px)) 42px 96px 52px} } .takt-baseline-lead{margin:0 0 14px;color:var(--tk-ink-2,#5f636b)} /* The Original (Justin, 2026-10-28): a tag in the Baseline menu, and the choice to replace it when taking a new baseline. */ .takt-baseline-modes{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .takt-baseline-dialog label{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;font-size:12px;font-weight:600;color:#5f636b} .takt-baseline-dialog label>:is(.tk-input,.tk-textarea){display:block;margin:0} .takt-baseline-dialog .takt-baseline-check{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;margin:2px 0 16px;font-weight:400;font-size:13px;color:#17181a;cursor:pointer} .takt-baseline-dialog .takt-baseline-check[hidden]{display:none} .takt-baseline-error{margin:0 0 16px;padding:9px 11px;border-radius:6px;background:#fdecea;color:#a72a27;font-size:13px;line-height:1.4}.takt-baseline-error[hidden]{display:none} /* Baseline menu: fixed width so hints wrap inside it; even spacing between Compare to, badges and Take baseline. */ /* Commitment slip chart: forecast minus committed date per snapshot; above the zero line is late. */ /* Unsaved changes: one compact line per change, bulk Retry all / Discard all on top (Justin, 2026-10-23). */ .takt-unsaved-dialog .tk-win-body>p{margin:0 0 10px;color:var(--tk-ink-2,#5f636b)} .takt-unsaved-bulk{display:flex;gap:8px;margin-bottom:12px} .takt-unsaved-list{border-top:1px solid var(--tk-line,#eceef1);border-bottom:1px solid var(--tk-line,#eceef1)}.takt-unsaved-list:empty{display:none} .takt-unsaved-row{display:flex;align-items:center;gap:10px;padding:5px 2px;border-bottom:1px solid #f2f3f5}.takt-unsaved-row:last-child{border-bottom:0} .takt-unsaved-row p{flex:1;min-width:0;margin:0;font-size:12.5px}.takt-unsaved-row span{color:#5f636b}.takt-unsaved-row strong{font-weight:600} .takt-unsaved-actions{display:flex;gap:4px;flex:none} .takt-unsaved-banner{display:flex;align-items:center;gap:10px;margin:0;padding:6px 12px;background:#fdecea;color:#a72a27;font-size:12.5px;font-weight:600}.takt-unsaved-banner[hidden]{display:none} .takt-unsaved-banner button{min-height:24px;padding:0 10px;border:1px solid #a72a27;border-radius:6px;background:#fff;color:#a72a27;font:600 12px var(--tk-font,"Saira",Arial,sans-serif);cursor:pointer} /* Team strip under the chart (Team plan, mockup board E): display only, on the Gantt's week columns. */ .gt-team{border-top:2px solid var(--line,#e2e5ea);background:#fbfdfc;font:12px Inter,-apple-system,'Segoe UI',system-ui,sans-serif;color:#17181a} .gt-team-row{display:flex;min-height:34px;border-bottom:1px solid #eef0f2} .gt-team-label{position:sticky;left:0;z-index:var(--gz-row-bar,3);flex:none;width:var(--table);box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:4px 12px;background:#fbfbfc;border-right:1px solid var(--line,#e2e5ea);min-width:0} .gantt-grid-resized:not(.hide-table) .gt-team-label{width:var(--table)} .hide-table .gt-team-label{width:auto;max-width:280px;border-right:0;background:transparent} .gt-team-label strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gt-team-modes{flex:none;--tk-ctl-h:30px} .gt-team-edit{font-size:11.5px;font-weight:600;color:#3f4fc4;text-decoration:none;white-space:nowrap}.gt-team-edit:hover{text-decoration:underline} .gt-team-lane{position:relative;flex:none;min-height:34px} .gt-team-week{position:absolute;top:0;bottom:0;box-sizing:border-box;display:flex;flex-wrap:wrap;align-content:center;gap:3px;padding:3px 4px;border-left:1px solid #eef0f2;overflow:hidden;font-size:11px;font-weight:700;color:#0d4a33} .gt-team-week.is-now{background:#f3f4fd} .gt-team-week.is-unplanned{color:#6c7078;font-weight:500;background:repeating-linear-gradient(135deg,#fbfbfc 0 6px,#f3f4f6 6px 12px);justify-content:flex-start;padding-left:8px} .gt-team-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px 0 2px;border-radius:10px;background:#e3f3ea;color:#0d4a33;font-size:10.5px;font-weight:700;white-space:nowrap} .gt-team-chip i{width:16px;height:16px;border-radius:8px;background:#17181a;color:#fff;font-size:8px;font-style:normal;display:inline-flex;align-items:center;justify-content:center} .gt-team-chip.is-off{background:#eceef1;color:#45484e} .gt-team-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:#e3f3ea} .gt-team-person i{flex:0 0 22px;height:22px;border-radius:11px;background:#17181a;color:#fff;font-size:9px;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center} .gt-team-person span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gt-team-person small{color:#6c7078;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gt-team-block{position:absolute;top:5px;bottom:5px;margin:0 3px;box-sizing:border-box;border-radius:6px;background:#cdeadb;color:#0d4a33;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;white-space:nowrap} .gt-team-block.is-high{background:#1a7f5a;color:#fff}.gt-team-block.is-off{background:#eceef1} .gt-team-block small{font-size:10px;font-weight:600;border-radius:4px;padding:0 4px;background:#ffffffcc;color:#17181a}.gt-team-block small.is-travel{background:#e8ebfd;color:#131f88}.gt-team-block small.is-over{background:#fbe0c4;color:#8a3d00} /* Load from the Gantt (People kit B): a thin meter of the week's five weekdays along the foot of a Team strip row's block. */ .gt-team-block.is-gantt{background:#e8ebfd;color:#131f88}.gt-team-block small.is-gantt{background:#ffffffcc;color:#131f88} .gt-team-meter{position:absolute;left:4px;right:4px;bottom:2px;height:3px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;pointer-events:none} .gt-team-meter>i{border-radius:1px;background:#ffffff99}.gt-team-meter>i.is-work{background:var(--tk-gantt-bar,#4b6fd6)} .gt-team-meter>i.is-off{background:repeating-linear-gradient(135deg,#9aa0a8 0 1px,transparent 1px 3px)}.gt-team-meter>i.is-over{background:var(--tk-warn,#b7791f)} .gt-team-empty{margin:0;padding:10px 12px;color:#6c7078;position:sticky;left:0} @media print{.gt-team{display:none}} /* Materials under the chart, above the Team strip (Justin, 2026-10-27): one row per need-by date or task with parts. */ .gt-mat{border-top:2px solid var(--line,#e2e5ea);background:#fbfbfc;font:12px Inter,-apple-system,'Segoe UI',system-ui,sans-serif;color:#17181a} .gt-mat-row{display:flex;min-height:38px;border-bottom:1px solid #eef0f2}.gt-mat-head{min-height:28px} .gt-mat-label{all:unset;position:sticky;left:0;z-index:var(--gz-row-bar,3);flex:none;width:var(--table);box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:4px 12px;background:#fbfbfc;border-right:1px solid var(--line,#e2e5ea);min-width:0;cursor:pointer} .gt-mat-head .gt-mat-label{cursor:default} .gantt-grid-resized:not(.hide-table) .gt-mat-label{width:var(--table)} .hide-table .gt-mat-label{width:auto;max-width:280px;border-right:0;background:transparent} button.gt-mat-label:hover{background:#f3f4f6}button.gt-mat-label:focus-visible{outline:2px solid #4b5bd6;outline-offset:-2px} .gt-mat-label strong{display:inline-flex;align-items:center;gap:6px;font-size:12px}.gt-mat-label strong svg{color:#5b3fd0} .gt-mat-state{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px} .gt-mat-state.is-late{background:#fdeaea;color:#b4232a}.gt-mat-state.is-soon{background:#fdf3e1;color:#8a5a12}.gt-mat-state.is-ok{background:#e7f5ee;color:#1a7f5a} .gt-mat-name{display:grid;min-width:0;line-height:1.3}.gt-mat-name b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gt-mat-name small{color:#6c7078;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gt-mat-lane{position:relative;flex:none;min-height:28px} .gt-mat-bar{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px} .gt-mat-bar.is-late{background:#d1343a}.gt-mat-bar.is-soon{background:#b7791f}.gt-mat-bar.is-ok{background:#1a7f5a} .gt-mat-bar.is-open{height:0;margin-top:-1px;border-top:2px dashed #d1343a;background:none} .gt-mat-need{position:absolute;top:50%;width:2px;height:20px;margin-top:-10px;border-radius:1px;background:#17181a} @media print{.gt-mat{display:none}} body.gantt-fullscreen .gt-mat{display:none!important} /* Link an Action from the Gantt (2026-10-23): the find-or-create picker under Linked Actions, and Unlink on each row. */ /* minmax(0,1fr): an auto column grows to the longest action name and pushes the picker past the inspector (2026-10-23). */ /* The shared calendar opens above the inspector (z-index 9000) when a commitment's date is picked there. */ body .takt-date-popover{z-index:calc(var(--tk-z-popup-layer,13000) + 2)} /* WBS column room (Justin, 2026-10-24): deep numbers like 1.1.4.12 read in full beside the grab dots and the Timeline button, with more room on touch where both are larger. The table grows by the same amount rather than squeezing Name (except the 500px tablet and condensed tables, where Name flexes), and a fixed-width Name gets back the room the status icon takes (24px, 34px on touch; web/gantt-status.ts). */ /* Names get room (Justin, 2026-11-01, review #577 item 1): the row's Timeline button left, so the WBS + grip column is about 80px (88px on touch) and the room it gave up goes to a fixed-width Name (added to --gantt-status-room, which only Name uses). */ :root{--gantt-wbs-col:80px;--gantt-wbs-grow:24px;--gantt-status-room:46px} @media(pointer:coarse){:root{--gantt-wbs-col:88px;--gantt-wbs-grow:38px;--gantt-status-room:62px}} @media(max-width:760px){:root{--gantt-wbs-col:72px;--gantt-wbs-grow:20px;--gantt-status-room:40px}} @media(max-width:760px) and (pointer:coarse){:root{--gantt-wbs-col:80px;--gantt-wbs-grow:32px;--gantt-status-room:54px}} /* WBS left-justified: the number fills the cell from the left, the grab dots sit at the right. The app's own .table-cells>span.row-num centres the cell, so this needs the extra weight. */ .gantt-show-wbs.takt-gantt-workspace .table-cells>span.row-num{justify-content:flex-start;padding-left:6px;padding-right:2px}.gantt-show-wbs.takt-gantt-workspace .row-num .gantt-wbs{flex:1 1 auto;min-width:0;max-width:none} /* Row drag (2026-10-23): the line where the row will land, at the depth it will land, and the row being moved dimmed. */ .takt-drop-marker{position:fixed;z-index:var(--gz-shell-drop-marker,60);height:3px;border-radius:2px;background:var(--accent);pointer-events:none}.takt-drop-marker::before{content:'';position:absolute;left:-4px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent)} .takt-drag-source .table-cells>span{opacity:.45} /* Gantt colours (option B, Justin 2026-10-23): a bar with a chosen colour carries --gc, a theme variable from tokens.css (Dark mode swaps it). Bars without one keep the look above. The pill tints the colour; its fill and the bracket use it solid. !important: a chosen colour must beat the generated dark-theme overrides of the default bar colours (web/precision/dark.css). */ .takt-gantt-workspace .bar.takt-gc:not(.summary){--bar-c:var(--gc);background:var(--bar-paint,var(--bar-c))!important;box-shadow:none} /* Bar styles › Task fill (#1188, web/bar-styles.ts): Light and Outline paint task bars from their own colour (--bar-c); the sample Gantts' half is in web/settings-panes.css. The edge is an outline, so the critical ring (a box-shadow) still shows around them. */ :root[data-bar-fill=light] .takt-gantt-workspace .bar:not(.summary,.milestone,.takt-buffer,.takt-wait){--bar-paint:color-mix(in srgb,var(--bar-c) 30%,var(--tk-surface));outline:1px solid var(--bar-c);outline-offset:-1px} :root[data-bar-fill=outline] .takt-gantt-workspace .bar:not(.summary,.milestone,.takt-buffer,.takt-wait){--bar-paint:var(--tk-surface);outline:1px solid var(--bar-c);outline-offset:-1px} .takt-gantt-workspace .bar.summary.takt-gc{background:color-mix(in srgb,var(--gc) 22%,var(--tk-surface))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc) 45%,transparent)!important} .takt-gantt-workspace .bar.summary.takt-gc .takt-summary-fill{background:var(--gc)!important} .takt-gantt-workspace.gantt-summary-bracket .bar.summary.takt-gc{background:none!important;box-shadow:inset 0 5px var(--gc)!important} .takt-gantt-workspace.gantt-summary-bracket .bar.summary.takt-gc::before,.takt-gantt-workspace.gantt-summary-bracket .bar.summary.takt-gc::after{background:var(--gc)!important} /* Amber and Mustard stay bright yellow (palette E, Justin 2026-11-02): a thin darker edge on white, dark letters inside. */ :root:not([data-theme=dark]) .takt-gantt-workspace .bar.takt-gc.takt-gc-bright:not(.summary){box-shadow:inset 0 0 0 1px rgba(23,24,26,.32)!important} .chart-row:has(.bar.takt-gc-bright) .gantt-bar-label.inside{color:#16183a} /* Waits for (option A, 2026-10-23): the commitments this task waits on, above its predecessors. */ /* History in the Plan window (option A, Justin 2026-11-05). Its columns, rows, text, numbers and links are kit parts (.tk-split, .tk-listrow.is-compact, .tk-setting-row, .tk-value, .tk-link; Justin 2026-11-06 "no one-offs"). What stays here is the finish chart's drawing and the version row's columns. */ .takt-history-chart{display:block;width:100%;height:auto;flex:none} .takt-history-axis{font:10px var(--tk-font-num,"Obel Mono",ui-monospace,monospace);fill:var(--tk-ink-3,#6c7078)} .takt-history-grid{stroke:var(--tk-line,#e8e9ec)} .takt-history-base{stroke:var(--tk-ink-3,#6c7078);stroke-dasharray:3 3} .takt-history-title{font:600 12px var(--tk-font,"IBM Plex Sans",system-ui,sans-serif);fill:var(--tk-ink,#17181a)}.takt-history-sum{font:11px var(--tk-font,"IBM Plex Sans",system-ui,sans-serif);fill:var(--tk-ink-3,#6c7078)} .takt-history-sum-date{font-weight:600;fill:var(--tk-ink,#17181a)}.takt-history-sum-date.is-late{fill:var(--tk-late,#d1343a)}.takt-history-sum-date.is-early{fill:var(--tk-ok,#1a7f5a)} .takt-history-cap{font:10px var(--tk-font,"IBM Plex Sans",system-ui,sans-serif);fill:var(--tk-ink-3,#6c7078)}.takt-history-tick{stroke:var(--tk-line,#e3e5ea);stroke-width:1} .takt-history-line{fill:none;stroke:var(--tk-accent,#4b5bd6);stroke-width:1.75} .takt-history-now-dot{fill:var(--tk-accent,#4b5bd6)} .takt-history-now-text{font:600 11px var(--tk-font-num,"Obel Mono",ui-monospace,monospace);fill:var(--tk-ink,#17181a)} .takt-history-now-text.is-late{fill:var(--tk-late,#d1343a)}.takt-history-now-text.is-early{fill:var(--tk-ok,#1a7f5a)} .takt-history-hit{cursor:pointer;outline:none}.takt-history-pad{fill:transparent} .takt-history-hit:focus-visible .takt-history-pad{stroke:var(--tk-accent,#4b5bd6);stroke-width:1.5} .takt-history-ring{fill:none;stroke:var(--tk-accent,#4b5bd6);stroke-width:1.5;pointer-events:none} .takt-history-mk.baseline{fill:var(--tk-ink-2,#45484e)} .takt-history-mk.snapshot{fill:var(--tk-accent,#4b5bd6)} .takt-history-mk.automatic{fill:none;stroke:var(--tk-ink-3,#6c7078);stroke-width:1.4} .takt-history-mk.commitment{fill:none;stroke:var(--tk-warn,#b7791f);stroke-width:1.3;stroke-linejoin:round} .takt-history-key{display:flex;flex-wrap:wrap;gap:2px var(--tk-dens-sec,12px);margin-bottom:var(--tk-dens-sec,12px);font-size:var(--tk-fs-sm,12px);color:var(--tk-ink-3,#6c7078)} .takt-history-key span{display:inline-flex;align-items:center;gap:var(--tk-dens-gap,8px)}.takt-history-key svg{width:10px;height:10px;overflow:visible} .takt-history-dash{width:16px;border-top:1px dashed var(--tk-ink-3,#6c7078)} .takt-history-list{display:flex;flex-direction:column} .takt-history-row{display:grid;grid-template-columns:18px minmax(0,1fr) 64px 48px;flex:none} .takt-history-mark{display:grid;place-items:center}.takt-history-mark svg{width:12px;height:12px;overflow:visible} .takt-history-now-mark{width:7px;height:7px;border-radius:50%;background:var(--tk-accent,#4b5bd6)} .takt-history-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .takt-history-name b{font-weight:500}.takt-history-row.is-now .takt-history-name b{font-weight:600} .takt-history-name :is(em,small){margin-left:var(--tk-dens-gap,8px);font-style:normal;font-size:var(--tk-fs-sm,12px);color:var(--tk-ink-3,#6c7078)} .takt-history-name em{color:var(--tk-accent,#4b5bd6)} /* Plan window › History › Recently deleted (History kit #913): folded under the list; Restore sits in the date columns. */ .takt-history-deleted:empty{display:none}.takt-history-row.is-deleted .takt-history-undelete{grid-column:3/span 2;justify-self:end}.takt-history-row.is-deleted .takt-history-name b{color:var(--tk-ink-2,#4a4e57)} /* The read-only snapshot view (Justin, 2026-10-22, option B). */ .takt-snapshot-compare{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer;white-space:nowrap}.takt-snapshot-compare input{width:16px;height:16px;margin:0;accent-color:#3f4fc4} .takt-snapshot-summary{margin:0;padding:8px 20px;background:#fff8f1;border-bottom:1px solid #f3e2d2;color:#6d3a10} .takt-snapshot-view .tk-win-sub{flex:0 1 auto}.takt-snapshot-view .tk-win-actions{margin-left:auto;gap:16px} .takt-snapshot-page{flex:1;min-height:0;overflow:auto;padding:16px;background:#eef0f3}.takt-snapshot-svg{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)} /* Command bar rule (docs/SPEC.md rule 9): in the shell the bar reads switch, saved dot, then tools. The project name and its finish stay for screen readers; the sidebar shows the project (Justin, 2026-10-24). */ body.takt-unified .gantt-usability-toolbar .gantt-title-block{margin:0 6px 0 -2px} body.takt-unified .gantt-usability-toolbar .gantt-title-line #title,body.takt-unified .gantt-usability-toolbar .gantt-status-line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} body.takt-unified .gantt-usability-toolbar .gantt-saved-dot{width:8px;height:8px} body.takt-unified .gantt-usability-toolbar .gantt-tools[aria-label="Gantt navigation"]{min-width:0;flex:0 0 auto} body.takt-unified .gantt-usability-toolbar .gantt-title-line{max-width:none} /* BR-0045: which project is open, in the table header's empty top band (nothing moves; the shell bar shows it below 901px). BR-0150 (Justin 2026-11-08 "totally hidden"): it reads as a button. A quiet pill, the name and the switch mark (the sidebar's Switch project icon, ⇕) that never cuts off: the name ends in "…" before it. Hover fills the pill. One pseudo-element, no node, so the renderer's redraws never drop it; the mark is its background. */ :root{--takt-switch-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' fill='none' stroke='%235a5f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} :root[data-theme=dark]{--takt-switch-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' fill='none' stroke='%23a3a8d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} @media(min-width:901px){body.takt-unified .chart-head .table-cells::before{content:var(--takt-project-label,"");position:absolute;top:1px;left:6px;box-sizing:border-box;max-width:calc(100% - 12px);height:20px;padding:0 24px 0 9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 12px/18px var(--tk-font,inherit);letter-spacing:0;text-transform:none;color:var(--tk-ink-2,#45484e);border:1px solid var(--tk-line,#e8e9ec);border-radius:999px;background:var(--takt-switch-mark) no-repeat right 7px center/12px 12px;pointer-events:auto;cursor:pointer;transition:background-color var(--tk-dur-fast,120ms),color var(--tk-dur-fast,120ms)} /* BR-0054: the name opens the project switcher (web/gantt-interactions.ts). */ body.takt-unified .chart-head .table-cells:hover::before{color:var(--tk-ink,#16183a);background-color:var(--tk-hover,#eef0fb)}} /* Task status (concept A, Justin 2026-10-23): a narrow icon at the start of Name, so the table keeps its width. web/gantt-status.ts adds the icon's room to each name's indent, and the icon sits at the cell's left edge. */ .takt-gantt-workspace .chart-row .task-name{position:relative} .takt-gantt-workspace .task-name>.takt-st{position:absolute;left:2px;top:50%;width:22px;height:22px;margin-top:-11px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer} /* BR-0135 (Justin 2026-11-08, "squares around the status circles"): the highlight is a soft round halo hugging the ring, never a box, and hover shows only where there is a pointer to hover with: a tap on the iPad left the box behind. */ .takt-gantt-workspace .task-name>.takt-st svg{border-radius:50%;transition:box-shadow .12s} .takt-gantt-workspace .task-name>.takt-st[aria-expanded=true] svg{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)} @media(hover:hover){.takt-gantt-workspace .task-name>.takt-st:hover svg{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 16%,transparent)}}.takt-gantt-workspace .task-name>.takt-st:focus-visible{outline:2px solid var(--tk-accent);outline-offset:-2px} .takt-st svg,.takt-st-icon svg{width:14px;height:14px;display:block} :is(.takt-st,.takt-st-icon)[data-status=not]{color:var(--tk-ink-3)}:is(.takt-st,.takt-st-icon)[data-status=progress]{color:var(--tk-accent)} :is(.takt-st,.takt-st-icon)[data-status=done]{color:var(--tk-ok)}:is(.takt-st,.takt-st-icon)[data-status=blocked]{color:var(--tk-blocked)} :is(.takt-st,.takt-st-icon,.takt-st-dial) .mark{stroke:var(--tk-surface)} /* Past its finish and not done: the ring turns the shared late red (lib/item-status.ts pastDue). */ .takt-gantt-workspace .task-name>.takt-st[data-tone=late]{color:var(--tk-late)} /* Done glows softly in dark (Justin's teal-glow taste); light stays flat. */ :root[data-theme=dark] :is(.takt-st,.takt-st-icon)[data-status=done] svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tk-ok) 55%,transparent))} /* The ring takes a hold for the % dial: no scroll or text pick starts on it. */ .takt-gantt-workspace .task-name>.takt-st{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* The % dial (web/gantt-status.ts): a glass half ring centred on the ring, opening to its right. Motion is the motion kit's. */ .takt-st-dial{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;background:none;border:0;outline:none;touch-action:none;-webkit-user-select:none;user-select:none;font:13px/1 var(--tk-font,system-ui)} .takt-st-dial[hidden]{display:none} .takt-st-dial-art{position:relative;filter:drop-shadow(0 10px 22px #0b0c2a40)} .takt-st-dial-face{display:block;overflow:visible;cursor:pointer;will-change:transform} /* #1243: animate HTML surfaces; transforms/opacity inside a shared SVG invalidate its layout in Chromium. */ .takt-st-dial-layer{position:absolute;inset:0;overflow:visible;pointer-events:none;will-change:transform,opacity} .takt-st-dial-layer>svg{display:block;width:100%;height:100%;overflow:visible} .takt-st-dial .glass{fill:color-mix(in srgb,var(--tk-surface) 92%,transparent);stroke:var(--tk-glass-edge,var(--tk-line-2));stroke-width:1} .takt-st-dial .track{fill:none;stroke:var(--tk-line);stroke-width:10;stroke-linecap:round} .takt-st-dial .fill{fill:none;stroke:var(--tk-accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:100 200} .takt-st-dial .fill.is-empty{visibility:hidden} .takt-st-dial[data-status=done] .fill{stroke:var(--tk-ok)} :root[data-theme=dark] .takt-st-dial .fill{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--tk-accent) 65%,transparent))} .takt-st-dial .thumb circle{fill:var(--tk-surface);stroke:var(--tk-accent);stroke-width:2.5} .takt-st-dial[data-status=done] .thumb circle{stroke:var(--tk-ok)} .takt-st-dial .stop{font:10px/1 var(--tk-font-num,ui-monospace);fill:var(--tk-ink-3);transform-box:fill-box;transform-origin:center} .takt-st-dial .pct{font:600 18px/1 var(--tk-font-num,ui-monospace);fill:var(--tk-ink)} .takt-st-dial .ring{color:var(--tk-accent)}.takt-st-dial[data-status=not] .ring{color:var(--tk-ink-3)}.takt-st-dial[data-status=done] .ring{color:var(--tk-ok)} .takt-st-dial:focus-visible .glass{stroke:var(--tk-accent);stroke-width:2} /* Blocked… is a kit button (size, focus ring, iPad tap area from the controls kit); the dial only adds its glass pill. */ .tk-btn.takt-st-dial-blocked{margin-left:8px;border-radius:999px;border-color:var(--tk-glass-edge,var(--tk-line-2));background:var(--tk-glass-bg,var(--tk-surface));-webkit-backdrop-filter:var(--tk-glass-blur);backdrop-filter:var(--tk-glass-blur);color:var(--tk-blocked);font-weight:500} @media(pointer:coarse){.takt-gantt-workspace .task-name>.takt-st{left:1px;width:32px;height:32px;margin-top:-16px}.takt-st svg{width:18px;height:18px}} /* Bars: Done greys out, In progress shades the part up to today, Blocked gets orange stripes and its reason beside it. */ .takt-gantt-workspace .bar.takt-st-progress .fill{background:color-mix(in srgb,var(--tk-ink) 30%,transparent)} .takt-gantt-workspace .bar.takt-st-done:not(.summary,.milestone){background:var(--tk-bar-done)!important;box-shadow:none!important}.takt-gantt-workspace .bar.takt-st-done .fill{background:none} .takt-gantt-workspace .bar.milestone.takt-st-done{background:var(--tk-milestone-done)!important} .takt-gantt-workspace .bar.takt-st-blocked:not(.summary){box-shadow:0 0 0 1.5px var(--tk-blocked)!important}.takt-gantt-workspace .bar.milestone.takt-st-blocked{background:var(--tk-blocked)!important} body.takt-gantt-workspace:is([data-takt-rows=compact],[data-takt-rows=comfortable]) .chart-row .takt-st-chip{translate:0 var(--takt-row-shift)} /* The status menu, shared by the grid icon and the inspector's Status button. */ .takt-st-menu{position:fixed;z-index:var(--tk-z-popup-layer,13000);width:268px;padding:6px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;background:var(--tk-surface);color:var(--tk-ink);border:1px solid var(--tk-line-2);border-radius:10px;box-shadow:var(--tk-shadow-pop,0 10px 30px #17181a29);font:13px/1.35 var(--tk-font,Inter,system-ui,sans-serif)} .takt-st-menu[hidden]{display:none} .takt-st-option{display:flex;align-items:flex-start;gap:10px;padding:7px 8px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .takt-st-option .takt-st-icon{padding-top:1px}.takt-st-option[aria-checked=true]{background:var(--tk-surface-3)}.takt-st-option:is(:hover,:focus-visible){background:var(--tk-hover,#f5f6f8);outline:none} .takt-st-text{display:flex;flex-direction:column;gap:1px}.takt-st-text strong{font-weight:500}.takt-st-text small{font-size:11px;color:var(--tk-ink-3)} .takt-st-reasons{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding:8px 8px 4px;border-top:1px solid var(--tk-line)}.takt-st-reasons-label{font-size:11px;color:var(--tk-ink-3)} .takt-st-reason-list{display:flex;flex-wrap:wrap;gap:6px} .takt-st-reason{height:26px;padding:0 10px;border:1px solid var(--tk-line-2);border-radius:13px;background:var(--tk-surface);color:var(--tk-ink-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer} .takt-st-reason[aria-pressed=true]{background:var(--tk-blocked);border-color:var(--tk-blocked);color:var(--tk-surface)}.takt-st-reason:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px} .takt-st-reason.is-new{border-style:dashed;color:var(--tk-ink-3)}.takt-st-reason.is-new:is(:hover,:focus-visible){color:var(--tk-ink)} .takt-st-reason-input{height:26px;width:132px;box-sizing:border-box;padding:0 10px;border:1px solid var(--tk-accent);border-radius:13px;background:var(--tk-surface);color:var(--tk-ink);font:inherit;font-size:12px;outline:none} @media(pointer:coarse){.takt-st-menu{width:300px}.takt-st-option{min-height:48px;align-items:center}.takt-st-reason,.takt-st-reason-input{height:40px;padding:0 14px;border-radius:20px;font-size:14px}.takt-st-reason-input{font-size:16px}} /* Snapshot markup draft bar (option B): tools, a note that the draft is on this device, Discard and Save marked-up copy. */ .takt-snapshot-draft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px;background:#fffbea;border-bottom:1px solid #f1e3a6}.takt-snapshot-draft[hidden]{display:none} .takt-snapshot-draft .tl-markup-bar{box-shadow:none}.takt-snapshot-draft-text{flex:1;min-width:160px;color:#6b5a12} .takt-snapshot-draft>button{min-height:34px;padding:0 12px;border:1px solid #d5d8dd;border-radius:6px;background:#fff;color:#17181a;font:500 13px var(--tk-font,"Saira",Arial,sans-serif);cursor:pointer;white-space:nowrap} .takt-snapshot-draft>button.primary{background:#3f4fc4;border-color:#3f4fc4;color:#fff;font-weight:600}.takt-snapshot-draft>button:disabled{opacity:.6;cursor:wait} .takt-snapshot-view .tk-win-actions>[hidden]{display:none} /* Days off (Settings > Calendar and holidays, Justin 2026-10-23): shaded amber, warmer than weekends, with the name in the top row. */ /* #1018: one top edge below the month row, compensating for the existing row-density scale. */ /* #988: the calendar layer is no longer scaled by row density, so this offset is not divided by --takt-row-scale. */ .gantt-day-shade{--tk-shade-top:calc(var(--tk-month-row-h,22px) - var(--gantt-head-h,46px))} .gantt-usability :is(.weekend-shade,.holiday-shade){position:absolute;top:var(--tk-shade-top,0px);bottom:0;pointer-events:none} :root:not([data-holiday-shading=off]) .gantt-usability.gantt-coarse-grid[data-takt-zoom] .holiday-shade{display:block} .holiday-shade{background:var(--tk-holiday);box-shadow:inset var(--tk-band-edge,1px) 0 var(--tk-holiday-edge),inset calc(-1 * var(--tk-band-edge,1px)) 0 var(--tk-holiday-edge)} .gantt-usability .days-row .gantt-weekend{background:var(--weekend)} /* The header day cell takes the same tint as the band below it, so a holiday reads as one column (Justin, 2026-11-05); weekends already match. */ .gantt-usability .days-row .gantt-holiday{background:var(--tk-holiday);color:var(--tk-holiday-ink);font-weight:600} /* Amber words say holiday; no tick line in front (grid review 03, Justin 2026-11-05). */ .gantt-usability .month-row .gantt-holiday-label{font-size:10px;font-weight:600;color:var(--tk-holiday-ink);border-left:0;overflow:hidden;text-overflow:ellipsis} /* Holiday shading off (Gantt › Display, #1076): no amber band, day cell or name; a weekend holiday keeps its weekend grey. */ :root[data-holiday-shading=off] .gantt-usability .days-row .gantt-holiday{background:none;color:inherit;font-weight:inherit} /* Worked day (Justin, 2026-10-29, right-click a weekend day › Work this day): no weekend grey, a faint accent tint with accent edges. */ .worked-shade{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent,#4b5bd6) 7%,transparent);box-shadow:inset 1px 0 color-mix(in srgb,var(--accent,#4b5bd6) 35%,transparent),inset -1px 0 color-mix(in srgb,var(--accent,#4b5bd6) 35%,transparent);pointer-events:none} .gantt-usability .days-row .gantt-worked{color:var(--accent,#4b5bd6);font-weight:600;box-shadow:inset 0 -2px var(--accent,#4b5bd6)} /* A wait inside a task (One Wait, Justin 2026-10-29: "too ugly, sticks out"): quiet. The bar thins to a dashed line in its own colour through the paused days, the reason in small grey type when there is room; red on the critical path. */ .takt-pause-gap{--wait-c:var(--gc,var(--tk-gantt-bar,#668fe1));position:absolute;top:-1px;bottom:-1px;background:var(--tk-surface,#fff) linear-gradient(to right,var(--wait-c) 50%,transparent 0) 0 50%/6px 1.5px repeat-x;font-size:9.5px;line-height:18px;font-weight:500;color:var(--tk-ink-3,#6c7078);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:clip;pointer-events:auto;cursor:default} .takt-pause-gap span{padding:0 3px;background:var(--tk-surface,#fff)} .gantt-critical-on .bar.critical .takt-pause-gap{--wait-c:var(--tk-critical,#d93a45)} /* Wait (UI standard, Justin 2026-11-01): saved rows carry a square reason tag; adding opens one quiet card. */ .gantt-columns-menu{min-width:220px}/* Check marks sit on the left in every menu (Justin, 2026-10-26), as in Actions and Baseline. */.gantt-columns-menu button{justify-content:flex-start;gap:8px}.gantt-columns-check{flex:0 0 16px;font-style:normal;font-weight:600;color:#4b5bd6;text-align:center}.gantt-columns-note{margin:4px 0 0;padding:6px 10px 2px;border-top:1px solid #eceef1;font-size:11.5px;color:#5f636b} .tl-pick-one .tl-pick-row input[type=radio]{margin:0;cursor:pointer}.tl-pick-one .tl-pick-row:not(.tl-pick-cols){cursor:pointer} /* Link dialogs (Justin, 2026-10-24): Add predecessor (the Storyboard's item list) and the link editor, in Precision tokens. */ .takt-link-dialog .tl-muted,.takt-link-names{color:var(--tk-ink-3,#6c7078)} .takt-link-names{margin:4px 0 16px;font-size:13px}.takt-link-names b{font-weight:600;color:var(--tk-ink,#17181a)} .takt-link-dialog :is(.takt-link-wbs,.tl-wbs,.tl-pick-dates){font-family:var(--tk-font-num,inherit);font-size:12px;color:var(--tk-ink-3,#6c7078)} .takt-link-fields{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px} .takt-link-extra{margin-top:14px} .takt-link-dialog .takt-link-fields label{display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px;font-weight:600;color:var(--tk-ink-2,#4a4d55)} .takt-link-dialog .takt-link-fields :is(.tk-select,.tk-inputgroup){width:100%;box-sizing:border-box} .takt-link-dialog .takt-lag-input input{font-family:var(--tk-font-num,inherit)}.takt-lag-input>span{flex:none;font-size:12px;font-weight:400} .takt-link-dialog .tl-pick-row input[type=radio]:focus-visible{outline:2px solid var(--tk-accent,#4b5bd6);outline-offset:2px;border-radius:50%}.takt-link-dialog .tl-pick-row input[type=radio]:focus:not(:focus-visible){outline:none} .takt-link-hint{margin:6px 0 0;font-size:12px;color:var(--tk-ink-3,#6c7078)}.takt-link-hint:empty{display:none} .takt-link-error,.takt-link-dialog .tl-pick-error{margin:10px 0 0;font-size:12px;color:var(--tk-late,#b3261e)}.takt-link-error:empty{display:none} /* The link editor and link pickers are window-kit windows (#999): only their content is styled here. */ .takt-link-dialog .tk-win-foot .takt-link-delete{margin-right:auto} .takt-link-dialog .tl-pick-list{border-color:var(--tk-line,#e6e7ea);border-radius:var(--tk-r,3px)} .takt-link-dialog .tl-pick-row{border-bottom-color:var(--tk-line,#eceef1)} .takt-link-dialog .tl-pick-row:not(.tl-pick-cols):not(.off):hover{background:var(--tk-hover,#f6f7f8)} .takt-link-dialog .tl-pick-cols{background:var(--tk-surface-2,#f2f2f4);color:var(--tk-ink-3,#6c7078);font-size:10.5px;font-weight:600} .takt-link-dialog .tl-pick-name{color:var(--tk-ink,#17181a)}.takt-link-dialog .tl-pick-row.off :is(.tl-pick-name,.tl-pick-dates,.tl-wbs){color:var(--tk-ink-4,#a3a7ae)} .takt-link-dialog .tl-pick-row input[type=radio]{accent-color:var(--tk-accent,#4b5bd6)} .takt-link-dialog .tl-kind.milestone,.takt-link-dialog .tl-kind.summary{background:var(--tk-ink,#17181a)}.takt-link-dialog .tl-kind.task{background:var(--tk-bar,#8fb8e8)} @media(pointer:coarse){.takt-link-dialog{--tk-ctl-h:40px}.takt-link-dialog :is(.tk-select,.tk-inputgroup input){font-size:16px}.takt-link-dialog .tl-pick-row:not(.tl-pick-cols){height:40px}} @media(max-width:520px){.takt-link-fields{grid-template-columns:1fr}} /* Fit's edge chips name activities a detail or summary fit left off screen (Justin, 2026-10-24). */ .gantt-fit-chip{position:fixed;z-index:var(--gz-shell-toolbar-menu,30);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 10px;border:1px solid var(--tk-accent-line,#9db8f2);border-radius:999px;background:var(--tk-accent-soft,#ebf2fe);color:var(--tk-accent-ink,#1a5cc8);font-family:inherit;font-size:11px;font-weight:500;line-height:1.4;cursor:pointer;box-shadow:0 1px 3px #1718201f} .gantt-fit-chip:hover{filter:brightness(.97)}.gantt-fit-chip:focus-visible{outline:2px solid var(--tk-accent,#1f6feb);outline-offset:1px} /* A whole-task wait (transit, curing; One Wait, Justin 2026-10-29): quiet. A faint tint of the bar's own colour with a thin dashed outline, and its reason and length in small grey type. Amber stays for lag and commitment slips. */ .takt-gantt-workspace .bar.takt-wait.takt-wait{--wait-c:var(--gc,var(--tk-gantt-bar,#668fe1));background:color-mix(in srgb,var(--wait-c) 14%,var(--tk-surface,#fff))!important;border:1px dashed color-mix(in srgb,var(--wait-c) 75%,transparent)!important;box-shadow:none!important;box-sizing:border-box} .gantt-critical-on .takt-gantt-workspace .bar.takt-wait.critical,.gantt-critical-on.takt-gantt-workspace .bar.takt-wait.critical{border-color:var(--tk-critical,#d93a45)!important} .takt-gantt-workspace .bar.takt-wait .fill,.takt-gantt-workspace .bar.takt-wait .bar-label{display:none} .takt-gantt-workspace .bar.takt-wait .takt-wait-label{position:absolute;inset:0;display:flex;align-items:center;padding-left:7px;font-size:10.5px;font-weight:500;color:var(--tk-ink-3,#6c7078);pointer-events:none;white-space:nowrap;overflow:hidden} /* Full screen (Justin, 2026-10-24): the chart runs the whole width; the command bar stays. */ body.takt-unified.gantt-fullscreen{--takt-sidebar:0px} body.gantt-fullscreen .takt-global-sidebar,body.gantt-fullscreen .takt-shell,body.gantt-fullscreen .gt-team,body.gantt-fullscreen #gantt-input-status:empty{display:none!important} #gantt.hide-table{--table:0px!important} body.gantt-fullscreen #addRow{display:none} .takt-gantt-workspace .takt-place-ghost{position:absolute;top:7px;height:16px;box-sizing:border-box;border:1.5px dashed var(--accent,#4b5bd6);border-radius:4px;background:color-mix(in srgb,var(--accent,#4b5bd6) 14%,transparent);pointer-events:none;z-index:var(--gz-row-behind,2)} /* BR-0066: a bar being dragged leaves a faint ghost where it started. Below the bar, never takes a click, no layout of its own. */ .gantt-row-layer>.gantt-move-ghost{position:absolute;box-sizing:border-box;border:1px dashed color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 55%,transparent);border-radius:var(--tk-r,3px);background:color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 14%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 22%,transparent);pointer-events:none;z-index:var(--gz-row-behind,2);contain:strict} .gantt-row-layer>.gantt-move-ghost.summary{border-radius:5px} /* Milestones get the same dashed outline and light fill as bars (Justin 2026-11-07), on a turned square inside the diamond's box. */ .gantt-row-layer>.gantt-move-ghost.milestone{border:0;background:none;box-shadow:none;contain:layout} .gantt-row-layer>.gantt-move-ghost.milestone::before{content:'';position:absolute;inset:14.6%;box-sizing:border-box;rotate:45deg;border:1px dashed color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 55%,transparent);border-radius:1px;background:color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 14%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--tk-move-ghost,#0e8f7d) 22%,transparent)} /* Floating Inspector (Justin, 2026-10-25): the panel floats over the chart (web/floating-inspector.ts), so the grid and chart keep their full width. */ body.takt-gantt-inspector-floating main,body.takt-gantt-inspector-floating .takt-ms-body{margin-right:0!important}body.takt-gantt-inspector-floating>main>footer{padding-right:12px!important} /* Parts that block a task (Justin, 2026-10-27; web/gantt-materials.ts): a parts marker left of the task's start and a red dashed line to the last part's arrival. */ .takt-gantt-workspace .takt-gantt-parts{position:absolute;width:16px;height:16px;min-width:0;margin:-8px 0 0;padding:0!important;display:flex;align-items:center;justify-content:center;border:0!important;border-radius:4px;color:#fff;z-index:var(--gz-row-parts,7);cursor:pointer;box-shadow:0 0 0 2px #fff} .takt-gantt-workspace .takt-gantt-parts.is-late{background:#d1343a!important}.takt-gantt-workspace .takt-gantt-parts.is-soon{background:#b7791f!important} .takt-gantt-workspace .takt-gantt-parts.is-ok{background:#fff!important;color:#1a7f5a;box-shadow:inset 0 0 0 1.5px #1a7f5a,0 0 0 2px #fff} .takt-gantt-workspace .takt-gantt-parts:focus-visible{outline:2px solid #4b5bd6;outline-offset:2px} .takt-gantt-workspace .takt-gantt-parts-gap{position:absolute;height:0;border-top:2px dashed #d1343a;z-index:var(--gz-row-on-bar,4);pointer-events:none} .takt-gantt-workspace .takt-gantt-parts-gap::after{content:'';position:absolute;right:-1px;top:-6px;width:2px;height:10px;background:#d1343a} .takt-gantt-parts-pop{position:fixed;z-index:var(--tk-z-popup-layer,13000);padding:12px 14px;max-height:min(420px,70vh);overflow:auto;font-size:12.5px;line-height:1.4}.takt-gantt-parts-pop[hidden]{display:none} .takt-gantt-parts-card p{margin:0 0 6px}.takt-gantt-parts-card ul{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:4px} .takt-gantt-parts-card li{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:baseline}.takt-gantt-parts-card li span{color:var(--tk-ink-2,#45484e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.takt-gantt-parts-card li em{font-style:normal;color:var(--tk-ink-2,#45484e)} .takt-gantt-parts-card li.is-late em{color:#b4232a;font-weight:600} .takt-gantt-parts-count{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;background:#eef0f3} .takt-gantt-parts-card.is-late .takt-gantt-parts-count{background:#fdeaea;color:#b4232a}.takt-gantt-parts-card.is-soon .takt-gantt-parts-count{background:#fdf3e1;color:#8a5a12}.takt-gantt-parts-card.is-ok .takt-gantt-parts-count{background:#e7f5ee;color:#1a7f5a} .takt-gantt-parts-card a{font-weight:600} .takt-gantt-workspace .takt-gantt-parts.is-moved{outline:2px solid #b7791f;outline-offset:1px} .takt-gantt-parts-moved{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#8a5a12} /* Planned mark (Justin, 2026-10-27): a quiet purple tick at the end of the name; amber when the dates moved since. The tick is a mask on ::before, so a marked row adds one element and an unmarked row none (the speed guard counts them). */ /* Long names stop before the Planned tick (Justin, 2026-10-28): a bare name in a flex cell can't shrink and ran under the tick; a block cell trims with … at its right padding. */ .takt-gantt-workspace .chart-row .task-name{display:block;align-content:center} .takt-gantt-workspace .chart-row .task-name>:is(span:not([class]),.collapse){display:inline-flex;vertical-align:middle;margin-right:5px}.takt-gantt-workspace .chart-row .task-name>.takt-name-flag{vertical-align:middle} .takt-gantt-workspace .task-name>.takt-pl{position:absolute;right:2px;top:50%;width:16px;height:16px;margin-top:-8px;padding:0;border:0;border-radius:4px;background:none;display:grid;place-items:center;color:var(--tk-accent,#4b5bd6);cursor:pointer} .takt-gantt-workspace .task-name>.takt-pl::before{content:'';width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .takt-gantt-workspace .task-name>.takt-pl[data-state=moved]{color:var(--tk-warn,#b7791f)} .takt-gantt-workspace .task-name>span.takt-pl{cursor:default;opacity:.7} .takt-gantt-workspace .task-name>.takt-pl[data-state=no]{color:var(--tk-ink-3,#6c7078);opacity:.5} .takt-gantt-workspace .task-name>button.takt-pl:hover{background:var(--tk-surface-3)}.takt-gantt-workspace .task-name>button.takt-pl:focus-visible{outline:2px solid var(--tk-accent);outline-offset:-1px;opacity:1} .takt-gantt-workspace .task-name[data-pl=no]::after{content:'';position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--tk-ink-3,#6c7078);opacity:.35;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .takt-gantt-workspace .task-name[data-pl=no]:has(>.takt-pl)::after{content:none} @media(pointer:coarse){.takt-gantt-workspace .task-name[data-pl=no]::after{right:7px}} @media(pointer:coarse){.takt-gantt-workspace .task-name>.takt-pl{width:26px;height:26px;margin-top:-13px}.takt-gantt-workspace .task-name>.takt-pl::before{width:14px;height:14px}} body.takt-pl-focus .chart-row.takt-pl-dim :is(.table-cells>span,.bar,.gantt-bar-label){opacity:.35} .gantt-more-planned[aria-checked=false]>.gantt-mi-icon{visibility:hidden}.gantt-more-planned>.gantt-mi-icon{color:var(--tk-accent)!important} .gantt-panning,.gantt-panning *{cursor:grabbing!important} /* Commitment Inspector, option A (Justin, 2026-10-28): the date reads as a value, with its slip beside it; the reason, * Changed by and Save show only while a new date is picked. Due after, Promised to and Owed by sit as labelled rows. */ /* Task Inspector, option A (Justin, 2026-10-28): dates on one row, Status, Planned and slack on the next; one Links section; * switches and the add buttons for empty Pauses and Linked Actions at the bottom. */ /* Moved commitments (SPEC.md §4, 2026-10-28): an amber flag, and a slip band from the first committed date like the lag band, one side only: hatched when the customer or a supplier moved it, solid when we did. A picked, unsaved date previews dashed. */ .takt-commitment-flag.moved svg{stroke:var(--takt-slip,#3f6496)}.takt-commitment-flag.moved .f{fill:color-mix(in srgb,var(--takt-slip,#3f6496) 14%,#fff)}.takt-commitment-flag.customer.moved .f{fill:var(--takt-slip,#3f6496)} /* Slip line (Justin 2026-10-31, flight deck 2026-11-01): square dashes under the flag, from the flag's pole to the first committed date. One look for every side; the readout names it. */ /* #1005 (Justin, 2026-11-04: the slip dashes were slate while the moved readout was amber): one colour for a moved commitment, amber (§20.3 L13), so the flag, its dashes and its readout read as one thing. */ /* #1007 (Justin, 2026-11-04): a moved commitment's flag, dashes and words are the normal text colour; a late one's are amber. */ /* Justin, 2026-11-06: a moved commitment's flag, dashes and words read the shared --tk-moved status token (--takt-slip, tokens.css). */ /* STATUS-STANDARD (2026-11-06): moved is amber (--tk-moved), late red (--takt-late-mark = --tk-late, tokens.css). */ .takt-commitment-slip{position:absolute;top:20px;height:4px;box-sizing:border-box;border-radius:0;background:repeating-linear-gradient(90deg,var(--takt-slip) 0 4px,transparent 4px 6px);z-index:var(--gz-row-behind,2);pointer-events:auto;overflow:visible} /* No end stop (§20.3): the readout's bar marks the end. */ /* The readout sits on the name line (top 8px of the row), past the end of the line away from the flag. */ .takt-slip-text{position:absolute;top:-16px;color:var(--takt-slip);pointer-events:none} .takt-commitment-slip.stop-right .takt-slip-text{left:calc(100% + 6px)}.takt-commitment-slip.stop-left .takt-slip-text{right:calc(100% + 6px)} .takt-commitment-slip.takt-commitment-preview-band{opacity:.6;z-index:var(--gz-row-on-bar,4)} .takt-commitment-preview{position:absolute;top:5px;width:12px;height:16px;margin-left:-1px;z-index:var(--gz-row-marker,5);pointer-events:auto} .takt-commitment-preview svg{display:block;width:12px;height:16px;fill:none;stroke:#b86e00;stroke-width:1.5;stroke-dasharray:2 1.5;stroke-linejoin:round} .takt-commitment-preview .f{fill:#fff3dd}.takt-commitment-preview.customer .f{fill:#b86e00;fill-opacity:.55} .takt-commitment-preview-bar{position:absolute;top:6px;height:18px;box-sizing:border-box;border:1.5px dashed #b86e00;border-radius:4px;background:#fff3dd80;z-index:var(--gz-row-bar,3);pointer-events:auto} /* Start over (migration 035): a quiet text action at the end of the History heading. */ /* Commitment Inspector A (Justin, 2026-10-29): the task panel's grid. Labels above 30px fields, drop-downs for Promised to and Owed by, the lag in its own small field, Tracks once with a one-line sparkline, and the slip as one amber chip. */ /* Commitment Inspector version 2 (Justin, 2026-10-29): Owned by and Promised to under the title, the committed date read like the Baseline menu (Latest and Original, one vs. Original figure), Change date… and Make … the original… as menu-style actions. */ /* Row lanes (Justin, 2026-10-29, option A; SPEC.md §2 rule 11; web/gantt-lanes.ts). Top lane: action dots sit on the bar's top edge. Under lane: one line. Commitment rows draw a Due after lag as a thin line, not a second band. */ .takt-gantt-workspace .takt-lane-off{display:none!important} .takt-gantt-workspace .takt-lag.as-due{top:26px;height:0;border:0;border-top:2px solid var(--tk-warn,#b86e00);border-radius:0;background:none} .takt-gantt-workspace .takt-lag.as-due::before{content:'';position:absolute;left:0;top:-6px;height:8px;border-left:2px solid var(--tk-warn,#b86e00)} .takt-gantt-workspace .takt-lag.as-due .takt-lag-label{position:absolute;left:5px;right:auto;top:-12px;padding:0 2px;font-size:9.5px;background:var(--tk-surface,#fff)} /* Week zoom (under 12 px a day): text that does not fit goes first. Month and Quarter (under 4 px): bars, flags, labels and red marks only. */ #gantt[data-takt-zoom=week] .chart-row:not(.selected) .takt-commitment-ghost{display:none} #gantt[data-takt-zoom=month] :is(.takt-commitment-ghost,.takt-gantt-parts.is-ok){display:none!important} .takt-row-card{position:fixed;z-index:var(--tk-z-popup-layer,13000);max-width:340px;padding:8px 10px;border:1px solid var(--tk-line-2,#d5d7dc);border-radius:8px;background:var(--tk-surface,#fff);color:var(--tk-ink-2,#3d4048);box-shadow:0 8px 24px rgba(0,0,0,.16);font-size:12px;line-height:1.4;pointer-events:none} .takt-row-card b{display:block;margin-bottom:2px;color:var(--tk-ink,#17181a);font-weight:600} .takt-row-card p{margin:2px 0 0} /* #984: a mark's own words (what used to be its native title), shown by the hover kit in the row card's quiet style. */ .takt-mark-tip{max-width:280px;padding:4px 8px;font-size:11.5px}.takt-row-card[hidden]{display:none} /* Drives chip on one line (Justin, 2026-10-29). */ /* People on tasks (Justin, 2026-10-31, option A; web/gantt-people.ts). The Who column is the ninth grid cell: hidden by the grid's own rules and given its own track by gantt-columns.ts when shown. Initials sit in soft per-person tints. */ .takt-gantt-workspace .table-cells>span:nth-child(9){display:none} .ppl-who{align-items:center;gap:0;cursor:pointer}.ppl-who:hover{background:var(--tk-hover,#f4f4f6)}.ppl-who:focus-visible{outline:2px solid var(--tk-accent,#4b5bd6);outline-offset:-2px} .ppl-av{--tp:var(--tk-p1,#5b63d6);display:inline-grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;font:700 9.5px/1 var(--tk-font,"Saira",Arial,sans-serif);letter-spacing:.02em;color:var(--tk-ink,#1d1f24);background:color-mix(in srgb,var(--tp) 24%,var(--tk-surface,#fff));box-shadow:0 0 0 1.5px var(--tk-surface,#fff)} .ppl-who .ppl-av+.ppl-av{margin-left:-4px} .ppl-av[data-tint="1"]{--tp:var(--tk-p2,#1f8f84)}.ppl-av[data-tint="2"]{--tp:var(--tk-p3,#c98a1b)}.ppl-av[data-tint="3"]{--tp:var(--tk-p4,#3f7fe0)}.ppl-av[data-tint="4"]{--tp:var(--tk-p5,#7d828c)}.ppl-av[data-tint="5"]{--tp:var(--tk-p6,#c94f8f)} .ppl-av.ppl-more{--tp:var(--tk-ink-3,#8d919a);font-weight:600} .ppl-who.ppl-none{color:var(--tk-ink-4,#b4b8c0);padding-left:14px} .ppl-pick[hidden]{display:none!important} .ppl-pick{position:fixed;z-index:calc(var(--tk-z-popup-layer,13000) + 2);width:300px;max-width:calc(100vw - 16px);background:var(--tk-surface,#fff);color:var(--tk-ink,#1d1f24);border:1px solid var(--tk-line,#e3e5e8);border-radius:10px;box-shadow:var(--tk-shadow-pop,0 10px 30px #14142826);font:13px/1.4 var(--tk-font,"Saira",Arial,sans-serif);overflow:hidden} .ppl-pick input{display:block;width:100%;box-sizing:border-box;height:var(--tk-dens-ctl,32px);border:0;border-bottom:1px solid var(--tk-line,#e3e5e8);padding:0 10px;font:inherit;background:transparent;color:inherit;outline:none} .ppl-list{max-height:300px;overflow:auto;padding:4px 0} .ppl-opt{display:grid;grid-template-columns:14px 22px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:var(--tk-dens-row,32px);padding:0 10px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .ppl-opt:hover,.ppl-opt:focus-visible{background:var(--tk-accent-soft,#ece8fb);outline:none} .ppl-check{font-style:normal;font-weight:700;color:var(--tk-accent,#4b5bd6)} .ppl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ppl-opt small{font-size:11px;color:var(--tk-ink-3,#6c7078);white-space:nowrap}.ppl-opt small.ppl-away{color:var(--tk-warn-ink,#b4580a);font-weight:600} .ppl-empty{margin:0;padding:8px 10px;color:var(--tk-ink-3,#6c7078)} .ppl-new{display:block;width:100%;min-height:var(--tk-dens-row,32px);padding:0 10px;border:0;border-top:1px solid var(--tk-line,#e3e5e8);background:none;color:var(--tk-accent-ink,#3a2391);font:600 13px var(--tk-font,"Saira",Arial,sans-serif);text-align:left;cursor:pointer} @media(pointer:coarse){.ppl-pick input{font-size:16px}.ppl-av{width:24px;height:24px}} /* Link highlights (Justin, 2026-10-31, look A): the line and arrowhead take the colour, a little heavier. Broken stays orange and the selected chain stays blue. On a critical link with Critical on, a red edge shows either side of the colour. */ .takt-gantt-workspace .links>.dependency-line.takt-hl:not(.broken):not(.in-chain){stroke:var(--hl);stroke-width:2.25} .takt-gantt-workspace .links>.dependency-dot.takt-hl:not(.broken):not(.in-chain){stroke:var(--hl);stroke-width:2} .takt-gantt-workspace .links>.dependency-edge{fill:none;stroke:none;pointer-events:none} .takt-gantt-workspace.gantt-critical-on .links>.dependency-edge.critical{stroke:var(--tk-critical,#d1343a);stroke-width:5;stroke-linejoin:round;stroke-linecap:round} .takt-gantt-workspace.gantt-critical-on .links>.dependency-line.critical.takt-hl:not(.broken):not(.in-chain),.takt-gantt-workspace.gantt-critical-on .links>.dependency-dot.critical.takt-hl:not(.broken):not(.in-chain){stroke:var(--hl);stroke-width:2} .takt-gantt-workspace .links.has-chain>.dependency-edge{opacity:.35} /* A commitment in a highlighted path: its flag keeps its colour, ringed in the path colour. */ /* #1140: one soft trace in the path colour that follows the flag, never a box (one filter, highlighted commitment rows only). */ .chart-row.takt-hl-ring .takt-commitment-flag{filter:drop-shadow(0 0 1.5px var(--hl))} /* The details use the same palette as the context menu. */ /* UI batch 2 (docs/UI-STANDARD.md §9, §14, §15, §20): the Inspectors on the standard parts. */ /* Status and Planned: quiet drop-down look (no pill box). Status opens a menu, so it carries the chevron. */ /* Highlight: one drop-down row; the swatches open under it. */ .gantt-detail-highlight{display:grid;gap:8px;margin:0} .gantt-detail-highlight .gantt-hl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-bottom:1px solid var(--tk-line,#e8e9ec)} .gantt-detail-highlight .gantt-hl-label{font-size:13px;color:var(--tk-ink-2,#45484e)} .gantt-detail-highlight .gantt-hl-pick{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 24px 0 8px;border:0;border-radius:6px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c7078' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;font:inherit;font-size:13px;color:var(--tk-ink,#17181a);cursor:pointer} .gantt-detail-highlight .gantt-hl-pick:is(:hover,:focus-visible){background-color:var(--tk-hover,#f3f4f6)} .gantt-detail-highlight .gantt-hl-pick:focus-visible{outline:2px solid var(--tk-accent,#4b5bd6);outline-offset:1px} .gantt-detail-highlight .gantt-hl-pick i{width:14px;height:14px;border-radius:4px;background:var(--sw)} .gantt-detail-highlight .gantt-hl-pick i.none{background:none;border:1.5px dashed var(--tk-line-3,#c9ccd2)} /* The shared swatch grid (web/ui-parts.ts), sized for the Inspector: two even rows of 13. */ .gantt-detail-highlight .tk-swatches{grid-template-columns:repeat(13,18px);justify-content:end;gap:8px;padding:2px 2px 0}.gantt-detail-highlight .tk-swatch{width:18px;height:18px} @media(pointer:coarse){.gantt-detail-highlight .tk-swatches{grid-template-columns:repeat(13,24px);gap:2px}.gantt-detail-highlight .tk-swatch{width:24px;height:24px}.gantt-detail-highlight .gantt-hl-row{min-height:44px}} .gantt-detail-highlight .gantt-hl-clear{justify-self:end;height:28px;padding:0 10px;border:1px solid var(--tk-line-2,#d5d7dc);border-radius:6px;background:var(--tk-surface,#fff);font:inherit;font-size:12.5px;color:var(--tk-ink,#17181a);cursor:pointer} .gantt-detail-highlight .gantt-hl-clear:disabled{opacity:.45;cursor:default} /* The plan's last colour, first under the row (Justin, 2026-11-02), like the right-click menu's quick row. */.gantt-detail-highlight .gantt-hl-again{justify-self:end;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border:1px solid var(--tk-line-2,#d5d7dc);border-radius:6px;background:var(--tk-surface,#fff);font:inherit;font-size:12.5px;font-weight:600;color:var(--tk-ink,#17181a);cursor:pointer}.gantt-detail-highlight .gantt-hl-again:is(:hover,:focus-visible){background:var(--tk-hover,#f3f4f6)}.gantt-detail-highlight .gantt-hl-again i{width:14px;height:14px;border-radius:3px;background:var(--sw)} /* Note Add is a secondary button; the black primary is kept for Save date. */ /* Notices are the standard banner. */ /* Sentence case: link-list group labels and the Latest/Original tag. */ /* Waits on: chevron icon. */ /* UI batch 2, second pass: rows like the standard example (sheet §20 Gantt Inspector / Commitment Inspector). */ /* Status, Planned, Float and People: label on the left, quiet value on the right, one row each. */ /* Section headings: one style, no icons (§13 headings). */ /* Commitment: Owned by and Promised to are setting rows with quiet drop-downs. */ /* Waits on: a row with a quiet picker. */ /* Change date… reads as a link-style action, not a big card. */ /* Third pass: line by line with the sheet examples. */ /* Notes: heading, then the composer on its own row. */ /* + Add (People) and + Link an Action read as links, not dashed pills. */ /* Committed date: the date and its tag on the left, Change date… on the right, no tinted box. */ /* Drives: one row, label on the left and Pick… on the right. */ /* Footer: quiet red text action. */ /* A done commitment is never late (Justin, 2026-11-02): the Complete row under Owned by and Promised to. */ /* UI standard pass (Justin 2026-11-01: "clean the rest up so it meets the standard"). Flight-deck controls: 3px corners, one 30px control height, labels on one line, one look for link chips, mono eyebrows for group labels. */ /* Chart labels, fix batch 4 (UI-STANDARD §20.3): one label style (10px/600, numbers in the number font), colours from tokens only, the pin in neutral ink so it never reads as critical, a lag number that moves into its box when it would cover a diamond, and the critical popup's kind label in sentence case. */ .takt-gantt-workspace.gantt-critical-on .links>.dependency-line.critical{stroke:var(--tk-critical,#d1343a)} .takt-gantt-workspace.gantt-critical-on .links>.dependency-dot.critical{fill:var(--tk-critical,#d1343a)} body.gantt-crit-labels.gantt-critical-on .gantt-bar-label.critical:not(.inside){color:var(--tk-critical,#d1343a)} .gantt-crit-pop .crit-kind{font:600 11px/1 var(--tk-font,"Saira",sans-serif);letter-spacing:0;text-transform:none} /* Flight deck chart (Justin, 2026-11-01, UI standard §20.2-20.3; picked on https://claude.ai/artifact/9Re8THiEbbDa7LGmhQBZhp). Bars, critical and phases: web/precision/precision2.css. */ /* Readouts: mono caps with a short bar in their colour before the first letter (CRIT, LAG +3D, LATE +4D, SLIP +3D · BY SUPPLIER). */ .takt-lag-label,.takt-baseline-slip,.takt-slip-text,.gantt-crit-start{font:600 9.5px/14px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums} .takt-lag-label::before,.takt-baseline-slip::before,.takt-slip-text::before,.gantt-crit-start::before{content:'';position:absolute;left:0;top:2px;height:10px;border-left:2px solid currentColor} .takt-baseline-slip,.takt-baseline-slip.late,.takt-baseline-slip.early{min-width:0;padding:0 3px 0 7px;border-radius:0;background:var(--tk-surface,#fff);text-align:left} .takt-baseline-slip.late{color:var(--tk-late,#d1343a)}.takt-baseline-slip.early{color:var(--tk-ok,#1a7f5a)} .takt-slip-text{padding:0 3px 0 7px;background:var(--tk-surface,#fff)} /* Lag: an orange bracket just under the link line, spanning only the lag days; its readout sits left of the link's elbow. */ .takt-gantt-workspace .takt-lag,.takt-gantt-workspace .takt-lag.as-due,.takt-gantt-workspace .takt-lag.is-around{top:20px;height:0;border:0;border-top:1.5px solid var(--tk-lag,#e8820c);border-radius:0;background:none;overflow:visible} .takt-gantt-workspace .takt-lag.is-lead{border-top-style:dashed} .takt-gantt-workspace .takt-lag::before,.takt-gantt-workspace .takt-lag::after,.takt-gantt-workspace .takt-lag.as-due::before{content:'';position:absolute;top:-4px;height:7px;border-left:1.5px solid var(--tk-lag,#e8820c)} .takt-gantt-workspace .takt-lag::before{left:0}.takt-gantt-workspace .takt-lag::after{right:0} .takt-gantt-workspace .takt-lag:hover{border-top-width:2.5px} .takt-gantt-workspace .takt-lag .takt-lag-label,.takt-gantt-workspace .takt-lag.as-due .takt-lag-label,.takt-gantt-workspace .takt-lag.is-around .takt-lag-label{position:absolute;left:auto;right:calc(100% + 6px);top:-12px;transform:none;padding:0 3px 0 7px;background:var(--tk-surface,#fff);color:var(--tk-lag-ink,#b85f00);font-size:9.5px} /* Float: a plain readout at the end of its dashed tail, no box (Justin, 2026-11-02). */ .slack-num{padding:0 4px;border:0;border-radius:0;background:var(--tk-surface,#fff);font:600 9.5px/13px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--tk-ink-3,#6c7078)} /* Wait reason: plain mono caps. */ .takt-pause-gap{font:600 9.5px/14px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.08em;text-transform:uppercase} /* Phase names in display caps, numbers and initials in mono. */ .gantt-bar-label.summary{font-family:var(--tk-font-display,"Chakra Petch",sans-serif);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tk-accent-ink,#3f4fc4)} .gantt-bar-label .gantt-label-meta{font-family:var(--tk-font-num,"Obel Mono",monospace);font-size:10px;letter-spacing:.02em;text-transform:none} /* Links: plain lines, square elbows. */ .takt-gantt-workspace .links>.dependency-line{stroke-linejoin:miter;stroke-linecap:butt} .takt-gantt-workspace .takt-lag{z-index:var(--gz-row-on-bar,4)} /* Display window preview = the real chart (Justin, 2026-11-01: "the example in display settings need to match reality"). Same bars, readouts, lag bracket and links as the chart rules above and in web/precision/precision2.css. */ /* Gantt list A (Justin, 2026-11-01, review #577 items 3 and 4; UI standard §20.1). One name layout: status slot, 10px a level, then the chevron (summaries) or the kind mark, then the name. The chevron is a drawn square-ended caret centred on the name line in ink, never the faint text glyph that sat low; it points right when the summary is collapsed. */ .takt-gantt-workspace .chart-row .task-name>.collapse{position:relative;width:14px;height:16px;font-size:0;color:var(--tk-ink-2,#4e5159);cursor:pointer} .takt-gantt-workspace .chart-row .task-name>.collapse::before{content:'';position:absolute;left:4px;top:4px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)} .takt-gantt-workspace .chart-row .task-name>.collapse[aria-label^=Expand]::before{left:3px;top:5.5px;transform:rotate(-45deg)} .takt-gantt-workspace .chart-row .task-name>.collapse:hover{color:var(--tk-accent,#4b5bd6)} /* Phase rows carry no tint: the accent bold name and the thin phase bar mark them (grid review 05, Justin 2026-11-05). */ /* "Planned" over the tick column, at the right of the Name heading. */ #gantt .chart-head .table-cells>span.takt-pl-head{position:relative} #gantt .chart-head .table-cells>span.takt-pl-head::after{content:'Planned';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:9px;line-height:1;opacity:.8;pointer-events:none} /* ---------- Fading bar (UI-STANDARD; SPEC.md §4, 2026-11-01): an open-ended task fades toward its missing end over its drawn 3-week window; fill and inside edge fade together and the known end stays crisp. A fade means only a missing date. ---------- */ .takt-gantt-workspace .bar.takt-open-start{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 88%);mask-image:linear-gradient(to right,transparent 0%,#000 88%)} .takt-gantt-workspace .bar.takt-open-finish{-webkit-mask-image:linear-gradient(to right,#000 12%,transparent 100%);mask-image:linear-gradient(to right,#000 12%,transparent 100%)} /* A Done bar is already pale (--tk-bar-done), so its fade stops at 45% instead of nothing, or it would all but vanish. */ .takt-gantt-workspace .bar.takt-open-start.takt-st-done{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.45) 0%,#000 88%);mask-image:linear-gradient(to right,rgba(0,0,0,.45) 0%,#000 88%)} .takt-gantt-workspace .bar.takt-open-finish.takt-st-done{-webkit-mask-image:linear-gradient(to right,#000 12%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(to right,#000 12%,rgba(0,0,0,.45) 100%)} .takt-gantt-workspace .bar:is(.takt-open-start,.takt-open-finish) :is(.resize,.takt-resize-start){display:none} .takt-gantt-workspace .takt-not-set{color:var(--tk-ink-3,#6c7078)} /* Roomier touch rows (review #577 item 6): each row control answers to its own target of about 32px without moving the layout or reaching into the next row. The tick grows in place; the chevron and grip get an invisible hit area (the ring is already 32px). */ @media(pointer:coarse){ .takt-gantt-workspace .chart-row .task-name>.takt-pl{width:28px;height:28px;margin-top:-14px;right:1px} .takt-gantt-workspace .chart-row .takt-row-drag{position:relative} /* BR-0053: the areas are as tall as the row (30px, 38px with Comfortable rows); a taller one would reach into the next row. */ .takt-gantt-workspace .chart-row :is(.takt-row-drag,.task-name>.collapse)::after{content:'';position:absolute;left:50%;top:50%;width:32px;height:var(--takt-row,30px);transform:translate(-50%,-50%)} /* The ring is already a 32px button on touch; the grip's area stops short of it. */ .takt-gantt-workspace .chart-row .takt-row-drag::after{width:24px} } /* Dark-mode marks (review #577 item 8): interactive marks in the list never look disabled on normal or selected rows; names and dates stay strongest. */ :root[data-theme=dark] .takt-gantt-workspace .takt-row-drag{color:var(--tk-ink-3)} :root[data-theme=dark] .takt-gantt-workspace .takt-row-drag:hover{color:var(--tk-accent)} :root[data-theme=dark] .takt-gantt-workspace [data-pl=no]::after{opacity:.6} :root[data-theme=dark] .takt-gantt-workspace .chart-row .takt-pl{opacity:1} :root[data-theme=dark] .takt-gantt-workspace .row-num .gantt-wbs{color:var(--tk-ink-2)} /* Floating Inspector is frosted glass, docked stays solid (Justin 2026-11-02, UI-STANDARD Depth). */ .takt-gantt-inspector[data-takt-floating=true]{background:color-mix(in srgb,var(--tk-surface,#fff) 58%,transparent)!important;-webkit-backdrop-filter:var(--tk-glass-blur,blur(14px) saturate(190%));backdrop-filter:var(--tk-glass-blur,blur(14px) saturate(190%));border-color:var(--tk-glass-edge,#ffffffbf)!important;box-shadow:inset 0 1px 0 var(--tk-glass-hi,#ffffffe6),var(--tk-glass-shadow,0 12px 32px #14143229)!important} /* Buffer (Justin 2026-11-02, look A): not work, so no fill and no name label on the bar. A hatched outline marks the buffer at full size; the days slip has used fill amber from the left, all red once used up; the readout sits after it. */ .takt-gantt-workspace .bar.takt-buffer{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible} .takt-gantt-workspace .bar.takt-buffer>.fill,.takt-gantt-workspace .bar.takt-buffer>.bar-label{display:none} /* A buffer's start follows its links, so only its end edge has a grip: dragging it sets the size. */ .takt-gantt-workspace .bar.takt-buffer>.takt-resize-start{display:none} .takt-buffer-band{position:absolute;top:0;bottom:0;border:1px solid var(--takt-buffer,#5a5f8f);background:repeating-linear-gradient(-45deg,transparent 0 3px,color-mix(in srgb,var(--takt-buffer,#5a5f8f) 55%,transparent) 3px 4.2px);pointer-events:none;box-sizing:border-box} .takt-buffer-used{position:absolute;top:0;bottom:0;background:var(--tk-warn,#b7791f);opacity:.85;pointer-events:none;box-sizing:border-box} .takt-buffer-band.is-over{border-color:var(--tk-critical,#d1343a);background:color-mix(in srgb,var(--tk-critical,#d1343a) 85%,transparent)} .takt-buffer-label{position:absolute;top:50%;transform:translateY(-50%);padding:0 3px 0 7px;white-space:nowrap;pointer-events:none;font:600 9.5px/14px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--takt-buffer,#5a5f8f);background:var(--tk-surface,#fff)} .takt-buffer-label::before{content:'';position:absolute;left:0;top:2px;height:10px;border-left:2px solid currentColor} .takt-buffer-label.is-used{color:var(--tk-warn,#b7791f)}.takt-buffer-label.is-over{color:var(--tk-critical,#d1343a)} :root{--takt-buffer:#5a5f8f} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--takt-buffer:#a3a8d6}} :root[data-theme="dark"]{--takt-buffer:#a3a8d6} .gantt-add-menu [data-kind=buffer] i{border:1px solid var(--takt-buffer,#5a5f8f);border-radius:0;background:repeating-linear-gradient(-45deg,transparent 0 3px,var(--takt-buffer,#5a5f8f) 3px 4.2px)} /* Take a baseline, flight deck (UI-STANDARD §20 Dialogs, batch 5): segmented choice, switch row, one primary, 3px corners. */ .takt-baseline-modes[hidden],.takt-baseline-mode-note[hidden]{display:none} .takt-baseline-dialog .takt-baseline-modes{gap:6px} .takt-baseline-dialog .tk-seg{display:flex;align-self:flex-start} .takt-baseline-dialog .tk-seg>label{margin:0} .takt-baseline-mode-note{margin:0;font-size:12px;color:var(--tk-ink-3,#6c7078)} .takt-baseline-dialog .takt-baseline-check{justify-content:space-between;min-height:44px;margin:0 0 8px;border-top:1px solid var(--tk-line,#e8e9ec);border-bottom:1px solid var(--tk-line,#e8e9ec);font-size:13px;color:var(--tk-ink,#17181a)} /* Replace hides the compare row but keeps its space, so the content-sized window never moves (§17A.2a). */ .takt-baseline-dialog .takt-baseline-check.is-off{visibility:hidden} /* Baseline menu = the house menu (UI-STANDARD §11): grey sentence-case label, one-line rows with the date right, glass. */ /* iPad with a trackpad or mouse (Justin, 2026-11-02: "hovering over an item should reveal the drag bars and bubbles"). Safari reports the touch screen as the primary pointer (pointer:coarse), which hid both on hover; any-hover sees the trackpad. */ @media(pointer:coarse) and (any-hover:hover){ .takt-gantt-workspace .chart-row:not(.selected) .bar:hover :is(.resize,.takt-resize-start)::after{opacity:.55} .gantt-usability:not(.takt-gesture-active) .chart-row:hover .connection-handle:not(.valid-target):not(.target-active){opacity:.85;pointer-events:auto} } /* A flag's slip line sits just above the baseline lane, never on it (Justin, 2026-11-02). */ body[data-takt-rows=compact] .takt-commitment-slip{top:18px} /* + Add › Wait: the wait bar's dashed outline (Justin, 2026-11-02). */ .gantt-add-menu [data-kind=wait] i{border:1px dashed color-mix(in srgb,var(--tk-gantt-bar,#668fe1) 75%,transparent);border-radius:2px;background:color-mix(in srgb,var(--tk-gantt-bar,#668fe1) 14%,var(--tk-surface,#fff))} /* Wait card tidy-up (Justin, 2026-11-02 "formatting"): the card stays inside the panel, the quick lengths sit level with the Lasts box at the same height, and a disabled choice stays readable. */ /* #930: the grip is the same vertical grab bar with a mouse and on touch (the old touch-only round knob read as a second link bubble next to the handle, Justin 2026-11-04 iPad). */ /* UI §20.3 L14: resize uses the inner 6px; link dots and hit areas use only the outer 7px. The start mirrors the finish. Touch may grow vertically, never into the bar or the name at end+8px. */ .takt-gantt-workspace .bar .resize,.takt-gantt-workspace .bar .takt-resize-start{width:min(6px,100%)} .takt-gantt-workspace .bar .resize{right:0}.takt-gantt-workspace .bar .takt-resize-start{left:0} .takt-gantt-workspace .bar :is(.resize,.takt-resize-start)::after{left:0;width:100%} /* BR-0017: the grip answers the pointer. A mouse gets the side-to-side arrow (cursor above); iPad Safari draws its own round pointer and ignores CSS cursors, so the grab bar itself fills with the accent while the pointer is on it, on every device. */ @media(any-hover:hover){.takt-gantt-workspace .chart-row .bar:hover :is(.resize,.takt-resize-start):hover::after{opacity:1;background:var(--tk-accent)}} .takt-gantt-workspace .connection-handle{top:11.5px;width:7px;height:7px;box-sizing:border-box;transform:none} .takt-gantt-workspace .connection-handle[data-endpoint=S]{transform:translateX(-100%)} @media(pointer:coarse){ .takt-gantt-workspace .connection-handle::after{content:"";position:absolute;top:-8px;bottom:-8px;left:-2px;width:7px} } /* Commitment names sit on the flag's line, level with the SLIP readout (Justin, 2026-11-02), so they no longer touch the slip dashes below and get pushed past them. Order on the right: flag, name, then SLIP (web/gantt-interactions.ts, clearBarLabels). */ .gantt-usability .takt-commitment-row .gantt-bar-label{top:3px} body[data-takt-rows=compact] .gantt-usability .takt-commitment-row .gantt-bar-label,body[data-takt-rows=compact].gantt-usability .takt-commitment-row .gantt-bar-label{top:2px} /* Show menu (Justin, 2026-11-02): same house menu as Baseline; Blocker marks off hides the stripes, ring and reason chip (the grid's status icon stays). */ .gantt-usability-toolbar .gantt-show-menu>div{width:220px;min-width:0} .gantt-usability-toolbar .gantt-show-menu>div>hr{border:0;border-top:1px solid var(--tk-line,#e1e4f2);margin:4px 2px} body.gantt-hide-blockers.takt-gantt-workspace .bar.takt-st-blocked:not(.summary):not(.milestone){box-shadow:none!important} body.gantt-hide-blockers.takt-gantt-workspace .bar.milestone.takt-st-blocked{background:var(--tk-milestone)!important} /* One house menu for every command-bar drop-down (Justin, 2026-11-02: "all drop-down menus need the diffusion effect", and the + menu loses its grey hint lines). Glass and 3px corners come from components.css; here the rows: 34px (44 touch), 13px regular, icon or check slot on the left, key hint on the right. */ .gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu,.gantt-add-menu,.gantt-show-menu>div)>button{align-items:center;min-height:34px;height:auto!important;padding:0 10px!important;gap:10px;font-size:13px;font-weight:400} .gantt-usability-toolbar :is(.gantt-add-menu,.gantt-show-menu>div)>button b{font-size:13px;font-weight:400} .gantt-usability-toolbar :is(.gantt-show-menu)>div>button>i{margin-top:0} @media(pointer:coarse){.gantt-usability-toolbar :is(.gantt-export>div,:is(.gantt-more)>div,.gantt-outline-menu,.gantt-add-menu,.gantt-show-menu>div)>button{min-height:44px}} /* Slack is a row like Status and Planned: name left, value right (UI-STANDARD Task Inspector row), Critical after the value. */ /* Palette E (Justin, 2026-11-02): a green dot marks each colour some project already shows; bright yellows get an edge on white. */ /* Auto readouts (Justin, 2026-11-03, Codex review; UI standard §20.3): names and exceptions only. CRIT, the LAG number, slack tails and small baseline readouts show on the selected task alone; brackets, ghosts, critical lines and big (5+ day) variances stay. Display › Labels › Readouts › All brings every readout back. Names read 12px, up to 240px. */ body .gantt-bar-label .gantt-label-meta[data-label-field=progress]{opacity:.6} body.gantt-usability[data-takt-labels=standard] .gantt-bar-label:not(.summary){font-size:12px;font-weight:500} body.gantt-usability:not(.gantt-full-names) .gantt-bar-label:not(.inside){max-width:240px} /* The Display sample follows Readouts: Auto hides the selected-task-only readouts (nothing is selected in the sample). */ /* Wait reason icons (Gentleface, Justin 2026-11-03): beside each reason in Why, on wait bars and in wait gaps. */ .takt-gantt-workspace .bar.takt-wait .takt-wait-label>svg{flex:none;margin-right:4px} .takt-pause-gap span>svg{display:inline-block;vertical-align:-2px;margin-right:3px} /* Commitments in Auto (Justin, 2026-11-03, "LATE vs promise"): the row's readout is LATE n WD when the forecast misses the promise. The slip history (ghost, slip dashes, SLIP) shows on the selected row, in All, and in the Inspector. */ .takt-commitment-gap::before{padding:0 3px;background:var(--tk-surface,#fff);font:600 9.5px/14px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums} .takt-commitment-gap.late::before{color:var(--tk-late,#b45a4a)}.takt-commitment-gap.early::before{color:var(--tk-ok,#287366)} /* A label that changes (Fit · All / Selected / Detail, #974) keeps the width of its widest wording: a zero-height copy under it sets the width. */ .gantt-usability-toolbar>.gantt-tools{flex-shrink:0}.gantt-usability-toolbar{flex-wrap:wrap;row-gap:4px} /* Commitment Inspector (Justin 2026-11-03, mockup items 10-12): Promise with Committed / Forecast / Variance, then Links (Waits on and Drives), the owner fields, Date history and Appearance folds. */ /* #817 / UI-STANDARD §17A.2a: stable Baseline windows, with overflow inside. */ .takt-baseline-dialog .takt-baseline-modes{display:grid;grid-template-columns:minmax(0,1fr)} .takt-baseline-dialog .takt-baseline-mode-note{grid-area:2 / 1;display:block} .takt-baseline-dialog .takt-baseline-mode-note[hidden]{visibility:hidden} .takt-baseline-dialog [data-save]{min-width:128px} .takt-baseline-dialog .takt-baseline-modes[hidden]{display:none} /* #592 / UI 17A.2a: a reserved touch reading area; title and controls never wrap or move. */ /* Edit tools in the sidebar (Justin, 2026-11-03, option D): one column, icon over label, a faint line between Add, Indent/Outdent/Move, Undo/Redo and Collapse all. Same purple icons as the bar. */ #takt-sidebar-tools>.gantt-side-tools{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;padding:4px 0 8px;border-top:1px solid #e7e6e1;color:var(--tk-accent,#3f4fc4)} #takt-sidebar-tools>.gantt-side-tools>:is(.gantt-add-more,.gantt-outline-more){min-height:0;height:14px;padding:0;margin-top:-4px} #takt-sidebar-tools>.gantt-side-tools>:is(.gantt-add-more,.gantt-outline-more) svg{width:12px;height:12px} #takt-sidebar-tools>.gantt-side-tools>:is(#indent,[aria-label=Undo],.gantt-outline-toggle){margin-top:7px;position:relative} #takt-sidebar-tools>.gantt-side-tools>:is(#indent,[aria-label=Undo],.gantt-outline-toggle)::before{content:"";position:absolute;top:-5px;left:12px;right:12px;height:1px;background:#e1e4f2} /* Header cleanup (Justin, 2026-11-03, "looks better, let's run with it"; mockup https://claude.ai/artifact/7GHc8BtYg4iRmhEcaUrivH): one white surface under the command bar, one hairline colour, quiet grey header words, neutral weekend shade. The status line under the bar floats over the chart top instead of taking a lavender stripe (nothing moves when it speaks). */ body.takt-unified{--gantt-hairline:#e6e8ee} body.takt-unified #gantt-input-status{position:absolute;z-index:var(--gz-shell-status,5);left:50%;transform:translateX(-50%);margin-top:4px;height:auto;min-height:0;padding:2px 10px;border-radius:6px;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(20,22,58,.08)} body.takt-unified #gantt-input-status:empty{display:none} body.takt-unified .gantt-usability-toolbar{border-bottom-color:var(--gantt-hairline)} body.takt-unified .tl-strip,body.takt-unified .tl-strip :is(button,input,select,span,div,p,b){font-family:"Saira",system-ui,sans-serif} body.takt-unified .tl-strip{border-bottom-color:var(--gantt-hairline)} body.takt-unified .tl-strip-head{border-right-color:var(--gantt-hairline)} body.takt-unified :is(.tl-strip-head,.chart-head .table-cells,.timeline-head){background:#fff} body.takt-unified .chart-head{border-bottom:1px solid var(--gantt-hairline)} body.takt-unified .chart-head .table-cells{border-right-color:var(--gantt-hairline)} body.takt-unified .month-row{border-bottom-color:var(--gantt-hairline)} body.takt-unified :is(.chart-head .table-cells,.month-row,.days-row){color:#6b7280} body.takt-unified :is(.weekend-shade,.days-row .gantt-weekend){background:var(--tk-weekend)} /* One hairline per row in one colour on both sides of the divider (grid review 05, Justin 2026-11-05). */ body.takt-unified .chart-row .track{border-bottom-color:var(--tk-grid-line)} /* BR-0153 (Justin, 2026-11-08: "with gridlines on, the links and today date line are behind the grid"). Each row's hairline was the track's bottom border, and the track sits above the links (z 3 over 2) and the calendar layer that holds the Today line (z 1), so every row line cut a gap through the links and the Today line. The hairlines are now one repeating paint at the end of the calendar layer instead: above the weekend and holiday shading and the week lines (as before), below the Today line, the links and the bars. Rows share one pitch (--takt-row), so the lines land where the borders were. One element, no per-row work. */ body.takt-unified #gantt .chart-row .track{border-bottom-color:transparent} body.takt-unified #gantt .chart>.calendar-layer::after{content:"";position:absolute;inset:0;pointer-events:none;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--takt-row,30px) - 1px),var(--tk-grid-line) 0 var(--takt-row,30px))} #takt-sidebar-tools>.gantt-side-tools{border-top-color:#e6e8ee} /* Table header: column names sit on the day row's line, level with the dates. No project name or finish date above them (#1011, Justin 2026-11-04: "ditch it … never seen a reason for that to be visible"), and no stray hairline across. */ body.takt-unified .chart-head>.table-cells{align-items:end!important;background:#fff} body.takt-unified .chart-head>.table-cells>span{height:21px!important;border-bottom:0!important} /* #812 / UI §20.3: one quiet style; reserve geometry in all interaction states. */ body.gantt-usability .gantt-bar-label:not(.inside){font:500 12px/16px "Saira",sans-serif;color:var(--tk-ink-2,#4e5159);background:none;padding:0;margin:0;letter-spacing:0;text-transform:none;text-shadow:0 1px var(--tk-surface,#fff),1px 0 var(--tk-surface,#fff),0 -1px var(--tk-surface,#fff),-1px 0 var(--tk-surface,#fff);pointer-events:auto} body.gantt-usability .gantt-bar-label.summary{font-size:12.5px;font-weight:600;color:var(--tk-ink,#17181a)} .chart-row:has(.bar.milestone):not(.takt-commitment-row) .gantt-bar-label{font-weight:600!important} .gantt-bar-label .gantt-label-meta{font-family:"Saira",sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--tk-ink-3)} .takt-lag-label,.takt-baseline-slip,.takt-slip-text,.gantt-crit-start,.gantt-promise-readout,.takt-buffer-label,.takt-pause-gap{font:500 11px/14px "Saira",sans-serif!important;letter-spacing:0!important;text-transform:none!important;font-variant-numeric:tabular-nums;padding:0;border:0;background:none;box-shadow:none;white-space:nowrap} .takt-lag-label::before,.takt-baseline-slip::before,.takt-slip-text::before,.gantt-crit-start::before,.takt-commitment-gap::before{content:none} .gantt-promise-readout{position:absolute;top:3px;color:var(--tk-late,#b45a4a);z-index:var(--gz-row-marker,5)}.gantt-promise-readout.early{color:var(--tk-ok,#287366)} .takt-gantt-workspace .takt-lag .takt-lag-label{left:50%;right:auto;transform:translateX(-50%);padding:0;background:none;font-size:11px} .slack-num{display:none!important} .takt-commitment-row .gantt-bar-label.right{margin-left:0} body.gantt-usability .gantt-bar-label.right{margin-left:0} body.gantt-usability .gantt-bar-label.left{margin-left:0} .takt-buffer-label::before{content:none} .gantt-label-meta[data-label-field=progress]{opacity:.6;font-variant-numeric:tabular-nums} .gantt-label-support{font-size:11px;font-variant-numeric:tabular-nums} /* The forecast is secondary to the anchored promise name: keep its line and ring below the text. */ .takt-commitment-gap{top:24px} /* Keep secondary detail out of compressed zooms, in both Auto and All. */ #gantt[data-takt-zoom=month] :is(.takt-lag,.float-tail,.takt-baseline-ghost,.takt-baseline-slip,.takt-slip-text,.gantt-crit-start,.takt-commitment-slip){display:none!important} #gantt[data-takt-zoom=week] :is(.takt-lag-label,.slack-num,.takt-baseline-slip,.takt-slip-text,.gantt-crit-start){display:none!important} /* Only the name shrinks: preserve the summary percent and supporting fields. */ body.gantt-usability .gantt-bar-label:not(.inside){display:inline-flex} .gantt-bar-label:not(.inside)>span{flex:none;white-space:pre} .gantt-bar-label:not(.inside)>[data-label-field=name]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} body.gantt-usability.gantt-crit-labels.gantt-critical-on .gantt-bar-label.critical:not(.inside){color:var(--tk-critical,#d1343a)} body.gantt-usability.gantt-crit-labels.gantt-critical-on .takt-commitment-row .gantt-bar-label:not(.inside){color:var(--tk-ink-2,#4e5159)} .gantt-usability-toolbar .gantt-zoom input{--tk-accent:var(--tk-control-tone)} .gantt-usability-toolbar .gantt-zoom{color:var(--tk-icon-label)!important} .gantt-usability-toolbar .gantt-zoom :is(button,span,small){color:var(--tk-icon-label)} /* No extra lines (Justin, 2026-11-03, "eliminate all these extra lines … including the ones around the T"; "the vertical and horizontal strips should all be tinted just slightly darker than the workspace"). The sidebar and command bar are set apart by tint, not edges. */ /* The sidebar strip and the round t. are the shell's (web/unified-shell.css, BR-0025), the same on every screen. */ body.takt-unified .gantt-usability-toolbar,body.takt-unified .takt-gantt-workspace>.topbar.gantt-usability-toolbar{background:var(--tk-strip,#f4f5f7)!important;border-bottom:0!important;box-shadow:none} body.takt-unified .gantt-usability-toolbar .gantt-tools+.gantt-tools{border-left:0!important} #takt-sidebar-tools>.gantt-side-tools{border-top:0} #takt-sidebar-tools>.gantt-side-tools>:is(#indent,[aria-label=Undo],.gantt-outline-toggle)::before{content:none} body.takt-unified .gantt-usability-toolbar .gantt-zoom-step{border:0!important;background:transparent!important;border-radius:var(--tk-r-pill)!important} body.takt-unified .gantt-usability-toolbar .gantt-zoom-step:hover{background:var(--tk-hover,#eef0f4)!important} @media(max-width:900px){body.takt-unified .takt-shell{background:var(--tk-strip,#f4f5f7);border-bottom:0}} /* Plan menu (Justin, 2026-11-03): its own toolbar menu after Baseline, drawn like More but opening from its left edge. */ /* Undo bar (Justin, 2026-11-03: "the undo pill should be a bar at the bottom of the screen … too small and out of the way"). Quiet pill (Justin, 2026-11-04, after a customer demo: "still way too prominent … shrink it a lot on the bottom", #982): a small light pill at the bottom centre of the workspace, hairline edge, secondary-grey words, text buttons. It is position:fixed over the chart, so nothing moves when it speaks (§17A.2a). Dark mode follows the tokens. */ body.takt-unified #gantt-input-status{position:fixed;z-index:var(--tk-z-toast-layer,14000);top:auto;bottom:12px;left:calc(var(--takt-sidebar,0px) + 16px);right:16px;transform:none;margin:0 auto;width:fit-content;max-width:min(640px,calc(100vw - var(--takt-sidebar,0px) - 32px));box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:3px 6px 3px 12px;border:1px solid var(--tk-line,#e1e4f2);border-radius:999px;background:var(--tk-surface,#fff);color:var(--tk-ink-2,#3b3f6b);font-size:12px;line-height:1.35;box-shadow:0 2px 8px rgba(20,22,58,.08)} body.takt-unified #gantt-input-status:empty{display:none} body.takt-unified #gantt-input-status button{flex:none;margin-left:auto;min-height:20px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--tk-accent,#4b5bd6);font:inherit;font-size:12px;font-weight:600;cursor:pointer} body.takt-unified #gantt-input-status button:is(:hover,:focus-visible){background:var(--tk-hover,#f1f2fa);outline:none} /* Scrolled rows stop under the column names (Justin, 2026-11-03): the sticky header sits above the rows' sticky task cells (z 7). */ .takt-gantt-workspace .gantt .chart-head{z-index:var(--gz-chart-head,8)} /* Share menu (Justin, 2026-11-03): an icon on each item, like More and Plan; a quiet rule under Share link. */ .gantt-usability-toolbar .gantt-export>div>button{gap:10px}.gantt-usability-toolbar .gantt-export>div>button>.gantt-mi-icon{flex:none;color:#45484e} .gantt-usability-toolbar .gantt-export>div>hr.gantt-menu-rule{border:0;border-top:1px solid var(--tk-line,#e1e4f2);margin:4px 2px} /* Planned tick keeps one width: every wording sits in the same cell and only the current one shows (Justin, 2026-11-04). */ /* Tool labels off (Settings › Display, per device; Justin 2026-11-04 option A): the words under the icons go, the icons keep their size and centre in the same box, and the bar keeps its height, so nothing moves. Zoom keeps its unit label. */ /* Undo bar buttons stay together at the right (Justin, 2026-11-04: "the buttons need to be placed correctly"): only the first button pushes right; the ones after it sit close along. */ body.takt-unified #gantt-input-status button~button{margin-left:-6px} .gantt-label-baseline{display:inline-block;width:0;height:0;padding:0;margin:0;vertical-align:baseline} /* Blank row (#1002): Add ▾ shows an empty dashed bar; the row itself is a plain gap with only its grab handle on hover. */ .gantt-add-menu [data-kind=blank] i{background:transparent;border:1px dashed var(--tk-ink-3,#9aa0a6)} .takt-gantt-workspace .gantt-blank-row .takt-row-drag{opacity:0}.takt-gantt-workspace .gantt-blank-row:is(:hover,.selected) .takt-row-drag{opacity:1} .takt-gantt-workspace .gantt-blank-row .table-cells>span:not(.row-num){color:transparent}.takt-gantt-workspace .gantt-blank-row .table-cells>span:not(.row-num) *{visibility:hidden} /* #988 / L14 L18 L19 L24 L31: geometry comes from the row scene, independent of interaction state. */ body.gantt-usability .gantt-row-layer{position:relative;overflow:visible} body.gantt-usability .gantt-row-layer>[data-drawable-key]{box-sizing:border-box;margin:0;translate:none;transform:none;min-width:0;min-height:0;padding:0} body.gantt-usability .gantt-row-layer>.bar.commitment{opacity:0;pointer-events:none} body.gantt-usability .gantt-row-layer>.gantt-label-group{pointer-events:none} body.gantt-usability .gantt-row-layer .gantt-layer-text{position:absolute;display:block;max-width:none;line-height:16px;white-space:pre;overflow:visible;padding:0;margin:0;transform:none;translate:none;background:none;text-shadow:none;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;pointer-events:none} :root body.gantt-usability .gantt-row-layer .gantt-layer-text{background:none!important;text-shadow:none!important;box-shadow:none!important} /* #1007 one word per bar: a slot word lists the states it shows in (rest, hover, click). Pointing swaps it after the pointer rests half a second (as hover cards, #984); leaving and selecting swap at once. Every word keeps its room, so nothing moves. */ .gantt-row-layer [data-win]{visibility:hidden;transition:visibility var(--tk-dur-none)} .gantt-row-layer .gantt-label-group:not(.active):not(.selected) [data-win~=rest]{visibility:visible} .gantt-row-layer .gantt-label-group.active:not(.selected) [data-win]{transition-delay:.5s} .gantt-row-layer .gantt-label-group.active:not(.selected) [data-win~=hover],.gantt-row-layer .gantt-label-group.selected [data-win~=click]{visibility:visible} body.gantt-usability .gantt-row-layer>.connection-handle{border:1px solid var(--tk-ink-3);transform:none} body.gantt-usability .gantt-row-layer>.connection-handle::after{left:0;width:7px} /* Bubbles and grips (Justin, 2026-11-08: "the link bubbles and the drag handles are a little too close"; "make the bubble appear a little bigger, without shifting anything"). Nothing moves: the slot stays the outer 7px (L14) and the name still starts at end+8px. The ring is drawn a little larger, growing away from the bar (its bar-side edge stays put), and larger again under the pointer or as a drop target. Each control's reach grows away from the other: the bubble's up and down (never past the outer 7px, L14, so a name stays a name), the grip's into the bar. Neither ever moves a bar, a link or a word. */ /* The ring is painted by ::before so the slot's own box (what the scene and the link router measure) never changes. */ body.gantt-usability .gantt-row-layer>.connection-handle{--handle-ring:var(--tk-ink-3);--handle-fill:#fff;--handle-halo:none;border-color:transparent!important;background:transparent!important;box-shadow:none!important} body.gantt-usability .gantt-row-layer>.connection-handle::before{content:"";position:absolute;inset:-1px;box-sizing:border-box;border:1px solid var(--handle-ring);border-radius:50%;background:var(--handle-fill);box-shadow:var(--handle-halo);transform:scale(1.15);transition:transform var(--tk-dur-fast,.12s) ease-out;pointer-events:none} body.gantt-usability .gantt-row-layer>.connection-handle[data-endpoint=F]::before{transform-origin:0 50%} body.gantt-usability .gantt-row-layer>.connection-handle[data-endpoint=S]::before{transform-origin:100% 50%} body.gantt-usability .gantt-row-layer>.connection-handle:is(:hover,.target-active,:focus-visible)::before{transform:scale(1.45)} body.gantt-usability .gantt-row-layer>.connection-handle.target-active{--handle-fill:#4b5bd6;--handle-halo:0 0 0 3px #4b5bd633} body.gantt-usability.takt-linking .gantt-row-layer>.connection-handle.target-invalid{--handle-ring:#b3261e;--handle-fill:#fce8e6;--handle-halo:0 0 0 2px #b3261e22} body.gantt-usability .gantt-row-layer>.connection-handle::after{content:"";position:absolute;top:-6px;bottom:-6px;left:0!important;width:7px} @media(pointer:coarse){ body.gantt-usability .gantt-row-layer>.connection-handle::after{top:-9px;bottom:-9px} .takt-gantt-workspace .bar :is(.resize,.takt-resize-start){width:min(12px,40%)} } @media(pointer:fine){.takt-gantt-workspace .bar :is(.resize,.takt-resize-start){width:min(8px,40%)}} /* The grab bar the eye sees stays the outer 6px of the bar; only its reach grows inward. */ .takt-gantt-workspace .bar .resize::after{left:auto;right:0;width:min(6px,100%)} .takt-gantt-workspace .bar .takt-resize-start::after{left:0;width:min(6px,100%)} body.gantt-usability .gantt-row-layer>.takt-pause-gap{display:flex;align-items:center;justify-content:center;transform:none;pointer-events:none} body.gantt-usability .gantt-row-layer>.gantt-scene-progress{pointer-events:none;opacity:.3} /* BR-0028: the critical outline runs all the way round its bar (owner: lib/gantt-row-scene.ts; traced in by web/motion-kit.ts). */ .gantt-row-layer>.gantt-scene-critical{pointer-events:none;overflow:visible}.gantt-row-layer>.gantt-scene-critical>svg{display:block;overflow:visible}.gantt-row-layer>.gantt-scene-critical path{fill:none;stroke:var(--tk-critical,#d1343a);stroke-width:2} body.gantt-usability .gantt-row-layer .gantt-scene-striped{background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--tk-blocked,#c2410c) 60%,transparent) 4px 7px)} body.gantt-usability .gantt-row-layer>.bar.milestone{rotate:none;background:none!important} body.gantt-usability .gantt-row-layer>.bar.milestone::before{content:'';position:absolute;left:14.645%;top:14.645%;width:70.71%;height:70.71%;transform:rotate(45deg);background:var(--gc,var(--tk-milestone,var(--tk-ink)))} #gantt{touch-action:pan-x pan-y} body.gantt-usability .gantt-row-layer>.takt-baseline-ghost.milestone{rotate:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--tk-baseline-ghost,#b4b8c0)} body.gantt-usability .gantt-row-layer>.takt-wait-label{display:flex;align-items:center;overflow:hidden;white-space:nowrap;font:500 11px/14px "Saira",sans-serif;color:var(--tk-ink-3);pointer-events:none} body.gantt-usability .gantt-row-layer .gantt-layer-text[data-label-part=name]{pointer-events:auto} /* A label inside its bar lets clicks through to the bar (double-click opens the Inspector); the bar carries the full title. */ body.gantt-usability .gantt-row-layer .gantt-layer-text.inside{pointer-events:none} body.gantt-usability .gantt-row-layer>.gantt-crit-start{display:flex;align-items:center;justify-content:center} body.gantt-usability .gantt-row-layer>.takt-commitment-ring{border:1px solid var(--tk-ok,#287366);border-radius:50%;background:var(--tk-surface,#fff);pointer-events:none} body.gantt-usability .gantt-row-layer>.takt-commitment-ring.late{border-color:var(--takt-late-mark,#d1343a)} body.gantt-usability .gantt-row-layer>.takt-gantt-commitment{border:0;background:none;--promise-mark:#1f1f1f} body.gantt-usability .gantt-row-layer>.takt-gantt-commitment.late{--promise-mark:var(--tk-late,#d1343a)}body.gantt-usability .gantt-row-layer>.takt-gantt-commitment.early{--promise-mark:var(--tk-ok,#1a7f5a)} body.gantt-usability .gantt-row-layer>.takt-gantt-commitment::before{content:"";position:absolute;left:14.645%;top:14.645%;width:70.71%;height:70.71%;box-sizing:border-box;border:2px solid var(--promise-mark);background:#fff;transform:rotate(45deg)} body.gantt-summary-bracket .gantt-row-layer>.gantt-summary-progress{display:none} body.gantt-summary-bracket .gantt-row-layer>.bar.summary::before,body.gantt-summary-bracket .gantt-row-layer>.bar.summary::after{height:100%} /* #1007 bar label settings: each kind's mark (and the wait bar's words) is Off, Always, On hover or On click (body data-lm-*, web/gantt-interactions.ts). Hidden marks keep their place (visibility), so a reveal never moves a label (L24). On hover shows after the pointer rests half a second; on touch there is no hover, so it works like On click. A late flag with its mark off is drawn like any other flag. */ body[data-lm-late=off] .chart-row :is(.takt-commitment-gap,.takt-commitment-ring.late){visibility:hidden!important} body[data-lm-late=hover] .chart-row :is(.takt-commitment-gap,.takt-commitment-ring.late){transition:visibility var(--tk-dur-none)}body[data-lm-late=hover] .chart-row:not(:hover,:focus-within,.selected) :is(.takt-commitment-gap,.takt-commitment-ring.late){visibility:hidden}body[data-lm-late=hover] .chart-row:is(:hover,:focus-within):not(.selected) :is(.takt-commitment-gap,.takt-commitment-ring.late){transition-delay:.5s} body[data-lm-late=click] .chart-row:not(.selected) :is(.takt-commitment-gap,.takt-commitment-ring.late){visibility:hidden} @media (hover:none){body[data-lm-late=hover] .chart-row:not(.selected) :is(.takt-commitment-gap,.takt-commitment-ring.late){visibility:hidden}} body[data-lm-moved=off] .chart-row :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){visibility:hidden!important} body[data-lm-moved=hover] .chart-row :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){transition:visibility var(--tk-dur-none)}body[data-lm-moved=hover] .chart-row:not(:hover,:focus-within,.selected) :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){visibility:hidden}body[data-lm-moved=hover] .chart-row:is(:hover,:focus-within):not(.selected) :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){transition-delay:.5s} body[data-lm-moved=click] .chart-row:not(.selected) :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){visibility:hidden} @media (hover:none){body[data-lm-moved=hover] .chart-row:not(.selected) :is(.takt-commitment-slip:not(.takt-commitment-preview-band),.takt-commitment-ghost){visibility:hidden}} body[data-lm-buffer=off] .chart-row :is(.takt-buffer-band,.takt-buffer-used){visibility:hidden!important} body[data-lm-buffer=hover] .chart-row :is(.takt-buffer-band,.takt-buffer-used){transition:visibility var(--tk-dur-none)}body[data-lm-buffer=hover] .chart-row:not(:hover,:focus-within,.selected) :is(.takt-buffer-band,.takt-buffer-used){visibility:hidden}body[data-lm-buffer=hover] .chart-row:is(:hover,:focus-within):not(.selected) :is(.takt-buffer-band,.takt-buffer-used){transition-delay:.5s} body[data-lm-buffer=click] .chart-row:not(.selected) :is(.takt-buffer-band,.takt-buffer-used){visibility:hidden} @media (hover:none){body[data-lm-buffer=hover] .chart-row:not(.selected) :is(.takt-buffer-band,.takt-buffer-used){visibility:hidden}} body[data-lm-baseline=off] .chart-row .takt-baseline-ghost{visibility:hidden!important} body[data-lm-baseline=hover] .chart-row .takt-baseline-ghost{transition:visibility var(--tk-dur-none)}body[data-lm-baseline=hover] .chart-row:not(:hover,:focus-within,.selected) .takt-baseline-ghost{visibility:hidden}body[data-lm-baseline=hover] .chart-row:is(:hover,:focus-within):not(.selected) .takt-baseline-ghost{transition-delay:.5s} body[data-lm-baseline=click] .chart-row:not(.selected) .takt-baseline-ghost{visibility:hidden} @media (hover:none){body[data-lm-baseline=hover] .chart-row:not(.selected) .takt-baseline-ghost{visibility:hidden}} body[data-lm-slack=off] .chart-row .float-tail{visibility:hidden!important} body[data-lm-slack=hover] .chart-row .float-tail{transition:visibility var(--tk-dur-none)}body[data-lm-slack=hover] .chart-row:not(:hover,:focus-within,.selected) .float-tail{visibility:hidden}body[data-lm-slack=hover] .chart-row:is(:hover,:focus-within):not(.selected) .float-tail{transition-delay:.5s} body[data-lm-slack=click] .chart-row:not(.selected) .float-tail{visibility:hidden} @media (hover:none){body[data-lm-slack=hover] .chart-row:not(.selected) .float-tail{visibility:hidden}} body[data-lm-lag=off] .chart-row .takt-lag{visibility:hidden!important} body[data-lm-lag=hover] .chart-row .takt-lag{transition:visibility var(--tk-dur-none)}body[data-lm-lag=hover] .chart-row:not(:hover,:focus-within,.selected) .takt-lag{visibility:hidden}body[data-lm-lag=hover] .chart-row:is(:hover,:focus-within):not(.selected) .takt-lag{transition-delay:.5s} body[data-lm-lag=click] .chart-row:not(.selected) .takt-lag{visibility:hidden} @media (hover:none){body[data-lm-lag=hover] .chart-row:not(.selected) .takt-lag{visibility:hidden}} body[data-lm-critstart=off] .chart-row .gantt-crit-start{visibility:hidden!important} body[data-lm-critstart=hover] .chart-row .gantt-crit-start{transition:visibility var(--tk-dur-none)}body[data-lm-critstart=hover] .chart-row:not(:hover,:focus-within,.selected) .gantt-crit-start{visibility:hidden}body[data-lm-critstart=hover] .chart-row:is(:hover,:focus-within):not(.selected) .gantt-crit-start{transition-delay:.5s} body[data-lm-critstart=click] .chart-row:not(.selected) .gantt-crit-start{visibility:hidden} @media (hover:none){body[data-lm-critstart=hover] .chart-row:not(.selected) .gantt-crit-start{visibility:hidden}} body[data-lm-wait=off] .chart-row .takt-wait-label{visibility:hidden!important} body[data-lm-wait=hover] .chart-row .takt-wait-label{transition:visibility var(--tk-dur-none)}body[data-lm-wait=hover] .chart-row:not(:hover,:focus-within,.selected) .takt-wait-label{visibility:hidden}body[data-lm-wait=hover] .chart-row:is(:hover,:focus-within):not(.selected) .takt-wait-label{transition-delay:.5s} body[data-lm-wait=click] .chart-row:not(.selected) .takt-wait-label{visibility:hidden} @media (hover:none){body[data-lm-wait=hover] .chart-row:not(.selected) .takt-wait-label{visibility:hidden}} body[data-lm-late=off] .chart-row .takt-commitment-flag.late svg,body[data-lm-late=click] .chart-row:not(.selected) .takt-commitment-flag.late svg,body[data-lm-late=hover] .chart-row:not(:hover,:focus-within,.selected) .takt-commitment-flag.late svg{stroke:#17181a} body[data-lm-late=off] .chart-row .takt-commitment-flag.customer.late .f,body[data-lm-late=click] .chart-row:not(.selected) .takt-commitment-flag.customer.late .f,body[data-lm-late=hover] .chart-row:not(:hover,:focus-within,.selected) .takt-commitment-flag.customer.late .f{fill:#17181a} @media (hover:none){body[data-lm-late=hover] .chart-row:not(.selected) .takt-commitment-flag.late svg{stroke:#17181a}body[data-lm-late=hover] .chart-row:not(.selected) .takt-commitment-flag.customer.late .f{fill:#17181a}} /* ==== V5 header (#1011, Justin 2026-11-04 9:13–9:28 PM PT) ==== One slim row of icon capsules on the strip; the zoom slider keeps its full size and sits in the middle of the window, the capsules arranged left and right of it. The round t. keeps the top-left corner and the sidebar column below it goes, so the table starts at the window's edge. Placement only: the capsules' look is the kit's (.tk-tool-group.is-capsule). Delete this block (and the Header setting) to drop V5; Classic needs none of it. From 744px wide, as in gantt-interactions.ts (BR-0145: iPad portrait gets it too, in two rows, below). */ @media(min-width:901px){ html[data-header=v5] body.takt-unified.takt-gantt-workspace:not(.gantt-fullscreen){--takt-sidebar:0px} html[data-header=v5] body.takt-gantt-workspace .takt-global-sidebar{bottom:auto;width:64px;height:var(--gantt-v5-row-h,var(--gantt-v5-bar-h));padding:0;align-items:center;justify-content:center;background:transparent!important} html[data-header=v5] body.takt-gantt-workspace .takt-global-sidebar>:not(.tk-brand,.tk-app-menu){display:none!important} /* The t. still opens the Takt menu (Home, Help, Settings) over the Gantt; only its own column goes. */ html[data-header=v5] body.takt-gantt-workspace .takt-global-sidebar{overflow:visible} } @media(min-width:744px){ html[data-header=v5] body.takt-gantt-workspace{--gantt-v5-bar-h:60px} html[data-header=v5] .gantt-usability-toolbar[data-header=v5]{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px;height:var(--gantt-v5-bar-h)!important;min-height:0!important;padding:0 12px!important;flex-wrap:nowrap!important} html[data-header=v5] .gantt-usability-toolbar[data-header=v5]>:is(.gantt-tools:not([aria-label="Gantt navigation"]),.gantt-command-spacer){display:none!important} /* The project name stays for screen readers and keyboard focus (as in Classic), out of sight: no name in the bar (#1011). */ html[data-header=v5] .gantt-usability-toolbar[data-header=v5]>.gantt-tools[aria-label="Gantt navigation"]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .gantt-usability-toolbar[data-header=v5]>.gantt-v5-side{grid-row:1;display:flex;align-items:center;gap:10px;min-width:0} .gantt-usability-toolbar[data-header=v5]>.gantt-v5-side[data-side=left]{grid-column:1;justify-content:flex-start;padding-left:52px} .gantt-usability-toolbar[data-header=v5]>.gantt-v5-side[data-side=centre]{grid-column:2;justify-content:center} .gantt-usability-toolbar[data-header=v5]>.gantt-v5-side[data-side=right]{grid-column:3;justify-content:flex-end} .gantt-usability-toolbar[data-header=v5] .gantt-v5-side>.is-capsule{flex:none} .gantt-usability-toolbar[data-header=v5] .gantt-zoom{flex:none} } /* BR-0145 (Justin 2026-11-08): iPad portrait (744-1179px) gets the same capsules in two rows instead of the side rail and the wrapped Classic bar. Row 1: Edit, Undo and redo, Go to on the left; Panels, Share and more on the right. Row 2: the zoom slider, full size, on the left; View on the right. The sides step aside (display:contents) so each capsule takes its own cell; the same buttons in the same capsules as landscape. Beside the round t. (901px and up) both rows start past it; below 901px the slim bar already holds the t., so the rows start at the window's edge. */ @media(min-width:744px) and (max-width:1179px){ html[data-header=v5] body.takt-gantt-workspace{--gantt-v5-row-h:50px;--gantt-v5-bar-h:112px} /* Round 2 (Justin 2026-11-08 7:01 AM PT): even spacing. 2px over row 1, 4px between the rows and 6px under row 2, so the second row no longer sits on the list header. */ html[data-header=v5] .gantt-usability-toolbar[data-header=v5]{grid-template-columns:auto auto auto minmax(0,1fr) auto auto;grid-template-rows:repeat(2,var(--gantt-v5-row-h));row-gap:4px;column-gap:10px;align-content:start;padding:2px 12px 6px 64px!important} .gantt-usability-toolbar[data-header=v5]>.gantt-v5-side{display:contents} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="Edit"]{grid-area:1/1} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="Undo and redo"]{grid-area:1/2} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="Go to"]{grid-area:1/3} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="Panels"]{grid-area:1/5} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="Share and more"]{grid-area:1/6} /* The slider sits in the middle of the window, as in landscape (round 2); View stays at the right end of row 2. */ .gantt-usability-toolbar[data-header=v5] .gantt-v5-side>.gantt-zoom{grid-area:2/1/3/7;justify-self:center;position:relative;left:calc((12px - var(--gantt-v5-pad-left,64px))/2)} .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="View"]{grid-area:2/5/3/7;justify-self:end;z-index:var(--gz-head-period-label,1)} /* View sits at the window's right edge here, so its Show menu opens leftward and stays on screen (round 2). */ .gantt-usability-toolbar[data-header=v5] .is-capsule[aria-label="View"] .gantt-show-menu>div{left:auto;right:0} } @media(min-width:744px) and (max-width:900px){ html[data-header=v5] .gantt-usability-toolbar[data-header=v5]{padding-left:12px!important;--gantt-v5-pad-left:12px} } .gantt-v5-fold{display:none!important} @media(min-width:1180px) and (max-width:1299px){ .gantt-usability-toolbar[data-header=v5] [data-v5-fold]{display:none!important} .gantt-usability-toolbar[data-header=v5] .gantt-v5-fold{display:flex!important} } /* Days off inside a bar (BR-0007, Justin 2026-11-05 "Dots"): an opt-in row of small dots along the bottom edge of the bar, in the surface colour, for the weekends and holidays it spans but nobody works. The bar itself stays solid. Off by default (Settings › Gantt display › Timeline › Days off on bars, body.gantt-off-day-marks). Distinct from progress (fill), a pause (dashed centre line) and a Wait (dashed box). #1135: shown only while the day shading is (Day scale, 9px a day or more). */ .gantt-row-layer>.bar>.takt-off-days{display:none;position:absolute;bottom:2px;height:2px;background:radial-gradient(circle,var(--tk-surface,#fff) .8px,transparent 1.1px) 1px 50%/5px 2px repeat-x;pointer-events:none} body.gantt-off-day-marks #gantt.gantt-daily .gantt-row-layer>.bar>.takt-off-days{display:block} /* One person's days off (People kit B2, bar language agreed with #1092): a thin amber line just under the bar on the weekdays someone on the task has time off (Settings › People). The bar keeps its dates and its fill; hover names who and when. */ .gantt-row-layer>.bar>.takt-away-days{position:absolute;bottom:-4px;height:2px;border-radius:1px;background:var(--tk-warn,#b7791f);pointer-events:none} /* BR-0044: bigger touch areas on iPad without moving anything. The small header arrows and zoom steps get an invisible hit area around them. The link circles keep theirs: the name sits 8px past the bar's end and L14 keeps it untouchable. */ @media(pointer:coarse){ .gantt-usability-toolbar :is(.gantt-add-more,.gantt-outline-more),.gantt-usability-toolbar .gantt-zoom-step{position:relative} .gantt-usability-toolbar :is(.gantt-add-more,.gantt-outline-more)::after{content:"";position:absolute;inset:-5px -8px} .gantt-usability-toolbar .gantt-zoom-step::after{content:"";position:absolute;inset:-9px} } /* View only lock (Justin, 2026-11-08; web/view-lock.ts). Edit tools fade and take no clicks; controls that only edit are hidden or inert, so a tap on them lands on the row and selects it; the Inspector reads but its fields don't take input. */ .takt-view-locked .gantt-edit-tool{opacity:var(--tk-control-disabled-opacity,.38);pointer-events:none} .takt-view-locked .takt-gantt-workspace :is(.connection-handle,.resize,.takt-resize-start,.takt-date-pick){display:none!important} .takt-view-locked .takt-gantt-workspace :is(.takt-st,.takt-pl){pointer-events:none} .takt-view-locked .takt-gantt-workspace :is(.bar,.takt-row-drag,.takt-commitment-flag){cursor:default} .takt-view-locked .takt-gantt-inspector :is(input,select,textarea,form button,[data-status-open],[data-planned],[data-note-open],[data-edit-note],[data-delete-note],[data-add-pause]){pointer-events:none;opacity:var(--tk-control-disabled-opacity,.38)} /* Bottom tray (Justin, 2026-11-08: Settings › Display › Inspector › Bottom). A glass card pulled in from the sides and the bottom, over the chart, so the chart keeps its full width and nothing beside it moves. The header is one row; the five tiles share the rest (web/inspector-kit.ts tile()). */ body .takt-gantt-inspector[data-layout=tray]{top:auto;left:calc(var(--takt-sidebar,0px) + var(--tk-tray-inset,12px));right:var(--tk-tray-inset,12px);bottom:var(--tk-tray-inset,12px);width:auto;height:var(--tk-tray-h,300px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--tk-glass-edge,#ffffffbf);border-radius:var(--tk-tray-r,18px);background:color-mix(in srgb,var(--tk-surface,#fff) 84%,transparent);-webkit-backdrop-filter:var(--tk-glass-blur,blur(14px) saturate(190%));backdrop-filter:var(--tk-glass-blur,blur(14px) saturate(190%));box-shadow:inset 0 1px 0 var(--tk-glass-hi,#ffffffe6),0 18px 48px #14143230;overflow:visible} /* BR-0190: the tray rule above sets display, which outranks [hidden]; a closed tray must not stay drawn. */ body .takt-gantt-inspector[data-layout=tray][hidden]{display:none} .takt-gantt-inspector[data-layout=tray]>.takt-gantt-resize,.takt-gantt-inspector[data-layout=tray] .ti-full-name,.takt-gantt-inspector[data-layout=tray] .takt-float-toggle{display:none} .takt-gantt-inspector[data-layout=tray]>.ti-head{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:var(--tk-s3,12px);min-width:0;padding:var(--tk-s2,8px) var(--tk-s2,8px) var(--tk-s2,8px) var(--tk-s4,16px);border-bottom:0} .takt-gantt-inspector[data-layout=tray]>.ti-head>.ti-name{order:0;flex:1 1 auto;min-width:calc(10 * var(--tk-s4,16px));max-width:calc(26 * var(--tk-s4,16px))} .takt-gantt-inspector[data-layout=tray]>.ti-head>.ti-name input{font-size:var(--tk-fs-xl,17px);font-weight:700} .takt-gantt-inspector[data-layout=tray]>.ti-head>.ti-part-row{order:1;flex:0 1 auto;min-width:0;gap:var(--tk-s3,12px)} .takt-gantt-inspector[data-layout=tray]>.ti-head>:not(.ti-name):not(.ti-part-row){order:2;flex:1 0 auto;min-width:0} .takt-gantt-inspector[data-layout=tray]>.tki-foot{grid-column:2;grid-row:1;align-self:center;display:flex;align-items:center;justify-content:flex-end;width:var(--tk-tray-foot-w,176px);overflow:hidden;gap:var(--tk-s2,8px);min-height:0;padding:0 var(--tk-s4,16px) 0 0;border:0;background:transparent} .takt-gantt-inspector[data-layout=tray]>.takt-gantt-inspector-scroll{grid-column:1/-1;grid-row:2;display:grid;position:relative;grid-template-columns:1.3fr 1fr 1.15fr 1fr 1fr;gap:var(--tk-s2,8px);overflow:visible;padding:0 var(--tk-s3,12px) var(--tk-s3,12px)} /* With the tray chosen the chart can scroll its last rows up above the tray. Kept while the tray is closed too, so closing it never pulls the rows back down (nothing moves). The table and chart share this one scroller (#gantt). */ body.takt-gantt-tray-room #gantt>.chart{margin-bottom:calc(var(--tk-tray-h,300px) + var(--tk-tray-inset,12px))} /* The save line sits above the tray while it is open. */ body.takt-gantt-inspector-tray #gantt-input-status{translate:0 calc(-1 * (var(--tk-tray-h,300px) + var(--tk-tray-inset,12px)))} /* BR-0197: while a card is risen, the Undo toast sits above it too, never over it (Justin, 2026-11-09). */ body.takt-gantt-inspector-tray.takt-tray-card-raised #gantt-input-status{translate:0 calc(-1 * (var(--tk-tray-h,300px) + var(--tk-tray-inset,12px) + var(--tk-tile-rise,220px)))} /* A tile is narrow: a label that wraps when its control grows (Start no earlier than gaining its date) would push the switch down under the pointer. Labels in the tray stay on one line and trim instead (UI-STANDARD 17A.2a). */ .takt-gantt-inspector[data-layout=tray] .tki-row>.tki-label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .takt-gantt-inspector[data-layout=tray] .tki-row>.tki-ctl{flex:0 0 auto} /* Rules and look (and a commitment's Owner card) rises while it is in use (Justin, 2026-11-09: "cramped for Buffer and Other"): it grows up over the chart from its own place, then settles back. It always sits in the fifth slot, so the other tiles never move. */ .takt-gantt-inspector[data-layout=tray] .tki-tile.is-notes[data-raise]{grid-column:4/5} .takt-gantt-inspector[data-layout=tray] .tki-tile[data-raise]{grid-column:5/6;grid-row:1/2;position:absolute;left:0;right:0;bottom:0;height:100%;transition:height var(--tk-dur-shift,220ms) var(--tk-ease),box-shadow var(--tk-dur-shift,220ms) var(--tk-ease)} .takt-gantt-inspector[data-layout=tray] .tki-tile[data-raise].is-raised{z-index:var(--gz-panel-raised-tile,1);height:calc(100% + var(--tk-tile-rise,220px));box-shadow:0 -12px 32px #1414321f} /* Colour in a tile: the same swatches, small enough to sit as slim rows inside the card. */ .takt-gantt-inspector[data-layout=tray] .gantt-detail-highlight .tk-swatches{grid-template-columns:repeat(auto-fill,var(--tk-tile-sw,16px));justify-content:space-between;gap:var(--tk-s1,4px);padding:0;--tk-swatch-size:var(--tk-tile-sw,16px)} /* Ask Takt docks on the right from the top bar to the bottom (web/ask-takt.ts). With the tray open the two sit side by side: the tray ends where Ask begins, so neither covers the other and a rising card stays in view (Justin, 2026-11-09). */ body.takt-ask-open .takt-gantt-inspector[data-layout=tray]{right:calc(var(--takt-gantt-inspector-width,380px) + var(--tk-tray-inset,12px))} /* BR-0181 weekly snapshot row (web/weekly-snapshot.ts): "Weekly snapshot", its day and switch, in Save this version and Plan details. */ .takt-weekly-row,.tk-pc .pc-row.two.takt-weekly-row{display:flex;align-items:center;gap:12px} .takt-weekly-text{flex:1;min-width:0} .takt-weekly-row .tk-select-quiet:disabled{opacity:.5} .takt-baseline-dialog .takt-weekly-note{margin:-4px 0 8px} /* "−15 working days vs. Original committed date" wraps in a narrow card instead of running off its edge (Justin, 2026-11-09). */ .takt-gantt-inspector[data-layout=tray] .ti-slip-chip{display:inline;height:auto;white-space:normal;line-height:1.6;padding:1px 7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}