/* v117: My Wardrobe layout pass — same palette and components, calmer structure.
   Loaded only by my-wardrobe.html, after wardrobe-market.css (which the gallery pages also use). */

/* ── Hero ── */
.wd-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;padding:8px 0 20px}
.wd-hero h1{margin:6px 0 6px}
.wd-hero>div>p:not(.wd-eyebrow){max-width:560px;line-height:1.65}
.wd-stats{gap:8px;align-self:end}
.wd-stats li{min-width:96px;padding:10px 14px 9px;gap:1px}
/* The overview dashboard already shows these numbers. */
body[data-wd-tab=overview] #wd-stats{display:none}

/* ── Tabs: one tidy row (scrolls sideways on narrow screens), sticks while scrolling long lists ── */
.wd-tabs{position:sticky;top:0;z-index:6;display:flex;flex-wrap:nowrap;gap:4px;margin:18px 0 18px;padding:5px;border:1px solid #43566a77;border-radius:999px;background:#0a1522d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%;box-sizing:border-box}
.wd-tabs::-webkit-scrollbar{display:none}
.wd-tabs button{flex:none;min-height:38px;padding:0 18px;border-color:transparent;background:none;transition:background .18s,color .18s,border-color .18s}
.wd-tabs button:hover{color:#f6e9bd}
.wd-tabs button[aria-selected=true]{border-color:#ad985c}
.wd-section{animation:wd-fade .25s ease-out}
@keyframes wd-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wd-section>h2{margin:0 0 6px;font-size:20px}

/* ── Overview dashboard: rows of equal-height cards, no ragged gaps ── */
.wi-dash{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"hero hero now near" "value value ladder ladder" "treasure treasure dist dist" "year year year year";gap:14px;align-items:stretch}
.wi-strip{display:none!important}
.wi-hero{grid-area:hero}.wi-value{grid-area:value}.wi-now{grid-area:now}.wi-near{grid-area:near}.wi-ladder{grid-area:ladder}.wi-treasure{grid-area:treasure;align-self:start}.wi-dist{grid-area:dist;align-self:start}.wi-yearcard{grid-area:year}
.wi-card{padding:18px 20px;display:flex;flex-direction:column}
details.wi-card{display:block}
.wi-hero{justify-content:center}
.wi-now,.wi-near{justify-content:flex-start}
.wi-now .wd-ghost{margin-top:auto;align-self:flex-start}
.wi-now .wi-big{margin:2px 0 2px}
.wi-near-row{margin-top:auto}
.wi-value .wi-big{margin-bottom:12px}
.wi-ladder .wi-daily{margin-top:auto}
.wi-yearcard{display:grid}

/* ── Toolbars ── */
.wd-toolbar{align-items:end;padding:12px;border:1px solid #43566a66;border-radius:16px;background:#0b1626a6}
.wd-toolbar input[type=search]{min-height:44px}
.wd-status{margin:0 0 10px;color:var(--wd-muted);font-size:13px}

/* ── Item cards: one compact row — icon · name · action ── */
.wd-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.wd-item{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:10px 12px;min-height:72px;box-sizing:border-box}
.wd-item .wd-slot-icon{width:48px;height:48px}
.wd-item-copy strong{-webkit-line-clamp:1;display:-webkit-box}
.wd-item-toggle{grid-column:auto;justify-self:end;align-self:center;min-height:28px;padding:0 10px;font-size:11.5px;white-space:nowrap}
.wd-item.is-owned .wd-item-toggle:not(.is-on){background:none;border-color:#ffffff22;color:var(--wd-muted)}
.wd-item.is-owned .wd-item-toggle:not(.is-on):hover{border-color:#d7a7a799;color:#f0c4c4}

/* ── Glamour and budget cards ── */
.wd-rec-row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.wi-bgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.wd-rec-group,.wi-bgroup{padding:16px;border:1px solid #43566a55;border-radius:18px;background:#0b16268c;margin:0 0 16px}
.wd-rec-group h3,.wi-bgroup h3{margin-bottom:10px}
.wi-freeline{margin-bottom:16px}

/* ── Empty states ── */
.wd-empty{display:grid;justify-items:center;gap:10px;padding:32px 18px;background:#0b16268c}
.wd-empty p{margin:0;max-width:520px;line-height:1.65}

/* ── Tablet ── */
@media(max-width:1000px){
 .wi-dash{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"hero hero" "now near" "value value" "ladder ladder" "treasure treasure" "dist dist" "year year"}
}
@media(max-width:900px){.wd-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.wd-toolbar>:first-child{grid-column:1/-1}}

/* ── Phone ── */
@media(max-width:600px){
 .wd-hero{grid-template-columns:1fr;padding:4px 0 14px;gap:12px}
 .wd-hero h1{font-size:26px;margin:2px 0 4px}
 .wd-hero>div>p:not(.wd-eyebrow){font-size:13.5px}
 .wd-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.wd-stats li{padding:8px 10px}
 .wd-tabs{display:flex;width:auto;margin:14px -14px 14px;padding:5px 10px;border-radius:0;border-left:0;border-right:0}
 .wd-tabs button{min-height:36px;padding:0 14px;font-size:13.5px}
 .wi-dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-template-areas:"hero hero" "now near" "value value" "ladder ladder" "treasure treasure" "dist dist" "year year"}
 .wi-card{padding:14px}
 .wi-hero .wi-big{font-size:28px}
 .wi-now .wi-big{font-size:24px}
 .wi-now .wd-note{font-size:12px}
 .wi-near-row{grid-template-columns:1fr;gap:6px}.wi-near-btn{padding:8px 10px}.wi-near-btn strong{font-size:20px}
 .wd-toolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
 .wd-toolbar label{font-size:11px}
 .wd-toolbar select{min-height:38px;font-size:13px;padding:0 6px}
 .wd-grid{grid-template-columns:1fr;gap:6px}
 .wd-item{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:8px 10px;min-height:62px}
 .wd-item .wd-slot-icon{width:42px;height:42px}
 .wd-item-tags{display:none}
 .wd-rec-group,.wi-bgroup{padding:12px;border-radius:16px}
 .wi-bcard{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto}
 .wi-bcard .wd-rec-photo{aspect-ratio:auto;height:100%;min-height:140px}
 .wi-bcard-body{padding:10px}
 .wi-kv{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.wd-section{animation:none}}