/* Takt Precision 2.0 (Justin, 2026-10-24). Spec: Claude Doc "Takt Precision 2.0: spec and build plan"; mockups on the
 * "Takt UI 2.0 directions" canvas. Loaded last on every screen, after unified-shell.css and gantt-inspector.css, so these
 * rules restyle the existing selectors without moving anything: same layouts, same buttons, same meanings.
 * Colours come from tokens only (web/precision/tokens.css), so Dark mode needs no extra rules here.
 * Exports and Storyboard slides stay as they are (lib/gantt-export.ts draws the bar outline itself). */

/* ---------- Numbers: Obel Mono for dates, durations, WBS and counts ---------- */
.takt-gantt-workspace .chart-row .cell,.takt-gantt-workspace .chart-row .gantt-wbs,.takt-gantt-workspace .chart-row .row-num,
.takt-gantt-workspace .days-row .day,.takt-lag-label,.gantt-ms-date,
.actions-tile>strong,.actions-tile .count,.due-label,.takt-tp-week small{font-family:var(--tk-font-num);font-variant-numeric:normal;letter-spacing:-.01em}
.takt-gantt-workspace .chart-row .cell,.takt-gantt-workspace .chart-row .gantt-wbs{font-size:11.5px}
.takt-gantt-workspace .days-row .day{font-size:10px}

/* ---------- Labels: capitals, a little bolder, wider tracking ---------- */
.takt-gantt-workspace .chart-head .table-cells>span{font-size:10px;font-weight:600;letter-spacing:var(--tk-tracking-caps);color:var(--tk-ink-3)}

/* ---------- Command bars: selected = soft fill + faint deeper-blue outline; room around the label ---------- */
/* The sandbox's Actions tools are .tk-tool capsule pills (Batch 1, 2026-11-06, html[data-actions-next]): the kit draws them there. */
html:not([data-actions-next]) .actions-tool{border-radius:var(--tk-r)!important}
html:not([data-actions-next]) .actions-tool[aria-pressed=true]{background:var(--tk-accent-soft)!important;color:var(--tk-accent-ink);box-shadow:inset 0 0 0 1px var(--tk-on-line)}
@media(min-width:1520px){html:not([data-actions-next]) .actions-tool{padding-left:8px!important;padding-right:8px!important}}
/* Icons: one stroke weight, round ends and round joins (lib/icons.ts ICON_STROKE, command bar refresh 2026-11-06). */
.takt-global-sidebar svg,.tk-views svg,svg.tk-icon{stroke-width:var(--tk-icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---------- Gantt bars: flight deck (Justin, 2026-11-01, UI standard §20.2): square, no outline (--tk-bar-outline is 0) ---------- */
html .takt-gantt-workspace .bar:not(.summary):not(.milestone):not(.commitment){--bar-fill:var(--tk-gantt-bar);background:var(--bar-fill);border-radius:0;border:0;
 box-shadow:inset 0 0 0 var(--tk-bar-outline) color-mix(in srgb,var(--bar-fill) var(--tk-edge-pct),var(--tk-edge-to))}
html .takt-gantt-workspace .bar.takt-gc:not(.summary){--bar-fill:var(--gc);box-shadow:inset 0 0 0 var(--tk-bar-outline) color-mix(in srgb,var(--bar-fill) var(--tk-edge-pct),var(--tk-edge-to))}
.takt-gantt-workspace .bar.takt-st-done:not(.summary,.milestone){box-shadow:inset 0 0 0 var(--tk-bar-outline) color-mix(in srgb,var(--tk-bar-done) var(--tk-edge-pct-done),var(--tk-edge-to))!important}
/* Critical: a 3 px red base line along the bar (flight deck, 2026-11-01); a blocked bar keeps its blocked ring too. */
.takt-gantt-workspace.gantt-critical-on .bar.critical.takt-st-blocked:not(.summary):not(.milestone){box-shadow:0 0 0 1.5px var(--tk-blocked)!important}

/* Summary: a thin solid square band (6 px), tinted track with the progress in full colour (flight deck, 2026-11-01). */
html .takt-gantt-workspace .bar.summary{--sum:var(--tk-gantt-sum);top:12px;height:6px;border:0;border-radius:0;background:color-mix(in srgb,var(--sum) 32%,var(--tk-surface))!important;
 box-shadow:inset 0 0 0 var(--tk-bar-outline) color-mix(in srgb,var(--sum) var(--tk-edge-pct),var(--tk-edge-to))!important}
html .takt-gantt-workspace .bar.summary.takt-gc{--sum:var(--gc);background:color-mix(in srgb,var(--sum) 32%,var(--tk-surface))!important;box-shadow:inset 0 0 0 var(--tk-bar-outline) color-mix(in srgb,var(--sum) var(--tk-edge-pct),var(--tk-edge-to))!important}
html .takt-gantt-workspace .bar.summary .takt-summary-fill{border-radius:0;background:var(--sum)!important}
html .takt-gantt-workspace.gantt-summary-bracket .bar.summary{top:9px;height:13px;background:none!important;box-shadow:inset 0 5px var(--sum)!important}
html .takt-gantt-workspace.gantt-summary-bracket .bar.summary.takt-gc{background:none!important;box-shadow:inset 0 5px var(--gc)!important}

/* Milestone: a sharp diamond; its date (Display > milestone label) in the number font. */
html .takt-gantt-workspace .bar.milestone{border:0!important;border-radius:0;box-shadow:none!important}
.gantt-ms-date{font-size:10.5px;color:var(--tk-ink-3)}

/* Links: thin lines with soft elbows and an open arrowhead (the end mark is drawn in web/gantt-interactions.ts). */
.takt-gantt-workspace .links>.dependency-dot{fill:none!important;stroke:var(--tk-dep);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.takt-gantt-workspace .links>.dependency-dot.in-chain{stroke:var(--tk-dep-active);stroke-width:2}
.takt-gantt-workspace .links>.dependency-dot.broken{stroke:var(--tk-blocked)}

/* Today: a solid 1 px line with a small tab showing the day, flying from the line so it is never cut off at the chart edge. */
.takt-gantt-workspace .today-line{border-left:var(--tk-today-w,1px) solid var(--tk-today);margin-left:calc(.5px - var(--tk-today-w,1px) / 2)}
/* The tab sits in the sticky header (.gantt-today-flag), never on the line in the rows, so scrolling can't hide it (Justin, 2026-11-02). */
.takt-gantt-workspace .timeline-head .gantt-today-flag{position:absolute;top:19.5px;z-index:2;transform:translateX(-50%);min-width:18px;padding:0 3px;box-sizing:border-box;height:14px;border-radius:2px;background:var(--tk-today);color:var(--tk-on-primary);
 font:600 9.5px/14px var(--tk-font-num);text-align:center;pointer-events:none}
.gantt-hide-today .gantt-today-flag{display:none!important}

/* Lead / lag band (option A): crisper edge, the gap in the number font. */
.takt-lag{border-radius:3px}
.takt-lag-label{font-weight:600}

/* ---------- Zoom slider (Justin, 2026-10-24): round thumb, notches where the scale changes, 20% wider, minus and plus ---------- */
.gantt-usability-toolbar .gantt-zoom{min-width:0;margin:0 4px}
.gantt-zoom-row{display:flex;align-items:center;gap:5px}
/* − and + are the shared add/remove icons at menu size (Justin 2026-11-06: "bigger plus and minus on the sides"). */
.gantt-usability-toolbar .gantt-zoom-step{display:inline-flex;align-items:center;justify-content:center;width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;padding:0!important;border:1px solid var(--tk-line-2)!important;border-radius:2px!important;background:var(--tk-surface)!important;color:var(--tk-ink-2);cursor:pointer;flex:none;box-sizing:border-box}
.gantt-usability-toolbar .gantt-zoom-step:hover{border-color:var(--tk-line-3)!important;color:var(--tk-ink)}
.gantt-usability-toolbar .gantt-zoom-step:active{background:var(--tk-accent-soft)!important;border-color:var(--tk-on-line)!important;color:var(--tk-accent-ink)}
.gantt-zoom-step:focus-visible{outline:2px solid var(--tk-accent);outline-offset:1px}
.gantt-usability-toolbar .gantt-zoom-step svg{display:block;width:16px;height:16px}
/* The notches sit at the real scale changes: Quarters | Months | Weeks | Days (web/gantt-interactions.ts, zoomFrom). */
.gantt-usability-toolbar .gantt-zoom input{-webkit-appearance:none;appearance:none;width:250px;height:18px;min-height:18px;margin:0;padding:0;border:0!important;border-radius:0;box-shadow:none;background:
 linear-gradient(var(--tk-ink-4),var(--tk-ink-4)) calc(26.2% + 1px) 5px/1px 8px no-repeat,
 linear-gradient(var(--tk-ink-4),var(--tk-ink-4)) 53.1% 5px/1px 8px no-repeat,
 linear-gradient(var(--tk-ink-4),var(--tk-ink-4)) calc(73.8% - 1px) 5px/1px 8px no-repeat,
 linear-gradient(90deg,var(--tk-accent) var(--zoom-at,50%),var(--tk-line-2) var(--zoom-at,50%)) 0 8px/100% 2px no-repeat!important;cursor:pointer}
.gantt-usability-toolbar .gantt-zoom input::-webkit-slider-runnable-track{height:18px;background:none}
/* Zoom knob (Justin, 2026-11-02): solid accent, thin white ring, a yellow centre. */
.gantt-usability-toolbar .gantt-zoom input::-webkit-slider-thumb{-webkit-appearance:none;margin-top:.5px;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:radial-gradient(circle,var(--tk-knob-dot,#ffc93c) 0 3px,var(--tk-accent) 3.6px);box-shadow:0 0 0 1px var(--tk-accent),0 1px 3px #0000002e;box-sizing:border-box}
.gantt-usability-toolbar .gantt-zoom input::-moz-range-track{height:18px;background:none}
.gantt-usability-toolbar .gantt-zoom input::-moz-range-thumb{width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:radial-gradient(circle,var(--tk-knob-dot,#ffc93c) 0 3px,var(--tk-accent) 3.6px);box-shadow:0 0 0 1px var(--tk-accent),0 1px 3px #0000002e;box-sizing:border-box}
.gantt-usability-toolbar .gantt-zoom input:hover::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--tk-accent),0 0 0 5px var(--tk-accent-soft)}
.gantt-usability-toolbar .gantt-zoom input:hover::-moz-range-thumb{box-shadow:0 0 0 1px var(--tk-accent),0 0 0 5px var(--tk-accent-soft)}
/* The knob swells a little when pressed and springs back on release (Justin 2026-11-06: "kind of swell up when it's
   clicked, a little organically"). Motion kit tokens, so reduced motion turns it off. */
.gantt-usability-toolbar .gantt-zoom input::-webkit-slider-thumb{transition:transform var(--tk-dur-shift) var(--tk-ease-spring),box-shadow var(--tk-dur) var(--tk-ease)}
.gantt-usability-toolbar .gantt-zoom input::-moz-range-thumb{transition:transform var(--tk-dur-shift) var(--tk-ease-spring),box-shadow var(--tk-dur) var(--tk-ease)}
.gantt-usability-toolbar .gantt-zoom input:active::-webkit-slider-thumb{transform:scale(1.32)}
.gantt-usability-toolbar .gantt-zoom input:active::-moz-range-thumb{transform:scale(1.32)}
.gantt-usability-toolbar .gantt-zoom input:focus-visible{outline:none}
.gantt-usability-toolbar .gantt-zoom input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--tk-accent);outline-offset:2px}
.gantt-usability-toolbar .gantt-zoom input:focus-visible::-moz-range-thumb{outline:2px solid var(--tk-accent);outline-offset:2px}
.gantt-usability-toolbar .gantt-zoom>span:last-child{font:600 10px/12px var(--tk-font-num);letter-spacing:var(--tk-tracking-caps);text-transform:uppercase;color:var(--tk-ink-3)}
@media(max-width:1519px){.gantt-usability-toolbar .gantt-zoom input,body.takt-unified:has(.tk-views) .gantt-usability-toolbar .gantt-zoom input,body:not(.takt-unified) .gantt-usability-toolbar .gantt-zoom input{width:150px;min-width:150px}
 .gantt-usability-toolbar .gantt-zoom,body.takt-unified:has(.tk-views) .gantt-usability-toolbar .gantt-zoom,body:not(.takt-unified) .gantt-usability-toolbar .gantt-zoom{width:auto;min-width:0}}

/* Animated Gentleface icons keep their own 1px round line on the 16 grid (MOTION_ICONS in lib/icons.ts). */
:root svg.tk-icon.tk-icon-motion{stroke-width:calc(var(--tk-icon-stroke) * 2 / 3);stroke-linecap:round;stroke-linejoin:round;fill:none}

/* #1116 / UI §20.2: the date row and the list's 21px column headings share both edges. */
.takt-gantt-workspace{--gantt-head-h:40px;--tk-month-row-h:18px}
.takt-gantt-workspace .chart-head{height:var(--gantt-head-h)}
.takt-gantt-workspace .days-row{height:calc(var(--gantt-head-h) - var(--tk-month-row-h) - 1px)}
.takt-gantt-workspace .month-row{height:var(--tk-month-row-h);line-height:12px}
.takt-gantt-workspace .month-row span{padding-top:0;padding-bottom:0}
/* BR-0011: rows start under the header and, when shown, the Timeline strip (--gantt-rows-top, set in web/timeline.ts). Using the
   header height alone drew every link line a strip's height above its bars. */
.takt-gantt-workspace .chart>.calendar-layer,.takt-gantt-workspace .chart>.links{top:var(--gantt-rows-top,var(--gantt-head-h))!important}
/* Row states end at the list (grid review 01, Justin 2026-11-05): the selected row is tinted with the 3px accent bar in the
 * list only; on the chart the bar's own selected outline marks it, and the day lines and weekend and holiday shading stay
 * whole. Hover is a light well in the list wherever the pointer is on the row, in both themes. :root lifts these over
 * the dark theme's surface fill for .table-cells (dark.css). */
:root .takt-gantt-workspace .chart-row .track{background-color:transparent}
:root .takt-gantt-workspace .chart-row.selected .table-cells{background-color:var(--tk-row-selected);background-image:none}
@media (hover:hover){:root .takt-gantt-workspace .chart-row:hover:not(.selected) .table-cells{background-color:var(--tk-row-hover);background-image:none}}
/* Holidays shade from Weeks in; at Months and Quarters they are a sliver that reads as a marker. The header keeps the name. */
:root [data-takt-zoom=month] .holiday-shade{display:none}
/* The divider grip shows when the pointer is on the divider; touch keeps the big grip (Justin, 2026-10-22, iPad). */
@media (hover:hover) and (pointer:fine){.gantt-grid-divider::after{opacity:0}.gantt-grid-divider:is(:hover,:focus-visible)::after,.gantt-divider-dragging .gantt-grid-divider::after{opacity:1}}
/* Header lines (#937, Justin 2026-11-04: "vertical lines just stop, and appear doubled up"). Every date bucket runs the
 * full height of the date row, labelled or not: an unlabelled bucket (Sparse date labels) was only as tall as its padding,
 * so its line was a 7 px stub under the top row. Labels sit centred in the row. A week number in the top
 * row draws no line of its own: it sits over its Monday's line, and its own line beside the month's read as a double. */
.takt-gantt-workspace .days-row .gantt-date-bucket{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
/* Today's number is carried by the flag on top of it. */
.takt-gantt-workspace .timeline-head .gantt-today-flag.gantt-today-tick{top:auto;bottom:0;min-width:0;width:2px;height:5px;padding:0;border-radius:0;transform:translateX(-.5px);font-size:0;color:transparent}
.takt-gantt-workspace .days-row .gantt-today-day{color:transparent!important}
.takt-gantt-workspace .timeline-head .gantt-today-flag{top:calc(var(--tk-month-row-h) + (var(--gantt-head-h) - var(--tk-month-row-h) - 1px - 14px)/2)}
.takt-gantt-workspace .month-row .gantt-week-label{border-left:0}