/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.tool-box.tb { position: relative; width: 100%; padding: 0; overflow: hidden; --tb-h: max(560px, calc(100vh - 210px)); --side: 228px; --pn: 360px;
  --st-todo: var(--mist); --st-doing: var(--sea); --st-wait: var(--coral); --st-hold: var(--dusk); --st-done: var(--seaglass); font-family: var(--sans); }
.tb-app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); height: var(--tb-h); }
html.tool-full .tool-page > .tool-box.tb { padding: 0; }
@media (min-width: 760px) { html.tool-full .tool-box.tb { display: flex; flex-direction: column; } html.tool-full .tb-app { flex: 1 1 auto; height: auto; min-height: 0; } }
.tb [hidden] { display: none !important; }
.tb button { font-family: var(--sans); }
.tb-mute { color: var(--mist); }
.tb-gap { flex: 1 1 auto; }
.tb-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--hair-2); border-radius: 6px; font: 500 11.5px/1 var(--mono); color: var(--mist); background: var(--abyss); }
.tb-side { min-height: 0; overflow-y: auto; padding: 18px 14px 20px; border-right: 1px solid var(--line); background: var(--trench); display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.tb-sl { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; color: var(--body); font: 400 14.5px/1.3 var(--sans); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.tb-sl span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sl small { flex: none; font: 500 12px/1 var(--mono); color: var(--mist); }
.tb-sl:hover { color: var(--sea); }
.tb-sl.is-on, .tb-sr.is-on .tb-sl { background: var(--tide); color: var(--foam); }
.tb-sl svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; }
.tb-sl-today { margin-bottom: 10px; }
.tb-sl-all span { color: var(--mist); }
.tb-sl-all.is-on span { color: var(--foam); }
.tb-sp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.tb-sp-h { display: flex; align-items: center; gap: 6px; padding: 6px 4px 4px 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.tb-sp-h span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sr { position: relative; display: flex; align-items: center; border-radius: 9px; }
.tb-sm { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--mist); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.tb-sm svg { width: 16px; height: 16px; fill: currentColor; }
.tb-sr .tb-sm { position: absolute; right: 4px; }
.tb-sr:hover .tb-sm, .tb-sp-h:hover .tb-sm, .tb-sm:focus-visible, .tb-sm[aria-expanded="true"] { opacity: 1; }
.tb-sr:hover .tb-sl small, .tb-sr:focus-within .tb-sl small { visibility: hidden; }
.tb-sm:hover { color: var(--sea); }
.tb-sr.is-over, .tb-sl-today.is-over { box-shadow: inset 0 0 0 1.5px var(--sea); background: rgba(98, 207, 224, .08); }
.tb-ren { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--sea); border-radius: 9px; background: var(--abyss); color: var(--foam); font: 400 14px/1 var(--sans); outline: none; }
.tb-sp-h .tb-ren { font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.tb-new { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border: 0; background: none; color: var(--sea); font: 400 14px/1.3 var(--sans); cursor: pointer; text-align: left; }
.tb-new svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tb-new:hover { color: var(--foam); }
.tb-tag[style]::before { content: ''; flex: none; width: 7px; height: 7px; margin-right: 1px; border-radius: 50%; background: var(--tc); }
.tb-tdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tc, transparent); box-shadow: inset 0 0 0 1.5px var(--tc, var(--hair-3)); }
.tb-sl-tag span { color: var(--body); }
.tb-sp-k { margin: 6px 10px 2px; font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-tag.is-inh button { margin-left: 2px; }
.tb-tag.is-gone { background: none; border: 1px dashed var(--line); color: var(--mist); text-decoration: line-through; }
.tb-tag.is-gone button { color: var(--sea); }
.tb-tag.is-gone button svg { width: 11px; height: 11px; stroke-width: 2; }
.tb-sr.is-on .tb-sl-tag span { color: var(--foam); }
.tb-tcard.is-out { border-style: dashed; background: var(--trench); }
.tb-tcard.is-out .tb-card-t, .tb-tcard.is-out .tb-card-f { opacity: .6; }
.tb-outtag { color: var(--mist); font-style: italic; }
.tb-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tb-top { display: flex; align-items: center; gap: 16px; padding: 14px 18px 10px; border-bottom: 1px solid var(--hair); }
.tb-tabs { flex: none; gap: 26px; }
.tb-tabs [role="tab"] { font-size: 15px; }
.tb-top .tb-scope { display: none; }
.tb-add { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); transition: border-color .15s; }
.tb-add:focus-within { border-color: var(--sea); }
.tb-add-p { flex: none; font: 400 18px/1 var(--sans); color: var(--mist); }
.tb-add-f { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.tb-add-f input, .tb-add-hl { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; font: 400 15px/40px var(--sans); letter-spacing: normal; white-space: pre; }
.tb-add-f input { background: transparent; color: transparent; caret-color: var(--foam); outline: none; z-index: 1; }
.tb-add-f input::placeholder { color: var(--mist); opacity: .8; }
.tb-add-f input::selection { background: rgba(98, 207, 224, .3); color: transparent; }
.tb-add-hl { overflow: hidden; color: var(--foam); pointer-events: none; }
.tb-add-hl mark { background: none; border-radius: 4px; }
.tb-q-due, .tb-q-tag { color: var(--sea); }
.tb-q-takes { color: var(--body); text-decoration: underline dotted var(--mist); text-underline-offset: 4px; }
.tb-q-p-urgent { color: var(--coral); } .tb-q-p-high { color: var(--amber); } .tb-q-p-normal { color: var(--harbor); } .tb-q-p-low { color: var(--mist); }
.tb-acts { flex: none; display: flex; gap: 8px; }
.tb-ib { position: relative; flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--hair-3); border-radius: 999px; background: transparent; color: var(--foam); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.tb-ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-ib:hover:not(:disabled) { border-color: var(--sea); color: var(--sea); }
.tb-ib[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.tb-ib:disabled { opacity: .35; cursor: default; }
.tb-file-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--seaglass); box-shadow: 0 0 0 2px var(--deep); }
.tb-file-dot.is-off { background: var(--amber); }
.tb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 18px; border-bottom: 1px solid var(--hair); }
.tb-find { flex: 0 1 320px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--abyss); }
.tb-find:focus-within { border-color: var(--sea); }
.tb-find svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--mist); stroke-width: 1.8; stroke-linecap: round; }
.tb-find input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--foam); font: 400 14px/1 var(--sans); outline: none; }
.tb-fb b { margin-left: 4px; color: var(--amber); font-weight: 600; }
.tb-clear { border: 0; background: none; color: var(--sea); font: 400 13.5px/1 var(--sans); cursor: pointer; }
.tb-focus, .tb-way { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--sea); border-radius: 999px; background: rgba(98, 207, 224, .07); font: 400 13.5px/1 var(--sans); color: var(--body); }
.tb-focus b, .tb-way b { color: var(--foam); font-weight: 500; }
.tb-focus > svg, .tb-way > svg { width: 16px; height: 16px; fill: none; stroke: var(--sea); stroke-width: 1.7; stroke-linecap: round; }
.tb-x { flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--mist); cursor: pointer; }
.tb-x:hover { color: var(--sea); background: var(--tide); }
.tb-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tb-body { flex: 1 1 auto; min-height: 0; display: flex; }
.tb-view { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 4px 18px 28px; outline: none; container-type: inline-size; scrollbar-width: thin; scrollbar-color: rgba(169, 188, 200, .3) transparent; }
.tb-panel { flex: none; width: var(--pn); min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--deep); scrollbar-width: thin; }
.tb-st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--mist)) 14%, var(--tide)); font: 500 12.5px/1 var(--sans); color: color-mix(in srgb, var(--c, var(--mist)) 70%, var(--foam)); white-space: nowrap; }
.tb-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mist)); }
.st-todo { --c: var(--st-todo); } .st-doing { --c: var(--st-doing); } .st-wait, .st-pending { --c: var(--st-wait); } .st-hold { --c: var(--st-hold); } .st-done { --c: var(--st-done); }
.tb-st.st-todo { background: var(--tide); color: var(--body); }
.tb-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mist)); }
.tb-flag { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--c); }
.tb-flag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-flag .f { fill: currentColor; }
.f-urgent { --c: var(--coral); } .f-high { --c: var(--amber); } .f-normal { --c: var(--harbor); } .f-low { --c: var(--mist); }
.tb-fl, .tb-stb, .tb-due, .tb-pb { display: inline-flex; align-items: center; gap: 8px; padding: 3px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.tb-fl:hover, .tb-stb:hover, .tb-due:hover, .tb-pb:hover { background: var(--tide); }
.tb-due { font: 500 13px/1 var(--mono); color: var(--foam); white-space: nowrap; padding: 5px 6px; }
.tb-due.is-today { color: var(--amber); }
.tb-due.is-late { color: var(--coral); }
.tb-ln { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font: 500 12px/1 var(--mono); color: var(--mist); white-space: nowrap; }
.tb-ln.is-bl { border-color: color-mix(in srgb, var(--coral) 55%, transparent); color: var(--coral); }
.tb-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--tide); font: 400 12px/1 var(--sans); color: var(--mist); white-space: nowrap; }
.tb-inh, .tb-from { font: 400 12px/1.3 var(--sans); color: var(--dusk); }
.tb-where { margin-right: 8px; font: 400 12px/1 var(--sans); color: var(--mist); }
.tb-prog { display: inline-flex; align-items: center; gap: 7px; }
.tb-prog i { position: relative; width: 44px; height: 4px; border-radius: 4px; background: var(--tide); overflow: hidden; }
.tb-prog i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 4px; background: var(--seaglass); }
.tb-prog small { font: 500 12px/1 var(--mono); color: var(--mist); }
.tb-blk { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--coral) 55%, transparent); border-radius: 6px; font: 500 12px/1 var(--mono); color: var(--coral); white-space: nowrap; }
.tb-sun { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 5px; border: 0; border-radius: 8px; background: none; color: var(--mist); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.tb-sun svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tb-sun b { font: 600 12px/1 var(--mono); }
.tb-sun.is-on { color: var(--amber); opacity: 1; }
.tb-row:hover .tb-sun, .tb-card:hover .tb-sun, .tb-sun:focus-visible, .tb-row.is-sel .tb-sun, .tb-card.is-sel .tb-sun { opacity: 1; }
.tb-sun:hover { color: var(--amber); }
.tb-sun-h { display: inline-grid; place-items: center; width: 28px; color: var(--mist); }
.tb-sun-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tb-ck { flex: none; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1.6px solid var(--hair-3); border-radius: 50%; background: none; color: transparent; cursor: pointer; transition: border-color .15s, background-color .15s; }
.tb-ck svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-ck:hover { border-color: var(--seaglass); color: var(--seaglass); }
.tb-ck.is-done { border-color: var(--seaglass); background: var(--seaglass); color: var(--abyss); }
.tb-list { min-width: 640px; }
.tb-lh, .tb-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 132px 92px 132px; align-items: center; column-gap: 8px; }
.tb-lh { position: sticky; top: 0; z-index: 2; height: 40px; background: var(--deep); border-bottom: 1px solid var(--hair); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-sh { padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tb-sh:hover, .tb-sh.is-on { color: var(--foam); }
.tb-sh i { margin-left: 4px; font-style: normal; color: var(--amber); }
.tb-g { margin-top: 6px; }
.tb-gh { display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px 26px; border: 0; background: none; color: var(--mist); cursor: pointer; }
.tb-gh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .15s; }
.tb-gh[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tb-gh small { font: 500 12px/1 var(--mono); }
.tb-row { position: relative; min-height: 44px; border-bottom: 1px solid var(--hair); border-radius: 0; transition: background-color .12s; }
.tb-row:hover { background: rgba(18, 41, 58, .55); }
.tb-row.is-sel { background: var(--tide); box-shadow: inset 2px 0 0 var(--foam); }
.tb-row.is-dim { opacity: .55; }
.tb-c-sun { display: flex; justify-content: center; }
.tb-c-tt { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding-left: calc(var(--d, 0) * 26px); }
.tb-c-tt > .tb-tt { flex: 0 1 auto; min-width: 72px; }
.tb-c-tt > .tb-tag, .tb-c-tt > .tb-inh { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-ind { flex: none; width: 20px; display: grid; place-items: center; }
.tb-fold { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--mist); cursor: pointer; }
.tb-fold svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .15s; }
.tb-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tb-tt { min-width: 0; display: inline-flex; align-items: baseline; gap: 0; padding: 6px 2px; border: 0; background: none; color: var(--foam); font: 400 15px/1.35 var(--sans); text-align: left; cursor: pointer; }
.tb-tt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tt:hover .tb-tt-t { color: var(--sea); }
.tb-row.is-done .tb-tt-t, .tb-card.is-done .tb-tt-t, .tb-trow.is-done .tb-tt-t { color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(169, 188, 200, .6); }
.tb-c-ln { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-row.is-over.is-into { box-shadow: inset 0 0 0 1.5px var(--sea); background: rgba(98, 207, 224, .06); }
.tb-row.is-over.is-before::before, .tb-row.is-over.is-after::after, .tb-trow.is-over.is-before::before, .tb-trow.is-over.is-after::after { content: ""; position: absolute; left: 40px; right: 0; height: 3px; border-radius: 3px; background: var(--sea); z-index: 3; }
.tb-row.is-over.is-before::before, .tb-trow.is-over.is-before::before { top: -2px; }
.tb-row.is-over.is-after::after, .tb-trow.is-over.is-after::after { bottom: -2px; }
.is-lifted { opacity: .35; }
.tb-empty { max-width: 460px; margin: 48px auto; text-align: center; font: 400 15px/1.55 var(--sans); color: var(--mist); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tb-empty-h { font: 300 26px/1.2 var(--serif); color: var(--foam); }
.tb-empty b { color: var(--foam); font-weight: 500; }
@container (max-width: 860px) {
  .tb-lh, .tb-row { grid-template-columns: 44px minmax(0, 1fr) 116px 76px; }
  .tb-lh .tb-c-ln, .tb-row .tb-c-ln { display: none; }
  .tb-list { min-width: 520px; }
}
.tb-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; align-items: start; padding-top: 14px; min-width: 1042px; }
.tb-col { min-width: 250px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--trench); transition: border-color .15s, background-color .15s; }
.tb-col.is-over { border-color: var(--sea); background: rgba(98, 207, 224, .04); }
.tb-col.has-need { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.tb-col.is-folded { min-width: 64px; width: 64px; }
.tb-board:has(.tb-col.is-folded) { grid-template-columns: repeat(2, minmax(250px, 1fr)) 64px minmax(250px, 1fr); }
.tb-col-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; }
.tb-col-h small { font: 500 12px/1 var(--mono); color: var(--mist); }
.tb-col-fold { width: 28px; height: 28px; margin-left: auto; border-color: transparent; }
.tb-col-fold svg { width: 15px; height: 15px; transition: transform .15s; }
.tb-col-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tb-col.is-folded .tb-col-h { flex-direction: column; align-items: center; gap: 12px; }
.tb-col.is-folded .tb-col-h .tb-st { writing-mode: vertical-rl; height: auto; padding: 10px 4px; }
.tb-col.is-folded .tb-col-fold { margin: 0; order: -1; }
.tb-col-b { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.tb-col-empty { margin: 4px 4px 2px; font: 400 13px/1.4 var(--sans); color: var(--mist); }
.tb-grp { margin: 10px 4px -2px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-grp.is-need { color: var(--amber); }
.tb-card { position: relative; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); font: 400 13.5px/1.4 var(--sans); color: var(--body); cursor: grab; transition: border-color .15s, box-shadow .15s; }
.tb-card:hover { border-color: var(--hair-3); }
.tb-card.is-sel { border-color: var(--foam); }
.tb-card.is-blocked { border-color: color-mix(in srgb, var(--coral) 60%, var(--line)); }
.tb-card.is-need { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent); }
.tb-card-in { margin: 0 0 4px; font: 400 12px/1.3 var(--sans); color: var(--mist); display: flex; flex-wrap: wrap; gap: 0 10px; }
.tb-card-t { display: flex; align-items: center; gap: 6px; margin-left: -4px; }
.tb-card-t .tb-sun { order: 3; margin-left: auto; height: 24px; }
.tb-card-t .tb-tt { flex: 1 1 auto; padding: 2px 0; }
.tb-card-t .tb-tt-t { white-space: normal; }
.tb-card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tb-card-f .tb-due { padding: 0; }
.tb-card-f:empty { display: none; }
.tb-kind { display: inline-flex; margin-top: 8px; padding: 1px 9px; border-radius: 99px; font: 500 12px/1.6 var(--sans); }
.tb-kind.k-pending { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); }
.tb-kind.k-hold { background: color-mix(in srgb, var(--dusk) 18%, transparent); color: var(--dusk); }
.tb-cond { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.tb-cond > span { min-width: 0; }
.tb-bx { flex: none; width: 18px; height: 18px; padding: 0; border: 1.8px solid var(--coral); border-radius: 5px; background: none; cursor: pointer; transition: background-color .15s; }
.tb-cond.k-hold .tb-bx, .tb-bx.k-hold { border-color: var(--dusk); }
.tb-bx:hover:not(:disabled) { background: color-mix(in srgb, var(--seaglass) 30%, transparent); border-color: var(--seaglass); }
.tb-bx.is-auto { border-style: dotted; opacity: .7; cursor: default; }
.tb-cond-k { display: block; margin-bottom: 3px; white-space: nowrap; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.tb-cond-v { color: var(--foam); }
.tb-cond small { margin-left: auto; flex: none; max-width: 40%; font: 500 12px/1.3 var(--mono); color: var(--mist); text-align: right; }
.tb-why { margin: 8px 0 0; font: 400 12.5px/1.45 var(--sans); color: var(--mist); }
.tb-why b { color: var(--body); font-weight: 500; }
.tb-why.is-hold { color: var(--dusk); }
.tb-why button { padding: 0; border: 0; background: none; color: var(--foam); font: inherit; text-decoration: underline; text-decoration-color: var(--hair-3); cursor: pointer; }
.tb-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font: 500 13px/1.4 var(--sans); color: var(--amber); }
.tb-nudge span { flex: 1 1 100%; }
.tb-nudge .pill-sm { height: 28px; padding: 0 12px; }
.tb-today { max-width: 860px; padding-top: 18px; }
.tb-th h2 { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 300 38px/1.1 var(--serif); color: var(--foam); }
.tb-th h2 svg { width: 30px; height: 30px; align-self: center; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; }
.tb-th h2 small { font: 400 20px/1.2 var(--serif); color: var(--body); }
.tb-th p { margin: 6px 0 18px; font: 400 14px/1.4 var(--sans); color: var(--mist); }
.tb-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; font: 400 14px/1.4 var(--sans); color: var(--body); }
.tb-left span { flex: 1 1 260px; }
.pill-sm.is-sea { border-color: var(--sea); color: var(--sea); }
.tb-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-trow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); transition: border-color .15s; }
.tb-trow:hover { border-color: var(--hair-3); }
.tb-trow.is-sel { border-color: var(--foam); }
.tb-trow.is-done { opacity: .6; }
.tb-grip { flex: none; width: 26px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--mist); cursor: grab; touch-action: none; }
.tb-grip svg { width: 16px; height: 16px; fill: currentColor; }
.tb-tn { flex: none; min-width: 16px; font: 600 14px/1 var(--mono); color: var(--foam); text-align: right; }
.tb-trow .tb-tt { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 3px; }
.tb-trow .tb-tt small { font: 400 12.5px/1.3 var(--sans); color: var(--mist); }
.tb-tk { flex: none; font: 500 13px/1 var(--mono); color: var(--foam); }
.tb-trow .tb-x { opacity: 0; }
.tb-trow:hover .tb-x, .tb-trow .tb-x:focus-visible { opacity: 1; }
.tb-cant { flex: none; max-width: 40%; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 999px; background: none; color: var(--amber); font: 400 12.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
.tb-cant:hover { border-color: var(--sea); color: var(--sea); }
.tb-pick { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 2px; border: 0; background: none; color: var(--sea); font: 400 14px/1.4 var(--sans); cursor: pointer; }
.tb-pick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tb-pick:hover { color: var(--foam); }
.tb-empty.is-today { margin: 20px 0; align-items: flex-start; text-align: left; }
.tb-tline { padding-top: 12px; }
.tb-tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 36px; }
.tb-tl-bar > .tb-mute { font: 400 13.5px/1.4 var(--sans); }
.tb-tl-k { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.tb-tl-show { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tb-tl-show button { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tb-banner { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 6%, var(--deep)); font: 400 14px/1.45 var(--sans); color: var(--body); }
.tb-banner b { color: var(--foam); font-weight: 500; }
.tb-banner svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; }
.tb-banner.is-bad { border-color: color-mix(in srgb, var(--coral) 55%, var(--line)); background: color-mix(in srgb, var(--coral) 6%, var(--deep)); }
.tb-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 4px; font: 400 12.5px/1.3 var(--sans); color: var(--mist); }
.tb-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tb-legend span::before { content: ""; width: 22px; height: 0; border-top: 2px solid var(--hair-3); }
.tb-legend .lg-w::before { border-top: 2px dashed var(--coral); }
.tb-legend .lg-nb::before { width: 9px; height: 9px; border: 1.5px solid var(--amber); border-radius: 50%; }
.tb-legend .lg-c::before { border-top-color: var(--amber); }
.tb-legend .lg-busy::before { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--dusk); }
.tb-lane { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.tb-lane-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.tb-lane-h h3 { margin: 0; font: 300 28px/1.15 var(--serif); color: var(--foam); }
.tb-lane-h small { font: 400 13px/1.3 var(--sans); color: var(--mist); }
.tb-lane-h .tb-ib { align-self: center; width: 30px; height: 30px; }
.tb-lane-h .tb-ib svg { width: 16px; height: 16px; }
.tb-lane-s { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tb-lane-in { position: relative; }
.tb-axis { display: block; overflow: visible; }
.tb-axis .ax-l { stroke: var(--hair-3); stroke-width: 1.5; fill: none; }
.tb-axis .ax-c { stroke: var(--amber); stroke-width: 2.5; fill: none; opacity: .85; }
.tb-axis .ax-a { stroke: var(--hair-3); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tb-axis .ax-t { stroke: var(--hair-2); stroke-width: 1; }
.tb-axis .ax-t.is-mon { stroke: var(--foam); stroke-width: 1.2; }
.tb-axis text { font: 500 11px var(--mono); fill: var(--mist); text-anchor: middle; }
.tb-axis .ax-d.is-mon { fill: var(--foam); }
.tb-axis .ax-m { font: 600 10.5px var(--sans); letter-spacing: .14em; fill: var(--foam); text-anchor: start; }
.tb-axis .ax-today { stroke: var(--sea); stroke-width: 2; }
.tb-axis .ax-tt { font: 600 10px var(--sans); letter-spacing: .12em; fill: var(--sea); text-anchor: start; }
.tb-axis .ax-nb { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 2 3; }
.tb-axis .ax-nbt { font: 600 10px var(--sans); letter-spacing: .1em; fill: var(--amber); text-anchor: start; }
.tb-axis .ax-r { fill: var(--deep); stroke: var(--foam); stroke-width: 1.8; }
.tb-axis .ax-r.is-crit { stroke: var(--amber); }
.tb-axis .ax-busy { fill: var(--dusk); }
.tb-steps { display: grid; grid-template-columns: repeat(var(--k), 236px); column-gap: 64px; align-items: start; }
.tb-step { position: relative; z-index: 1; }
.tb-step-h { margin: 6px 0 0; font: 300 34px/1 var(--serif); color: var(--foam); }
.tb-step-s { margin: 4px 0 14px; font: 400 12.5px/1.3 var(--sans); color: var(--mist); }
.tb-step-b { display: flex; flex-direction: column; gap: 16px; }
.tb-tcard, .tb-wcard { position: relative; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); font: 400 13px/1.4 var(--sans); color: var(--body); }
.tb-tcard.is-crit { border-color: color-mix(in srgb, var(--amber) 75%, var(--line)); }
.tb-tcard.is-target { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(98, 207, 224, .14); }
.tb-tcard.is-sel { border-color: var(--foam); }
.tb-tcard.is-dim { opacity: .5; }
.tb-tcard .tb-card-t { margin-left: 0; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.tb-tcard .tb-card-t .tb-tt-t { white-space: normal; }
.tb-tsub { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tb-tsub li { display: flex; align-items: center; gap: 8px; color: var(--body); }
.tb-mini-ck { flex: none; width: 12px; height: 12px; border: 1.4px solid var(--hair-3); border-radius: 50%; }
.tb-tsub li.is-done .tb-mini-ck { border-color: var(--seaglass); background: var(--seaglass); }
.tb-tsub li.is-done { color: var(--mist); }
.tb-tsub .tb-more { color: var(--mist); font-size: 12px; }
.tb-dates { font: 500 12px/1 var(--mono); color: var(--foam); }
.tb-nb { margin: 6px 0 0; font: 500 12.5px/1.35 var(--sans); color: var(--amber); }
.tb-hold { margin: 6px 0 0; font: 500 12.5px/1.35 var(--sans); color: var(--dusk); }
.tb-wcard { border: 1px dashed color-mix(in srgb, var(--coral) 70%, transparent); background: color-mix(in srgb, var(--coral) 4%, var(--trench)); }
.tb-wcard-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 14px/1.35 var(--sans); color: var(--foam); }
.tb-wcard-h svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; }
.tb-wcard-s { margin: 6px 0 10px; font: 400 12.5px/1.4 var(--sans); color: var(--mist); }
.tb-wcard .pill-sm { height: 28px; border-color: var(--sea); color: var(--sea); }
.tb-edges { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tb-edges .ed { fill: none; stroke: var(--hair-3); stroke-width: 1.6; }
.tb-edges .ed.is-crit { stroke: var(--amber); stroke-width: 2; }
.tb-edges .ed.is-wait { stroke: var(--coral); stroke-dasharray: 4 4; }
.tb-edges .ar { fill: var(--hair-3); } .tb-edges .ar-c { fill: var(--amber); } .tb-edges .ar-w { fill: var(--coral); }
.tb-loose { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tb-pn { padding: 16px 20px 28px; font: 400 14px/1.5 var(--sans); color: var(--body); }
.tb-pn-top { display: flex; align-items: center; gap: 6px; }
.tb-pn-top .tb-ib { width: 30px; height: 30px; border-color: transparent; }
.tb-pn-top .tb-ib svg { width: 16px; height: 16px; }
.tb-pn-top .tb-ib:hover { border-color: var(--sea); }
.tb-pn-close { order: 9; }
.tb-pn-where { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 13px/1.3 var(--sans); color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pn-in { margin: 8px 0 0; font: 400 13px/1.4 var(--sans); color: var(--mist); }
.tb-pn-in button { padding: 0; border: 0; background: none; color: var(--body); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-3); text-underline-offset: 3px; }
.tb-pn-in button:hover { color: var(--sea); }
.tb-pn-title { display: block; width: 100%; margin: 8px 0 6px; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--foam); font: 300 27px/1.2 var(--serif); resize: none; overflow: hidden; outline: none; }
.tb-pn-title:hover { border-color: var(--line); }
.tb-pn-title:focus { border-color: var(--sea); background: var(--abyss); }
.tb-pf { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 0; }
.tb-pf dt, .tb-pf dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--hair); }
.tb-pf dt { font: 600 10.5px/24px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-pf dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; color: var(--foam); }
.tb-pf input[type="date"], .tb-takes { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--abyss); color: var(--foam); font: 500 13px/1 var(--mono); color-scheme: dark; outline: none; }
.tb-takes { width: 120px; }
.tb-pf input:focus { border-color: var(--sea); }
.tb-pb span { font: 400 14px/1 var(--sans); }
.tb-add-l { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; background: none; color: var(--sea); font: 400 13px/1.3 var(--sans); cursor: pointer; }
.tb-add-l svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-add-l:hover { color: var(--foam); }
.tb-warn { flex: 1 1 100%; font: 400 12px/1.3 var(--sans); color: var(--amber); }
.tb-tags .tb-tag { height: 24px; color: var(--body); }
.tb-tag button { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--mist); cursor: pointer; }
.tb-tag button svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tb-tag button:hover { color: var(--coral); }
.tb-tag.is-inh { background: none; border: 1px dashed var(--line); }
.tb-tag.is-inh small { color: var(--dusk); font-size: 11px; }
.tb-tag-in { width: 90px; height: 24px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--foam); font: 400 13px/1 var(--sans); outline: none; }
.tb-tag-in:focus { background: var(--abyss); box-shadow: 0 0 0 1px var(--sea); }
.tb-sun-on { display: inline-flex; align-items: center; gap: 6px; color: var(--foam); }
.tb-sun-on svg, .tb-add-l svg[viewBox] { width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; }
.tb-ps { margin-top: 18px; }
.tb-ps h3, .tb-hd summary h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-ps h3 small { font: 500 11.5px/1 var(--mono); letter-spacing: 0; }
.tb-ps h3 .tb-add-l { margin-left: auto; letter-spacing: 0; text-transform: none; }
.tb-ps-none { margin: 0; font-size: 13px; }
.tb-pwait { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--trench); }
.tb-pwait .tb-kind { margin-top: 0; }
.tb-subs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; }
.tb-subs li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.tb-sub-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--foam); font: 400 14px/1.35 var(--sans); text-align: left; cursor: pointer; }
.tb-sub-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sub-t small { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--mist); }
.tb-sub-t:hover span { color: var(--sea); }
.tb-sub-t.is-done span { color: var(--mist); text-decoration: line-through; }
.tb-sub-in, .tb-notes-in { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--abyss); color: var(--foam); font: 400 14px/1.5 var(--sans); outline: none; }
.tb-sub-in:focus, .tb-notes-in:focus { border-color: var(--sea); }
.tb-notes-in { resize: none; min-height: 64px; overflow: hidden; }
.tb-hint { margin: 6px 0 0; font: 400 12px/1.45 var(--sans); color: var(--mist); }
.tb-lk { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); }
.tb-lk-k { font: 600 10.5px/28px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.tb-lk > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-tc { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 4px 0 0; border: 1px solid var(--line); border-radius: 999px; background: var(--abyss); }
.tb-tc > button:first-child { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 6px 4px 10px; border: 0; background: none; color: var(--foam); font: 400 13px/1.3 var(--sans); cursor: pointer; text-align: left; }
.tb-tc > button:first-child:hover { color: var(--sea); }
.tb-tc.is-done > button:first-child { color: var(--mist); text-decoration: line-through; }
.tb-tc .tb-from { padding-right: 6px; }
.tb-tc-x { width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mist); cursor: pointer; }
.tb-tc-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tb-tc-x:hover { color: var(--coral); }
.tb-notes { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); color: var(--body); cursor: text; overflow-wrap: anywhere; }
.tb-notes p, .tb-notes ul, .tb-notes ol, .tb-notes pre, .tb-notes blockquote { margin: 0 0 8px; }
.tb-notes > :last-child { margin-bottom: 0; }
.tb-notes ul, .tb-notes ol { padding-left: 20px; }
.tb-notes code { padding: 1px 5px; border-radius: 5px; background: var(--tide); font: 400 12.5px/1.4 var(--mono); }
.tb-notes pre { padding: 8px 10px; border-radius: 8px; background: var(--trench); overflow-x: auto; }
.tb-notes pre code { padding: 0; background: none; }
.tb-notes blockquote { padding-left: 10px; border-left: 2px solid var(--line); color: var(--mist); }
.tb-notes .tb-nh { color: var(--foam); font-weight: 600; }
.tb-lrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--deep); color: var(--foam); font: 400 13.5px/1.3 var(--sans); }
.tb-lrow i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--tide); font: 600 11px/1 var(--sans); font-style: normal; color: var(--sea); }
.tb-lrow span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-lrow small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1 var(--sans); color: var(--mist); }
.tb-lrow:hover { border-color: var(--sea); color: var(--sea); }
.tb-hd summary { list-style: none; cursor: pointer; }
.tb-hd summary::-webkit-details-marker { display: none; }
.tb-hd summary h3::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.tb-hd[open] summary h3::after { transform: rotate(45deg); }
.tb-hist { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; }
.tb-hist li { position: relative; display: flex; gap: 10px; padding: 0 0 12px 22px; font: 400 13px/1.45 var(--sans); color: var(--body); }
.tb-hist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--mist)); }
.tb-hist li::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: 0; width: 1px; background: var(--line); }
.tb-hist li:last-child::after { display: none; }
.tb-hist time { flex: none; min-width: 52px; font: 500 12px/1.6 var(--mono); color: var(--mist); }
.tb-hist b { color: var(--foam); font-weight: 500; }
.tb-menu { position: absolute; z-index: 40; min-width: 200px; max-width: 320px; max-height: min(420px, 70vh); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.tb-menu button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--foam); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
.tb-menu button > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-menu button small { flex: none; max-width: 55%; font: 400 12px/1.3 var(--sans); color: var(--mist); text-align: right; }
.tb-menu button:hover:not(:disabled), .tb-menu button:focus-visible { background: var(--tide); color: var(--sea); outline: none; }
.tb-menu button:disabled { opacity: .5; cursor: default; }
.tb-menu button[aria-checked="true"]::after { content: ""; flex: none; width: 10px; height: 6px; margin-left: 4px; border-left: 2px solid var(--foam); border-bottom: 2px solid var(--foam); transform: rotate(-45deg) translateY(-2px); }
.tb-menu button > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--mist); }
.tb-menu button.is-bad { color: var(--coral); }
.tb-menu button.is-warn small { color: var(--amber); }
.tb-menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--hair); }
.tb-menu-h { margin: 8px 10px 4px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tb-menu.is-file { min-width: 280px; }
.tb-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(4, 11, 17, .72); }
.tb-dlg { width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--deep); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 14px; font-family: var(--sans); }
.tb-dlg.is-wide { width: min(600px, 100%); }
.tb-dlg-h { display: flex; align-items: flex-start; gap: 12px; }
.tb-dlg-h h2 { flex: 1 1 auto; margin: 0; font: 400 25px/1.2 var(--serif); color: var(--foam); overflow-wrap: anywhere; }
.tb-dlg-p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--body); }
.tb-dlg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb-dlg-f .pill-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.tb-go { min-height: 40px; height: 40px; padding: 0 20px; font-size: 14px; }
.tb-go.is-bad { background: var(--coral); border-color: var(--coral); }
.tb-go:disabled { opacity: .4; cursor: default; }
.tb-wd { display: flex; flex-direction: column; gap: 10px; }
.tb-wd-kind button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 16px; }
.tb-wd-kind button small { font: 400 11.5px/1 var(--sans); opacity: .8; }
.tb-wd-l { margin: 6px 0 0; font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-wd-rs { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-wr { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--abyss); color: var(--body); font: 400 13.5px/1 var(--sans); cursor: pointer; }
.tb-wr:hover { border-color: var(--sea); color: var(--sea); }
.tb-wr[aria-pressed="true"] { border-color: var(--foam); background: var(--foam); color: var(--abyss); }
.tb-wr.is-own { border-style: dashed; color: var(--sea); }
.tb-wr.is-own[aria-pressed="true"] { border-style: solid; color: var(--abyss); }
.tb-wd-f { display: flex; flex-direction: column; gap: 6px; }
.tb-wd-f > span:first-child { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tb-wd-f input, .tb-pk input { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--abyss); color: var(--foam); font: 400 14px/1 var(--sans); color-scheme: dark; outline: none; }
.tb-wd-f input:focus, .tb-pk input:focus { border-color: var(--sea); }
.tb-wd-f input[type="date"] { width: 200px; font-family: var(--mono); font-size: 13.5px; }
.tb-wd-ckr { display: flex; align-items: center; gap: 10px; }
.tb-wd-ckr input { flex: 1 1 auto; }
.tb-wd-ckr .tb-bx { cursor: default; }
.tb-wd-ck small { font: 400 12px/1 var(--sans); color: var(--mist); }
.tb-wd-pick { display: flex; align-items: center; gap: 8px; margin: 0; }
.tb-pk { display: flex; flex-direction: column; gap: 8px; }
.tb-pk-seg { align-self: flex-start; }
.tb-pk-l { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.tb-pk-l li + li { border-top: 1px solid var(--hair); }
.tb-pk-l li.tb-mute { padding: 12px; font: 400 13.5px/1.4 var(--sans); }
.tb-pk-l button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 0; background: none; color: var(--foam); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
.tb-pk-l button span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pk-l button small { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 var(--sans); color: var(--mist); }
.tb-pk-l button:hover, .tb-pk-l button:focus-visible { background: var(--tide); color: var(--sea); outline: none; }
.tb-toast { position: absolute; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px)); margin: 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--tide); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font: 400 14px/1.45 var(--sans); color: var(--foam); pointer-events: none; }
.tb-toast.is-bad { border-color: var(--coral); }
.tb-ghost { position: absolute; left: 0; top: 0; z-index: 80; pointer-events: none; }
.tb-gh-in { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--sea); border-radius: 12px; background: var(--deep); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); font: 400 14px/1.35 var(--sans); color: var(--foam); }
.tb-gh-in span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb.is-dragging, .tb.is-dragging * { cursor: grabbing !important; user-select: none; }
@media (max-width: 1180px) {
  .tb.has-panel .tb-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; box-shadow: -18px 0 40px rgba(0, 0, 0, .45); }
}
@media (max-width: 759px) {
  .tool-box.tb { --tb-h: calc(100svh - var(--nav-h) - 24px); border-radius: 12px; }
  .tb-app { grid-template-columns: minmax(0, 1fr); }
  .tb-side { position: absolute; top: 0; left: 0; bottom: 0; z-index: 35; width: min(300px, 86%); transform: translateX(-102%); transition: transform .2s; box-shadow: 18px 0 40px rgba(0, 0, 0, .5); }
  .tb.is-side .tb-side { transform: none; }
  .tb-top { flex-wrap: wrap; gap: 10px; padding: 10px 12px 8px; }
  .tb-top .tb-scope { display: inline-flex; width: auto; max-width: calc(100% - 140px); gap: 8px; padding: 0 12px 0 9px; border-radius: 999px; }
  .tb-scope span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1 var(--sans); }
  .tb-acts { margin-left: auto; }
  .tb-tabs { order: 3; flex: 1 1 100%; gap: 22px; }
  .tb-add { order: 4; flex: 1 1 100%; height: 40px; }
  .tb-key { display: none; }
  .tb-view { padding: 4px 12px 24px; }
  .tb-panel { position: absolute; inset: 0; z-index: 30; width: auto; border-left: 0; }
  .tb-list { min-width: 0; }
  .tb-lh { display: none; }
  .tb-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "sun tt due" ". st ln"; row-gap: 0; padding: 6px 0; }
  .tb-c-sun { grid-area: sun; } .tb-c-tt { grid-area: tt; padding-left: calc(var(--d, 0) * 16px); } .tb-c-due { grid-area: due; } .tb-c-st { grid-area: st; padding-left: calc(var(--d, 0) * 16px + 28px); } .tb-c-ln { grid-area: ln; justify-content: flex-end; }
  .tb-c-st:empty, .tb-c-ln:empty { display: none; }
  .tb-sun { opacity: 1; }
  .tb-c-tt > .tb-tag, .tb-c-tt > .tb-prog { display: none; }
  .tb-row .tb-tt { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tb-row .tb-where { margin: 0; font-size: 11.5px; }
  .tb-row .tb-tt-t { max-width: 100%; }
  .tb-board { grid-template-columns: repeat(4, calc(100vw - 72px)); scroll-snap-type: x mandatory; min-width: 0; }
  .tb-view[data-v="board"] { scroll-snap-type: x mandatory; }
  .tb-col { scroll-snap-align: start; min-width: 0; }
  .tb-board:has(.tb-col.is-folded) { grid-template-columns: repeat(2, calc(100vw - 72px)) 64px calc(100vw - 72px); }
  .tb-card { cursor: default; }
  .tb-th h2 { font-size: 30px; flex-wrap: wrap; row-gap: 2px; }
  .tb-trow { flex-wrap: wrap; gap: 8px 10px; }
  .tb-trow .tb-tt { flex: 1 1 calc(100% - 140px); }
  .tb-cant { max-width: none; order: 9; margin-left: 66px; }
  .tb-trow .tb-x { opacity: 1; }
  .tb-toast { bottom: 12px; }
  .tb-dlg { padding: 18px 16px; }
  .tb-pf { grid-template-columns: 84px minmax(0, 1fr); }
}