.outfit-view .mobile-result{display:none!important}
/* The preview on a page of its own, inside the outfit card of the community tab: no page margins, and no heading
   (the card has one). */
.outfit-card-page{padding-bottom:0}.outfit-card-page main{max-width:none;margin:0;padding:0 0 14px}
/* The card's page shows no scrollbar and keeps no room for one (the site's way: scrolling without a bar). */
html:has(.outfit-card-page),.outfit-card-page{scrollbar-width:none}
html:has(.outfit-card-page)::-webkit-scrollbar,.outfit-card-page::-webkit-scrollbar{display:none}
/* The frame that holds the card has its own line: the boxes inside it keep none of their own, side by side with it. */
.outfit-card-page .outfit-layout>.section{border:0;border-radius:0;box-shadow:none}.outfit-card-page .outfit-heading{display:none}
.outfit-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0}.outfit-heading h1{margin:8px 0}.outfit-heading p{color:var(--muted)}.outfit-layout{display:grid;grid-template-columns:minmax(360px,0.9fr) minmax(380px,1.1fr);gap:24px;align-items:start}.outfit-layout .section{padding:24px;margin:0}.outfit-preview{position:sticky;top:20px}.outfit-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.outfit-preview-top h2{margin:0;font-size:22px}.outfit-presets{display:flex;gap:7px}.outfit-presets button{padding:8px 12px;font-size:13px}.outfit-stage{background:#18191e;border:1px solid var(--line);border-radius:10px;overflow:hidden}.outfit-stage[data-background=light]{background:#e2e5eb}.outfit-stage[data-background=grid]{background-color:#c7cbd3;background-image:linear-gradient(45deg,#e5e7ec 25%,transparent 25%),linear-gradient(-45deg,#e5e7ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7ec 75%),linear-gradient(-45deg,transparent 75%,#e5e7ec 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.outfit-stage canvas{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;image-rendering:pixelated}.outfit-controls{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:10px;margin-top:16px}.outfit-controls label,.outfit-search label{font-size:13px}.outfit-controls select{width:100%;min-width:0}.outfit-toggles{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:16px}.outfit-toggles label,.outfit-favorite-filter{display:flex;align-items:center;gap:5px;font-size:13px}.outfit-toggles input,.outfit-favorite-filter input{width:16px;height:16px;min-height:0;margin:0;accent-color:#a0a6b2}.outfit-toggles button{font-size:13px;padding:8px 12px}.outfit-status{font-size:12px;color:var(--muted);min-height:20px;margin:12px 0}.outfit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.outfit-actions button{padding:10px 14px;font-size:14px}.outfit-preview h3{font-size:15px;margin:18px 0 10px}.outfit-equipped>div{display:grid;grid-template-columns:78px minmax(0,1fr) 38px;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.outfit-equipped button{font-size:12px;background:transparent;padding:4px 0;text-align:left;color:var(--muted)}.outfit-equipped span{overflow-wrap:anywhere}.outfit-slots{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.outfit-slots button{padding:9px 14px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px}.outfit-slots button[aria-pressed=true]{background:var(--selected);color:var(--button-text);border-color:#a0a6b2}.outfit-search{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}.outfit-favorite-filter{margin:16px 0 8px}.outfit-count{font-size:13px;color:var(--muted);margin-bottom:12px}.outfit-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:640px;overflow:auto;scrollbar-gutter:stable;padding-right:8px}.outfit-item{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;min-width:0;background:var(--input)}.outfit-item.selected{border-color:#a0a6b2;background:#343740}.outfit-item-choice{flex:1;min-width:0;text-align:left;background:transparent;padding:12px;color:var(--ink);font-weight:400}.outfit-item-choice strong{display:block;font-size:13px;overflow-wrap:anywhere}.outfit-item-choice small{display:block;color:var(--muted);font-size:11px;margin-top:6px}.outfit-star{background:transparent;color:#b9bec9;padding:10px;font-size:20px}.outfit-star[aria-pressed=true]{color:#e8c887}.outfit-library [data-more]{margin-top:16px}.outfit-closet{margin-top:24px;padding:24px}.outfit-closet .outfit-preview-top span{font-size:12px;color:var(--muted)}[data-closets]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.outfit-closet-card{padding:16px;border:1px solid var(--line);border-radius:8px}.outfit-closet-card h3{font-size:16px;margin:0 0 8px}.outfit-closet-card p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:12px;overflow-wrap:anywhere}.outfit-closet-card button{font-size:13px;padding:8px 14px}.outfit-credit{font-size:12px;color:var(--muted);margin:20px 0}.outfit-loading-error{padding:25px;border:1px solid var(--line);border-radius:8px}
.outfit-toggles label,.outfit-favorite-filter{flex-direction:row}
.outfit-categories{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:0 0 20px}.outfit-categories button{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:8px 2px 12px;font-size:16px;white-space:nowrap}.outfit-categories button[aria-pressed=true]{color:var(--ink);border-bottom-color:#a0a6b2}.outfit-slots button[hidden]{display:none}
.outfit-item-choice{display:flex;align-items:center;gap:10px;padding:10px}
.outfit-item-thumb{position:relative;display:block;width:64px;height:64px;flex:0 0 64px;border-radius:7px;background:#e9ecf1;overflow:hidden}
.outfit-item-thumb canvas{display:block;width:64px;height:64px;image-rendering:pixelated}
.outfit-item-thumb[data-state=loading]::after{content:'· · ·';position:absolute;inset:0;display:grid;place-items:center;color:#818997;font-size:12px}
.outfit-item-thumb[data-state=unavailable]::after{content:'—';position:absolute;inset:0;display:grid;place-items:center;color:#818997;font-size:14px}
.outfit-item-copy{display:block;min-width:0;line-height:1.5}
.outfit-item-copy .outfit-item-meta{font-size:10px;margin:0 0 3px;color:var(--muted)}
.outfit-item-copy>small:last-child{margin-top:4px}
.outfit-star{flex-shrink:0}
@media(min-width:901px) and (max-width:1200px){.outfit-items{grid-template-columns:1fr}}
@media(max-width:900px){.outfit-layout{grid-template-columns:1fr}.outfit-preview{position:static}.outfit-items{max-height:500px}.outfit-stage canvas{max-height:360px}[data-closets]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:500px){.outfit-heading{align-items:flex-start;flex-direction:column;gap:10px}.outfit-layout .section,.outfit-closet{padding:16px}.outfit-items{grid-template-columns:1fr}.outfit-slots{gap:6px}.outfit-slots button{padding:8px 11px;font-size:13px}.outfit-preview-top{flex-wrap:wrap}.outfit-controls{gap:7px}.outfit-controls select{padding:9px 5px;font-size:12px}.outfit-search{grid-template-columns:minmax(0,1fr) 98px}[data-closets]{grid-template-columns:1fr}}
.outfit-equipped-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.outfit-equipped-heading h3{margin:0}
.outfit-dye{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.outfit-preview .outfit-dye h3{margin:0 0 10px}.outfit-dye-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:8px}.outfit-dye-slot{font-size:12px;color:var(--muted)}.outfit-dye-swatches{display:flex;flex-wrap:wrap;gap:5px}.outfit-dye-swatch{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:0;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--swatch)}.outfit-dye-swatch[aria-pressed=true]{border-color:var(--ink)}.outfit-dye-swatch[aria-pressed=true]::after{content:"";width:6px;height:12px;margin-top:-3px;border:solid var(--tick);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}.outfit-dye-note{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.outfit-equipped-toggle{display:none;min-height:44px;padding:10px 14px;font-size:13px}
@media(max-width:900px){.outfit-equipped-toggle{display:inline-flex;align-items:center;justify-content:center}}
.outfit-pip{display:none}
.outfit-library-views{display:flex;gap:8px;margin-bottom:24px}
.outfit-library-views button{flex:1;min-height:44px;padding:10px 12px;background:var(--input);border:1px solid var(--line);color:var(--muted);font-size:15px}
.outfit-library-views button[aria-pressed=true]{background:var(--selected);border-color:#a0a6b2;color:var(--button-text)}
[data-library-panel][hidden],.monthly-cards [hidden],[data-monthly-more][hidden]{display:none}
.monthly-heading h2{margin:0 0 8px;font-size:23px}
.monthly-heading p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.7}
.monthly-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.monthly-filters label{font-size:12px;min-width:0}
.monthly-filters label:first-child{grid-column:1/-1}
.monthly-filters input,.monthly-filters select{width:100%;min-width:0}
.monthly-source,.monthly-note,.monthly-alias{color:var(--muted);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.monthly-source a{color:var(--ink);text-underline-offset:3px}
.monthly-feedback{font-size:13px;line-height:1.7;color:var(--ink)}
.monthly-feedback:empty{display:none}
.monthly-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.monthly-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--input);min-width:0}
.monthly-image{display:flex;align-items:center;justify-content:center;aspect-ratio:1.76;background:#202328;overflow:hidden;color:var(--muted);font-size:13px}
.monthly-image img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.monthly-card-body{padding:14px}
.monthly-date{margin:0 0 7px;color:var(--muted);font-size:11px}
.monthly-card h3{margin:0 0 10px;font-size:17px;overflow-wrap:anywhere}
.monthly-alias{margin:0 0 8px}
.monthly-wear{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.monthly-wear button{flex:1;min-height:44px;padding:8px 6px;font-size:12px;white-space:nowrap}
.monthly-card details{border-top:1px solid var(--line);margin-top:14px}
.monthly-card summary{cursor:pointer;padding:14px 0;font-size:13px}
.monthly-components{list-style:none;margin:0;padding:0}
.monthly-components li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:10px 0;border-top:1px solid var(--line);font-size:12px;overflow-wrap:anywhere}
.monthly-components li>span{flex:1 1 100%}
.monthly-components small{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}
.monthly-components button{min-height:36px;padding:5px 0;font-size:12px;text-align:left}
[data-monthly-more]{margin-top:18px;min-height:44px}
@media(min-width:901px) and (max-width:1200px){.monthly-cards{grid-template-columns:1fr}}
@media(max-width:500px){.monthly-cards{grid-template-columns:1fr}.monthly-image img{max-height:230px}.monthly-card-body{padding:16px}.monthly-wear button{font-size:13px}}
@media(max-width:900px){
  .outfit-pip:not([hidden]){display:block;position:fixed;z-index:60;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(42vw,180px);border:1px solid #656e7e;border-radius:12px;background:var(--surface);box-shadow:0 6px 24px #0006;overflow:hidden}
  .outfit-pip-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;padding-left:12px;font-size:12px;font-weight:650}
  .outfit-pip-heading button{min-height:44px;min-width:44px;padding:8px;background:transparent;color:var(--muted);font-size:12px}
  .outfit-pip-stage{display:block;width:100%;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:#18191e}
  .outfit-pip-stage[hidden]{display:none}
  .outfit-pip-stage canvas{width:100%;height:auto;max-height:none}
}
/* The button that brings the browser's outfits over to the account's closet spans the closet's columns. */
.outfit-closet-bring{grid-column:1/-1;margin:0}
/* Laid out in even rows (the owner's request of 2026-10-15): the four toggles of the preview in one row of boxes,
   each as wide as its words with the room left shared out equally; the closet's actions in one row of three equal
   buttons under them; the parts of the body in rows of five. Where the preview's column is narrow (a phone, and a
   window of 901~1200px, where the preview stands beside the list) the toggles take two rows of two. */
.outfit-toggles{display:flex;flex-wrap:nowrap;gap:8px}
.outfit-toggles input{flex:none}
.outfit-toggles>*{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.outfit-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.outfit-actions button{width:100%;min-width:0;min-height:44px;margin:0;padding:8px;font-size:14px}
.outfit-actions .text-button{border:1px solid var(--line);border-radius:8px;text-decoration:none}
.outfit-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.outfit-slots button{min-width:0;padding-inline:4px;white-space:nowrap}
@media(max-width:520px),(min-width:901px) and (max-width:1200px){.outfit-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Small phones: the names a little smaller so each stays inside its box, the checkboxes kept at their size. The font
   size is also given through the variable the page's common rule for tabs reads (navigation.css, read after this
   sheet); the outfit card's page has no such rule. */
@media(max-width:400px){.outfit-slots{gap:4px;--subtab-font-size:12px}.outfit-slots button{padding-inline:1px;font-size:12px}}
@media(max-width:340px){.outfit-slots{--subtab-font-size:11px}.outfit-slots button{font-size:11px;letter-spacing:-.02em}}
@media(max-width:360px){.outfit-toggles{gap:6px}.outfit-toggles>:is(label,button){gap:4px;padding-inline:4px;font-size:12px}}