/* stage4b.css — гардероб веб-приложения (волна 4б, screens/wardrobe.js).
 * Правила (как stage3b.css): цвета — только var(--…), currentColor,
 * transparent и color-mix(… var(--…) …); длительности — var(--dur-*);
 * всё нажимаемое не выделяется долгим нажатием (user-select +
 * -webkit-user-select + -webkit-touch-callout — иначе iPhone выделяет текст
 * под пальцем); тап-цели ≥ 44 px; prefers-reduced-motion гасит движения.
 * Окрас кота на портретах — portraits.js (WebKit: SVG-фильтр, не CSS). */

.wd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 var(--gutter) 24px; }
.scr-wardrobe.is-dirty .wd-body { padding-bottom: calc(var(--tap) + 40px + var(--safe-b)); }

/* Портрет-примерочная. Прилипает полоса вкладок с мини-котом (не большой
 * портрет: на 360 он съедал полэкрана, и вещей было не видно). */
.wd-stage { display: grid; justify-items: center; gap: 4px; padding: 6px 0 4px; }
.wd-cat { display: grid; place-items: center; width: 168px; height: 168px; }
.wd-status {
  margin: 0; min-height: 2.6em; max-width: 34ch; color: var(--ink-dim); font-size: 13px; font-weight: 800;
  line-height: 1.3; text-align: center; overflow-wrap: anywhere;
}
.wd-status.is-dirty { color: var(--lav); }
.wd-status.is-locked { color: var(--warm-ink); }

/* Вкладки слотов: лента чипов с прокруткой вбок; слева — мини-кот примерки. */
.wd-rail {
  position: sticky; top: calc(var(--hdr-h) + var(--safe-t) + 52px); z-index: 15;
  display: flex; align-items: center; gap: 6px; margin: 0 calc(-1 * var(--gutter));
  padding: 4px 0 6px var(--gutter); background: var(--bg);
}
.wd-mini { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.wd-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter) 2px 0; }
.wd-tabs::-webkit-scrollbar { display: none; }
.wd-tab {
  position: relative; flex: none; min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--raise-2); color: var(--ink-mid); box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 14px; font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.wd-tab[aria-pressed="true"] { background: var(--accent-wash-3); color: var(--panel-fg); box-shadow: none; }
.wd-tab.has-on::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--lav);
}

/* Сетка вещей: 3 в ряд на телефоне, 4 — шире. */
.wd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wd-grid > .es { grid-column: 1 / -1; }
.wd-item {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; min-height: var(--tap);
  padding: 8px 4px 10px; border: 0; border-radius: var(--r-4); cursor: pointer; font: inherit;
  background: var(--raise); color: var(--panel-fg); box-shadow: inset 0 0 0 1px var(--line);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: box-shadow var(--dur-fast) linear, background-color var(--dur-press) linear;
}
.wd-item:active { background: var(--accent-wash-2); }
.wd-item.is-on { box-shadow: inset 0 0 0 2px var(--lav); background: var(--accent-wash); }
.wd-item[class*=" t-"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tier) 45%, transparent); }
.wd-item[class*=" t-"].is-on { box-shadow: inset 0 0 0 2px var(--lav); }
.wd-item-av { display: grid; place-items: center; width: 60px; height: 60px; }
.wd-item.is-locked .wd-item-av { opacity: .55; }
.wd-item-n { font-size: 12.5px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.wd-item-lk { color: var(--ink-dim); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }

.wd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.wd-cap {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--lav);
  font-size: 13.5px; font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.wd-cap svg { width: 20px; height: 20px; }

/* «Вернуть | Надеть» — над таб-баром, пока примерка отличается от надетого. */
.wd-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 30;
  display: flex; gap: 8px; padding: 8px calc(var(--gutter) + var(--safe-r)) 8px calc(var(--gutter) + var(--safe-l));
  background: var(--bar); box-shadow: 0 -1px 0 var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: wd-bar-in var(--dur-base) var(--ease-out);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.wd-bar > .btn { flex: 1 1 0; min-width: 0; }
.wd-bar > .wd-save { flex: 2 1 0; }
@media (min-width: 720px) { .wd-bar { left: calc(50% - 280px); right: auto; width: 560px; border-radius: var(--r-4); } }
@keyframes wd-bar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Дверь-форма Ошейника («Подключить компьютер» — POST /web/link-desktop). */
.osh-door-f { display: grid; margin: 0; }
.osh-door-f > .osh-door {
  width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  .wd-bar { animation: none; }
  .wd-item, .wd-tab { transition: none; }
}