/* ══════════════════════════════════════════════════════════════════════════
   my-tracker.css — «Мой трекер» (трек E). Дополняет tracker.css: там read-only
   витрина, здесь те же блоки становятся интерактивными.
   Подключается ПОСЛЕ tracker.css в @section Head, поэтому переопределения
   .pgrid__* работают на равной специфичности.
   Цвета — только через переменные: dark-theme.css переопределяет их на
   html[data-theme="dark"], отдельного тёмного файла заводить не нужно.
   ══════════════════════════════════════════════════════════════════════════ */

/* --trk-planned и базовый стиль .pgrid__cell--planned переехали в tracker.css (общий бандл):
   статус «Запланировано» теперь виден и в публичной витрине, не только у владельца. */

/* ── Цвета статусов — семантические, «как в мобилке» (красный/жёлтый/зелёный/синий), НО только во
   ВЛАДЕЛЬЧЕСКОМ трекере (обёртка .trkbk). Публичная витрина (Tracker/BookDetail) остаётся на
   брендовых --trk-* из tracker.css — её не трогаем. Переопределяем переменные на обёртке: каскад
   разом красит сетку, полосу прогресса, бейджи, плановые ячейки и кнопки статуса в модалке (она
   внутри .trkbk). --primary/--accent НЕ трогаем — кнопки/ссылки/градиенты остаются брендовыми.
   Значения = мобильный config/colors.ts (commonColor), одинаковы для светлой и тёмной темы. ── */
.page-wrap.trkbk {
  --trk-ruined: #e74c3c;      /* error   — Испорчено (красный)  */
  --trk-inprogress: #f39c12;  /* warning — В процессе (жёлтый)  */
  --trk-completed: #27ae60;   /* success — Завершено (зелёный)  */
  --trk-planned: #3b82f6;     /* planned — В планах (синий)     */
}
/* Тинты ячеек владельческой сетки следуют за семантическими цветами (в витрине — хардкод из
   tracker.css). Специфичность (0,2,0) перебивает базовое правило .pgrid__cell--X (0,1,0). */
.pgrid--own .pgrid__cell--completed { background: color-mix(in srgb, var(--trk-completed) 6%, transparent); }
.pgrid--own .pgrid__cell--inprogress { background: color-mix(in srgb, var(--trk-inprogress) 6%, transparent); }
.pgrid--own .pgrid__cell--ruined { background: color-mix(in srgb, var(--trk-ruined) 6%, transparent); }
.pgrid--own .pgrid__cell--planned { background: color-mix(in srgb, var(--trk-planned) 6%, transparent); }

/* ═══════════ Шапка раздела ═══════════ */

.mtrk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0 8px;
}
.mtrk-head__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.mtrk-head__count {
  margin-left: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-3);
}
.mtrk-head__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
@media (hover: hover) {
  .mtrk-head__add:hover {
    background: var(--primary-hover);
  }
}

/* ═══════════ Модалка-редактор страницы (пришла на смену кисти) ═══════════ */

body.mtrk-noscroll {
  overflow: hidden;
}

/* Длинный редактор (статусы + пикер работ) может не влезть — панель скроллим.
   Правка книги — тоже: на низком экране её футер иначе уезжает за край. */
#mtrkPageModal .mtrk-modal__panel,
#mtrkSettings .mtrk-modal__panel {
  max-height: 88vh;
  overflow-y: auto;
}

/* Статус — карточки с иконкой (как экран «Добавить страницу» в приложении): иконка сверху,
   подпись снизу; выбранная = цветная рамка + лёгкая заливка цветом статуса + цветная иконка.
   Цвета — из категорийных токенов сетки (--trk-*), чтобы совпадать с клетками страниц. */
.mtrk-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 460px) {
  .mtrk-status {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mtrk-status__btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.mtrk-status__ic {
  display: inline-flex;
  color: var(--text-4, var(--text-3));
  transition: color 0.15s;
}
.mtrk-status__lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  line-height: 1.2;
}
.mtrk-status__btn--ruined.is-on {
  border-color: var(--trk-ruined);
  background: color-mix(in srgb, var(--trk-ruined) 10%, transparent);
}
.mtrk-status__btn--inprogress.is-on {
  border-color: var(--trk-inprogress);
  background: color-mix(in srgb, var(--trk-inprogress) 12%, transparent);
}
.mtrk-status__btn--completed.is-on {
  border-color: var(--trk-completed);
  background: color-mix(in srgb, var(--trk-completed) 10%, transparent);
}
.mtrk-status__btn--planned.is-on {
  border-color: var(--trk-planned);
  background: color-mix(in srgb, var(--trk-planned) 10%, transparent);
}
.mtrk-status__btn--ruined.is-on .mtrk-status__ic { color: var(--trk-ruined); }
.mtrk-status__btn--inprogress.is-on .mtrk-status__ic { color: var(--trk-inprogress); }
.mtrk-status__btn--completed.is-on .mtrk-status__ic { color: var(--trk-completed); }
.mtrk-status__btn--planned.is-on .mtrk-status__ic { color: var(--trk-planned); }
.mtrk-status__btn.is-on .mtrk-status__lbl { color: var(--text-1); }
@media (hover: hover) {
  .mtrk-status__btn:not(.is-on):hover {
    border-color: var(--text-3);
  }
}

/* Пикер работ: сетка миниатюр + «без работы» + ссылка «загрузить новую». */
.mtrk-artpick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mtrk-artpick.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.mtrk-artpick__item,
.mtrk-artpick__none {
  appearance: none;
  cursor: pointer;
  padding: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  flex: 0 0 auto;
}
.mtrk-artpick__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mtrk-artpick__none {
  font: inherit;
  font-size: 0.7rem;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}
.mtrk-artpick__item.is-on,
.mtrk-artpick__none.is-on {
  border-color: var(--primary);
}
.mtrk-artpick__upload {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

/* ═══════════ Сетка страниц (владельческая) ═══════════ */

.pgrid--own .pgrid__slot {
  position: relative;
}
.pgrid--own .pgrid__slot.is-hidden {
  display: none;
}

/* Ячейка — кнопка: сбрасываем всё, что браузер даёт <button> по умолчанию. */
.pgrid--own .pgrid__cell {
  appearance: none;
  font: inherit;
  color: inherit;
  padding: 0;
  width: 100%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Иначе Safari/iOS подсвечивает кнопку серым на каждый тап при покраске. */
  -webkit-tap-highlight-color: transparent;
}
.pgrid--own .pgrid__cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (hover: hover) {
  /* Ховер даём ТОЛЬКО непокрашенной ячейке: селектор (0,3,0) перебивал бы border-color
     статуса (0,1,0), и только что покрашенная страница под курсором выглядела бы нетронутой —
     а рефлекторный второй клик той же кистью её стирает. Покрашенным — тень, как в витрине. */
  .pgrid--own .pgrid__cell--empty:hover {
    border-color: var(--text-3);
  }
  .pgrid--own .pgrid__cell:hover {
    box-shadow: var(--shadow-md);
  }
}

/* Разворот: ячейки одной строки помечены общей заливкой-штрихом, чтобы было видно,
   что клик по любой из них красит их все. */
.pgrid__cell--spread::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 3px;
  border: 1px dashed currentColor;
  opacity: 0.35;
  pointer-events: none;
}

/* Превью работы в ячейке лежит прямым потомком (в витрине оно обёрнуто ссылкой
   .pgrid__art, здесь ссылки внутри кнопки быть не может) — правило соседства
   для номера дублируем на .pgrid__img. */
.pgrid__img + .pgrid__num {
  position: absolute;
  bottom: 4px;
  left: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Ссылка «открыть работу» — СОСЕД кнопки, не потомок: <a> внутри <button>
   невалиден, и клик по нему уводил бы вместо покраски. */
.pgrid__open {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .pgrid__open {
    opacity: 0;
  }
  .pgrid__slot:hover .pgrid__open,
  .pgrid__open:focus-visible {
    opacity: 1;
  }
}

/* Ячейка, накрытая строкой вне сетки: красить нельзя (запись по номеру обрежет ту строку). */
.pgrid__cell--blocked {
  border-style: dotted;
  cursor: not-allowed;
  opacity: 0.55;
}

/* Доп.страница внутри сетки (обложка/титульная/«6.1») — правится тем же редактором, что и
   обычная клетка (клик открывает модалку в extra-режиме). Штриховая рамка остаётся её
   отличительным знаком: страницу книги она не занимает; заливка статуса — как у обычных. */
.pgrid--own .pgrid__cell--extra {
  border-style: dashed;
}
.pgrid__num--extra {
  font-size: 0.72rem;
  font-weight: 600;
}
/* Сноска про доп.страницы (добавление/перенос — в приложении) — под сеткой, компактно. */
.mtrk-note--extras {
  margin-top: 12px;
}

/* `hidden` против display из базового правила: у .trk-badge стоит display:inline-flex, а у
   .mtrk-modal__error — display:block, и оба (0,1,0) бьют браузерное [hidden]{display:none}.
   Без этих двух строк JS-скрытие бейджей и очистка ошибки в модалке — молчаливый no-op. */
.trk-badge[hidden],
.mtrk-modal__error[hidden] {
  display: none;
}

/* ═══════════ Строки вне сетки ═══════════ */

.mtrk-loose {
  margin-top: 22px;
}
.mtrk-loose__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.mtrk-loose__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mtrk-loose__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 100px;
  border: 2px solid var(--border-light);
  font-size: 0.8rem;
  color: var(--text-2);
}
.mtrk-loose__item--completed {
  border-color: var(--trk-completed);
}
.mtrk-loose__item--inprogress {
  border-color: var(--trk-inprogress);
}
.mtrk-loose__item--ruined {
  border-color: var(--trk-ruined);
}
.mtrk-loose__item--planned {
  border-color: var(--trk-planned);
}
/* Превью в строке «вне сетки»: класс .pgrid__img переиспользован сознательно — на него
   смотрит my-tracker.js, решая, спрашивать ли про отвязку работы. Размер задаём здесь,
   иначе унаследованные width/height:100% растянут его на всю пилюлю. */
.mtrk-loose__thumb {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

.mtrk-loose__flag {
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 600;
}

.mtrk-loose__erase {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
}
@media (hover: hover) {
  .mtrk-loose__erase:hover {
    color: var(--primary);
  }
}

/* ═══════════ Мелочи ═══════════ */

.mtrk-note {
  font-size: 0.76rem;
  color: var(--text-3);
  margin: 6px 0 0;
}
.mtrk-tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 600;
}
.mtrk-link {
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
}
@media (hover: hover) {
  .mtrk-link:hover {
    text-decoration: underline;
  }
}

/* ═══════════ Шапка книги (владельческая) ═══════════
   Своя вёрстка, а не общая .trkd-card: те же классы держит публичная витрина
   (Views/Tracker/BookDetail.cshtml), и правка «на месте» переверстала бы заодно её.

   Раскладка «лента показателей» (выбрана 16.08.2026 из трёх макетов). Суть выбора: правой
   панели прогресса НЕТ вовсе. Показатели встают лентой во всю ширину под названием и сами
   занимают освободившееся место — раньше на широком экране между текстом слева и панелью
   справа зияла дыра в пол-карточки. Полка и даты — тоже ячейки ленты, а не плашки сбоку. */

/* Колонка страницы. Двойной класс (0,2,0) — чтобы наверняка перебить .page-wrap из site.css
   независимо от порядка подключения файлов. Общие 1400px здесь избыточны: контента в шапке
   на треть этой ширины. */
.page-wrap.trkbk {
  max-width: 1080px;
}

.trkh {
  /* position+overflow — под амбиент-слой: он абсолютный и не должен вылезать за скругление. */
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 18px;
  align-items: stretch;
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

/* Амбиент из обложки (медиа-страницы Spotify/Apple Music): размытая обложка тонирует шапку
   цветами книги, поэтому у каждой книги шапка своя. inset отрицательный + scale — чтобы blur
   не оставлял светлой каймы по краям. Гаснет вправо: подкраска должна ИСХОДИТЬ от обложки,
   а не лежать ровным серым полотном во всю карточку — у чёрно-белой обложки такое полотно
   читается грязью. */
.trkh__ambient {
  position: absolute;
  inset: -32px;
  background-position: center;
  background-size: cover;
  filter: blur(36px) saturate(1.4);
  opacity: 0.13;
  transform: scale(1.2);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
}
/* В тёмной теме той же прозрачности не видно — карточка темнее размытой обложки. */
html[data-theme="dark"] .trkh__ambient {
  opacity: 0.22;
}

/* position:relative у контента обязателен: абсолютный слой рисуется ПОВЕРХ непозиционированных
   соседей независимо от порядка в DOM — без этого амбиент лёг бы на текст. */
.trkh__cover-wrap {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  align-self: flex-start;
  border-radius: 12px;
  overflow: hidden;
  /* Двухслойная тень вместо одной: обложка должна «стоять» на амбиенте, а не тонуть в нём. */
  box-shadow: 0 10px 26px rgba(44, 37, 32, 0.22), 0 2px 8px rgba(44, 37, 32, 0.14);
}
.trkh__cover {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--bg-subtle);
}
.trkh__cover--ph {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* min-width:0 обязателен: без него длинное название не переносится, а распирает строку
   и выдавливает карандаш за край карточки. */
.trkh__body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.trkh__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.trkh__titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trkh__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em; /* крупный кегль без поджатия выглядит разреженным */
  color: var(--text);
}
.trkh__byline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trkh__author {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
}
@media (hover: hover) {
  a.trkh__author:hover {
    color: var(--primary);
  }
}

/* ── Лента показателей ──
   auto-fit + 1fr: число ячеек плавает (полка и даты есть не у всех), но лента при любом
   их количестве занимает ВСЮ ширину — ради этого раскладка и выбрана. На узком экране
   ячейки переносятся сами, без отдельной медиа-точки. */
.trkh__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-radius: var(--radius, 12px);
  background: var(--bg-subtle);
  overflow: hidden;
}
.trkh__stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 10px 14px;
  /* Разделители тенью, а не border: при переносе ячеек на новую строку border оставлял бы
     висящую линию слева у первой ячейки каждого ряда, а inset-тень рисуется внутри ячейки
     и вместе с ней уезжает. */
  box-shadow: inset 1px 0 0 var(--border-light);
}
.trkh__stat:first-child {
  box-shadow: none;
}
.trkh__stat-key {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.trkh__stat-val {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  /* Длинное имя полки не должно распирать колонку ленты. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trkh__stat-val--accent {
  color: var(--primary);
}
/* Текстовые значения (полка, дата) — мельче числовых: одним кеглем дата «27.07.2025»
   перевешивает главный показатель и лента теряет иерархию. */
.trkh__stat-val--text {
  font-size: 0.98rem;
}
.trkh__stat-val small {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3);
}
/* Незаполненное поле показываем прочерком, а не прячем ячейку: пустая клетка рядом с
   карандашом читается как «здесь можно дозаполнить», а исчезнувшая — никак. */
.trkh__stat-val--empty {
  color: var(--text-4);
  font-weight: 600;
}

/* Полоса и счётчики статусов — одной строкой: полоса тянется, бейджи прижаты к правому краю. */
.trkh__barline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trkh__barline .trk-progress {
  flex: 1;
  min-width: 0;
}
.trkh__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Все счётчики нулевые (нетронутая книга) — прячем ряд целиком, иначе рядом с полосой
   остаётся пустой отступ. Бейджи скрыты атрибутом hidden, а не удалены, поэтому :empty тут
   не сработал бы. Правило намеренно ИНВЕРСИЯ: браузер без :has() его просто пропустит и
   оставит ряд видимым — деградация в лишний отступ, а не в пропавшие счётчики. */
.trkh__legend:not(:has(> :not([hidden]))) {
  display: none;
}

.trkh__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
@media (hover: hover) {
  .trkh__link:hover {
    text-decoration: underline;
  }
}

@media (min-width: 640px) {
  .trkh {
    gap: 22px;
    padding: 20px 22px;
  }
  .trkh__cover-wrap {
    width: 132px;
  }
  .trkh__title {
    font-size: 1.6rem;
  }
}

/* ── Сетка: отклик на наведение (как у contribution-грида GitHub) ──
   Только владельческая .pgrid--own: в публичной витрине клетки некликабельны, и приподнимать
   их было бы обещанием клика, которого нет. Блокированные не поднимаем по той же причине. */
.pgrid--own .pgrid__cell {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .pgrid--own .pgrid__cell:not(.pgrid__cell--blocked):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(44, 37, 32, 0.14);
  }
}
.pgrid--own .pgrid__cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pgrid--own .pgrid__cell {
    transition: none;
  }
  .pgrid--own .pgrid__cell:hover {
    transform: none;
  }
}


/* ═══════════ Правка книги: карандаш в шапке карточки ═══════════ */

/* Правка книги — иконка-кнопка БЕЗ подписи (как FAB правки профиля .prof-edit-fab):
   круглый чип var(--bg-card), читается и на белой шапке, и поверх амбиент-обложки.
   Смысл несут форма-карандаш и aria-label/title. */
.mtrk-edit {
  align-self: flex-start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
@media (hover: hover) {
  .mtrk-edit:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
  }
}
.mtrk-edit:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.mtrk-btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 100px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s;
}
.mtrk-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.mtrk-btn--ghost {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text-2);
}
/* Красный сайта, а не --trk-ruined (= --text-4, серый плейсхолдер): у того контраст 2.6:1 —
   и как текст кнопки он нечитаем, и как «опасное действие» не читается вовсе.
   --trk-ruined остаётся тем, чем он и был: категорийным цветом рамки ячейки. */
.mtrk-btn--danger {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}
@media (hover: hover) {
  .mtrk-btn:not(:disabled):hover {
    background: var(--primary-hover);
  }
  .mtrk-btn--ghost:not(:disabled):hover {
    background: var(--bg-subtle);
  }
  .mtrk-btn--danger:not(:disabled):hover {
    background: var(--primary-light);
  }
}

/* ═══════════ Добавление книги в трекер (страница книги) ═══════════ */

.bk-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.bk-track__state {
  font-size: 0.8rem;
  color: var(--text-2);
}

.mtrk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mtrk-modal.is-open {
  display: flex;
}
.mtrk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.mtrk-modal__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.mtrk-modal__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.mtrk-modal__book {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 0 0 14px;
}
.mtrk-modal__field {
  display: block;
  margin-bottom: 12px;
}
.mtrk-modal__label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-2);
  margin-bottom: 5px;
}
.mtrk-modal__input,
.mtrk-modal__select {
  width: 100%;
  padding: 8px 34px 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B7E74' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.mtrk-modal__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 14px;
}
.mtrk-modal__error {
  display: block;
  font-size: 0.78rem;
  color: var(--primary);
  margin-bottom: 10px;
}
/* ── Форма правки книги: «подпись слева — контрол справа» ──
   Панель шире редактора страницы: пять строк с контролами в колонку по правому краю
   на 380px схлопываются в кашу. */
#mtrkSettings .mtrk-modal__panel {
  max-width: 460px;
}
.mtrk-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--border-light);
}
.mtrk-form__row:first-child {
  border-top: none;
  padding-top: 0;
}
.mtrk-form__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* иначе длинная подсказка распирает строку и выдавливает контрол за панель */
  font-size: 0.85rem;
  color: var(--text-2);
}
.mtrk-form__hint {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-3);
}
.mtrk-form__control {
  flex: 0 0 auto;
  width: 152px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.mtrk-form__control--num {
  width: 92px;
  text-align: right;
}
.mtrk-form__hint--accent {
  color: var(--primary);
}
.mtrk-form__hint[hidden] {
  display: none;
}

/* Строка «этажом»: ряду обложек нужна вся ширина панели, в колонку справа он не влезает. */
.mtrk-form__row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* ── Выбор издания плитками обложек ──
   Издания одной книги различаются прежде всего обложкой; текстом «Название · 2021 · RU»
   человек угадывает то, что глаз узнаёт сразу. Ряд горизонтально прокручиваемый: изданий
   у ходовых книг бывает с десяток, и переносом они съедали бы всю высоту модалки. */
.mtrk-edpick {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.mtrk-edpick__item {
  appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: 62px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font: inherit;
  text-align: center;
}
.mtrk-edpick__item img {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--bg-subtle);
}
/* Издание без обложки: плитка держит ту же высоту, что и с картинкой, иначе ряд «пляшет». */
.mtrk-edpick__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2/3;
  padding: 4px;
  background: var(--bg-subtle);
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--text-3);
}
.mtrk-edpick__cap {
  padding: 3px 2px;
  font-size: 0.64rem;
  line-height: 1.2;
  color: var(--text-3);
}
/* «Как у книги» — та же плитка, но без картинки: пункт равноправный, а не сноска. */
.mtrk-edpick__item--any .mtrk-edpick__any {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2/3;
  padding: 5px;
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--text-3);
}
.mtrk-edpick__item.is-on {
  border-color: var(--primary);
}
.mtrk-edpick__item.is-on .mtrk-edpick__cap {
  color: var(--primary);
  font-weight: 600;
}
@media (hover: hover) {
  .mtrk-edpick__item:not(.is-on):hover {
    border-color: var(--text-4, var(--text-3));
  }
}
/* На узкой панели подпись и контрол в строку не живут: дата занимает ~150px, и на подпись
   остаётся полслова. Ниже 420px — контрол уезжает под подпись во всю ширину. */
@media (max-width: 419px) {
  .mtrk-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .mtrk-form__control,
  .mtrk-form__control--num {
    width: 100%;
    text-align: left;
  }
}
.mtrk-modal__sep {
  height: 1px;
  background: var(--border-light);
  margin: 16px 0 14px;
}
/* Действия над записью (вишлист / убрать) — столбиком во всю ширину: в строку они
   встают вплотную к «Сохранить», а промах между «убрать» и «сохранить» необратим. */
.mtrk-modal__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.mtrk-modal__stack .mtrk-btn {
  width: 100%;
}
.mtrk-modal__row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mtrk-modal__cancel {
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 100px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ═══════════ Редактор страницы: вёрстка экрана «Добавить страницу» из приложения ═══════════ */

/* Панель редактора чуть шире базовой: четыре карточки статуса на 380px схлопываются. */
.mtrk-modal__panel--page {
  max-width: 420px;
}

/* Подпись-подсказка под label секции (подзаголовок «привяжите работу…»). */
.mtrk-modal__sublabel {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
  margin: -1px 0 8px;
}

/* [hidden] против display базовых правил (grid/flex/block): секции статуса, тумблер разворота,
   строка даты завершения и ошибка гасятся через .hidden в JS. Без !important display:grid/flex
   секции перебил бы браузерный [hidden]. Оба модала — правки книги и страницы. */
#mtrkPageModal [hidden],
#mtrkSettings [hidden] {
  display: none !important;
}

/* ── Контекст книги (обложка + название), волосок снизу ── */
.mtrk-bookctx {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.mtrk-bookctx__cover {
  flex: 0 0 auto;
  width: 26px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-subtle);
}
.mtrk-bookctx__ph {
  flex: 0 0 auto;
  color: var(--text-3);
}
.mtrk-bookctx__title {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Карточка страницы: иконка + слово/крупный номер + «из N», ниже тумблер разворота ── */
.mtrk-pagecard {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mtrk-pagecard__main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mtrk-pagecard__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
}
.mtrk-pagecard__svg--spread {
  display: none;
}
.mtrk-pagecard__icon.is-spread .mtrk-pagecard__svg--single {
  display: none;
}
.mtrk-pagecard__icon.is-spread .mtrk-pagecard__svg--spread {
  display: block;
}
.mtrk-pagecard__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mtrk-pagecard__label {
  font-size: 0.72rem;
  color: var(--text-3);
}
.mtrk-pagecard__num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mtrk-pagecard__total {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-3);
}
.mtrk-pagecard__spread {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.mtrk-pagecard__spread-label {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-2);
}

/* ── Тумблер-переключатель (разворот): нативный чекбокс скрыт, состояние рисует трек+бегунок ── */
.mtrk-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}
.mtrk-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.mtrk-switch__track {
  width: 42px;
  height: 24px;
  border-radius: 100px;
  background: var(--border);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.2s var(--ease);
}
.mtrk-switch__thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease);
}
.mtrk-switch__input:checked + .mtrk-switch__track {
  background: var(--primary);
}
.mtrk-switch__input:checked + .mtrk-switch__track .mtrk-switch__thumb {
  transform: translateX(18px);
}
.mtrk-switch__input:focus-visible + .mtrk-switch__track {
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ── Плановое окно (статус «В планах») ── */
.mtrk-planned__hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-3);
  margin: 0 0 10px;
}

/* ── Компактная сетка дат: подпись сверху, календарь снизу. auto-fit сам подбирает число колонок ──
   Одна дата (у «В процессе») занимает всю ширину; две-три встают в ряд, на узком экране переносятся. */
.mtrk-datesgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.mtrk-datesgrid--2 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mtrk-datecell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mtrk-datecell__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}
/* В сетке дат триггер календаря — во всю ширину ячейки (в форме правки работы он ограничен 220px). */
.mtrk-datecell .df {
  width: 100%;
}
.mtrk-datecell .df__trigger {
  max-width: none;
  padding: 8px 10px;
  font-size: 0.88rem;
}