/*
 * «Задачи» — Список and Доска (design_handoff_tasks_views).
 *
 * COLOURS ARE BORROWED, NOT ADDED (§7). The status and level palette maps onto
 * Filament's own registered colours — `--info-*`, `--warning-*`, `--success-*`,
 * `--gray-*`, injected at runtime by the panel — and the neutrals and the one
 * red onto the project's `--ia-*` tokens from ia.css. So a theme change moves
 * this screen with the rest of the panel, and «late» is the same red here as
 * on «Сегодня». The hex after each `var()` is the handoff's own value, used
 * only if a variable is ever missing.
 *
 * WIDTH IS MEASURED ON THE CONTAINER, NEVER THE VIEWPORT. `.tk` is an inline-
 * size container and every breakpoint below is a container query. The handoff
 * gives its phone rule as «< 640px of CONTENT», and on this panel content and
 * viewport disagree: the sidebar appears at `lg`, so a 1024px window gives the
 * page 640px while a 768px window gives it 720px. A media query keyed on the
 * viewport would fire exactly where the room had just shrunk — measured on
 * this same resource's table on 2026-09-24.
 */

.tk { container: tk / inline-size; }

/* The task page (.tp-root) speaks the same tokens as the list and the board.
   `.tp-confirm` is the delete dialog, teleported to <body> — outside
   .tp-root, so it needs the tokens of its own. */
.tk,
.tp-root,
.tp-confirm {
    --tk-card: var(--ia-surface, #fff);
    --tk-well: #efefed;
    --tk-line: var(--ia-line, rgba(17, 17, 17, 0.08));
    --tk-line2: #f0f0ef;
    --tk-ink: var(--ia-ink, #1f1f1f);
    --tk-ink2: #374151;
    --tk-mute: var(--ia-ink-soft, #6b7280);
    --tk-faint: #a3a3a3;
    --tk-hover: #fafaf9;
    --tk-head: #fafafa;
    --tk-input: #fff;
    --tk-input-line: #d4d4d4;
    --tk-sel: #fff7ed;
    --tk-danger: var(--ia-danger, #dc2626);
    /* The red INK, for a word rather than a fill — «Критическая» (T.c.red[1]). */
    --tk-danger-ink: var(--danger-800, #991b1b);
    --tk-danger-bg: color-mix(in oklab, var(--tk-danger) 9%, transparent);
    --tk-amber-ink: var(--warning-800, #92400e);
    /* Inline editing (design_handoff_task_inline_edit §8): the accent that
       marks an open editor, its 3px ring, and the text on a filled accent. */
    --tk-accent: #f59e0b;
    --tk-accent-ink: #1a1206;
    --tk-ring: rgba(245, 158, 11, 0.25);

    /* [bg, ink, solid] per tone — TaskStatus/Priority/Severity::color(). */
    --tk-info-bg: var(--info-100, #dbeafe);
    --tk-info-ink: var(--info-800, #1e40af);
    --tk-info-solid: var(--info-500, #3b82f6);
    --tk-warning-bg: var(--warning-100, #fef3c7);
    --tk-warning-ink: var(--warning-800, #92400e);
    --tk-warning-solid: var(--warning-500, #f59e0b);
    --tk-success-bg: var(--success-100, #dcfce7);
    --tk-success-ink: var(--success-800, #166534);
    --tk-success-solid: var(--success-600, #16a34a);
    --tk-gray-bg: var(--gray-100, #f3f4f6);
    --tk-gray-ink: var(--gray-700, #374151);
    --tk-gray-solid: var(--gray-400, #9ca3af);
    /* The red TINT behind a «Критическая» badge (T.c.red[0]). */
    --tk-danger-tint: var(--danger-100, #fee2e2);

    font-variant-numeric: tabular-nums;
    color: var(--tk-ink);
}

.dark .tk,
.dark .tp-root,
.dark .tp-confirm {
    --tk-well: rgba(255, 255, 255, 0.025);
    --tk-line2: rgba(255, 255, 255, 0.05);
    --tk-ink2: #c7c7cf;
    --tk-faint: #5b5b63;
    --tk-hover: rgba(255, 255, 255, 0.04);
    --tk-head: #1c1d21;
    --tk-input: #0f1012;
    --tk-input-line: rgba(255, 255, 255, 0.12);
    --tk-sel: rgba(245, 158, 11, 0.12);
    --tk-ring: rgba(245, 158, 11, 0.35);
    --tk-amber-ink: var(--warning-300, #fcd34d);
    --tk-danger-ink: var(--danger-300, #fca5a5);
    --tk-danger-tint: color-mix(in oklab, var(--danger-500, #ef4444) 16%, transparent);

    --tk-info-bg: color-mix(in oklab, var(--info-500, #3b82f6) 16%, transparent);
    --tk-info-ink: var(--info-300, #93c5fd);
    --tk-info-solid: var(--info-400, #60a5fa);
    --tk-warning-bg: color-mix(in oklab, var(--warning-500, #f59e0b) 16%, transparent);
    --tk-warning-ink: var(--warning-300, #fcd34d);
    --tk-warning-solid: var(--warning-500, #f59e0b);
    --tk-success-bg: color-mix(in oklab, var(--success-500, #10b981) 16%, transparent);
    --tk-success-ink: var(--success-300, #6ee7b7);
    --tk-success-solid: var(--success-500, #10b981);
    --tk-gray-bg: color-mix(in oklab, var(--gray-400, #94a3b8) 14%, transparent);
    --tk-gray-ink: var(--gray-300, #cbd5e1);
    --tk-gray-solid: var(--gray-500, #71717a);
}

.tk [x-cloak] { display: none !important; }

/* Tone → ink. The glyph and the bars paint with `currentColor`. */
.tk-tone--info { color: var(--tk-info-solid); }
.tk-tone--warning { color: var(--tk-warning-solid); }
.tk-tone--success { color: var(--tk-success-solid); }
.tk-tone--gray { color: var(--tk-gray-solid); }
.tk-tone--danger { color: var(--tk-danger); }

.tk-mute { color: var(--tk-mute); font-size: 12px; }
.tk-faint { color: var(--tk-faint); }
.tk-right { text-align: right; justify-content: flex-end; }
.tk-spacer { flex: 1 1 auto; }

/* ───────────────────────────────────────────── header summary line (§2) ── */

.tk-summary { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.tk-sum { white-space: nowrap; }
.tk-sum--late { color: var(--ia-danger, #dc2626); font-weight: 600; }
.tk-sum--today { color: var(--warning-800, #92400e); font-weight: 600; }
.dark .tk-sum--today { color: var(--warning-300, #fcd34d); }

/* ─────────────────────────────────────────────────── view switch (§2) ── */
/*
 * THIS LIVES OUTSIDE `.tk`: the switch is a page-header action, so it cannot
 * see the `tk` container or its tokens. It is scoped by attribute instead, and
 * reads the `--ia-*` tokens directly.
 */

/* The switch: a neutral track; inactive segments transparent in muted ink; the
   active one on the card background with a 1px shadow (§2). */
.fi-btn-group:has(> [data-tk-view]) {
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #ebebe9;
    box-shadow: none;
}
.dark .fi-btn-group:has(> [data-tk-view]) { background: rgba(255, 255, 255, 0.05); }
.fi-btn-group > [data-tk-view] {
    margin: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--ia-ink-soft, #6b7280);
}
.fi-btn-group > [data-tk-view]:hover { color: var(--ia-ink, #1f1f1f); }
.fi-btn-group > [data-tk-view][aria-pressed='true'] {
    background: var(--ia-surface, #fff);
    color: var(--ia-ink, #1f1f1f);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.fi-btn-group > [data-tk-view] svg { color: inherit; }

/* ───────────────────── no Filament chrome; one filter row above (fix lists) ── */
/*
 * NO FILAMENT CHROME AROUND EITHER VIEW (owner's fix lists, 2026-09-28 —
 * Список, then Доска). Both are drawn inside Filament's table, whose container
 * is itself a card — a 1px ring, a shadow, a 12px radius — with a toolbar
 * strip on top holding the search and the filter funnel. Measured before: a
 * card around the list's card and around the board's columns, a 61px toolbar,
 * a funnel badge reading «0», and the chips flush against the card's edge.
 *
 * The table's container gives up its card and its header strip (search,
 * funnel, filter indicators) whenever it holds either view. Список's own
 * `.tk-card` is the only card; Доска's columns sit on the page. The chips and
 * search sit above both, outside the table (ListTasks::content()).
 */
.fi-ta-ctn:has(.tk[data-tk-display]) {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}
.fi-ta-ctn:has(.tk[data-tk-display]) .fi-ta-header-ctn,
.fi-ta-ctn:has(.tk[data-tk-display]) .fi-ta-filter-indicators { display: none !important; }

/* Chips left, a spacer, search right; 8px apart. 16px above Список's card
   (tasks-a-due.jsx), 14px above Доска's columns (tasks-b-board.jsx). The
   page's schema grid puts 24px between its rows — measured — so the row gives
   8px, or 10px, of it back. */
.tk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: -8px; }
.tk-filters--board { margin-bottom: -10px; }

/* «Создать»: the theme's primary button at the design's 600 weight (TkButton);
   Filament draws it at 500. Its colours stay the panel's primary token — but
   in DARK, Filament paints it primary-600 under white text, measured at
   3.80:1, short of AA's 4.5. The light theme's own pair (primary-400 under
   primary-950, 6.61:1) serves both themes. */
.fi-btn.tk-create { font-weight: 600; }
.dark .fi-btn.tk-create { background-color: var(--primary-400); color: var(--primary-950); }
.dark .fi-btn.tk-create:hover { background-color: var(--primary-300); color: var(--primary-800); }

/* TkSearch: 260 × 36, radius 8, the input border colour, a 15px glass. */
.tk-search {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 260px;
    max-width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--tk-input-line);
    border-radius: 8px;
    background: var(--tk-input);
    color: var(--tk-mute);
    cursor: text;
}
.tk-search:focus-within { border-color: var(--tk-mute); }
.tk-search__icon { flex: none; }
.tk-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--tk-ink);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}
.tk-search__input:focus { box-shadow: none; }
.tk-search__input::placeholder { color: var(--tk-mute); opacity: 1; }
/* The glass-and-cross is ours; the browser's own clear button would be a second one. */
.tk-search__input::-webkit-search-cancel-button { display: none; }
.tk-search__clear {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--tk-mute);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.tk-search__clear:hover { color: var(--tk-ink); }

/* ─────────────────────────────────────────────────────────── primitives ── */

.tk-glyph { display: block; flex: none; }

.tk-glyph-btn {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
}
.tk-glyph-btn:hover,
.tk-glyph-btn:focus-visible { background: var(--tk-hover); }

.tk-status__opt { display: flex; align-items: center; gap: 8px; width: 100%; }
.tk-status__tick { margin-left: auto; color: var(--warning-500, #f59e0b); }
.tk-status__item.is-current .tk-status__opt > span:not(.tk-status__tick) { font-weight: 600; }

.tk-prio { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; }
.tk-prio__bar { width: 3px; border-radius: 1px; background: var(--tk-line); }
/* A filled bar takes the level's ink through currentColor (the tone class). */
.tk-prio__bar.is-on { background: currentColor; }

.tk-av {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    background: hsl(var(--tk-hue, 210) 45% 90%);
    color: hsl(var(--tk-hue, 210) 35% 32%);
}
.dark .tk-av {
    background: hsl(var(--tk-hue, 210) 22% 30%);
    color: hsl(var(--tk-hue, 210) 60% 88%);
}

.tk-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.tk-badge.tk-tone--warning { background: var(--tk-warning-bg); color: var(--tk-warning-ink); }
.tk-badge.tk-tone--danger { background: var(--tk-danger-tint); color: var(--tk-danger-ink); }
.tk-badge.tk-tone--info { background: var(--tk-info-bg); color: var(--tk-info-ink); }
.tk-badge.tk-tone--gray { background: var(--tk-gray-bg); color: var(--tk-gray-ink); }

/* Relative due date (§3): late = red 600, today = amber ink 600, closed = faint. */
.tk-due { font-size: 13px; white-space: nowrap; color: var(--tk-ink2); }
.tk-due.is-late { color: var(--tk-danger); font-weight: 600; }
.tk-due.is-today { color: var(--tk-amber-ink); font-weight: 600; }
.tk-due.is-faint { color: var(--tk-faint); }

/* ────────────────────────────────────────────────────────────────── chips ── */

.tk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--tk-line);
    border-radius: 999px;
    background: var(--tk-card);
    color: var(--tk-ink2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tk-chip:hover { background: var(--tk-hover); }
.tk-chip.is-on { background: var(--tk-ink); border-color: var(--tk-ink); color: var(--tk-card); }
.tk-chip__n { opacity: 0.6; font-variant-numeric: tabular-nums; }
.tk-chip.is-on .tk-chip__n { opacity: 0.8; }
/* The one chip allowed to be red, and only when it is on (§9). */
.tk-chip--danger.is-on { background: var(--tk-danger-bg); border-color: var(--tk-danger); color: var(--tk-danger); }

/* ─────────────────────────────────────────────────────────────── Список ── */

.tk-card {
    background: var(--tk-card);
    border: 1px solid var(--tk-line);
    border-radius: 12px;
    overflow: hidden;
}

/*
 * THE GRID (§3): 28px · minmax(0,1fr) · 110px · 170px · 150px, 12px gap, 16px
 * either side — and nothing else. A sixth column for the record-actions menu
 * used to sit at the end; measured, it left «Срок» ending 65px short of the
 * card's right edge against 17px on the left (owner's fix list, 2026-09-28).
 * The header, quick-add, group headers and rows all hold the 16px inset.
 */
.tk-grid {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 110px 170px 150px;
    column-gap: 12px;
    align-items: center;
    padding: 10px 16px;
}

.tk-head {
    font-size: 12px;
    color: var(--tk-mute);
    background: var(--tk-head);
    border-bottom: 1px solid var(--tk-line);
}

.tk-card__quick { padding: 12px 16px 0; }

.tk-quick {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border: 1px dashed var(--tk-input-line);
    border-radius: 8px;
    cursor: text;
}
.tk-quick__plus { color: var(--tk-mute); font-size: 18px; line-height: 1; }
.tk-quick__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--tk-ink);
    font-size: 14px;
    padding: 0;
}
.tk-quick__input:focus { box-shadow: none; }

.tk-group__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 16px 16px 8px;
    font-size: 13px;
    font-weight: 600;
}
.tk-group__label--danger { color: var(--tk-danger); }
.tk-group__label--amber { color: var(--tk-amber-ink); }
.tk-group__n { color: var(--tk-mute); font-weight: 400; font-variant-numeric: tabular-nums; }

.tk-row {
    position: relative;
    border-top: 1px solid var(--tk-line2);
    transition: background 0.12s;
}
.tk-row:hover { background: var(--tk-hover); }

/* The stretched link: the row opens the task, yet stays a real link. */
.tk-stretch::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.tk-lift { position: relative; z-index: 1; }

.tk-row__main { min-width: 0; }
.tk-row__title {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--tk-ink);
    text-decoration: none;
    /* WRAPS, NEVER TRUNCATES (§3) — the `->wrap()` decision, kept. */
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.tk-row.is-closed .tk-row__title { color: var(--tk-mute); }
.tk-row.is-cancelled .tk-row__title { text-decoration: line-through; }

.tk-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--tk-mute);
}
.tk-meta--narrow-only { display: none; }
.tk-meta__sev { font-weight: 600; }
.tk-meta__sev.tk-tone--warning { color: var(--tk-warning-ink); }
.tk-meta__sev.tk-tone--danger { color: var(--tk-danger-ink); }
/* The site name arrives whole and is cut HERE, where the room runs out —
   never on the server, which breaks nested quotes: «Светлый мир «Жизнь…». */
.tk-meta__site {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-meta__fold { display: none; align-items: center; gap: 2px 10px; flex-wrap: wrap; }

.tk-row__prio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tk-ink2); }
.tk-row__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--tk-ink); }
.tk-row__who.is-me { color: var(--tk-ink2); }
.tk-row__who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row__due { display: flex; }

.tk-empty { padding: 40px 16px; text-align: center; font-size: 14px; color: var(--tk-mute); }

.tk-closed { border-top: 1px solid var(--tk-line); }
.tk-closed__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--tk-mute);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.tk-closed__caret { display: inline-block; transition: transform 0.15s; }
.tk-closed__caret.is-open { transform: rotate(90deg); }

/* A status change flashes its row in the selection amber for 0.9s (§3). */
@keyframes tk-flash { from { background: var(--tk-sel); } to { background: transparent; } }
.tk-row.is-flash,
.tk-tcard.is-flash { animation: tk-flash 0.9s ease-out; }

/* ──────────────────────────────────────────────────────────────── Доска ── */

.tk-cols {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tk-col {
    flex: 1 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: var(--tk-well);
    outline: 2px dashed transparent;
    outline-offset: -2px;
    transition: background 0.12s, outline-color 0.12s;
    /* The tone class on the column sets currentColor, which the drop outline
       below borrows — but the column's own text must not inherit it. */
    color: var(--tk-ink);
}
/* Hidden unless «Отменённые» is on — on a laptop. The phone tabs show it anyway. */
.tk-col--cancelled { display: none; }
.tk-show-cancelled .tk-col--cancelled { display: flex; }

/* A valid drop target: tinted with its status bg, a dashed outline in its colour. */
.tk-col--open.is-over { background: var(--tk-info-bg); outline-color: var(--tk-info-solid); }
.tk-col--in_progress.is-over { background: var(--tk-warning-bg); outline-color: var(--tk-warning-solid); }
.tk-col--done.is-over { background: var(--tk-success-bg); outline-color: var(--tk-success-solid); }
.tk-col--cancelled.is-over { background: var(--tk-gray-bg); outline-color: var(--tk-gray-solid); }

.tk-col__head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.tk-col__head .tk-glyph { color: inherit; }
.tk-col--open .tk-col__head .tk-glyph { color: var(--tk-info-solid); }
.tk-col--in_progress .tk-col__head .tk-glyph { color: var(--tk-warning-solid); }
.tk-col--done .tk-col__head .tk-glyph { color: var(--tk-success-solid); }
.tk-col--cancelled .tk-col__head .tk-glyph { color: var(--tk-gray-solid); }
.tk-col__label { font-size: 13px; font-weight: 600; color: var(--tk-ink); }
.tk-col__n { font-size: 13px; color: var(--tk-mute); font-variant-numeric: tabular-nums; }
.tk-col__hint { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--tk-mute); }

.tk-tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tk-card);
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    cursor: grab;
    transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.tk-tcard:hover { border-color: var(--tk-input-line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.tk-tcard.is-dragging { opacity: 0.4; }
.tk-tcard__late {
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--tk-danger);
}
.tk-tcard__top { display: flex; gap: 8px; align-items: flex-start; }
.tk-tcard__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 19px;
    color: var(--tk-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.tk-tcard__title.is-closed { color: var(--tk-mute); }

/* The glyph area: status menu + record actions. On hover where hover exists;
   always on touch, and always on a phone (§4). */
/*
 * THE STATUS PICKER shares the title row, and nothing else does (owner's fix
 * list, 2026-09-28). 25px (TkStatusPick at size 15), and where hover exists it
 * is NOT DRAWN until the card is hovered or holds focus — as the prototype
 * renders it only on hover — so at rest the title has the card's full width.
 * Measured before: a 50px area held free on every card, titles wrapping at
 * 83% of the card. -3px top and bottom keep a one-line title row from growing
 * when it appears.
 */
.tk-tcard__glyphs { display: flex; align-items: center; flex: none; margin: -3px -4px -3px 0; }
.tk-tcard .tk-glyph-btn { width: 25px; height: 25px; }
@media (hover: hover) {
    .tk-tcard__glyphs { display: none; }
    .tk-tcard:hover .tk-tcard__glyphs,
    .tk-tcard:focus-within .tk-tcard__glyphs { display: flex; }
}
/* The whole site name, wrapping like the title (never cut on the server). */
.tk-tcard__site { align-self: center; font-size: 12px; color: var(--tk-mute); overflow-wrap: anywhere; }

.tk-tcard__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-tcard__foot { display: flex; align-items: center; gap: 10px; }

/* Phone tabs: 4-up, 44px, label over count (§4). */
.tk-tabs {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #ebebe9;
}
.dark .tk-tabs { background: rgba(255, 255, 255, 0.05); }
.tk-tab {
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tk-mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
}
.tk-tab.is-on { background: var(--tk-card); color: var(--tk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.tk-tab__label { font-size: 12px; font-weight: 600; }
.tk-tab__n { font-size: 11px; font-variant-numeric: tabular-nums; }

/* Visibility helpers, flipped by the container queries below. */
.tk-narrow-only { display: none; }

/* ─────────────────────────────────────────── narrow: < 720px of content ── */
/*
 * The owner's fix lists put the narrow step at 720px of content for BOTH
 * views, not the handoff's 640. Список: two columns, no header row, and
 * priority, due date and assignee folded onto the meta line — the five-column
 * grid needs 720 to leave the title a readable 182px, and the old 640–859
 * «compact» tier, which squeezed the right columns instead, is gone. Доска:
 * the 4-up tab bar, one column at full width with no header, no drag, the
 * status picker always shown, and no «Отменённые» chip (the tabs have it).
 */
@container tk (max-width: 719px) {
    .tk-wide-only { display: none !important; }
    .tk-narrow-only { display: revert; }

    .tk-view--list .tk-grid { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 12px; }
    .tk-view--list .tk-head { display: none; }
    .tk-view--list .tk-meta--narrow-only { display: flex; }
    .tk-view--list .tk-meta__fold { display: inline-flex; }
    .tk-view--list .tk-card__quick { padding: 10px 12px 0; }
    .tk-view--list .tk-group__head { padding: 14px 12px 8px; }
    .tk-view--list .tk-closed__toggle { padding: 14px 12px; }

    /* The search takes a line of its own, full width (TkSearch width 100%). */
    .tk-filters .tk-search { width: 100%; }
    .tk-filters .tk-wide-chip { display: none; }

    /* Board: tabs, one column, no drag (§4). */
    .tk-tabs.tk-narrow-only { display: grid; }
    .tk-cols { display: block; overflow: visible; }
    .tk-col { display: none; min-width: 0; }
    .tk-col.is-tab { display: flex; }
    .tk-show-cancelled .tk-col--cancelled:not(.is-tab) { display: none; }
    .tk-col--cancelled.is-tab { display: flex; }
    .tk-tcard { cursor: default; }
    .tk-tcard .tk-tcard__glyphs { display: flex; }
}

/* ─────────────────────────────────────── task view page (ViewTask) ── */
/*
 * OUTSIDE `.tk` as well: the view page is Filament's own infolist, so these
 * read Filament's gray scale (`--gray-*`, injected at runtime) directly.
 */

/* «Описание»: the text keeps its line breaks. Only the span around the text
   carries this — see the note on the entry in TaskResource::infolist(). */
.tk-prewrap { white-space: pre-line; overflow-wrap: anywhere; }

/* «История» (task-history.blade.php): bordered rows, who on the left and when
   on the right, the old value struck through and faded. */
.tk-hist { display: flex; flex-direction: column; gap: 8px; }
.tk-hist__title {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--gray-950, #030712);
}
.tk-hist__item {
    padding: 10px 12px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-950, #030712);
}
.tk-hist__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--gray-500, #6b7280);
}
.tk-hist__who { font-weight: 500; color: var(--gray-950, #030712); }
.tk-hist__when { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-hist__line { margin-top: 4px; overflow-wrap: anywhere; }
.tk-hist__old { text-decoration: line-through; opacity: 0.6; }
.tk-hist__empty { font-size: 0.875rem; color: var(--gray-500, #6b7280); }

.dark .tk-hist__title,
.dark .tk-hist__item,
.dark .tk-hist__who { color: #fff; }
.dark .tk-hist__item { border-color: var(--gray-700, #374151); }
.dark .tk-hist__head,
.dark .tk-hist__empty { color: var(--gray-400, #9ca3af); }

/* ═══════════════════════════════════════════ the task page (task handoff) ══ */
/*
 * design_handoff_task_page. Two columns from 880px of CONTENT, one below — a
 * container query, never the viewport: the sidebar makes a 1024px window give
 * the page less room than a 768px one (measured on this resource). The page
 * paints with the list's own tokens (.tp-root joins .tk above) plus three the
 * handoff adds: surface2, the selection ring and the amber accent.
 */

.tp-root {
    --tp-surface2: #fafafa;
    --tp-ring: rgba(245, 158, 11, 0.25);
    --tp-accent: #f59e0b;
    --tp-track-off: #d4d4d4;
    color: var(--tk-ink);
    font-variant-numeric: tabular-nums;
}
.dark .tp-root {
    --tp-surface2: #1c1d21;
    --tp-ring: rgba(245, 158, 11, 0.35);
    --tp-track-off: rgba(255, 255, 255, 0.16);
}

.tp-root [x-cloak] { display: none !important; }

.tp-fill--info { --fill-bg: var(--tk-info-bg); --fill-ink: var(--tk-info-ink); }
.tp-fill--warning { --fill-bg: var(--tk-warning-bg); --fill-ink: var(--tk-warning-ink); }
.tp-fill--success { --fill-bg: var(--tk-success-bg); --fill-ink: var(--tk-success-ink); }
.tp-fill--gray { --fill-bg: var(--tk-gray-bg); --fill-ink: var(--tk-gray-ink); }

.tp-card { background: var(--tk-card); border: 1px solid var(--tk-line); border-radius: 12px; }
.tp-mute { color: var(--tk-mute); }
.tp-num { font-variant-numeric: tabular-nums; }
.tp-icon { flex: none; display: block; }
.tp-tag {
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--fill-bg);
    color: var(--fill-ink);
    white-space: nowrap;
}
.tp-linkbtn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--tk-amber-ink);
    text-decoration: none;
}
.tp-linkbtn:hover { text-decoration: underline; }

/* ── header (§3) ───────────────────────────────────────────────────────── */

.tp-head { container: tph / inline-size; }
.tp-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tk-mute); }
.tp-crumbs__back { color: var(--tk-mute); text-decoration: none; }
.tp-crumbs__back:hover { color: var(--tk-ink); }
.tp-crumbs__code { color: var(--tk-ink2); letter-spacing: 0.04em; }
.tp-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin: 8px 0 26px; }
.tp-head__main { flex: 1 1 420px; min-width: 0; }
.tp-head__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* «⋯» (inline-edit §2): 36×36, 1px input line, radius 8; a 212px menu. */
.tp-more__btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--tk-input-line);
    background: var(--tk-card);
    color: var(--tk-ink2);
    cursor: pointer;
}
.tp-more__btn:hover,
.tp-more__btn[aria-expanded='true'] { background: var(--tk-hover); }
.tp-more .fi-dropdown-panel { width: 212px !important; max-width: 212px; }
.tp-more__opt { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
.tp-more__opt .tp-icon { color: var(--tk-mute); }
.tp-more__item--danger .tp-more__opt,
.tp-more__item--danger .tp-more__opt .tp-icon { color: var(--tk-danger); }
.tp-more__rule { height: 1px; background: var(--tk-line2); margin: 4px 0; }

/* The delete confirm (§2): a 420px card over a 45% backdrop. */
.tp-confirm {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(12, 12, 14, 0.45);
}
.tp-confirm__card {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 20px 22px 18px;
    border-radius: 14px;
    background: var(--tk-card, #fff);
    border: 1px solid var(--tk-line);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    color: var(--tk-ink);
}
.tp-confirm__title { font-size: 17px; font-weight: 700; }
.tp-confirm__body { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--tk-ink2); text-wrap: pretty; }
.tp-confirm__acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tp-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--tk-input-line);
    background: var(--tk-card, #fff);
    color: var(--tk-ink2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.tp-btn:hover { background: var(--tk-hover); }
.tp-btn--danger { border: none; background: var(--tk-danger); color: #fff; }
.tp-btn--danger:hover { background: var(--tk-danger); filter: brightness(1.06); }
.dark .tp-btn--danger { color: #1f0b0b; }
.tp-btn:focus-visible,
.tp-more__btn:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tp-h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tk-ink);
    overflow-wrap: break-word;
    text-wrap: pretty;
}
.tp-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.tp-strip--danger { background: var(--tk-danger-bg); color: var(--tk-danger); }
.tp-strip--warning { background: var(--tk-warning-bg); color: var(--tk-warning-ink); }
.tp-strip--success { background: var(--tk-success-bg); color: var(--tk-success-ink); }
.tp-strip--gray { background: var(--tk-gray-bg); color: var(--tk-gray-ink); }
/* The glyph in the strip speaks the strip's ink, not its own tone. */
.tp-strip .tk-glyph { color: currentColor; }

@container tph (max-width: 639px) {
    .tp-crumbs { min-height: 32px; }
    .tp-crumbs__sep { display: none; }
    .tp-crumbs__back::before { content: '‹ '; }
    .tp-crumbs__code { margin-left: auto; color: var(--tk-mute); }
    .tp-head__row { gap: 14px; margin: 6px 0 18px; }
    .tp-h1 { font-size: 22px; }
    .tp-head__actions { flex: 1 1 100%; }
    .tp-head__actions .fi-ac { width: 100%; }
    .tp-head__actions .fi-btn { min-height: 44px; }
    .tp-head__actions .fi-ac > :first-child { flex: 1 1 auto; }
    .tp-head__actions .fi-ac { flex: 1 1 auto; width: auto; }
    .tp-more__btn { width: 44px; height: 44px; }
}

/* ── layout (§2) ───────────────────────────────────────────────────────── */

.tp { container: tp / inline-size; }
/* The rail is 264–300px (inline-edit §0), up from 240–280: the editing
   tracks are four 36px segments plus their label. */
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(264px, 300px); gap: 28px; align-items: start; }
.tp-main { display: grid; gap: 24px; min-width: 0; }
.tp-main__rest { display: grid; gap: 32px; min-width: 0; }
.tp-rail { display: grid; gap: 14px; min-width: 0; }
.tp-sec { min-width: 0; }
.tp-h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--tk-ink); }

/* One column below 880px, in the order steps · Свойства · Описание ·
   История · Уведомления: the wrappers dissolve and `order` sorts the cards. */
@container tp (max-width: 879px) {
    /* stretch, explicitly: the two-column grid's `align-items: start` would
       otherwise shrink a card to its content — measured, «Свойства» came out
       narrower than every other card on a phone. */
    .tp-grid { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
    .tp-main, .tp-main__rest, .tp-rail { display: contents; }
    .tp-steps-card { order: 1; }
    .tp-props { order: 2; }
    .tp-main__rest > .tp-sec:first-child { order: 3; }
    .tp-comments { order: 4; }
    .tp-main__rest > .tp-sec:last-child { order: 5; }
    .tp-info { order: 6; }
}

/* ── steps (§4) ────────────────────────────────────────────────────────── */

.tp-steps-card { padding: 14px 18px; }
.tp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-steps__line {
    position: absolute;
    top: 14px;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--tk-input-line) 0 4px, transparent 4px 8px);
}
.tp-steps__line.is-passed { background: var(--tk-mute); }
.tp-steps__line--a { left: 40px; right: calc(50% + 25px); }
.tp-steps__line--b { left: calc(50% + 25px); right: 40px; }
.tp-step {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--tk-ink);
    cursor: default;
}
.tp-step.is-clickable { cursor: pointer; }
.tp-step--left { justify-items: start; text-align: left; }
.tp-step--center { justify-items: center; text-align: center; }
.tp-step--right { justify-items: end; text-align: right; }
.tp-step__dot {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    background: var(--tk-card);
    transition: box-shadow 0.12s;
}
.tp-step--current .tp-step__dot { background: var(--fill-bg); }
.tp-step.is-clickable:hover .tp-step__dot,
.tp-step.is-clickable:focus-visible .tp-step__dot { box-shadow: 0 0 0 2px var(--tp-ring); }
.tp-step__ring { width: 15px; height: 15px; border-radius: 15px; border: 1.6px dashed var(--tk-input-line); }
.tp-step__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tk-ink); }
.tp-step--current .tp-step__label { font-weight: 700; }
.tp-step--future .tp-step__label,
.tp-step--skipped .tp-step__label { color: var(--tk-mute); }
.tp-step__sub, .tp-step__since { font-size: 12px; line-height: 1.4; color: var(--tk-mute); }
.tp-step__sub { margin-top: -6px; }
.tp-step__sub-hover { display: none; color: var(--tk-amber-ink); }
.tp-step.is-clickable:hover .tp-step__sub.has-hover .tp-step__sub-rest { display: none; }
.tp-step.is-clickable:hover .tp-step__sub.has-hover .tp-step__sub-hover { display: inline; }
.tp-step__since { margin-top: -8px; }

@container tp (max-width: 639px) {
    .tp-steps-card { padding: 14px 14px 16px; }
}

/* ── Свойства (§5) ─────────────────────────────────────────────────────── */

.tp-props { padding: 8px 16px; }
.tp-prop { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 34px; }
.tp-prop__label { font-size: 13px; color: var(--tk-mute); }
.tp-prop__value { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--tk-ink); padding: 4px 0; }
.tp-status__btn, .tp-status__plain { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tk-ink); }
.tp-status__btn {
    height: 30px;
    padding: 0 8px 0 6px;
    margin-left: -7px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}
.tp-status__btn:hover, .tp-status__btn[aria-expanded='true'] { border-color: var(--tk-input-line); background: var(--tk-hover); }
.tp-status__btn .tp-icon { color: var(--tk-mute); }
.tp-sev { font-weight: 600; }
.tp-sev.tk-tone--warning { color: var(--tk-warning-ink); }
.tp-sev.tk-tone--danger { color: var(--tk-danger); }
.tp-date { font-variant-numeric: tabular-nums; }
.tp-date.is-late { color: var(--tk-danger); font-weight: 600; }
.tp-date.is-closed { color: var(--tk-mute); }
.tp-today { color: var(--tk-amber-ink); font-weight: 600; }
.tp-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.tp-person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* «· вы» never splits: the NAME gives way (ellipsis), not the marker. */
.tp-person > .tp-mute { flex: none; white-space: nowrap; }
.tp-system { width: 22px; height: 22px; border-radius: 22px; flex: none; display: inline-grid; place-items: center; background: var(--tk-gray-bg); color: var(--tk-mute); }

/* ── Уведомления + Сведения (§7) ───────────────────────────────────────── */

.tp-info { padding: 14px 16px 8px; }
.tp-info__head { font-size: 12px; font-weight: 600; color: var(--tk-mute); margin-bottom: 2px; }
.tp-info__always { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0 4px; font-size: 13px; line-height: 1.45; color: var(--tk-ink2); }
.tp-info__always .tp-icon { color: var(--tk-mute); margin-top: 2px; }
.tp-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tk-ink);
    text-align: left;
}
.tp-switch__label { flex: 1; }
.tp-switch__track { position: relative; width: 34px; height: 20px; border-radius: 20px; flex: none; background: var(--tp-track-off); transition: background 0.15s; }
.tp-switch.is-on .tp-switch__track { background: var(--tp-accent); }
.tp-switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.tp-switch.is-on .tp-switch__knob { left: 16px; }
.tp-aud { display: grid; gap: 8px; padding: 8px 0 6px; }
.tp-aud__head { font-size: 12px; color: var(--tk-mute); }
.tp-aud__row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.tp-aud__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tk-ink); }
.tp-aud__role { font-size: 12px; color: var(--tk-mute); }
.tp-info__rule { height: 1px; background: var(--tk-line2); margin: 10px -16px 12px; }
.tp-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    margin-left: -8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--tk-ink);
    letter-spacing: 0.02em;
}
.tp-copy:hover { background: var(--tk-hover); }
.tp-copy .tp-icon { color: var(--tk-mute); }

@container tp (max-width: 639px) {
    .tp-prop { min-height: 40px; }
    .tp-copy { height: 36px; }
}

/* ── Описание (§6) ─────────────────────────────────────────────────────── */

.tp-desc-card { padding: 18px 22px 20px; }
.tp-desc { position: relative; font-size: 14px; line-height: 1.6; color: var(--tk-ink); overflow-wrap: break-word; }
.tp-desc.is-folded { max-height: 380px; overflow: hidden; }
.tp-desc__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--tk-card)); pointer-events: none; }
.tp-desc__gap { height: 12px; }
.tp-desc__head { font-weight: 600; }
.tp-desc__p, .tp-desc__li > span:last-child { text-wrap: pretty; }
.tp-desc__list { display: grid; gap: 2px; }
.tp-desc__li { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.tp-desc__dash { color: var(--tk-faint); }
.tp-desc__toggle { margin-top: 10px; }
.tp-link { color: var(--tk-amber-ink); word-break: break-all; }
.tp-uuid {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--tp-surface2);
    border: 1px solid var(--tk-line2);
    word-break: break-all;
}
.tp-desc-empty { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--tk-mute); }
.tp-desc-empty .tp-linkbtn { font-size: 14px; }

@container tp (max-width: 639px) {
    .tp-desc-card { padding: 14px 16px 16px; }
}

/* ── История (§8) ──────────────────────────────────────────────────────── */

.tp-hist-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.tp-hist-head .tp-h2 { margin: 0; }
.tp-hist-n { font-size: 13px; color: var(--tk-mute); font-variant-numeric: tabular-nums; }
.tp-hist-empty { font-size: 13px; }
.tp-hist { display: grid; gap: 12px; }

.tp-tl { padding: 16px 18px 14px; display: grid; gap: 16px; }
.tp-tl__head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--tk-mute); }
.tp-tl__total { margin-left: auto; font-weight: 400; }
.tp-tl__figs { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.tp-fig { display: grid; gap: 2px; min-width: 0; }
.tp-fig__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tk-mute); white-space: nowrap; }
.tp-fig__value { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--tk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-fig--late .tp-fig__label, .tp-fig--late .tp-fig__value { color: var(--tk-danger); }
.tp-fig__hatch,
.tp-bar__hatch { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tk-card) 60%, transparent) 0 2px, transparent 2px 7px); }
.tp-fig__hatch { width: 12px; height: 12px; border-radius: 3px; flex: none; background-color: var(--tk-danger); }
.tp-bar { position: relative; height: 18px; }
.tp-bar__track { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--tk-line2); }
.tp-bar__seg { position: absolute; top: 0; bottom: 0; box-shadow: inset 2px 0 0 var(--tk-card); transition: opacity 0.12s; }
.tp-bar__seg:first-child { box-shadow: none; }
.tp-bar__track:hover .tp-bar__seg { opacity: 0.45; }
.tp-bar__track .tp-bar__seg:hover { opacity: 1; }
.tp-seg--open { background: var(--tk-info-solid); }
.tp-seg--in_progress { background: var(--tk-warning-solid); }
.tp-seg--done { background: var(--tk-success-solid); }
.tp-seg--cancelled { background: var(--tk-gray-solid); }
.tp-bar__hatch { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; }
.tp-bar__tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tk-ink2); pointer-events: none; }
.tp-bar__tick.is-late { background: var(--tk-danger); }
.tp-axis { position: relative; height: 16px; margin-top: 9px; font-size: 12px; color: var(--tk-mute); }
.tp-axis > span { position: absolute; top: 0; white-space: nowrap; }
.tp-axis__start { left: 0; }
.tp-axis__end { right: 0; }
.tp-axis__mid { transform: translateX(-50%); }
.tp-axis__dl { color: var(--tk-ink2); font-weight: 600; }
.tp-axis__dl.is-late { color: var(--tk-danger); }
.tp-axis .is-narrow-only { display: none; }

.tp-fields { overflow: hidden; }
.tp-frow + .tp-frow { border-top: 1px solid var(--tk-line2); }
.tp-frow__head {
    display: grid;
    grid-template-columns: 14px 100px minmax(0, 1fr) auto;
    grid-template-areas: 'chev label value count';
    gap: 4px 10px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: var(--tk-ink);
}
.tp-frow__head:hover, .tp-frow__head.is-open { background: var(--tk-hover); }
.tp-frow__head .tp-chev { grid-area: chev; color: var(--tk-mute); transition: transform 0.15s; }
.tp-frow__head.is-open .tp-chev { transform: rotate(90deg); }
.tp-frow__label { grid-area: label; color: var(--tk-mute); }
.tp-frow__value { grid-area: value; min-width: 0; }
.tp-frow__count { grid-area: count; font-size: 12px; color: var(--tk-mute); white-space: nowrap; }
.tp-frow__body { display: grid; gap: 6px; padding: 4px 18px 14px 142px; }
.tp-chg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13px; min-width: 0; }
.tp-chg__when { font-size: 12px; color: var(--tk-mute); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 150px; }
.tp-chg__pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.tp-chg__arrow { color: var(--tk-faint); }
.tp-chg__desc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; flex: 1 1 100%; }
.tp-chg__word { font-weight: 500; color: var(--tk-ink); }
.tp-chg__diff { display: grid; gap: 10px; flex: 1 1 100%; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--tp-surface2); border: 1px solid var(--tk-line2); line-height: 1.55; }
.tp-chg__was { display: grid; gap: 2px; }
.tp-chg__cap { font-size: 12px; color: var(--tk-mute); }
.tp-chg__text { white-space: pre-line; color: var(--tk-ink); overflow-wrap: anywhere; }
.tp-chg__text.is-old { color: var(--tk-mute); }
.tp-val { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.tp-val__icon { display: inline-flex; flex: none; }
.tp-val__text { font-weight: 500; color: var(--tk-ink); overflow-wrap: anywhere; min-width: 0; }
.tp-val.is-old .tp-val__icon { opacity: 0.5; }
.tp-val.is-old .tp-val__text { font-weight: 400; color: var(--tk-mute); text-decoration: line-through; text-decoration-color: var(--tk-faint); }
.tp-fields__same { padding: 11px 18px; border-top: 1px solid var(--tk-line2); font-size: 13px; color: var(--tk-mute); line-height: 1.5; text-wrap: pretty; }
.tp-fields > .tp-fields__same:first-child { border-top: 0; }

@container tp (max-width: 639px) {
    .tp-tl { padding: 14px 14px 12px; }
    .tp-tl__figs { gap: 10px 22px; }
    .tp-fig__value { font-size: 18px; }
    .tp-axis .is-narrow-only { display: inline; }
    .tp-axis .is-wide-only { display: none; }
    .tp-frow__head {
        grid-template-columns: 14px minmax(0, 1fr) auto;
        grid-template-areas: 'chev label count' '. value value';
        padding: 8px 14px;
    }
    .tp-frow__body { padding: 4px 14px 12px 38px; }
    .tp-chg__when { min-width: 0; }
    .tp-fields__same { padding: 10px 14px; }
}

/* ══ inline editing (design_handoff_task_inline_edit) ═══════════════════ */

.tp-grow { flex: 1 1 auto; }
.tk-ink--info { color: var(--tk-info-ink); }
.tk-ink--warning { color: var(--tk-warning-ink); }
.tk-ink--danger { color: var(--tk-danger-ink); }
.tk-ink--gray { color: var(--tk-gray-ink); }
.tp-linkbtn--mute { color: var(--tk-mute); }

.tp-root :is(.tp-h1--edit, .tp-desc-card.is-trigger, .tp-track__seg, .tp-people__dot, .tp-chip-dash, .tp-cal__day, .tp-cal__nav, .tp-date__cal, .tp-saved__undo, .tp-linkbtn):focus-visible {
    outline: 2px solid var(--tk-accent);
    outline-offset: 2px;
}

/* Buttons of the editors: 30px, primary in the accent. */
.tp-btn--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.tp-btn--primary { border-color: var(--tk-accent); background: var(--tk-accent); color: var(--tk-accent-ink); }
.tp-btn--primary:hover { background: var(--tk-accent); filter: brightness(1.05); }
.tp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* «✓ Сохранено · Отменить» — 12px, the done ink, next to the control. */
.tp-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tk-success-ink);
    white-space: nowrap;
    animation: tp-pop 0.15s ease-out;
}
.tp-saved.is-stale { color: var(--tk-mute); }
.tp-saved__undo {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-amber-ink);
}
.tp-saved__undo:hover { text-decoration: underline; }
@keyframes tp-pop { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ── title (§2) ── */
.tp-title { min-width: 0; }
.tp-h1--edit {
    margin: -3px -8px;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: text;
}
.tp-h1--edit:hover { background: var(--tk-hover); box-shadow: inset 0 0 0 1px var(--tk-line); }
.tp-h1__pen { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--tk-mute); opacity: 0; transition: opacity 0.12s; }
.tp-h1--edit:hover .tp-h1__pen,
.tp-h1--edit:focus-visible .tp-h1__pen { opacity: 1; }
.tp-title__area {
    display: block;
    width: calc(100% + 16px);
    margin: -3px -8px;
    padding: 3px 8px;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: var(--tk-input);
    font-family: inherit;
    box-shadow: inset 0 0 0 1px var(--tk-accent), 0 0 0 3px var(--tk-ring);
}
.tp-title__area.is-empty { box-shadow: inset 0 0 0 1px var(--tk-danger), 0 0 0 3px var(--tk-danger-bg); }
.tp-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tp-edit-hint { font-size: 12px; color: var(--tk-mute); }
.tp-edit-hint.is-bad { color: var(--tk-danger); }
.tp-edit-count { margin-left: auto; font-size: 12px; color: var(--tk-mute); font-variant-numeric: tabular-nums; }
.tp-edit-count.is-bad { color: var(--tk-danger); }
/* Livewire leaves comment markers in these wrappers, so `:empty` never
   matches; the note's own presence decides. */
.tp-title__note:has(.tp-saved) { margin-top: 8px; }
.tp-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tp-conflict__text { font-size: 13px; color: var(--tk-danger); }
.tp-conflict--desc { padding: 0 14px 12px; margin-top: 0; }

/* The status button's note sits to its left; on a phone, under the row. */
.tp-head__note:not(:has(.tp-saved)) { display: none; }

/* ── Свойства for editors (§4) ── */
.tp-props--edit { padding: 2px 16px 6px; }
.tp-erow { display: grid; gap: 8px; padding: 12px 0; min-width: 0; }
.tp-erow + .tp-erow { border-top: 1px solid var(--tk-line2); }
.tp-erow__head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.tp-erow__label { font-size: 12px; font-weight: 500; color: var(--tk-mute); }
.tp-erow__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.tp-erow__value { font-size: 13px; font-weight: 500; color: var(--tk-ink); }
.tp-erow__value.is-strong { font-weight: 600; }
.tp-props__fixed { border-top: 1px solid var(--tk-line2); padding: 6px 0 2px; }
.tp-catalog-select { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--tk-input-line); border-radius: 8px; background: var(--tk-input); color: var(--tk-ink); font-size: 13px; }
.tp-catalog-select:focus { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tp-catalog-select:disabled { opacity: .6; }
.tp-field-error { color: var(--tk-danger); font-size: 12px; line-height: 1.4; margin: 0; }
.tp-directory-note { color: var(--tk-mute); font-size: 12px; line-height: 1.5; margin: 0; }
.tp-object-id { overflow-wrap: anywhere; font-size: 11px; }

/* A glyph track: connected segments, radio semantics. */
.tp-track {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--tk-input-line);
    border-radius: 9px;
    background: var(--tk-input);
    overflow: hidden;
}
.tp-track__seg {
    width: 36px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.tp-track__seg + .tp-track__seg { border-left: 1px solid var(--tk-input-line); }
.tp-track__seg:hover { background: var(--tk-hover); }
.tp-track__seg.is-on { cursor: default; }
.tp-track__seg.is-on.tp-onfill--info { background: var(--tk-info-bg); }
.tp-track__seg.is-on.tp-onfill--warning { background: var(--tk-warning-bg); }
.tp-track__seg.is-on.tp-onfill--success { background: var(--tk-success-bg); }
.tp-track__seg.is-on.tp-onfill--gray { background: var(--tk-gray-bg); }
.tp-track__seg.is-on.tp-onfill--danger { background: var(--tk-danger-tint); }
.tp-track__glyph { display: flex; }
.tp-track__glyph.is-off { opacity: 0.5; }
.tp-track__glyph.is-muted,
.tp-track__glyph.is-muted .tk-prio__bar.is-on { color: var(--tk-faint); }

/* ── Срок (§4) ── */
/* One column capped at the row: an <input>'s intrinsic ~20ch width would
   otherwise size an `auto` track past the 266px rail (measured: 275px). */
.tp-date { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; }
.tp-date__box {
    display: flex;
    align-items: center;
    height: 36px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--tk-input);
    border: 1px solid var(--tk-input-line);
}
.tp-date__box.is-open { border-color: var(--tk-accent); box-shadow: 0 0 0 3px var(--tk-ring); }
.tp-date__box.is-bad { border-color: var(--tk-danger); }
.tp-date__input {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--tk-ink);
}
.tp-date__input.is-late { color: var(--tk-danger); font-weight: 600; }
.tp-date__cal {
    width: 34px;
    height: 100%;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--tk-mute);
    cursor: pointer;
}
.tp-date__cal.is-open { color: var(--tk-amber-ink); }
.tp-date__line { font-size: 12.5px; line-height: 1.3; color: var(--tk-mute); }
.tp-date__line.is-today { color: var(--tk-amber-ink); font-weight: 600; }
.tp-date__line.is-late,
.tp-date__line.is-bad { color: var(--tk-danger); }
.tp-date__line.is-late { font-weight: 600; }
.tp-date__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip-dash {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px dashed var(--tk-input-line);
    background: transparent;
    color: var(--tk-mute);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.tp-chip-dash:hover { background: var(--tk-hover); }
.tp-chip-dash.is-on { border-color: var(--tk-accent); background: var(--tk-sel); color: var(--tk-amber-ink); }

.tp-cal {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 40;
    width: 252px;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 10px;
    background: var(--tk-card);
    border: 1px solid var(--tk-line);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tp-cal__head { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.tp-cal__title { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--tk-ink); }
.tp-cal__nav {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--tk-ink2);
    cursor: pointer;
}
.tp-cal__nav:hover { background: var(--tk-hover); }
.tp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tp-cal__dow { height: 24px; display: grid; place-items: center; font-size: 11px; color: var(--tk-mute); }
.tp-cal__slot { display: block; }
.tp-cal__day {
    width: 100%;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--tk-ink);
    cursor: pointer;
}
.tp-cal__day:hover { background: var(--tk-hover); }
.tp-cal__day.is-we { color: var(--tk-mute); }
.tp-cal__day.is-today { font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--tk-ink2); }
.tp-cal__day.is-on { background: var(--tk-accent); color: var(--tk-accent-ink); font-weight: 600; box-shadow: none; }
.tp-cal__foot { display: flex; gap: 12px; padding: 8px 4px 2px; margin-top: 6px; border-top: 1px solid var(--tk-line2); }

/* ── Исполнитель (§4) ── */
.tp-people { display: grid; gap: 10px; width: 100%; min-width: 0; }
.tp-people__now { display: flex; min-width: 0; font-size: 13px; color: var(--tk-ink); }
.tp-people__row { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px; }
.tp-people__dot {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: box-shadow 0.12s;
}
.tp-people__dot.is-on { cursor: default; box-shadow: 0 0 0 2px var(--tk-card), 0 0 0 4px var(--tk-accent); }
.tp-people__dot .tk-av { width: 100% !important; height: 100% !important; }
.tp-people__none {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px dashed var(--tk-input-line);
    display: grid;
    place-items: center;
    color: var(--tk-mute);
    font-size: 13px;
}
.tp-people__hint { font-size: 12px; line-height: 1.4; color: var(--tk-mute); }
.tp-people__error { font-size: 13px; line-height: 1.4; color: var(--tk-danger); }

/* ── Описание (§5) ── */
.tp-sec__head { display: flex; align-items: center; gap: 10px; min-height: 22px; margin: 0 0 12px; }
.tp-sec__head .tp-h2 { margin: 0; }

/* Shared task discussion: existing Cilex palette and native controls. */
.tp-comment-form { padding: 16px 18px; border-top: 1px solid var(--tk-line2); position: relative; }
.tp-comment-form__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--tk-ink); }
.tp-comment-form .tp-comment-form__area { min-height: 90px; padding: 10px 12px; border: 1px solid var(--tk-input-line); border-radius: 7px; background: var(--tk-card); }
.tp-comment-form__area:focus { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tp-comment-form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tp-comment-form__foot .tp-edit-hint { flex: 1 1 auto; }
.tp-comment-form__foot button { min-height: 44px; }
.tp-comment-form__error { margin: 10px 0 0; font-size: 13px; color: var(--tk-danger); }
.tp-comment-form__status { display: block; font-size: 12px; line-height: 1.5; color: var(--tk-success-ink); }
.tp-comment-form__status:empty { display: none; }
.tp-comment-list { list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tp-comment { display: flex; justify-content: flex-start; min-width: 0; }
.tp-comment.is-own { justify-content: flex-end; }
.tp-comment__bubble { min-width: 0; max-width: 88%; padding: 11px 13px 8px; border: 1px solid var(--tk-line); border-radius: 10px; background: var(--tk-head); }
.tp-comment.is-own .tp-comment__bubble { background: var(--tk-sel); border-color: var(--tk-ring); }
.tp-comment__author { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--tk-ink); overflow-wrap: anywhere; }
.tp-comment__time { display: block; margin-top: 6px; text-align: right; font-size: 11px; line-height: 1.4; color: var(--tk-mute); }
.tp-comment__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: var(--tk-ink2); }
.tp-mention { background: transparent; color: var(--tk-amber-ink); font-weight: 600; }
.tp-comment-empty, .tp-comment-readonly { margin: 0; padding: 16px 18px; font-size: 13px; color: var(--tk-mute); }
.tp-comment-readonly { border-top: 1px solid var(--tk-line2); }
.tp-comment-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tk-line2); }
.tp-mention-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tp-mention-panel { margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--tk-input-line); border-radius: 7px; background: var(--tk-card); }
.tp-mention-team { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--tk-line2); font-size: 12px; font-weight: 600; color: var(--tk-mute); }
.tp-mention-panel__state, .tp-mention-hint { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--tk-mute); }
.tp-mention-panel__state button { margin-left: 8px; }
.tp-mention-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; width: 100%; padding: 8px 12px; text-align: left; color: var(--tk-ink); background: transparent; border: 0; cursor: pointer; }
.tp-mention-option span { overflow-wrap: anywhere; }
.tp-mention-option small { font-size: 10px; color: var(--tk-mute); overflow-wrap: anywhere; }
.tp-mention-option[aria-selected="true"] { background: var(--tk-sel); }
.tp-mention-option:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: -2px; }
.tp-desc-card.is-trigger { position: relative; cursor: text; }
.tp-desc-card.is-trigger:hover { border-color: var(--tk-input-line); }
.tp-desc__chip {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--tk-card);
    font-size: 12px;
    font-weight: 500;
    color: var(--tk-mute);
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}
.tp-desc-card.is-trigger:hover .tp-desc__chip,
.tp-desc-card.is-trigger:focus-visible .tp-desc__chip { opacity: 1; }
.tp-desc-card--editing { padding: 0; border-color: var(--tk-accent); box-shadow: 0 0 0 3px var(--tk-ring); overflow: hidden; }
.tp-desc__area {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 22px 20px;
    border: 0;
    outline: none;
    background: transparent;
    resize: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tk-ink);
}
.tp-desc__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--tk-line2);
    background: var(--tk-head);
}
.tp-desc__acts,
.tp-desc__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }
.tp-desc__ask-q { font-size: 13px; font-weight: 600; color: var(--tk-ink); margin-right: 4px; }

/* ── phone (§7): tracks four equal columns 44px tall, bigger targets ── */
@container tp (max-width: 639px) {
    .tp-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
    .tp-track__seg { width: 100%; height: 44px; }
    .tp-date__box { height: 44px; }
    .tp-date__cal { width: 44px; }
    .tp-chip-dash { height: 40px; }
    .tp-people__row { gap: 12px; }
    .tp-people__dot { width: 40px; height: 40px; }
    .tp-desc__area { padding: 14px 16px 16px; }
}

@container tph (max-width: 639px) {
    .tp-head__note { order: 9; flex: 1 1 100%; }
}

/* Shared server search temporarily suspends grouping without changing view preferences. */
.tk-search-note { margin: 4px 0 16px; color: var(--tk-mute); font-size: 12px; line-height: 18px; }
.tk-search-pending { opacity: 0.45; pointer-events: none; }
.tk-search-error p { margin-bottom: 12px; }


/* Discussion summary keeps the same task typography and surface tokens. */
.tp-comments-heading { width: 100%; }
.tp-comments-toggle { width: 100%; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tp-comments-toggle:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 3px; border-radius: 4px; }
.tp-comments-unread { margin-left: auto; max-width: 100%; border: 1px solid var(--tk-line); border-radius: 999px; padding: 3px 9px; color: var(--tk-mute); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.tp-comments-unread.has-unread { color: var(--tk-warning-ink); background: var(--tk-warning-bg); border-color: var(--tk-ring); }
.tp-comments-chevron { flex: 0 0 auto; color: var(--tk-mute); }
.tp-comments-chevron.is-collapsed { transform: rotate(-90deg); }
.tp-comments-read-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--tk-mute); font-size: 12px; }