/* «Сьогодні» и журнал носіння (фаза 2): today.js, wear.js, questions.js.
   Подключается после styles.css: порядок пластов уже задан там, здесь те же пласты.
   Сырые значения (цвета комнаты, размеры зеркала) только в tokens; screens только раскладывает. */

/* ========================================================================== tokens */
@layer tokens {
  :root {
    /* комната на «Сьогодні» (m-today, d-today) */
    --t-curtain: #EDCFC6;
    --t-leaf: #7E9A68;
    --t-leaf-2: #95AE7E;
    --t-pot: #A45A48;
    --t-rain: #8FAFBE;
    --t-glass: #E7EDEF;
    --t-skel: rgb(var(--shadow-rgb) / .07);
    --t-room-h: 112px;
    --t-room-h-desk: 300px;
    --t-floor: 14px;
    --t-mirror-w: 72px;
    --t-mirror-h: 92px;
    --t-frame: 10px;          /* рама зеркала в карточке образа */
    --t-frame-s: 6px;         /* рама маленького зеркала в комнате */
    --t-mirror-r: 58px;
    --t-glass-r: 48px;
    --t-glass-ratio: 1.14;
    --t-pill-h: 38px;
    --t-tile-h: 92px;
    --t-row-h: 64px;
    --t-desk-side: 468px;     /* ширина плавающей панели листа на компьютере (d2-wear) */
  }
}

/* ========================================================================== components */
@layer components {
  /* ---------- погода одной строкой (m-today): факт, не кнопка ---------- */
  .t-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--t-pill-h);
    margin: 0 0 var(--sp-3);
    padding: 6px var(--sp-4) 6px var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    font: 500 var(--fs-body-s)/1.2 var(--font-ui);
  }
  .t-pill > .k-icon { width: 20px; height: 20px; color: var(--acc); }
  .t-pill.is-empty { visibility: hidden; }

  /* ---------- комната: окно, растение, зеркало ---------- */
  .t-hero .k-hero__ill { height: var(--t-room-h); }
  .t-hero--desk .k-hero__ill { height: var(--t-room-h-desk); }
  .t-room {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to top, var(--oak-lighter) 0 var(--t-floor), transparent var(--t-floor));
  }
  .t-room__art {
    position: absolute;
    left: 30px;
    bottom: var(--t-floor);
    height: calc(100% - var(--t-floor) - 8px);
    aspect-ratio: 190 / 100;
  }
  .t-room__svg { display: block; width: 100%; height: 100%; }
  .t-f-curtain { fill: var(--t-curtain); }
  .t-f-frame { fill: var(--white); }
  .t-f-sky { fill: var(--sky); }
  .t-f-bar { fill: none; stroke: var(--white); stroke-width: 3; }
  .t-f-sun { fill: var(--mus); }
  .t-f-cloud { fill: var(--white); }
  .t-f-rain { fill: none; stroke: var(--t-rain); stroke-width: 2; stroke-linecap: round; }
  .t-f-sill { fill: var(--oak-light); }
  .t-f-leaf { fill: var(--t-leaf); }
  .t-f-leaf2 { fill: var(--t-leaf-2); }
  .t-f-pot { fill: var(--t-pot); }
  .t-room__mirror {
    position: absolute;
    right: 40px;
    bottom: calc(var(--t-floor) + 2px);
    width: var(--t-mirror-w);
    height: var(--t-mirror-h);
    padding: var(--t-frame-s);
    border-radius: var(--r-pill);
    background: var(--oak);
    box-shadow: var(--shadow-thumb);
  }
  .t-room__glass {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: linear-gradient(160deg, var(--t-glass), var(--sky));
  }
  .t-room__spark { width: 26px; height: 26px; color: var(--acc); }
  .t-room__mirror > .k-badge { position: absolute; left: 50%; top: 0; translate: -50% -50%; }
  .t-room--big .t-room__art { left: 5%; height: 50%; }
  .t-room--big .t-room__mirror {
    right: 3%;
    bottom: calc(var(--t-floor) + 10px);
    width: 55%;
    height: 86%;
    padding: 12px;
    border-radius: 150px;
  }
  .t-room--big .t-room__glass { place-items: stretch; padding: 5% 11%; border-radius: 140px; background: var(--t-glass); }

  /* ---------- главная карточка утром ---------- */
  .t-q { margin: 0; font: 600 var(--fs-title)/1.3 var(--font-ui); }
  .t-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 var(--sp-4);
    font: 400 var(--fs-hint)/1.35 var(--font-ui);
    color: var(--ink-2);
  }
  .t-sub > .k-icon { width: 18px; height: 18px; }
  .t-hero .k-hscroll { margin: 0 calc(-1 * var(--sp-5)) var(--sp-4); padding-inline-start: var(--sp-5); scroll-padding-inline: var(--sp-5); }
  .t-err { margin: var(--sp-3) 0 0; font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui); color: var(--danger); text-align: center; }
  .t-empty { margin: 0 0 var(--sp-4); font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--ink-2); }
  .t-divider { height: 1px; margin: var(--sp-5) 0 var(--sp-4); background: var(--line); }

  /* ---------- образы в зеркале (m-today2): лента со снапом (MOTION-SPEC #6) ---------- */
  .t-car {
    position: relative;
    display: flex;
    gap: var(--sp-3);
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .t-car::-webkit-scrollbar { display: none; }
  .t-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
    border-radius: var(--r-hero);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .t-card > :not(.t-mirror) { margin-inline: var(--sp-2); }
  .t-mirror { position: relative; padding: var(--t-frame); border-radius: var(--t-mirror-r); background: var(--oak); }
  .t-mirror__glass {
    position: relative;
    aspect-ratio: var(--t-glass-ratio);
    padding: 6% 7%;
    overflow: hidden;
    border-radius: var(--t-glass-r);
    background: var(--t-glass);
  }
  .t-mirror > .k-badge { position: absolute; left: 50%; top: 0; translate: -50% -50%; }

  /* коллаж в зеркале: вещь целиком в своей ячейке (contain), ячейка = кнопка замены */
  .t-mc { display: grid; width: 100%; height: 100%; gap: 4%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .t-mc__cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
  }
  button.t-mc__cell { min-width: var(--target); min-height: var(--target); }
  .t-mc__cell > img { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; object-fit: contain; }

  .t-look__title { margin: var(--sp-4) 0 0; font: 600 var(--fs-title)/1.3 var(--font-ui); overflow-wrap: anywhere; }
  .t-look__why { margin: 6px 0 0; font: 400 var(--fs-body-s)/var(--lh-body) var(--font-ui); color: var(--ink-2); }
  .t-look__hint { display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 0; font: 500 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-look__hint > .k-icon { width: 16px; height: 16px; }
  .t-look__acts { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); }
  .t-look .t-look__acts { padding-top: 0; }
  .t-look__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .t-look__row > .t-look__title { margin: 0; }
  .t-look__nav { display: flex; flex: none; align-items: center; gap: var(--sp-2); }
  .t-look__of { font: 500 var(--fs-hint)/1 var(--font-ui); color: var(--ink-2); }
  .t-vote { color: var(--ink-2); }
  .t-like[aria-pressed="true"] .k-icon, .t-vote[aria-pressed="true"] .k-icon { fill: currentColor; }

  /* «Вдягну це» → «Вдягла» (MOTION-SPEC #10): круг и галочка в SVG, состояние классом */
  .t-wear { --tr-x: background-color var(--dur-state) var(--ease-fade), color var(--dur-state) var(--ease-fade); }
  .t-chk { flex: none; width: 22px; height: 22px; overflow: visible; }
  .t-chk__c { fill: transparent; transition: fill var(--dur-state) var(--ease-enter); }
  .t-chk__p { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .t-wear.is-done .t-chk__c { fill: var(--acc); }
  .t-wear.is-done .t-chk__p { stroke: var(--acc-ink); }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .t-wear.is-done .t-chk__p { animation: t-draw var(--dur-check) var(--ease-enter) 80ms backwards; }
  }

  .t-dots { display: flex; justify-content: center; gap: 6px; margin: var(--sp-3) 0 var(--sp-2); }
  .t-dots > span { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: background-color var(--dur-state) var(--ease-fade); }
  .t-dots > .is-on { width: 18px; background: var(--acc); }
  .t-typebtn { display: flex; min-height: var(--btn-h-compact); margin: var(--sp-2) auto 0; border-radius: var(--r-pill); font-size: var(--fs-body-s); }

  /* ---------- стиліст думает (m-x-picking) ---------- */
  .t-skel { display: grid; width: 100%; height: 100%; gap: 5%; padding: 3%; grid-template-columns: 50fr 25fr 25fr; grid-template-rows: 1fr 1fr; }
  .t-skel > span { border-radius: 16px; background: var(--t-skel); }
  .t-skel > :nth-child(1) { grid-row: 1 / 3; }
  .t-skel > :nth-child(2) { grid-column: 2 / 4; }
  .t-title-skel { width: 60%; height: 16px; margin-top: var(--sp-5); margin-bottom: var(--sp-4); border-radius: 8px; background: var(--surface-3); }
  .t-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .t-step { display: flex; align-items: center; gap: 10px; font: 400 var(--fs-body-s)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-step > .k-icon { width: 18px; height: 18px; color: var(--olive); }
  .t-step--now { color: var(--ink); font-weight: 600; }
  .t-step--now > .k-icon { color: var(--acc); }
  .t-wait { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
  .t-wait__t { font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }

  /* слово-кнопка: «Зупинити», «Пропустити», «Не знаю», «Інше...» */
  .t-textbtn {
    min-height: var(--target);
    padding: 0 var(--sp-1);
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink-2);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
  }
  .t-textbtn--acc { color: var(--acc); }
  .t-textbtn--mus { color: var(--mus-ink); }

  /* ---------- «Сьогодні на тобі» (m-worn) ---------- */
  .t-worn {
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--r-hero);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .t-worn__pic { aspect-ratio: 3 / 4; padding: 6%; overflow: hidden; border-radius: var(--r-card); background: var(--surface-2); }
  .t-worn__pic--photo { padding: 0; }
  .t-worn__pic--photo > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .t-worn__text { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-2) 0 var(--sp-1); }
  .t-worn__caps { margin: 0; font: 700 var(--fs-label)/1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--olive-ink); }
  .t-worn__title { margin: 6px 0 0; font: 600 var(--fs-title)/1.25 var(--font-ui); overflow-wrap: anywhere; }
  .t-worn__at { margin: var(--sp-4) 0 0; font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-worn__text > .k-btn { align-self: flex-start; margin-top: auto; min-width: 120px; }

  /* ---------- вечер: «Як тобі було в цьому?» ---------- */
  .t-comfort { padding: var(--sp-4); border-radius: var(--r-card-xl); background: var(--mus-soft); }
  .t-comfort__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .t-comfort__t { margin: 0; font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .t-comfort__sub { margin: 2px 0 var(--sp-3); font: 400 var(--fs-hint)/1.35 var(--font-ui); color: var(--ink-2); }
  .t-comfort .k-rating__i { background: var(--surface); box-shadow: none; }
  .t-comfort .k-rating__i[aria-checked="true"] { background: var(--acc); color: var(--acc-ink); }
  .t-comfort .k-rating__i[aria-checked="true"] .k-rating__l { color: var(--acc-ink); }

  /* ---------- «Я вже вдягнена» ---------- */
  .t-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--t-tile-h);
    padding: var(--sp-3) var(--sp-2);
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    font: 500 var(--fs-body-s)/1.25 var(--font-ui);
    text-align: center;
  }
  .t-tile__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); }
  .t-tile__ic > .k-icon { width: 20px; height: 20px; }

  /* ---------- «Попереду», «На завтра» ---------- */
  .t-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--t-row-h);
    padding: var(--sp-3);
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    text-align: left;
  }
  .t-row__ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--olive-soft); color: var(--olive-ink); }
  .t-row__ic > .k-icon { width: 20px; height: 20px; }
  .t-row__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
  .t-row__t { overflow: hidden; font: 600 var(--fs-body-s)/1.3 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
  .t-row__s { font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-row__s--ok { color: var(--olive-ink); }
  .t-row > .k-btn { flex: none; }
  .t-row__chev { flex: none; width: 16px; height: 16px; color: var(--ink-3); }

  /* ---------- «Згадати» (m-today3) ---------- */
  .t-recall { display: flex; gap: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .t-recall__pic { flex: none; width: 96px; aspect-ratio: 1; padding: 6px; border-radius: var(--r-photo-s); background: var(--surface-2); }
  .t-recall__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .t-recall__caps { margin: 0; font: 600 var(--fs-label)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-recall__title { margin: 0; font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .t-recall__sub { margin: 0 0 var(--sp-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }

  /* ---------- погода на компьютере (d-today) ---------- */
  .t-wx { padding: var(--sp-5); border-radius: var(--r-card-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .t-wx__col + .t-wx__col { padding-left: var(--sp-5); border-left: 1px solid var(--line); }
  .t-wx__l { margin: 0; font: 500 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink-2); }
  .t-wx__temp { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; font: 600 var(--fs-display-l)/1 var(--font-ui); }
  .t-wx__temp > .k-icon { width: 34px; height: 34px; color: var(--acc); }
  .t-wx__s { margin: 0; font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink); }

  .t-phrase { margin: var(--sp-6) var(--sp-2) 0; font: italic 500 var(--fs-section)/var(--lh-body) var(--font-display); color: var(--ink-2); text-align: center; }

  /* ---------- «Що не так?» и замена вещи ---------- */
  /* QA: листы «Замінити» и «Що не так?» теперь общие (look-card.js), свои правила .t-swap и .t-why убраны. */

  /* ---------- лист «Вибрати речі» (m-wear, d2-wear) ---------- */
  .w-top {
    position: sticky;
    top: calc(-1 * var(--sp-1));
    z-index: 1;
    display: grid;
    gap: var(--sp-3);
    margin: 0 calc(-1 * var(--sp-5)) var(--sp-3);
    padding: var(--sp-1) var(--sp-5) var(--sp-3);
    background: var(--surface);
  }
  .w-top > .k-hscroll { margin-inline: calc(-1 * var(--sp-5)); padding-inline-start: var(--sp-5); }
  .w-grid .k-tile__ph { transition: background-color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade); }
  .w-grid .k-tile.is-picked .k-tile__ph { background: var(--acc-soft); box-shadow: inset 0 0 0 2px var(--acc); }
  .w-check {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    pointer-events: none;
  }
  .w-check > .k-icon { width: 16px; height: 16px; --icon-stroke: 2.6px; }
  .k-tile.is-picked .w-check { display: grid; }
  .w-empty { margin-top: var(--sp-4); text-align: center; }
  .w-foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); border-top: 1px solid var(--line); }
  .w-sum { margin: 0; overflow: hidden; font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
  .w-acts { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--sp-1); }
  .w-acts > .k-btn { width: 100%; }

  /* ---------- «Стиліст питає» (m-questions) и лист поля (m-color) ---------- */
  .q-progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
  .q-count { flex: none; font: 600 var(--fs-hint)/1 var(--font-ui); color: var(--ink-2); }
  .q-progress > .k-progress { flex: 1 1 auto; }
  .q-photo { position: relative; height: 220px; overflow: hidden; border-radius: var(--r-card); background: var(--surface-2); }
  .q-photo > img { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; object-fit: contain; }
  .q-item { margin: var(--sp-4) 0 0; font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .q-unsure { margin: 2px 0 0; font: 400 var(--fs-hint)/1.35 var(--font-ui); color: var(--ink-2); }
  .q-ask { margin: var(--sp-3) 0; font: 600 var(--fs-display-m)/var(--lh-display) var(--font-display); }
  .q-options .k-option { justify-content: flex-start; }
  .q-acts { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-3) 0 var(--sp-2); }
  .q-hint { margin-top: var(--sp-2); }
  .q-done { margin: var(--sp-5) 0; font: 600 var(--fs-display-m)/var(--lh-display) var(--font-display); text-align: center; }
  .q-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 76px;
    padding: var(--sp-2) 2px;
    border: 0;
    border-radius: var(--r-btn);
    background: none;
    color: var(--ink);
    font: 500 var(--fs-label)/1.2 var(--font-ui);
    --tr-x: background-color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .q-swatch__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dot, var(--surface-3)); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--white); }
  .q-swatch[data-light] .q-swatch__dot { color: var(--ink); }
  .q-swatch__dot > .k-icon { display: none; width: 20px; height: 20px; --icon-stroke: 2.6px; }
  .q-swatch[aria-pressed="true"] { background: var(--acc-soft); box-shadow: inset 0 0 0 1.5px var(--acc); }
  .q-swatch[aria-pressed="true"] .q-swatch__dot > .k-icon { display: block; }
  .q-swatch__l { max-width: 100%; overflow-wrap: break-word; hyphens: auto; text-align: center; }
  .q-note { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn); background: var(--surface-2); font: 500 var(--fs-body-s)/1.35 var(--font-ui); }
  .q-note > .k-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acc); }
}

@keyframes t-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes t-depth {
  from { scale: .94; opacity: .7; }
  40%, 60% { scale: 1; opacity: 1; }
  to { scale: .94; opacity: .7; }
}

/* соседние образы чуть меньше и бледнее, пока лента едет (MOTION-SPEC #6; без «Менше руху») */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @layer components {
      :root:not([data-motion="reduce"]) .t-car > .t-card { animation: t-depth linear both; animation-timeline: view(inline); }
    }
  }
}

/* ========================================================================== layouts */
@layer layouts {
  @media (min-width: 1100px) {
    .k-pane.t-pane { width: min(100%, calc(var(--desk-max) + 160px)); padding-inline: 80px; }
    .k-sheet.w-sheet {
      inset: 130px 80px 128px auto;
      width: var(--t-desk-side);
      height: auto;
      max-height: none;
      margin: 0;
      border-radius: var(--r-sheet);
    }
    /* фаза 9: другие панели справа без тени на фоне, а «Що на тобі сьогодні?» приглушает экран (d2-wear) */
    .k-sheet.w-sheet::backdrop { background: var(--scrim); }
  }
}

/* ========================================================================== screens */
@layer screens {
  .t-grid { display: flex; flex-direction: column; }
  .t-side { display: flex; flex-direction: column; }
  .t-side > .t-comfort { margin-top: var(--sp-4); }
  .t-rows { display: grid; gap: var(--sp-3); }
  .t-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .t-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-wx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-look__acts > .t-wear { flex: 1 1 auto; }
  /* карточки ленты одной высоты (MOTION-SPEC #6: коробки не прыгают), кнопки прижаты к низу */
  .t-card { display: flex; flex-direction: column; }
  .t-card > .t-look__acts { margin-top: auto; }
  .t-look__acts--solo { justify-content: center; }
  .w-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }

  .t-mc[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-mc[data-n="3"] { grid-template-columns: 55fr 45fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .t-mc[data-n="3"] > :first-child { grid-row: 1 / 3; }
  .t-mc[data-n="4"] { grid-template-columns: 50fr 25fr 25fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .t-mc[data-n="4"] > :nth-child(1) { grid-row: 1 / 3; }
  .t-mc[data-n="4"] > :nth-child(2) { grid-column: 2 / 4; }
  .t-mc[data-n="5"] { grid-template-columns: 40fr 30fr 30fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .t-mc[data-n="5"] > :nth-child(1) { grid-row: 1 / 3; }
  .t-mc[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }

  @media (max-width: 1099px) {
    .t-wx { display: none; }
  }
  @media (min-width: 1100px) {
    .t-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
    .t-pill { display: none; }
    .t-side > .k-section:first-child, .t-side > .t-wx:first-child { margin-top: 0; }
    .w-acts { flex-direction: row; justify-content: flex-end; }
    .w-acts > .k-btn { width: auto; flex: 1 1 0; }
  }
}