/* ═══════════════════════════════════════════════════════════
   ЗАДАЧИ — наряд смены
   ═══════════════════════════════════════════════════════════
   Календарь — прибор, журнал — книга смены, задачи — лист наряда,
   который висит у стойки и в котором ставят галки. Наверху плита из того
   же материала, что голова журнала: день, показания и линейка суток —
   дела рисками на своих часах, красная черта «сейчас» как в шахматке.
   Ниже бумага: разделы по срочности, строка — галка, час, род, что и
   где, кто. Галка крупная: это главное действие экрана.

   Цвета — только статусы (§8.3): просрочено — красный, пора — охра,
   сделано — зелёная галка. Роды дел цветом не различаются, у них значок. */
.tasks{
  display:none;flex:1;min-width:0;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
body.on-tasks .top,body.on-tasks .cal{display:none}
body.on-tasks .tasks{display:flex}

/* ── плита ── */
.tk-plate{
  position:relative;isolation:isolate;flex-shrink:0;
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
  --o1x:12%; --o1y:-60%; --o2x:72%; --o2y:-70%; --o3x:-6%; --o3y:-30%;
  --tk-bad:var(--plate-late); --tk-wait:var(--plate-wait);
}
.tk-plate > :not(.plate-lite){position:relative;z-index:1}
.tk-face{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:18px 22px 14px}
.tk-of{margin-right:auto;min-width:0}
.tk-of h2{font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--band-ink)}
.tk-of span{display:block;margin-top:7px;font-size:12.5px;color:var(--band-ink-2)}
.tk-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tk-new{height:30px;padding:0 12px}
.tk-new svg{width:13px;height:13px}

/* Линейка суток: та же, что несёт шахматку, только без строк — по ней
   видно, где день густой, ещё до чтения списка. */
.tk-day{position:relative;height:46px;margin:0 22px;border-top:1px solid rgb(237 234 227 / .12)}
.tk-hours{position:absolute;inset:0}
.tk-h{position:absolute;left:calc(var(--x) * 100%);top:0;width:1px;height:6px;background:rgb(237 234 227 / .18)}
.tk-h.big{height:10px;background:rgb(237 234 227 / .36)}
.tk-h b{
  position:absolute;top:13px;left:0;transform:translateX(-50%);
  font-size:9.5px;font-weight:500;color:var(--band-ink-3);
}
.tk-h:first-child b{transform:none}
.tk-h:last-child b{transform:translateX(-100%)}
.tk-pins{position:absolute;left:0;right:0;bottom:5px;height:14px}
.tk-pin{
  position:absolute;left:calc(var(--x) * 100%);bottom:0;width:7px;height:14px;
  transform:translateX(-50%);border-radius:2px;background:rgb(237 234 227 / .55);
  transition:transform var(--t-tap) var(--ease), background-color var(--t-tap) var(--ease);
}
.tk-pin.s-late{background:var(--tk-bad)}
.tk-pin.s-now,.tk-pin.s-soon{background:var(--tk-wait)}
.tk-pin.s-done{background:rgb(237 234 227 / .2)}
/* Срочное — риской выше: на линейке его видно раньше, чем прочитано. */
.tk-pin.p-urgent{height:20px;width:8px}
.tk-pin.p-low{height:10px}
@media (hover:hover) and (pointer:fine){
  .tk-pin:hover{transform:translateX(-50%) scaleY(1.3)}
}
.tk-pin:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}
.tk-nowline{
  position:absolute;left:calc(var(--x) * 100%);top:0;bottom:0;width:1.5px;
  background:var(--now);
}

/* ── бумага ── */
.tk-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tk-scroll:focus{outline:none}
.tk-body{padding:14px 22px 28px;max-width:1120px}

/* ── разделы ── */
.tk-sec{margin-top:18px}
.tk-sec h3{
  display:flex;align-items:baseline;gap:8px;padding:0 0 6px 2px;
  border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.tk-sec h3 em{font-style:normal;font-variant-numeric:tabular-nums}
.tk-sec h3 i{margin-left:auto;font-style:normal;font-family:inherit;font-size:9.5px;letter-spacing:.06em;text-transform:none}
.tk-sec.s-late h3{color:var(--late);border-color:var(--late-line)}
.tk-sec.s-now h3{color:var(--wait);border-color:var(--wait-line)}

/* ── строка ── */
.tk-row{
  display:grid;grid-template-columns:22px 44px 18px minmax(0,1fr) auto 34px;
  align-items:center;gap:0 12px;min-height:48px;padding:7px 4px;
  border-bottom:1px solid var(--rule-2);
}
.tk-box{
  width:20px;height:20px;border:1.5px solid var(--rule);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:transparent;background:var(--card);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
.tk-box svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){
  .tk-box:hover{border-color:var(--ink-3)}
}
.tk-box:active{transform:scale(.88)}
.tk-box:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tk-box[aria-checked="true"]{background:var(--ok);border-color:var(--ok);color:var(--on-status)}
.tk-at{
  font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.tk-glyph{display:flex;color:var(--ink-3)}
.tk-row.s-late .tk-at,.tk-row.s-late .tk-glyph,.tk-row.s-late .tk-when{color:var(--late)}
.tk-row.s-now .tk-at,.tk-row.s-now .tk-glyph,.tk-row.s-now .tk-when{color:var(--wait)}
.tk-main{min-width:0}
.tk-main b{
  display:block;font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tk-main span{
  display:block;margin-top:1px;font-size:11.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tk-open{font-size:11px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .tk-open:hover{color:var(--ink)}
}
.tk-when{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-who{
  width:26px;height:26px;border-radius:50%;justify-self:end;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;background:var(--sunk);color:var(--ink-2);
}
/* «Взять» появляется по наведению: чаще всего задачу берёт тот, кто её
   увидел, и три нажатия ради этого — два лишних. */
.tk-who.none{
  width:auto;padding:0 8px;border-radius:var(--r-pill);border:1px dashed var(--rule);
  background:transparent;color:var(--ink-3);font-family:inherit;font-size:10.5px;
  opacity:0;transition:opacity var(--t-tap) var(--ease);
}
.tk-row:hover .tk-who.none,.tk-who.none:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){
  .tk-who.none:hover{color:var(--ink);border-color:var(--ink-3)}
}
@media (hover:none){ .tk-who.none{opacity:1} }
/* Штамп срочности — на исключениях, тем же приёмом, что служебная печать
   на бланке: заглавные вразрядку, рамка. «Срочно» залит чернилами,
   «не к спеху» — контуром и тише. Обычное штампа не носит. */
.tk-stamp{
  display:inline-block;vertical-align:1px;margin-left:7px;padding:1px 5px 0;
  border:1px solid var(--rule);border-radius:var(--r-xs);
  font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-style:normal;color:var(--ink-3);
}
.tk-stamp.urgent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tk-row.p-low .tk-main b{font-weight:500;color:var(--ink-2)}
.tk-row.s-done .tk-stamp{opacity:.5}
/* Сделанное остаётся на листе зачёркнутым: смена видит, что уже прошло. */
.tk-row.s-done .tk-main b{color:var(--ink-3);font-weight:500;text-decoration:line-through;text-decoration-color:var(--rule)}
.tk-row.s-done .tk-at,.tk-row.s-done .tk-glyph{color:var(--ink-3)}

/* ── движение ── */
/* Галка залилась — строка уходит вправо, как лист из-под руки, и на её
   место поднимаются следующие. Новая строка приходит сверху: её только
   что написали. Прыжок по риске линейки подсвечивает строку охрой. */
.tk-row.is-going{animation:tkGo 260ms cubic-bezier(.4,0,1,1) forwards}
@keyframes tkGo{to{opacity:0;transform:translateX(10px)}}
.tk-row.is-new{animation:tkIn 320ms cubic-bezier(.2,.8,.2,1) both}
@keyframes tkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tk-row.is-lit{animation:tkLit 1.4s ease-out}
@keyframes tkLit{0%,35%{background:var(--wait-bg)}100%{background:transparent}}

.tk-empty{padding:44px 0;text-align:center;color:var(--ink-3);font-size:12.5px}
.tk-empty b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}

@media (max-width:1240px){
  .tk-face{padding:16px 16px 12px}
  .tk-day{margin:0 16px}
  .tk-body{padding:12px 16px 24px}
  .tk-row{grid-template-columns:22px 44px 18px minmax(0,1fr) 34px}
  .tk-when{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tk-row.is-going,.tk-row.is-new,.tk-row.is-lit{animation:none}
  .tk-pin,.tk-box{transition:none}
}