/* MODEL STUDIO ??casting page (PROTOTYPE 2026-11-03). Scoped to .ms / .ms-tray; uses V1 tokens only.
   Spec: docs/MODEL_STUDIO_ART_DIRECTION.md */
.ms{--ms-r:15px;--ms-surface:#f2f2f2}
.ms .ms-title{font:500 15px/1 Anybody,Arial,sans-serif;font-stretch:86%;background:var(--pill);letter-spacing:.01em}
.ms .pill{width:100%;background:var(--pill);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.ms a.pill:hover,.ms button.pill:hover{background:var(--pill-hi)}
.ms .info .pill{background:rgba(255,255,255,.85)}   /* a #F5F5F5 pill disappears on the #F4F4F4 panel */
.ms .info .pill:hover{background:#fff}
body:has(.ms-tray) .foot{padding-bottom:70px}
.ms .caret{transform:rotate(135deg)}
.ms-side{grid-column:1/2;position:sticky;top:calc(var(--m) * 2 + var(--pill-h));display:flex;flex-direction:column;gap:var(--m)}
.ms-head{display:flex;flex-direction:column;gap:var(--m)}
.ms .info .label{margin-bottom:6px}
.ms-why{margin-top:8px!important;color:var(--mute)}

/* view list: quiet rows, the active one in ink and underlined */
.ms-views{list-style:none;padding:0!important}
.ms-views button{display:flex;justify-content:space-between;width:100%;padding:5px 0;color:#555;border-bottom:1px solid var(--sheet-rule)}
.ms-views button span{color:var(--mute);font-variant-numeric:tabular-nums}
.ms-views button:hover,.ms-views button[aria-pressed="true"]{color:var(--ink)}
.ms-views button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ms-hint{margin-bottom:10px!important;color:#555}
.ms-select[aria-pressed="true"]{background:var(--pill-hi)}

/* ---------- roster ---------- */
.ms-roster{grid-column:2/5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--m)}
@media (min-width:1180px){ .ms-roster{grid-template-columns:repeat(4,minmax(0,1fr))} }  /* 20 = five even rows of four */
.ms-tile{display:block}
.ms-img{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--ms-r);overflow:hidden;background:var(--ms-surface)}
.ms-img img,.ms-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ms-img video{opacity:0;transition:opacity .6s ease}
.ms-tile.playing video{opacity:1}
.ms-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 2px 0}
.ms-cap b{font:500 14px/1 Anybody,Arial,sans-serif;font-stretch:86%;letter-spacing:.02em}
.ms-cap span{color:var(--mute);font-size:11.5px}
/* V2.1: the wall moves by itself; hover and focus only bring up the caption detail (always shown on touch screens) */
@media (hover:hover){ .ms-cap span{opacity:0;transition:opacity .25s ease} .ms-tile:hover .ms-cap span,.ms-tile:focus-visible .ms-cap span{opacity:1} }
/* framing groups: a quiet label row across the grid */
.ms-group{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:0;padding-top:6px;border-top:1px solid var(--line,rgba(0,0,0,.12))}
.ms-group span:last-child{color:var(--mute);font-size:11.5px}
.ms-roster .ms-group:not(:first-child){margin-top:14px}
.ms-tile:hover .ms-cap b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ms-tile:focus-visible{outline:none}
.ms-tile:focus-visible .ms-img{outline:1px solid var(--ink);outline-offset:3px}
.ms-rv{display:block;padding:3px 2px 0;font-size:10px;color:#8a6d1f}
.ms-empty{grid-column:1/-1;color:var(--mute)}
/* selection for compare: an open ring while choosing, a numbered ring once chosen */
.ms-selecting .ms-img::after{content:"";position:absolute;top:12px;left:12px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.ms-tile.picked .ms-img{outline:1px solid var(--ink);outline-offset:3px}
.ms-tile.picked .ms-img::after{display:none}
.ms-pick{position:absolute;top:12px;left:12px;z-index:2;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;line-height:20px;text-align:center}
.ms-selecting .ms-tile{cursor:copy}

/* compare tray */
.ms-tray{position:fixed;left:50%;bottom:var(--m);transform:translateX(-50%);z-index:35;display:flex;gap:6px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ms-tray .pill{width:auto;gap:8px;padding:0 8px 0 5px;white-space:nowrap}
.ms-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.ms-chip button{color:var(--mute);margin-left:4px;padding:0 6px}
.ms-chip button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ms-chip.empty{color:var(--mute);padding:0 14px}
.ms-go{padding:0 16px!important;background:var(--ink)!important;color:#fff!important}

/* ---------- profile: motion first, then one even row of stills and frames, then the uncropped source ---------- */
.ms-actions{display:flex;flex-direction:column;gap:var(--m)}
.ms-hero .vctl{position:absolute;right:14px;bottom:14px;height:26px;padding:0 12px;border-radius:13px;background:rgba(255,255,255,.9)}
.ms-add[aria-pressed="true"]{background:var(--pill-hi)}
.ms-step{display:grid;grid-template-columns:1fr 1fr;gap:var(--m)}
.ms-step .pill span,.ms-clips .pill span{color:var(--mute)}
.ms-stage{grid-column:2/5;min-width:0}
.ms-hero{position:relative;margin:0;display:inline-block;max-width:100%}
.ms-hero img,.ms-hero video{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100svh - var(--pill-h) - var(--m) * 4 - 40px);border-radius:var(--ms-r);background:var(--ms-surface)}
.ms-hero:has(video){display:block}   /* motion spans the stage; the clip's own ratio sets the height */
.ms-hero video{width:100%;max-height:none}
.ms-clips{display:flex;gap:6px;margin-top:var(--m)}
.ms-clips .pill{width:auto;gap:10px;padding:0 14px}
.ms-clips .pill[aria-pressed="true"]{background:var(--ink);color:#fff}
.ms-clips .pill[aria-pressed="true"] span{color:#bbb}
.ms-sheet{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--m);margin-top:calc(var(--m) * 2)}
.ms-sheet .ms-group{margin-bottom:calc(var(--m) * -.4)}
.ms-sheet figure{margin:0;min-width:0}
.ms-sheet button{display:block;width:100%;aspect-ratio:3/4;border-radius:var(--ms-r);overflow:hidden;background:var(--ms-surface);cursor:zoom-in}
.ms-sheet img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ms-sheet button:hover img{transform:scale(1.015)}
.ms-sheet figcaption{padding:8px 2px 0;font-size:11.5px;color:var(--mute)}
.ms-viewnote{margin-top:10px!important;color:var(--mute)}
.ms-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--m);margin-top:var(--m)}
.ms-thumbs button{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--ms-surface)}
.ms-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ms-thumbs button[aria-current="true"]{outline:1px solid var(--ink);outline-offset:2px}
.ms-thumbs span{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.9);font-size:10px}

/* ---------- compare ---------- */
.ms-cmp-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m)}
.ms-cmp-empty{grid-column:1/3}
/* each half: portrait sized to the viewport height, its card beside it ??both models fit one screen */
.ms-col{grid-column:span 2;min-width:0;display:grid;grid-template-columns:min(62%, calc((100svh - 360px) * .75)) minmax(0,1fr);gap:var(--m);align-items:start}
.ms-cmp-fig{margin:0;aspect-ratio:3/4;width:100%;border-radius:var(--ms-r);overflow:hidden;background:var(--ms-surface)}
.ms-cmp-fig img,.ms-cmp-fig video{width:100%;height:100%;object-fit:cover;display:block}
.ms-col .ms-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--m)}
.ms-cmp-info{min-width:0}
.ms-cmp-info .pill{justify-content:space-between}
.ms-cmp-info .pill span{font:400 12px/1 var(--font);font-stretch:100%;color:var(--mute)}
.ms-cmp-info dl{display:grid;grid-template-columns:28% 1fr;gap:6px 10px;margin:14px 2px 0}
.ms-cmp-info dt{color:var(--mute)}
.ms-cmp-info dd{margin:0}

/* review-only bin */
.ms-bin{grid-column:1/-1;display:grid;gap:var(--m);margin-top:40px}
.ms-bin-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--m)}
.ms-bin figure{margin:0}.ms-bin img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block}
.ms-bin figcaption{font-size:10px;color:var(--mute);padding-top:4px}

/* transitions: the chosen portrait moves into place; everything else is a short fade */
::view-transition-group(ms-pic){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-group(*){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

@media (max-width:760px){
  .ms-side{display:contents}
  .ms-head{order:1;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .ms-panel{order:2;grid-column:1/-1}
  .ms-roster{order:3;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--m)}
  .ms-about,.ms-index .review{order:4;grid-column:1/-1}
  .ms-bin{order:5}.ms-bin-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* views become one row of pills on phones, so the roster stays near the top */
  .ms-panel{padding:14px}
  .ms-panel section+section{margin-top:14px}
  .ms-views{display:flex;flex-wrap:wrap;gap:6px}
  .ms-views button{width:auto;gap:8px;padding:6px 12px;border:0;border-radius:15px;background:rgba(255,255,255,.7)}
  .ms-views button[aria-pressed="true"]{text-decoration:none;background:var(--ink);color:#fff}
  .ms-views button[aria-pressed="true"] span{color:#bbb}
  .ms-profile .ms-code{order:1;grid-column:1/-1}
  .ms-stage{order:2;grid-column:1/-1}
  .ms-actions{order:3;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;position:static}
  .ms-actions .ms-step{grid-column:1/-1}
  .ms-card,.ms-profile .review{order:4;grid-column:1/-1}
  .ms-hero{display:block}.ms-hero img,.ms-hero video{width:100%;max-height:none}
  .ms-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ms-cmp-head{grid-template-columns:1fr 1fr}
  .ms-col{grid-column:span 1;display:block}
  .ms-cmp-info{margin-top:var(--m)}
  .ms-col .ms-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ms-cmp-info dl{display:block}.ms-cmp-info dt{margin-top:8px}
  .ms-cmp-info .pill span{display:none}
  .ms-tray{left:var(--m);right:var(--m);transform:none;flex-wrap:wrap;border-radius:18px}
  .ms-tray .pill{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }