/* Wearwell v65 Closet: visual grid from the owner's "Option 2" reference.
   Header with a hanger-plus add button, round category icons, compact tools,
   and soft two-column cards with a favourite star and a ⋮ options button.
   Photo tiles stay beige in dark mode, like the Home board. */
.view[data-view="closet"] {
  --closet-green: #21392d;
  --closet-card: var(--surface);
  --closet-tile: #ece5da;
  --closet-circle: var(--surface);
  --closet-shadow: 0 6px 18px rgba(64, 52, 38, .09), 0 1px 2px rgba(64, 52, 38, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .view[data-view="closet"] {
    --closet-green: #2f4a3b; --closet-card: #232621; --closet-tile: #dcd5c9;
    --closet-circle: #2a2d28; --closet-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  }
}
:root[data-theme="dark"] .view[data-view="closet"] {
  --closet-green: #2f4a3b; --closet-card: #232621; --closet-tile: #dcd5c9;
  --closet-circle: #2a2d28; --closet-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* Header: title left, add button right */
.view[data-view="closet"] .closet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.view[data-view="closet"] .closet-head h1 { display: flex; align-items: center; gap: 10px; }
.view[data-view="closet"] .closet-add {
  width: 58px; height: 58px; display: grid; place-items: center; padding: 0;
  background: var(--closet-green); color: #f4efdf; border: 0; border-radius: 50%;
  box-shadow: 0 8px 20px rgba(24, 43, 32, .28);
}
.view[data-view="closet"] .closet-add:hover { transform: none; }
.view[data-view="closet"] .closet-add svg { display: block; margin: 1px 0 0 1px; }
.view[data-view="closet"] .closet-add .add-plus { stroke: #f4efdf; }

/* Category circles */
.view[data-view="closet"] .closet-cats {
  /* Compact, left-aligned like the reference: columns never stretch past 74px. */
  display: grid; grid-template-columns: repeat(var(--cats, 5), minmax(0, 74px)); justify-content: start; gap: 4px;
  margin: 0 0 10px; padding: 4px 0 6px;
}
.view[data-view="closet"] .closet-cats.scrolls {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64px;
  overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; scroll-snap-type: x proximity;
}
.view[data-view="closet"] .closet-cats::-webkit-scrollbar { display: none; }
.view[data-view="closet"] .cat-circle {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; color: var(--ink); scroll-snap-align: start;
}
.view[data-view="closet"] .cat-ico {
  position: relative; width: min(56px, 100%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--closet-circle); color: var(--ink); box-shadow: var(--closet-shadow);
  transition: background .2s, color .2s, transform .2s;
}
.view[data-view="closet"] .cat-circle.active .cat-ico { background: var(--closet-green); color: #f4efdf; box-shadow: 0 8px 18px rgba(24, 43, 32, .26); }
.view[data-view="closet"] .cat-label { font-size: clamp(10.5px, 3vw, 12px); font-weight: 650; line-height: 1.15; white-space: nowrap; color: var(--ink); opacity: .88; }
.view[data-view="closet"] .cat-circle.active .cat-label { opacity: 1; font-weight: 800; }
.view[data-view="closet"] .cat-label-short { display: none; }
@media (max-width: 379px) {
  .view[data-view="closet"] .closet-cats.crowded .cat-label:not(.cat-label-short):has(+ .cat-label-short) { display: none; }
  .view[data-view="closet"] .closet-cats.crowded .cat-label-short { display: block; }
}
.view[data-view="closet"] .closet-cats.tight .cat-label:not(.cat-label-short):has(+ .cat-label-short) { display: none; }
.view[data-view="closet"] .closet-cats.tight .cat-label-short { display: block; }
.view[data-view="closet"] .cat-badge {
  position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  background: var(--warn-bg); color: var(--warn-ink); font: 800 11px/20px var(--sans); text-align: center;
}
.view[data-view="closet"] .cat-circle:focus-visible { outline: none; }
.view[data-view="closet"] .cat-circle:focus-visible .cat-ico { outline: 3px solid var(--sage); outline-offset: 2px; }
.view[data-view="closet"] #subFilters { padding-bottom: 10px; }

/* Tools: search + Multi-scan, Wore and Sort */
.view[data-view="closet"] .closet-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.view[data-view="closet"] .closet-tools .search-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }
.view[data-view="closet"] .closet-tools .search-input { height: 46px; padding-block: 0; border-radius: 99px; background: var(--closet-circle); border-color: transparent; box-shadow: var(--closet-shadow); }
.view[data-view="closet"] .tool-circle {
  flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--closet-circle); color: var(--ink); box-shadow: var(--closet-shadow);
}
.view[data-view="closet"] .tool-circle svg { display: block; }
.view[data-view="closet"] #openWore.active { background: var(--closet-green); color: #f4efdf; }
.view[data-view="closet"] .group-row { padding-bottom: 12px; }

/* Cards */
.view[data-view="closet"] .closet-grid { gap: 12px; }
.view[data-view="closet"] .item-wrap { position: relative; min-width: 0; }
.view[data-view="closet"] .item-card {
  display: flex; flex-direction: column; height: 100%; padding: 7px; border-radius: 22px;
  background: var(--closet-card); box-shadow: var(--closet-shadow); color: var(--ink);
}
.view[data-view="closet"] .item-photo-box { position: relative; display: block; border-radius: 17px; overflow: hidden; background: var(--closet-tile); }
.view[data-view="closet"] .item-card .item-photo { aspect-ratio: 1.05; border-radius: 0; background: var(--closet-tile); }
.view[data-view="closet"] .item-card .item-photo.is-cut { padding: 10px; object-fit: contain; background: var(--closet-tile); }
.view[data-view="closet"] .item-card.picked .item-photo { outline: 0; }
.view[data-view="closet"] .item-card.picked .item-photo-box { box-shadow: inset 0 0 0 3px var(--hero); }
.view[data-view="closet"] .item-meta { padding: 9px 40px 5px 9px; }
.view[data-view="closet"] .item-meta strong { font-size: 14px; font-weight: 700; }
.view[data-view="closet"] .item-meta span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; margin-top: 1px; }
.view[data-view="closet"] .item-star {
  position: absolute; top: 15px; right: 15px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(124, 121, 113, .62); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, transform .2s;
}
.view[data-view="closet"] .item-star.on { background: var(--closet-green); color: #f1d38a; }
.view[data-view="closet"] .item-star:active { transform: scale(.9); }
.view[data-view="closet"] .item-more {
  position: absolute; right: 7px; bottom: 7px; z-index: 3; width: 40px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink);
}
.view[data-view="closet"] .item-more:active { background: var(--surface-2); }
.view[data-view="closet"] .badge-check { top: 15px; left: 15px; }
.view[data-view="closet"] .badge-fav { display: none; }
.view[data-view="closet"] .wore-tick { z-index: 2; }

@media (max-width: 360px) {
  .view[data-view="closet"] .closet-add { width: 52px; height: 52px; }
  .view[data-view="closet"] .tool-circle { flex-basis: 42px; width: 42px; height: 42px; }
  .view[data-view="closet"] .closet-tools .search-input { height: 42px; }
  .view[data-view="closet"] .closet-tools { gap: 6px; }
}
@media (min-width: 640px) {
  .view[data-view="closet"] .closet-cats:not(.scrolls) { grid-template-columns: repeat(var(--cats, 5), 80px); }
}