/* Takt Precision v2 — reusable presentation components. Depends only on tokens.css.
 * Every class is prefixed tk- so it can be adopted inside existing app markup without collisions.
 * States: :hover / .is-hover, [aria-pressed=true] / [aria-selected=true] / .is-selected, :disabled / [aria-disabled=true],
 * :focus-visible / .is-focus, .is-error. The .is-* forms exist for the gallery and visual tests. */
*{box-sizing:border-box}
.tk-root{margin:0;background:var(--tk-bg);color:var(--tk-ink);font:var(--tk-fw-regular) var(--tk-fs)/var(--tk-lh) var(--tk-font);font-feature-settings:var(--tk-font-features);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tk-root button,.tk-root input,.tk-root select,.tk-root textarea{font:inherit;color:inherit;letter-spacing:inherit}
/* BR-0038: inherit above outranks .tk-input, so on touch a text field here takes the 16 px field size again. Below 16 px iPad
   Safari zooms the whole page in when the field is focused, and it stays zoomed. */
@media (pointer:coarse){.tk-root :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=button],[type=submit],[type=file],[type=hidden]),textarea){font-size:var(--tk-fs-field)}}
.tk-root button{cursor:pointer}
.tk-num{font-variant-numeric:tabular-nums}
.tk-i{width:var(--tk-icon);height:var(--tk-icon);flex:none;stroke:currentColor;fill:none;stroke-width:var(--tk-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.tk-root :focus-visible,.is-focus{outline:2px solid var(--tk-accent);outline-offset:1px}
/* BR-0111 (Justin 2026-11-07, Mac): margin -1px keeps the 1px box inside its parent. Without it the status line's reader-only
   line at the end of the page made Home scroll by 1px, so a Mac set to always show scroll bars showed one; opening any window
   moved that line into the window, the scroll bar vanished and the whole page slid 15px sideways. */
.tk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tk-label{font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-medium);letter-spacing:var(--tk-tracking-label);color:var(--tk-ink-3)}
.tk-muted{color:var(--tk-ink-3)}
.tk-kbd{display:inline-block;min-width:16px;padding:1px 4px;border:1px solid var(--tk-line-2);border-radius:var(--tk-r-xs);background:var(--tk-surface);font-size:10px;line-height:14px;color:var(--tk-ink-3);text-align:center;font-feature-settings:normal}

/* ================= Buttons ================= */
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--tk-ctl-h);padding:0 10px;font-family:inherit;text-decoration:none;border:1px solid var(--tk-line-2);border-radius:var(--tk-r);background:var(--tk-surface);color:var(--tk-ink);font-size:12.5px;font-weight:var(--tk-fw-medium);white-space:nowrap;box-shadow:0 1px 0 #0000000a;transition:background var(--tk-dur-fast) var(--tk-ease),border-color var(--tk-dur-fast) var(--tk-ease)}
.tk-btn[aria-busy=true]{opacity:var(--tk-control-busy-opacity);cursor:progress}
.tk-btn.is-primary{background:var(--tk-primary);border-color:var(--tk-primary);color:var(--tk-on-primary)}
.tk-btn.is-ghost{background:transparent;border-color:transparent;box-shadow:none}
.tk-btn.is-danger{color:var(--tk-late)}.tk-btn.is-danger.is-primary{background:var(--tk-late);border-color:var(--tk-late);color:#fff}
.tk-btn.is-icon{width:var(--tk-ctl-h);padding:0}
.tk-btn.is-sm{height:var(--tk-ctl-h-sm);padding:0 8px;font-size:var(--tk-fs-sm)}
.tk-btn .tk-kbd{margin-left:2px}
.tk-btn-group{display:inline-flex}
.tk-btn-group>.tk-btn{border-radius:0;margin-left:-1px}.tk-btn-group>.tk-btn:first-child{border-radius:var(--tk-r) 0 0 var(--tk-r);margin-left:0}.tk-btn-group>.tk-btn:last-child{border-radius:0 var(--tk-r) var(--tk-r) 0}
.tk-btn-group>.tk-btn:hover{position:relative;z-index:1}
.tk-seg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--tk-r);background:var(--tk-surface-2);border:1px solid var(--tk-line)}
.tk-seg>button,.tk-seg>label>span{height:calc(var(--tk-ctl-h) - 6px);min-width:28px;padding:0 9px;border:1px solid transparent;border-radius:var(--tk-r-sm);background:transparent;color:var(--tk-ink-2);font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-medium)}
/* A radio group as a segment (#1013): the radio stays for keyboard and forms, the span is the drawn segment. */
.tk-seg>label{position:relative;display:flex;margin:0}.tk-seg>label>input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.tk-seg>label>span{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tk-seg>label>input:checked+span{background-color:var(--tk-control-on-bg);border-color:var(--tk-control-on-line);box-shadow:var(--tk-control-on-shadow);color:var(--tk-control-on-ink)}
.tk-seg>label>input:focus-visible+span{outline:var(--tk-control-focus);outline-offset:1px}.tk-seg>label>input:disabled+span{opacity:var(--tk-control-disabled-opacity)}

/* ================= Inputs ================= */
.tk-input,.tk-select,.tk-textarea{width:100%;height:var(--tk-ctl-h);padding:0 9px;border:1px solid var(--tk-line-2);border-radius:var(--tk-r);background:var(--tk-surface);color:var(--tk-ink);font-size:var(--tk-fs-field)}
.tk-select{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--tk-ink-3) 50%),linear-gradient(-45deg,transparent 50%,var(--tk-ink-3) 50%);background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%;background-size:4px 4px;background-repeat:no-repeat}
/* Small and inline selects (kit audit 11-09): a toolbar's style picker sits at the small control height and its own width. */
.tk-select.is-sm{height:var(--tk-ctl-h-sm);font-size:var(--tk-fs-sm)}
.tk-select.is-inline{width:auto;flex:none}
.tk-textarea{height:auto;min-height:72px;padding:7px 9px;line-height:1.45;resize:vertical}
.tk-field{display:grid;gap:5px}.tk-field>label{font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-semibold);color:var(--tk-ink-2)}
.tk-hint{font-size:var(--tk-fs-xs);color:var(--tk-ink-3)}.tk-error{font-size:var(--tk-fs-xs);color:var(--tk-late)}
.tk-inputgroup{display:flex;align-items:center;border:1px solid var(--tk-line-2);border-radius:var(--tk-r);background:var(--tk-surface);height:var(--tk-ctl-h);padding:0 8px;gap:6px;color:var(--tk-ink-3)}
/* BR-0150: a focused input group shows one ring: its own edge turns accent and the ring sits on it, never a second box outside. */
.tk-inputgroup:has(:focus-visible),.tki-num:has(:focus-visible){border-color:var(--tk-accent);outline:1px solid var(--tk-accent);outline-offset:0}
.tk-inputgroup input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--tk-ink);height:100%;font:inherit;font-size:var(--tk-fs-field)}
.tk-check{appearance:none;-webkit-appearance:none;margin:0;width:var(--tk-check);height:var(--tk-check);border:1px solid var(--tk-line-3);border-radius:var(--tk-r-sm);display:inline-grid;place-items:center;background:var(--tk-surface);flex:none;padding:0;cursor:pointer}
.tk-toggle{width:30px;height:18px;border-radius:9px;border:0;padding:0;background:var(--tk-line-2);position:relative;flex:none;transition:background var(--tk-dur-fast)}
.tk-toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left var(--tk-dur-fast) var(--tk-ease)}
.tk-chip{display:inline-flex;align-items:center;gap:5px;height:var(--tk-ctl-h-sm);padding:0 9px;border:1px solid var(--tk-line-2);border-radius:var(--tk-r-pill);background:var(--tk-surface);color:var(--tk-ink-2);font-size:var(--tk-fs-sm);white-space:nowrap}

.tk-pill{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--tk-r-sm);font-size:var(--tk-fs-xs);font-weight:var(--tk-fw-medium);white-space:nowrap}
.tk-pill.is-late{background:var(--tk-late-soft);color:var(--tk-late)}.tk-pill.is-ok{background:var(--tk-ok-soft);color:var(--tk-ok)}.tk-pill.is-warn{background:var(--tk-warn-soft);color:var(--tk-warn-ink)}.tk-pill.is-neutral{background:var(--tk-surface-2);color:var(--tk-ink-2)}.tk-pill.is-info{background:var(--tk-info-soft);color:var(--tk-accent-ink)}
.tk-pill.is-gated{background:transparent;border:1px dashed var(--tk-line-3);color:var(--tk-ink-3)}
.tk-concept{font-size:9px;font-weight:var(--tk-fw-semibold);letter-spacing:.08em;text-transform:uppercase;border:1px dashed currentColor;border-radius:3px;padding:2px 4px;color:var(--tk-ink-3)}
.tk-led{width:7px;height:7px;border-radius:50%;background:var(--tk-ok);flex:none;display:inline-block}
.tk-led.is-warn{background:var(--tk-warn)}.tk-led.is-late{background:var(--tk-late)}.tk-led.is-off{background:var(--tk-ink-4)}.tk-led.is-busy{background:var(--tk-accent);animation:tk-pulse 1.2s infinite}
@keyframes tk-pulse{50%{opacity:.35}}
.tk-dot{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}

/* ================= Menus, popovers, tooltips ================= */
.tk-popover{position:absolute;z-index:var(--tk-z-popover);min-width:220px;background:var(--tk-surface);border:1px solid var(--tk-line-2);border-radius:var(--tk-r-lg);box-shadow:var(--tk-shadow-pop);padding:4px}
.tk-menu{display:grid;gap:1px}
.tk-menu-label{padding:8px 10px 4px;font-family:var(--tk-font);font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-medium);color:var(--tk-ink-3);letter-spacing:var(--tk-tracking-label)}
.tk-menu-sep{height:1px;background:var(--tk-line);margin:4px 2px}
.tk-menu-item{display:flex;align-items:center;gap:9px;min-height:30px;padding:4px 10px;border:1px solid transparent;border-radius:var(--tk-r-sm);background:none;text-align:left;width:100%;color:var(--tk-ink);font-size:var(--tk-fs)}
.tk-menu-item .tk-menu-meta{margin-left:auto;color:var(--tk-ink-3);font-size:var(--tk-fs-xs);white-space:nowrap}
.tk-popover.tk-menu{padding:6px;border-radius:var(--tk-r)}.tk-popover.tk-menu .tk-menu-item{min-height:34px;padding:7px 9px;border-radius:var(--tk-r);justify-content:flex-start;text-align:left}/* Drop-down menus match the Gantt's More (2026-10-26). */
.tk-menu-item[aria-checked=true] .tk-menu-tick::before{content:"✓";color:var(--tk-accent);font-weight:700}
.tk-menu-tick{width:12px;flex:none;text-align:center}
.tk-menu-item:disabled,.tk-menu-item[aria-disabled=true]{color:var(--tk-ink-4);cursor:not-allowed;background:none}
.tk-menu-item .tk-menu-why{display:block;font-size:var(--tk-fs-xs);color:var(--tk-ink-3);margin-top:1px}
.tk-menu-item>span{min-width:0}
.tk-tip{position:absolute;z-index:var(--tk-z-tip);max-width:260px;padding:6px 8px;border-radius:var(--tk-r-sm);background:var(--tk-ink);color:#fff;font-size:var(--tk-fs-xs);line-height:1.35;pointer-events:none;box-shadow:var(--tk-shadow-pop)}
.tk-tip .tk-kbd{background:#ffffff1a;border-color:#ffffff33;color:#fff}

/* ================= Shell ================= */
.tk-app{display:grid;grid-template-columns:var(--tk-sidebar-w) minmax(0,1fr);grid-template-rows:var(--tk-topbar-h) minmax(0,1fr);height:100vh;height:100dvh}
.tk-app[data-nav=rail]{grid-template-columns:var(--tk-rail-w) minmax(0,1fr)}
.tk-sidebar{grid-row:1/3;display:flex;flex-direction:column;min-height:0;background:var(--tk-chrome);border-right:1px solid var(--tk-line);overflow:hidden}
.tk-brand{height:var(--tk-topbar-h);display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--tk-line);flex:none}
.tk-logo{font-weight:700;font-size:19px;letter-spacing:-.05em}.tk-logo b{color:var(--tk-accent);font-weight:inherit}
.tk-nav{display:grid;gap:1px;padding:8px}
.tk-nav-item{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;border-radius:var(--tk-r);color:var(--tk-ink-2);text-decoration:none;white-space:nowrap;border:0;background:none;width:100%;font-size:var(--tk-fs)}
.tk-nav-item:hover{background:var(--tk-hover);color:var(--tk-ink)}
.tk-nav-item[aria-current=page]{background:var(--tk-surface-3);color:var(--tk-ink);font-weight:var(--tk-fw-semibold)}
.tk-nav-item .tk-nav-count{margin-left:auto;font-size:var(--tk-fs-xs);color:var(--tk-ink-3)}
.tk-nav-item .tk-nav-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Project names wrap to two lines so long engineering names stay readable. */
.tk-nav-item.is-project{height:auto;min-height:30px;padding-top:5px;padding-bottom:5px;align-items:flex-start;line-height:1.35}.tk-nav-item.is-project .tk-dot{margin-top:5px}.tk-nav-item.is-project .tk-nav-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tk-nav-item.is-project .tk-nav-count{padding-top:1px}
.tk-app[data-nav=rail] .tk-nav-item.is-project{align-items:center;height:30px;padding:0}.tk-app[data-nav=rail] .tk-nav-item.is-project .tk-dot{margin-top:0}
.tk-nav-label{margin:14px 18px 4px;font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-medium);color:var(--tk-ink-3);letter-spacing:var(--tk-tracking-label)}
.tk-sidebar-foot{margin-top:auto;border-top:1px solid var(--tk-line);padding:10px 14px;display:grid;gap:8px;font-size:var(--tk-fs-sm);color:var(--tk-ink-2)}
.tk-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tk-ink);color:#fff;font-size:10px;font-weight:600;flex:none}
.tk-app[data-nav=rail] .tk-nav-text,.tk-app[data-nav=rail] .tk-nav-count,.tk-app[data-nav=rail] .tk-nav-label,.tk-app[data-nav=rail] .tk-concept,.tk-app[data-nav=rail] .tk-logo b,.tk-app[data-nav=rail] .tk-foot-text{display:none}
.tk-app[data-nav=rail] .tk-sidebar-foot .tk-sync span:not(.tk-led){display:none}
.tk-app[data-nav=rail] .tk-nav-item{justify-content:center;padding:0}.tk-app[data-nav=rail] .tk-brand{justify-content:center;padding:0}.tk-app[data-nav=rail] .tk-sidebar-foot{justify-items:center;padding:10px 0}
.tk-topbar{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--tk-surface);border-bottom:1px solid var(--tk-line);min-width:0}
.tk-switcher{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:var(--tk-r);background:none;min-width:0;max-width:min(520px,45vw)}
.tk-switcher:hover{background:var(--tk-hover)}
.tk-switcher-name{font-weight:var(--tk-fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-switcher-code{color:var(--tk-ink-3);font-size:var(--tk-fs-xs);white-space:nowrap}
.tk-crumbs{display:flex;gap:6px;align-items:center;color:var(--tk-ink-3);white-space:nowrap}.tk-crumbs b{color:var(--tk-ink);font-weight:var(--tk-fw-semibold)}
.tk-search{margin-left:auto;display:flex;align-items:center;gap:8px;height:30px;width:min(320px,26vw);padding:0 10px;border-radius:var(--tk-r);background:var(--tk-surface-2);color:var(--tk-ink-3);border:0}
.tk-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.tk-sync{display:flex;align-items:center;gap:6px;font-size:var(--tk-fs-xs);color:var(--tk-ink-3);white-space:nowrap}

/* ================= Page header and toolbar ================= */
.tk-pagehead{display:flex;align-items:center;gap:12px;min-height:var(--tk-header-h);padding:6px 14px;background:var(--tk-surface);border-bottom:1px solid var(--tk-line);min-width:0}
.tk-ph-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.tk-ph-title h1{margin:0;font-size:var(--tk-fs-lg);font-weight:var(--tk-fw-semibold);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-ph-meta{display:flex;align-items:center;gap:14px;color:var(--tk-ink-3);font-size:var(--tk-fs-sm);white-space:nowrap}
.tk-ph-meta b{color:var(--tk-ink);font-weight:var(--tk-fw-semibold)}
.tk-toolbar{container:tk-toolbar/inline-size;display:flex;align-items:center;gap:6px;height:var(--tk-toolbar-h);padding:0 12px;background:var(--tk-surface);border-bottom:1px solid var(--tk-line);min-width:0;overflow:hidden}
.tk-tgroup{display:flex;align-items:center;gap:4px;flex:none}
.tk-tsep{width:1px;height:18px;background:var(--tk-line-2);flex:none;margin:0 4px}
.tk-tspacer{flex:1;min-width:8px}
.tk-toverflow{display:none}
/* Priority collapse: labels → icons → groups into overflow menus. Never wraps, never scrolls. */
@container tk-toolbar (max-width:1180px){.tk-toolbar .tk-blabel{display:none}.tk-toolbar .tk-btn.has-label{width:var(--tk-ctl-h);padding:0}}
@container tk-toolbar (max-width:900px){.tk-toolbar [data-collapse="3"]{display:none}.tk-toolbar .tk-toverflow[data-for="3"]{display:inline-flex}}
@container tk-toolbar (max-width:700px){.tk-toolbar [data-collapse="2"]{display:none}.tk-toolbar .tk-toverflow[data-for="3"]{display:none}.tk-toolbar .tk-toverflow[data-for="2"]{display:inline-flex}}

/* ================= Panels, tables, lists ================= */
.tk-panel{background:var(--tk-surface);border:1px solid var(--tk-line);border-radius:var(--tk-r-lg);min-width:0}
.tk-panel-head{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 14px;border-bottom:1px solid var(--tk-line)}
.tk-panel-head h2{margin:0;font-size:var(--tk-fs);font-weight:var(--tk-fw-semibold)}
.tk-panel-head .tk-aside{margin-left:auto;color:var(--tk-ink-3);font-size:var(--tk-fs-xs)}
.tk-table{width:100%;border-collapse:collapse;font-size:var(--tk-fs-grid)}
.tk-table th{position:sticky;top:0;height:30px;padding:0 10px;text-align:left;font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-medium);letter-spacing:var(--tk-tracking-label);color:var(--tk-ink-3);background:var(--tk-surface);border-bottom:1px solid var(--tk-line);white-space:nowrap}
.tk-table td{height:var(--tk-table-row-h);padding:0 10px;border-bottom:1px solid var(--tk-line);white-space:nowrap}
.tk-table tr:last-child td{border-bottom:0}
.tk-table tbody tr:hover td{background:var(--tk-hover);cursor:pointer}
.tk-table td.is-num,.tk-table th.is-num{text-align:right}
.tk-strip{position:relative;height:6px;border-radius:3px;background:var(--tk-surface-2);min-width:140px}.tk-strip i{position:absolute;top:0;bottom:0;border-radius:3px}.tk-strip b{position:absolute;top:-4px;bottom:-4px;width:1.5px;background:var(--tk-today)}
.tk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tk-kpi{padding:12px 14px}.tk-kpi strong{display:block;font-size:var(--tk-fs-3xl);font-weight:var(--tk-fw-semibold);letter-spacing:var(--tk-tracking-tight);line-height:1.15;margin-top:4px}.tk-kpi span{font-size:var(--tk-fs-sm);color:var(--tk-ink-3)}
.tk-listrow{display:flex;align-items:flex-start;gap:10px;min-height:var(--tk-list-row-h);padding:8px 12px;border-bottom:1px solid var(--tk-line);background:var(--tk-surface);cursor:pointer;position:relative}
.tk-listrow:hover,.tk-listrow.is-hover{background:var(--tk-hover)}
.tk-listrow[aria-selected=true],.tk-listrow.is-selected{background:var(--tk-accent-soft);box-shadow:inset 2px 0 0 var(--tk-accent)}
/* Compact list row (#1037, 2026-11-06): one line at the density row, no divider, for pickable lists inside windows (History's
   versions). is-static is a row that cannot be picked (History's Now). */
.tk-listrow.is-compact{align-items:center;gap:var(--tk-dens-gap);width:100%;min-height:var(--tk-dens-row);padding:0 var(--tk-dens-gap);border:0;border-radius:var(--tk-r);background:transparent;color:var(--tk-ink);font:inherit;font-size:13px;text-align:left}
.tk-listrow.is-compact:hover{background:var(--tk-hover)}.tk-listrow.is-compact[aria-selected=true]{background:var(--tk-accent-soft)}
.tk-listrow.is-static{cursor:default}.tk-listrow.is-static:hover{background:transparent}
/* "+ Add" list (UI-STANDARD §9, BR-0023 2026-11-06): the one row style for every list a "+ Add" fills (Blockers, Holidays,
   ERP numbers, Connected PCs). One line at the density row (hover well bleeds out so names line up with the heading), name LEFT, × at the right end, shown on hover/focus (always on
   touch). A name that renames on click is a ghost button, so it is pulled left here; a stretched .tk-btn centres its text. */
.tk-addlist{list-style:none;margin:0 calc(-1 * var(--tk-dens-gap));padding:0;display:flex;flex-direction:column}
.tk-addlist>li{display:flex;align-items:center;gap:var(--tk-dens-gap);min-height:var(--tk-dens-row);padding:0 var(--tk-dens-gap);border-radius:var(--tk-r)}
.tk-addlist>li:hover{background:var(--tk-hover)}
.tk-addlist>li.is-off{opacity:.55}
.tk-addlist-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.tk-btn.tk-addlist-name{justify-content:flex-start;padding-inline:0;border-color:transparent;background:transparent;box-shadow:none;font-weight:inherit;font-size:13px}
.tk-addlist>li .tk-addlist-x{flex:none;margin-left:auto;opacity:0}.tk-addlist>li:is(:hover,:focus-within) .tk-addlist-x{opacity:1}
@media (pointer:coarse){.tk-addlist>li .tk-addlist-x{opacity:1}}
.tk-addlist>li>.tk-input{flex:1;max-width:280px}
.tk-addlist-form{display:flex;gap:var(--tk-dens-gap);align-items:center;padding-block:var(--tk-dens-gap)}.tk-addlist-form .tk-input{flex:1;max-width:280px}
.tk-listrow.is-done .tk-lr-title{color:var(--tk-ink-3);text-decoration:line-through}
.tk-lr-body{flex:1;min-width:0}.tk-lr-title{line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-lr-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:3px;color:var(--tk-ink-3);font-size:var(--tk-fs-xs)}.tk-lr-meta span{display:inline-flex;align-items:center;gap:4px}
.tk-lr-due{font-size:var(--tk-fs-sm);white-space:nowrap;color:var(--tk-ink-2);min-width:64px;text-align:right;padding-top:1px}
.tk-lr-due.is-late{color:var(--tk-late);font-weight:var(--tk-fw-semibold)}.tk-lr-due.is-soon{color:var(--tk-ink);font-weight:var(--tk-fw-semibold)}.tk-lr-due.is-none{color:var(--tk-ink-4)}
.tk-grouphead{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;background:var(--tk-bg);border-bottom:1px solid var(--tk-line-2);font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--tk-ink-2);position:sticky;top:0;z-index:2;cursor:pointer}
.tk-grouphead .tk-gh-count{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:var(--tk-fw-regular);color:var(--tk-ink-3)}
.tk-grouphead[aria-expanded=false] .tk-chev{transform:rotate(-90deg)}
.tk-prio{display:inline-flex;gap:1.5px;align-items:flex-end;height:10px}.tk-prio i{width:2.5px;background:var(--tk-line-2)}.tk-prio i:nth-child(1){height:4px}.tk-prio i:nth-child(2){height:7px}.tk-prio i:nth-child(3){height:10px}
.tk-prio.is-high i{background:var(--tk-late)}.tk-prio.is-normal i:nth-child(-n+2){background:var(--tk-ink-2)}.tk-prio.is-low i:nth-child(1){background:var(--tk-ink-2)}
.tk-ms-glyph{width:8px;height:8px;background:var(--tk-milestone);transform:rotate(45deg);display:inline-block;flex:none}
.tk-commit-glyph{width:8px;height:8px;border:1.5px solid var(--tk-commit);transform:rotate(45deg);display:inline-block;flex:none;background:var(--tk-surface)}

/* ================= Inspector ================= */
.tk-inspector{width:var(--tk-inspector-w);min-width:var(--tk-inspector-min);max-width:var(--tk-inspector-max);flex:none;display:flex;flex-direction:column;min-height:0;background:var(--tk-surface);border-left:1px solid var(--tk-line-2);position:relative}
.tk-resize{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:5;touch-action:none}
.tk-resize::after{content:"";position:absolute;left:3px;top:50%;width:2px;height:28px;margin-top:-14px;border-radius:2px;background:var(--tk-accent);opacity:0;transition:opacity var(--tk-dur-fast)}
.tk-resize:hover::after,.is-resizing .tk-resize::after{opacity:1}
/* Row edge (a crop's top and bottom): the same handle turned on its side. is-shown keeps the grip visible (a crop edge you have to find by hovering is lost). */
.tk-resize.is-row{left:0;right:0;top:-4px;bottom:auto;width:auto;height:8px;cursor:row-resize}
.tk-resize.is-row::after{left:50%;top:3px;width:28px;height:2px;margin:0 0 0 -14px}
.tk-resize.is-shown::after,.tk-resize:focus-visible::after{opacity:1}
.tk-resize.is-shown{background:linear-gradient(color-mix(in srgb,var(--tk-accent) 45%,transparent),color-mix(in srgb,var(--tk-accent) 45%,transparent)) center/1px 100% no-repeat}.tk-resize.is-shown.is-row{background-size:100% 1px}
.tk-resize:focus-visible{outline:2px solid var(--tk-accent);outline-offset:-2px;border-radius:2px}
/* Large grip (BR-0125, export live crop): a 16px hit band and a 4x40 pill with a white rim, easy to catch with a mouse or a finger. */
.tk-resize.is-grip{left:-8px;width:16px}.tk-resize.is-grip.is-row{left:0;top:-8px;width:auto;height:16px}
.tk-resize.is-grip::after{left:6px;width:4px;height:40px;margin-top:-20px;border-radius:3px;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.25)}
.tk-resize.is-grip.is-row::after{left:50%;top:6px;width:40px;height:4px;margin:0 0 0 -20px}
@media (pointer:coarse){.tk-resize.is-grip{left:-12px;width:24px}.tk-resize.is-grip.is-row{top:-12px;height:24px}.tk-resize.is-grip::after{left:10px}.tk-resize.is-grip.is-row::after{top:10px}}
.tk-insp-head{display:flex;align-items:center;gap:4px;height:40px;padding:0 6px 0 14px;border-bottom:1px solid var(--tk-line);flex:none}
.tk-insp-head .tk-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-insp-body{flex:1;overflow:auto;padding:14px 16px 24px}
.tk-insp-title{display:flex;gap:9px;align-items:flex-start;margin:0 0 10px}
.tk-insp-title textarea{flex:1;border:1px solid transparent;border-radius:var(--tk-r);background:none;resize:none;padding:2px 4px;margin:-3px -5px;font-size:var(--tk-fs-xl);font-weight:var(--tk-fw-semibold);letter-spacing:var(--tk-tracking-tight);line-height:1.3;color:var(--tk-ink);min-height:0;field-sizing:content}
.tk-insp-title textarea:hover{border-color:var(--tk-line)}.tk-insp-title textarea:focus{outline:none;border-color:var(--tk-accent);box-shadow:var(--tk-focus-ring)}
.tk-insp-title .tk-ms-glyph{width:11px;height:11px;margin-top:8px}
.tk-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--tk-line);border-radius:var(--tk-r-lg);margin:4px 0 14px;overflow:hidden}
.tk-fact{padding:7px 10px;border-right:1px solid var(--tk-line);min-width:0}.tk-fact:last-child{border-right:0}
.tk-fact span{display:block;font-size:var(--tk-fs-2xs);color:var(--tk-ink-3);letter-spacing:var(--tk-tracking-label)}
.tk-fact b{display:block;font-size:var(--tk-fs);font-weight:var(--tk-fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-fact b.is-late{color:var(--tk-late)}.tk-fact b.is-ok{color:var(--tk-ok)}.tk-fact b.is-na{color:var(--tk-ink-4);font-weight:var(--tk-fw-regular)}
.tk-section{border-top:1px solid var(--tk-line)}
.tk-section>summary{list-style:none;display:flex;align-items:center;gap:8px;height:36px;cursor:pointer;font-size:var(--tk-fs-sm);font-weight:var(--tk-fw-semibold);color:var(--tk-ink)}
.tk-section>summary::-webkit-details-marker{display:none}
.tk-section>summary .tk-chev{transition:transform var(--tk-dur-fast)}.tk-section:not([open])>summary .tk-chev{transform:rotate(-90deg)}
.tk-section>summary .tk-aside{margin-left:auto;font-weight:var(--tk-fw-regular);color:var(--tk-ink-3);font-size:var(--tk-fs-xs)}
.tk-section-body{padding:0 0 14px}
.tk-kv{display:grid;grid-template-columns:108px minmax(0,1fr);gap:8px 12px;align-items:center;margin:0}
.tk-kv>dt{font-size:var(--tk-fs-sm);color:var(--tk-ink-3)}.tk-kv>dd{margin:0;min-width:0}
.tk-readonly{border:1px solid var(--tk-line);background:var(--tk-surface-2);border-radius:var(--tk-r);padding:8px 10px;font-size:var(--tk-fs-sm);color:var(--tk-ink-2)}
.tk-readonly b{color:var(--tk-ink)}
.tk-linkrow{display:flex;align-items:center;gap:8px;min-height:30px;border-bottom:1px solid var(--tk-line);font-size:var(--tk-fs-sm)}
.tk-linkrow .tk-lk-wbs{width:44px;color:var(--tk-ink-3);flex:none}.tk-linkrow .tk-lk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-linkrow .tk-lk-type{flex:none}
.tk-linkrow .tk-btn{opacity:0}.tk-linkrow:hover .tk-btn,.tk-linkrow:focus-within .tk-btn{opacity:1}
.tk-note{padding:8px 10px;background:var(--tk-surface-2);border-radius:var(--tk-r);margin-top:8px;font-size:var(--tk-fs-sm)}
.tk-note header{display:flex;justify-content:space-between;color:var(--tk-ink-3);font-size:var(--tk-fs-xs);margin-bottom:3px}.tk-note header b{color:var(--tk-ink-2)}
.tk-insp-foot{flex:none;display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 14px;border-top:1px solid var(--tk-line);color:var(--tk-ink-3);font-size:var(--tk-fs-xs)}

/* ================= Gantt ================= */
.tk-gantt{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;background:var(--tk-surface)}
.tk-g-body{flex:1;display:flex;min-height:0;position:relative}
.tk-g-table{width:var(--tk-grid-w);min-width:300px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--tk-line-2);background:var(--tk-surface)}
.tk-g-head{display:grid;grid-template-columns:var(--tk-g-cols);height:calc(var(--tk-gantt-head-h) + var(--tk-navigator-h)); /* aligns with navigator + scale */align-items:end;border-bottom:1px solid var(--tk-line);flex:none;background:var(--tk-surface)}
.tk-g-head>div{padding:0 6px 8px;font-size:var(--tk-fs-2xs);font-weight:var(--tk-fw-medium);letter-spacing:var(--tk-tracking-label);color:var(--tk-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-g-head>div.is-num{text-align:right}
.tk-g-rows{flex:1;overflow:auto;overscroll-behavior:contain}
.tk-g-row{display:grid;grid-template-columns:var(--tk-g-cols);height:var(--tk-row-h);align-items:stretch;border-bottom:1px solid var(--tk-line);font-size:var(--tk-fs-grid);position:relative;background:var(--tk-surface)}
.tk-g-row:hover{background:var(--tk-hover)}
.tk-g-row.is-selected{background:var(--tk-accent-soft)}
.tk-g-row.is-summary{font-weight:var(--tk-fw-semibold)}
.tk-g-row.is-drop-before{box-shadow:inset 0 2px 0 var(--tk-accent)}.tk-g-row.is-drop-after{box-shadow:inset 0 -2px 0 var(--tk-accent)}.tk-g-row.is-drop-into{box-shadow:inset 0 0 0 2px var(--tk-accent)}
.tk-g-row.is-new{animation:tk-flash .9s var(--tk-ease)}
@keyframes tk-flash{from{background:var(--tk-accent-soft)}}
.tk-g-cell{display:flex;align-items:center;padding:0 6px;min-width:0;white-space:nowrap;overflow:hidden;position:relative;outline:none}
.tk-g-cell>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk-g-cell.is-num{justify-content:flex-end}
.tk-g-cell.is-active{box-shadow:inset 0 0 0 2px var(--tk-accent);background:var(--tk-surface)}
.tk-g-cell:has(>input){overflow:visible;z-index:3}
.tk-g-cell[data-col=pred]>input{left:auto;right:0;width:max(100%,240px);box-shadow:var(--tk-shadow-pop)}
.tk-g-cell.is-readonly{color:var(--tk-ink-3)}
.tk-g-cell.is-error{box-shadow:inset 0 0 0 2px var(--tk-late)}
.tk-g-cell input{position:absolute;inset:0;width:100%;height:100%;border:0;outline:2px solid var(--tk-accent);outline-offset:-2px;padding:0 6px;background:var(--tk-surface);font-size:var(--tk-fs-grid);font-weight:var(--tk-fw-regular);color:var(--tk-ink)}
.tk-g-handle{justify-content:center;color:var(--tk-ink-4);cursor:grab;opacity:0}.tk-g-row:hover .tk-g-handle,.tk-g-row.is-selected .tk-g-handle{opacity:1}
.tk-g-wbs{color:var(--tk-ink-3)}.tk-g-row.is-summary .tk-g-wbs{color:var(--tk-ink-2)}
.tk-g-name{gap:4px}
.tk-g-chev{width:16px;height:16px;border:0;padding:0;background:none;display:grid;place-items:center;color:var(--tk-ink-3);border-radius:3px;flex:none}
.tk-g-chev:hover{background:var(--tk-surface-3);color:var(--tk-ink)}.tk-g-chev svg{width:12px;height:12px;transition:transform var(--tk-dur-fast)}.tk-g-chev[aria-expanded=false] svg{transform:rotate(-90deg)}
.tk-g-chev-space{width:16px;flex:none}
.tk-g-add{display:flex;align-items:center;gap:8px;height:var(--tk-row-h);padding-left:28px;color:var(--tk-ink-3);font-size:var(--tk-fs-grid);cursor:pointer;border:0;background:none;width:100%}.tk-g-add:hover{color:var(--tk-ink)}
.tk-splitter{width:8px;margin:0 -4px;cursor:col-resize;position:relative;z-index:6;flex:none;touch-action:none}
.tk-splitter:hover::after,.is-resizing .tk-splitter::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:var(--tk-accent)}
.tk-g-chart{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.tk-g-navigator{height:var(--tk-navigator-h);flex:none;position:relative;border-bottom:1px solid var(--tk-line);background:var(--tk-surface-2);cursor:pointer;overflow:hidden}
.tk-g-navigator i{position:absolute;height:4px;border-radius:2px;background:var(--tk-ink-4)}
.tk-g-navigator .tk-nav-ms{position:absolute;width:5px;height:5px;background:var(--tk-ink-2);transform:translate(-50%,-50%) rotate(45deg)}
.tk-g-navigator .tk-nav-today{position:absolute;top:0;bottom:0;width:1px;background:var(--tk-today)}
.tk-g-navigator .tk-nav-window{position:absolute;top:2px;bottom:2px;border:1.5px solid var(--tk-accent);border-radius:3px;background:#4b5bd614;cursor:grab}
.tk-g-navigator .tk-nav-label{position:absolute;top:50%;transform:translateY(-50%);font-size:9.5px;color:var(--tk-ink-3)}
.tk-g-scale{height:var(--tk-gantt-head-h);flex:none;position:relative;overflow:hidden;border-bottom:1px solid var(--tk-line);background:var(--tk-surface)}
.tk-g-tier{position:absolute;left:0;height:22px}.tk-g-tier.is-top{top:0}.tk-g-tier.is-bottom{top:22px}
.tk-g-tick{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 5px;border-left:1px solid var(--tk-grid-line);font-size:var(--tk-fs-2xs);color:var(--tk-ink-3);white-space:nowrap}
.tk-g-tier.is-top .tk-g-tick{color:var(--tk-ink-2);font-weight:var(--tk-fw-semibold);border-left-color:var(--tk-grid-line-major)}
.tk-g-tick.is-weekend{color:var(--tk-ink-4)}
.tk-g-today-flag{position:absolute;bottom:2px;transform:translateX(-50%);padding:1px 4px;border-radius:3px;background:var(--tk-today);color:var(--tk-on-primary);font-size:9px;font-weight:600;z-index:2;white-space:nowrap}
.tk-g-scroll{flex:1;overflow:auto;position:relative;overscroll-behavior:contain}
.tk-g-canvas{position:relative}
.tk-g-rowbg{position:absolute;left:0;right:0;height:var(--tk-row-h);border-bottom:1px solid var(--tk-line)}
.tk-g-rowbg.is-selected{background:var(--tk-accent-soft)}.tk-g-rowbg.is-hover{background:var(--tk-hover)}
.tk-g-weekend{position:absolute;top:0;bottom:0;background:var(--tk-weekend)}
.tk-g-vline{position:absolute;top:0;bottom:0;width:1px;background:var(--tk-grid-line)}.tk-g-vline.is-major{background:var(--tk-grid-line-major)}
.tk-g-today{position:absolute;top:0;bottom:0;width:var(--tk-today-w,1px);margin-left:calc(.5px - var(--tk-today-w,1px) / 2);background:var(--tk-today);z-index:3;pointer-events:none}
.tk-g-bar{position:absolute;height:var(--tk-bar-h);border-radius:2px;background:var(--tk-bar);z-index:2;cursor:pointer;touch-action:none}
.tk-g-bar:hover,.tk-g-bar.is-hover{box-shadow:0 0 0 1px var(--tk-bar-edge)}
.tk-g-bar.is-selected{box-shadow:0 0 0 2px var(--tk-accent)}
.tk-g-bar.is-done{background:var(--tk-bar-done)}
.tk-g-bar.is-summary{height:var(--tk-summary-h);background:var(--tk-summary);border-radius:0}
.tk-g-bar.is-summary::before,.tk-g-bar.is-summary::after{content:"";position:absolute;top:100%;border-style:solid;border-width:5px 4px 0 4px;border-color:var(--tk-summary) transparent transparent transparent}
.tk-g-bar.is-summary::before{left:0;border-width:5px 5px 0 0}.tk-g-bar.is-summary::after{right:0;border-width:5px 0 0 5px}
.tk-g-bar.is-summary.is-selected{box-shadow:0 0 0 2px var(--tk-accent)}
.tk-g-bar.is-critical{background:var(--tk-critical)} /* RESERVED: not used until canonical CPM exists */
.tk-g-ms{position:absolute;width:var(--tk-ms);height:var(--tk-ms);background:var(--tk-milestone);transform:translate(-50%,-50%) rotate(45deg);z-index:3;cursor:pointer;border-radius:1px}
.tk-g-ms.is-selected{box-shadow:0 0 0 2px var(--tk-surface),0 0 0 4px var(--tk-accent)}.tk-g-ms.is-done{background:var(--tk-milestone-done)}
.tk-g-commit{position:absolute;width:calc(var(--tk-ms) - 1px);height:calc(var(--tk-ms) - 1px);border:1.5px solid var(--tk-commit);background:var(--tk-surface);transform:translate(-50%,-50%) rotate(45deg);z-index:2}
.tk-g-variance{position:absolute;height:2px;z-index:1}.tk-g-variance.is-late{background:var(--tk-late)}.tk-g-variance.is-early{background:var(--tk-ok)}
.tk-g-label{position:absolute;white-space:nowrap;font-size:var(--tk-fs-xs);color:var(--tk-ink-2);z-index:2;pointer-events:none;line-height:16px}
.tk-g-label.is-left{text-align:right;transform:translateX(-100%)}
.tk-g-label .is-late{color:var(--tk-late)}.tk-g-label .is-early{color:var(--tk-ok)}
.tk-g-port{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--tk-surface);border:1.5px solid var(--tk-accent);z-index:4;opacity:0;cursor:crosshair;touch-action:none;transition:opacity var(--tk-dur-fast)}
.tk-g-port::before{content:"";position:absolute;inset:-7px;border-radius:50%} /* 24 px hit area */
.tk-g-item:hover .tk-g-port,.tk-g-item.is-selected .tk-g-port,.tk-g-item.is-drawing .tk-g-port,.is-linking .tk-g-port{opacity:1}
.tk-g-port.is-target-valid{background:var(--tk-accent);opacity:1;transform:scale(1.25)}
.tk-g-port.is-target-invalid{border-color:var(--tk-dep-invalid);background:var(--tk-late-soft);opacity:1}
.tk-g-deps{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
.tk-g-deps path{fill:none;stroke:var(--tk-dep);stroke-width:1}
.tk-g-deps path.is-active{stroke:var(--tk-dep-active);stroke-width:1.5}
.tk-g-deps circle{fill:var(--tk-dep)}.tk-g-deps circle.is-active{fill:var(--tk-dep-active)}
.tk-g-deps path.is-rubber{stroke:var(--tk-dep-active);stroke-width:1.5;stroke-dasharray:4 3}.tk-g-deps path.is-rubber.is-invalid{stroke:var(--tk-dep-invalid)}
.tk-g-gated{opacity:.55}
.tk-statusbar{height:var(--tk-statusbar-h);flex:none;display:flex;align-items:center;gap:16px;padding:0 12px;border-top:1px solid var(--tk-line);background:var(--tk-chrome);color:var(--tk-ink-3);font-size:var(--tk-fs-xs);white-space:nowrap;overflow:hidden}
.tk-legend{display:flex;gap:12px;margin-left:auto;align-items:center}.tk-legend span{display:inline-flex;align-items:center;gap:5px}
.tk-lg-bar{width:14px;height:6px;border-radius:2px;background:var(--tk-bar)}.tk-lg-sum{width:14px;height:3px;background:var(--tk-summary)}.tk-lg-late{width:14px;height:2px;background:var(--tk-late)}.tk-lg-dep{width:14px;height:0;border-top:1px solid var(--tk-dep)}

/* ================= Dialog, toast, banner, empty ================= */
.tk-scrim{position:fixed;inset:0;z-index:var(--tk-z-dialog);background:var(--tk-scrim);display:grid;place-items:center;padding:24px}
.tk-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:var(--tk-z-toast);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:var(--tk-r-lg);background:var(--tk-ink);color:#fff;font-size:var(--tk-fs-sm);box-shadow:var(--tk-shadow-pop);white-space:nowrap}
.tk-toast button{border:0;background:#ffffff1f;color:#fff;border-radius:var(--tk-r-sm);padding:3px 8px;font-weight:600}
.tk-banner{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--tk-r);border:1px solid;font-size:var(--tk-fs-sm)}
.tk-banner[hidden]{display:none}
.tk-banner.is-info{background:var(--tk-info-soft);border-color:var(--tk-accent-line);color:var(--tk-accent-ink)}.tk-banner.is-warn{background:var(--tk-warn-soft);border-color:var(--tk-warn-line);color:var(--tk-warn-ink)}.tk-banner.is-late{background:var(--tk-late-soft);border-color:var(--tk-late-line);color:var(--tk-late)}.tk-banner.is-ok{background:var(--tk-ok-soft);border-color:var(--tk-ok-line);color:var(--tk-ok)}
.tk-banner.is-gated{background:var(--tk-surface-2);border-style:dashed;border-color:var(--tk-line-3);color:var(--tk-ink-2)}
.tk-empty{display:grid;justify-items:center;gap:6px;padding:36px 20px;text-align:center;color:var(--tk-ink-3)}
.tk-empty h3{margin:6px 0 0;color:var(--tk-ink);font-size:var(--tk-fs-lg);font-weight:var(--tk-fw-semibold)}.tk-empty p{margin:0;max-width:340px}
.tk-empty .tk-empty-glyph{width:40px;height:40px;border-radius:var(--tk-r-lg);display:grid;place-items:center;background:var(--tk-surface-2);color:var(--tk-ink-2)}
.tk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--tk-z-sheet);max-height:72dvh;background:var(--tk-surface);border-radius:var(--tk-r-xl) var(--tk-r-xl) 0 0;box-shadow:var(--tk-shadow-sheet);display:flex;flex-direction:column}
.tk-sheet-grabber{width:36px;height:4px;border-radius:2px;background:var(--tk-line-2);margin:8px auto 2px;flex:none}

/* Frosted glass on floating layers only (2026-11-01): right-click and drop-down menus, popovers, Gantt hover popups, the t. menu and the side drawer it opens on iPad portrait and phones (BR-0013).
   Never on Gantt rows, bars or panels. Opaque when the browser lacks backdrop-filter or the user asks for less transparency.
   !important beats the generated dark.css surface swap. */
:is(.tk-popover,.takt-sidebar-drawer .takt-global-sidebar,body.takt-ring-menu:not(.takt-sidebar-drawer) .tk-app-menu,.gantt-context,.gantt-columns-menu,.gantt-hover-card,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu){background:var(--tk-glass-bg)!important;-webkit-backdrop-filter:var(--tk-glass-blur);backdrop-filter:var(--tk-glass-blur);border-color:var(--tk-glass-edge)!important;box-shadow:inset 0 1px 0 var(--tk-glass-hi),var(--tk-glass-shadow)!important}
/* Every menu and drop-down has the same 3px flight-deck corners (UI-STANDARD §11, Justin 2026-11-02: one look for all drop-downs). */
:is(.tk-menu,.gantt-context,.gantt-columns-menu,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu){border-radius:var(--tk-r,3px)!important}
:is(.tk-menu,.gantt-context,.gantt-columns-menu,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu)>:is(button,[role^=menuitem],.tk-menu-item){border-radius:var(--tk-r,3px)!important}
:is(.tk-popover,.gantt-context,.gantt-columns-menu,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu) hr{border-color:var(--tk-glass-line)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.tk-popover,.takt-sidebar-drawer .takt-global-sidebar,body.takt-ring-menu:not(.takt-sidebar-drawer) .tk-app-menu,.gantt-context,.gantt-columns-menu,.gantt-hover-card,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu){background:var(--tk-surface)!important}}
@media (prefers-reduced-transparency:reduce){:is(.tk-popover,.takt-sidebar-drawer .takt-global-sidebar,body.takt-ring-menu:not(.takt-sidebar-drawer) .tk-app-menu,.gantt-context,.gantt-columns-menu,.gantt-hover-card,.gantt-add-menu,.gantt-outline-menu,:is(.gantt-more)>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu){background:var(--tk-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Inspector control geometry (UI-STANDARD §8–10); appearances belong to this kit. */
.tki-head .tk-win-sub select{field-sizing:content;max-width:10em;height:24px;padding:0 20px 0 2px;border:0;border-radius:var(--tk-insp-r);background-color:transparent;background-position:right 6px center;color:inherit;font:inherit;cursor:pointer}
.tki-name input{flex:1;min-width:0;height:30px;margin-left:calc(-1 * var(--tk-s1,4px));padding:0 var(--tk-s1,4px);border:1px solid transparent;border-radius:var(--tk-insp-r);background:transparent;color:var(--tk-ink,#17181a);font-size:var(--tk-fs-xl,17px);font-weight:600;letter-spacing:var(--tk-tracking-tight,-.01em)}
/* #1055: Part of takes the room the pill leaves and shows its caret, so it never runs under the pill. */
.tki-part>label{flex:1 1 auto}
/* BR-0100: a workspace without nested phases shows the parent as text, sized and coloured like the picker. */
.tki-part .ti-part-name{display:inline-block;max-width:100%;padding:0 var(--tk-s1,4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;color:var(--tk-ink,#17181a);font-size:var(--tk-fs-sm,12px)}
.tki-part select{flex:0 1 auto;field-sizing:content;min-width:0;max-width:100%;height:24px;padding:0 20px 0 var(--tk-s1,4px);border:0;border-radius:var(--tk-insp-r);background-color:transparent;background-position:right 6px center;text-overflow:ellipsis;color:var(--tk-ink,#17181a);font-size:var(--tk-fs-sm,12px);cursor:pointer}
.tki-pill svg{width:12px;height:12px}
.tki-pill[data-state=no] svg{opacity:.35}
.tki-pill[data-state=yes]{border-color:var(--tk-accent-line,#c9cdf3);background:var(--tk-accent-soft,#e8ebfd);color:var(--tk-accent-ink,#3f4fc4)}
.tki-pill[data-state=moved]{border-color:currentColor;color:var(--tk-warn,#b7791f)}
.tki-pill .ti-pl-words>span{grid-area:1/1;text-align:left}
.tki-pill .ti-pl-words>span[hidden]{display:block;visibility:hidden}
.tki-pill [hidden]{display:none}
.tki-status{width:100%;height:var(--tk-insp-ctl);border-radius:var(--tk-insp-r);color:var(--tk-ink,#17181a);font-size:var(--tk-fs,13px)}
.tki-status>span:last-child{overflow:hidden;text-overflow:ellipsis}
.tki-field::placeholder,.tki textarea::placeholder{color:var(--tk-ink-4,#a0a3aa)}
.tki-date,.tki-pick{justify-content:space-between;cursor:pointer}
.tki-date>span,.tki-pick>.ti-track-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tki-date>svg,.tki-caret{color:var(--tk-ink-3,#6c7078)}
.tki-date.is-proposed{border-color:var(--tk-warn,#b86e00);background:var(--tk-warn-soft,#fff3dd)}
.tki-pick .ti-track-wbs{flex:none;color:var(--tk-ink-3,#6c7078);font-variant-numeric:tabular-nums}
.tki-pick .ti-track-none{color:var(--tk-ink-3,#6c7078)}
.tki-caret{flex:none;display:flex}
select.tki-field{padding-right:var(--tk-s6,24px)}
.tki-quiet{max-width:100%;height:var(--tk-insp-ctl);padding:0 var(--tk-s6,24px) 0 var(--tk-s2,8px);border:0;border-radius:var(--tk-insp-r);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;color:var(--tk-ink,#17181a);font-size:var(--tk-fs,13px);text-align:right;appearance:none;-webkit-appearance:none;cursor:pointer}
.tki-num{display:inline-flex;align-items:center;flex:none;width:76px;height:var(--tk-insp-ctl);border:1px solid var(--tk-line-2,#d5d7dc);border-radius:var(--tk-insp-r);background:var(--tk-surface,#fff);overflow:hidden}
.tki-num input{flex:1;min-width:0;height:100%;padding:0 0 0 var(--tk-s2,8px);border:0;background:transparent;color:var(--tk-ink,#17181a);font-size:var(--tk-fs,13px);-moz-appearance:textfield}
.tki-num input::-webkit-inner-spin-button,.tki-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tki-num>span{flex:none;padding:0 var(--tk-s2,8px) 0 2px;font-size:var(--tk-fs-sm,12px);color:var(--tk-ink-3,#6c7078)}
.tki textarea{display:block;width:100%;padding:6px var(--tk-s2,8px);border:1px solid var(--tk-line-2,#d5d7dc);border-radius:var(--tk-insp-r);background:var(--tk-surface,#fff);color:var(--tk-ink,#17181a);font-size:var(--tk-fs-grid,12.5px);line-height:var(--tk-lh,1.45)}
.tki .ti-person button{height:20px;padding:0 var(--tk-s1,4px);border:0;border-radius:50%;background:none;color:var(--tk-ink-3,#6c7078);font-size:var(--tk-fs-xs,11px);cursor:pointer}

.tki-pill{display:inline-flex;align-items:center;gap:6px;height:28px;max-width:100%;padding:0 10px 0 8px;border:1px solid var(--tk-line-2,#d5d7dc);border-radius:var(--tk-r-pill,999px);background:var(--tk-surface,#fff);color:var(--tk-ink-2,#45484e);font-size:var(--tk-fs-sm,12px);white-space:nowrap;cursor:pointer}
.tki-pill .ti-pl-words{display:inline-grid}
.tki-field{display:flex;align-items:center;gap:var(--tk-insp-gap);width:100%;min-width:0;height:var(--tk-insp-ctl);padding:0 var(--tk-s2,8px);border:1px solid var(--tk-line-2,#d5d7dc);border-radius:var(--tk-insp-r);background:var(--tk-surface,#fff);color:var(--tk-ink,#17181a);font-size:var(--tk-fs,13px);text-align:left}

.tki-part>.tki-pill{height:24px;font-size:11.5px}
.tki-item>.tki-main,.tki-item .ti-link-name{display:block;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;font-size:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tki-item button.ti-link-name{cursor:pointer}
button.tki-chip{cursor:pointer}
.tki-chip select{height:20px;padding:0 2px;border:0;background:transparent;color:inherit;font-size:inherit;cursor:pointer}








/* Controls kit #997 / UI-STANDARD §8–11. Off and on reserve the same border. */
.tk-tool{box-sizing:border-box;display:inline-flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:var(--tk-tool-min-w,50px);height:48px;min-height:48px;padding:var(--tk-tool-pad,3px 2px);border:1px solid var(--tk-control-off-line);border-radius:var(--tk-r);background:var(--tk-control-off-bg);box-shadow:none;color:var(--tk-icon-label);font:500 var(--tk-tool-fs,11px)/1.1 var(--tk-font);white-space:nowrap;cursor:pointer;list-style:none}
.tk-tool>svg{flex:none;width:18px;height:18px;color:var(--tk-icon)}
.tk-tool>span{font-weight:500;white-space:nowrap}
.tk-tool::-webkit-details-marker{display:none}
.tk-tool[hidden],.tk-btn[hidden]{display:none}
.tk-tool-group{display:inline-flex;align-items:center;gap:1px;border:0;border-radius:var(--tk-r-pill);background:color-mix(in srgb,var(--tk-hover) 35%,transparent)}
/* Capsule (#1011 V5 header, Pages style): a white pill of icon tools on the tinted strip, set apart by space, never lines.
   Inside it "on" is a soft fill, not a second white chip; icon tools are round, 40px (34px on a narrow window such as an iPad, so one row still holds every everyday tool). */
.tk-tool-group.is-capsule{gap:2px;padding:4px;background:var(--tk-surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--tk-line) 70%,transparent),0 1px 3px #17182014}
/* On, inside a capsule (Justin 2026-11-06): the icon keeps its own lines and colour; the colour is in the glass pill behind
   it, tinted with the tool's tone. Set on the tool itself so a tool's own data-tone reaches its pill. */
.tk-tool-group.is-capsule .tk-tool{--tk-control-on-ink:var(--tk-icon);--tk-control-on-bg:color-mix(in srgb,var(--tk-control-tone) 18%,transparent);--tk-control-on-line:color-mix(in srgb,var(--tk-control-tone) 34%,transparent);--tk-control-on-shadow:inset 0 1px 0 color-mix(in srgb,var(--tk-glass-hi) 70%,transparent),0 0 var(--tk-control-glow) color-mix(in srgb,var(--tk-control-tone) 40%,transparent)}
/* Tones: colour only where it means something. Critical path's pill is red when on (it is red on the chart too). */
.tk-tool[data-tone=critical]{--tk-control-tone:var(--tk-critical)}
.tk-tool-group.is-capsule .tk-tool{--tk-tool-min-w:40px;--tk-tool-pad:0;width:40px;height:40px;min-height:40px;border-radius:var(--tk-r-pill)}
/* #1161: up to 1439px, so a 13" iPad in landscape (1366-1376px) gets the narrow size too; at full size its V5 row ran under the zoom slider. */
@media(max-width:1439px){.tk-tool-group.is-capsule{padding:3px;gap:0}.tk-tool-group.is-capsule .tk-tool{--tk-tool-min-w:34px;width:34px;height:34px;min-height:34px}}
/* Small group (kit audit 11-09, the Notes typing toolbar): round 30px icon tools in a soft pill, for bars inside a pane; 40px on touch. */
.tk-tool-group.is-sm{gap:1px}
.tk-tool-group.is-sm .tk-tool{--tk-tool-min-w:30px;--tk-tool-pad:0;width:30px;height:30px;min-height:30px;border-radius:var(--tk-r-pill)}
.tk-tool-group.is-sm .tk-tool>svg{width:16px;height:16px}
@media(pointer:coarse){.tk-tool-group.is-sm .tk-tool{width:40px;height:40px;min-height:40px}}
[data-tool-layout=beside] .tk-tool{flex-direction:row;gap:6px}
/* Icons only hides a tool's word, never its badge (BR-0186: Standard hid the Plan dot). A badge on a tool carries .tk-tool-badge. */
[data-tool-layout=icon] .tk-tool>span:not(.tk-tool-badge),html[data-tool-labels=off] .tk-tool>span:not(.tk-tool-badge){display:none!important}
[data-tool-layout=icon] .tk-tool{flex-direction:row}
@media(min-width:1520px){.tk-tool{--tk-tool-pad:3px 7px}}
@media(pointer:coarse){.tk-tool{min-height:48px}}
/* Touch (#1013): on a coarse pointer every small button part gets a 44px hit area around it, without changing what is
   drawn. :where() keeps it at zero specificity, so a screen that positions its own button still wins. */
@media(pointer:coarse){:where(.tk-btn,.tk-chip,.tk-link,.tk-seg>button,.tk-date-field){position:relative}
 :where(.tk-btn,.tk-chip,.tk-link,.tk-seg>button,.tk-date-field)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}}
.tk-date-field{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--tk-ctl-h);padding:0 9px;border:1px solid var(--tk-line-2);border-radius:var(--tk-r);background:var(--tk-surface);color:var(--tk-ink);font:inherit;cursor:pointer}
.tk-date-field>svg{flex:none;width:16px;height:16px}
.tki-field{height:var(--tk-insp-ctl);min-width:0;text-align:left}
.tk-btn.tki-x{width:24px;height:24px;padding:0;flex:none}
.tk-btn.tki-x svg{width:13px;height:13px}

.tk-check:is(:checked,[aria-checked=true],.is-selected,.is-on)::after{content:"";width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
/* #1040 left these at zero specificity (:where), so the 13px tool label won and Move down / Collapse all ran off the left edge. */
#takt-sidebar-tools>.gantt-side-tools>.tk-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:58px;min-width:0;height:44px;min-height:44px;padding:4px 0;font-size:10.5px;line-height:1.15;text-align:center;cursor:pointer}
#takt-sidebar-tools>.gantt-side-tools>.tk-tool svg{width:18px;height:18px;flex:none}
#takt-sidebar-tools>.gantt-side-tools>.tk-tool{width:60px;white-space:normal}
.tki .ti-action-choices button{width:100%;padding:0 var(--tk-s1,4px);border:0;border-radius:var(--tk-insp-r);background:transparent;cursor:pointer}
.tki .ti-action-new{width:100%;padding:0 var(--tk-s2,8px);border:1px dashed var(--tk-accent-line,#b8c4dc);border-radius:var(--tk-insp-r);background:var(--tk-surface,#fff);color:var(--tk-accent-ink,#3f4fc4);font-weight:500;cursor:pointer}
/* BR-0162: a dark button stays dark when pointed at (it went pale and its white icon vanished); it lightens a little instead. */
.tk-btn.is-primary:is(:hover,.is-hover):where(:not(:disabled,[aria-disabled=true],.is-disabled,[aria-pressed=true],.is-selected)){background-color:color-mix(in srgb,var(--tk-primary) 86%,#fff);border-color:color-mix(in srgb,var(--tk-primary) 86%,#fff);color:var(--tk-on-primary)}
.tk-btn.is-danger.is-primary:is(:hover,.is-hover):where(:not(:disabled,[aria-disabled=true],.is-disabled)){background-color:color-mix(in srgb,var(--tk-late) 86%,#fff);border-color:color-mix(in srgb,var(--tk-late) 86%,#fff);color:#fff}
.tk-btn.is-primary>svg{color:var(--tk-icon-on)}
/* Controls share paint, focus and availability. No state changes metrics or font weight. */
:is(.tk-btn,.tk-tool,.tk-chip,.tk-link,.tk-seg>button,.tk-seg>label>span,.tk-switch,.tk-toggle,.tk-check,.tk-select,.tk-select-quiet,.tk-input,.tk-textarea,.tk-date-field,.tk-menu-item){box-sizing:border-box;transition:background-color var(--tk-dur-fast) var(--tk-ease),border-color var(--tk-dur-fast) var(--tk-ease),box-shadow var(--tk-dur-fast) var(--tk-ease)}
:is(.tk-btn,.tk-tool,.tk-chip,.tk-link,.tk-seg>button,.tk-seg>label>span,.tk-switch,.tk-toggle,.tk-check,.tk-select,.tk-select-quiet,.tk-input,.tk-textarea,.tk-date-field,.tk-menu-item):is(:hover,.is-hover,[data-kb]):where(:not(:disabled,[aria-disabled=true],.is-disabled)){background-color:var(--tk-control-hover-bg)}
:is(.tk-btn,.tk-tool,.tk-chip,.tk-link,.tk-seg>button,.tk-seg>label>span,.tk-switch,.tk-toggle,.tk-check,.tk-select,.tk-select-quiet,.tk-input,.tk-textarea,.tk-date-field,.tk-menu-item):is([aria-pressed=true],[aria-selected=true],[aria-checked=true],:checked,.is-selected,.is-on){background-color:var(--tk-control-on-bg);border-color:var(--tk-control-on-line);box-shadow:var(--tk-control-on-shadow);color:var(--tk-control-on-ink)}
:is(.tk-tool,.tk-btn):is([aria-pressed=true],[aria-selected=true],.is-selected)>svg{color:var(--tk-control-on-ink)}
:is(.tk-btn,.tk-tool,.tk-chip,.tk-link,.tk-seg>button,.tk-seg>label>span,.tk-switch,.tk-toggle,.tk-check,.tk-select,.tk-select-quiet,.tk-input,.tk-textarea,.tk-date-field,.tk-menu-item):is(:focus-visible,.is-focus){outline:var(--tk-control-focus);outline-offset:1px}
:is(.tk-btn,.tk-tool,.tk-chip,.tk-link,.tk-seg>button,.tk-seg>label>span,.tk-switch,.tk-toggle,.tk-check,.tk-select,.tk-select-quiet,.tk-input,.tk-textarea,.tk-date-field,.tk-menu-item):is(:disabled,[aria-disabled=true],.is-disabled){opacity:var(--tk-control-disabled-opacity);pointer-events:none;cursor:default}
:is(.tk-input,.tk-textarea,.tk-select,.tk-select-quiet,.tk-date-field):is(.is-error,[aria-invalid=true]){border-color:var(--tk-control-error-line)}
.tk-inputgroup:has([aria-invalid=true]){border-color:var(--tk-control-error-line)}
.tk-switch:is([aria-checked=true],:checked,.is-selected,.is-on)::after,.tk-toggle:is([aria-checked=true],:checked,.is-selected,.is-on)::after{background:var(--tk-control-on-ink)}
.tk-menu-item:is([aria-selected=true],[aria-checked=true]) .tk-menu-tick::before{content:'✓';color:var(--tk-control-on-ink)}

/* Takt calendar: geometry and glass; button states come from the contract above. */
.takt-date-popover{position:fixed;z-index:var(--tk-z-popup-layer,13000);width:252px;padding:10px 10px 8px;background:var(--tk-glass-bg);border:1px solid var(--tk-glass-edge);border-radius:var(--tk-r);box-shadow:var(--tk-glass-shadow);-webkit-backdrop-filter:var(--tk-glass-blur);backdrop-filter:var(--tk-glass-blur);font:13px/18px var(--tk-font,system-ui,sans-serif);color:var(--tk-ink)}
.takt-date-head{display:flex;align-items:center;gap:2px;margin:0 2px 6px}.takt-date-head strong{flex:1;font-size:13px;font-weight:500}
.takt-date-head button,.takt-date-foot button{border:1px solid transparent;background:transparent;color:inherit;border-radius:var(--tk-r);cursor:pointer}.takt-date-head button{width:28px;height:28px;display:grid;place-items:center}
.takt-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.takt-date-dow{text-align:center;font-size:11px;font-weight:600;color:#6b7280;padding:2px 0 4px}
.takt-date-grid button{height:30px;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0}
.takt-date-grid button.outside{color:#9aa1ad}.takt-date-grid button.today{text-decoration:underline;text-underline-offset:4px}.takt-date-grid button.spare{visibility:hidden}
.takt-date-foot{display:flex;justify-content:flex-end;margin-top:6px}.takt-date-foot button{padding:4px 8px;color:var(--tk-accent-ink)}
@media(hover:none){.takt-date-grid button{height:36px}.takt-date-head button{width:36px;height:36px}}
.takt-date-foot .takt-date-clear{margin-right:auto}

.tk-tool>span[data-reserve]{display:inline-flex;flex-direction:column;align-items:center}.tk-tool>span[data-reserve]::after{content:attr(data-reserve);height:0;overflow:hidden;visibility:hidden;white-space:nowrap}

.tk-switch:is(.is-selected,.is-on)::after{translate:16px 0}

.tk-menu-item.is-selected .tk-menu-tick::before{content:"✓";color:var(--tk-control-on-ink)}
.gantt-usability-toolbar .tk-tool:is(.gantt-add-more,.gantt-outline-more){width:20px;margin-left:-4px}

/* Gantt's existing responsive metrics. These preserve its layout; grouping stays with the screen. */
.gantt-usability-toolbar .tk-tool{--tk-tool-min-w:50px;--tk-tool-pad:3px 2px}
.gantt-usability-toolbar .tk-tool:is(.gantt-add-more,.gantt-outline-more){--tk-tool-min-w:20px;--tk-tool-pad:3px 0}
.gantt-usability-toolbar .tk-tool.gantt-outline-more{margin-right:2px}
@media(min-width:1520px){.gantt-usability-toolbar .tk-tool{--tk-tool-pad:3px 7px}}
@media(max-width:1519px){body.takt-unified:has(.tk-views) .gantt-usability-toolbar .tk-tool{--tk-tool-min-w:0;--tk-tool-pad:3px 3px;--tk-tool-fs:11px}}
@media(max-width:1365px){body:not(.takt-unified) .gantt-usability-toolbar .tk-tool{--tk-tool-min-w:0;--tk-tool-pad:3px 3px;--tk-tool-fs:11px}}
@media(max-width:650px){.gantt-usability-toolbar .tk-tool{--tk-tool-min-w:44px}.gantt-usability-toolbar .tk-tool>span{font-size:10px}}

.tki-num>.tk-input:focus-visible{outline:none}

/* ================= Press and hover feel (BR-0130, Justin 2026-11-08 "Medium") =================
   The Portfolio lane's feel on every control: raised buttons lift a pixel with a soft shadow when pointed at; every button
   squeezes on press and springs back on release; icons in quiet buttons and tools lift; menu rows stay still and take a deeper
   tint on press, so lists never wobble. Uses the separate translate and scale properties, so no screen's own transform is
   replaced and layout never moves. Timing and size are the --tk-press-* / --tk-lift* / --tk-settle-dur tokens; reduced motion
   sets them to nothing. Screens still drawing some of their own button paint (UI §8 ceilings) are listed here so they share
   the same feel; as they migrate to tk- classes their names leave these lists. Switch: ui-parts.ts. Segments: glideSegments(). */
:is(.tk-btn,.tk-chip,.tk-link,.tk-tool,.tk-check,.tk-seg>button,.tk-seg>label>span,.takt-btn,button.primary,button.secondary,.tk-win-x,.tk-win-actions>button,.tk-win-nav-link,.tk-sb-icon,.tk-logo-ring,.tk-views a,.takt-quick-switch button,.takt-capture-switch button,.tp-options button,.tp-segment button,.tp-fab,.tp-tab,.tp-toast button,.takt-mat-blocks button,.takt-mat-nb button,.takt-unsaved-banner button,.takt-snapshot-draft>button,.takt-tp-days button,.takt-quick-undo button,.icon-button,.text-button,.notes-screen-btn,.notes-head-btn,.notes-text-btn,.tag-filter-button){transition-property:background-color,border-color,box-shadow,color,translate,scale,filter;transition-duration:var(--tk-dur-fast),var(--tk-dur-fast),var(--tk-settle-dur),var(--tk-dur-fast),var(--tk-settle-dur),var(--tk-settle-dur),var(--tk-dur-fast);transition-timing-function:var(--tk-ease),var(--tk-ease),var(--tk-ease),var(--tk-ease),var(--tk-ease-pop),var(--tk-ease-pop),var(--tk-ease)}
:is(.tk-btn,.tk-link,.tk-tool,.takt-btn,.tk-win-x,.tk-win-actions>button,.tk-sb-icon,.icon-button,.notes-head-btn,.notes-screen-btn)>:is(svg,.tk-i){transition:translate var(--tk-settle-dur) var(--tk-ease-pop)}
@media (hover:hover){
 :is(.tk-btn:not(.is-ghost,.is-icon,.tk-addlist-name),.tk-chip,.takt-btn:not(.ghost),button.primary,button.secondary):hover:not(:disabled,[aria-disabled=true],[aria-pressed=true],[aria-selected=true],[aria-checked=true],.is-selected,.is-on){translate:0 var(--tk-lift);box-shadow:var(--tk-lift-shadow)}
 :is(.tk-btn.is-ghost,.tk-btn.is-icon,.tk-link,.tk-tool,.takt-btn.ghost,.tk-win-x,.tk-win-actions>button,.tk-sb-icon,.icon-button,.notes-head-btn,.notes-screen-btn):hover:not(:disabled,[aria-disabled=true])>:is(svg,.tk-i){translate:0 var(--tk-lift)}
}
:is(.tk-btn,.tk-chip,.tk-link,.tk-check,.tk-seg>button,.tk-seg>label>span,.takt-btn,button.primary,button.secondary,.tk-win-x,.tk-win-actions>button,.tk-win-nav-link,.tk-sb-icon,.tk-logo-ring,.tk-views a,.takt-quick-switch button,.takt-capture-switch button,.tp-options button,.tp-segment button,.tp-fab,.tp-tab,.tp-toast button,.takt-mat-blocks button,.takt-mat-nb button,.takt-unsaved-banner button,.takt-snapshot-draft>button,.takt-tp-days button,.takt-quick-undo button,.icon-button,.text-button,.notes-screen-btn,.notes-head-btn,.notes-text-btn,.tag-filter-button):active:not(:disabled,[aria-disabled=true]){scale:var(--tk-press-scale);transition-duration:var(--tk-dur-fast),var(--tk-dur-fast),var(--tk-press-dur),var(--tk-dur-fast),var(--tk-press-dur),var(--tk-press-dur),var(--tk-dur-fast);transition-timing-function:var(--tk-ease)}
:is(.tk-btn:not(.is-ghost,.is-icon,.tk-addlist-name),.tk-chip,.takt-btn:not(.ghost),button.primary,button.secondary):active:not(:disabled,[aria-disabled=true]){translate:0 0;box-shadow:0 0 #0000}
.tk-tool:active:not(:disabled,[aria-disabled=true]){scale:calc(var(--tk-press-scale) - .05);transition-duration:var(--tk-dur-fast),var(--tk-dur-fast),var(--tk-press-dur),var(--tk-dur-fast),var(--tk-press-dur),var(--tk-press-dur),var(--tk-dur-fast);transition-timing-function:var(--tk-ease)}
.tk-check:active:not(:disabled){scale:calc(var(--tk-press-scale) - .06)}
:is(.tk-btn.is-primary,.takt-btn.primary,button.primary):active:not(:disabled,[aria-disabled=true]){filter:brightness(1.18)}
.tk-check:checked:focus::after{animation:tk-tick var(--tk-settle-dur) var(--tk-ease-pop)}
@keyframes tk-tick{from{scale:0}to{scale:1}}
:is(.tk-menu-item,.tk-sidenav-item,.tk-nav-item,:is(.tk-menu,.gantt-context,.gantt-columns-menu,.gantt-add-menu,.gantt-outline-menu,.gantt-more>div,.gantt-export>div,.gantt-show-menu>div,.gantt-label-menu,.takt-st-menu,.ppl-pick,.takt-tp-pop,.actions-menu,.action-row-menu)>:is(button,[role^=menuitem])):active:not(:disabled,[aria-disabled=true]){background-color:var(--tk-surface-3)!important;transition-duration:0s}
/* Segments: the white chip slides from the old pick to the new one (glideSegments() in ui-parts.ts sets the start). */
.tk-seg{isolation:isolate}
.tk-seg>.is-gliding,.tk-seg>label>.is-gliding{position:relative;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}
.tk-seg>.is-gliding::before,.tk-seg>label>.is-gliding::before{content:"";position:absolute;top:-1px;bottom:-1px;left:-1px;width:calc(100% + 2px);z-index:-1;box-sizing:border-box;border:1px solid var(--tk-control-on-line);border-radius:inherit;background:var(--tk-control-on-bg);box-shadow:var(--tk-control-on-shadow);animation:tk-glide var(--tk-settle-dur) var(--tk-ease-pop) both}
@keyframes tk-glide{from{translate:var(--tk-glide-dx,0) 0;width:var(--tk-glide-w,100%)}}