/* ═══════════════════════════════════════════════════════════════
   DARE — конструктор мудборда. Оформление блока.

   Правила файла:
   • Цветов своих нет: всё через переменные из tokens.css.
   • Телефон первым: базовые правила написаны под узкий экран,
     медиазапросы только расширяют.
   • В движении участвуют transform и opacity. Ни одного filter.
   • Все имена классов начинаются с mb-.
   ═══════════════════════════════════════════════════════════════ */

/* ── Локальные роли цвета: светлая сторона по умолчанию ───────── */
.mb-root {
  --mb-surface:     var(--cream);
  --mb-surface-2:   var(--cream-2);
  --mb-line:        var(--cream-3);
  --mb-tx:          var(--tx-dark);
  --mb-tx-2:        var(--tx-dark-2);
  --mb-tx-3:        var(--tx-dark-3);
  --mb-accent:      var(--cherry);
  --mb-accent-2:    var(--cherry-soft);
  --mb-accent-tx:   var(--cream);
  --mb-ring:        var(--cherry);
  --mb-shadow:      var(--sh-md);

  --mb-gap:  clamp(.4rem, 1.5vw, .7rem);
  --mb-pad:  clamp(1rem, 4vw, 2.25rem);

  display: block;
  color: var(--mb-tx);
  font-family: var(--font-body);
}

/* Тёмная сторона бренда. Включается системной темой; страница может
   закрепить нужный вариант атрибутом data-theme="light" | "dark". */
@media (prefers-color-scheme: dark) {
  .mb-root:not([data-theme='light']) {
    --mb-surface:   var(--ink-2);
    --mb-surface-2: var(--ink-3);
    --mb-line:      var(--ink-3);
    --mb-tx:        var(--tx-light);
    --mb-tx-2:      var(--tx-light-2);
    --mb-tx-3:      var(--tx-light-3);
    --mb-accent:    var(--blush-deep);
    --mb-accent-2:  var(--blush);
    --mb-accent-tx: var(--ink);
    --mb-ring:      var(--blush);
    --mb-shadow:    0 12px 34px rgba(0, 0, 0, .45);
  }
}
.mb-root[data-theme='dark'] {
  --mb-surface:   var(--ink-2);
  --mb-surface-2: var(--ink-3);
  --mb-line:      var(--ink-3);
  --mb-tx:        var(--tx-light);
  --mb-tx-2:      var(--tx-light-2);
  --mb-tx-3:      var(--tx-light-3);
  --mb-accent:    var(--blush-deep);
  --mb-accent-2:  var(--blush);
  --mb-accent-tx: var(--ink);
  --mb-ring:      var(--blush);
  --mb-shadow:    0 12px 34px rgba(0, 0, 0, .45);
}

/* ── Подложка блока: страница альбома ────────────────────────── */
.mb {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--mb-pad);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.mb-root--bare .mb {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* ── Шапка блока ─────────────────────────────────────────────── */
.mb-head { max-width: var(--maxw-text); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.mb-eyebrow {
  margin: 0 0 .6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mb-accent);
}
.mb-title {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  color: var(--mb-tx);
}
.mb-title em { font-family: var(--font-script); font-style: normal; color: var(--mb-accent); }
.mb-lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}

/* ── Раскладка: на телефоне доска сверху, выбор снизу ─────────── */
.mb-grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}
.mb-left { min-width: 0; }
.mb-panel { min-width: 0; display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }

@media (min-width: 58rem) {
  .mb-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .mb-left { position: sticky; top: clamp(1rem, 4vh, 2.5rem); }
}

/* ── Мудборд: сетка 3 × 3, всегда квадрат ────────────────────── */
.mb-boardWrap { position: relative; }

.mb-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--mb-gap);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  isolation: isolate;
}

.mb-tile {
  --mb-tilt: 0deg;
  position: relative;
  min-width: 0;
  border-radius: var(--r-sm);
  border: 1px dashed var(--mb-line);
  background: var(--mb-surface-2);
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.mb-tile__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-soft);
}
.mb-tile__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .25rem;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mb-tx-2);
  transition: opacity var(--d-fast) var(--ease-soft);
}

/* Заполненная плитка: наклон «как приклеено в альбом» и кусочек скотча */
.mb-tile--on {
  z-index: 1;
  border-style: solid;
  border-color: transparent;
  transform: rotate(var(--mb-tilt));
  box-shadow: var(--sh-sm);
}
.mb-tile--on .mb-tile__cv { opacity: 1; }
.mb-tile--on .mb-tile__hint { opacity: 0; }
.mb-tile--on::after {
  content: '';
  position: absolute;
  top: -6%;
  left: -10%;
  width: 42%;
  height: 16%;
  background: var(--mb-surface);
  opacity: .38;
  transform: rotate(-24deg);
  pointer-events: none;
}

@keyframes mb-pop {
  from { opacity: 0; transform: rotate(0deg) scale(.86); }
  60%  { opacity: 1; transform: rotate(var(--mb-tilt)) scale(1.05); }
  to   { opacity: 1; transform: rotate(var(--mb-tilt)) scale(1); }
}
.mb-tile--pop { animation: mb-pop var(--d-base) var(--ease-out) both; }

/* ── Обрезки: отделка, которой не хватило места на доске ─────── */
.mb-scraps[hidden] { display: none; }
.mb-scraps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: .75rem;
}
.mb-scrap {
  --mb-tilt: 0deg;
  display: inline-block;
  padding: .35rem .7rem;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--mb-tx-2);
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-sm);
  transform: rotate(var(--mb-tilt));
}

/* ── Полоса заполнения ───────────────────────────────────────── */
.mb-progress { margin-top: 1rem; }
.mb-progress__bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--mb-line);
  overflow: hidden;
}
.mb-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mb-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out);
}
.mb-progress__text {
  margin: .5rem 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}

/* ── Набросок будущей вещи ───────────────────────────────────── */
.mb-preview { margin: 1.25rem 0 0; }
.mb-preview__cv {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  border: 1px solid var(--mb-line);
  background: var(--cream);
}
.mb-preview__cap {
  margin: .6rem 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}

/* ── Группы выбора ───────────────────────────────────────────── */
.mb-group__title {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--mb-tx);
}
.mb-group__sub {
  margin: 0 0 .85rem;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}
.mb-group__from {
  margin: .6rem 0 0;
  min-height: 1.2em;
  font-size: var(--fs-small);
  color: var(--mb-tx-2);
}

.mb-opts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Кнопка выбора. Высота не меньше 44 px даже с одной строкой текста. */
.mb-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .6rem .8rem;
  margin: 0;
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  color: var(--mb-tx);
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--d-micro) var(--ease),
              background-color var(--d-micro) var(--ease-soft),
              border-color var(--d-micro) var(--ease-soft),
              color var(--d-micro) var(--ease-soft);
}
.mb-opt::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--sh-md);
  opacity: 0;
  transition: opacity var(--d-micro) var(--ease-soft);
  pointer-events: none;
}
@media (hover: hover) {
  .mb-opt:hover { transform: translateY(-2px); border-color: var(--mb-accent-2); }
  .mb-opt:hover::after { opacity: .7; }
}
.mb-opt:active { transform: translateY(0) scale(.985); }

.mb-opt[aria-pressed='true'] {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-accent-tx);
}
.mb-opt[aria-pressed='true'] .mb-opt__note { color: var(--mb-accent-tx); opacity: .82; }
.mb-opt[aria-pressed='true'] .mb-ico { fill: var(--mb-accent-tx); }

.mb-opt:focus-visible {
  outline: 2px solid var(--mb-ring);
  outline-offset: 3px;
}

.mb-opt__tx { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mb-opt__name { font-weight: 600; line-height: 1.25; }
.mb-opt__note {
  font-size: var(--fs-label);
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--mb-tx-2);
}

/* Настроение: три кружка палитры + название */
.mb-opt--mood { flex: 1 1 100%; }
.mb-dots { display: flex; flex: 0 0 auto; }
.mb-dot {
  display: block;
  width: 15px;
  height: 24px;
  border: 1px solid var(--mb-line);
}
.mb-dot:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.mb-dot:last-child  { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.mb-dot + .mb-dot { margin-left: -1px; }

/* Зверушка: иконка сверху, подпись снизу */
.mb-opt--critter {
  flex: 1 1 calc(33.333% - .34rem);
  flex-direction: column;
  gap: .3rem;
  min-height: 84px;
  padding: .55rem .35rem;
  text-align: center;
  justify-content: center;
}
.mb-opt--critter .mb-opt__name { font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; }
.mb-ico {
  width: 34px;
  height: 34px;
  fill: var(--mb-tx);
  transition: fill var(--d-micro) var(--ease-soft);
}

/* Отделка: галочка + название */
.mb-opt--finish { flex: 1 1 calc(50% - .25rem); }
.mb-opt__check {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--mb-tx-2);
  border-radius: 6px;
}
.mb-opt__check::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--d-micro) var(--ease-out);
}
.mb-opt[aria-pressed='true'] .mb-opt__check { border-color: var(--mb-accent-tx); }
.mb-opt[aria-pressed='true'] .mb-opt__check::before { transform: rotate(45deg) scale(1); }

/* Размер: строкой, название слева, цена справа */
.mb-opt--size { flex: 1 1 100%; justify-content: space-between; }
.mb-opt--size .mb-opt__note { text-align: right; }

@media (min-width: 30rem) {
  .mb-opt--mood { flex: 1 1 calc(50% - .25rem); }
  .mb-opt--critter { flex: 1 1 calc(25% - .375rem); }
  .mb-opt--size { flex: 1 1 calc(33.333% - .34rem); flex-direction: column; align-items: flex-start; gap: .2rem; justify-content: center; }
  .mb-opt--size .mb-opt__note { text-align: left; }
}
@media (min-width: 58rem) and (max-width: 74rem) {
  .mb-opt--mood { flex: 1 1 100%; }
}

/* ── Ориентир по цене ────────────────────────────────────────── */
.mb-price {
  padding: clamp(.9rem, 2.5vw, 1.25rem);
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-md);
}
.mb-price__lab {
  margin: 0 0 .35rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mb-tx-2);
}
.mb-price__val {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--mb-accent);
}
.mb-price__cap {
  margin: .4rem 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}
.mb-price__note {
  margin: .6rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--mb-line);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}

/* ── Похожая работа ──────────────────────────────────────────── */
.mb-match {
  padding: clamp(.9rem, 2.5vw, 1.25rem);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-md);
}
.mb-match__lab {
  margin: 0 0 .7rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mb-tx-2);
}
.mb-match__body { display: flex; gap: .9rem; align-items: flex-start; }
.mb-match__empty { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--mb-tx-2); }
.mb-match__fig {
  flex: 0 0 auto;
  width: clamp(88px, 26vw, 132px);
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--mb-surface-2);
}
.mb-match__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.mb-match__info { min-width: 0; }
.mb-match__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--mb-tx);
}
.mb-match__price { margin: .15rem 0 .4rem; font-size: var(--fs-body); font-weight: 600; color: var(--mb-accent); }
.mb-match__why,
.mb-match__note { margin: 0 0 .3rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--mb-tx-2); }
.mb-match__status {
  display: inline-block;
  margin: .2rem 0 0;
  padding: .2rem .55rem;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mb-tx-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-pill);
}

/* ── Кнопки ──────────────────────────────────────────────────── */
.mb-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mb-btn {
  flex: 1 1 100%;
  min-height: 54px;
  padding: .9rem 1.2rem;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--d-micro) var(--ease),
              background-color var(--d-micro) var(--ease-soft),
              color var(--d-micro) var(--ease-soft),
              border-color var(--d-micro) var(--ease-soft);
}
.mb-btn--main { background: var(--mb-accent); color: var(--mb-accent-tx); box-shadow: var(--sh-md); }
.mb-btn--ghost { background: transparent; color: var(--mb-tx); border-color: var(--mb-line); }
@media (hover: hover) {
  .mb-btn--main:hover { transform: translateY(-2px); background: var(--mb-accent-2); }
  .mb-btn--ghost:hover { transform: translateY(-2px); border-color: var(--mb-accent); }
}
.mb-btn:active { transform: translateY(0) scale(.99); }
.mb-btn:focus-visible { outline: 2px solid var(--mb-ring); outline-offset: 3px; }
.mb-btn--done span::after { content: ' ✓'; }

.mb-actions__note {
  margin: -.4rem 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--mb-tx-2);
}

@media (min-width: 26rem) {
  .mb-btn--main { flex: 1 1 60%; }
  .mb-btn--ghost { flex: 1 1 30%; }
}

/* ── Текст заявки ────────────────────────────────────────────── */
.mb-request {
  padding: clamp(.9rem, 2.5vw, 1.25rem);
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-md);
}
.mb-request[hidden] { display: none; }
.mb-request__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.mb-request__lab {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mb-tx-2);
}
.mb-request__again {
  min-height: 44px;
  padding: .5rem .9rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--mb-tx);
  background: transparent;
  border: 1px solid var(--mb-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--d-micro) var(--ease-soft), transform var(--d-micro) var(--ease);
}
@media (hover: hover) { .mb-request__again:hover { border-color: var(--mb-accent); transform: translateY(-1px); } }
.mb-request__again:focus-visible { outline: 2px solid var(--mb-ring); outline-offset: 3px; }

.mb-request__text {
  display: block;
  width: 100%;
  margin: .7rem 0 0;
  padding: .8rem .9rem;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: var(--lh-body);
  color: var(--mb-tx);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-sm);
  resize: vertical;
}
.mb-request__text:focus-visible { outline: 2px solid var(--mb-ring); outline-offset: 2px; }

.mb-request__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .6rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--mb-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.mb-request__link:focus-visible { outline: 2px solid var(--mb-ring); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── Строка для скринридера ──────────────────────────────────── */
.mb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Без движения ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mb-tile,
  .mb-scrap { --mb-tilt: 0deg !important; }
  .mb-tile--pop { animation: none !important; }
  .mb-tile,
  .mb-tile__cv,
  .mb-tile__hint,
  .mb-opt,
  .mb-opt::after,
  .mb-opt__check::before,
  .mb-btn,
  .mb-progress__fill,
  .mb-request__again { transition: none !important; }
  .mb-opt:hover,
  .mb-btn:hover,
  .mb-opt:active,
  .mb-btn:active { transform: none !important; }
}