/* Fitting room: the viewer (fit.js) and the gallery of a look. Colours come from app.css. */
.fr{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:1rem 0 1.6rem}
.fr button{font:inherit;color:inherit;cursor:pointer}
.fr [hidden]{display:none!important}

/* ---------- the stage */
.fr-stage{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.fr-view{position:relative;width:100%;max-width:420px;aspect-ratio:3/4;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;
  background:radial-gradient(90% 55% at 50% 100%,rgba(234,179,8,.13),transparent 70%),linear-gradient(180deg,#26231f 0%,#191715 62%,#100f0d 100%)}
.fr-view:active{cursor:grabbing}
.fr-view:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fr-view img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.fr-turn{display:flex;align-items:center;gap:10px}
.fr-turn button{width:44px;height:38px;border:1px solid var(--line2);border-radius:var(--r);background:var(--card2);color:var(--hi);font-size:1.5rem;line-height:1}
.fr-turn button:hover{background:var(--bar)}
.fr-side{min-width:8.5em;text-align:center;color:var(--tx2);font-size:.92rem}
.fr-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;text-align:center}
.fr-name{color:var(--hi);font-size:1.15rem;font-weight:500}
.fr-links{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:.92rem}
.fr-share{padding:4px 11px;border:1px solid var(--line2);border-radius:var(--r);background:none;color:var(--tx2);font-size:.86rem}
.fr-share:hover{background:var(--card2);color:var(--hi)}
.fr-hint{margin:0;color:var(--mu);font-size:.84rem;text-align:center}

/* ---------- who and what */
.fr-pick{display:flex;flex-direction:column;gap:12px;min-width:0}
.fr-box{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:8px;background:var(--card)}
.fr-lb{color:var(--hi);font-weight:500;font-size:.95rem}
.fr-races{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
.fr-races button{display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--in);text-align:left;font-size:.9rem;line-height:1.2}
.fr-races button:hover{border-color:var(--line2);background:var(--card2)}
.fr-races button[aria-checked="true"]{border-color:var(--ac);color:var(--hi);background:rgba(234,179,8,.12)}
.fr-seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:2px;padding:3px;border-radius:7px;background:var(--in)}
.fr-seg button{padding:5px 14px;border:0;border-radius:5px;background:none;font-size:.92rem}
.fr-seg button:hover{color:var(--hi);background:rgba(255,255,255,.06)}
.fr-seg button[aria-checked="true"]{background:var(--ac-bg);color:#fff}
.fr-chips{display:flex;flex-wrap:wrap;gap:5px}
.fr-chips button{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--in);font-size:.86rem}
.fr-chips button:hover{border-color:var(--line2);color:var(--hi)}
.fr-chips button[aria-pressed="true"]{border-color:var(--ac);background:rgba(234,179,8,.14);color:var(--hi)}
.fr-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fr-q{flex:1 1 160px;min-width:0;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--in);color:var(--hi);font:inherit;font-size:.92rem}
.fr-q:focus{outline:0;border-color:var(--ac)}
.fr-cnt{margin:0;color:var(--mu);font-size:.86rem}
.fr-none{margin:0;color:var(--mu)}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;list-style:none;margin:0;padding:0;max-height:560px;overflow:auto;overscroll-behavior:contain}
.fr-grid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;height:100%;padding:4px 4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--in);font-size:.8rem;line-height:1.2;text-align:center}
.fr-grid button:hover{border-color:var(--line2);background:var(--card)}
.fr-grid button[aria-pressed="true"]{border-color:var(--ac);background:rgba(234,179,8,.1);color:var(--hi)}
.fr-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.fr-grid .g{position:absolute;top:4px;right:4px}
@media (min-width:900px){
  .fr{grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start}
  .fr-stage{position:sticky;top:70px}
  .fr-grid{max-height:none;overflow:visible}
}

/* ---------- the list of links under the tool */
.fr-all details{margin:0 0 8px;padding:8px 12px;border-radius:var(--r);background:var(--card)}
.fr-all summary{cursor:pointer;color:var(--hi)}
.fr-all summary i{font-style:normal;color:var(--mu);font-size:.86em}
.fr-all .chips{margin:10px 0 2px}
.fr-all .chips a{background:var(--sheet)}

/* ---------- the page of a look: every character in it */
.fr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;list-style:none;margin:1.2rem 0;padding:0}
.fr-gal li{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;font-size:.9rem}
.fr-gal li>span{display:inline-flex;align-items:center;gap:5px;color:var(--tx2)}
.fr-fig{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;
  background:radial-gradient(90% 55% at 50% 100%,rgba(234,179,8,.11),transparent 70%),linear-gradient(180deg,#26231f 0%,#191715 62%,#100f0d 100%)}
.fr-fig:hover{border-color:var(--line2)}
.fr-fig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;object-position:50% 100%}