/* Карточка задачи.
   Полоска слева — тип (пастель), полоска сверху — пользовательский цвет.
   Выделение — синее кольцо (outline), блокировка — красное (box-shadow): они не мешают друг другу.
   Красная схема блокировки:
     .is-blocked — карточка заблокирована: красная обводка + светло-красный фон + тег «Блокер»;
                   Потомки заблокированной карточки (вниз по parent_id) тоже .is-blocked и показывают причину родителя;
     .is-linked  — предок (вверх по parent_id) заблокированной карточки: такая же красная обводка,
                   фон бледнее;
     .is-focus   — выделена заблокированная/связанная: все заблокированные в её цепочке
                   получают усиленное красное кольцо. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 8px 12px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
    /* Тач: карточка не прокручивает страницу, жест принадлежит переносу на Pointer Events (ui/drag.js).
       Без этого iOS отбирал жест под прокрутку, и карточка «дёргалась». Прокрутка доски — по пустым местам. */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--type-color, var(--fill-strong));
}
.card.type-epic { --type-color: var(--type-epic); --tag-bg: var(--type-epic-soft); --tag-text: var(--type-epic-text); }
.card.type-feature { --type-color: var(--type-feature); --tag-bg: var(--type-feature-soft); --tag-text: var(--type-feature-text); }
.card.type-task { --type-color: var(--type-task); --tag-bg: var(--type-task-soft); --tag-text: var(--type-task-text); }
.card.type-bug { --type-color: var(--type-bug); --tag-bg: var(--type-bug-soft); --tag-text: var(--type-bug-text); }
.card.type-subtask { --type-color: var(--type-subtask); --tag-bg: var(--type-subtask-soft); --tag-text: var(--type-subtask-text); }

@media (hover: hover) {
    .card:hover { box-shadow: var(--shadow-card-hover); }
}
/* Просмотр: переносить нечего, поэтому карточки не должны блокировать прокрутку пальцем */
body.is-viewer .card { touch-action: manipulation; }
.card:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.card.is-selected { outline: 2.5px solid var(--accent); outline-offset: 2px; }

.card.is-blocked { background: #ffeeed; box-shadow: inset 0 0 0 1.5px var(--red-ring), var(--shadow-card); }
.card.is-linked { background: #fff8f7; box-shadow: inset 0 0 0 1.5px var(--red-ring), var(--shadow-card); }
.card.is-focus { box-shadow: inset 0 0 0 2.5px var(--red), 0 0 0 4px rgba(255, 59, 48, 0.18), var(--shadow-card); }

.card.is-dragging { opacity: 0.35; }
.card.is-flash { animation: card-flash 1.2s ease; }
@keyframes card-flash {
    0%, 30% { box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-card); }
    100% { box-shadow: var(--shadow-card); }
}

/* Цветная полоска сверху: 8 px, плавный переход от выбранного цвета к более светлому оттенку.
   Первая строка - запасной сплошной цвет для браузеров без color-mix. */
.card-color {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    background: var(--card-color);
    background: linear-gradient(90deg, var(--card-color), color-mix(in srgb, var(--card-color) 45%, #fff));
}
/* Под широкой полоской название не прижимается к верхнему краю */
.card.has-color { padding-top: 16px; }

.card-title {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    border-radius: var(--r-xs);
    outline: none;
}
.card-title[contenteditable="true"] {
    margin: -2px -4px;
    padding: 2px 4px;
    background: var(--accent-soft);
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}

.card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Номер карточки: бейдж с мягкой цветной подложкой; по клику копируется в буфер обмена */
.card-id { margin-right: 2px; color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.card-id-num {
    display: inline-block;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    line-height: 20px;
    cursor: copy;
}
@media (hover: hover) { .card-id-num:hover { background: var(--accent); color: #fff; } }

/* Теги и кнопки-фильтры на карточке */
.tag, .assignee, .points {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 7px;
    border: 0;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    line-height: 1;
    white-space: nowrap;
    transition: background var(--transition), box-shadow var(--transition);
}
.tag svg { width: 11px; height: 11px; }
.tag-type { background: var(--tag-bg); color: var(--tag-text); }
.tag-prio { background: var(--fill); color: var(--text-2); }
.tag-prio.prio-high { background: var(--orange-soft); color: var(--orange-text); }
.tag-blocked { background: rgba(255, 59, 48, 0.12); color: var(--red-text); }
/* Плашка «Ожидает» - карточка заблокирована блокировкой предка (оранжевая, чтобы отличать от красного «Блокер») */
.tag-waiting { background: var(--orange-soft); color: var(--orange-text); }
/* Плашки «Блокер» и «Ожидает» включают режим связей (фильтр в три клика), курсор - рука */
.tag-blocked, .tag-waiting { cursor: pointer; }
/* Ссылка «#N ↗» рядом с «Ожидает»: переход к карточке-блокеру на доске */
.tag-goto { background: transparent; color: var(--text-2); padding: 0 4px; cursor: pointer; }
.tag-goto svg { margin-left: 1px; }
.tag-goto:hover { color: var(--red-text); text-decoration: underline; }
.tag.is-active, .assignee.is-active, .points.is-active { box-shadow: inset 0 0 0 1.5px currentColor; }

.card-reason {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-sm);
    color: var(--red-text);
}
/* Причина, унаследованная от родительской карточки, чуть бледнее собственной */
.card-reason.is-inherited { opacity: 0.8; }

.card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 0.5px solid var(--separator);
}
.assignee {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    margin-left: -6px;
    background: transparent;
    color: var(--accent);
}
.assignee:hover { background: var(--accent-soft); }
.effort { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.foot-spacer { flex: 1; }
.points { background: var(--fill); color: var(--text-2); font-variant-numeric: tabular-nums; }
.points:hover, .tag:hover { filter: brightness(0.96); }
.card-open {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -4px -4px -4px 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
}
.card-open svg { width: 15px; height: 15px; }
.card-open:hover { background: var(--fill); color: var(--accent); }

/* Тач: крупнее цели нажатия внутри карточки */
@media (pointer: coarse) {
    .tag, .assignee, .points { height: 26px; padding: 0 9px; font-size: var(--fs-sm); }
    .card-open { width: 36px; height: 36px; margin: -6px -6px -6px 0; }
}

/* Копия карточки под курсором/пальцем при переносе */
.drag-ghost {
    position: fixed;
    z-index: 400;
    margin: 0;
    pointer-events: none;
    opacity: 0.92;
    box-shadow: var(--shadow-pop);
    will-change: transform;
}

/* Номер спринта рядом с номером карточки: мелким шрифтом */
.card-sprint { font-size: var(--fs-xs); white-space: nowrap; }

/* Подсветка карточки после перехода к блокеру: синяя пульсация 2 секунды (3 удара по 0,67 с) */
.card.is-pulse { animation: card-pulse 0.67s ease-in-out 3; }
@keyframes card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0), var(--shadow-card); }
    50% { box-shadow: 0 0 0 7px rgba(0, 122, 255, 0.45), var(--shadow-card); }
}
@media (prefers-reduced-motion: reduce) {
    /* Без движения: просто выделение рамкой на те же 2 секунды */
    .card.is-pulse { animation: none; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.45), var(--shadow-card); }
}