/* Jarvis 2.0 — компоненты интерфейса. Требует tokens.css.
   Порядок: каркас → навигация → панели → баннеры → задачи → чипы →
   кнопки → ёмкость дня → пульс → строки состояния → формы → пустые
   состояния → служебное (htmx, тосты, адаптив). */

/* ═══════════════════════════════ каркас ═══════════════════════════════ */

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100dvh;
}

.main {
  min-width: 0;                       /* иначе grid-колонка растягивается содержимым */
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  width: 100%;
  max-width: 1180px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.page-head__sub { color: var(--text-2); font-size: 13px; }

/* две колонки экрана «Сегодня» */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: var(--sp-5);
  align-items: start;
}

.col { display: grid; gap: var(--sp-4); min-width: 0; }

.stack { display: grid; gap: var(--sp-3); }
.stack--tight { gap: var(--sp-2); }
.stack--loose { gap: var(--sp-5); }

.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.right { text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ссылка «к содержимому»: не мешает мыши, но появляется при табе с клавиатуры */
.skip {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
}
.skip:focus-visible { top: var(--sp-3); }

/* единственный разрешённый способ горизонтальной прокрутки */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════ навигация ═════════════════════════════ */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
}

.brand__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--jade-wash);
  color: var(--jade);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

.brand__name { font-weight: 640; letter-spacing: -.01em; }
.brand__env {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}

.nav__link:hover { background: var(--surface-2); color: var(--text); }

.nav__link[aria-current="page"] {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 640;
}

.nav__glyph {
  width: 18px;
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

.nav__link[aria-current="page"] .nav__glyph { color: var(--jade); }

.nav__count {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-3);
}

/* нижняя часть панели: быстрый захват + служебное */
.sidebar__foot { margin-top: auto; display: grid; gap: var(--sp-3); }

.capture { display: grid; gap: var(--sp-2); }

.capture__hint {
  min-height: 16px;
  font-size: 11.5px;
  color: var(--text-3);
}

.capture__hint[data-state="ok"] { color: var(--jade); }

.sidebar__meta {
  display: grid;
  gap: 2px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--text-3);
}

/* ═══════════════════════════════ панели ══════════════════════════════ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.panel__body { padding: var(--sp-4); }
.panel__body--flush { padding: 0; }
.panel__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-2);
}

.section { display: grid; gap: var(--sp-2); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.rule { height: 1px; background: var(--line-soft); border: 0; margin: var(--sp-2) 0; }

/* ══════════════════════════════ баннеры ══════════════════════════════ */

.banners { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--surface-2);
}

.banner__glyph { font-size: 13px; line-height: 20px; }
.banner__title { font-weight: 640; }
.banner__text { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.banner__action { align-self: center; }

.banner--warn { background: var(--amber-wash); border-left-color: var(--amber); }
.banner--warn .banner__glyph { color: var(--amber); }

.banner--bad { background: var(--clay-wash); border-left-color: var(--clay); }
.banner--bad .banner__glyph { color: var(--clay); }

.banner--info { background: var(--sky-wash); border-left-color: var(--sky); }
.banner--info .banner__glyph { color: var(--sky); }

/* ═══════════════════════════ карточка задачи ═════════════════════════ */

.tasks { display: grid; gap: var(--sp-2); }

.task {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur), background var(--dur), opacity var(--dur);
}

.task:hover { border-color: var(--text-3); }

.task__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.task__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}

.task__notes {
  font-size: 12.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.task__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
}

/* на мышиных экранах действия проявляются по наведению, но всегда видны
   при клавиатурном фокусе — иначе карточка становится недоступной с клавиатуры */
@media (hover: hover) and (pointer: fine) {
  .task__actions { opacity: 0; transition: opacity var(--dur); }
  .task:hover .task__actions,
  .task:focus-within .task__actions { opacity: 1; }
}

/* «главное сегодня» и «лягушка» — акцентная черта слева */
.task--mit,
.task--frog {
  background: var(--surface-2);
  padding-left: calc(var(--sp-4) + 3px);
}

.task--mit::before,
.task--frog::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--jade);
}

.task--mit { border-color: var(--jade-dim); }
.task--mit .task__title { font-size: 16px; font-weight: 660; }
.task--frog::before { background: var(--amber); }

.task--maintenance { background: transparent; border-style: dashed; }

.task[data-status="done"] { opacity: .6; }
.task[data-status="done"] .task__title { text-decoration: line-through; color: var(--text-2); }
.task[data-status="dropped"] { opacity: .5; }
.task[data-status="dropped"] .task__title { text-decoration: line-through; }

.task--flash { animation: flash var(--dur) ease-out; }
@keyframes flash { from { background: var(--jade-wash); } }

/* ═════════════════════════════════ чипы ══════════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
}

.chip > .chip__text { overflow: hidden; text-overflow: ellipsis; }

.chip--num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 550; }

/* чип цели: точка + цвет по домену цели */
.chip--goal::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.chip--goal { color: var(--text-2); background: var(--surface-3); border-color: transparent; }

.chip--goal[data-goal*="business"],
.chip--goal[data-goal*="дело"],
.chip--goal[data-goal*="wb"] { color: var(--jade); background: var(--jade-wash); }

.chip--goal[data-goal*="health"],
.chip--goal[data-goal*="body"],
.chip--goal[data-goal*="тело"] { color: var(--sky); background: var(--sky-wash); }

.chip--goal[data-goal*="relations"],
.chip--goal[data-goal*="family"],
.chip--goal[data-goal*="связи"] { color: var(--clay); background: var(--clay-wash); }

.chip--goal[data-goal*="money"],
.chip--goal[data-goal*="finance"],
.chip--goal[data-goal*="деньги"] { color: var(--amber); background: var(--amber-wash); }

/* контексты и состояния */
.chip--warn { color: var(--amber); background: var(--amber-wash); border-color: transparent; }
.chip--bad { color: var(--clay); background: var(--clay-wash); border-color: transparent; }
.chip--ok { color: var(--jade); background: var(--jade-wash); border-color: transparent; }
.chip--ghost { background: transparent; }

/* ════════════════════════════════ кнопки ═════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}

.btn:hover { background: var(--surface-3); border-color: var(--text-3); }
.btn:active { transform: translateY(.5px); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--jade);
  border-color: var(--jade);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--jade); border-color: var(--jade); filter: brightness(1.07); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  font-weight: 550;
}
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

.btn--danger { color: var(--clay); }
.btn--danger:hover { background: var(--clay-wash); border-color: var(--clay); }

.btn--sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn--block { width: 100%; }

.btn__glyph { font-size: 11px; opacity: .85; }

.btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ════════════════════════════ ёмкость дня ════════════════════════════ */

.capacity { display: grid; gap: var(--sp-2); }

.capacity__bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}

.capacity__seg { height: 100%; min-width: 0; transition: width var(--dur); }
.capacity__seg[data-kind="meetings"] { background: var(--sky); }
.capacity__seg[data-kind="planned"] { background: var(--jade); }
.capacity__seg[data-kind="over"] { background: var(--clay); }
.capacity__seg[data-kind="free"] { background: transparent; }

.capacity__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 12px;
  color: var(--text-2);
}

.capacity__item { display: inline-flex; align-items: baseline; gap: 6px; }

.capacity__key::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--text-3);
}
.capacity__key[data-kind="meetings"]::before { background: var(--sky); }
.capacity__key[data-kind="planned"]::before { background: var(--jade); }
.capacity__key[data-kind="free"]::before { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.capacity__key[data-kind="over"]::before { background: var(--clay); }

.capacity__val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }

/* ═══════════════════════════ пульс (5 сигналов) ══════════════════════ */

.pulse { display: grid; }

.signal {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
}

.signal + .signal { border-top: 1px solid var(--line-soft); }

.signal__name { font-size: 13px; color: var(--text-2); }

.signal__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
}

.signal[data-status="warn"] .signal__value { color: var(--amber); }
.signal[data-status="alert"] .signal__value { color: var(--clay); }
.signal[data-status="nodata"] .signal__value { color: var(--text-3); font-weight: 500; }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex: 0 0 auto;
}

.dot[data-status="ok"] { background: var(--jade); }
.dot[data-status="warn"] { background: var(--amber); }
.dot[data-status="alert"], .dot[data-status="error"], .dot[data-status="bad"] { background: var(--clay); }
.dot[data-status="nodata"], .dot[data-status="none"] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}

/* ═════════════════════ строки состояния / обязательства ══════════════ */

.rows { display: grid; }

.row {
  display: grid;
  grid-template-columns: 10px minmax(140px, 1.2fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: 10px var(--sp-4);
}

.row + .row { border-top: 1px solid var(--line-soft); }
.row__name { font-weight: 600; }
.row__detail { color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.row__when {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface-3);
  color: var(--text-2);
}

.state[data-state="ok"] { background: var(--jade-wash); color: var(--jade); }
.state[data-state="warn"], .state[data-state="degraded"], .state[data-state="running"] {
  background: var(--amber-wash); color: var(--amber);
}
.state[data-state="error"], .state[data-state="bad"], .state[data-state="needs_reauth"] {
  background: var(--clay-wash); color: var(--clay);
}

/* обязательства недели */
.commit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
  align-items: start;
}
.commit + .commit { border-top: 1px solid var(--line-soft); }
.commit__mark { color: var(--text-3); font-family: var(--mono); font-size: 12px; line-height: 20px; }
.commit[data-status="done"] .commit__mark { color: var(--jade); }
.commit[data-status="done"] .commit__text { color: var(--text-2); text-decoration: line-through; }
.commit[data-status="partial"] .commit__mark { color: var(--amber); }
.commit[data-status="dropped"] { opacity: .55; }
.commit__text { font-size: 13px; }

/* календарь дня */
.agenda { display: grid; }
.agenda__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 8px var(--sp-4);
  align-items: baseline;
}
.agenda__row + .agenda__row { border-top: 1px solid var(--line-soft); }
.agenda__time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--jade);
}
.agenda__title { font-size: 13px; overflow-wrap: anywhere; }

/* предпросмотр подтверждения */
.approval { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.approval + .approval { border-top: 1px solid var(--line-soft); }

.preview {
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

/* таблица прогонов агента; min-width включает прокрутку в .scroll-x,
   вместо того чтобы сжимать колонки до нечитаемости */
.table { font-size: 13px; min-width: 660px; }
.table th {
  text-align: left;
  padding: 8px var(--sp-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.table .num { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }

/* ════════════════════════════════ формы ══════════════════════════════ */

.field { display: grid; gap: 6px; }

.field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-3);
  font-weight: 600;
}

.input, .textarea, .select {
  width: 100%;
  padding: 0 10px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.5; }

.input:hover, .textarea:hover, .select:hover { border-color: var(--text-3); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px var(--jade-wash);
}

.input--code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .22em;
  text-align: center;
}

.field__hint { font-size: 11.5px; color: var(--text-3); }

.form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--clay-wash);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  font-size: 13px;
  color: var(--text);
}

/* ═════════════════════════════ вход в систему ════════════════════════ */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.auth__card {
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.auth__head { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; }
.auth__foot { text-align: center; font-size: 11.5px; color: var(--text-3); }

/* ═══════════════════════════ пустые состояния ════════════════════════ */

.empty {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-5) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.empty--center { justify-items: center; text-align: center; }
.empty__glyph { font-size: 15px; color: var(--text-3); }
.empty__title { font-size: 14px; font-weight: 640; }
.empty__text { font-size: 13px; color: var(--text-2); max-width: 54ch; }
.empty__hint { font-size: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ═════════════════════════ клавиатурные подсказки ════════════════════ */

kbd, .kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.kbd-hints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 11.5px;
  color: var(--text-3);
}
.kbd-hint { display: inline-flex; align-items: center; gap: 5px; }

/* ═══════════════════════════ служебные состояния ═════════════════════ */

/* htmx: карточка гаснет на время запроса, а не подпрыгивает */
.htmx-request.task, .task.htmx-request { opacity: .5; pointer-events: none; }
.htmx-request .btn, .btn.htmx-request { opacity: .6; pointer-events: none; }
.htmx-indicator { opacity: 0; transition: opacity var(--dur); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 50;
  display: grid;
  gap: var(--sp-2);
  max-width: min(92vw, 420px);
}

.toast__item {
  padding: 10px var(--sp-4);
  border-radius: var(--r);
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 13px;
}

.footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  font-size: 11.5px;
  color: var(--text-3);
}

.footer__sync { display: inline-flex; align-items: center; gap: 6px; }

/* ═════════════════════════════ адаптивность ══════════════════════════ */

@media (max-width: 1080px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* левая панель превращается в верхнюю полосу */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) 0;
    background: var(--veil);
    backdrop-filter: saturate(160%) blur(10px);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand { padding: 0; }

  .nav {
    flex-direction: row;
    gap: var(--sp-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { padding: 6px 10px; }
  .nav__count { margin-left: 4px; }

  /* быстрый захват на телефоне живёт на экране «Инбокс», в полосе ему тесно */
  .sidebar__foot { display: none; }

  .main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .row__detail { grid-column: 2 / -1; grid-row: 2; }
  .task__actions { opacity: 1; }
  .cols { gap: var(--sp-4); }
}

@media (max-width: 420px) {
  .banner { grid-template-columns: auto minmax(0, 1fr); }
  .banner__action { grid-column: 2; justify-self: start; }
}

@media print {
  .sidebar, .task__actions, .btn, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; break-inside: avoid; }
}

/* ── Поле пароля с глазком ──────────────────────────────────────────────
   Кнопка внутри поля, а не отдельной строкой: так это устроено везде,
   и человек не ищет её глазами. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { width: 100%; padding-right: 46px; }

.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur), background var(--dur);
}
.pw-eye:hover { color: var(--text); background: var(--surface-3); }
.pw-eye:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
.pw-eye.is-on { color: var(--jade); }
.pw-eye svg { width: 20px; height: 20px; display: block; }
.pw-eye .eye-off { display: none; }
.pw-eye.is-on .eye-on { display: none; }
.pw-eye.is-on .eye-off { display: block; }

.field__hint.is-ok  { color: var(--jade); }
.field__hint.is-bad { color: var(--amber); }