/* Outfit builder + Outfits list (Step 7).
   Reuses .head/.sub/.notice/.row/.rows/.piece-name/.actions from closet.css,
   and the .weave-*/.mark placeholder pattern from the Closet tile. */

.build-slots { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }

.build-slot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
}
.build-slot-empty {
  border-style: dashed;
  color: inherit;
  text-decoration: none;
  min-height: var(--tap);
}
.build-slot-pick {
  width: 100%;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.build-slot-label {
  flex: none;
  width: 52px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  color: var(--ink-faint);
}
.build-slot-add { font-size: var(--fs-body); color: var(--ink-faint); }

.build-slot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); color: inherit; text-decoration: none; }
.build-slot-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-slot-meta { font-family: var(--mono); font-size: var(--fs-tile-meta); color: var(--ink-faint); }

.build-slot-remove {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  border: var(--hairline) solid var(--line-strong);
  background: none;
  color: var(--ink-muted);
  font-size: var(--fs-heading);
}

.build-footer { margin-top: var(--s5); }
.build-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
.build-total-label { font-family: var(--mono); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--track-label); color: var(--ink-faint); }
.build-total-value { font-family: var(--mono); font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--ink); font-variant-numeric: tabular-nums; }

/* The no-photo placeholder for one outfit item, reusing the weave pattern. */
.outfit-thumb {
  flex: none;
  width: 52px;
  height: 64px;
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-field);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--s2);
}
.outfit-thumb .mark { font-size: var(--fs-heading); line-height: 1; }
/* With a photo: the photo fills the box (see .tile-photo in closet.css) */
.outfit-thumb-photo { position: relative; overflow: hidden; padding: 0; }
.outfit-thumb-sm { flex: 1; width: auto; height: auto; aspect-ratio: 3 / 4; }

/* Today's pick, at the top of the Closet screen */
.ootd-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0;
  padding: var(--s3);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
}
.ootd-thumbs { display: flex; flex: none; gap: var(--s1); }
.ootd-thumbs .outfit-thumb-sm { flex: none; width: 36px; height: 46px; aspect-ratio: auto; }
.ootd-info { min-width: 0; }
.ootd-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  color: var(--warn);
}
.ootd-name {
  margin-top: var(--s1);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outfit-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.outfit-card { border: var(--hairline) solid var(--line); border-radius: var(--r-card); padding: var(--s4); }
.outfit-card-link { display: block; color: inherit; text-decoration: none; }
.outfit-thumbs { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.outfit-card-name { font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--ink); }
/* wrap (button drops below) rather than squeezing "worn Nx . last DATE"
   into a narrow column, which wrapped mid-date awkwardly */
.outfit-card-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s3); }
/* nowrap so a long "worn Nx . last DATE" pushes the button to its own line
   (via the row's flex-wrap) instead of breaking mid-date to stay beside it */
.outfit-card-meta { flex: 1; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-faint); }
.wore-btn {
  flex: none;
  height: var(--tap);
  padding: 0 var(--s4);
  border: none;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
}
.wore-btn:active { transform: scale(var(--tap-scale)); }

/* ---- Shopping suggestions: "Fill the gaps" (Closet), "Complete the look"
   (Build). Only drawn while the preview switch is on (see photos.js).
   The commission note sits right under each card's button, in words
   (never a badge or color alone), one type step below the reason text. */
.shop { margin: var(--s3) 0; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); }
.shop-title {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  color: var(--ink-faint);
}
.shop-toggle {
  flex: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s2);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
  cursor: pointer;
}
.shop-list { display: flex; flex-direction: column; gap: var(--s3); }
/* Closet: a sideways-scrolling row, so the closet grid stays near the top */
.shop-row {
  flex-direction: row;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--s1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.shop-row::-webkit-scrollbar { display: none; }
/* Sideways row: a little tighter, reason kept to two lines, so the grid stays close */
.shop-row .shop-card { padding: var(--s3) var(--s4); }
.shop-row .shop-card-reason {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shop-row .shop-card, .shop-row .shop-card-skel { flex: none; width: var(--shop-card-w); scroll-snap-align: start; }

.shop-card, .shop-card-skel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
}
.shop-card-title { margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--ink); overflow-wrap: anywhere; }
.shop-card-reason { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-muted); }
.shop-card-search {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-tile-meta);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.shop-card-actions { margin-top: auto; padding-top: var(--s1); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.shop-btn {
  min-height: var(--tap);
  padding: 0 var(--s4);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.shop-btn:active { transform: scale(var(--tap-scale)); }
.shop-btn:focus-visible { outline: calc(var(--hairline) * 2) solid var(--warn); outline-offset: var(--hairline); }
.shop-disclosure { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-muted); }
/* Inline padding makes the link easier to hit without changing the line spacing */
.shop-disclosure a { padding: var(--s2) 0; color: var(--ink); text-decoration: underline; }

/* Loading: same card shape, grey bars (no spinners) */
.shop-card-skel { min-height: calc(var(--tap) * 4); }
.shop-card-skel .skel-line:first-child { margin-top: 0; }
.shop-skel-btn { width: 60%; height: var(--tap); margin-top: auto; border-radius: var(--r-pill); }

/* No suggestions / error / too many requests: plain words, never blocks the screen */
.shop-note { margin: 0; padding: var(--s3) var(--s4); border: var(--hairline) dashed var(--line-strong); border-radius: var(--r-card); color: var(--ink-muted); font-size: var(--fs-body-sm); }
.shop-note-error { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.shop-note-error .error-icon { color: var(--ink-muted); }