/* Компоненты: кнопки, поля, плашки, списки, карточки, лента. */
h1, h2, h3, h4 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; }

input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; min-width: 0; max-width: 100%;
  transition: border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { width: 100%; min-height: 72px; resize: vertical; }

button { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer;
  font-weight: 550; line-height: 1.2; transition: filter .12s, background .12s, border-color .12s; }
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
button.ghost:hover { background: var(--line-soft); filter: none; }
button.sm { padding: 5px 10px; font-size: var(--t-sm); }
button.icon { padding: 6px; background: transparent; color: var(--muted); border-color: transparent; display: inline-grid; place-items: center; }
button.icon:hover { background: var(--line-soft); color: var(--ink); filter: none; }
button.icon svg { width: 18px; height: 18px; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }

kbd, .kbd { font-family: var(--font); font-size: var(--t-xs); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--surface); }

.hint { color: var(--muted); font-size: var(--t-sm); }
.err, .okmsg { border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--t-md); }
.err { color: var(--bad); background: var(--bad-soft); }
.tx-bad { color: var(--bad); }
button.theme { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button.theme svg { width: 16px; height: 16px; }

/* каналы: одна строка сетки на канал */
.chrow { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.chrow:first-of-type { border-top: 0; }
.chname { display: grid; align-content: start; min-width: 0; }
.chname b { font-weight: 600; }
.chname small { color: var(--muted); font-size: var(--t-xs); }
.chbody { display: grid; gap: 6px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); min-height: 20px; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.dates .k { display: block; font-size: var(--t-xs); color: var(--muted); }
.dates .d { font-size: var(--t-sm); }
.upd { font-size: var(--t-xs); color: var(--muted); }
.okmsg { color: var(--good); background: var(--good-soft); }

/* блок-карточка */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.card-pad { padding: var(--s4); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.card-head h2 { font-size: var(--t-md); font-weight: 600; }
.card-head .count { color: var(--muted); font-size: var(--t-sm); }
.empty { padding: var(--s5) var(--s4); color: var(--muted); text-align: center; }

/* заглушка раздела */
.stub { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s6) var(--s4); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); background: var(--sunk); }
.stub svg { width: 28px; height: 28px; color: var(--accent); opacity: .8; }
.stub b { color: var(--ink); font-weight: 600; }

/* плашки */
.pill, .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 1px 9px; font-size: var(--t-xs); font-weight: 500; line-height: 1.7;
  background: var(--line-soft); color: var(--muted); white-space: nowrap; }
.pill.good, .pill.yes { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad, .pill.no, .pill.stop { background: var(--bad-soft); color: var(--bad); }
.pill.special { background: var(--gold-soft); color: var(--gold); }
.pill.flow, .pill.accent { background: var(--accent-soft); color: var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }

/* плитки «главное» */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s3); min-width: 0; display: grid; gap: 2px; align-content: start; }
.tile .k { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.tile .v { font-size: var(--t-md); font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.tile .s { font-size: var(--t-xs); color: var(--muted); }
.tile.good { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.tile.good .v { color: var(--good); }
.tile.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.tile.warn .v { color: var(--warn); }
.tile.bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.tile.bad .v { color: var(--bad); }
.tile.gold .v { color: var(--gold); }
.tile.dim .v { color: var(--muted); font-weight: 500; }
@media (max-width: 420px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* строки людей */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4); border-top: 1px solid var(--line-soft); cursor: pointer; min-height: 48px; }
.list li:first-child { border-top: 0; }
.list li:hover { background: var(--sunk); }
.list li:focus-visible { outline-offset: -2px; background: var(--sunk); }
.avatar { width: 30px; height: 30px; flex: none; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: var(--t-sm); }
.who-cell { min-width: 0; flex: 1; display: grid; }
.who-cell b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-cell small { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .pills { flex: none; }

/* переключатель */
.seg { display: inline-flex; background: var(--line-soft); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { background: transparent; color: var(--muted); font-weight: 500; padding: 5px 12px; font-size: var(--t-sm); }
.seg button:hover { filter: none; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* задачи, предложения */
.item { padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); display: grid; gap: var(--s1); }
.item:first-child { border-top: 0; }
.item b { font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* секции внутри карточки человека */
.sec { display: grid; gap: var(--s2); }
.sec > h3 { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: var(--s1); }
.person-head h2 { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.01em; font-weight: 650; }
.note { white-space: pre-wrap; background: var(--sunk); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: var(--s2) var(--s3); overflow-wrap: anywhere; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.form { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: grid; gap: var(--s3); }
.form label { display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--muted); }

/* лента */
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: 6px 0 6px var(--s3); border-left: 2px solid var(--line); margin-left: 3px; position: relative; }
.feed li.in { border-left-color: var(--accent); }
.feed li.in::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.feed time { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.feed .what { overflow-wrap: anywhere; }
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-filter { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4) var(--s3); color: var(--muted); }
.audit-filter input { margin: 0; }
.audit-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--s3); padding: 8px var(--s4); border-top: 1px solid var(--line-soft); align-items: baseline; }
.audit-list li:first-child { border-top: 0; }
.audit-list time { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
@media (max-width: 760px) {
  .feed li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .audit-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .list li { padding: 9px var(--s3); }
  .list .pills { display: none; }
  .who-cell small { white-space: normal; }
  .chrow { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .chname { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--s2); }
}

/* Подсказка «что сделать» и результат сверки */
.next { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
.next.stop { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.next h3 { margin: 0; }
.next-do { font-size: var(--t-lg); font-weight: 600; }
.checkbox { display: grid; gap: var(--s1); justify-items: start; }
.checkbox .pill { white-space: normal; border-radius: var(--r-md); padding: 3px 10px; }

/* Очереди: таблица на компьютере, карточки на телефоне */
.qtools { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.qwrap { overflow-x: auto; }
.qt { width: 100%; border-collapse: collapse; }
.qt th { text-align: left; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: bottom; }
.qt td { padding: var(--s3) var(--s2); border-top: 1px solid var(--line-soft); vertical-align: top; font-size: var(--t-md); }
.qt tbody tr:first-child td { border-top: 0; }
.qt th:first-child, .qt td:first-child { padding-left: var(--s4); }
.qt th:last-child, .qt td:last-child { padding-right: var(--s4); }
.qt tr.is-stop td { background: var(--bad-soft); }
.qt td > div, .qwho, .qact, .qpulse { display: grid; gap: 3px; justify-items: start; }
.qt small { font-size: var(--t-sm); }
.qt td.c-who { min-width: 170px; }
.qwho b { font-weight: 600; }
.qdo { font-weight: 600; }
.qdo.stop { color: var(--bad); }
.qact { min-width: 170px; }
.qact .btns { margin-top: var(--s1); }
.qpulse { min-width: 110px; }
.pill.dim { background: var(--line-soft); color: var(--muted); }
.soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) {
  .soon-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .qtools { padding: var(--s3); }
  .qt thead { display: none; }
  .qt, .qt tbody, .qt tr, .qt td { display: block; width: 100%; }
  .qt tr { padding: var(--s3); border-top: 1px solid var(--line-soft); display: grid; gap: var(--s2); }
  .qt tbody tr:first-child { border-top: 0; }
  .qt td, .qt th:first-child, .qt td:first-child, .qt td:last-child { padding: 0; border: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); align-items: start; background: transparent; }
  .qt td::before { content: attr(data-label); color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
  .qt td.c-who { grid-template-columns: minmax(0, 1fr); }
  .qt td.c-who::before { display: none; }
  .qt tr.is-stop { background: var(--bad-soft); }
  .qact, .qpulse { min-width: 0; }
}
.qfoot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }

/* Задача 8: типы ленты, выбранная строка, окно клавиш */
.feed-chips { margin-bottom: var(--s2); }
.chip.toggle { cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-sm); padding: 3px 12px; min-height: 32px; }
.chip.toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.list li.ksel, .item.navrow.ksel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--sunk); }
.item.navrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.keys-btn { min-width: 32px; font-weight: 600; }
.help { position: fixed; z-index: 31; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: var(--s4); display: grid; gap: var(--s3); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
#helpLayer .scrim { z-index: 30; }
.help h2 { margin: 0; font-size: 1.15rem; }
.keys-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; align-items: center; }
.keys-list dt, .keys-list dd { margin: 0; }
.qt tr[data-pid].ksel td { background: var(--sunk); }
.qt tr[data-pid].ksel { outline: 2px solid var(--accent); outline-offset: -2px; }
.qt tr[data-pid]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }