/* Раздел «Данные». Владелец: таск 37. Разметку рисует ui/data.js.

   Своих цветов здесь нет: всё из styles.css. Красного нет тем более — --risk занят
   высоким риском сорвать приём пищи, а на этом экране тревожат не цветом, а словами:
   «будет стёрто без возможности отменить» и точный перечень под ним.

   Раскладка макета `08-desktop-dannye`: слева экспорт, импорт и «где лежат данные»,
   справа версии на сервере, снизу полоса синхронизации и выхода. Граница, на которой
   два столбца становятся одним, — та же 900 px, что у оболочки (ЯКОРЬ 900): раньше
   неё правый столбец сжимается до нечитаемого, позже — левый растягивается. */

.data {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* --------------------------------- шапка ---------------------------------- */

.data-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.data-head-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.data-head-titles p { margin: 0; }

/* Адрес сервера и способ входа: короткая правда о том, куда именно ходит приложение. */
.data-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.data-badge-icon {
  display: inline-flex;
  color: var(--ink-3);
}

.data-empty { align-self: flex-start; }

/* -------------------------------- раскладка -------------------------------- */

.data-grid,
.data-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-lg);
}

.data-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  min-width: 0;
}

.data-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* Надзаголовок блока и подпись справа от него — «ЭКСПОРТ · файл остаётся у вас
   на диске». Линия под ними заменяет карточную рамку: карточки внутри уже есть. */
.data-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.data-block-head p { margin: 0; }

.data-block-note {
  color: var(--ink-2);
  text-align: right;
}

/* --------------------------------- экспорт --------------------------------- */

.data-full-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-full-icon {
  display: inline-flex;
  color: var(--ink-2);
}

.data-full-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.data-full-body p { margin: 0; }

/* Строка с флажком — сама мишень: флажок остаётся 18 px, до 44 px строку поднимает
   экран (правило из styles.css, ЯКОРЬ 600). */
.data-personal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  cursor: pointer;
}

.data-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}

.data-tile p { margin: 0; }

.data-tile-title { color: var(--ink); }

.data-tile-meta { color: var(--ink-2); }

.data-tile-about {
  font-size: 13px;
  flex: 1;
}

.data-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Строка состояния занимает место всегда: иначе «Файл скачан» подпрыгивало бы вместе
   со всем блоком ровно в тот момент, когда человек смотрит на кнопку. */
.data-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--ink-2);
}

.data-status.is-warn {
  color: var(--ink);
  font-weight: 600;
}

.data-fallback-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.data-fallback {
  font: 12px/1.5 var(--font-mono);
  min-height: 160px;
}

/* --------------------------------- импорт ---------------------------------- */

.data-drop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

.data-drop p { margin: 0; }

/* Файл над зоной: подсветка честно говорит, что отпускать можно здесь. */
.data-drop.is-over {
  border-color: var(--sage);
  border-style: solid;
  background: var(--sage-soft);
}

.data-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--r-md);
}

.data-drop-about { max-width: 52ch; }

.data-paste {
  min-height: 90px;
  font: 12px/1.5 var(--font-mono);
}

.data-errors {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.data-errors p { margin: 0; }

.data-errors-list {
  margin: 0;
  padding-left: 18px;
}

/* ------------------------------ окно и таблица ------------------------------ */

.data-modal {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap-lg);
}

.data-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}

.data-modal-head p { margin: 0; }

.data-modal-close {
  flex: none;
  min-height: 36px;
  padding: 6px 10px;
}

.data-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.data-modal-summary { margin: 0; }

.data-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding-top: var(--gap);
  border-top: 1px solid var(--border);
}

.data-modal-foot p { margin: 0; }

/* Подтверждение расхождения — тот же подвал, но кнопки в нём одни. */
.data-actions.data-modal-foot { justify-content: flex-end; }

/* Широкая таблица прокручивается сама и не растягивает окно (правило .mount). */
.data-diff-wrap { overflow-x: auto; }

.data-diff {
  width: 100%;
  border-collapse: collapse;
}

.data-diff th,
.data-diff td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.data-diff thead th { padding-bottom: 4px; }

.data-diff tbody th {
  font-weight: 400;
  color: var(--ink);
}

.data-diff-theirs { color: var(--ink); }

/* Свой столбец приглушён: сравнивают с ним, а читают всё-таки левый. */
.data-diff-mine { color: var(--ink-2); }

.data-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.data-modes legend {
  padding: 0;
  margin-bottom: 4px;
}

.data-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}

.data-mode.is-active {
  border-color: var(--sage);
  background: var(--sage-soft);
}

.data-mode-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.data-mode-texts .hint { font-size: 13px; }

.data-loss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.data-loss-icon {
  flex: none;
  margin-top: 1px;
  color: var(--ink-2);
}

/* -------------------------------- версии ---------------------------------- */

.data-versions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.data-version {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.data-version.is-current { border-color: var(--sage); }

.data-version-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.data-version-device { color: var(--ink-2); }

/* Метка, а не кнопка: чип здесь ничего не переключает. */
.data-version-chip { cursor: default; }

.data-version-summary {
  margin: 0;
  font-size: 13px;
}

/* ----------------------------- где лежат данные ---------------------------- */

.data-where-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.data-where-row:last-child { border-bottom: 0; }

.data-where-icon {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  color: var(--ink-2);
}

.data-where-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.data-where-body p { margin: 0; }

.data-where-title { color: var(--ink); }

/* ------------------------------ полоса внизу ------------------------------- */

.data-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: var(--gap) var(--gap-lg);
}

.data-strip-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.data-strip-icon {
  display: inline-flex;
  flex: none;
  color: var(--ink-2);
}

.data-strip-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.data-strip-texts p { margin: 0; }

.data-strip-actions { justify-content: flex-end; }

/* ---------------------------- две версии данных ---------------------------- */

.data-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.data-column-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-column-head p { margin: 0; }

.data-column-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  margin: 0;
}

.data-column-rows dt { color: var(--ink-2); }

.data-column-rows dd {
  margin: 0;
  text-align: right;
}

/* Перечень пропадающего у своего столбца: он повторится в подтверждении слово в слово,
   но увидеть его надо до того, как палец окажется на кнопке (макет `15-…-s-drugogo`). */
.data-column-loss {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.data-column-loss-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.data-ask {
  width: min(560px, 100%);
  align-items: flex-start;
}

.data-ask p { margin: 0; }

.data-ask-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-md);
}

.data-ask-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
  list-style: none;
}

.data-ask-list li { color: var(--ink); }

.data-ask-list li::before {
  content: '— ';
  color: var(--ink-3);
}

.data-ask .data-modal-foot {
  width: 100%;
  border-top: 0;
}

/* ------------------------------ подтверждения ------------------------------ */

/* Обёртка своего места не занимает: и кнопка, и раскрытая панель встают в ту же
   строку или колонку, где стоял триггер. */
.data-confirmable { display: contents; }

.data-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.data-confirm-text {
  margin: 0;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   ЯКОРЬ 900 — два столбца макета.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .data-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .data-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   ЯКОРЬ 600 — телефон (История 164): экспорт, импорт и версии становятся полосами.
   Мишени от 44 px приходят из styles.css сами; 16 px в полях — почти сами, кроме
   двух моноширинных, см. ниже.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .data-head { flex-direction: column; }

  /* Оба поля задают шрифт целиком (`font:` с моноширинным) и одним классом бьют
     общее `textarea { font-size: 16px }` из styles.css — там селектор на элементе,
     здесь на классе, и медиа-запрос в этом споре не участвует. Возвращаем 16 px
     руками: мельче — и iOS зумит страницу на фокусе (R71i). */
  .data-paste,
  .data-fallback { font-size: 16px; }

  .data-block-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .data-block-note { text-align: left; }

  .data-tiles { grid-template-columns: minmax(0, 1fr); }

  .data-diff th,
  .data-diff td {
    padding: 8px 6px;
    font-size: 13px;
  }

  .data-strip,
  .data-strip-body { align-items: flex-start; }

  .data-strip { flex-direction: column; }

  .data-strip-actions,
  .data-modal-foot .data-actions,
  .data-actions.data-modal-foot {
    width: 100%;
    justify-content: stretch;
  }

  .data-strip-actions .button,
  .data-modal-foot .button {
    flex: 1;
  }

  .data-modal { padding: var(--gap); }
}