/* home.css — Selected (frames 02–15) and the open slot N°15. Scoped to .selected. */

.selected{margin-top:var(--row-gap)}
.selected .sel-head{margin-inline:var(--m);padding-top:var(--s3);border-top:1px solid var(--hairline);color:var(--ink)}
.selected > .rows{margin-top:var(--row-gap)}

/* labels: en spaces around the dot (spoken as a pause, underlined on hover);
   the 44px touch target grows downwards, away from the frame */
.selected .fig-label{text-wrap:pretty}
.selected .fig-label .sep{padding:0}
.selected .fig-label::after{top:0;translate:-50% 0}

/* a page of its own: a lone small frame, or the runway cabinet, sits alone on paper */
.selected .row--small,.selected .row--cabinet{min-height:calc(100svh - var(--header) - var(--bar-h));align-content:center}
@media (max-width:767px){
  .selected .row--small .fig--small{width:min(calc(var(--nw) * 1px), 72%)}
  /* two runway frames side by side: tops aligned, the long label wraps inside its own column */
  .selected .row--cabinet > .cabinet{align-items:start}
  .selected .row--cabinet .fig-label > .nowrap{white-space:normal}
}
/* entry cabinets hug and start-align; Selected centres its own and keeps the runway pair
   on one line (on tablets the frames shrink rather than stack into a second screen) */
@media (min-width:768px){
  .selected .row--cabinet > .cabinet{grid-column:1/-1;justify-self:center;width:fit-content;max-width:100%;flex-wrap:nowrap}
  .selected .row--cabinet > .cabinet > .fig{flex:0 1 auto;min-width:0}
}
/* per-frame height (--h, svh; 88 when unset) so large and small beats alternate,
   inside the shared plate cap: frame and caption fit between header and bar */
@media (min-width:1024px){
  .selected .row--plate > .fig,.selected .fig--pair{width:min(100%, calc(var(--nw) * 1px),
    calc(min(var(--h, 88) * 1svh, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
  .selected .fig--bleed{width:min(100%, calc(var(--nw) * 1px),
    calc((100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
}

/* N°15: the open slot, a closing beat after the last frame (no page of its own) */
.selected .sel-open{padding-block:var(--s7)}
.selected .sel-open > .open{justify-self:center;width:min(100%, 320px)}
.selected .open-slot .stamp{position:absolute;left:22px;top:19px}
.selected .open-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity calc(300ms * var(--motion)) var(--ease)}
.selected .open-slot img.in{opacity:1}
.selected .open-no{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:6px;color:var(--muted)}
.selected .open-links{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s2)}
.selected .open-links > *{display:inline-flex;align-items:center;min-height:var(--tap)}