/* ============================================================
   HR · кабинет рекрутера — дизайн-система v2
   Источник: docs/ТЗ_интерфейс.md, прототип docs/prototype/index.html.
   Правила: цвета и размеры — только из токенов ниже; обе темы равноправны;
   цвет статуса = «чей ход» (4 группы), красный — только срочность и ошибки.
   ============================================================ */

/* ---------- шрифт: свой, не с Google Fonts (из РФ он грузится нестабильно) ---------- */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/onest-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/onest-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- токены ---------- */
:root {
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F3F4F8;
  --surface: #FFFFFF;
  --surface-2: #F2F3F7;
  --surface-3: #E8EAF0;
  --line: #E4E6ED;
  --line-2: #D2D5DE;
  --ink: #14161D;
  --ink-2: #535A69;
  --ink-3: #687080;

  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-ink: #3E36C4;
  --accent-soft: #ECEBFD;
  --on-accent: #FFFFFF;

  /* группы «чей ход» */
  --decide: #4F46E5;  --decide-soft: #ECEBFD;
  --wait: #8A6420;    --wait-soft: #F5EEDF;
  --call: #1767B0;    --call-soft: #E3EEF9;
  --done: #1D7A4C;    --done-soft: #E2F2E9;
  --closed: #5E6572;  --closed-soft: #ECEDF1;
  --backup: #0B6B74;  --backup-soft: #E0F2F3;   /* «Бэкап»: ждут места (27.09) */
  --paused: #8A5A00;  --paused-soft: #FBF0DC;   /* «Вакансия закрыта»: ждут открытия (02.10) */

  --amber: #9C5B00;   /* только «не подтверждён / итог не отмечен / ограничения» */
  --red: #CF3A2E;     --red-soft: #FCEAE8;

  --av-s: 42%; --av-l: 90%; --av-il: 33%;

  --sh-1: 0 1px 2px rgba(20, 22, 40, .05);
  --sh-2: 0 1px 2px rgba(20, 22, 40, .05), 0 4px 14px rgba(20, 22, 40, .06);
  --sh-pop: 0 18px 48px rgba(20, 22, 40, .20), 0 2px 8px rgba(20, 22, 40, .08);
  --scrim: rgba(16, 18, 28, .38);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tab-h: 60px;
  --side-w: 232px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D0F14; --surface: #161920; --surface-2: #1C2028; --surface-3: #252A34;
    --line: #262A34; --line-2: #353B47;
    --ink: #ECEEF3; --ink-2: #A7AEBC; --ink-3: #8C94A3;
    --accent: #8B87FF; --accent-hover: #A19EFF; --accent-ink: #B4B1FF; --accent-soft: #24234A; --on-accent: #0D0F14;
    --decide: #A6A3FF; --decide-soft: #24234A;
    --wait: #E1B466;   --wait-soft: #2A2316;
    --call: #72B6F2;   --call-soft: #13273A;
    --done: #66D09A;   --done-soft: #12291E;
    --closed: #939AA8; --closed-soft: #21252E;
    --backup: #5CC8D0; --backup-soft: #11292B;
    --paused: #E3B25C; --paused-soft: #2E2410;
    --amber: #EDA640; --red: #FF7E71; --red-soft: #361A1A;
    --av-s: 24%; --av-l: 24%; --av-il: 80%;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
    --sh-pop: 0 20px 56px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D0F14; --surface: #161920; --surface-2: #1C2028; --surface-3: #252A34;
  --line: #262A34; --line-2: #353B47;
  --ink: #ECEEF3; --ink-2: #A7AEBC; --ink-3: #8C94A3;
  --accent: #8B87FF; --accent-hover: #A19EFF; --accent-ink: #B4B1FF; --accent-soft: #24234A; --on-accent: #0D0F14;
  --decide: #A6A3FF; --decide-soft: #24234A;
  --wait: #E1B466;   --wait-soft: #2A2316;
  --call: #72B6F2;   --call-soft: #13273A;
  --done: #66D09A;   --done-soft: #12291E;
  --closed: #939AA8; --closed-soft: #21252E;
  --backup: #5CC8D0; --backup-soft: #11292B;
  --paused: #E3B25C; --paused-soft: #2E2410;
  --amber: #EDA640; --red: #FF7E71; --red-soft: #361A1A;
  --av-s: 24%; --av-l: 24%; --av-il: 80%;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  --sh-pop: 0 20px 56px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .55);
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-ink); text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus-visible { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 14px; height: 14px; }
.ico--lg { width: 28px; height: 28px; }

/* ---------- утилиты (нужны отчётам и настройкам) ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--tight { gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.h3 { font-size: 17px; font-weight: 600; }
.hr { height: 1px; background: var(--line); border: 0; margin: 12px 0; }
.code { font-family: var(--mono); font-size: 13px; }
@media (max-width: 1023px) { .only-desk { display: none !important; } }
@media (min-width: 1024px) { .only-mob { display: none !important; } }

/* ============ каркас ============ */
.app { min-height: 100%; }
.side { display: none; }
.view {
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: calc(8px + var(--safe-t)) 16px calc(var(--tab-h) + var(--safe-b) + 24px);
}
body.is-nested .view { padding-bottom: 24px; }
body.is-login .side, body.is-login .tabbar { display: none !important; }
body.is-login .view { padding-bottom: 40px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line);
}
body.is-nested .tabbar, body.is-composing .tabbar { display: none; }
.tab {
  position: relative; height: var(--tab-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); font-size: 12px; font-weight: 500;
}
.tab .ico { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--accent-ink); }
.tab[aria-current="page"] .ico { stroke-width: 2.1; }
.tab__n {
  position: absolute; top: 7px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

@media (min-width: 1024px) {
  .tabbar { display: none; }
  .app { display: grid; grid-template-columns: 68px minmax(0, 1fr); }
  .side {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; padding: 16px 12px;
    background: var(--surface); border-right: 1px solid var(--line);
  }
  .view { padding: 28px 32px 48px; }
  body.is-nested .view { padding-bottom: 48px; }
}
@media (min-width: 1440px) {
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .view { padding: 32px 40px 56px; }
}
/* на входе боковой панели нет — без этого экран входа вставал в её колонку шириной 68 px */
body.is-login .app { display: block; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; color: var(--ink); }
.brand__mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--surface);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.brand__t { font-weight: 600; font-size: 15px; white-space: nowrap; }
.brand__tag { font-size: 12px; color: var(--ink-3); }
.snav {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  font-size: 14px; font-weight: 500; text-align: left; width: 100%;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.snav:hover { background: var(--surface-2); color: var(--ink); }
.snav[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.snav__n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.snav[aria-current="page"] .snav__n { background: var(--accent); color: var(--on-accent); }
.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.side__user { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; border: 0; background: none; text-align: left; width: 100%; color: var(--ink); }
.side__user:hover { background: var(--surface-2); }
.side__user-t { font-size: 13px; line-height: 1.25; min-width: 0; }
.side__user-t small { display: block; color: var(--ink-3); font-size: 12px; }
/* узкий рейл 1024–1439: только иконки, счётчики — точкой */
.side .brand__t, .side .brand__tag, .snav__t, .side__user-t { display: none; }
.side .brand { justify-content: center; }
.side .snav { justify-content: center; padding: 0; }
.side .snav__n { position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; border-radius: 50%; background: var(--accent); }
@media (min-width: 1440px) {
  .side .brand__t, .side .brand__tag, .snav__t, .side__user-t { display: block; }
  .side .brand { justify-content: flex-start; }
  .side .snav { justify-content: flex-start; padding: 0 10px; }
  .side .snav__n { position: static; width: auto; height: 20px; min-width: 22px; padding: 0 6px; font-size: 12px; border-radius: 10px; background: var(--surface-3); }
  .side .snav[aria-current="page"] .snav__n { background: var(--accent); }
}

/* ---------- заголовок экрана ---------- */
.head { display: flex; align-items: flex-end; gap: 12px; padding: 12px 0 16px; }
.head__t { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.head__sub { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.head__sub b { color: var(--ink); font-weight: 600; }
.head__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 1024px) { .head { padding: 0 0 24px; } .head__t { font-size: 30px; } }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--tonal { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.btn--tonal:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.btn--danger-text { color: var(--red); }
.btn--sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn--icon { width: 44px; padding: 0; }
.btn--icon.btn--sm { width: 36px; }
.btn--block { width: 100%; }
.btn--wide { flex: 1; }
@media (max-width: 1023px) { .btn--sm { height: 44px; font-size: 14px; } .btn--icon.btn--sm { width: 44px; } }
@media (min-width: 1024px) { .btn { height: 40px; } .btn--icon { width: 40px; } .btn--sm { height: 32px; } .btn--icon.btn--sm { width: 32px; } }
.linkbtn { border: 0; background: none; color: var(--accent-ink); font-weight: 600; font-size: 14px; padding: 8px 4px; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- поля ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label, .field__l { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field__hint { font-size: 13px; color: var(--ink-3); }
.field__err { font-size: 13px; color: var(--red); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--ink); font-size: 16px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.select { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
@media (min-width: 1024px) { .input, .select, .textarea { font-size: 14px; min-height: 40px; } }
.switch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

.search { position: relative; flex: 1; min-width: 0; display: block; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 12px 0 40px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
@media (min-width: 1024px) { .search input { height: 40px; font-size: 14px; } }

/* ---------- сегменты и чипы ---------- */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 3px; border-radius: 12px; background: var(--surface-3);
}
.seg--inline { display: inline-grid; grid-auto-columns: auto; }
.seg button {
  height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.seg__n { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-pressed="true"] .seg__n { color: var(--accent-ink); }
@media (max-width: 1023px) { .seg button { height: 40px; } }
.hint { margin: 8px 2px 14px; font-size: 13px; color: var(--ink-3); }

/* статичная метка (тег) — не кнопка */
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px;
  border-radius: 7px; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  background: var(--surface-2); color: var(--ink-2);
}
.chip--ok { background: var(--done-soft); color: var(--done); }
.chip--warn { background: var(--wait-soft); color: var(--wait); }
.chip--bad { background: var(--red-soft); color: var(--red); }
.chip--info { background: var(--call-soft); color: var(--call); }
.chip--accent { background: var(--accent-soft); color: var(--accent-ink); }
/* переключаемый фильтр */
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn {
  min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.chipbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chipbtn__n { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* ---------- бейдж состояния: цвет = группа «чей ход» ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; max-width: 100%;
  border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--g-soft, var(--closed-soft)); color: var(--g, var(--closed));
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.g-decide { --g: var(--decide); --g-soft: var(--decide-soft); }
.g-wait   { --g: var(--wait);   --g-soft: var(--wait-soft); }
.g-call   { --g: var(--call);   --g-soft: var(--call-soft); }
.g-done   { --g: var(--done);   --g-soft: var(--done-soft); }
.g-closed { --g: var(--closed); --g-soft: var(--closed-soft); }
.g-backup { --g: var(--backup); --g-soft: var(--backup-soft); }
.g-paused { --g: var(--paused); --g-soft: var(--paused-soft); }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--g, var(--closed)); flex: none; display: inline-block; }

/* ---------- аватар ---------- */
.av {
  --size: 36px; width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--size) * .36); font-weight: 600; letter-spacing: .01em;
  background: hsl(var(--h, 230) var(--av-s) var(--av-l)); color: hsl(var(--h, 230) 40% var(--av-il));
}
.av--lg { --size: 52px; }
.av--sm { --size: 28px; }
.avs { display: flex; flex: none; }
.avs .av { box-shadow: 0 0 0 2px var(--surface); }
.avs .av + .av { margin-left: -8px; }

/* ---------- поверхность и секции ---------- */
.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card__pad { padding: 16px; }
@media (min-width: 1024px) { .card__pad { padding: 20px; } }
.sec { margin-bottom: 28px; }
.sec__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; padding: 0 2px; }
.sec__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sec__n { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.sec__more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent-ink); background: none; border: 0; padding: 8px 4px; }
.sec__hint { font-size: 13px; color: var(--ink-3); margin: -4px 2px 10px; }
/* совместимость: заголовок секции в отчётах и настройках */
.section__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 28px; }
.section__title { font-size: 15px; font-weight: 600; color: var(--ink); }

.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.box__h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; min-height: 50px; }
.box__t { font-size: 15px; font-weight: 600; }
.box__h .spacer { flex: 1; }
.box__b { padding: 12px 16px 16px; }
@media (min-width: 1024px) { .box__h { padding: 16px 20px 0; } .box__b { padding: 12px 20px 18px; } }
.box__empty { color: var(--ink-2); font-size: 14px; }

/* ---------- состояния ---------- */
.skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel--line { height: 12px; }
.skel--card { height: 104px; border-radius: var(--r-lg); }
.skel--block { height: 220px; border-radius: var(--r-lg); }
.state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.state__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); margin-bottom: 4px; }
.state__ico .ico { width: 24px; height: 24px; }
.state__t { font-size: 17px; font-weight: 600; }
.state__d { font-size: 14px; color: var(--ink-2); max-width: 46ch; }
.state .btn { margin-top: 8px; }
.state--ok .state__ico { background: var(--done-soft); color: var(--done); }
.state--error .state__ico { background: var(--red-soft); color: var(--red); }

.offline {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--safe-t)) 16px 8px; font-size: 13px; font-weight: 500;
  background: var(--wait-soft); color: var(--wait); border-bottom: 1px solid color-mix(in srgb, var(--wait) 25%, transparent);
}
.offline .btn { margin-left: auto; }

/* ---------- карточка кандидата в списках ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.cgrid { display: grid; gap: 8px; }
@media (min-width: 600px) and (max-width: 1023px) { .cgrid { grid-template-columns: 1fr 1fr; } }
.cc {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px;
  width: 100%; padding: 14px; text-align: left; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.cc:hover { border-color: var(--line-2); box-shadow: var(--sh-2); text-decoration: none; }
.cc:active { transform: scale(.99); }
.cc.is-dragging { opacity: .45; }
.cc__av { grid-row: span 2; }
.cc__main { min-width: 0; }
.cc__name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__meta { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cc__side .unread { height: 19px; min-width: 19px; line-height: 19px; font-size: 11.5px; padding: 0 6px; }
/* узкая карточка: «только что» справа отрезало вакансию («русский · Голосовая подд…»), а по ней
   голосовую отличают от письменной — срок остаётся в строке имени, мета идёт на всю ширину */
@media (max-width: 1023px) {
  .cc__main { display: contents; }
  .cc__name { grid-column: 2; grid-row: 1; }
  .cc__side { grid-column: 3; grid-row: 1; flex-direction: row; align-items: center; gap: 6px; }
  /* имя и мета были одним блоком без зазора — row-gap сетки между ними не нужен */
  .cc__meta { grid-column: 2 / 4; grid-row: 2; margin-top: -8px; }
}
.cc__row { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cc__row .spacer { flex: 1; }
.cc__act { grid-column: 1 / 4; display: flex; gap: 8px; border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 12px; }
.cc__act .btn { flex: 1; }

.wait { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.wait__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.wait--red .wait__dot { background: var(--red); }
.wait--red { color: var(--red); }
.unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; display: inline-block; }
.flag { display: inline-flex; align-items: center; gap: 3px; color: var(--amber); font-size: 12.5px; font-weight: 600; }

.stages { display: inline-flex; gap: 4px; }
.stg { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); background: transparent; border: 1px dashed var(--line-2); }
.stg .ico { width: 14px; height: 14px; }
.stg--wait { border: 1px solid color-mix(in srgb, var(--wait) 55%, transparent); color: var(--wait); }
.stg--ok { border: 1px solid transparent; background: var(--done-soft); color: var(--done); }
.stg--todo { border: 1px solid transparent; background: var(--decide-soft); color: var(--decide); }
.stg--bad { border: 1px solid transparent; background: var(--red-soft); color: var(--red); }

/* ============ «Сегодня» ============ */
.today { display: grid; gap: 0 32px; }
@media (min-width: 600px) and (max-width: 1023px) { .today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .today { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sumline { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.sumline span, .sumline button { display: inline-flex; align-items: center; gap: 6px; }
.sumline button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); }
.sumline button:hover { color: var(--ink); }
.sumline b { color: var(--ink); font-weight: 600; }

.calls { padding: 6px 0; }
.call { display: grid; grid-template-columns: minmax(52px, auto) minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; }
.call + .call { border-top: 1px solid var(--line); }
.call__time { font-size: 17px; font-weight: 600; line-height: 1.3; }
.call__rel { font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.call--next .call__time, .call--next .call__rel { color: var(--accent-ink); }
.call--urgent { background: color-mix(in srgb, var(--red-soft) 70%, transparent); }
.call--urgent .call__rel, .call--urgent .call__time { color: var(--red); }
.call--past .call__time, .call--past .call__name { color: var(--ink-3); }
.call__who { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.call__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call__meta { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.call__st { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.call__st--ok { color: var(--done); }
.call__st--no { color: var(--amber); }
.call__btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 12px; }
.call__btns .btn { flex: 1; }
@media (min-width: 600px) { .call__btns { grid-column: 2; } .call__btns .btn { flex: 0 1 auto; } }
.call__sep { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); border-top: 1px solid var(--line); }

.reply { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; width: 100%;
  background: none; border: 0; text-align: left; color: var(--ink); text-decoration: none; }
.reply + .reply { border-top: 1px solid var(--line); }
.reply:hover { background: var(--surface-2); text-decoration: none; }
.reply:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.reply:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.reply .av { grid-row: span 2; }
.reply__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply__text { grid-column: 2 / 4; font-size: 14px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.done-state { padding: 24px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }
.done-state .ico { width: 28px; height: 28px; color: var(--done); margin: 0 auto 8px; display: block; }
.fold { width: 100%; display: flex; align-items: center; gap: 8px; padding: 14px; border: 0; background: none; color: var(--ink); text-align: left; }
.fold > .ico:last-child { margin-left: auto; color: var(--ink-3); transition: transform .2s var(--ease); }
.fold[aria-expanded="true"] > .ico:last-child { transform: rotate(180deg); }

/* ============ «Кандидаты» ============ */
.ctools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ctools__row { display: flex; gap: 8px; }
.seg--view { display: none; }
@media (min-width: 1024px) {
  .ctools { flex-direction: row; align-items: center; }
  .ctools .search { max-width: 380px; }
  .ctools__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .seg--view { display: inline-grid; }
}
.activef { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.activef button { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 12px; border-radius: 16px; border: 0;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.board { display: none; }
@media (min-width: 1024px) {
  .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 56px; gap: 16px; align-items: start; }
  .board.is-closed-open { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cgroups-mobile { display: none; }
}
.lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; min-width: 0; }
.lane.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.lane.is-nodrop { opacity: .5; }
.lane__h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px; }
.lane__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--g); }
.lane__t { font-weight: 600; font-size: 15px; }
.lane__n { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.lane__hint { padding: 0 8px 10px; font-size: 12.5px; color: var(--ink-3); margin-top: -6px; }
.lane__sub { display: flex; align-items: center; gap: 6px; padding: 12px 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lane .list { gap: 6px; }
.lane .cc { padding: 12px; border-radius: 12px; }
.lane__empty { padding: 12px 8px; font-size: 13px; color: var(--ink-3); }
.lane--collapsed { padding: 8px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 240px; width: 100%; color: var(--ink); }
.lane--collapsed:hover { background: var(--surface-3); }
.lane--collapsed .lane__vt { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: 14px; }

/* ---------- таблица ---------- */
.tablewrap { overflow-x: auto; max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl--click tbody tr { cursor: pointer; }
.tbl--click tbody tr:hover td { background: var(--surface-2); }
.tbl .who { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.tbl .who b { font-weight: 600; display: block; }
.tbl .who small { color: var(--ink-3); font-size: 12.5px; display: block; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .input, .tbl .select { min-width: 110px; }
.nowrap { white-space: nowrap; }
/* таблица настроек на телефоне — карточками «подпись → поле» */
@media (max-width: 720px) {
  .tablewrap:has(.tbl--cards) { overflow-x: visible; }
  .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards td { display: block; width: auto; }
  .tbl--cards thead { display: none; }
  .tbl--cards tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 8px; background: var(--surface); }
  .tbl--cards td { border-bottom: 0; padding: 4px 0; }
  .tbl--cards td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 13px; color: var(--ink-3); }
  .tbl--cards .input, .tbl--cards .select { min-width: 0; width: 100%; }
  .tbl--matrix th:first-child, .tbl--matrix td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); max-width: 190px; }
}

/* ============ профиль кандидата ============ */
.prof { display: flex; flex-direction: column; gap: 16px; }
.phead {
  position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: calc(10px + var(--safe-t)) 16px 12px;
  /* 88 % пропускал имена файлов и кнопки сквозь шапку на телефоне — почти непрозрачный фон */
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.phead.is-stuck { border-bottom-color: var(--line); }
.phead__bar { display: flex; align-items: center; gap: 4px; margin: 0 -8px 8px; }
.phead__bar .spacer { flex: 1; }
.phead__row { display: flex; align-items: center; gap: 14px; }
.phead__name { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.phead__meta { margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.phead__meta a { font-weight: 500; }
.phead__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
@media (min-width: 1024px) {
  .phead { margin: 0; padding: 0 0 4px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; position: static; }
  .phead__name { font-size: 26px; }
}
.flagline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--amber); font-weight: 500; }

.next { border-radius: var(--r-lg); padding: 16px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.next--ours { background: color-mix(in srgb, var(--decide-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--decide) 22%, var(--line)); }
.next__k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.next--ours .next__k { color: var(--accent-ink); }
.next__t { font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: balance; margin-top: 4px; }
.next__s { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.next__btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) { .next__btns .btn { flex: 1 1 auto; } }
.next__link { justify-self: start; margin: -4px 0 0 -8px; }
.next__note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); text-align: left; background: none; width: 100%; }
.next__note .ico { color: var(--ink-3); margin-top: 1px; }
.next__note textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 0; font-size: 16px; line-height: 1.45; color: var(--ink); min-height: 24px; }
.next__note textarea:focus { outline: none; }
@media (min-width: 1024px) { .next__note textarea { font-size: 14px; } }
.next__save { font-size: 12px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }

.path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step__bar { height: 3px; border-radius: 2px; background: var(--surface-3); }
.step--done .step__bar { background: var(--done); }
.step--now .step__bar { background: var(--accent); }
.step--bad .step__bar { background: var(--red); }
.path.is-theirs .step--now .step__bar { background: var(--wait); }
.step__t { font-size: 12px; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step--done .step__t, .step--now .step__t, .step--bad .step__t { color: var(--ink); }
/* две строки: на 375 px шаг шириной ~65 px, и «5 октябр…», «у нанимающ…» обрезались */
.step__d { font-size: 12px; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.step--now .step__d { color: var(--accent-ink); font-weight: 500; }
.path.is-theirs .step--now .step__d { color: var(--wait); }

.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); position: sticky; z-index: 4; background: var(--bg); overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { position: relative; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ptab[aria-selected="true"] { color: var(--ink); }
.ptab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.ptab .unread { height: 20px; min-width: 20px; line-height: 20px; font-size: 11.5px; padding: 0 6px; }
.pgrid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .pgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 24px; } }
.pcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.player { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.player__play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.player__play .ico { width: 18px; height: 18px; fill: currentColor; }
.wave { display: flex; align-items: center; gap: 2px; height: 36px; cursor: pointer; overflow: hidden; min-width: 0; position: relative; }
.wave i { flex: 1; min-width: 1px; border-radius: 2px; background: var(--line-2); }
.wave i.on { background: var(--accent); }
.wave--flat { height: 6px; border-radius: 3px; background: var(--surface-3); gap: 0; }
.wave--flat i { display: none; }
.wave__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.player__meta { grid-column: 2; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); margin-top: -4px; white-space: nowrap; }
.player__meta .spacer { flex: 1; }
.speed { display: inline-flex; background: var(--surface-3); border-radius: 8px; padding: 2px; }
.speed button { border: 0; background: none; height: 28px; min-width: 36px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.speed button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.asg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; }
.asg + .asg { border-top: 1px solid var(--line); }
.asg:first-child { padding-top: 0; }
.asg:last-child { padding-bottom: 0; }
.asg__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; grid-row: span 2; background: var(--g-soft); color: var(--g); }
.asg__t { font-weight: 600; font-size: 14.5px; }
.asg__s { font-size: 13px; color: var(--ink-2); }
.asg__btns { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0 -8px; }

.kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; max-width: 72ch; overflow-wrap: anywhere; }
.kv dd.flagged { color: var(--amber); font-weight: 500; }
.kv--name { margin-bottom: 8px; align-items: center; }
.kv__copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
/* замер с сайта под ответом анкеты (2.1): ниже заявленного — красным, с предупреждением */
.kv__check { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.kv__check .ico { vertical-align: -2px; margin-right: 4px; }
.kv__check.is-low, .kv__warn { color: var(--red); font-weight: 500; }
@media (max-width: 459px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 10px; } }

.essay__part + .essay__part { margin-top: 12px; }
.essay__lang { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.essay__text { white-space: pre-line; font-size: 14px; }
.essay__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.thumb { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.thumb img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.filerow { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--ink); font-size: 14px; }
.filerow + .filerow { border-top: 1px solid var(--line); }
.filerow small { color: var(--ink-3); margin-left: auto; }

.contact { display: flex; align-items: center; gap: 12px; }
.contact + .contact { margin-top: 12px; }
.contact__i { width: 36px; height: 36px; border-radius: 10px; background: var(--call-soft); color: var(--call); display: grid; place-items: center; flex: none; }
.contact__t { font-weight: 600; }
.contact__s { font-size: 13px; color: var(--ink-2); }
.contact__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.feed { display: flex; flex-direction: column; }
.feed__day { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 14px 0 6px; }
.feed__day:first-child { padding-top: 0; }
.ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; align-items: start; }
.ev__i { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; }
.ev__i .ico { width: 15px; height: 15px; }
.ev__t { font-size: 14px; }
.ev__d { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.ev__at { font-size: 12.5px; color: var(--ink-3); padding-top: 3px; }

/* ============ переписка ============ */
.msgs { display: flex; flex-direction: column; gap: 6px; }
.day { align-self: center; font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--surface-3); padding: 2px 10px; border-radius: 10px; margin: 8px 0; }
.bub { max-width: min(80%, 560px); padding: 8px 12px 6px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.box .bub--in { background: var(--surface-2); border-color: transparent; }
.bub--out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.bub--pending { opacity: .6; }
.bub--failed { background: var(--red-soft); color: var(--red); }
.bub__t { display: block; text-align: right; font-size: 11.5px; opacity: .85; margin-top: 2px; }
.bub__who { display: block; font-size: 12px; font-weight: 600; opacity: .85; margin-bottom: 2px; }
/* отозванный ответ: у кандидата удалён, в ленте — серым */
.bub--recalled { background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line-2); }
.bub__more { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 22px; margin: -2px -6px -2px 4px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; vertical-align: middle; }
.bub__more:hover, .bub__more:focus-visible { background: rgba(255, 255, 255, .18); }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: none; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface); font-size: 16px; line-height: 1.35; }
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer .btn--icon { border-radius: 50%; flex: none; }
.composer:has(textarea:placeholder-shown) .btn--primary { background: var(--surface-3); border-color: var(--surface-3); color: var(--ink-3); pointer-events: none; }
@media (min-width: 1024px) { .composer textarea { font-size: 14.5px; } }

.chats { display: block; }
@media (min-width: 1024px) {
  body.is-fill .view { padding-top: 24px; padding-bottom: 24px; }
  .chats { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 48px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
}
@media (min-width: 1440px) { .chats.has-ctx { grid-template-columns: 340px minmax(0, 1fr) 340px; } }
.chats__list { min-width: 0; }
@media (min-width: 1024px) { .chats__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); } }
.chats__lhead { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .chats__lhead { padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
  .chats__lhead .head__t { font-size: 22px; }
  .chats__rows { flex: 1; overflow-y: auto; margin-top: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}
.chats__rows { margin-top: 12px; }
.crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  width: 100%; padding: 12px 14px; border: 0; background: none; text-align: left; color: var(--ink); text-decoration: none; }
.crow + .crow { box-shadow: inset 0 1px 0 var(--line); }
.crow:hover { background: var(--surface-2); text-decoration: none; }
.crow[aria-current="true"] { background: var(--accent-soft); box-shadow: none; }
.crow[aria-current="true"] + .crow { box-shadow: none; }
.crow .av { --size: 44px; grid-row: span 3; }
.crow__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__time { font-size: 12.5px; color: var(--ink-3); padding-top: 2px; white-space: nowrap; }
.crow__text { grid-column: 2; font-size: 14px; color: var(--ink-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.crow__text b { font-weight: 500; color: var(--ink-3); }
.crow.is-unread .crow__text { color: var(--ink); }
.crow__un { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
.crow__meta { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.crow__meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread { display: flex; flex-direction: column; min-width: 0; }
.thread__head {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 6px;
  margin: 0 -16px; padding: calc(8px + var(--safe-t)) 8px 8px 4px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.thread__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: none; text-align: left; color: inherit; border-radius: 10px; text-decoration: none; }
.thread__who:hover { background: var(--surface-2); text-decoration: none; }
.thread__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.thread__sub { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctxbar { display: flex; align-items: center; gap: 10px; width: calc(100% + 32px); margin: 0 -16px; padding: 10px 16px;
  border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; text-align: left; }
.ctxbar__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxbar > .ico:last-child { color: var(--ink-3); }
.thread__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 calc(110px + var(--safe-b)); }
.thread__foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
body.is-composing .thread__foot { bottom: var(--kb-inset, 0px); padding-bottom: 8px; }
.thread__hint { font-size: 12px; color: var(--ink-3); padding: 0 4px 6px 52px; display: flex; align-items: center; gap: 6px; }
.thread__empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--ink-3); padding: 40px; }
.thread__empty .ico { width: 32px; height: 32px; margin: 0 auto 10px; display: block; }
@media (min-width: 1024px) {
  .chats .thread { min-height: 0; }
  .chats .thread__head { position: static; margin: 0; padding: 10px 12px; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .chats .ctxbar { width: 100%; margin: 0; background: var(--surface-2); }
  .chats .thread__body { flex: 1; overflow-y: auto; padding: 16px 24px; background: var(--bg); }
  .chats .thread__foot { position: static; padding: 12px 16px; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (min-width: 1440px) { .chats.has-ctx .ctxbar { display: none; } }
.ctxcol { display: none; }
@media (min-width: 1440px) { .ctxcol { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 16px; border-left: 1px solid var(--line); background: var(--surface-2); } }
.ctxcol .box { box-shadow: none; }
.ctxhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
.ctxhead .phead__name { font-size: 18px; }
.ctxhead .phead__meta { font-size: 13px; }
.minext { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.minext.next--ours { background: color-mix(in srgb, var(--decide-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--decide) 22%, var(--line)); }
.minext .next__t { font-size: 15px; }

/* заготовки и превью сообщений */
.opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; width: 100%; color: var(--ink); }
.opt + .opt { margin-top: 8px; }
.opt--plain { grid-template-columns: 1fr; }
.opt__r { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); margin-top: 1px; }
.opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.opt[aria-checked="true"] .opt__r { border: 6px solid var(--accent); }
.opt[role="checkbox"] .opt__r { border-radius: 6px; }
.opt:disabled { opacity: .5; }
.opt__t { font-weight: 600; font-size: 14.5px; }
.opt__s { font-size: 13px; color: var(--ink-2); }
.opt:not(.opt--plain) .opt__s { grid-column: 2; }
.opt__s--clamp { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opt__rec { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--done); background: var(--done-soft); padding: 1px 7px; border-radius: 6px; vertical-align: 1px; }
.preview { border-radius: var(--r-md); background: var(--surface-2); padding: 12px 14px; font-size: 14px; }
.preview__k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.preview__b { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ============ созвоны ============ */
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.cal-tools .spacer { flex: 1; }
.daystrip { display: grid; grid-auto-flow: column; grid-auto-columns: 50px; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.daystrip::-webkit-scrollbar { display: none; }
.dayb { height: 66px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; scroll-snap-align: start; padding: 0; }
.dayb__w { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.dayb__d { font-size: 17px; font-weight: 600; line-height: 1; }
.dayb__dots { display: flex; gap: 3px; height: 5px; }
.dayb__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--call); }
.dayb.is-today .dayb__d { color: var(--accent-ink); }
.dayb.is-off { background: transparent; }
.dayb.is-off .dayb__d { color: var(--ink-3); }
.dayb[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-ink); }
.dayb[aria-pressed="true"] .dayb__w, .dayb[aria-pressed="true"] .dayb__d { color: inherit; }
.dayb[aria-pressed="true"] .dayb__dots i { background: var(--accent); }
.daysum { font-size: 14px; color: var(--ink-2); margin: 0 2px 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.daysum b { color: var(--ink); font-weight: 600; }
.daysum .linkbtn { margin-left: auto; padding: 4px; font-size: 13px; }

.agenda { display: flex; flex-direction: column; gap: 6px; }
.arow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.arow__t { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.arow--past .arow__t { color: var(--ink-3); }
.arow__stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.afree { height: 44px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px dashed var(--line-2); border-radius: 10px; background: none; color: var(--ink-3); font-size: 13.5px; text-align: left; }
.afree:hover { border-color: var(--accent); color: var(--accent-ink); }
.afree--run { justify-content: space-between; }
.afree--run small { font-size: 12.5px; color: var(--ink-3); }
.afree.is-offered, .wfree.is-offered { border-style: dashed; border-color: color-mix(in srgb, var(--wait) 60%, transparent); background: color-mix(in srgb, var(--wait-soft) 70%, transparent); color: var(--wait); }
.afree.is-picked, .wfree.is-picked { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.abreak { font-size: 12.5px; color: var(--ink-3); padding: 8px 0 8px 58px; display: flex; align-items: center; gap: 8px; }
.abreak::after { content: ""; flex: 1; border-top: 1px dashed var(--line-2); }
.anow { position: relative; height: 0; margin: 3px 0 3px 58px; border-top: 2px solid var(--red); }
.anow::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.anow span { position: absolute; left: -58px; top: -9px; font-size: 11.5px; font-weight: 600; color: var(--red); }

.bk { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.bk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--call); }
.bk--no::before { background: var(--amber); }
.bk--past::before { background: var(--line-2); }
.bk:hover { border-color: var(--line-2); }
.bk__b { min-width: 0; flex: 1; }
.bk__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.bk__sub { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.bk__st { flex: none; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.bk__st--ok { color: var(--done); }
.bk__st--no { color: var(--amber); }
.bk__st--past { color: var(--ink-3); }
.seats { font-size: 12px; font-weight: 600; color: var(--call); background: var(--call-soft); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }

.weeknav { display: flex; align-items: center; gap: 4px; }
.weeknav__t { font-weight: 600; font-size: 15px; padding: 0 8px; min-width: 150px; text-align: center; }
.week { display: grid; grid-template-columns: 56px repeat(var(--days, 5), minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.week__corner { border-bottom: 1px solid var(--line); }
.week__h { padding: 10px 12px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.week__h b { font-size: 20px; font-weight: 600; }
.week__h span { font-size: 13px; color: var(--ink-3); }
.week__h small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.week__h .linkbtn { padding: 0; font-size: 12px; margin-left: auto; }
.week__h.is-today b, .week__h.is-today span { color: var(--accent-ink); }
.week__t { height: var(--rowh, 44px); font-size: 12px; color: var(--ink-3); text-align: right; padding: 2px 8px 0 0; }
.week__t--half { color: transparent; }
.week__c { min-height: var(--rowh, 44px); padding: 3px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); position: relative; display: flex; flex-direction: column; gap: 3px; }
.week__c--half { border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.week__c--off { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-2) 7px 14px); }
.week__c--pastday { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.wfree { width: 100%; flex: 1; min-height: calc(var(--rowh, 44px) - 8px); border: 1px dashed transparent; border-radius: 8px; background: none; color: transparent; font-size: 12px; font-weight: 600; text-align: left; padding: 0 8px; display: flex; align-items: center; gap: 4px; }
.wfree:hover { border-color: var(--accent); color: var(--accent-ink); }
.offer-mode .wfree { border-color: var(--line-2); color: var(--ink-3); }
.wbk { width: 100%; min-height: calc(var(--rowh, 44px) - 8px); flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px; border: 0;
  background: var(--call-soft); color: var(--ink); font-size: 12.5px; text-align: left; overflow: hidden; }
.wbk b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wbk .ico { color: var(--call); flex: none; }
.wbk--no { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--amber); }
.wbk--no .ico { color: var(--amber); }
.wbk--past { background: var(--surface-2); color: var(--ink-3); }
.wbk--past .ico { color: var(--ink-3); }
.wbk .avs .av { --size: 22px; font-size: 9px; }
/* линия «сейчас» — под бронью: поверх карточки она читалась как зачёркнутый (отменённый) созвон */
.week__now { position: absolute; left: -1px; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 1; pointer-events: none; }
.week__c > .wbk { position: relative; z-index: 2; }
.week__now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.offer-mode { padding-bottom: 96px; }
.offerbar { position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(var(--tab-h) + var(--safe-b) + 12px); width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px;
  background: var(--ink); color: var(--bg); border-radius: 16px; box-shadow: var(--sh-pop); animation: up .22s var(--ease); }
@media (min-width: 1024px) { .offerbar { bottom: 24px; left: calc(50% + 34px); } }
@media (min-width: 1440px) { .offerbar { left: calc(50% + 116px); } }
.offerbar__t { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
.offerbar__t small { display: block; font-size: 12px; opacity: .75; font-weight: 400; }
.offerbar .btn--ghost { color: var(--bg); }
.offerbar .btn--ghost:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }

.linksum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.linksum b { color: var(--ink); font-weight: 600; }
.linksum .btn { margin-left: auto; }
.linkwrap { display: flex; gap: 6px; align-items: center; }
.linkin { flex: 1; width: 100%; min-width: 200px; height: 36px; padding: 0 10px; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.linkin:placeholder-shown { background: var(--surface-2); }
.linkin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.savest, .sentst { font-size: 12px; color: var(--ink-3); margin-top: 4px; min-height: 16px; }
.sentst--ok { color: var(--done); }
.sentst--bad { color: var(--red); }
.tbl .tm { font-size: 16px; font-weight: 600; }
.tbl .tm small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; }
.lcards { display: flex; flex-direction: column; gap: 8px; }
/* колонка не шире карточки: иначе её растягивала длинная дата («4 октября, воскресенье · русский»)
   и статус с кнопкой вставки уезжали за край экрана */
.lcard { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lcard__top { display: flex; align-items: center; gap: 10px; }
.lcard__time { font-size: 17px; font-weight: 600; min-width: 48px; }
.lcard .linkin { min-width: 0; height: 44px; font-size: 16px; }

.hrow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hrow b { font-weight: 600; }

/* ============ отчёты ============ */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } }
.stat { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); min-height: 92px; }
.stat__n { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat__l { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.fbar { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 6px 12px; align-items: center; font-size: 14px; }
.fbar + .fbar { margin-top: 10px; }
.fbar__l { color: var(--ink-2); }
.fbar__track { position: relative; height: 22px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.fbar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 6px; opacity: .85; }
.fbar__v { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: var(--ink); mix-blend-mode: normal; }
.fbar__p { font-size: 12px; color: var(--ink-3); grid-column: 2; margin-top: -2px; }
@media (max-width: 459px) { .fbar { grid-template-columns: 1fr; } .fbar__p { grid-column: 1; } }
.minibar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); opacity: .7; vertical-align: middle; margin-right: 6px; }

/* ============ настройки ============ */
.settings { display: grid; gap: 16px; }
.settings > * { min-width: 0; }
@media (min-width: 1024px) { .settings { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; } }
.setnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
.setnav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .setnav { flex-direction: column; overflow: visible; margin: 0; padding: 0; position: sticky; top: 24px; }
}
.setnav__g { display: none; }
@media (min-width: 1024px) { .setnav__g { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 12px 10px 4px; } .setnav__g:first-child { padding-top: 0; } }
.setnav__b { flex: none; min-height: 40px; padding: 0 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
@media (min-width: 1024px) { .setnav__b { border-color: transparent; background: transparent; width: 100%; } }
.setnav__b:hover { background: var(--surface-2); }
.setnav__b[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.savebar { position: sticky; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); z-index: 20; display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 10px 10px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); box-shadow: var(--sh-pop); }
@media (min-width: 1024px) { .savebar { bottom: 16px; } }
.savebar__t { flex: 1; font-size: 14px; font-weight: 500; }
.savebar .btn--ghost { color: var(--bg); }

/* ============ вход ============ */
.login { max-width: 400px; margin: 10vh auto 0; }
@media (min-height: 800px) { .login { margin-top: 16vh; } }
.login__logo { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px; display: grid; place-items: center; background: var(--ink); color: var(--surface); font-size: 16px; font-weight: 700; }
.login__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: 12px; margin-bottom: 20px; }
.login__tab { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.login__tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* ============ шторка ============ */
.sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.sheet__scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.sheet__panel { position: relative; width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-pop); animation: up .26s var(--ease); }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
.sheet.no-anim .sheet__panel, .sheet.no-anim .sheet__scrim { animation: none; }
.sheet__grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px 20px; flex: none; }
.sheet__title { font-size: 18px; font-weight: 600; flex: 1; min-width: 0; }
.sheet__body { padding: 8px 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.sheet__foot { display: flex; gap: 8px; padding: 12px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.sheet__foot .btn { flex: 1; }
@media (min-width: 1024px) {
  .sheet { align-items: center; }
  .sheet__panel { border-radius: var(--r-xl); animation: pop .2s var(--ease); }
  .sheet__grab { display: none; }
  .sheet__head { padding-top: 16px; }
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.alist { display: flex; flex-direction: column; }
.aitem { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 500; color: var(--ink); border-radius: 10px; width: 100%; text-decoration: none; }
.aitem:hover { background: var(--surface-2); text-decoration: none; }
.aitem .ico { color: var(--ink-2); }
.aitem--danger, .aitem--danger .ico { color: var(--red); }
.agroup + .agroup { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.agroup__t { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 6px 4px 2px; }
.more-list .aitem { min-height: 52px; padding: 0 16px; border-radius: 0; }
.more-list .aitem + .aitem { border-top: 1px solid var(--line); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot { height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--ink); }
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slot.is-offered { border-style: dashed; border-color: color-mix(in srgb, var(--wait) 60%, transparent); color: var(--wait); }

/* ============ тост ============ */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 80;
  width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
body.is-nested .toasts { bottom: calc(96px + var(--safe-b)); }
@media (min-width: 1024px) { .toasts, body.is-nested .toasts { bottom: 24px; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-md);
  background: var(--ink); color: var(--bg); box-shadow: var(--sh-pop); font-size: 14px; font-weight: 500; animation: up .22s var(--ease); }
.toast > .ico { color: var(--done-soft); }
.toast--err > .ico { color: var(--red-soft); }
.toast__sp { flex: 1; min-width: 0; }
.toast button { border: 0; background: none; color: var(--bg); font-weight: 600; font-size: 14px; padding: 6px 8px; border-radius: 8px; text-decoration: underline; text-underline-offset: 3px; }

/* ============ доделки по ТЗ: свайпы, «Отменить», панель, палитра, конструктор ============ */

/* — свайп по карточке (телефон) — */
.swipe { position: relative; overflow: hidden; border-radius: var(--r-lg); touch-action: pan-y; }
.swipe__fg { position: relative; z-index: 1; will-change: transform; }
.swipe__bg { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  font-size: 14px; font-weight: 600; opacity: 0; }
.swipe__bg--r { justify-content: flex-start; }
.swipe__bg--l { justify-content: flex-end; }
.swipe--ok { background: var(--done-soft); color: var(--done); }
.swipe--danger { background: var(--red-soft); color: var(--red); }
.swipe--muted { background: var(--surface-3); color: var(--ink-2); }
.swipe.is-armed .swipe__bg .ico { transform: scale(1.18); transition: transform .12s var(--ease); }
.panel > .swipe { border-radius: 0; }
.panel > .swipe:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.panel > .swipe:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel > .swipe:only-child { border-radius: var(--r-lg); }
.swipe > .reply, .swipe > .crow { border-radius: 0; background: var(--surface); }
.swipe + .swipe > .reply { border-top: 1px solid var(--line); }
.swipe + .swipe > .crow { box-shadow: inset 0 1px 0 var(--line); }
.crow__nr { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--done); }

/* — тост с отсчётом «Отменить» — */
.toast--wait { position: relative; overflow: hidden; }
.toast--wait > .ico { color: var(--wait-soft); }
.toast--wait::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--accent); transform-origin: left; animation: countdown 5s linear forwards; }
@keyframes countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast--wait::after { animation: none; } }

/* — панель кандидата поверх списка (ПК) — */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: clamp(560px, 46vw, 640px);
  display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--sh-pop); animation: slidein .22s var(--ease); }
@keyframes slidein { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 32px; }
.drawer .phead { position: sticky; top: 0; z-index: 5; margin: 0 -24px; padding: 12px 24px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; }
.drawer .phead.is-stuck { border-bottom-color: var(--line); }
.drawer .phead__name { font-size: 22px; }
.drawer .ptabs { margin: 0 -24px; padding: 0 24px; }

/* — палитра и клавиши — */
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface); color: var(--ink-2);
  font: 600 11.5px/1 var(--font); }
.kbds { display: inline-flex; gap: 4px; flex: none; }
.snav--cmd { color: var(--ink-3); margin-bottom: 6px; }
.snav__k { margin-left: auto; display: none; }
@media (min-width: 1440px) { .side .snav__k { display: block; } }
.pal { display: flex; flex-direction: column; gap: 8px; }
.pal__list { display: flex; flex-direction: column; max-height: min(52vh, 440px); overflow-y: auto; margin: 0 -8px; }
.pal__g { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 10px 10px 4px; }
.pal__i { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); text-align: left; font-size: 14px; font-weight: 500; width: 100%; }
.pal__i .ico { color: var(--ink-3); }
.pal__i[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.pal__i[aria-selected="true"] .ico { color: var(--accent-ink); }
.pal__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__t small { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.pal__empty { padding: 16px 10px; color: var(--ink-3); font-size: 14px; }
.keys { display: flex; flex-direction: column; gap: 10px; }
.keys__r { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; font-size: 14px; }
:is(.cc, tr, .crow, .reply):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* — настройки: записи, правила, условия — */
.set-err:empty { display: none; }
.set-err { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--red-soft); color: var(--red); font-size: 14px; font-weight: 500; }
.readonly { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.readonly.code { font-family: var(--mono); font-size: 13px; }
.input.code, .jsonbox { font-family: var(--mono); font-size: 13px; }
.jsonbox { min-height: 120px; }
.is-invalid, .is-invalid:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.select--sm, .input--sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.select--sm { width: auto; max-width: 100%; }
.input--num { width: 80px; }
.chipbar--tight { gap: 6px; }
.chipbar--tight .chipbtn { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.adv { border-top: 1px solid var(--line); padding-top: 12px; }
.adv > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); min-height: 40px; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary .ico { transition: transform .15s var(--ease); }
.adv[open] > summary .ico { transform: rotate(90deg); }
.adv > .stack { margin-top: 12px; }

.recs { display: flex; flex-direction: column; overflow: hidden; }
.rec { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.rec + .rec { border-top: 1px solid var(--line); }
.rec__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px;
  border: 0; background: none; text-align: left; color: var(--ink); font-size: 15px; font-weight: 500; }
.rec__main:hover { background: var(--surface-2); }
.rec__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex: none; }
.rec__btns { display: flex; gap: 2px; flex: none; }

.rules { display: flex; flex-direction: column; gap: 10px; }
.rule { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.rule.is-dragging { opacity: .5; }
.rule.is-over { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.rule__h { display: flex; align-items: center; gap: 4px; padding: 6px 6px 0 10px; }
.rule__n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.drag { display: inline-grid; place-items: center; width: 24px; height: 32px; color: var(--ink-3); cursor: grab; }
@media (hover: none) { .drag { display: none; } }
.rule__b { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px; }
.rule__then { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.rule__arrow { font-weight: 600; color: var(--accent-ink); }
.rule__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.rule__meta .input { width: 200px; }
.rule__key { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.rule--else { padding: 12px 14px; background: var(--surface-2); box-shadow: none; }

.cond { display: flex; flex-direction: column; gap: 8px; }
.cond__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 6px 8px; }
.cond__and { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-top: 9px; }
.cond__what { display: flex; gap: 6px; min-width: 0; }
.cond__what .select:first-child { flex: 1 1 auto; min-width: 0; }
.cond__is { flex: none; }
/* на телефоне значения — во всю ширину карточки, иначе чипы встают по одному в строку */
.cond__vals { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.cond__row > .btn { grid-column: 3; grid-row: 1; }
.cond__is { width: 56px; }
.cond__empty, .cond__note { font-size: 13.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.cond__add { align-self: flex-start; }
@media (min-width: 1024px) {
  .cond__row { grid-template-columns: 34px auto minmax(0, 1fr) auto; }
  .cond__what .select:first-child { flex: none; }
  .cond__vals { grid-column: 3; }
  .cond__row > .btn { grid-column: 4; }
}

.opts { display: flex; flex-direction: column; gap: 8px; }
.opts__head, .opts__row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.opts__head { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.opts__btns { display: flex; gap: 2px; }
@media (max-width: 599px) {
  .opts__head { display: none; }
  .opts__row { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .opts__row > .input:nth-child(3) { grid-column: 1 / 3; }
  .opts__btns { grid-column: 1 / 3; justify-content: flex-end; }
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 4px 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.tag { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; font-weight: 500; }
.tag button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: inherit; }
.tags__in { flex: 1; min-width: 120px; border: 0; background: none; color: var(--ink); font-size: 16px; height: 30px; padding: 0 4px; }
.tags__in:focus { outline: none; }
@media (min-width: 1024px) { .tags__in { font-size: 14px; } }

/* — FE1 — экраны кандидатов, волна 25.09: «У нанимающего», файлы, «Убрать с главной» — */

/* «У нанимающего»: строка итога и дней под карточкой; цвет группы — «ждём» (ход не за нами) */
.cc__note { grid-column: 2 / 4; font-size: 13px; color: var(--ink-2); }
.fold__list { padding: 0 8px 8px; }
.g-hiring { --g: var(--wait); --g-soft: var(--wait-soft); }
/* три кнопки итога не влезают в 375 px и в полосу доски — переносятся на вторую строку */
.cc__note ~ .cc__act { flex-wrap: wrap; }
.cc__note ~ .cc__act .btn { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .board.board--hm { grid-template-columns: repeat(4, minmax(0, 1fr)) 56px; }
  .board.board--hm.is-closed-open { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* пустая «У НМ» — рейкой, как «Закрыто»: колонкам с людьми остаётся место под имя */
  .board.board--hm.is-hm-empty { grid-template-columns: repeat(3, minmax(0, 1fr)) 56px 56px; }
  .board.board--hm.is-hm-empty.is-closed-open { grid-template-columns: repeat(3, minmax(0, 1fr)) 56px minmax(0, 1fr); }
  /* в узкой полосе «только что» справа съедало имя до 7 букв — срок уходит под имя */
  .lane .cc { grid-template-columns: auto minmax(0, 1fr); }
  .lane .cc__side { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
  .lane .cc__row, .lane .cc__note { grid-column: 1 / -1; }
  .lane .cc__act { grid-column: 1 / -1; }
}
.lane--rail { cursor: default; }
.lane--rail:hover { background: var(--surface-2); }
/* пять групп на телефоне не влезают — полоса прокручивается вбок, на широком тянется */
.seg--scroll { position: relative; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; }
.seg--scroll::-webkit-scrollbar { display: none; }

/* файл кандидата: иконка, имя и размер, «Прислать мне в Telegram»; на ПК кнопки справа */
.fileitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 0; }
.fileitem + .fileitem { border-top: 1px solid var(--line); }
.fileitem__i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.fileitem__m { min-width: 0; }
.fileitem__n { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem__s { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.fileitem__b { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) {
  .fileitem { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fileitem__b { grid-column: 3; }
}
.asg__files { grid-column: 2; margin-top: 8px; min-width: 0; }
.asg__files .thumbs { margin-bottom: 4px; }
/* на узком телефоне файлы тестового — во всю ширину блока, иначе кнопка не влезает в 320 px */
@media (max-width: 599px) {
  .asg__files { grid-column: 1 / -1; }
  .fileitem__b { grid-column: 1 / -1; }
  /* «Изменить ссылку на задание» длиннее колонки на 320 px — переносим строку, а не страницу */
  .asg__btns .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; text-align: left; }
}
.fileitem__b .btn { max-width: 100%; }
/* панель карточки на ПК узкая: кнопки справа сжимали имя файла в три строки — они под именем, как на телефоне */
.drawer .fileitem { grid-template-columns: auto minmax(0, 1fr); }
.drawer .fileitem__b { grid-column: 2; }

/* эссе в переписке — одна карточка файла вместо десятка кусков */
.bub--file { white-space: normal; width: min(85%, 380px); }
.bub__file .fileitem__n { white-space: normal; }
.bub__file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 2px 0 4px; }
.box .bub__file .fileitem__i { background: var(--surface); }

/* «Другое время» в шторке выбора времени */
.custom-at { display: flex; gap: 8px; }
.custom-at .input { flex: 1; min-width: 0; }

/* свайп по созвону на «Сегодня»: под строкой — подложка действия, строка непрозрачна */
.swipe > .call { background: var(--surface); }
.swipe > .call--urgent { background: color-mix(in srgb, var(--red-soft) 70%, var(--surface)); }
.swipe + .swipe > .call { border-top: 1px solid var(--line); }

/* — FE2 — каркас, календарь, отчёты, «Клара 2.0» (волна 25.09) */
/* свой контейнер у каждого экрана (гонка экранов) — на раскладку не влияет */
.view__host { display: contents; }
/* «Нет связи, повторяем…» — поверх (ТЗ 6.3). Но под полосу уходили «Назад», «Чат» и «⋯»
   шапки карточки: пока она видна, экран и липкие шапки опускаются на её высоту (QA-2).
   Панель карточки на ПК (.drawer) выше полосы по z-index — её не трогаем. */
.offline { position: fixed; left: 0; right: 0; top: 0; }
/* высота полосы: 8 + кнопка + 8 + рамка; кнопка на телефоне 44 px (палец), на ПК — 32 */
body:has(> .offline:not([hidden])) { --off-h: calc(61px + var(--safe-t)); }
@media (min-width: 1024px) { body:has(> .offline:not([hidden])) { --off-h: calc(49px + var(--safe-t)); } }
body:has(> .offline:not([hidden])) .app { padding-top: var(--off-h); }
body:has(> .offline:not([hidden])) :is(.side, .view .phead, .view .thread__head) { top: var(--off-h); }
/* «О приложении» и версия на входе */
.about { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.about__mark { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--surface); font-size: 18px; font-weight: 700; }
.about__name { font-size: 20px; font-weight: 600; }
.login__ver { margin-top: 12px; text-align: center; font-size: 12px; color: var(--ink-3); }
/* календарь: «Другое время», брони вне сетки (своё время, «созвонились сейчас») */
.custom-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.offerbar__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.offerbar__chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); font-size: 12.5px; font-weight: 600; }
.week__offb { position: absolute; left: 3px; right: 3px; z-index: 2; display: flex; height: calc(var(--rowh, 44px) - 6px); }
.wbk--off, .bk--off { outline: 1.5px dashed var(--call); outline-offset: -1.5px; }
.wbk small { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legend .legend__off { background: var(--call-soft); outline: 1.5px dashed var(--call); outline-offset: -1.5px; }
/* отчёты: текущая неделя, свой период, вакансия, пометка про v1 */
.tbl--matrix .is-current { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.wk-cur { display: block; font-size: 11px; font-weight: 500; color: var(--accent-ink); }
.rep-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 420px; }
.rep-vac .chipbtn { white-space: nowrap; }
/* на телефоне периоды и вакансии — одной строкой с прокруткой, а не стопкой на пол-экрана */
.rep-per { max-width: 100%; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
.rep-per::-webkit-scrollbar, .rep-vac::-webkit-scrollbar { display: none; }
@media (max-width: 599px) {
  .rep-vac { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .rep-vac .chipbtn { flex: none; }
}
.rep-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }