/*
  Стили экрана «Волшебный режим». Вынесены из <style> самой страницы 27.08.2026
  веб-дизайнером (блок A утверждённого плана): 303 строк своего стиля внутри
  разметки — это своя дизайн-система на одной странице
  (config/web-design.json, «строк_своего_стиля»), из-за неё экраны и перестают
  быть похожими друг на друга. Ни одного нового цвета и шрифта: только токены
  design-tokens.css. Вид и поведение не менялись — переехало то, из чего
  страница собрана.
*/
  /* Единственная страница СПРУТа, где картинка важнее цифры: доска желаний, а
     не таблица (plans/2026-08-21-волшебный-режим.md). Палитра, шрифты, радиусы
     и тени — только из токенов, ни одного нового цвета (design-system.md §6). */

  .magic-intro {
    color: var(--color-muted);
    font-size: var(--text-base);
    line-height: var(--leading-md);
    max-width: 640px;
    margin: 0 0 var(--space-6);
  }

  /* Ближайшее по срокам — короткий список, а не сетка: это навигатор, а не витрина. */
  .deadline-list { display: flex; flex-direction: column; }
  .deadline-row {
    display: flex; gap: var(--space-4); align-items: center;
    padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border);
  }
  .deadline-row:last-child { border-bottom: none; }
  .deadline-row .when {
    flex: none; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  }
  .deadline-row .when-date {
    color: var(--color-accent); font-size: var(--text-md); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .deadline-row .when-note { color: var(--color-muted); font-size: var(--text-xs); }
  .deadline-row .what { color: var(--color-text); font-size: var(--text-md); }
  /* Столбец сумм: правые края совпадают, цифры стоят друг под другом. */
  .deadline-row .price { margin-left: auto; text-align: right; }
  .deadline-row .price .money { align-items: flex-end; }

  @media (max-width: 900px) {
    .deadline-row { flex-wrap: wrap; }
    .deadline-row .when { min-width: 0; }
  }

  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); margin: 0 0 var(--space-4);
  }
  .section-head h2 {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--text-xl); line-height: var(--leading-xl);
    margin: 0; color: var(--color-text);
  }
  .section-head .hint { color: var(--color-muted); font-size: var(--text-sm); }

  .pill {
    display: inline-block; padding: 2px var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--text-xs);
    font-weight: 500; letter-spacing: .02em;
  }
  .pill-focus { background: rgba(47, 111, 237, .12); color: var(--color-accent); }
  .pill-done { background: rgba(26, 157, 108, .12); color: var(--color-success); }

  /* ---------- Фокус-желание ---------- */
  .focus-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); }
  .focus-card > * { min-width: 0; }
  /* Фото — во всю ширину, высота по его собственной пропорции.
     Её правка 21.08.2026, два круга. Сначала фото резалось по центру («у
     снимка срезало половину телефона»), потом вписывалось с полями по бокам —
     «так стрёмно, сразу как 88-й год». Ни то, ни другое: снимок занимает всю
     ширину блока, а высоту берёт свою. Ничего не обрезано и никаких рамок —
     карточки в кладке и так разной высоты, им это ничего не стоит. */
  .focus-photo {
    width: 100%; height: auto; max-height: 560px; object-fit: contain;
    border-radius: var(--radius-lg); display: block; background: var(--color-surface);
  }
  .focus-photo-stack { display: flex; flex-direction: column; gap: var(--space-3); }
  .focus-thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .focus-thumbs img {
    width: 84px; height: 64px; object-fit: contain; background: var(--color-bg);
    border-radius: var(--radius-sm); cursor: pointer;
    border: var(--border-width) solid var(--color-border);
  }
  .focus-title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    margin: var(--space-3) 0 var(--space-2); color: var(--color-text);
  }
  /* ---------- Сетка желаний ---------- */
  /* Кладка, а не сетка (21.08.2026). У желаний разная длина текста: в обычной
     grid-сетке карточка тянулась до высоты самой длинной в ряду, и под коротким
     желанием висела пустая половина экрана — «разъехались». В колонках каждая
     карточка ровно своей высоты, следующая встаёт сразу под ней. */
  .wish-grid { columns: 300px 4; column-gap: var(--card-gutter); }
  .wish-grid > .card { break-inside: avoid; margin: 0 0 var(--card-gutter); }
  .wish-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .wish-card .wish-photo {
    width: 100%; height: auto; display: block; background: var(--color-surface);
  }
  .wish-card .wish-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
  .wish-card h3 {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--text-lg); line-height: var(--leading-lg);
    margin: 0; color: var(--color-text);
  }
  .wish-photo-wrap { position: relative; }
  .cat-credit {
    position: absolute; right: 0; bottom: 0;
    background: rgba(51, 58, 66, .55); color: #fff;
    font-size: var(--text-xs); line-height: var(--leading-xs); padding: 1px 6px;
    border-top-left-radius: var(--radius-sm);
  }
  .wish-photo-empty {
    height: 190px; display: flex; align-items: center; justify-content: center;
    background: var(--color-bg); color: var(--color-muted); font-size: var(--text-sm);
  }

  /* Её слова — не подпись мелким шрифтом, а основной текст карточки:
     это и есть топливо режима, ради него всё и заводилось. */
  .wish-why {
    overflow-wrap: anywhere;
    font-size: var(--text-md); line-height: var(--leading-md);
    color: var(--color-text); white-space: pre-wrap; margin: 0;
  }
  /* Главный вопрос карточки — «что произойдёт, если не куплю». Её правило
     24.08.2026: этот тест стоит первым, сразу под названием. Проверено на её
     же истории: трёшка (разнополым детям негде спать), Ауди (старую машину
     некому чинить), Сочи («я бы рыдала, у меня была бы депрессия этой зимой»).
     Желание, у которого здесь пусто, — не желание, а разглядывание витрины. */
  .wish-if-not {
    margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm);
    background: var(--color-bg); white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .wish-if-not .label {
    display: block; font-size: var(--text-xs); color: var(--color-muted);
    font-weight: 500; margin-bottom: 2px;
  }
  .wish-if-not .value {
    font-size: var(--text-md); line-height: var(--leading-md); color: var(--color-text);
  }
  .wish-if-not.empty .value { color: var(--color-muted); }

  /* Мурашки: «какой кайф, какие мурашки оно мне даст» — её слова 21.08.2026.
     Это не подпись, а вторая по важности строка карточки после названия. */
  .wish-feel {
    margin: 0; padding: var(--space-3) var(--space-4);
    background: rgba(47, 111, 237, .07); border-radius: var(--radius-sm);
    font-size: var(--text-base); line-height: var(--leading-md); color: var(--color-text);
    white-space: pre-wrap;
  }
  .wish-deadline { font-size: var(--text-xs); color: var(--color-accent); font-weight: 500; }

  /* Склейка «сколько надо продать» — её задача 24.08.2026. Свёрнута под
     кнопку «Расчёт»: её правка того же дня — «мне не надо, чтобы она была
     всегда; я буду проваливаться в карточку и раскрывать это». На виду
     остаётся только цена желания. */
  .earn-chain { margin-top: var(--space-4); }
  .earn-chain > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-base); font-weight: 500; color: var(--color-accent);
    padding: var(--space-2) 0;
  }
  .earn-chain > summary::-webkit-details-marker { display: none; }
  .earn-chain > summary::after { content: "▾"; font-size: var(--text-xs); }
  .earn-chain[open] > summary::after { content: "▴"; }
  .earn-body { padding-top: var(--space-2); }
  .earn-sub {
    font-size: var(--text-xs); color: var(--color-muted); margin: 0 0 var(--space-2);
  }
  .earn-step {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
  }
  .earn-step:last-of-type { border-bottom: none; }
  .earn-step .what { font-size: var(--text-base); color: var(--color-text); }
  .earn-step .how { display: block; font-size: var(--text-xs); color: var(--color-muted); }
  .earn-step .num { font-size: var(--text-md); font-weight: 600; white-space: nowrap; }
  .earn-step.last .num { color: var(--color-accent); }
  /* Из чего складывается рубль продажи — то, что она перечислила сама:
     товар и доставка, реклама, процент менеджеру, НДС. */
  .earn-ruble { margin: var(--space-3) 0; }
  .earn-ruble .row {
    display: flex; justify-content: space-between; gap: var(--space-3);
    font-size: var(--text-base); color: var(--color-muted); padding: 2px 0;
  }
  .earn-ruble .row.total { color: var(--color-text); font-weight: 600; }
  .earn-note {
    margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-md);
    color: var(--color-muted);
  }
  .earn-stale { color: var(--color-danger); }

  .wish-extra {
    border-top: var(--border-width) solid var(--color-border);
    padding-top: var(--space-3); margin-top: var(--space-2);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  .wish-extra-item .label {
    display: block; font-size: var(--text-xs); line-height: var(--leading-xs);
    color: var(--color-muted); margin-bottom: 2px; letter-spacing: .02em;
  }
  .wish-extra-item .value {
    font-size: var(--text-base); line-height: var(--leading-base);
    color: var(--color-text); white-space: pre-wrap;
  }

  /* Три кнопки — одной строкой на любой ширине карточки: раньше «Сбылось»
     срывалось на вторую строку и низ карточек шёл вразнобой. */
  .wish-actions { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
  .wish-actions .btn-small { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 6px var(--space-2); }
  .btn-small { padding: 6px var(--space-3); font-size: var(--text-sm); }

  /* Перетаскивание карточек (её правка 21.08.2026: «нужна функция
     перетаскивать эти желания, чтобы местами их менять»). Карточка под рукой
     видна как поднятая, место, куда она встанет, показывает сама раскладка. */
  .wish-card { cursor: grab; }
  .wish-card.dragging {
    cursor: grabbing; opacity: .55;
    outline: var(--focus-ring-width) dashed var(--color-accent); outline-offset: -2px;
  }
  .wish-grid.dragging-inside { user-select: none; }
  .wish-grid.dragging-inside .wish-card:not(.dragging) { transition: transform .12s ease; }

  /* ---------- Отложено в каталог ---------- */
  .returned-list { display: flex; flex-direction: column; }
  .returned-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .returned-row:last-child { border-bottom: none; }
  .returned-title { flex: 1 1 auto; min-width: 0; color: var(--color-text); font-size: var(--text-md); }
  .returned-price { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }

  /* ---------- Уже случилось ---------- */
  .empty-full { grid-column: 1 / -1; column-span: all; }
  .done-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
  .done-card { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); }
  .done-card img { width: 56px; height: 56px; object-fit: contain; background: var(--color-bg); border-radius: var(--radius-sm); }
  .done-card .done-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
  .done-card .done-date { font-size: var(--text-xs); color: var(--color-muted); }

  /* ---------- Письмо из будущего и опора ---------- */
  .notes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gutter); }
  .notes-grid > .card { min-width: 0; }
  .note-text {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    min-height: 150px; resize: vertical;
    font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-md);
    color: var(--color-text); background: var(--color-surface);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);
    padding: var(--space-3);
  }
  .note-text:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); }
  .note-meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }

  /* ---------- Форма желания ---------- */
  .form-grid { display: flex; flex-direction: column; gap: var(--space-4); }
  .form-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); margin-top: var(--space-1); }
  .field-input.textarea { min-height: 90px; min-width: 0; max-width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-body); line-height: var(--leading-md); }
  .dialog-panel-wide { max-width: 640px; width: 92vw; max-height: 88vh; overflow-y: auto; }
  .optional-toggle {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  }
  .photo-strip { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
  .photo-strip figure { margin: 0; position: relative; }
  .photo-strip img { width: 72px; height: 56px; object-fit: contain; background: var(--color-bg); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); }
  .photo-strip button {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    border-radius: 50%; border: var(--border-width) solid var(--color-border);
    background: var(--color-surface); color: var(--color-danger); cursor: pointer;
    font-size: var(--text-xs); line-height: 1; padding: 0;
  }

  @media (max-width: 900px) {
    .focus-card { grid-template-columns: minmax(0, 1fr); }
    .notes-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Телефон: фото ниже, сетка в одну колонку, кнопка добавления во всю ширину —
     иначе шапка перестаёт помещаться в строку. */
  @media (max-width: 600px) {
    .focus-photo { max-height: 320px; }
    .wish-grid { columns: 1; }
    .done-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar > .btn-primary { width: 100%; }
  }

/* Строка возвращённого желания на телефоне переносится, а не растягивает
   страницу до 509 px (прогон mobile_screens_check, 28.08.2026). */
@media (max-width: 720px) {
  .returned-row { flex-wrap: wrap; }
  .returned-title { flex: 1 1 100%; }
  /* Кнопка «Вернуть на доску» не переносится внутри себя и в остаток строки не
     влезала — страницу распирало до 406 px (второй прогон 28.08.2026). */
  .returned-row .btn { flex: 1 1 100%; }
  /* Пометка о цене — строка вида «стоит столько-то, отложено столько-то»: в
     одну строку она не влезает и с nowrap распирала карточку до 374 px
     (третий прогон 28.08.2026). На телефоне переносится. */
  .returned-price { flex: 1 1 100%; white-space: normal; }
}