/* home.css — главный экран по макету design/dashboard-mock.html.
   Значения (отступы, радиусы, кегли) — из макета без округления; цвета — токены
   (в тёмной теме равны значениям макета). Префикс hm-. */

.hm { box-sizing: border-box; padding: 24px 32px 24px; display: flex; flex-direction: column; gap: 20px; line-height: normal; }
.hm-preview { align-self: flex-end; font-size: 12px; color: var(--text-faint, #6b7672); display: flex; gap: 10px; align-items: center; }
.hm-preview__off { background: none; border: 0; padding: 0; color: var(--accent-primary); font: inherit; cursor: pointer; }
.hm-pagehead { display: flex; }
.hm-back { font-size: 12px; color: var(--accent-primary); text-decoration: none; }

.hm-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.hm-grid--single { grid-template-columns: minmax(0, 1fr); }
.hm-col { display: flex; flex-direction: column; gap: 20px; min-height: 0; }

.hm-card {
  box-sizing: border-box; padding: 20px 24px; border-radius: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  display: flex; flex-direction: column;
}
.hm-card[hidden] { display: none; }
.hm-card[data-block="deptQueue"] { gap: 12px; flex-grow: 1; }
.hm-card__head { display: flex; align-items: center; gap: 12px; }
.hm-card__t { font-size: 15px; font-weight: 600; }
.hm-card__hint { font-size: 12px; color: var(--text-muted); }
.hm-loading, .hm-empty { padding: 16px 0; color: var(--text-muted); font-size: 13px; }

/* «Решить сегодня» */
.hm-dec-head { display: flex; align-items: flex-end; gap: 14px; padding-bottom: 12px; }
.hm-num { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-dec-head__tx { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; line-height: 1.2; }
.hm-dec-head__t { font-size: 15px; font-weight: 600; }
.hm-dec-head__s { font-size: 12px; color: var(--text-muted); }
.hm-all { font-size: 12px; text-decoration: none; padding-bottom: 4px; color: var(--accent-primary); white-space: nowrap; }
.hm-all:hover { color: var(--accent-hover); }

.hm-dec {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 11px 8px; margin: 0 -8px; border-radius: 8px;
  border-top: 1px solid var(--border-default); cursor: pointer; color: var(--text-primary);
}
.hm-dec:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.hm-dec__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--row-hi); }
.hm-dec__ic svg { stroke: var(--text-muted); }
.hm-dec__ic--red    { background: var(--tint-danger,  #3a1f1c); }
.hm-dec__ic--red svg    { stroke: var(--status-danger); }
.hm-dec__ic--yellow { background: var(--tint-warning, #3a2e14); }
.hm-dec__ic--yellow svg { stroke: var(--status-warning); }
.hm-dec__tx { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; min-width: 0; }
.hm-dec__t { font-size: 14px; font-weight: 500; }
.hm-dec__s { font-size: 12px; color: var(--text-muted); }

.hm-btn {
  height: 32px; padding: 0 14px; border-radius: 8px; box-sizing: border-box; white-space: nowrap;
  display: inline-flex; align-items: center; text-decoration: none; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary);
  font-family: inherit; font-size: 12px; font-weight: 500;
}
.hm-btn:hover { background: var(--row-hi); }
.hm-btn--primary { border: 0; background: var(--accent-primary); color: var(--text-inverse); font-weight: 600; }
.hm-btn--primary:hover { background: var(--accent-hover); }
.hm-btn--sm { height: 28px; padding: 0 12px; }

/* «Показатели»: карусель плиток (макет: плитка 370 × 3 в окне 1144, зазор 16, сдвиг на плитку) */
.hm-strip { display: flex; flex-direction: column; gap: 10px; }
.hm-strip[hidden] { display: none; }
.kp-head { display: flex; align-items: center; gap: 12px; }
.kp-head__t { font-size: 15px; font-weight: 600; }
.kp-head__label { font-size: 12px; color: var(--text-muted); }
.kp-dots { display: flex; gap: 6px; align-items: center; margin-right: 8px; }
.kp-dot-btn { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--border-strong); }
.kp-dot-btn--on { background: var(--accent-primary); }
.kp-dot-btn:focus-visible, .kp-nav:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.kp-nav {
  width: 30px; height: 30px; border-radius: 8px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border-default); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
}
.kp-nav:hover { background: var(--row-hi); }

/* окно ленты; 2 px сверху оставлены под подъём плитки при наведении */
.kp-viewport { overflow: hidden; padding-top: 2px; margin-top: -2px; }
.kp-track { display: flex; gap: 16px; transform: translateX(calc(var(--kp-i, 0) * -1 * (100% + 16px) / 3)); }

.kp-tile {
  flex: 0 0 calc((100% - 32px) / 3); min-width: 0; box-sizing: border-box;
  padding: 20px 22px; border-radius: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: var(--text-primary);
}
.kp-tile:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.kp-tile__head { display: flex; align-items: center; gap: 8px; }
.kp-tile__label { font-size: 13px; color: var(--text-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* цвет несёт только точка; сам текст пояснения не красится */
.kp-tile__note { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; text-align: right; }
.kp-dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.kp-dot--red    { background: var(--status-danger); }
.kp-dot--yellow { background: var(--status-warning); }
.kp-tile__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-grow: 1; }
.kp-tile__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-tile__val { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.kp-unit { font-size: 16px; color: var(--text-faint, #6b7672); font-weight: 500; }
.kp-tile__sub { font-size: 12px; color: var(--text-muted); }
.kp-spark { flex: none; }
.kp-spark__base { stroke: var(--border-strong); }
.kp-spark__acc  { stroke: var(--accent-primary); }
.kp-spark__dot  { fill: var(--accent-primary); stroke: var(--bg-secondary); }
.kp-bars { display: flex; gap: 4px; align-items: flex-end; height: 36px; flex: none; }
.kp-bar { width: 14px; background: var(--border-strong); border-radius: 4px 4px 0 0; }
.kp-bar--now { background: var(--accent-primary); }

/* «Сегодня»: лента недели 300 px слева, повестка дня справа (макет: сетка 300 | 1fr, зазор 28) */
.hm-cal { display: block; }
.cal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
.cal-week { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cal-week__head { display: flex; align-items: center; gap: 10px; }
.cal-week__t { font-size: 15px; font-weight: 600; }
.cal-nav {
  width: 26px; height: 26px; border-radius: 7px; padding: 0; cursor: pointer; background: transparent;
  border: 1px solid var(--border-default); color: var(--text-primary); display: flex; align-items: center; justify-content: center;
}
.cal-nav:hover { background: var(--row-hi); }
.cal-nav:focus-visible, .cal-day:focus-visible, .cal-add:focus-visible, .cal-x:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border-radius: 10px; border: 0;
  background: transparent; cursor: pointer; font-family: inherit; color: var(--text-primary);
}
.cal-day:hover { background: var(--row-hi); }
.cal-day__wd { font-size: 11px; color: var(--text-muted); }
.cal-day__n { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.cal-day__dots { display: flex; gap: 3px; height: 4px; }
.cal-day--we .cal-day__wd, .cal-day--we .cal-day__n { color: var(--text-faint, #6b7672); }
.cal-day--sel { background: var(--row-hi); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* сегодня — заливка акцентом, текст и точки тёмные (как в макете) */
.cal-day--today, .cal-day--today:hover { background: var(--accent-primary); color: var(--text-inverse); }
.cal-day--today .cal-day__wd { color: var(--text-inverse); font-weight: 600; }
.cal-day--today .cal-day__n { font-weight: 700; }
.cal-day--today .cal-dot { background: var(--text-inverse); }
.cal-dot { width: 4px; height: 4px; border-radius: 999px; flex: none; }
.cal-dot--green  { background: var(--accent-primary); }
.cal-dot--yellow { background: var(--status-warning); }
.cal-dot--red    { background: var(--status-danger); }
.cal-sums { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--border-default); }
.cal-sum { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-sum:first-child { padding-top: 8px; }
.cal-sum .cal-dot { width: 6px; height: 6px; }
.cal-sum__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-sum--sync { margin-top: 2px; }

.cal-agenda { display: flex; flex-direction: column; border-left: 1px solid var(--border-default); padding-left: 28px; min-width: 0; }
.cal-agenda__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 8px; }
.cal-agenda__t { font-size: 15px; font-weight: 600; }
.cal-agenda__c { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cal-add {
  height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.cal-add:hover { background: var(--row-hi); }
.cal-empty { padding: 18px 0 6px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-default); }

.cal-row {
  display: grid; grid-template-columns: 64px 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px; margin: 0 -8px; border-radius: 8px; border-top: 1px solid var(--border-default);
}
.cal-row__time { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.cal-row__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--row-hi); display: flex; align-items: center; justify-content: center; }
.cal-row__ic svg { stroke: var(--text-muted); }
.cal-row__tx { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.cal-row__t { font-size: 14px; font-weight: 500; }
.cal-row__s { font-size: 12px; color: var(--text-muted); }
.cal-row__act { display: flex; align-items: center; gap: 6px; }
.cal-btn {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text-primary);
  font-size: 12px; display: flex; align-items: center; text-decoration: none; white-space: nowrap;
}
.cal-btn:hover { background: var(--row-hi); }
.cal-btn--primary { height: 32px; padding: 0 14px; border: 0; background: var(--accent-primary); color: var(--text-inverse); font-weight: 600; }
.cal-btn--primary:hover { background: var(--accent-hover); }
.cal-x {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.cal-row:hover .cal-x, .cal-x:focus-visible { opacity: 1; }
.cal-x:hover { background: var(--row-hi); color: var(--text-primary); }
/* прошла: приглушена, название зачёркнуто */
.cal-row--past, .cal-row--past .cal-row__time, .cal-row--past .cal-row__s { color: var(--text-dim); }
.cal-row--past .cal-row__t { text-decoration: line-through; font-weight: 400; }
.cal-row--past .cal-row__ic svg { stroke: var(--text-dim); }
/* срок: красный значок в тонированном квадрате; цвет несёт значок, не текст */
.cal-row--deadline .cal-row__time { color: var(--text-muted); }
.cal-row--red .cal-row__ic    { background: var(--tint-danger); }
.cal-row--red .cal-row__ic svg    { stroke: var(--status-danger); }
.cal-row--yellow .cal-row__ic { background: var(--tint-warning); }
.cal-row--yellow .cal-row__ic svg { stroke: var(--status-warning); }
/* ближайшая встреча: подсветка акцентом */
.cal-row--next {
  padding: 10px 12px; margin: 2px -8px; border-radius: 10px; border-top-color: transparent;
  background: var(--tint-accent); border: 1px solid var(--tint-accent-border);
}
.cal-row--next .cal-row__time { color: var(--accent-primary); font-weight: 500; }
.cal-row--next .cal-row__ic { background: var(--accent-primary); }
.cal-row--next .cal-row__ic svg { stroke: var(--text-inverse); stroke-width: 2.2; }
.cal-row--next .cal-row__t { font-weight: 600; }

/* форма «+ Встреча» */
.mf { display: flex; flex-direction: column; gap: 14px; }
.mf__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mf__l { font-size: 12px; color: var(--text-secondary, var(--text-muted)); }
.mf__req { color: var(--status-danger); font-weight: 400; }
.mf__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.mf__row--2 { grid-template-columns: 1fr 1fr; }
.mf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf__chips:empty { display: none; }
.mf__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--row-hi); font-size: 12px; }
.mf__chip button { width: 18px; height: 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.mf__chip button:hover { background: var(--border-default); color: var(--text-primary); }
.mf__ext-tag { font-size: 10px; color: var(--text-muted); }
.mf__sugg { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--bg-secondary); }
.mf__sugg[hidden] { display: none; }
.mf__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 0; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.mf__opt:hover, .mf__opt:focus-visible { background: var(--row-hi); }
.mf__opt small { font-size: 11px; color: var(--text-muted); }
.mf__none { padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
.mf__ext { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.mf__err { font-size: 12px; color: var(--status-danger); }
.mf__err[hidden] { display: none; }

/* «Задачи»: чекбокс, название 14 px, справа 12 px серая подсказка (макет) */
.hm-card[data-block="tasks"] { gap: 0; }
.tk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-bottom: 10px; }
.tk-head__t { font-size: 15px; font-weight: 600; }
.tk-head__c { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tk-tab { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tk-tab:hover { color: var(--text-primary); }
.tk-tab--on { color: var(--text-primary); font-weight: 500; }
.tk-tab:focus-visible, .hm-add:focus-visible, .tk-x:focus-visible, .tk-src:focus-visible, .tk-cb:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.hm-add {
  height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.hm-add:hover { background: var(--row-hi); }
.tk-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px;
  border-top: 1px solid var(--border-default); font-size: 14px; cursor: pointer;
}
.tk-cb { width: 16px; height: 16px; accent-color: var(--accent-primary); flex: none; margin: 0; cursor: pointer; }
.tk-t { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.tk-row--done .tk-t { text-decoration: line-through; color: var(--text-dim); }
.tk-src { color: var(--accent-primary); text-decoration: none; font-size: 13px; flex: none; }
.tk-h { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
.tk-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--status-danger); flex: none; }
.tk-row { position: relative; }
.tk-x {
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.tk-row:hover .tk-x, .tk-x:focus-visible { opacity: 1; }
.tk-x:hover { background: var(--row-hi); color: var(--text-primary); }
.tk-empty { padding: 14px 0 4px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-default); }
.mf__chip--self { padding-right: 10px; }
/* строка «Решить сегодня» после действия: не кнопка, а состояние */
.hm-btn--static { cursor: default; color: var(--text-muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 30px; }
.hm-btn--static:hover { background: transparent; }

/* «Открытые заявки по отделам» */
.hm-bars { display: flex; flex-direction: column; gap: 9px; }
.hm-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 13px; }
.hm-bar__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bar__track { height: 16px; display: flex; align-items: center; }
.hm-bar__fill { height: 16px; border-radius: 0 4px 4px 0; background: var(--border-strong); }
.hm-bar__fill--top { background: var(--accent-primary); }
.hm-bar__fill--none { background: var(--border-strong); opacity: .6; }
.hm-bar__v { margin-left: 8px; font-size: 12px; }
.hm-bar__r { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }
.hm-bar__fix { margin-left: auto; }
.hm-concl { font-size: 12px; color: var(--text-muted); margin-top: auto; }

/* «Люди и события»: строки по макету — аватарка 36 px, имя 14/500, подпись 12 серая; подвал — благодарность недели */
/* По высоте содержимого, без растяжения до низа колонки: когда «Кто в офисе» скрыт, внизу не остаётся пустой карточки (01.10.2026) */
.hm-card[data-block="people"] { gap: 0; }
.pe-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.pe-head__t { font-size: 15px; font-weight: 600; }
.pe-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px;
  border-top: 1px solid var(--border-default);
}
.pe-av {
  width: 36px; height: 36px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; background: var(--row-hi); color: var(--text-muted);
}
.pe-av--accent { background: var(--tint-accent-av); color: var(--accent-hover); }
.pe-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--row-hi); color: var(--text-muted);
}
.pe-tx { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; flex-grow: 1; min-width: 0; }
.pe-t { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.pe-s { font-size: 12px; color: var(--text-muted); }
.pe-done { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pe-empty { padding: 14px 0 4px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-default); }
.pe-footwrap { margin-top: auto; }
.pe-foot { padding-top: 14px; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 6px; }
.pe-foot__q { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.pe-foot__m { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-fill { flex-grow: 1; }
.pe-link { border: 0; padding: 0; background: none; font: inherit; color: var(--accent-primary); cursor: pointer; }
.pe-link:hover { text-decoration: underline; }
.pe-plus, .pe-del {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted);
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.pe-del { border-color: transparent; opacity: 0; transition: opacity .15s; }
.pe-foot:hover .pe-del, .pe-del:focus-visible { opacity: 1; }
.pe-plus:hover, .pe-del:hover { background: var(--row-hi); color: var(--text-primary); }
.pe-plus--on { border-color: var(--accent-primary); color: var(--accent-primary); }
.pe-plus:disabled { opacity: .5; cursor: default; }
.pe-link:focus-visible, .pe-plus:focus-visible, .pe-del:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.pe-count { align-self: flex-end; font-size: 11px; color: var(--text-muted); }
@media (max-width: 768px) {
  .pe-del { opacity: 1; }
}

/* «Кто в офисе» (переделан 03.10.2026): крупный счётчик, аватары — иллюстрация внахлёст, весь блок — ссылка на «Кто на месте» */
.hm-card[data-block="office"] { gap: 0; }
.of-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.of-head__t { font-size: 15px; font-weight: 600; }
.of-link, .of-static { position: relative; display: block; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.of-link { margin: -6px -8px; padding: 6px 8px; transition: background var(--transition-fast, .15s); }
.of-link:hover { background: var(--accent-surface); }
.of-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.of-go { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--accent-primary); }
.of-count { display: flex; align-items: baseline; gap: 10px; }
.of-count__l { font-size: 14px; color: var(--text-muted); }
.of-count__n { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.of-row { display: flex; align-items: center; margin-top: 14px; padding-left: 8px; }
.of-av { --av: 34px; margin-left: -5px; box-shadow: 0 0 0 2px var(--bg-secondary); }
.of-dot { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-primary); box-shadow: 0 0 0 2px var(--bg-secondary); }
.of-more {
  height: 34px; min-width: 34px; margin-left: 8px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; flex: none;
  background: var(--row-hi); color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.of-sum { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 768px) {
  .hm { padding: 16px 12px 24px; }
  /* плитки — лентой со свайпом; стрелки и точки на телефоне не нужны (подробный мобильный вид — волна 7) */
  .kp-dots, .kp-nav, .kp-head__label { display: none; }
  .kp-pdots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
  /* календарь: лента недели (7 дней с точками, свайп листает неделю) и под ней список выбранного дня; сводка недели справа
     на телефоне не нужна — она длинная, а точки на днях говорят то же самое */
  .cal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cal-week { gap: 10px; }
  .cal-sums { display: none; }
  .cal-days { gap: 2px; touch-action: pan-y; }
  .cal-day { min-height: 56px; }
  .cal-nav { width: 36px; height: 36px; }
  .cal-agenda { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-default); padding-top: 14px; }
  .cal-row { grid-template-columns: 52px 32px minmax(0, 1fr); }
  .cal-row__act { grid-column: 3; justify-self: start; }
  .cal-x { opacity: 1; }
  .tk-x { opacity: 1; right: -6px; }
  .tk-h { white-space: normal; text-align: right; }
  .mf__row, .mf__row--2, .mf__ext { grid-template-columns: minmax(0, 1fr); }
  .kp-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 0; }
  .kp-viewport::-webkit-scrollbar { display: none; }
  .kp-track { transform: none !important; }
  .kp-tile { flex: 0 0 84%; scroll-snap-align: start; }
  .hm-preview { align-self: stretch; justify-content: space-between; }
  .hm-grid { grid-template-columns: minmax(0, 1fr); }
  /* «Кто в офисе» на телефоне — сразу под календарём (решение владельца 01.10.2026): колонки растворяются, порядок задаёт order */
  .hm-grid, .hm-col { display: contents; }
  .hm-preview { order: 0; }
  .hm > [data-block="calendar"] { order: 1; }
  .hm-card[data-block="office"] { order: 2; }
  .hm > [data-block="kpis"] { order: 3; }
  .hm-card:not([data-block="office"]):not([data-block="calendar"]) { order: 4; }
  .hm-dec { grid-template-columns: 36px minmax(0, 1fr); }
  .hm-dec .hm-btn { grid-column: 2; justify-self: start; }
  .hm-bar { grid-template-columns: 84px minmax(0, 1fr) 52px; gap: 8px; }
  .hm-bar__fix { display: none; }   /* на телефоне кнопка не помещается: путь — «Сотрудники → Без отдела» */
}

/* Точки под лентой плиток — только на телефоне: лента листается свайпом, точка показывает плитку у края (Волна 7b) */
.kp-pdots { display: none; }
.kp-pdot { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.kp-pdot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: var(--border-strong); transition: width .2s ease, margin .2s ease, background .2s ease; }
.kp-pdot--on::after { width: 16px; margin-left: -8px; background: var(--accent-primary); }
.kp-pdot:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 768px) { .kp-pdots { display: flex; justify-content: center; gap: 0; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .kp-pdot::after { transition: none; } }

/* Подсказка под выбором исполнителя: коллегам из других отделов — через заявку */
.mf__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: 8px; background: var(--row-hi); font-size: 12px; color: var(--text-secondary); }
.mf__hint[hidden] { display: none; }
.mf__hint-hr { flex-basis: 100%; color: var(--text-muted); }

/* ── Задачи v2 (02.10.2026): группы, строка с метками, «Перенести срок», карточка справа ───────────────────────────────────── */
.tk-over { display: inline-flex; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--status-danger); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-over__l { margin-left: 4px; font-weight: 400; }

.tk-grp { border-top: 1px solid var(--border-default); }
.tk-grp:first-child { border-top: 0; }
.tk-grp__h {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 0 5px; border: 0; background: none; color: var(--text-muted);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-align: left;
}
.tk-grp__h:focus-visible, .tk-t:focus-visible, .tk-act:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; }
.tk-grp__c { font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tk-grp--overdue .tk-grp__n, .tk-grp--overdue .tk-grp__c { color: var(--status-danger); }
.tk-grp__chev { flex: none; transition: transform .15s; }
.tk-grp--closed .tk-grp__chev { transform: rotate(-90deg); }
.tk-grp--closed .tk-grp__rows { display: none; }
@media (prefers-reduced-motion: reduce) { .tk-grp__chev { transition: none; } }

.tk-grp__rows .tk-row { border-top: 0; cursor: default; }
.tk-grp__rows .tk-row + .tk-row { border-top: 1px solid var(--border-default); }
/* Строка в две линии: название на всю ширину, под ним метки и срок. В узкой колонке справа в одну линию название сжималось в столбик. */
.tk-grp__rows .tk-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 28px; column-gap: 12px; row-gap: 3px; align-items: start; padding: 10px 8px;
}
.tk-cb { grid-row: 1 / span 2; margin-top: 2px; }
.tk-t {
  grid-column: 2; grid-row: 1; min-width: 0; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; overflow-wrap: anywhere; line-height: 1.35;
}
.tk-t:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.tk-sub { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.tk-m { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tk-sub .tk-h { white-space: normal; }
.tk-pri {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; line-height: 16px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap;
}
.tk-pri--urgent { color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 55%, transparent); }
.tk-pri--low { border-color: transparent; color: var(--text-dim); padding: 0; }
.tk-wip { font-size: 11px; color: var(--accent-primary); white-space: nowrap; }
.tk-ck {
  font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 6px; background: var(--row-hi); color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-act {
  grid-column: 3; grid-row: 1; width: 26px; height: 26px; margin: -3px -3px 0 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.tk-row:hover .tk-act, .tk-row:focus-within .tk-act, .tk-act[aria-expanded="true"] { opacity: 1; }
.tk-act:hover { background: var(--row-hi); color: var(--text-primary); }
@media (hover: none) { .tk-act { opacity: 1; } }

.tk-pop {
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 30; min-width: 196px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}
.tk-pop > button {
  text-align: left; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.tk-pop > button:hover, .tk-pop > button:focus-visible { background: var(--row-hi); outline: none; }
.tk-pop__d { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-muted); }

/* Только короткий срок («завтра», «16 окт») и никаких меток — на компьютере строка остаётся одной. На телефоне всегда две линии. */
@media (min-width: 769px) {
  .tk-grp__rows .tk-row--flat { grid-template-columns: 20px minmax(0, 1fr) auto 28px; align-items: center; }
  .tk-row--flat .tk-cb { grid-row: 1; margin-top: 0; }
  .tk-row--flat .tk-sub { grid-column: 3; grid-row: 1; }
  .tk-row--flat .tk-sub .tk-h { white-space: nowrap; }
  .tk-row--flat .tk-act { grid-column: 4; margin-top: 0; }
}

@media (max-width: 768px) {
  .tk-grp__h { padding: 12px 0 6px; min-height: 40px; }
  .tk-grp__rows .tk-row { grid-template-columns: 22px minmax(0, 1fr) 36px; padding: 12px 8px; }
  .tk-cb { width: 20px; height: 20px; }
  .tk-t { font-size: 15px; }
  .tk-act { width: 36px; height: 36px; margin: -7px -4px 0 0; opacity: 1; }
  .tk-pop { right: 8px; left: 8px; top: auto; bottom: 8px; }
}

/* Карточка задачи — правая панель, оболочка общая с карточкой человека (.pc-*) */
.tc-panel { width: 520px; }
.tc-body { padding: 0; display: flex; flex-direction: column; }
.tc-sec { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.tc-saved { font-size: 11px; color: var(--accent-primary); margin-right: 6px; }
.tc-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--text-primary); overflow-wrap: anywhere; }
.tc-title--edit {
  display: block; width: calc(100% + 12px); margin: -4px -6px; padding: 4px 6px; resize: none; overflow: hidden; border: 1px solid transparent;
  border-radius: 8px; background: transparent; font-family: inherit;
}
.tc-title--edit:hover { border-color: var(--border-default); }
.tc-title--edit:focus { outline: none; border-color: var(--border-focus); background: var(--row-hi); }
.tc-sub { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.tc-lock { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--row-hi); font-size: 12px; line-height: 1.45; color: var(--text-muted); }

.tc-meta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; font-size: 13px; }
.tc-meta dt { font-size: 12px; color: var(--text-muted); }
.tc-meta dd { margin: 0; min-width: 0; }
.tc-who { overflow-wrap: anywhere; }
.tc-assignee, .tc-due, .tc-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tc-pick { position: relative; }
.tc-pick .tc-in { flex: 1; min-width: 160px; }
.tc-pick .mf__sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; }
.tc-in { height: 32px; padding: 0 10px; font-size: 13px; }
.tc-due .tc-in[type="date"] { width: 148px; }
.tc-due .tc-in[type="time"] { width: 104px; }
.tc-link { border: 0; padding: 0; background: none; color: var(--accent-primary); font: inherit; font-size: 12px; cursor: pointer; }
.tc-link:hover { text-decoration: underline; }

.tc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.tc-seg__b {
  border: 0; border-right: 1px solid var(--border-default); background: transparent; color: var(--text-muted); font: inherit; font-size: 12px;
  padding: 6px 11px; cursor: pointer;
}
.tc-seg__b:last-child { border-right: 0; }
.tc-seg__b:hover:not(:disabled) { background: var(--row-hi); color: var(--text-primary); }
.tc-seg__b:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.tc-seg__b:disabled { cursor: default; }
.tc-seg__b--on { background: color-mix(in srgb, var(--accent-primary) 20%, transparent); color: var(--text-primary); font-weight: 600; }
.tc-seg__b--on[data-priority="urgent"] { background: color-mix(in srgb, var(--status-warning) 22%, transparent); }
.tc-seg__b:disabled:not(.tc-seg__b--on) { opacity: .55; }

.tc-h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.tc-h-row { display: flex; align-items: baseline; justify-content: space-between; }
.tc-h-row .tc-h { margin-bottom: 0; }
.tc-prog, .tc-cnt { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.tc-note { width: 100%; font-size: 13px; line-height: 1.5; resize: vertical; }
.tc-text { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-none { margin: 0; font-size: 13px; color: var(--text-muted); }

.tc-bar { height: 4px; margin-top: 10px; border-radius: 2px; background: var(--border-default); overflow: hidden; }
.tc-bar i { display: block; height: 100%; background: var(--accent-primary); transition: width .2s; }
@media (prefers-reduced-motion: reduce) { .tc-bar i { transition: none; } }
.tc-cklist { margin: 8px 0 0; padding: 0; list-style: none; }
.tc-ck { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.tc-ck label { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; cursor: pointer; }
.tc-ck label span { overflow-wrap: anywhere; }
.tc-cb { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--accent-primary); cursor: pointer; }
.tc-ck--done label span { text-decoration: line-through; color: var(--text-dim); }
.tc-x {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.tc-ck:hover .tc-x, .tc-cm:hover .tc-x, .tc-x:focus-visible { opacity: 1; }
.tc-x:hover { background: var(--row-hi); color: var(--text-primary); }
@media (hover: none) { .tc-x { opacity: 1; } }
.tc-add { display: flex; gap: 8px; margin-top: 10px; }
.tc-add .tc-in { flex: 1; min-width: 0; }

.tc-cms { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.tc-cm header { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.tc-cm header b { color: var(--text-primary); font-weight: 600; }
.tc-cm header .tc-x { margin-left: auto; }
.tc-cm p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-compose { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 12px; }
.tc-compose textarea { width: 100%; font-size: 13px; resize: vertical; }

.tc-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: var(--space-4) var(--space-5); }
.tc-foot:empty { display: none; }
.tc-foot__n { font-size: 12px; color: var(--text-muted); }
.tc-danger {
  height: 32px; padding: 0 12px; border-radius: 8px; background: transparent; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--status-danger); border: 1px solid color-mix(in srgb, var(--status-danger) 50%, transparent);
}
.tc-danger:hover { background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.tc-panel:focus { outline: none; }   /* панель получает фокус программно, чтобы работал Esc; обводка вокруг неё лишняя */
.tc-panel :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (max-width: 768px) {
  .tc-panel { width: 100%; max-height: 92vh; }
  .tk-head .hm-add { margin-left: auto; }
  .tc-meta { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tc-meta dd { margin-bottom: 8px; }
  .tc-seg__b { padding: 9px 12px; }
  .tc-in { height: 40px; }
  .tc-title { font-size: 18px; }
  .tc-sec { padding: 14px var(--space-4); }
  .tc-foot { padding: 14px var(--space-4) 22px; }
}

/* Форма встречи: тип, подсказки (площадка по ссылке), галочка записи в календари */
.mf__type { display: flex; gap: 8px; flex-wrap: wrap; }
.mf__hint { font-size: 12px; color: var(--text-muted); }
.mf__check { flex-direction: row; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13px; }
.mf__check[hidden] { display: none; }

/* «Ближайшие события» на главной (components/events-block.js) */
.hm-card[data-block="events"] { gap: 0; }
.ev-head { padding-bottom: 6px; }
.ev-head__t { font-size: 15px; font-weight: 600; }
.ev-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.ev-row:first-of-type { border-top: 0; }
.ev-row__when { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.ev-row--today .ev-row__when { color: var(--accent-primary); font-weight: 600; }
.ev-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-row__t { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row__s { font-size: 11.5px; color: var(--text-muted); }
.ev-more { padding-top: 6px; font-size: 12px; color: var(--text-muted); }

/* «События и поздравления» — настройки (pages/events-settings.js) */
.evs { max-width: var(--page-max); }
.evs-card { margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 10px); background: var(--surface-primary); }
.evs-h { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.evs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.evs-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; font-size: 13.5px; }
.evs-check small { color: var(--text-muted); }
.evs-card-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.evs-card-state { font-size: 13px; color: var(--text-muted); }
.evs-preview { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.evs-preview__t { flex: 1 1 280px; font-size: 13px; color: var(--text-secondary, var(--text-muted)); }

/* hidden должен скрывать: .mf__f задаёт display:flex и перебивал атрибут (блок «Внешний участник» оставался у корпоративного события) */
.mf__f[hidden] { display: none; }