/* Интерактивный таймлайн свадьбы — POC */

* { box-sizing: border-box; }

/* Отключает pull-to-refresh и «резинку» по вертикали (iOS Safari 16+) */
html, body { overscroll-behavior-y: none; }

/* Масштаб шкалы сам держит якорь через scrollBy/scrollTop; браузерный
   scroll anchoring добавлял бы свою коррекцию поверх — скролл дёргался
   «туда-сюда». Отключаем, чтобы позицией управлял только наш код. */
html, .board-scroll { overflow-anchor: none; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #3a3a3a;
  background: #faf7f2;
  margin: 0;
}

/* ---- Шапка ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid #e5ddd2;
  background: #fdfbf7;
}

.topbar h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  margin: 0;
  color: #6d1a2e;
}

.topbar .meta { color: #6b6258; font-size: 14px; }

.topbar .spacer { flex: 1; }

.title-wrap {
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}

.menu-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Кнопка-бургер: видна только в мобильном (touch) режиме */
.burger-btn {
  display: none;
  background: #fff;
  color: #5c0f1e;
  border: 1px solid #d8cfc2;
  border-radius: 8px;
  width: 42px;
  padding: 9px 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.burger-btn:hover { background: #f5efe6; }

#add-btn {
  background: #5c0f1e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
}
#add-btn:hover { background: #7a1a2e; }

/* ---- Меню колонок ---- */

.cols-menu { position: relative; }

#cols-btn, #day-btn, #print-btn {
  background: #fff;
  color: #5c0f1e;
  border: 1px solid #d8cfc2;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
}
#cols-btn:hover, #day-btn:hover, #print-btn:hover { background: #f5efe6; }

.col-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 15;
  width: 240px;
  background: #fdfbf7;
  border: 1px solid #d8cfc2;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.hidden { display: none; }

.col-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
}
.col-row .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
}
.col-row .col-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-row .col-del {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.6;
}
.col-row .col-del:hover { opacity: 1; background: #f3e3e3; }

.col-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #eee6da;
}
.col-add input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #d8cfc2;
  border-radius: 6px;
}
.col-add button {
  border: 1px solid #5c0f1e;
  background: #5c0f1e;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

/* ---- Пресеты видимости колонок ---- */

.preset-block {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #eee6da;
}
.panel-caption {
  font-size: 12px;
  color: #8a8378;
  margin-bottom: 6px;
}
.preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8cfc2;
  background: #fff;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.preset-chip:hover { background: #f5efe6; }
.preset-del { opacity: 0.5; font-size: 11px; }
.preset-del:hover { opacity: 1; }

/* ---- Легенда ---- */

.legend {
  display: flex;
  gap: 18px;
  padding: 10px 20px;
  font-size: 13px;
  color: #5c554c;
}
.legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
/* На таче легенда — навигатор по колонкам: чип кликабелен, а те колонки,
   что сейчас на экране, подсвечены (при 2 на экране — пара). app.js вешает
   .active и обрабатывает тап. На десктопе легенда остаётся простой подписью. */
body.touch .legend span {
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.touch .legend span.active {
  background: #f1e9db;
  border-color: #d8cfc2;
  color: #2c2620;
  font-weight: 600;
}

/* ---- Доска ---- */

.board-scroll {
  margin: 0 20px 40px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.board-scroll::-webkit-scrollbar { height: 6px; }
.board-scroll::-webkit-scrollbar-track { background: transparent; }
.board-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

.board {
  display: grid;
  grid-template-columns: 64px 1fr; /* реальное значение выставляет app.js по числу колонок */
  border: 1px solid #e5ddd2;
  border-radius: 8px;
  background: #fdfbf7;
  /* clip, а не hidden: hidden сделал бы доску скролл-контейнером и сломал sticky-шкалу времени */
  overflow: clip;
}

.col-head {
  position: relative;
  padding: 12px 26px 12px 8px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid #e5ddd2;
  border-left: 1px solid #eee6da;
}
.col-head.time { border-left: none; padding-right: 8px; }

/* Крестик скрытия колонки */
.col-hide {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: inherit;
  opacity: 0.45;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
}
.col-hide:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* Ряд закрепленных заметок колонок (вводные без времени) */
.notes-cell {
  border-bottom: 1px solid #e5ddd2;
  border-left: 1px solid #eee6da;
  padding: 6px 8px;
}
.notes-cell.time { border-left: none; background: #fdfbf7; }
.notes-text {
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  cursor: text;
}
.notes-text.empty { opacity: 0.45; font-style: italic; }
.notes-edit {
  width: 100%;
  font: inherit;
  font-size: 12px;
  border: 1px solid #d8cfc2;
  border-radius: 6px;
  padding: 4px 6px;
  resize: vertical;
  background: #fff;
}

/* Колонка времени; на десктопе протягивание по ней вниз/вверх меняет масштаб */
.time-col {
  position: relative;
  border-right: 1px solid #eee6da;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
}
.time-label {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #8a8378;
}

/* Рабочая область с карточками: одна на все видимые колонки */
.lanes {
  position: relative;
  grid-column: 2 / -1;
}
.col-sep {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: #eee6da;
  pointer-events: none;
}
.grid-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: #f1ebe1;
  pointer-events: none;
}
.grid-line.hour { background: #e3dccf; }

/* ---- Карточки ---- */

.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid;
  padding: 4px 8px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  line-height: 1.3;
}
.card .interval { font-weight: 600; font-size: 12px; }
.card .title { font-size: 13px; }
.card .place { font-size: 12px; opacity: 0.75; }
/* Детали и примечания: занимают остаток высоты карточки, лишнее скроллится */
.card .card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.card .card-body::-webkit-scrollbar { width: 5px; }
.card .card-body::-webkit-scrollbar-track { background: transparent; }
.card .card-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.card .desc { font-size: 12px; white-space: pre-wrap; margin-top: 2px; }
.card .notes {
  font-size: 11px;
  font-style: italic;
  opacity: 0.75;
  white-space: pre-wrap;
  margin-top: 2px;
}
/* Флаг важности: маркер в тексте, цвета карточки и статусов не трогает */
.card .flag { font-weight: 700; }
/* Прогресс чек-листа — в строке времени справа */
.card .interval {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
}
.card .check-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
}

/* Цвета обычных карточек задает app.js из палитры колонки (инлайн-стили) */

.card.ceremony .interval { justify-content: center; }
.card.ceremony {
  display: block;
  /* .card задаёт overflow: hidden; здесь это ломает sticky-центрирование
     ниже — hidden (в отличие от clip) создает скролл-контейнер, и браузер
     привязывает sticky к самой карточке (она не скроллится) вместо реальной
     прокручиваемой .board-scroll */
  overflow: visible;
  background: #f7e6e6;
  border-color: #d59a9a;
  color: #6d1a2e;
  text-align: center;
}
/* Церемония (и любая будущая колонка на всю ширину, см. card.fixedCol в app.js)
   растянута на всю доску, поэтому обычный text-align центрирует текст
   относительно всей доски, а не видимой при горизонтальном скролле части —
   при скролле текст «уезжает» за край. Решение: пустой sticky-«якорь» ловит
   текущий центр видимой области доски, а реальный контент абсолютно
   спозиционирован и сдвинут на -50% от якоря — визуально текст остаётся
   по центру экрана независимо от числа колонок и позиции скролла. */
.card.ceremony .ceremony-inner {
  position: sticky;
  left: 50%;
  width: 0;
  height: 100%;
}
.card.ceremony .ceremony-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(92vw, 480px);
  padding: 0 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}

/* Статусы относительно текущего времени */
.card.past { opacity: 0.45; }
.card.current { border-color: transparent; box-shadow: 0 0 0 2px #e03131; }
.card.done { border-color: transparent; box-shadow: 0 0 0 2px #2f9e44; opacity: 1; }

/* Ховер: контур и кружки-манипуляторы */
.card:hover { box-shadow: 0 0 0 2px currentColor; }
.card.current:hover { box-shadow: 0 0 0 2px #e03131, 0 0 0 4px rgba(224, 49, 49, 0.25); }
.card.done:hover { box-shadow: 0 0 0 2px #2f9e44, 0 0 0 4px rgba(47, 158, 68, 0.25); }

.handle {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  display: none;
  z-index: 3;
}
/* Невидимая квадратная зона нажатия шире видимого кружка (на таче — еще
   шире); отсчет от padding box: рамка 2px съедает по 2px с каждой стороны */
.handle::before {
  content: '';
  position: absolute;
  inset: -10px;
}
.card:hover .handle { display: block; }
.handle.resize { bottom: 3px; left: 3px; cursor: ns-resize; }

.card.dragging { opacity: 0.35; cursor: grabbing; }

/* Тень при перетаскивании */
.ghost {
  position: absolute;
  border: 2px dashed #8a8378;
  border-radius: 8px;
  background: rgba(138, 131, 120, 0.12);
  pointer-events: none;
  z-index: 4;
}

/* ---- Линия текущего времени ---- */

.now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #e03131;
  z-index: 5;
  pointer-events: none;
}
.now-line .now-badge {
  position: absolute;
  left: -58px;
  top: -9px;
  background: #e03131;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---- Тултип ---- */

.tooltip {
  position: fixed;
  z-index: 20;
  max-width: 260px;
  background: #33291f;
  color: #f5f0e8;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.tooltip.hidden { display: none; }
.tooltip .t-title { font-weight: 600; font-size: 13px; }
.tooltip .t-muted { opacity: 0.7; }
.tooltip .t-desc { margin-top: 4px; }

/* ---- Модальное окно ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 25, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: #fdfbf7;
  border-radius: 10px;
  padding: 20px;
  width: 320px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.modal h2 {
  margin: 0 0 14px;
  font-size: 17px;
  color: #6d1a2e;
}
.modal label {
  display: block;
  font-size: 13px;
  color: #6b6258;
  margin: 10px 0 4px;
}
.modal input[type="text"], .modal input[type="tel"], .modal select, .modal textarea {
  width: 100%;
  padding: 7px 9px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #d8cfc2;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.modal .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
}
.modal .actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.modal .actions .spacer { flex: 1; }
.modal button {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #d8cfc2;
  background: #fff;
  cursor: pointer;
}
.modal button.primary { background: #5c0f1e; border-color: #5c0f1e; color: #fff; }
.modal button.danger { color: #b00000; border-color: #d9a0a0; }
.modal .hidden { display: none; }

/* ---- Модалка: режим просмотра ---- */

.v-meta {
  font-size: 13px;
  color: #6b6258;
  margin-bottom: 8px;
  cursor: pointer;
}
.v-label {
  font-size: 12px;
  color: #8a8378;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}
.v-text {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  cursor: pointer;
}
.v-notes { color: #6b6258; }
.v-checklist { margin-top: 2px; }
.v-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  cursor: pointer;
}
.v-check-row input { margin-top: 2px; }
.v-check-row.done span { opacity: 0.55; text-decoration: line-through; }

/* ---- Редактор чек-листа и контакты ---- */

.e-check-row, .check-add {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.e-check-row input, .check-add input { flex: 1; min-width: 0; }
.e-check-del, #add-check-btn {
  flex: none;
  border: 1px solid #d8cfc2;
  background: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}
.e-check-del { color: #b00000; }

.contact-row {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  align-items: center;
}
.contact-row input { flex: 1; min-width: 0; }
.contact-row input[type="tel"] { flex: 1.2; }
.contact-call { text-decoration: none; font-size: 15px; }

/* Контакты в режиме просмотра «Инфо дня» — только чтение */
.v-contact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid #f0e9dd;
}
.v-contact:last-child { border-bottom: none; }
.v-contact-who { color: #3a3a3a; }
.v-contact .contact-call {
  white-space: nowrap;
  font-size: 14px;
  color: #6d1a2e;
}

.ghost-btn {
  margin-top: 6px;
  border: 1px dashed #d8cfc2;
  background: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: #6b6258;
  cursor: pointer;
  width: 100%;
}
.ghost-btn:hover { background: #f5efe6; }

.day-bounds { margin-top: 4px; }
.bounds-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.bounds-row select { width: auto; }

/* ---- Печать: на экране скрыта, на бумаге — только она ---- */

#print-root { display: none; }

@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; padding: 0 4px; }

  #print-root h1 { font-size: 20px; margin: 0 0 2px; }
  #print-root h2 { font-size: 15px; margin: 14px 0 6px; }
  #print-root .p-meta { color: #555; margin-bottom: 8px; }
  #print-root .p-pre { white-space: pre-wrap; }
  #print-root .p-col-note-head { font-weight: 600; margin-top: 6px; }

  .p-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
  }
  .p-table th, .p-table td {
    border: 1px solid #999;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
  }
  .p-table th { background: #eee; }
  .p-timing .p-time { white-space: nowrap; font-weight: 600; }
  .p-timing tr { break-inside: avoid; }
}

/* ================================================================
   Мобильный режим (тач-устройства): app.js вешает класс .touch
   на body, когда matchMedia('(pointer: coarse)') истинно
   ================================================================ */

/* Настройка «колонок на экране» видна только на таче */
.per-screen { display: none; }
body.touch .per-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #eee6da;
  font-size: 13px;
  color: #6b6258;
}
.per-screen .seg { display: flex; }
.per-screen .seg button {
  border: 1px solid #d8cfc2;
  background: #fff;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.per-screen .seg button:first-child { border-radius: 6px 0 0 6px; }
.per-screen .seg button:last-child { border-radius: 0 6px 6px 0; }
.per-screen .seg button + button { border-left: none; }
.per-screen .seg button.on {
  background: #5c0f1e;
  border-color: #5c0f1e;
  color: #fff;
}

/* Шапка страницы компактнее: заголовок в одну строку, второстепенные кнопки
   («Инфо дня», «Печать», «Колонки») спрятаны в бургер-меню, на виду остаются
   только заголовок, бургер и «+ Добавить событие». */
body.touch .topbar {
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 12px;
}
body.touch .topbar .spacer { display: none; }
body.touch .title-wrap {
  flex: 1;
  gap: 6px;
}
body.touch .topbar h1 {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 2.5em;
}
/* meta уступает место заголовку: сжимается и обрезается первой */
body.touch .topbar .meta {
  font-size: 11px;
  opacity: 0.7;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
}
body.touch .topbar .meta::before { content: "·"; margin-right: 6px; opacity: 0.6; }
body.touch #add-btn, body.touch #cols-btn { padding: 8px 12px; }
body.touch .burger-btn { display: block; flex: none; }

/* Бургер-меню как выпадающая панель (top выставляет app.js по кнопке) */
body.touch .menu-group { display: none; }
body.touch .menu-group.open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  left: 12px;
  right: 12px;
  z-index: 20;
  background: #fdfbf7;
  border: 1px solid #d8cfc2;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
body.touch .menu-group.open > button,
body.touch .menu-group.open > .menu-link,
body.touch .menu-group.open .cols-menu,
body.touch .menu-group.open .cols-menu > button {
  width: 100%;
  text-align: left;
}

body.touch .legend { flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px; }

/* Панель колонок: фиксированная на всю ширину, top выставляет app.js по кнопке
   (absolute с right: 0 уезжала за левый край экрана при переносе шапки) */
body.touch .col-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  width: auto;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
body.touch .col-panel::-webkit-scrollbar { width: 5px; }
body.touch .col-panel::-webkit-scrollbar-track { background: transparent; }
body.touch .col-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

/* Доска — отдельная область прокрутки, чтобы прилипала шапка таблицы.
   Страница делится на колонку: шапка сайта, легенда, растянутая доска. */
body.touch {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* Доска: горизонтальный «галерейный» пейджинг колонок ведёт JS (app.js),
   шкала времени прилипает. CSS scroll-snap здесь НЕ используем: на 2-осевом
   инерционном скроллере iOS mandatory-snap срабатывает нестабильно. Вместо
   него app.js доводит scrollLeft до ближайшей колонки после остановки свайпа.
   flex:1 + min-height:0 делают контейнер вертикальным скролл-контейнером */
body.touch .board-scroll {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.touch .board {
  /* Доска растет по содержимому, иначе колонки за краем экрана обрежет overflow: clip */
  width: max-content;
  min-width: 100%;
  border-left: none;
  border-right: none;
  border-radius: 0;
  /* Долгое нажатие не должно выделять текст и звать лупу iOS */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Шапка таблицы прилипает к верху области прокрутки */
body.touch .col-head {
  position: sticky;
  top: 0;
  z-index: 6;
}
body.touch .col-head.time,
body.touch .notes-cell.time,
body.touch .time-col {
  position: sticky;
  left: 0;
  z-index: 6;
  background: #fdfbf7;
}
body.touch .notes-cell.time { z-index: 7; }
/* Угловая ячейка «Время» закреплена по обеим осям и поверх остальных */
body.touch .col-head.time { top: 0; z-index: 8; }
body.touch .now-line .now-badge { left: 4px; top: -20px; }

/* Палец по обычной карточке скроллит страницу; таскается только активная */
body.touch .card { touch-action: manipulation; }
body.touch .card .handle { display: none; }
body.touch .card.active {
  touch-action: none;
  box-shadow: 0 0 0 2px currentColor, 0 6px 16px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
body.touch .card.active .handle { display: block; width: 18px; height: 18px; }
body.touch .card.active .handle::before { inset: -18px; }

/* Модалка на весь экран */
.modal-close { display: none; }
body.touch .modal-backdrop { align-items: stretch; justify-content: stretch; }
body.touch .modal {
  position: relative;
  width: 100%;
  max-width: none;
  border-radius: 0;
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
body.touch .modal-close {
  display: block;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  border: none;
  background: none;
  font-size: 20px;
  color: #6b6258;
  padding: 6px;
  cursor: pointer;
}
/* Поля >= 16px, иначе iOS Safari зумит страницу при фокусе */
body.touch .modal input[type="text"],
body.touch .modal input[type="tel"],
body.touch .modal select,
body.touch .modal textarea {
  font-size: 16px;
  padding: 10px 12px;
}
body.touch .modal button { padding: 12px 16px; font-size: 16px; }
body.touch .modal .check-row { font-size: 16px; }
body.touch .modal .check-row input { width: 20px; height: 20px; }

/* ---- Сохранение: кнопка, тост, баннер недоступного хранилища ---- */

.save-btn {
  background: #5c0f1e;
  color: #fff;
  border: 1px solid #5c0f1e;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.save-btn:disabled { opacity: .5; cursor: default; }
/* Точка = есть несохранённые изменения */
.save-btn.dirty::after { content: ' •'; }

.menu-link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #d8c3c8;
  border-radius: 6px;
  background: #fff;
  color: #5c0f1e;
  text-decoration: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #2b2b2b;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}

.banner {
  background: #fdf3d7;
  border-bottom: 1px solid #ecd28f;
  color: #77601f;
  padding: 8px 12px;
  font-size: 13px;
}

@media print {
  .save-btn, .toast, .banner, .menu-link { display: none !important; }
}

/* ---- Страница проектов ---- */

.projects-page { background: #faf6f7; }

.proj-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 12px 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proj-card {
  position: relative;
  background: #fff;
  border: 1px solid #e3d3d7;
  border-radius: 10px;
  padding: 14px 48px 14px 16px;
  cursor: pointer;
}
.proj-card:hover { border-color: #c9a9b1; }

.proj-name { font-weight: 600; color: #5c0f1e; margin-bottom: 2px; }
.proj-meta { font-size: 13px; color: #7a6b6e; }
.proj-stats { font-size: 12px; color: #9a8b8e; margin-top: 6px; }

.proj-more {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  color: #7a6b6e;
}

.proj-menu {
  position: absolute;
  top: 38px;
  right: 10px;
  background: #fff;
  border: 1px solid #e3d3d7;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 20;
  min-width: 150px;
  overflow: hidden;
}
.proj-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
}
.proj-menu button:hover { background: #faf1f3; }
.proj-menu button.danger { color: #a3283c; }

.proj-empty {
  max-width: 720px;
  margin: 64px auto;
  text-align: center;
  color: #7a6b6e;
}
.proj-empty p { margin-bottom: 16px; }

@media (max-width: 560px) {
  .projects-page .topbar { flex-wrap: wrap; gap: 6px; }
}

/* ---- Синхронизация ---- */

.sync-dot {
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.sync-dot:hover { background: rgba(0, 0, 0, 0.06); }
.sync-ok { color: #3f8a7f; }
.sync-busy { color: #7a7a7a; }
.sync-pending { color: #c98a2e; }
.sync-error { color: #b23a48; }

.sync-banner { display: flex; align-items: center; gap: 12px; }
.banner-action {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
  font: inherit;
}

.sync-modal { max-width: 420px; }
.sync-modal input { width: 100%; font-size: 16px; padding: 8px; margin: 8px 0; }
.sync-modal .hint { color: #6b6b6b; font-size: 13px; }
.modal-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sync-ghost-btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}