/* card.css · окно задачи на доске (срез 3 роадмапа доски задач).
   Разметка и размеры — с утверждённого макета окна буквально; классы с
   префиксом tc-, чтобы не задеть общие .sec/.sub/.chk панели. Подложка ниже
   модалки подтверждения admin.js (z-index 100): закрытие задачи из окна
   спрашивает поверх него. */

.tc-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(28,25,23,.38); display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.tc-backdrop[hidden] { display: none; }
.tc { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: min(760px, 100%);
  display: flex; flex-direction: column; box-shadow: var(--shadow-modal); animation: tc-in var(--dur-base) var(--ease-out); }
@keyframes tc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tc.p1 { --p: var(--err); --p-bg: var(--err-bg); }
.tc.p2 { --p: var(--warn-dot); --p-bg: var(--warn-bg); }
.tc.p3 { --p: var(--accent); --p-bg: var(--accent-bg); }
.tc.p4 { --p: var(--fg-faint); --p-bg: var(--paper-mute); }
.tc .tc-sub.p1 { --p: var(--err); --p-bg: var(--err-bg); }
.tc .tc-sub.p2 { --p: var(--warn-dot); --p-bg: var(--warn-bg); }
.tc .tc-sub.p3 { --p: var(--accent); --p-bg: var(--accent-bg); }
.tc .tc-sub.p4 { --p: var(--fg-faint); --p-bg: var(--paper-mute); }

.tc .tc-chk { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--p, var(--fg-faint)); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; padding: 0; flex: none; cursor: pointer; }
.tc .tc-chk:hover, .tc .tc-chk:focus-visible { background: var(--p-bg, var(--paper-mute)); color: var(--p, var(--fg-muted)); outline: none; }
.tc .tc-chk svg { width: 10px; height: 10px; }

/* ── шапка ── */
.tc-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border-faint); }
.tc-head .tc-chk { width: 20px; height: 20px; margin-top: 2px; grid-row: 1 / 3; }
.tc-head .tc-chk svg { width: 12px; height: 12px; }
.tc-parent { grid-column: 2; font-size: var(--fs-xs); color: var(--fg-label); }
.tc-title { grid-column: 2; font-size: 18px; font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; color: var(--fg); }
.tc-x { grid-column: 3; grid-row: 1 / 3; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tc-x:hover { background: var(--paper-mute); color: var(--fg); }
.tc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tc-meta { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: var(--fs-xs); color: var(--fg-muted); }
.tc-meta .m { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; }
.tc-meta .m svg { width: 12px; height: 12px; }
.tc-meta .m.late { color: var(--err); }
.tc-meta .pflag { color: var(--p); font-weight: 600; font-family: var(--font-sans); }
.tc-meta .lbl { background: var(--tag-bg); color: var(--tag-fg); padding: 1px 7px; border-radius: var(--radius-pill); }
.tc-meta .tg { cursor: default; }

/* ── тело ── */
.tc-body { overflow-y: auto; padding: 4px 20px 8px; }
.tc-sec { padding: 14px 0; border-bottom: 1px solid var(--border-faint); }
.tc-sec:last-child { border-bottom: none; }
.tc-sec-h { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--fg-label); margin-bottom: 8px; }
.tc-sec-h .n { font-family: var(--font-mono); font-weight: 500; color: var(--fg-faint); letter-spacing: 0; }
.tc-descr { font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-soft); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; }
.tc-descr a, .tc-cm-text a, .tc-att { color: var(--accent); text-decoration: none; }
.tc-descr a:hover, .tc-cm-text a:hover, .tc-att:hover { text-decoration: underline; }
.tc-none { font-size: var(--fs-sm); color: var(--fg-faint); }

.tc-subs { display: flex; flex-direction: column; }
.tc-sub { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border-faint); }
.tc-sub:first-child { border-top: none; padding-top: 2px; }
.tc-sub .tc-chk { margin-top: 1px; }
.tc-sub .st { font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; color: var(--fg); }
.tc-sub .sm { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-label); display: flex; gap: 8px; align-items: center; white-space: nowrap; margin-top: 2px; }
.tc-sub .sm .pf { color: var(--p); font-family: var(--font-sans); font-weight: 600; }
.tc-sub.done .st { color: var(--fg-faint); text-decoration: line-through; }
.tc-sub.done .tc-chk { background: var(--p-bg); color: var(--p); cursor: default; }
.tc-sub.busy { opacity: .5; pointer-events: none; }

.tc-cms { display: flex; flex-direction: column; gap: 12px; }
.tc-cm { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.tc-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.tc-av.me { background: var(--warn-bg); color: var(--ink); }
.tc-cm-h { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-xs); }
.tc-cm-h b { font-weight: 600; color: var(--fg); }
.tc-cm-h time { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-label); }
.tc-cm-text { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-soft); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.tc-att { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: var(--fs-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px 8px; }
.tc-att svg { width: 12px; height: 12px; }
.tc-cm.pending { opacity: .55; }

/* ── новый комментарий ── */
.tc-compose { padding: 12px 20px 14px; border-top: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 8px; }
.tc-compose textarea { width: 100%; box-sizing: border-box; min-height: 40px; max-height: 140px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--paper-raised); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.45; color: var(--fg); outline: none; }
.tc-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--paper-card); }
.tc-compose-row { display: flex; align-items: center; gap: 10px; }
.tc-compose-row .kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); }
.tc-compose-row .sp { flex: 1; }

/* ── подвал ── */
.tc-foot { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--border-faint); background: var(--paper-raised);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: var(--fs-xs); color: var(--fg-label); }
.tc-foot .sp { flex: 1; }
.tc-foot a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.tc-foot a:hover { text-decoration: underline; }
.tc-foot a svg { width: 12px; height: 12px; }

.tc-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: 16px; margin: 6px 0; }
.tc-err { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--err-bg);
  border: 1px solid var(--err-border); color: var(--err); font-size: var(--fs-sm); }
.tc-err .sp { flex: 1; }

/* карточка доски, чьё окно открыто */
.task.open { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-bg); }
.task:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* тост с «Вернуть» — поверх общего .toast панели */
.toast .toast-undo { margin-left: 12px; background: transparent; border: 1px solid rgba(250,250,248,.3); color: inherit; border-radius: var(--radius-sm);
  padding: 2px 9px; font-family: var(--font-sans); font-size: var(--fs-xs); cursor: pointer; }
.toast .toast-undo:hover { background: rgba(250,250,248,.12); }

@media (prefers-reduced-motion: reduce) { .tc { animation: none; } .tc-skel { animation: none; } }
@media (max-width: 760px) {
  .tc-backdrop { padding: 0; align-items: stretch; }
  .tc { max-width: none; max-height: none; border-radius: 0; }
  .tc-foot { border-radius: 0; }
}