/* Стили страницы поверх библиотеки. Библиотеку (tokens.css, components.css) не правим:
   здесь только то, чего в ней нет, и только через её токены. */

body{margin:0; background:var(--surface); color:var(--text); font-family:var(--font-ui);
     font-size:var(--text-base); line-height:var(--leading-normal)}

[hidden]{display:none !important}

.shell__title{margin:0}
.shell__main{width:100%; padding-left:var(--space-4); padding-right:var(--space-4)}

.intro{display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
        text-align:center}
.intro p{margin:0}
.intro__lead{font-size:var(--text-lg); font-weight:700; color:var(--text);
             line-height:var(--leading-tight); text-wrap:balance}
.intro__formats{font-size:var(--text-lg); font-weight:600; color:var(--text-muted);
                line-height:var(--leading-tight)}
/* Группы не рвутся внутри: если не помещается, перенос идёт сразу после стрелки. */
.intro__group{white-space:nowrap}
.intro__arrow{padding:0 var(--space-2)}
@media (min-width:641px){
  .intro__lead, .intro__formats{font-size:var(--text-xl)}
}

.rules{margin:0; padding-left:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2)}

/* Выбор цвета подложки: заметный образец и подпись. Сам цвет образца ставит app.js. */
.colorpick{display:flex; align-items:center; gap:var(--space-3)}
.colorpick__swatch{position:relative; flex:none; width:44px; height:44px; cursor:pointer;
                   background:var(--surface-raised); border:2px solid var(--border-strong);
                   border-radius:var(--radius-md); overflow:hidden}
.colorpick__swatch:focus-within{outline:2px solid var(--focus-ring); outline-offset:2px}
.colorpick__swatch input{position:absolute; inset:0; width:100%; height:100%;
                         opacity:0; cursor:pointer; border:0; padding:0}
.colorpick__text{display:flex; flex-direction:column; min-width:0}
.colorpick__name{font-weight:600; color:var(--text)}
.colorpick__hex{font-size:var(--text-sm); color:var(--text-muted)}

/* Окно загрузки: наведение — лёгкая подсветка; «активно» (нажали или несут файл) — зелёное. */
.dropzone:hover{background:var(--accent-soft)}
.dropzone.is-active, .dropzone.is-active:hover{
  border-style:solid; border-color:var(--status-done);
  background:var(--status-done-soft); color:var(--text);
}
.dropzone.is-active .dropzone__title{color:var(--status-done)}
.dropzone-status{min-height:calc(var(--text-sm) * 1.5); text-align:center;
                 font-size:var(--text-sm); font-weight:600; color:var(--status-done)}

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
                 overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

a.btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center}

/* «Скачать» у отдельного файла: голубая обводка и светлый фон (цвет акцента), чтобы сразу было видно,
   на что нажимать. «Скачать всё архивом» — основная кнопка с заливкой, поэтому они различаются. */
.btn-download{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.btn-download:hover{background:var(--accent-soft); color:var(--accent-hover); border-color:var(--accent-hover)}

/* Отклик на скачивание: «Скачивается…» / «Собираю архив…» (кнопка занята), затем «✓ Скачано» /
   «✓ Архив скачан» (спокойный вид без голубой заливки; повторное нажатие скачивает снова). */
.btn.is-busy{opacity:.75; cursor:progress}
.btn[aria-disabled="true"]{cursor:progress}
/* «Сохранено / Скачано»: постоянный светло-серый фон (у обычной кнопки белый), чтобы в списке сразу было видно, что уже сохранено */
.btn.is-saved, .btn-download.is-saved{background:var(--surface-sunken); color:var(--text); border-color:var(--border-strong)}
.btn.is-saved:hover, .btn-download.is-saved:hover{background:var(--border); color:var(--text); border-color:var(--border-strong)}
.dl-hint{display:block; margin-top:var(--space-1); text-align:center; font-size:var(--text-xs); color:var(--text-muted)}
.dl-hint[hidden]{display:none}
.archive-group{display:flex; flex-direction:column; align-items:stretch}
.archive-group[hidden]{display:none}
/* Длинные надписи («Архив скачивается — следуйте подсказкам внизу экрана») переносятся на вторую строку, кнопка не выходит за экран */
.archive-group .btn, .btn-download{white-space:normal; height:auto; min-height:38px; max-width:100%; text-align:center;
                                  padding-top:var(--space-2); padding-bottom:var(--space-2); line-height:var(--leading-tight)}
.badge--saved{background:var(--accent); color:var(--accent-contrast)}

.results td{vertical-align:top}
.results .cell-name{overflow-wrap:anywhere; min-width:0}
.cell-note{font-size:var(--text-sm); color:var(--text-muted)}
.cell-note--warn{color:var(--status-warn)}
.cell-note--error{color:var(--status-error)}
.cell-note div + div{margin-top:var(--space-1)}
.cell-sizes{display:block; white-space:nowrap}  /* «1,6 КБ» не рвём пополам */
.cell-formats{display:block; font-size:var(--text-sm); font-weight:600}
.cell-dims{display:block; font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap}

/* Телефон (класс ставит app.js): внизу полэкрана свободного места, чтобы любую карточку, в том числе последнюю,
   можно было поднять к верху экрана, пока системное окно «Поделиться» закрывает нижнюю половину. */
.is-touch .shell{padding-bottom:50vh}
.results tbody tr{scroll-margin-top:var(--space-3)}

#messages:empty{display:none}
#messages{display:flex; flex-direction:column; gap:var(--space-3)}

/* Телефон (до 600 px): каждая строка таблицы становится карточкой без подписей полей.
   Ячейки с несколькими полями (display: contents) раскладываются по рядам одной сетки.
     ряд 1: имя файла (длинное — с многоточием)        |  состояние
     ряд 2: формат «HEIC → JPEG» (у ждущих и неудачных — размер файла)
     ряд 3: «3,3 МБ → 2,4 МБ»                           |  «3024×4032 px» мелко серым
     ряд 4: примечание или текст ошибки (если есть)
     ряд 5: кнопка «Скачать» (или «Убрать») */
@media (max-width:600px){
  .results thead{display:none}
  .results, .results tbody{display:block; width:100%}
  .results tbody{display:flex; flex-direction:column; gap:var(--space-3)}
  .results tbody tr, .results tbody tr:nth-child(even){
    display:grid; grid-template-columns:minmax(0, 1fr) auto;
    column-gap:var(--space-3); row-gap:0; align-items:center;  /* отступы между рядами — у самих элементов: пустые ряды сетки не оставляют зазоров */
    padding:var(--space-4); background:var(--surface-raised);
    border:1px solid var(--border); border-radius:var(--radius-md);
  }
  .results td{display:block; padding:0; border:0; width:auto}
  .results td.cell-name, .results td.cell-size{display:contents}

  .results .cell-filename{grid-column:1; grid-row:1; min-width:0; font-weight:600;
                          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .results td.cell-state{grid-column:2; grid-row:1; justify-self:end}

  .results td.cell-note, .results .cell-formats, .results .cell-sizes, .results .cell-dims, .results td.cell-action{margin-top:var(--space-2)}
  .results .cell-filename, .results td.cell-state{margin-top:0}

  .results .cell-name .cell-dims{grid-column:1 / -1; grid-row:2}
  .results tr[data-state="done"] .cell-name .cell-dims{display:none}
  .results .cell-formats{grid-column:1 / -1; grid-row:2}

  .results .cell-sizes{grid-column:1; grid-row:3}
  .results .cell-size .cell-dims{grid-column:2; grid-row:3; justify-self:end}
  .results .dims-before{display:none}

  .results td.cell-note{grid-column:1 / -1; grid-row:4}
  .results td.cell-note:empty{display:none}

  .results td.cell-action{grid-column:1 / -1; grid-row:5; display:flex; flex-direction:column}
  .results td.cell-action:empty{display:none}
  .results .cell-action .btn{width:100%; height:44px; font-size:var(--text-base)}
  .results .cell-action .btn-remove{width:auto; align-self:flex-end}
  /* Ждущий файл: размер файла слева, «Убрать» справа в том же ряду (без отдельной пустой полосы). */
  .results tr[data-state="waiting"] .cell-name .cell-dims{grid-column:1}
  .results tr[data-state="waiting"] td.cell-action{grid-column:2; grid-row:2; margin-top:0}

  #results-panel .actions{flex-direction:column; align-items:stretch}
  #results-panel .actions .btn{width:100%; min-height:44px}
}
}