/* Settings › Gantt and Bar labels: the Display pane and its sample Gantt (moved from gantt-inspector.css, BR-0001).
   Settings opens on every page, so these panes have their own sheet that every page loads (unified-shell.css imports it;
   the plain Gantt page links it); nothing is fetched when Settings opens. */
.gantt-display{position:relative}
.gantt-display-top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--tk-dens-gap) * 2);flex-wrap:wrap}
.gantt-display-top .tk-section-title{margin-right:auto}
.gantt-display-foot{display:flex;align-items:center;gap:calc(var(--tk-dens-gap) * 2.5);margin-top:8px}
.gantt-display-foot .tk-link[hidden]{display:none}
.gantt-display-pane.tk-win-body{padding-top:0}
.gantt-display-pane section{display:flex;flex-direction:column}
.gantt-display-pane section[hidden]{display:none}
.gantt-display-project{display:inline-flex;align-items:center;gap:8px;min-width:0}
.gantt-display-project b{min-width:0;overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.gantt-display-badge{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:3px;background:#6c7078;color:#fff;font-size:11px;font-style:normal;font-weight:700}
.gantt-display-problem{margin:10px 0 0;font-size:12.5px;color:#d1343a}
.gantt-display-sample{position:sticky;top:0;z-index:2;min-height:calc(34px + 5 * 34px + 2px + 20px);padding:14px 0 6px;background:#ffffff}
.gdp{--gdp-row:28px;--gdp-font:11px;--gdp-bar:var(--tk-gantt-bar);--gdp-sum:var(--tk-gantt-sum);display:grid;grid-template-columns:auto 1fr;width:100%;box-sizing:border-box;overflow:hidden;border:1px solid #e8e9ec;border-radius:10px;background:#ffffff;font-size:11px}
.gdp:has(.gdp-chart){overflow-x:hidden}
.gdp[data-size=small]{--gdp-font:10px}
.gdp[data-size=large]{--gdp-font:12.5px}
.gdp-head{height:34px;border-bottom:1px solid #e8e9ec}
.gdp-table{border-right:1px solid #e8e9ec}
.gdp-table .gdp-head{display:flex;align-items:flex-end;gap:8px;padding:0 8px 5px;font-size:10px;letter-spacing:.06em;color:#6c7078}
.gdp-trow{display:flex;align-items:center;gap:8px;height:var(--gdp-row);padding:0 8px;border-bottom:1px solid #e8e9ec;white-space:nowrap}
.gdp-trow:last-child{border-bottom:0}
.gdp-trow.summary{font-weight:600}
.gdp-wbs{width:22px;flex:none;color:#6c7078}
.gdp.no-wbs .gdp-wbs{display:none}
.gdp-name{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.gdp-chart{position:relative;flex:none}
.gdp-dates{position:relative}
.gdp-month{position:absolute;top:4px;font-size:10px;font-weight:600;color:#6c7078;white-space:nowrap}
.gdp-day{position:absolute;bottom:5px;font-size:10px;color:#6c7078;text-align:center}
.gdp-weekend{position:absolute;top:34px;bottom:0;background:#f2f2f4}
.gdp-holiday{position:absolute;top:34px;bottom:0;background:#f7e2b866;box-shadow:inset 1px 0 #ecc77a55,inset -1px 0 #ecc77a55}
.gdp-today{position:absolute;top:30px;bottom:0;border-left:1.5px solid #4b5bd6}
.gdp-crow{position:relative;height:var(--gdp-row);border-bottom:1px solid #e8e9ec}
.gdp-crow:last-of-type{border-bottom:0}
.gdp-bar{position:absolute;top:50%;display:flex;align-items:center;height:13px;border-radius:3px;background:var(--gdp-bar);transform:translateY(-50%);overflow:hidden}
.gdp-bar span{padding:0 5px;font-size:var(--gdp-font);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdp-bar.finished{opacity:.55}
.gdp-bar.summary{height:8px;border-radius:2px;background:var(--gdp-bar)}
.gdp.bracket .gdp-bar.summary{height:4px;border-radius:0;overflow:visible;box-shadow:-1px 4px 0 -1px var(--gdp-bar),1px 4px 0 -1px var(--gdp-bar)}
.gdp-label{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--gdp-font);line-height:16px;color:#17181a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdp:not(.full-names) .gdp-label{max-width:150px}
.gdp-label .gantt-label-meta{font-weight:400;color:#6c7078}
.gdp-label.done{opacity:.45}
.gdp-label.critical{color:#d1343a}
.gdp-crow:first-of-type .gdp-label{font-weight:600}
.gdp-lag{position:absolute;top:50%;height:13px;transform:translateY(-50%);border-radius:2px;background:repeating-linear-gradient(135deg,#d99a1e 0 2px,transparent 2px 5px)}
.gdp-tail{position:absolute;top:calc(50% + 9px);border-top:1.5px dashed #6c7078}
.gdp-tail-text{position:absolute;top:calc(50% + 2px);font-size:9.5px;color:#6c7078}
.gdp-slip{position:absolute;top:50%;transform:translateY(-50%);padding:0 4px;border-radius:4px;background:#fdeced;color:#d1343a;font-size:9.5px;font-weight:600;line-height:15px}
.gdp-flag{position:absolute;top:50%;width:12px;height:16px;margin-left:-1px;transform:translateY(-55%)}
.gdp-flag svg{display:block;width:12px;height:16px;fill:none;stroke:#17181a;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.gdp-flag .f{fill:#17181a}
.gdp-flag.moved svg{stroke:#b86e00}
.gdp-flag.moved .f{fill:#b86e00}
.gdp-flag.ghost{opacity:.4}
.gdp-flag.ghost .f{fill:none}
.gdp-band{position:absolute;top:calc(50% + 7px);height:4px;background:repeating-linear-gradient(90deg,#d99a1e 0 4px,transparent 4px 6px)}
.gdp-band-text{position:absolute;top:calc(50% + 1px);font-size:9.5px;color:#a96f00;white-space:nowrap}
.gdp-diamond{position:absolute;top:50%;width:10px;height:10px;background:#17181a;box-shadow:0 0 0 1.5px #d1343a;transform:translate(-50%,-50%) rotate(45deg)}
.gdp-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gdp-links path{fill:none;stroke:#a7b5c8;stroke-width:1.2}
.gantt-label-presets{display:inline-flex;align-items:center;gap:10px}
@media(max-width:700px){.gantt-display-nav [role=tablist]{flex-direction:row}}
/* Bar labels window (BR-0043, layout A): the window kit's aside body lays out the list and the sample; only the parts are here. */
.takt-bar-labels-frame{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}
/* Start from: one four-way control across the list's width, each choice on one line (Justin 2026-11-07: "Autom/atic"). */
.takt-bar-labels-start .tk-seg{display:flex;width:100%;box-sizing:border-box}
.takt-bar-labels-start .tk-seg>button{flex:1 1 0;white-space:nowrap}
.takt-bar-labels-key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:var(--tk-fs-sm,12px);color:var(--tk-ink-3,#6c7078)}
.takt-bar-labels-key .hov::before{content:'↖ '}.takt-bar-labels-key .clk::before{content:'◉ '}
.takt-bar-labels-list .tki-h svg{width:18px;height:12px;margin-right:8px;vertical-align:-1px}
.takt-bar-labels-list [data-lights]{border-radius:var(--tk-r,3px)}
.takt-bar-labels-list [data-lights]:is(:hover,:focus-within){background:var(--tk-hover,#f3f4f6)}
.takt-bar-labels-list .tki-label{flex:1 1 auto;min-width:0}
.takt-bar-labels-list .tki-ctl{flex:none}
.takt-bar-labels-list .tki-row:not([data-lights^="words"]):not([data-lights^="mark"]) .tki-ctl{flex:0 1 auto}
.takt-bar-labels-list .tki-ctl{min-width:0;max-width:62%;display:flex;justify-content:flex-end}
.takt-bar-labels-list .tki-ctl select{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.takt-bar-labels-what{display:flex;align-items:center;gap:var(--tk-dens-gap,8px);min-width:0}
.takt-bar-labels-what>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.takt-bar-labels-pic{flex:none;width:58px;height:18px}
.takt-bar-labels-word{flex:0 1 auto;max-width:60%;overflow:hidden;text-overflow:ellipsis;padding:0 6px;border-radius:var(--tk-r,3px);background:var(--tk-surface-2,#eef0fb);font-size:var(--tk-fs-sm,12px);color:var(--tk-ink-3,#6c7078);white-space:nowrap}
.takt-bar-labels svg .m-bar{fill:var(--tk-gantt-bar,#668fe1)}.takt-bar-labels svg .m-sum{fill:var(--tk-gantt-sum,#5b53c9)}.takt-bar-labels svg .m-dia{fill:var(--tk-milestone,#17181a)}
.takt-bar-labels svg .m-base{fill:var(--tk-baseline-ghost,#b5bad9)}.takt-bar-labels svg .m-buf{fill:var(--tk-surface-2,#eef0fb);stroke:var(--tk-line-2,#d0d4ea)}.takt-bar-labels svg .m-buf-used{fill:var(--tk-warn)}
.takt-bar-labels svg :is(.m-late,.m-ink,.m-moved,.m-muted,.m-lag,.m-crit-line){fill:none;stroke-width:1.5}.takt-bar-labels svg .m-late{stroke:var(--takt-late-mark)}.takt-bar-labels svg .m-late-f{fill:var(--takt-late-mark)}
.takt-bar-labels svg .m-ink{stroke:var(--tk-ink-2,#45484e)}.takt-bar-labels svg .m-ink-f{fill:var(--tk-ink-2,#45484e)}.takt-bar-labels svg .m-moved{stroke:var(--tk-moved)}.takt-bar-labels svg .m-moved-f{fill:var(--tk-moved)}.takt-bar-labels svg .m-muted{stroke:var(--tk-ink-3,#6c7078)}
.takt-bar-labels svg .m-lag{stroke:var(--tk-lag,#e8820c)}.takt-bar-labels svg .m-dash{stroke-dasharray:3 2}.takt-bar-labels svg .m-crit{stroke:var(--tk-critical,#e5484d);stroke-width:1.5}.takt-bar-labels svg .m-crit-line{stroke:var(--tk-critical,#e5484d)}
/* The sample follows every pick (BR-0043): On hover and On click parts show faded, words with ↖ or ◉; a pointed-at setting
   lights its part soft teal. */
.gdp .cond{opacity:.5}
.gdp .gdp-ro.hov::after{content:' ↖'}.gdp .gdp-ro.clk::after{content:' ◉'}
.gdp .is-lit{outline:1.5px solid var(--tk-spark,#14a39a);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--tk-spark,#14a39a) 28%,transparent);opacity:1}
.gantt-display-note{margin:0;font-size:12px;color:#6b7280}
:root[data-holiday-shading=off] :is(.holiday-shade,.gantt-holiday-label,.gdp-holiday){display:none}
.gdp{background:var(--tk-surface,#fff);border-color:var(--tk-line,#e8e9ec);border-radius:3px;color:var(--tk-ink,#17181a)}
.gdp-head,.gdp-table,.gdp-trow,.gdp-crow{border-color:var(--tk-line,#e8e9ec)}
.gdp-table .gdp-head,.gdp-wbs,.gdp-month,.gdp-day{color:var(--tk-ink-3,#6c7078);font-family:var(--tk-font-num,"Obel Mono",monospace)}
.gdp-weekend{background:var(--tk-weekend,#f2f2f4)}
.gdp-today{border-left-color:var(--tk-accent,#4b5bd6)}
.gdp-bar{border-radius:0;height:13px}
.gdp .gdp-bar.summary{height:6px;border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--gdp-sum) 32%,var(--tk-surface,#fff))}
.gdp-bar.summary .gdp-fill{position:absolute;left:0;top:0;bottom:0;background:var(--gdp-sum)}
.gdp-bar.finished{opacity:1;background:var(--tk-bar-done,#c9d3e3)}
/* Sample task bars paint like chart bars (Bar styles, #1188): own colour in --bar-c, the account's task fill, the critical
   ring and the baseline ghost below. The chart's half of the fill rules is in gantt-inspector.css. */
.gdp-bar.task:not(.finished){--bar-c:var(--gdp-bar);background:var(--bar-paint,var(--bar-c))}
.gdp-bar.task.critical{box-shadow:0 0 0 2px var(--tk-critical)}
:root[data-bar-fill=light] .gdp-bar.task:not(.finished){--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] .gdp-bar.task:not(.finished){--bar-paint:var(--tk-surface);outline:1px solid var(--bar-c);outline-offset:-1px}
.gdp-ghost{position:absolute;top:calc(50% + 8px);height:4px;border-radius:2px;background:var(--tk-baseline-ghost)}
.gdp-label{color:var(--tk-ink,#17181a)}
.gdp-label.summary{font-family:var(--tk-font-display,"Chakra Petch",sans-serif);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tk-accent-ink,#3f4fc4)}
.gdp-label .gantt-label-meta{font-family:var(--tk-font-num,"Obel Mono",monospace);text-transform:none;letter-spacing:.02em;color:var(--tk-ink-3,#6c7078)}
.gdp-ro{position:absolute;top:50%;transform:translateY(-50%);padding:0 3px 0 7px;background:var(--tk-surface,#fff);font:600 9.5px/14px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;z-index:2}
.gdp-ro::before{content:'';position:absolute;left:0;top:2px;height:10px;border-left:2px solid currentColor}
.gdp-ro.lag{color:var(--tk-lag-ink,#b85f00)}
.gdp-ro.late{color:var(--tk-late,#d1343a)}
.gdp-ro.crit{color:var(--tk-critical,#e5484d)}
.gdp-ro.slip{color:var(--takt-slip,#3f6496);top:calc(50% - 2px)}
.gdp-lag{top:calc(50% + 5px);height:0;transform:none;border-radius:0;background:none;border-top:1.5px solid var(--tk-lag,#e8820c)}
.gdp-lag::before,.gdp-lag::after{content:'';position:absolute;top:-4px;height:7px;border-left:1.5px solid var(--tk-lag,#e8820c)}
.gdp-lag::before{left:0}
.gdp-lag::after{right:0}
.gdp-tail{border-top-color:var(--tk-ink-4,#a3a7c8)}
.gdp-tail-text{top:calc(50% + 2px);padding:0 4px;border:0;font:600 9px/12px var(--tk-font-num,"Obel Mono",monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--tk-ink-3,#6c7078);background:var(--tk-surface,#fff)}
.gdp-flag svg{stroke:var(--tk-commit,#17181a);stroke-linejoin:miter;stroke-linecap:butt}
.gdp-flag .f{fill:var(--tk-commit,#17181a)}
.gdp-flag.moved svg{stroke:var(--tk-commit,#17181a)}
.gdp-flag.moved .f{fill:var(--tk-commit,#17181a)}
.gdp-band{top:calc(50% + 7px);background:repeating-linear-gradient(90deg,var(--takt-slip,#3f6496) 0 4px,transparent 4px 6px)}
.gdp-diamond{background:var(--tk-milestone,#17181a);box-shadow:none}
.gdp-diamond.critical{box-shadow:0 0 0 1.5px var(--tk-surface,#fff),0 0 0 3px var(--tk-critical,#e5484d)}
.gdp-links path{stroke:var(--tk-dep,#9aa0a8);stroke-width:1.25;stroke-linejoin:miter;stroke-linecap:butt}
.gantt-display-badge:is([style*="--tk-gc-gold"],[style*="--tk-gc-mustard"]){color:#16183a}
.gdp.readouts-auto :is(.gdp-ro.lag,.gdp-ro.crit,.gdp-ro.late,.gdp-tail-text){display:none}
.gdp-label{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}
.gdp-label.summary{font-size:12.5px;font-weight:600;color:var(--tk-ink,#17181a)}
.gdp-label .gantt-label-meta{font-family:"Saira",sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--tk-ink-3)}
.gdp-ro,.gdp-tail-text{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}
.gdp-ro::before{content:none}
.gdp-tail-text{display:none!important}
.gdp-ro.promise{color:var(--tk-late,#b45a4a)}
/* The Bars window's sample covers every kind of bar, mark and word (Justin 2026-11-07), drawn like the chart's own. */
.gdp-ro.tail,.gdp-ro.progress{color:var(--tk-ink-3,#6c7078)}
.gdp-ro.blocked{color:var(--tk-blocked,#c2410c)}
.gdp-ro.buffer{color:var(--tk-warn,#b7791f)}
.gdp-bar.task.blocked{box-shadow:0 0 0 1.5px var(--tk-blocked,#c2410c)}
.gdp-wait{position:absolute;top:50%;height:13px;transform:translateY(-50%);box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background:color-mix(in srgb,var(--gdp-bar) 14%,var(--tk-surface,#fff));border:1px dashed color-mix(in srgb,var(--gdp-bar) 75%,transparent)}
.gdp-wait span{padding-left:6px;font:500 10.5px/12px "Saira",sans-serif;color:var(--tk-ink-3,#6c7078);white-space:nowrap}
.gdp-buffer{position:absolute;top:50%;height:13px;transform:translateY(-50%);box-sizing:border-box;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)}
.gdp-buffer-used{position:absolute;left:0;top:0;bottom:0;background:var(--tk-warn,#b7791f);opacity:.85}
.gdp-late{position:absolute;top:calc(50% + 7px);height:0;border-top:1.5px dashed var(--tk-late,#d1343a)}
.gdp-forecast{position:absolute;top:50%;width:8px;height:8px;box-sizing:border-box;border:1.5px solid var(--tk-late,#d1343a);background:var(--tk-surface,#fff);transform:translate(-50%,-50%) rotate(45deg)}
.gdp-off{position:absolute;bottom:2px;height:2px;background:radial-gradient(circle,var(--tk-surface,#fff) .8px,transparent 1.1px) 1px 50%/5px 2px repeat-x}
/* BR-0036 Gridlines off (web/gantt-gridlines.ts): the clean look. Lines turn transparent rather than going away, so nothing moves;
   holiday bands lose their edges and stay as a soft wash; the today line and the header's words stay. */
:root[data-gridlines=off] .gantt-grid-line{display:none}
:root[data-gridlines=off] .chart-row .track{border-bottom-color:transparent;background-image:none}
:root[data-gridlines=off] .chart>.calendar-layer::after{display:none}
:root[data-gridlines=off] .takt-gantt-workspace .table-cells>span{border-bottom-color:transparent}
:root[data-gridlines=off] .takt-gantt-workspace .timeline-head :is(.gantt-date-bucket,.gantt-date-boundary,.gantt-date-major,.gantt-week-label,.month-row>span){border-left-color:transparent}
:root[data-gridlines=off] .holiday-shade{box-shadow:none}
:root[data-gridlines=off] :is(.gdp-trow,.gdp-crow){border-color:transparent}