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

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

  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); margin: 0 0 var(--space-2);
  }
  .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); text-align: right; }
  .section-sub {
    color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-base);
    margin: 0 0 var(--space-4); max-width: 720px;
  }

  /* ---------- Желание недели ---------- */
  .surprise-card { display: flex; gap: var(--space-6); align-items: flex-start; }
  .surprise-emoji {
    flex: none; width: 88px; height: 88px; border-radius: var(--radius-lg);
    background: rgba(47, 111, 237, .10);
    display: flex; align-items: center; justify-content: center; font-size: var(--art-emoji);
  }
  .surprise-title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    margin: var(--space-2) 0; color: var(--color-text);
  }
  .surprise-text { font-size: var(--text-md); line-height: var(--leading-md); color: var(--color-text); white-space: pre-wrap; margin: 0; }
  .surprise-meta { font-size: var(--text-xs); color: var(--color-muted); }

  /* ---------- Быстрые ссылки на разделы ---------- */
  .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-done { background: rgba(26, 157, 108, .12); color: var(--color-success); }

  .cat-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
  .cat-nav a {
    display: inline-block; padding: 6px var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--text-sm); text-decoration: none;
  }
  .cat-nav a:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .cat-nav a .n { color: var(--color-muted); font-size: var(--text-xs); margin-left: 6px; }

  /* ---------- Карточка желания ---------- */
  .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--card-gutter); }
  .cat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease; }
  .cat-card.highlight { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); }
  /* Предложение по кнопке «Удиви меня»: одна карточка обычной ширины и
     кнопка «Ещё вариант» под ней. */
  .pick-grid { grid-template-columns: minmax(0, 340px); }
  .pick-again { margin-top: var(--space-4); }
  /* Подпись стоит рядом с заголовком, а не улетает к правому краю страницы:
     карточка здесь одна и узкая, и строка в противоположном углу читалась как
     оторванная («строка уехала вправо», её правка 21.08.2026). */
  #pick-section .section-head { justify-content: flex-start; }
  #pick-section .section-head .hint { text-align: left; }

  /* Фото — главное на карточке (её слова 21.08.2026: «эмодзи тут точно не
     подходят, бери фотографии из интернета»). Эмодзи остаётся только как
     подстраховка, если снимок не загрузился. */
  .cat-photo { position: relative; width: 100%; height: 180px; background: var(--color-bg); }
  .cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cat-photo .cat-emoji-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--art-emoji);
  }
  .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);
  }
  .cat-credit a { color: #fff; text-decoration: none; }

  .cat-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
  .cat-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);
  }
  .cat-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
  .cat-deadline { font-size: var(--text-xs); color: var(--color-accent); font-weight: 500; }
  .cat-why { font-size: var(--text-base); line-height: var(--leading-md); color: var(--color-muted); margin: 0; }

  /* Тест «а если не куплю» — первым в карточке (её правило 24.08.2026).
     В каталоге он есть только у желаний, которые этот тест прошли: остальным
     ответ придумывать нельзя, его даёт она. */
  .cat-if-not {
    margin: 0; padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm);
    background: var(--color-bg);
  }
  .cat-if-not .label {
    display: block; font-size: var(--text-xs); color: var(--color-muted);
    font-weight: 500; margin-bottom: 2px;
  }
  .cat-if-not .value {
    font-size: var(--text-base); line-height: var(--leading-md); color: var(--color-text);
  }

  /* Мурашки — то, ради чего она вообще открывает эту страницу. Поэтому не
     подпись мелким шрифтом, а выделенный блок основного кегля. */
  .cat-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);
  }


  .cat-foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
  .cat-added { color: var(--color-success); font-size: var(--text-sm); font-weight: 500; }
  .btn-small { padding: 6px var(--space-3); font-size: var(--text-sm); }
  .btn-dismiss {
    margin-left: auto; background: none; border: none; padding: 4px; cursor: pointer;
    color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm);
  }
  .btn-dismiss:hover { color: var(--color-danger); }

  .dismiss-what {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--text-lg); line-height: var(--leading-lg);
    color: var(--color-text); margin-bottom: var(--space-4);
  }
  .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); }

  /* ---------- «Не моё» ---------- */
  .dismissed-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .dismissed-row {
    display: flex; gap: var(--space-4); align-items: flex-start;
    padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border);
  }
  .dismissed-row:last-child { border-bottom: none; }
  .dismissed-row .title { font-weight: 500; color: var(--color-text); font-size: var(--text-base); }
  .dismissed-row .reason { color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-base); }
  .dismissed-row .side { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex: none; }
  .reason-input { min-width: 220px; }

  @media (max-width: 600px) {
    .cat-grid { grid-template-columns: minmax(0, 1fr); }
    .surprise-card { flex-direction: column; }
    .topbar > .btn-primary { width: 100%; }
  }

/* Вычеркнутое желание на телефоне: строка переносится, поле причины во всю
   ширину. min-width: 220px у поля не помещался рядом с кнопками, и строка
   ездила вбок (прогон mobile_screens_check, 28.08.2026). */
@media (max-width: 720px) {
  .dismissed-row { flex-wrap: wrap; }
  .dismissed-row .side { margin-left: 0; flex-wrap: wrap; }
  .reason-input { min-width: 0; width: 100%; }
}