/* Вид «Список»: карточки деревом в одном вертикальном списке (стиль iOS 17: мягкие тени, скругления).
   Строка слева направо: ручка перетаскивания, древовидные линии, кнопка сворачивания, полоска типа, #ID, название,
   бейдж типа, значки блокировки, прогресс, трудоёмкость, исполнители, статус, спринт, «+» (дочерняя карточка).
   Ширина ступени вложенности --indent (24px) должна совпадать с INDENT в ui/list-drag.js. */

/* Вместо сетки колонок - обычный блок на всю ширину области прокрутки */
.board.is-list { display: block; width: auto; max-width: 1360px; }

/* ===== Панель над списком: прилипает к верху области прокрутки ===== */
.list-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) 0 var(--sp-2);
    background: var(--bg);
}
.list-toolbar .btn svg { width: 14px; height: 14px; }
.list-count { margin-left: var(--sp-2); color: var(--text-2); font-size: var(--fs-md); white-space: nowrap; }

/* ===== Список: белая скруглённая поверхность с мягкой тенью ===== */
.tree-list {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.list-row {
    --indent: 24px;
    /* Ширина ручки переноса; в режиме просмотра ручки нет - остаётся узкий отступ */
    --grip-w: 24px;
    --tree-line: rgba(60, 60, 67, 0.22);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-3) 0 2px;
    border-bottom: 0.5px solid var(--separator);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.list-row:last-child { border-bottom: 0; }
/* Расстояние между колонками; у линий дерева и кнопки сворачивания оно нулевое, чтобы линии не рвались */
.list-row > * + * { margin-left: var(--sp-2); }
.list-row > .row-grip + .row-gutter,
.list-row > .row-grip + .row-toggle,
.list-row > .row-gutter + .row-toggle { margin-left: 0; }
@media (hover: hover) { .list-row:hover { background: color-mix(in srgb, var(--fill) 55%, var(--surface)); } }
.list-row:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

/* Цвета типа карточки: полоска слева и бейдж типа (те же, что у карточек доски) */
.list-row.type-epic { --type-color: var(--type-epic); --tag-bg: var(--type-epic-soft); --tag-text: var(--type-epic-text); }
.list-row.type-feature { --type-color: var(--type-feature); --tag-bg: var(--type-feature-soft); --tag-text: var(--type-feature-text); }
.list-row.type-task { --type-color: var(--type-task); --tag-bg: var(--type-task-soft); --tag-text: var(--type-task-text); }
.list-row.type-bug { --type-color: var(--type-bug); --tag-bg: var(--type-bug-soft); --tag-text: var(--type-bug-text); }
.list-row.type-subtask { --type-color: var(--type-subtask); --tag-bg: var(--type-subtask-soft); --tag-text: var(--type-subtask-text); }

/* Заблокированная (своя блокировка или унаследованная) - светло-красный фон, как на доске */
.list-row.is-blocked { background: #fff5f4; }
@media (hover: hover) { .list-row.is-blocked:hover { background: #ffeeed; } }
/* Предок, показанный только ради контекста при фильтре: бледнее */
.list-row.is-ghost { opacity: 0.55; }

/* ===== Ручка перетаскивания: единственная зона переноса, остальная строка кликабельна и прокручивается ===== */
.row-grip {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--grip-w);
    align-self: stretch;
    color: var(--text-3);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.row-grip svg { width: 14px; height: 14px; }
.list-row:has(> .row-grip.is-off) { --grip-w: 10px; }
.row-grip.is-off { cursor: default; }
@media (hover: hover) { .row-grip:not(.is-off):hover { color: var(--accent); } }

/* ===== Древовидные линии: вертикали предков и «колено» (├ или └) к строке ===== */
.row-gutter { display: flex; flex: none; align-self: stretch; }
.tl { position: relative; flex: none; width: var(--indent); align-self: stretch; }
.tl-line::before,
.tl-elbow::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--tree-line);
}
.tl-elbow.is-last::before { bottom: 50%; }
.tl-elbow::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 12px;
    border-top: 1px solid var(--tree-line);
}

/* ===== Кнопка сворачивания (▶ свёрнуто, ▼ развёрнуто) ===== */
.row-toggle {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--indent);
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-2);
}
.row-toggle svg { width: 14px; height: 14px; transition: transform var(--transition); }
.row-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.row-toggle:hover { background: var(--fill); }
.row-toggle.is-leaf { pointer-events: none; }

.row-bar { flex: none; width: 4px; height: 22px; border-radius: 2px; background: var(--type-color, var(--fill-strong)); }
.row-id { flex: none; min-width: 30px; color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

/* Название: одна строка с многоточием; при правке на месте (двойной клик) - обычное поле */
.row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-xs);
    font-size: var(--fs-base);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}
.row-title[contenteditable="true"] {
    overflow: visible;
    margin: -2px -4px;
    padding: 2px 4px;
    background: var(--accent-soft);
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}
.list-row .tag-type { flex: none; }

/* Значки: замок - своя блокировка, часы - ждёт блокировку предка */
.row-flags { flex: none; display: inline-flex; gap: 3px; }
.row-flags:empty { display: none; }
.row-flag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.row-flag svg { width: 13px; height: 13px; }
.row-flag.is-block { background: rgba(255, 59, 48, 0.12); color: var(--red-text); }
.row-flag.is-wait { background: var(--orange-soft); color: var(--orange-text); }

/* Прогресс родителя: закрытые конечные карточки ветки */
.row-progress { flex: none; display: flex; align-items: center; gap: var(--sp-2); width: 132px; }
.row-progress.is-none { visibility: hidden; }
.row-progress-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--fill); }
.row-progress-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width var(--transition); }
.row-progress-text { flex: none; min-width: 40px; color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.row-effort { flex: none; width: 84px; color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.row-effort.is-sum { color: var(--text); }

/* Исполнители: кружки с инициалами внахлёст */
.row-assignees { flex: none; display: inline-flex; align-items: center; width: 84px; padding-left: 6px; }
.row-ava {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: hsl(var(--hue, 210) 55% 86%);
    color: hsl(var(--hue, 210) 45% 28%);
    font-size: 10px;
    font-weight: 600;
}
.row-ava-more { background: var(--fill-strong); color: var(--text-2); }

/* Статус: цветная точка и подпись */
.row-status { flex: none; display: inline-flex; align-items: center; gap: 6px; width: 104px; color: var(--text-2); font-size: var(--fs-md); white-space: nowrap; }
.row-status .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.row-status.s-sprint .dot { background: var(--accent); }
.row-status.s-work .dot { background: #ff9500; }
.row-status.s-wait .dot { background: #ffcc00; }
.row-status.s-done .dot { background: var(--green); }
.row-status.s-archive .dot { background: #8e8e93; }

/* Спринт: молния у текущего, номер у остальных */
.row-sprint { flex: none; display: flex; justify-content: flex-end; width: 68px; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.row-sprint.is-current { color: #ff9500; }
.row-sprint svg { width: 15px; height: 15px; }

/* «+»: новая дочерняя карточка; на устройствах без наведения видна всегда */
.row-add {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
    opacity: 0;
    transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.list-row:hover .row-add, .list-row:focus-within .row-add { opacity: 1; }
@media (hover: none) { .row-add { opacity: 1; } }
.row-add:hover { background: var(--accent-soft); color: var(--accent); }
.row-add svg { width: 15px; height: 15px; }

/* ===== Подсветка чужих изменений и перехода к карточке ===== */
.list-row.is-flash { animation: row-flash 1.2s ease; }
@keyframes row-flash {
    0%, 30% { box-shadow: inset 0 0 0 2px var(--accent-ring); background: var(--accent-soft); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}
.list-row.is-pulse { animation: row-pulse 0.67s ease-in-out 3; }
@keyframes row-pulse {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 0 2.5px var(--accent); background: var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
    .list-row.is-pulse { animation: none; box-shadow: inset 0 0 0 2.5px var(--accent); }
}

/* ===== Перетаскивание строки ===== */
.list-row.is-dragging, .list-row.is-in-branch { opacity: 0.35; }
/* Строка, которая станет родителем: подсвечена фоном; красная - такая иерархия недопустима */
.list-row.is-drop-parent { background: var(--accent-soft); }
.list-row.is-drop-parent.is-invalid { background: var(--red-soft); }
/* Копия строки под указателем */
.drag-ghost-row {
    position: fixed;
    z-index: 400;
    margin: 0;
    border-bottom: 0;
    border-radius: var(--r-md);
    background: var(--surface);
    opacity: 0.95;
    box-shadow: var(--shadow-pop);
    pointer-events: none;
    will-change: transform;
}
/* Линия места вставки с точкой слева: отступ линии показывает выбранный уровень вложенности */
.list-drop-line {
    position: fixed;
    z-index: 390;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    pointer-events: none;
}
.list-drop-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -2.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: inherit;
}
.list-drop-line.is-invalid { background: var(--red); }
.list-drop-line.is-hidden { display: none; }

/* ===== Нажимаемые области на сенсорных экранах ===== */
@media (pointer: coarse) {
    .list-row { min-height: 52px; --grip-w: 36px; }
    /* Кнопка остаётся шириной в ступень вложенности (иначе линии дерева сдвинутся), область нажатия расширена до 36 px */
    .row-toggle::before { content: ''; position: absolute; inset: -10px -6px; }
    .row-add { width: 36px; height: 36px; }
}

/* ===== Узкие экраны: лишние колонки скрываются, название остаётся ===== */
@media (max-width: 1100px) {
    .row-effort, .row-sprint { display: none; }
}
@media (max-width: 860px) {
    .list-row .tag-type { display: none; }
    .row-status { width: 20px; font-size: 0; }
    .row-progress { width: 96px; }
}
@media (max-width: 600px) {
    /* Телефон: строка в два ряда. Сверху ручка, дерево, полоска, номер, название, значки и «+»; снизу прогресс,
       исполнители и статус. Второй ряд сдвинут под название (на ширину ручки и ступеней вложенности, но не больше
       двух ступеней, чтобы глубокая ветка не выталкивала данные за край). Если и там не помещается, статус уходит на третий ряд.
       Разрыв ряда - пустой псевдоэлемент на всю ширину (order 1): всё, что идёт после него (order 2 и выше), переносится вниз. */
    .list-row { flex-wrap: wrap; align-content: center; padding-top: 4px; padding-bottom: 6px; row-gap: 2px; }
    .list-row::after { content: ''; order: 1; flex: 0 0 100%; height: 0; }
    .list-row::before {
        content: '';
        order: 2;
        flex: none;
        width: calc(var(--grip-w) + (min(var(--depth, 0), 2) + 1) * var(--indent) - var(--sp-2));
    }
    .row-progress, .row-assignees, .row-status { order: 3; }
    .row-title { flex: 1 1 0; min-width: 72px; }
    .row-progress { flex: 0 1 112px; width: auto; }
    .row-progress.is-none { display: none; }
    .row-assignees { width: auto; min-width: 24px; }
    .row-status { width: auto; font-size: var(--fs-md); }
    .list-toolbar { flex-wrap: wrap; }
}