/* board.css · экран «Задачи · Доска» (срез 1 роадмапа доски задач).
   Только классы этого экрана; токены и общие компоненты — tokens.css,
   styles.css, lib.css. Разметка и размеры — с утверждённого макета. */

/* контент растягивается на всю высоту, чтобы колонки прокручивались внутри себя */
.content.content-board { display: flex; flex-direction: column; min-height: 0; padding-bottom: 20px; }
.board-page { display: flex; flex-direction: column; flex: 1; min-height: 0; max-width: none; }

/* ── строка управления ── */
.tb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tb-bar .sp { flex: 1; }
/* у .seg и пилюль display: inline-flex — без этого hidden их не прячет */
.tb-bar [hidden] { display: none; }
.tb-day { display: inline-flex; align-items: center; gap: 4px; transition: opacity var(--dur-base) var(--ease-out); }
.tb-day.off { opacity: .45; pointer-events: none; }
.tb-day .day-lbl { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 150px; padding: 2px 10px; }
.tb-day .day-lbl .d1 { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.tb-day .day-lbl .d2 { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-label); }
.tb-day .today-btn { margin-left: 4px; }
.tb-day .today-btn[hidden] { display: none; }
.tb-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px; }

/* «Просроченные» — пилюля-переключатель, не сегмент: это другой срез, не режим доски */
.od-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--paper-card); color: var(--fg-muted);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.od-tab .n { font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.od-tab .sdot { display: none; }
.od-tab.has { border-color: var(--warn-border); color: var(--warn); background: var(--warn-bg); }
.od-tab.has .sdot { display: inline-block; }
.od-tab.active { background: var(--ink); border-color: var(--ink); color: var(--fg-on-ink); }
.od-tab.active .sdot { background: var(--fg-on-ink); }

.seg .n { font-family: var(--font-mono); font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
.filt-wrap { position: relative; }
.pop.pop-right { left: auto; right: 0; width: 280px; }
.pop .grp-label { padding-top: 10px; }

/* ── доска ── */
.board-wrap { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.board-wrap[hidden] { display: none; }
.board { display: flex; gap: 12px; height: 100%; align-items: stretch; min-width: min-content; }
.col { width: 268px; flex: none; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 0; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px; }
.col-head .ch-title { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--fg-label); display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.col-head .ch-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head .ch-title .sdot { width: 7px; height: 7px; }
.col-head .ch-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; margin-left: auto; }
.col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.col-body.drop { outline: 2px dashed var(--accent-line); outline-offset: -6px; border-radius: var(--radius-lg); }
.col-empty { font-size: var(--fs-xs); color: var(--fg-faint); text-align: center; padding: 18px 8px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius); margin: 2px 0; }
.col.add-col { background: transparent; border-style: dashed; align-items: center; justify-content: center; width: 56px; cursor: pointer; color: var(--fg-faint); }
.col.add-col:hover { color: var(--fg); border-color: var(--fg-faint); }

/* ── карточка задачи ── */
.task { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px 9px 9px;
  display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; cursor: grab;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.task:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); }
.task.dragging { opacity: .4; }
.task.p1 { --p: var(--err); --p-bg: var(--err-bg); }
.task.p2 { --p: var(--warn-dot); --p-bg: var(--warn-bg); }
.task.p3 { --p: var(--accent); --p-bg: var(--accent-bg); }
.task.p4 { --p: var(--fg-faint); --p-bg: var(--paper-mute); }
.task .chk { grid-row: 1 / 3; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--p, var(--fg-faint));
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; padding: 0; }
.task .chk:hover, .task .chk:focus-visible { background: var(--p-bg, var(--paper-mute)); color: var(--p, var(--fg-muted)); }
.task .tt { font-size: var(--fs-sm); line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; }
.task .tt .sub { color: var(--fg-faint); }
.task .tt .desc { font-size: 11px; color: var(--fg-label); margin-top: 2px; }
.task .tm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--fg-label); font-family: var(--font-mono); }
.task .tm .t { display: inline-flex; align-items: center; gap: 3px; }
.task .tm .t svg { width: 11px; height: 11px; }
.task .tm .late { color: var(--err); font-weight: 500; }
.task .tm .tg { font-family: var(--font-sans); height: 18px; padding: 0 6px; cursor: default; }
.task .tm .tg > span { max-width: 150px; }
.task .tm .tg .ddot { width: 7px; height: 7px; }
.task .tm .lbl { font-family: var(--font-sans); background: var(--tag-bg); color: var(--tag-fg); padding: 1px 6px; border-radius: var(--radius-pill); }
.task .tm .pflag { color: var(--p); font-family: var(--font-sans); font-weight: 600; }
.task.p4 .tm .pflag { display: none; }
/* кнопки карточки — не сразу: курсор задержался ~0.7 с; с клавиатуры — сразу.
   Уход курсора прячет их без задержки. Высоту держит max-height, чтобы
   случайный пролёт мыши по доске её не дёргал (правка владельца 28.09). */
.task .ta { grid-column: 2; display: flex; gap: 4px; max-height: 0; opacity: 0; overflow: hidden; margin-top: -3px;
  transition: max-height .16s var(--ease-out), opacity .12s var(--ease-out), margin-top .16s var(--ease-out); transition-delay: 0s; }
.task:hover .ta { max-height: 32px; opacity: 1; margin-top: 3px; transition-delay: .7s; }
.task:focus-within .ta, .task:focus-visible .ta { max-height: 32px; opacity: 1; margin-top: 3px; transition-delay: 0s; }
.task.dragging .ta { max-height: 0; opacity: 0; }
.task .ta button, .task .ta a { font-family: var(--font-sans); font-size: 10.5px; padding: 2px 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted); cursor: pointer; text-decoration: none; }
.task .ta button:hover, .task .ta a:hover { background: var(--paper-mute); color: var(--fg); }

/* ── состояния экрана ── */
.state-card { padding: 34px 20px; text-align: center; }
.state-card .st-t { font-size: var(--fs-h2); font-weight: 500; margin-bottom: 6px; }
.state-card .st-s { font-size: var(--fs-sm); color: var(--fg-label); line-height: 1.55; max-width: 420px; margin: 0 auto; }
.state-card .st-a { margin-top: 16px; display: inline-flex; gap: 8px; }
.skel { background: linear-gradient(90deg, var(--paper-mute) 25%, var(--paper-card) 50%, var(--paper-mute) 75%);
  background-size: 200% 100%; animation: skel 1.4s linear infinite; border-radius: var(--radius-sm); height: 38px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.board-page .hint { margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .od-tab .sdot.live { animation: none; } .task .ta { transition-duration: 0s; } }
@media (max-width: 900px) {
  .tb-bar .sp { display: none; }
  .tb-day .day-lbl { min-width: 0; }
  .col { width: 240px; }
}

/* ── «+ задача» внизу колонки (срез 2) ── */
.col-add { display: flex; align-items: center; gap: 5px; width: 100%; padding: 6px 8px; margin-top: 2px; flex: none;
  font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--fg-faint); background: transparent;
  border: 1px dashed transparent; border-radius: var(--radius); cursor: pointer; text-align: left;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.col-add svg { width: 13px; height: 13px; }
.col-add:hover, .col-add:focus-visible { color: var(--fg); border-color: var(--border-strong); background: var(--paper-card); }
.col-add-box { flex: none; margin-top: 2px; }
.col-add-box .add-input { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: var(--fs-sm); padding: 7px 9px;
  border: 1px solid var(--accent); border-radius: var(--radius); background: var(--paper-card); color: var(--fg);
  outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.col-add-box .add-input:disabled { opacity: .6; }

/* ── «+» в режиме «Метки»: выбор метки для пустой колонки (срез 4a) ── */
.pop .pop-empty { font-size: var(--fs-xs); color: var(--fg-faint); padding: 6px 10px; }
.col.picking .col-head #pick-x { margin-left: auto; width: 22px; height: 22px; }
.col.picking .col-head #pick-x svg { transform: rotate(45deg); }
.pick-body { gap: 2px; }
.lbl-pick { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; flex: none;
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.lbl-pick .ddot { width: 7px; height: 7px; }
.lbl-pick:hover, .lbl-pick:focus-visible { background: var(--paper-card); border-color: var(--border-strong); }

/* ── вид «Неделя» (срез 4): семь колонок делят ширину, уже 164px — прокрутка ── */
.seg-view button { padding-left: 12px; padding-right: 12px; }
.board.week { min-width: 0; gap: 10px; }
.board.week .col { width: auto; flex: 1 1 0; min-width: 164px; }
.board.week .col-head { padding: 9px 10px 8px; }
.board.week .task .tm .tg > span { max-width: 110px; }
.board.week .col-empty { padding: 12px 8px; }
.wk-head { display: inline-flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
  border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-sans); color: var(--fg-label); }
.wk-head:hover, .wk-head:focus-visible { background: var(--paper-mute); color: var(--fg); outline: none; }
.wk-head .dw { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.wk-head .dn { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.wk-head .dm { font-size: 11px; color: var(--fg-faint); }
.col.today { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.col.today .wk-head .dw, .col.today .wk-head .dn { color: var(--accent); }
.col .today-pill { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 1px 7px; border-radius: var(--radius-pill); }
.col.past { background: transparent; border-style: dashed; }
.col.past .wk-head .dn { color: var(--fg-label); }
.col.past .task { background: var(--paper-raised); }
.col-body.deny { outline: 2px dashed var(--err-border); outline-offset: -6px; border-radius: var(--radius-lg); }
.col .past-note { font-size: 10.5px; color: var(--fg-faint); padding: 0 12px 8px; margin-top: -4px; }

/* тогл «Прошедшие дни» — только в неделе */
.past-tg { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--paper-card); color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--fs-xs); cursor: pointer; }
.past-tg:hover { color: var(--fg); }
.past-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.past-tg:disabled { opacity: .45; cursor: default; }
.past-tg .sw { width: 26px; height: 16px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background var(--dur-fast) var(--ease-out); flex: none; }
.past-tg .sw span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-card); transition: transform var(--dur-fast) var(--ease-out); }
.past-tg.on .sw { background: var(--accent); }
.past-tg.on .sw span { transform: translateX(10px); }
.past-tg .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--warn); margin-left: 4px; }
.past-tg .n:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .past-tg .sw, .past-tg .sw span { transition: none; } }

/* ── вид «Список» (срез 4b): те же группы (дни / приоритеты / проекты /
   метки) сверху вниз, задача — строкой. Разметка та же, что у доски:
   board.js вешает .list на #board и #board-wrap. ── */
.seg-ico button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; }
/* список — один вертикальный поток групп, не колонки: пусть скроллится вся
   страница (.content, как на любом другом экране панели), а не тесная
   внутренняя рамка board-wrap. Правка контролёра (round 1): при flex:1;
   min-height:0 (унаследовано от .board-wrap) список поджимался под высоту
   вьюпорта и прокручивался внутри себя — на телефоне видно было только
   первые 1-2 группы. */
.board-wrap.list { flex: none; min-height: 0; overflow-x: hidden; overflow-y: visible; }
.board.list { flex-direction: column; height: auto; min-width: 0; gap: 14px; align-items: stretch; }
.board.list .col, .board.week.list .col { width: auto; min-width: 0; flex: none; background: var(--paper-card); overflow: hidden; }
.board.list .col.past { background: var(--paper-raised); }
.board.list .col-head { padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--border); }
.board.list .col.today .col-head { background: var(--accent-bg); }
.board.list .past-note { display: none; }
.board.list .col-body { padding: 0; gap: 0; overflow: visible; }
.board.list .skel { margin: 8px 12px; }
.board.list .task { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 8px 12px; background: transparent; }
.board.list .task:hover { box-shadow: none; background: var(--paper-raised); }
.board.list .task .chk { grid-row: auto; margin-top: 0; }
/* название и описание одной строкой: название сжимается до многоточия,
   описание берёт только остаток */
.board.list .task .tt { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.board.list .task .tt .sub { flex: none; }
.board.list .task .tt .tx { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board.list .task .tt .desc { flex: 1 1 0; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; }
.board.list .task .tm { flex-wrap: nowrap; justify-content: flex-end; }
/* кнопки выезжают вбок с той же задержкой 0.7 с, с клавиатуры — сразу */
.board.list .task .ta { grid-column: auto; margin-top: 0; max-height: none; max-width: 0; flex-wrap: nowrap;
  transition: max-width .16s var(--ease-out), opacity .12s var(--ease-out); transition-delay: 0s; }
/* opacity явно (не полагаемся на базовое .task:hover .ta из канбана) —
   правило .board.list .task .ta выше специфичнее общего .task:hover .ta и
   само его перекрывает по каскаду, так что раскрытие без своего opacity
   молча остаётся невидимым (финальное ревью, round 2) */
.board.list .task:hover .ta { max-width: 220px; opacity: 1; margin-top: 0; transition-delay: .7s; }
.board.list .task:focus-within .ta, .board.list .task:focus-visible .ta { max-width: 220px; opacity: 1; margin-top: 0; transition-delay: 0s; }
.board.list .task.dragging .ta { max-width: 0; }
.board.list .col-empty { border: 0; text-align: left; padding: 10px 12px 10px 40px; margin: 0; border-bottom: 1px solid var(--border); }
.board.list .col-add { margin: 0; padding: 8px 12px 8px 38px; border-radius: 0; border: 0; }
.board.list .col-add:hover, .board.list .col-add:focus-visible { background: var(--paper-raised); }
.board.list .col-add-box { padding: 6px 12px 8px 38px; margin: 0; }
.board.list .col-body.drop, .board.list .col-body.deny { outline-offset: -3px; border-radius: 0; }
/* «+» колонки метки — в списке полоса во всю ширину, а не узкая колонка;
   overflow: visible снимает наследованный от .board.list .col overflow:
   hidden, который резал тултип [data-tip] «Колонка метки» (рендерится
   поверх через ::after) — финальное ревью, round 2, minor 1 */
.board.list .col.add-col { width: auto; height: 40px; flex-direction: row; overflow: visible; }
@media (max-width: 760px) {
  .board.list .task { grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
  .board.list .task .tm { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .board.list .task .tt .desc { display: none; }
  /* кнопки строки — своя строка грида под названием/метой (правка
     контролёра, round 1): скрытая .ta в широком списке держится нулевой
     ШИРИНОЙ (max-width:0), а тут у неё своя строка на всю ширину — нужно
     схлопывать ВЫСОТУ, иначе пустая строка кнопок остаётся видна всегда. */
  .board.list .task .ta { grid-column: 2; max-width: none; max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height .16s var(--ease-out), opacity .12s var(--ease-out); transition-delay: 0s; }
  /* opacity: 1 явно (финальное ревью, round 2, important 1): у этого
     правила специфичность (0,4,0) — она перекрывает opacity: 0 из строки
     выше по каскаду сама по себе, но базовые .task:hover .ta / .task:focus-*
     .ta (0,3,0) для раскрытия ниже неё и потому её не перебивают — без
     собственного opacity: 1 здесь кнопки открывались по высоте, но
     оставались невидимыми (проверено в Chromium на 390px: computed opacity
     после фокуса — 0). */
  .board.list .task:hover .ta { max-height: 32px; opacity: 1; margin-top: 3px; transition-delay: .7s; }
  .board.list .task:focus-within .ta, .board.list .task:focus-visible .ta { max-height: 32px; opacity: 1; margin-top: 3px; transition-delay: 0s; }
  .board.list .task.dragging .ta { max-height: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .board.list .task .ta { transition-duration: 0s; } }