/* Hallmark · component: mini-app shell · см. tokens.css для полного штампа */
@import url('tokens.css');

* { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
/* Атрибут hidden должен побеждать любой авторский display (grid/flex). */
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background:
    radial-gradient(56% 38% at 82% -6%, color-mix(in oklch, var(--color-bloom-violet) 55%, transparent), transparent 70%),
    radial-gradient(50% 34% at 8% 104%, color-mix(in oklch, var(--color-bloom-amber) 35%, transparent), transparent 72%),
    var(--color-paper);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  /* Снизу оставляем место под вкладки: иначе последняя карточка уезжает под них. */
  padding: var(--space-md) var(--space-md)
    calc(var(--space-2xl) + 56px + env(safe-area-inset-bottom));
}

/* Поля ввода — не меньше 16px. Меньше — и iOS Safari зумит страницу при
   фокусе, экран «прыгает». Одна строка, которую пропускают чаще всего. */
input, textarea, select { font-size: 16px; }

/* Шапка */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0 var(--space-lg);
}
.masthead h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: var(--text-display);
  letter-spacing: -0.03em;
}
.masthead h1 .dot { color: var(--color-accent); }
.masthead .who {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

/* Переключатель разделов */
.views {
  display: flex;
  gap: var(--space-2xs);
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.views button {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.views button:hover { color: var(--color-ink); }
.views button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.views button[aria-selected="true"] {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

/* Карточка очереди */
.card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.card:hover {
  background: var(--color-paper-3);
  box-shadow: 0 6px 28px -12px color-mix(in oklch, var(--color-bloom-violet) 60%, transparent);
}
.card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.card.dragging { opacity: 0.55; }
.card .thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-paper-3);
  display: grid;
  place-items: center;
  color: var(--color-ink-faint);
  overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .meta { min-width: 0; }
.card .meta .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
  min-width: 0;
}
.card .meta .when {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}
.card .side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
.drag-handle {
  border: 0;
  background: transparent;
  color: var(--color-ink-faint);
  font-size: 1.05rem;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  cursor: grab;
  touch-action: none;
}
.drag-handle:hover { color: var(--color-ink); background: var(--color-paper-3); }
.drag-handle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.drag-handle:active { cursor: grabbing; }

/* Статусы */
.badge {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.badge[data-s="content_review"] { color: var(--color-wait); border-color: color-mix(in oklch, var(--color-wait) 45%, transparent); }
.badge[data-s="content_approved"],
.badge[data-s="queued"] { color: var(--color-ok); border-color: color-mix(in oklch, var(--color-ok) 45%, transparent); }
.badge[data-s="publish_approved"] { color: var(--color-accent); border-color: color-mix(in oklch, var(--color-accent) 50%, transparent); }
.badge[data-s="published"] { color: var(--color-ink-faint); }
.badge[data-s="rejected"],
.badge[data-s="expired"] { color: var(--color-danger); border-color: color-mix(in oklch, var(--color-danger) 45%, transparent); }

/* Деталь элемента */
.detail { animation: rise var(--dur-base) var(--ease-out); }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
.detail .back {
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-xs) 0;
  cursor: pointer;
}
.detail .back:hover { color: var(--color-ink); }
.detail .back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.detail h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin: var(--space-xs) 0 var(--space-2xs);
  overflow-wrap: anywhere;
}
.detail .sub {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-md);
}

.gallery {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.gallery > * {
  scroll-snap-align: start;
  flex: 0 0 78%;
  max-width: 78%;
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.gallery img, .gallery video {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
  max-height: 52vh;
  object-fit: contain;
  background: var(--color-paper-2);
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: var(--space-md) 0 var(--space-2xs);
}
.caption-box {
  width: 100%;
  min-height: 9rem;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  resize: vertical;
}
.caption-box:hover { border-color: var(--color-line); }
.caption-box:focus-visible { outline: none; border-color: var(--color-focus); }
.caption-box[disabled] { color: var(--color-ink-soft); }

.note {
  background: color-mix(in oklch, var(--color-paper-2) 70%, var(--color-bloom-amber) 8%);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* Панель действий */
.actions {
  position: sticky;
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
.btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-paper-3); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn[data-busy="1"] { opacity: 0.7; pointer-events: none; }
.btn.primary {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-accent-ink);
}
.btn.primary:hover { background: color-mix(in oklch, var(--color-accent) 88%, white); }
.btn.danger {
  color: var(--color-danger);
  border-color: color-mix(in oklch, var(--color-danger) 45%, transparent);
}

/* История */
.history { margin-top: var(--space-lg); }
.history li {
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--color-line);
  overflow-wrap: anywhere;
}

/* Идеи */
.idea-form { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.idea-form input, .idea-form textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.idea-form input:hover, .idea-form textarea:hover { border-color: var(--color-line); }
.idea-form input:focus-visible, .idea-form textarea:focus-visible { outline: none; border-color: var(--color-focus); }
.idea {
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.idea .t { font-family: var(--font-display); font-weight: 700; overflow-wrap: anywhere; }
.idea .d { color: var(--color-ink-soft); font-size: var(--text-sm); margin: var(--space-2xs) 0 var(--space-xs); overflow-wrap: anywhere; }
.idea .row { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink-soft);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-xs);
  cursor: pointer;
}
.chip:hover { color: var(--color-ink); border-color: var(--color-ink-faint); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.chip[data-on="1"] { color: var(--color-accent); border-color: color-mix(in oklch, var(--color-accent) 50%, transparent); }

/* Снекбар: сообщение и «Отменить» вместо диалогов «вы уверены?».
   Всегда в одном месте — над вкладками, по центру. */
.snack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-md) + 56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
  box-shadow: 0 8px 30px -10px rgb(0 0 0 / 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  max-width: min(92vw, 480px);
}
.snack[data-show="1"] { opacity: 1; pointer-events: auto; }
.snack[data-tone="bad"] { color: var(--color-danger); }
.snack-text { min-width: 0; overflow-wrap: anywhere; }
.snack-undo {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
}
.snack-undo:hover { background: color-mix(in oklch, var(--color-accent) 14%, transparent); }
.empty {
  color: var(--color-ink-faint);
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}
.gate {
  min-height: 70dvh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--space-sm);
  color: var(--color-ink-soft);
}
.gate h2 { font-family: var(--font-display); font-weight: 800; color: var(--color-ink); }

/* Галерея: фигуры медиа, зум-подсказка, счётчик пинов */
.media-fig { position: relative; margin: 0; }
.media-fig.zoomable { cursor: zoom-in; }
.media-fig .zoom-hint {
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 75%, transparent);
  color: var(--color-ink-soft);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2xs);
  font-size: var(--text-sm);
  pointer-events: none;
}
.pin-count {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  color: var(--color-wait);
  white-space: nowrap;
}
.pin-count.on-media {
  position: absolute;
  left: var(--space-xs);
  top: var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 80%, transparent);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-xs);
}
.hint { color: var(--color-ink-faint); font-size: var(--text-sm); margin: var(--space-2xs) 0 0; }

/* Группы вариантов: радиовыбор «что в пакете» */
.variant-group {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.variant {
  background: var(--color-paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xs);
}
.variant:has(input:checked) { border-color: color-mix(in oklch, var(--color-accent) 55%, transparent); }
.variant img, .variant video { width: 100%; border-radius: var(--radius-sm); display: block; max-height: 40vh; object-fit: contain; }
.variant-pick {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-2xs) var(--space-2xs);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.variant-pick input { accent-color: var(--color-accent); width: 1.1rem; height: 1.1rem; }
.variant:has(input:checked) .variant-pick { color: var(--color-ink); }
.media-fig.audio {
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
}
.media-fig.audio .audio-label { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2xs); }
.media-fig.audio audio { width: 100%; }

/* Список замечаний под галереей */
.pins-list { display: grid; gap: var(--space-2xs); }
.pin-row {
  list-style: none;
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
}
.pin-row[data-pin-status="resolved"] { opacity: 0.55; }
.pin-no {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  background: var(--color-wait);
  color: var(--color-paper);
  border-radius: 50%;
  min-width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pin-row[data-pin-status="resolved"] .pin-no { background: var(--color-ink-faint); }
.pin-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pin-sub { color: var(--color-ink-faint); font-size: var(--text-sm); overflow-wrap: anywhere; }
.pin-row .chip { align-self: center; }

/* Кнопка озвучки */
.tts-row { margin-top: var(--space-xs); display: flex; }
.btn.tts { flex: 0 1 auto; }

/* Лайтбокс: зум + пины */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--color-paper) 92%, black);
  display: flex;
  flex-direction: column;
  animation: rise var(--dur-base) var(--ease-out);
}
.lb-bar {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  padding-top: calc(var(--space-xs) + env(safe-area-inset-top));
}
.lb-bar button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
}
.lb-pin[data-on="1"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: transparent;
}
.lb-hint { color: var(--color-ink-faint); font-size: var(--text-sm); margin-left: auto; }
.lb-stage {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.lb-canvas { position: relative; transform-origin: 0 0; }
.lb-canvas img {
  display: block;
  max-width: 96vw;
  max-height: 74dvh;
  user-select: none;
  -webkit-user-drag: none;
}
.pin-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-paper);
  background: var(--color-wait);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.71rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.pin-dot[data-status="resolved"] { background: var(--color-ink-faint); }
.lb-form, .lb-tip {
  padding: var(--space-sm);
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-paper-2);
  display: grid;
  gap: var(--space-xs);
}
.lb-form textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  resize: vertical;
}
.lb-form textarea:focus-visible { outline: none; border-color: var(--color-focus); }
.lb-form-row { display: flex; gap: var(--space-xs); }
.lb-tip-text { overflow-wrap: anywhere; }

/* Канбан производства */
.kanban {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-sm);
}
.kanban-col {
  flex: 0 0 84%;
  max-width: 340px;
  scroll-snap-align: start;
  background: color-mix(in oklch, var(--color-paper-2) 55%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.kanban-col h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.col-count {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  color: var(--color-ink-faint);
}
.empty.small { padding: var(--space-sm); font-size: var(--text-sm); }
/* Пустой экран объясняет и даёт кнопку — «нет данных» здесь не годится. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  text-align: center;
  color: var(--color-ink-faint);
  padding: var(--space-lg) var(--space-sm);
}
.empty-state .btn { flex: 0 0 auto; }
.idea-prompt, .idea-model, .idea-aspect {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  margin-top: var(--space-xs);
}
.idea-prompt:focus-visible, .idea-model:focus-visible, .idea-aspect:focus-visible {
  outline: none;
  border-color: var(--color-focus);
}
.idea-flag {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-top: var(--space-2xs);
  cursor: pointer;
}
.idea-flag input { accent-color: var(--color-accent); width: 1rem; height: 1rem; }
.idea-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.idea-actions .btn { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); }
.idea-fail { color: var(--color-danger); font-size: var(--text-sm); margin-top: var(--space-xs); overflow-wrap: anywhere; }
.gen-confirm .note { margin-top: var(--space-xs); }
.prompt-out textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  resize: vertical;
}
.gen-live {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-wait);
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
}
.spin {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--color-wait) 35%, transparent);
  border-top-color: var(--color-wait);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-results { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
/* Превью не должно занимать весь экран: вертикальный кадр 9:16 без ограничения
   по высоте выдавливает из карточки всё остальное. */
.gen-results img, .gen-results video {
  width: 100%;
  max-height: 44vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--color-paper-3);
}
.gen-results audio { width: 100%; }
.dropped-box { margin-top: var(--space-md); color: var(--color-ink-soft); }
.dropped-box summary { cursor: pointer; font-size: var(--text-sm); }
.dropped-box .pin-sub { display: flex; gap: var(--space-xs); align-items: center; padding: var(--space-2xs) 0; }

/* ---------- Вкладки внизу ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line);
}
.tabbar button {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  cursor: pointer;
  min-height: 48px;
}
.tabbar button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tabbar button[aria-selected="true"] { color: var(--color-ink); }
.tabbar button[aria-selected="true"] .tab-ico { color: var(--color-accent); }
.tab-ico { font-size: 1.05rem; line-height: 1.1; }
.tab-count {
  position: absolute;
  top: 2px;
  right: 22%;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  display: grid;
  place-items: center;
}

/* ---------- Решения: разделы инбокса ---------- */

.lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}
.inbox-sec { margin-bottom: var(--space-lg); }
.inbox-sec > h3,
.inbox-sec > summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.inbox-sec > summary { cursor: pointer; }
.inbox-sec[data-sec="mine"] > h3 { color: var(--color-ink); }
/* «Что сделать» — главная строка карточки в разделе «ждут вас». */
.card .meta .step {
  color: var(--color-accent);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}
.trash-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.trash-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Подпись: состояние сохранения и счётчик ---------- */

.field-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  min-height: 1.2em;
}
.char-left[data-over="1"] { color: var(--color-danger); }
.danger-row { display: flex; margin-top: var(--space-md); }
.danger-row .btn { flex: 0 1 auto; }

/* Панель действий поднимается над клавиатурой: --kbd ставит ui.js
   по visualViewport, потому что innerHeight на iOS врёт. */
.actions { bottom: calc(var(--space-md) + env(safe-area-inset-bottom) + var(--kbd, 0px)); }

/* ---------- Скелетоны ---------- */
/* Заглушка в форме будущего содержимого: место зарезервировано, приехавшие
   данные ничего не сдвигают. Крутилку не используем. */

.skel-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.skel-lines { display: grid; gap: var(--space-xs); }
.skel {
  background: linear-gradient(90deg,
    var(--color-paper-3) 25%,
    color-mix(in oklch, var(--color-paper-3) 60%, var(--color-line)) 50%,
    var(--color-paper-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
.skel-thumb { width: 84px; height: 84px; }
.skel-line { height: 0.9rem; }
.skel-line.w70 { width: 70%; }
.skel-line.w40 { width: 40%; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 375px) {
  .card { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .card .thumb { width: 64px; height: 64px; }
  .skel-card { grid-template-columns: 64px minmax(0, 1fr); }
  .skel-thumb { width: 64px; height: 64px; }
  .masthead .who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}