/* Рабочее место сотрудника (docs/UI.md §5, §6.1, §7): список заявок, показатели, карточка с действиями, формы действий, карта площадки.
   Токены и общие компоненты — apps/ui/zsp.css; оболочка, карточка заявки, переписка — css/portal.css. */

.nav-gap { width: 0; }
.av-sm { width: 26px; height: 26px; font-size: 11px; }
.b-ic-sm { width: 30px; height: 30px; border-radius: 10px; } .b-ic-sm .ic { width: 17px; height: 17px; }
.btn-danger-text { color: var(--danger); }
.tag-late { background: color-mix(in srgb, var(--st-reject) 14%, transparent); color: color-mix(in srgb, var(--st-reject) 75%, var(--text)); }

/* Метка этапа — тон по этапу, как статусы (UI.md §2) */
.stage { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: color-mix(in srgb, var(--c) 70%, var(--text)); white-space: nowrap; }

/* ---------- Показатели ---------- */
.desk { display: grid; gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kpi { display: grid; align-content: space-between; gap: 6px; min-height: 76px; padding: 12px 14px; border-radius: 18px; background: var(--surface); text-align: left;
  border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.kpi:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); transform: translateY(-1px); }
.kpi span { font-size: 13px; color: var(--muted); line-height: 1.25; }
.kpi b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.kpi-main { background: #141821; color: #fff; } .kpi-main span { color: #b4bccb; }
[data-theme="dark"] .kpi-main { background: #eceff4; color: #0e1014; } [data-theme="dark"] .kpi-main span { color: #4a5160; }
.kpi-bad b { color: var(--danger); }
/* исполнитель: три цветные плашки по этапам; выбранная — сплошная */
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-3 .kpi { --k: var(--t-slate, #64748b); min-height: 96px; padding: 16px 20px; background: color-mix(in srgb, var(--k) 14%, var(--surface)); }
.kpis-3 .kpi span { font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--k) 65%, var(--text)); }
.kpis-3 .kpi b { font-size: 40px; color: color-mix(in srgb, var(--k) 70%, var(--text)); }
.kpis-3 .kpi-progress { --k: #141821; background: #141821; } .kpis-3 .kpi-progress span { color: #b4bccb; } .kpis-3 .kpi-progress b { color: #fff; }
[data-theme="dark"] .kpis-3 .kpi-progress { --k: #eceff4; background: #eceff4; } [data-theme="dark"] .kpis-3 .kpi-progress span { color: #4a5160; } [data-theme="dark"] .kpis-3 .kpi-progress b { color: #0e1014; }
.kpis-3 .kpi-accepted { --k: var(--t-blue, #2563eb); }
.kpis-3 .kpi-assigned { --k: var(--text); background: var(--surface); }   /* белая, без цвета */
.kpis-3 .kpi-assigned span { color: var(--text-2); } .kpis-3 .kpi-assigned b { color: var(--text); }
.kpis-3 .kpi.is-on { box-shadow: 0 8px 18px -10px var(--k); border-color: var(--k); }
.kpis-3 .kpi-accepted.is-on { background: var(--k); }
.kpis-3 .kpi-assigned.is-on { outline: 3px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 2px; }
.kpis-3 .kpi-accepted.is-on span, .kpis-3 .kpi-accepted.is-on b { color: #fff; }
.kpis-3 .kpi-progress.is-on { outline: 3px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 2px; }
.desk-more { display: none; }
/* вкладки, блок и поиск — в одну строку; поиск забирает остаток, на узком экране строка переносится */
.desk-bar { flex-wrap: wrap; }
.desk-bar .seg-tabs { flex: none; }
.desk-bar .seg-tabs button { padding: 0 10px; }
.desk-find { display: flex; gap: 8px; align-items: center; margin-left: auto; justify-content: flex-end; min-width: 0; }
.desk-dd { min-width: 0; }
.desk-dd-block { flex: none; width: 300px; }   /* названия блоков — в одну строку */
.desk-dd-org { flex: 0 1 240px; width: 240px; }
.desk-find .dd { width: 100%; }
.desk-find .dd-pop { left: auto; right: 0; }
.desk-find .dd-btn .dd-v, .desk-find .dd-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-find .dd-pop { min-width: 300px; }
.desk .page-head { justify-content: flex-start; align-items: flex-end; gap: 24px; }
.desk .page-head .desk-search { width: 320px; min-width: 0; }
/* «Заявка за арендатора» — справа от заголовка; поиск — правее (на телефоне кнопка — в нижней панели) */
.desk-title { display: flex; align-items: center; gap: 12px; }
.desk .page-head .desk-new { flex: none; }
/* заголовок, кнопка, поиск и фильтры — в одну строку; фильтры сжимаются, а не переносятся */
@media (min-width: 861px) {
  .desk .page-head { flex-wrap: nowrap; gap: 12px; }
  .desk .page-head > div:first-child { flex: none; }
  .desk .page-head .desk-search { flex: 0 1 280px; width: auto; min-width: 160px; margin-left: 12px; }
  .desk .page-head .desk-find { flex: 1 1 0; }
  .desk .page-head .desk-dd-block { flex: 1 1 300px; width: auto; }
  .desk .page-head .desk-dd-org { flex: 1 1 240px; width: auto; }
}
@media (max-width: 860px) {
  .desk .page-head .desk-new { display: none; }
  .desk #list { scroll-margin-top: 72px; }   /* список после выбора фильтра встаёт под липкой шапкой (60px), а не за ней */
}
/* поле поиска внутри списка блоков — по ширине списка, а не шире него */
.dd-pop .dd-search, .page .toolbar .dd-pop .dd-search { min-width: 0; width: 100%; }
@media (max-width: 1180px) { .desk-bar { flex-wrap: wrap; } }
.find-note { margin: 0 4px 2px; }

/* ---------- Список заявок: строка таблицы на ПК, карточка на телефоне ---------- */
.dlist { display: grid; gap: 8px; }
.drow { position: relative; display: grid; grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.3fr) 128px minmax(0, 1.2fr) 96px; gap: 14px; align-items: center;
  padding: 12px 16px; background: var(--surface); border-radius: 18px; border: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.drow:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary) 40%, transparent); }
.drow.is-urgent { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.drow.is-late .drow-due { color: var(--danger); font-weight: 600; }
.drow-ic { width: 38px; height: 38px; border-radius: 12px; } .drow-ic .ic { width: 20px; height: 20px; }
.drow-main { display: grid; gap: 1px; min-width: 0; }
.drow-meta, .drow-sum, .drow-who small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* вся строка — ссылка */
.drow-title:focus-visible { outline: none; } .drow-title:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
.drow-who { display: grid; min-width: 0; font-size: 13.5px; } .drow-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow-due { display: grid; gap: 1px; font-size: 13px; white-space: nowrap; min-width: 0; }
.drow-dd { display: inline-flex; gap: 5px; align-items: center; } .drow-due .ic { width: 15px; height: 15px; }
.drow-upd { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.desk-sort { margin-left: auto; }
.desk-sort .sb .sb-l { display: inline; }   /* в канбане на узких экранах подписи прячутся — здесь места хватает */
#deskOrder[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
.drow-state { display: grid; gap: 4px; min-width: 0; font-size: 13px; justify-items: start; }
.drow-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.drow-act { position: relative; z-index: 1; display: flex; justify-content: flex-end; text-align: right; }
.drow.is-skel { grid-template-columns: auto minmax(0, 1fr) 140px; pointer-events: none; } .drow.is-skel .drow-main { gap: 8px; }
.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Карточка заявки ---------- */
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ticket-top .back { margin: 0; }
.staff-ticket .ticket-meta > span:not(.chip):not(.tag):not(.stage) { display: inline-flex; gap: 5px; align-items: center; }
.act-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.act-l, .act-m, .act-r { display: flex; gap: 8px; flex-wrap: wrap; }
.act-m { flex: 1; }
.act-r { margin-left: auto; padding-left: 16px; border-left: 1px solid var(--border); }
.act-r:empty, .act-l:empty { display: none; }
.staff-ticket .card-timeline p { font-size: 12.5px; color: var(--muted); }

/* Связанные заявки (UI.md §5.2): компактное поле под рядом кнопок действий */
.links-box { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.lk-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.lk-h .ic { width: 15px; height: 15px; }
.lk-h em { font-style: normal; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
.lk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lk-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 3px 0; font-size: 13.5px; }
.lk-row + .lk-row { border-top: 1px solid var(--border); }
.lk-no { flex: none; font-weight: 600; }
.lk-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-b { flex: none; font-size: 12.5px; }
.lk-act { flex: none; display: flex; align-items: center; justify-content: flex-end; min-width: 28px; }
.lk-x .ic { width: 15px; height: 15px; }
.lk-ask { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lk-ask .btn { height: 26px; padding: 0 10px; font-size: 12.5px; }
.is-panel .links-box { padding: 8px 10px; }
/* в узкой панели и на телефоне — только номер, тема и отвязка */
.is-panel .lk-b, .is-panel .lk-row .chip { display: none; }
@media (max-width: 700px) { .lk-b, .lk-row .chip { display: none; } .lk-row { padding: 5px 0; } }

/* Шапка карточки (UI.md §5.1): организация — заметнее, «срок не установлен» — тоном «в работе», пометка «оформил за арендатора» */
.ticket-meta .tm-org { color: var(--text); font-weight: 600; }
.ticket-meta .tm-none { color: color-mix(in srgb, var(--st-work) 80%, var(--text)); }
.tm-by { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .tm-by .ic { width: 15px; height: 15px; }
.tl-all { margin-top: 10px; font-size: 13.5px; }

/* Название арендатора в заявке — кнопка окна сведений (UI.md §5.1, js/staff/orgcard.js) */
.tm-org-btn { display: inline-flex; align-items: center; gap: 5px; margin: -3px 0; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 600; line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); background: color-mix(in srgb, var(--primary) 6%, transparent);
  transition: background .15s, border-color .15s, color .15s; }
.tm-org-btn:hover, .tm-org-btn:focus-visible, .tm-org-btn[aria-expanded="true"] { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.tm-org-btn .ic { opacity: .8; }

/* Окно сведений об арендаторе: наименование, ИНН, договоры, литеры. Открывается над названием (is-up) или под ним */
.orgpop { position: fixed; z-index: 96; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 520px); display: flex; flex-direction: column; outline: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 50px -10px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .08); }
[data-theme="dark"] .orgpop { box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .65); }
.orgpop::after { content: ''; position: absolute; left: var(--arr, 20px); width: 11px; height: 11px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 2px; transform: rotate(45deg); }
.orgpop::after { top: -6px; border-width: 1px 0 0 1px; }                      /* окно под названием — стрелка вверх */
.orgpop.is-up::after { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }   /* окно над названием — стрелка вниз */
.orgpop-h { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 8px 14px; }
.orgpop-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); flex: none; }
.orgpop-ic .ic { width: 19px; height: 19px; }
.orgpop-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.orgpop-t b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.orgpop-t small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.orgpop-x { --h: 30px; margin: -3px -3px 0 0; }
.orgpop-b { min-height: 0; overflow: auto; display: grid; gap: 14px; padding: 4px 14px 14px; }
.orgpop-s h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.orgpop-s h3 em { font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center; background: var(--primary-soft); color: var(--primary); letter-spacing: 0; }
.orgpop-rows, .orgpop-lit { display: grid; gap: 3px; }
.orgpop-rows li, .orgpop-lit li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 11px; background: var(--surface-2); font-size: 13.5px; }
.orgpop-rows li { justify-content: space-between; }
.orgpop-rows b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgpop-rows span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orgpop-lit li { padding-left: 6px; }
.orgpop-lit i { font-style: normal; display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-size: 13px; font-weight: 700; flex: none; }
.orgpop-lit span { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgpop-lit b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.orgpop-none { font-size: 13px; color: var(--muted); }
.orgpop-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.orgpop-f .link { font-size: 13px; }
.orgpop-f .link .ic { width: 15px; height: 15px; }
.orgpop-err { padding-top: 0; } .orgpop-err .load-err { padding: 6px 0 0; background: none; }
.orgpop-err .load-err .ic { width: 24px; height: 24px; }

/* ---------- Панель заявки справа (UI.md §5.2) ---------- */
#tkpanel { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.tkp { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; pointer-events: auto; outline: none;
  background: var(--sheet-bg); border-radius: var(--radius); overflow: hidden; box-shadow: -18px 0 50px rgba(16,24,40,.18), 0 0 0 1px var(--border);
  transform: translateX(calc(100% + 24px)); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
#tkpanel.open .tkp { transform: none; }
.tkp:focus-visible { outline: none; }   /* фокус ставится на панель при открытии — рамка не нужна */
[data-theme="dark"] .tkp { box-shadow: -18px 0 50px rgba(0,0,0,.6), 0 0 0 1px var(--border); }
@media (prefers-reduced-motion: reduce) { .tkp { transition: none; } }
.tkp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tkp-bar .icon-btn:disabled { opacity: .35; cursor: default; }
.tkp-sp { flex: 1; }
.tkp-pos { margin-left: 4px; font-variant-numeric: tabular-nums; }
.tkp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 16px; }
.ticket.is-panel { display: grid; gap: 12px; padding: 16px 0 20px; }
.is-panel .ticket-top { justify-content: flex-end; }
.is-panel .ticket-head { gap: 12px; }
.is-panel .ticket-ic { width: 44px; height: 44px; border-radius: 14px; } .is-panel .ticket-ic .ic { width: 22px; height: 22px; }
.is-panel .tk-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.is-panel .ticket-meta { margin-top: 8px; }
/* действия — один ряд с переносом, «Выполнено» справа; ряд прилипает к верху панели */
.is-panel .act-bar { position: sticky; top: 0; z-index: 3; gap: 6px; padding: 8px; box-shadow: 0 0 0 1px var(--border), 0 8px 18px -12px rgba(16,24,40,.35); }
.is-panel .act-l, .is-panel .act-m { display: contents; }
.is-panel .act-r { padding-left: 0; border-left: 0; }
.is-panel .act-bar .btn { height: 34px; padding: 0 12px; font-size: 13.5px; gap: 6px; }
.is-panel .act-bar .btn .ic { width: 16px; height: 16px; }
.is-panel .ticket-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.is-panel .card { padding: 16px; }
.tkp-tabs { justify-self: start; }
.tkp-body[data-tab="chat"] .card-timeline, .tkp-body[data-tab="tl"] .chat-card { display: none; }
.is-panel .chat { max-height: none; overflow: visible; margin-bottom: 0; }
.is-panel .reply-box { position: sticky; bottom: 0; z-index: 2; margin: 12px -16px -16px; padding: 10px 16px 16px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }

/* Переписка: внутренние заметки — отдельным тоном и меткой */
.msg-note .msg-b { background: color-mix(in srgb, var(--st-work) 12%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--st-work) 45%, transparent); }
[data-theme="dark"] .msg-note .msg-b { background: rgba(242,169,59,.08); }
.note-mark { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--st-work) 75%, var(--text)); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.note-mark .ic { width: 13px; height: 13px; }
.msg-staff:not(.msg-note) .msg-b { background: color-mix(in srgb, var(--primary) 7%, var(--surface-2)); }
.reply-mode { margin-bottom: 8px; } .reply-mode .ic { width: 15px; height: 15px; }
.reply.is-note textarea { background: color-mix(in srgb, var(--st-work) 8%, var(--field)); }

/* ---------- Формы действий (шторка) ---------- */
.act-form { display: grid; gap: 16px; align-content: start; }
.field-l { font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 6px; }
.field-short input { max-width: 160px; }
.pick-list { display: grid; gap: 6px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field); cursor: pointer; }
.pick > span:last-child { display: grid; min-width: 0; } .pick small { font-size: 12.5px; }
.pick input { accent-color: var(--primary); width: 18px; height: 18px; flex: none; margin: 0; }
.pick:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.pick > .ic { color: var(--muted); }
button.pick { width: 100%; text-align: left; font: inherit; color: inherit; }
.pick.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

/* Окно «Связать»: поиск и выбор нескольких заявок */
.lk-pick { display: grid; gap: 8px; min-width: 0; }   /* тело шторки — грид: без min-width длинные строки вылезают вправо */
.lk-sub { margin: 0 0 4px; font-weight: 600; }
.lk-have { min-width: 0; }
.lk-note { margin: 2px 0; }
.lk-chosen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lk-off { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); background: var(--primary-soft); color: var(--primary); }
.lk-off:hover, .lk-off:focus-visible { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.lk-off .ic { width: 13px; height: 13px; }
.lk-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.lk-opt.is-linked { grid-template-columns: minmax(0, 1fr) auto; }
.lk-opt-b { display: grid; min-width: 0; gap: 1px; }
.lk-opt-t, .lk-opt-s { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-opt-t { font-weight: 600; }
.lk-opt-s { font-size: 12.5px; }
.lk-opt-a { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.lk-opt-a .ic { width: 14px; height: 14px; }
.lk-opt-was { color: var(--muted); font-weight: 600; }
/* вес селектора — как у «.pick > span:last-child» (там display: grid), иначе пометка и крестик встают друг под друга */
.lk-opt span.lk-opt-x { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lk-opt-x .lk-ask { white-space: nowrap; }
.lk-pick .pick-list { max-height: min(42vh, 340px); overflow-y: auto; overflow-x: hidden; padding: 2px; }
/* на узком экране пометка «Уже связано» лишняя — о ней говорит заголовок списка, место нужно теме заявки */
@media (max-width: 560px) { .lk-opt-was { display: none; } }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span { display: inline-flex; align-items: center; min-height: var(--h); padding: 6px 14px; border-radius: 19px; border: 1px solid var(--field-border); background: var(--field); font-size: 14px; font-weight: 500; }
.chip-radio input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
details.more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary); }
details.more[open] summary { margin-bottom: 8px; }

/* «За арендатора» */
.onb { display: grid; gap: 16px; align-content: start; }
.onb-reps { display: grid; gap: 8px; margin-top: 12px; }
.onb-blocks:disabled { opacity: .45; } .onb-blocks:disabled .tile { pointer-events: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .drow { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr) 120px 96px; }
  .drow-state { display: none; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .desk .page-head { flex-wrap: wrap; align-items: center; }
  .desk-more { display: inline-flex; margin-left: auto; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .desk-more[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary); }
  .desk:not(.find-open) .desk-search, .desk:not(.find-open) .desk-find { display: none; }
  .desk .page-head .desk-search { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-main { grid-column: 1 / -1; }
  .kpi { min-height: 64px; } .kpi b { font-size: 24px; }
  .kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpis-3 .kpi { min-height: 76px; padding: 10px 12px; } .kpis-3 .kpi span { font-size: 13px; } .kpis-3 .kpi b { font-size: 28px; }
  .drow { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px; }
  .drow-ic { grid-row: span 3; }
  .drow-who, .drow-due, .drow-state, .drow-act { grid-column: 2; }
  .drow-state { display: grid; } .drow-act { justify-content: flex-start; }
  .drow-act:empty { display: none; }
  .drow-act .btn { min-height: 44px; padding: 0 22px; }
  .desk-bar { min-width: 0; } .desk-sort { margin-left: 0; width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .desk-bar, .desk-find { width: 100%; } .desk-find .dd { flex: 1; min-width: 0; }
  .desk-find { flex-wrap: wrap; } .desk-dd-block, .desk-dd-org { flex: 1 1 100%; width: auto; }
  .desk-find .dd-pop { min-width: 0; }
  .seg-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* панель действий — внизу экрана над вкладками, крупные кнопки (UI.md §7.2) */
  .act-bar { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: var(--shadow); }
  .act-bar .btn { min-height: 44px; }
  .act-r { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; } .act-r .btn { flex: 1; }
  .act-l { width: 100%; } .act-l .btn { flex: 1; }
}
.seg em:empty { display: none; }

/* ---------- Карта площадки (UI.md §6.1; эталон — design/concepts/shared/base.css, блок карты) ---------- */
.mapcard { --map-bg: #f3f5f8; --map-b: #dfe5ec; --map-bl: #8f9cab; --map-road: #e7ebf1; --map-edge: #c9d1db; --map-txt: #4c6076; --map-lbl: #22384e;
  padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; }
[data-theme="dark"] .mapcard { --map-bg: #12161c; --map-b: #232a35; --map-bl: #55606f; --map-road: #1b222b; --map-edge: #313b49; --map-txt: #8f9aab; --map-lbl: #d2dae6; }
.map-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; }
.map-t { display: grid; gap: 2px; } .map-t .card-h { margin: 0; }
.mk-d { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.mk-urgent { --c: var(--danger); } .mk-new { --c: var(--st-new); } .mk-work { --c: var(--st-work); } .mk-pause { --c: var(--st-pause); } .mk-wait { --c: var(--st-wait); }
.map-body { display: flex; border-top: 1px solid var(--border); min-height: 0; }
.map-view { position: relative; background: var(--map-bg); min-width: 0; overflow: hidden; }
.zmap-svg { display: block; width: 100%; height: 100%; }
.map-list { list-style: none; margin: 0; padding: 10px; display: flex; gap: 8px; overflow: auto; min-width: 0; }
.map-list li[hidden] { display: none; }
.map-empty { padding: 14px 8px; font-size: 13.5px; }
.map-item { display: grid; gap: 5px; align-content: start; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.map-item:hover, .map-item.is-hl { border-color: var(--primary); }
.mi-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mi-loc { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; font-weight: 600; }
.mi-loc .ic, .mi-due .ic { width: 13px; height: 13px; }
.mi-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.mi-sub { font-size: 12.5px; line-height: 1.3; color: var(--muted); margin-top: -3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mi-due { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.map-item.is-flash { animation: miFlash 1.6s ease-out; }
@keyframes miFlash { 0%, 30% { border-color: var(--st-wait); background: color-mix(in srgb, var(--st-wait) 16%, var(--surface-2)); } 100% { border-color: transparent; } }
/* режимы: карта / на весь экран */
.mappage { display: grid; gap: 16px; }
/* карта на ПК помещается в окно без прокрутки страницы: нижний отступ main — 8 px, остальное — в высоте карты */
@media (min-width: 861px) { .main:has(> .mappage) { padding-bottom: 8px; } }
.mapcard-wide .map-body { height: clamp(460px, calc(100vh - 238px), 820px); }
.mapcard-wide .map-view, .mapcard.is-full .map-view { flex: 1; height: 100%; }
.mapcard-wide .map-list, .mapcard.is-full .map-list { flex: none; width: 320px; flex-direction: column; border-left: 1px solid var(--border); }
.mapcard-wide .map-list li, .mapcard.is-full .map-list li { display: block; }
.mapcard.is-full { position: fixed; inset: 0; z-index: 50; border-radius: 0; }
.mapcard.is-full .map-body { flex: 1; height: auto; }
.mapcard.is-full .map-full { width: 46px; height: 46px; } .mapcard.is-full .map-full .ic { width: 26px; height: 26px; stroke-width: 2.4; }
body.map-lock { overflow: hidden; }
/* фильтры: статусы — «таблетки» со счётчиками, группы — кнопки-иконки */
.map-st { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 auto 0 8px; }
.mf-st { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px; font-size: 13px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--border); transition: opacity .15s, background .15s; }
.mf-st:hover { border-color: var(--c); }
.mf-st .mk-d { transition: background .15s, box-shadow .15s; }
.mf-st em { font-style: normal; font-weight: 700; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mf-st.is-off { background: transparent; color: var(--muted); }
.mf-st.is-off .mk-d { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.mf-st.is-off em { opacity: .6; }
/* «Выполняются» — отдельный переключатель после статусов: включён — янтарный, статусы приглушены (не действуют) */
.mf-div { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border); }
.mf-run { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px; font-size: 13px; font-weight: 500;
  background: transparent; border: 1px dashed var(--wk-ring); color: var(--text); transition: background .15s, border-color .15s; flex: none; }
.mf-run:hover { background: var(--wk-bg); }
.mf-run .wk-dot { animation: none; }
.mf-run em { font-style: normal; font-weight: 700; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mf-run.is-on { background: var(--wk-bg); border: 1px solid var(--wk-ring); color: var(--wk-ink); font-weight: 600; }
.mf-run.is-on .wk-dot { animation: wk-pulse 1.6s ease-in-out infinite; } .mf-run.is-on em { color: var(--wk-ink); }
.map-st.is-run .mf-st { opacity: .45; }
.map-f { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.map-gr { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mg-all { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); }
.mg-all.is-on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.mg-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid transparent; transition: opacity .15s, transform .15s, background .15s; }
.mg-btn .ic { width: 20px; height: 20px; }
.mg-btn:hover { transform: translateY(-1px); border-color: var(--bf); }
.mg-btn em { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bf); color: var(--surface); font: 700 10.5px/17px var(--font); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.mg-btn em:empty { display: none; }
.mg-btn.is-empty { opacity: .45; }
.mg-btn.is-off { background: transparent; color: var(--muted); border-color: var(--border); opacity: .6; }
.mg-btn.is-off em { background: var(--muted); }
.mg-btn::after { content: attr(data-gt); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: var(--text); color: var(--surface); font: 500 12.5px var(--font); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 5; }
.mg-btn:hover::after, .mg-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* схема: оформление через токены (светлая и тёмная темы) */
.zmap-svg #layer-base > rect { fill: var(--map-bg); }
.zmap-svg #layer-base > path:nth-of-type(1) { stroke: var(--map-road); }
.zmap-svg #layer-base > path:nth-of-type(2) { stroke: var(--map-edge); }
.zmap-svg .road { fill: none; stroke: var(--map-road); stroke-width: 15; stroke-linejoin: round; }
.zmap-svg .minor { fill: var(--map-b); stroke: var(--map-bl); stroke-width: 2; }
.zmap-svg .building { fill: var(--map-b); stroke: var(--map-bl); stroke-width: 2; stroke-linejoin: miter; }
.zmap-svg #layer-base > g:not(.minor) { stroke: var(--map-bl); }
.zmap-svg .label { font: 600 25px var(--font); fill: var(--map-lbl); text-anchor: middle; dominant-baseline: middle; opacity: .72; pointer-events: none; }
.zmap-svg .label.corpus { font-size: 16px; font-weight: 400; } .zmap-svg .label.small { font-size: 19px; } .zmap-svg .label[data-building="ab"] { font-size: 22px; }
.zmap-svg .caption { font-size: 17px; fill: var(--map-txt); text-anchor: middle; }
.zmap-svg .street { font-size: 24px; letter-spacing: 3px; fill: var(--map-txt); text-anchor: middle; opacity: .8; }
/* маяки: иконка группы заявки в круге цвета статуса + мерцание «Радар» */
.mk { cursor: pointer; outline: none; transition: opacity .25s; --mk-ink: #fff; }
.mk-work { --mk-ink: #2b1d00; }
[data-theme="dark"] .mk { --mk-ink: #0b1020; } [data-theme="dark"] .mk-work { --mk-ink: #1d1400; }
.mk.is-off { opacity: 0; pointer-events: none; }
.mk-dot { fill: var(--c); stroke: var(--map-bg); stroke-width: 2.6; transition: fill .5s ease; }
.mk-ico { fill: none; stroke: var(--mk-ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mk-body { transform-box: fill-box; transform-origin: center; transition: transform .15s; }
.mk.is-hl .mk-body, .mk:focus-visible .mk-body { transform: scale(1.5); }   /* не :hover — см. map.js hl(): плавно и после переноса маяка */
.mk-hit { fill: transparent; }
.mk:focus-visible .mk-hit { stroke: var(--primary); stroke-width: 2; }
.mk-fx { pointer-events: none; }
.fx { transform-box: fill-box; transform-origin: center; fill: var(--c); stroke: none; opacity: 0; transition: fill .5s ease;
  animation: fxB 3.2s ease-out var(--d) infinite both; }
.fx.b2 { animation-delay: calc(var(--d) + 1.6s); }
@keyframes fxB { 0% { transform: scale(1); opacity: calc(.42 * var(--fxk, 1)); } 100% { transform: scale(4); opacity: 0; } }
/* учёт времени: пульсация маяков без идущей работы — на 20 % слабее; идёт работа — янтарное кольцо медленно вращается (оборот 9 с) */
.mk { --fxk: .8; } .mk.is-run { --fxk: 1; }
.mk-run { fill: none; stroke: var(--wk-dot); stroke-width: 2.6; stroke-dasharray: 7 5; stroke-linecap: round; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: mkRun 9s linear infinite; }
.mk.is-hl .mk-run { stroke-width: 3.2; }
@keyframes mkRun { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-run { animation: none; } }
/* новая заявка «падает с неба»: крупный полупрозрачный значок с ускорением уменьшается до места, тень сжимается и темнеет,
   при касании — отскок и волна; мерцание включается после приземления */
.mk.is-new .mk-body { animation: mkDrop 1.25s both; }
.mk.is-new .mk-fx { opacity: 0; animation: mkFxOn 0s 1.2s both; }
.mk-shadow { transform-box: fill-box; transform-origin: center; fill: #000; pointer-events: none; animation: mkShadow 1.25s both; }
.mk-arrive { transform-box: fill-box; transform-origin: center; fill: none; stroke: var(--c); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; animation: mkArr 1s ease-out 1s forwards; pointer-events: none; }
.mk-arrive.a2 { stroke-width: 2; animation-delay: 1.18s; }
@keyframes mkDrop {
  0% { transform: scale(7); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  12% { opacity: .4; }
  60% { opacity: .55; }
  80% { transform: scale(1); opacity: 1; animation-timing-function: ease-out; }
  87% { transform: scale(.8); }
  94% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; } }
@keyframes mkShadow {
  0% { transform: scale(3.2); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  80% { transform: scale(1.15); opacity: .45; }
  100% { transform: scale(1.3); opacity: 0; } }
@keyframes mkFxOn { to { opacity: 1; } }
@keyframes mkArr { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
/* на подтверждение арендатору: подпрыгивание, вспышка, салют зелёными точками и смена цвета маяка */
.mk.is-confirm .mk-body { animation: cfPop .7s cubic-bezier(.3, 1.6, .5, 1); }
.mk-confirm { pointer-events: none; }
.cf-flash { transform-box: fill-box; transform-origin: center; fill: var(--st-wait); opacity: 0; animation: cfFlash .7s ease-out both; }
.cf-dot { fill: var(--st-done); opacity: 0; animation: cfDot 1.15s cubic-bezier(.15, .7, .3, 1) var(--t) both; }
.cf-dot.cf-alt { fill: var(--st-wait); }
@keyframes cfPop { 0% { transform: scale(1); } 25% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes cfFlash { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes cfDot { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 55% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 14px)) scale(.35); opacity: 0; } }
/* закрытие: маяк гаснет, три зелёных кольца и «+1» */
.mk.is-closing { pointer-events: none; }
.mk.is-closing .mk-fx { display: none; }
.mk.is-closing .mk-body { animation: mkOut .72s ease-in both; }
@keyframes mkOut { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.bz { transform-box: fill-box; transform-origin: center; fill: none; stroke: var(--st-done); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; animation: bz 1.3s ease-out .14s both; }
.bz2 { animation-delay: .4s; stroke-width: 2.2; } .bz3 { animation-delay: .66s; stroke-width: 1.4; }
@keyframes bz { 0% { transform: scale(.8); opacity: .95; } 100% { transform: scale(5.2); opacity: 0; } }
.mk-plus { font: 800 26px var(--font); fill: var(--st-done); stroke: var(--map-bg); stroke-width: 5px; paint-order: stroke; opacity: 0; animation: plus 2.15s ease-out .21s both; }
@keyframes plus { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 18% { transform: translateY(-8px) scale(1.25); opacity: 1; } 100% { transform: translateY(-76px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx, .mk-arrive { animation: none; opacity: .2; transform: scale(1.8); }
  .mk.is-new .mk-body, .mk.is-new .mk-fx { animation: none; opacity: 1; } .mk-shadow { display: none; }
  .mk.is-confirm .mk-body, .map-item.is-flash { animation: none; } .mk-confirm { display: none; }
}
/* подсказка у маяка */
#maptip { position: fixed; z-index: 95; pointer-events: none; width: 280px; padding: 12px 14px; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow), 0 0 0 1px var(--border); display: grid; gap: 6px; font-size: 13.5px; }
#maptip[hidden] { display: none; }
#maptip b { font-size: 14.5px; line-height: 1.3; }
.mt-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; }
.mt-loc { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; } .mt-loc .ic { width: 13px; height: 13px; }
.mt-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.mt-ex { font-size: 12.5px; color: var(--muted); }
#maptip small { font-size: 11.5px; color: var(--primary); }
@media (max-width: 860px) {
  .map-h { padding: 12px 14px; } .map-st { order: 3; width: 100%; margin: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .mf-st { flex: none; }
  .map-full { margin-left: auto; }
  .mapcard-wide .map-body, .mapcard.is-full .map-body { flex-direction: column; }
  .mapcard-wide .map-body { height: auto; } .mapcard-wide .map-view { height: 320px; flex: none; }
  .mapcard.is-full .map-view { flex: 1; min-height: 0; }
  .mapcard-wide .map-list, .mapcard.is-full .map-list { width: auto; border-left: 0; border-top: 1px solid var(--border); flex-direction: row; }
  .mapcard-wide .map-list li, .mapcard.is-full .map-list li { flex: none; width: 230px; display: flex; } .mapcard .map-item { height: 100%; }
  .map-gr { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding: 8px 4px 2px; margin-top: -2px; } .mg-all, .mg-btn { flex: none; } .mg-btn::after { display: none; }
  .reply-mode { padding: 5px 3px; } .reply-mode button { height: 44px; }
  .reply { align-items: stretch; } .reply textarea { min-height: 56px; }
}

/* ---------- Настройки → Арендаторы (администратор, staff/tenants.js) ---------- */
.set-tabs a { text-decoration: none; } .set-tabs .ic { width: 16px; height: 16px; }
.tn-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.tn-ic { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.tn-row.is-gone .trow-title { color: var(--muted); }
.tn-side { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#tn { display: grid; gap: 20px; } .tn-head { align-items: center; }
.tn-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.tn-h .card-h { margin: 0; display: flex; align-items: center; gap: 8px; }
.plain-list.tn-items { gap: 0; }
.tn-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.tn-items li:first-child { border-top: 0; }
.tn-items li > .ic { align-self: start; margin-top: 3px; }
.tn-items li.is-off > span:not(.tn-marks), .tn-items li.is-off > .ic { opacity: .55; }
.tn-items b .muted { font-weight: 400; }
.tn-marks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tn-form .hint { display: block; }
.tn-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tn-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tn-note { font-size: 13.5px; margin: 0; }
.tn-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.tn-danger { color: var(--danger); }
.tn-danger.is-confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 860px) {
  .tn-bar .search { flex: 1 1 100%; min-width: 0; }
  .tn-bar .seg { width: 100%; overflow-x: auto; } .tn-bar .seg button { flex: none; }
  .tn-items li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tn-items .tn-marks { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .tn-items li > .icon-btn { grid-column: 3; grid-row: 1; }
  .tn-2, .tn-3 { grid-template-columns: minmax(0, 1fr); }
  .profile .page-head .row, .tn-page .page-head .set-tabs { width: 100%; }
  .set-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .set-tabs a { justify-content: center; }
  .tn-row .trow-side { grid-column: 2; justify-content: flex-start; }
}

/* ---------- Учёт времени (docs/UI.md §5.4, js/staff/work.js): затраченное время идёт — янтарь с точкой, пауза в работе — фиолетовый,
   итог выполненной — зелёный; карточка канбана с идущей работой обведена ---------- */
:root { --wk-bg: #fdf0dc; --wk-ink: #7a4b06; --wk-ring: #e9a33a; --wk-dot: #d9821a; --wk-long-bg: #fde6d8; --wk-long-ink: #9a3412; --wk-long-dot: #e8590c; }
[data-theme="dark"] { --wk-bg: rgba(242, 169, 59, .14); --wk-ink: #f6c27a; --wk-ring: rgba(242, 169, 59, .55); --wk-dot: #f2a93b;
  --wk-long-bg: rgba(251, 125, 60, .16); --wk-long-ink: #ffb38a; --wk-long-dot: #ff8a4c; }
.wk { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; line-height: 1; }
.wk .ic { width: 13px; height: 13px; }
.wk-run { background: var(--wk-bg); color: var(--wk-ink); box-shadow: inset 0 0 0 1.5px var(--wk-ring); }
.wk-run.wk-long { background: var(--wk-long-bg); color: var(--wk-long-ink); box-shadow: inset 0 0 0 1.5px var(--wk-long-dot); --wk-dot: var(--wk-long-dot); }
.wk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wk-dot); flex: none; animation: wk-pulse 1.6s ease-in-out infinite; }
@keyframes wk-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wk-dot) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.wk-pause { background: color-mix(in srgb, var(--st-pause) 15%, transparent); color: color-mix(in srgb, var(--st-pause) 75%, var(--text)); }
.wk-done { background: color-mix(in srgb, var(--st-done) 13%, transparent); color: color-mix(in srgb, var(--st-done) 70%, var(--text)); }
.kcard.is-run { border-color: var(--wk-ring); box-shadow: 0 0 0 1px var(--wk-ring), 0 6px 18px -8px color-mix(in srgb, var(--wk-dot) 45%, transparent); }
.c-age { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-age-t { flex: 1 1 140px; min-width: 0; }
.wk-none { background: var(--surface-2); color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .wk-dot { animation: none; } }

/* «Сейчас выполняю» над списком: тёмная карточка с часами (UI.md §5.4) */
.now-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.now-work:empty { display: none; }
.now-card { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--radius); background: #141821; color: #fff; }
[data-theme="dark"] .now-card { background: #1f232b; box-shadow: inset 0 0 0 1px var(--wk-ring); }
.now-card.is-long { box-shadow: inset 0 0 0 2px var(--wk-long-dot); }
.now-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f2c27a; }
.now-h em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: #ffb38a; }
.now-card .wk-dot { --wk-dot: #f2a93b; width: 9px; height: 9px; }
.now-clock { display: flex; align-items: baseline; gap: 10px; }
.now-clock b { font: 800 34px/1.05 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.now-clock > span { font-size: 12.5px; color: #aab1bf; }
.now-t { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-t:hover { text-decoration: underline; }
.now-t .num { color: inherit; }
.now-s { margin: -4px 0 0; font-size: 12.5px; color: #aab1bf; } .now-s b { color: #ffb38a; font-weight: 600; }
.now-act { display: flex; gap: 8px; margin-top: 2px; } .now-act .btn { flex: 1; justify-content: center; }
.now-pause { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; } .now-pause:hover { background: rgba(255, 255, 255, .2); }

/* Карточка заявки: «Время по заявке» — затрачено, общее время, срок */
.tm-box { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; }
.tm-card { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.tm-card.is-run { border-color: var(--wk-ring); box-shadow: 0 0 0 1px var(--wk-ring); }
.tm-l { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tm-card.is-run .tm-l { color: var(--wk-ink); }
.tm-v { font: 800 24px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tm-v.is-late { color: var(--danger); }
.tm-s { margin: 0; font-size: 12.5px; color: var(--muted); }
.tm-segs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.tm-segs li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
.tm-segs li > span:first-child { display: grid; place-items: center; color: var(--st-done); } .tm-segs .ic { width: 14px; height: 14px; }
.tm-segs li.is-run b { color: var(--wk-ink); }
.tm-sl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--surface-2); margin-top: 4px; }
.tm-bar i { min-width: 0; background: color-mix(in srgb, var(--muted) 35%, transparent); } .tm-bar i.w { background: var(--wk-dot); } .tm-bar i.p { background: color-mix(in srgb, var(--st-pause) 55%, transparent); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--muted); }
.tm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tm-legend i { width: 9px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.tm-legend i.w { background: var(--wk-dot); } .tm-legend i.p { background: color-mix(in srgb, var(--st-pause) 55%, transparent); }
.is-panel .tm-box, .tk-top .tm-box { margin-top: 0; }
.is-panel .tm-box { grid-template-columns: 1fr 1fr; } .is-panel .tm-box .tm-card:first-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .tm-box { grid-template-columns: 1fr 1fr; } .tm-box .tm-card:first-child { grid-column: 1 / -1; } .tm-v { font-size: 21px; } }

/* Форма «Завершить»: отрезки работы */
.seg-box { gap: 8px; }
.seg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .seg-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.seg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seg-row { display: grid; grid-template-columns: 1fr 104px 32px; gap: 8px; align-items: center; font-size: 13.5px; }
.seg-l { display: flex; align-items: center; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.seg-m { position: relative; display: block; }
.seg-m input { width: 100%; padding-right: 40px; text-align: right; }
.seg-m span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.seg-add { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; } .seg-add .ic { width: 15px; height: 15px; }