/* Compact, polished closet action sheet: do not let flex-basis grow buttons vertically. */
#closetActionsDialog .closet-actions-sheet { gap: 10px; padding-top: 10px; }
#closetActionsDialog .sheet-head { margin: 0 0 5px; }
#closetActionsDialog .sheet-head h2 { font-size: 27px; letter-spacing: -.035em; }
#closetActionsDialog .closet-actions-preview { min-height: 76px; padding: 8px 10px; gap: 12px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 18px; }
#closetActionsDialog .closet-actions-preview img { width: 60px; height: 60px; background: var(--lay); border-radius: 12px; }
#closetActionsDialog .closet-actions-preview span { font-size: 14px; font-weight: 750; }
#closetActionsDialog .closet-actions-sheet > button:not(.close-button) {
  flex: 0 0 auto; width: 100%; height: 53px; min-height: 53px; margin: 0; padding: 0 14px;
  border-radius: 15px; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.2; letter-spacing: -.01em;
}
#closetActionsDialog .closet-actions-sheet > .secondary-button { background: var(--surface-2); border: 1px solid var(--line); }
#closetActionsDialog .closet-actions-sheet > .danger-button { margin-top: 4px; background: var(--danger-bg); }
.closet-action-icon { flex: 0 0 29px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 600; }
.danger-button .closet-action-icon { background: transparent; color: var(--danger-ink); }
.closet-action-copy { flex: 1; text-align: left; }
.closet-action-chevron { color: var(--muted); opacity: .75; font-size: 20px; font-weight: 400; }
#closetActionDelete .closet-action-chevron { color: var(--danger-ink); }
@media (hover:hover) { #closetActionsDialog .closet-actions-sheet > button:hover { border-color: var(--hero); } }

/* Saved outfit: true image-first preview, tap an item to replace it with a ranked match. */
#outfitPreviewDialog { background: var(--surface); }
#outfitPreviewDialog .outfit-preview-sheet { padding-top: 8px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
#outfitPreviewDialog .sheet-head { gap: 10px; align-items: start; margin-bottom: 12px; }
#outfitPreviewDialog .sheet-head > div { min-width: 0; }
#outfitPreviewDialog .sheet-head h2 { margin: 2px 0 0; font: 500 clamp(24px,6vw,32px)/1.14 var(--serif); text-overflow: ellipsis; overflow: hidden; }
#outfitPreviewDialog .field-label { margin-bottom: 4px; }
.outfit-preview-stage { position: relative; overflow: hidden; border-radius: 20px; background: var(--lay); border: 1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.outfit-preview-scene { position: relative; width: 100%; height: clamp(278px,78vw,445px); background: linear-gradient(145deg,#e7e0d5,#d9d1c3 68%,#e5ded2); overflow: hidden; isolation: isolate; }
.outfit-preview-scene:before { content:""; position:absolute; left:8%; top:5%; width:84%; height:76%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.42),transparent 68%); pointer-events:none; }
.preview-piece { position: absolute; box-sizing:border-box; padding:0; border:2px solid transparent; background:none; border-radius:12px; min-width:0; cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }
.preview-piece img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(25,23,18,.12)); }
.preview-piece.selected { border: 2px solid var(--hero); background: rgba(255,255,255,.13); }
.preview-piece-label { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); padding:3px 7px; border-radius:99px; background:var(--surface); color:var(--ink); font-size:10px; font-weight:750; opacity:0; white-space:nowrap; text-transform:capitalize; }
.preview-piece.selected .preview-piece-label { opacity:1; }
.preview-add-shoes { position:relative; display:block; margin:-47px auto 11px; z-index:2; min-height:36px; padding:8px 15px; border-radius:99px; background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:0 4px 12px rgba(0,0,0,.09); font-size:12px; font-weight:750; }
.outfit-preview-extras { display:flex; gap:8px; flex-wrap:wrap; padding:10px; }
.outfit-preview-extras .preview-piece { position:relative; flex:0 0 72px; height:80px; background:rgba(255,255,255,.12); }
.outfit-preview-meta { margin:10px 2px 13px; color:var(--muted); font-size:12px; font-weight:650; }
.outfit-preview-groups { padding:8px 0; }
.preview-group-row { display:flex; flex-wrap:wrap; gap:7px; }
.outfit-preview-actions { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:13px; }
.outfit-preview-actions button { min-height:48px; height:48px; padding:0 15px; border-radius:14px; font-weight:750; flex:0 0 auto; }
.outfit-preview-actions .primary-button { width:auto; }
.outfit-preview-actions button[hidden] { display:none !important; }
#outfitPreviewMore { font-weight:750; font-size:12px; align-self:start; margin-top:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.outfit-preview-note { padding:11px 12px; margin:7px 0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:13px; line-height:1.5; }
.outfit-recommend-head { display:flex; justify-content:space-between; align-items:end; gap:8px; margin:20px 2px 10px; }
.outfit-recommend-head h3 { margin:3px 0 0; font:500 24px/1.1 var(--serif); }
.outfit-recommend-head > span { max-width:105px; color:var(--muted); font-size:11px; text-align:right; }
.outfit-recommend-list { display:flex; gap:10px; padding:0 1px 10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; }
.outfit-recommend-option { flex:0 0 117px; scroll-snap-align:start; border:1px solid var(--line); background:var(--surface-2); border-radius:15px; padding:7px; color:var(--ink); text-align:left; min-height:155px; }
.outfit-recommend-option img { display:block; width:100%; height:100px; object-fit:contain; border-radius:10px; background:var(--lay); }
.outfit-rec-name { display:block; margin-top:7px; font-size:11px; font-weight:750; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.outfit-rec-detail { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
@media(prefers-reduced-motion:reduce) { .preview-piece { transition:none; } }

/* Anchor-based editing: a tapped garment stays fixed; chips choose what to match. */
.preview-category-row { display:flex; gap:7px; overflow-x:auto; padding:0 1px 12px; scrollbar-width:none; }
.preview-category-row::-webkit-scrollbar { display:none; }
.preview-category-row .chip { flex:0 0 auto; min-height:35px; padding:7px 10px; font-size:11px; }

/* v50: focus follows the real transparent cutout, never its rectangular click target. */
.outfit-preview-scene .preview-piece { border: 0; background: transparent; overflow: visible; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.outfit-preview-scene .preview-piece.selected {
  border: 0; background: transparent; outline: none;
}
.outfit-preview-scene .preview-piece img { transition: transform .22s ease, filter .22s ease; transform-origin: center; }
.outfit-preview-scene .preview-piece.selected img { transform: scale(1.035); }
.outfit-preview-scene .preview-piece.cutout-ready.selected img {
  filter: drop-shadow(1px 0 0 rgba(45,70,56,.88))
    drop-shadow(-1px 0 0 rgba(45,70,56,.88))
    drop-shadow(0 1px 0 rgba(45,70,56,.88))
    drop-shadow(0 -1px 0 rgba(45,70,56,.88))
    drop-shadow(0 6px 10px rgba(40,71,54,.24));
}
.outfit-preview-scene .preview-piece.photo-fallback.selected img {
  filter: drop-shadow(0 9px 12px rgba(40,71,54,.14));
}
.outfit-preview-scene .preview-piece.selected { z-index: 12 !important; }
.outfit-preview-scene .preview-piece-label {
  left: 50%; bottom: -8px; transform: translate(-50%, 2px);
  padding: 5px 10px; border: 1px solid rgba(255,255,255,.35);
  border-radius: 50px; background: #283e32; color: #f5f0e8;
  font-size: 10px; letter-spacing: .035em; box-shadow: 0 5px 13px rgba(35,54,43,.17);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.outfit-preview-scene .preview-piece.selected .preview-piece-label { opacity: 1; transform: translate(-50%, 0); }
.outfit-preview-scene .preview-piece:focus-visible { outline: 2px solid #405f4c; outline-offset: 3px; border-radius: 10px; }
/* The long-press menu is independent of the normal image-first outfit preview. */
#outfitCardActions { background: var(--surface); }
#outfitCardActions .outfit-card-actions-sheet { padding-top: 9px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
#outfitCardActions .sheet-head { align-items: center; margin-bottom: 17px; }
#outfitCardActions .sheet-head h2 { font: 500 clamp(23px, 6vw, 30px)/1.15 var(--serif); margin: 3px 0 0; }
.outfit-card-actions-buttons { display: grid; gap: 9px; }
.outfit-card-actions-buttons > button {
  width: 100%; height: 53px; min-height: 53px; display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
  color: var(--ink); font: 750 14px/1.2 var(--sans); text-align: left; padding: 9px 13px;
}
.outfit-card-actions-buttons > button:active { transform: scale(.985); }
.outfit-card-actions-buttons > button:disabled { opacity: .55; }
.outfit-card-actions-buttons .danger-button { background: var(--danger-bg); color: var(--danger-ink); }
.outfit-action-glyph { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; background: var(--surface); border-radius: 10px; font-size: 19px; font-weight: 500; }
.outfit-action-arrow { margin-left: auto; opacity: .6; font-size: 22px; font-weight: 400; }
.outfit-action-note { color: var(--muted); margin: 12px 2px 0; font-size: 12px; line-height: 1.45; }
.outfit-card { touch-action: pan-y; -webkit-touch-callout: none; }
@media(prefers-reduced-motion:reduce) {
  .outfit-preview-scene .preview-piece img, .outfit-preview-scene .preview-piece-label,
  .outfit-card-actions-buttons > button { transition: none; }
}

/* Clarify that group badges are totals while the current category shows a subset. */
#groupBar .group-visible-count { color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }


.outfit-recommend-option.selected { box-shadow: inset 0 0 0 2px #52715a; }
/* v63: Wear this today is the main action; Edit outfit sits beside it. */
.outfit-preview-actions #outfitPreviewWear { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.outfit-preview-actions #outfitPreviewWear.is-worn,
.outfit-preview-actions #outfitPreviewWear:disabled { opacity:.62; }
.outfit-preview-actions #outfitPreviewEdit.secondary-button { flex:none; width:auto; }