/* References (R1 and R3, 3 Oct 2026): the shelf beside the frames on the Shots
   board (js/refs-shelf.js), the tick on each card, and the reference opened.
   Design system v2 tokens, with fallbacks for a page that loads none. Held
   from live until the Pro launch (bin/deploy-live.sh). */
.sb-shelfwrap{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:18px;align-items:start}
.sb-shelfmain{min-width:0}
.rs{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;background:var(--white);border:1px solid var(--line);border-radius:var(--r,16px);padding:14px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.rs-h{display:flex;flex-direction:column;gap:4px}
.rs-h b{font-size:var(--fs-ui)}
.rs-h>span{font-size:var(--fs-label);color:var(--ink-2);line-height:1.45}
.rs-h .rs-sel{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
.rs-g h3{margin:0 0 8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rs-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rs-tile{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:grab;text-align:left}
.rs-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:var(--r-s,10px);background:var(--calm-2);pointer-events:none}
.rs-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-s,10px)}
.rs-tile.is-dragging{opacity:.45}
.rs-name{font-size:var(--fs-micro);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-on{position:absolute;left:4px;top:4px;font-style:normal;font-size:var(--fs-micro);font-weight:700;padding:1px 6px;border-radius:var(--r-s);background:var(--ink);color:var(--white)}
.rs-add,.rs-busy{aspect-ratio:1/1;align-items:center;justify-content:center;border-radius:var(--r-s,10px);background:var(--tint);box-shadow:inset 0 0 0 1px var(--field-edge);cursor:pointer;font-size:var(--fs-micro);font-weight:600}
.rs-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.rs-add:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rs-busy{cursor:default;color:var(--ink-2)}
.rs-link{border:0;background:none;padding:0 4px;min-height:32px;font:inherit;font-size:var(--fs-label);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rs-danger{color:var(--danger)}

/* the tick on a card, for a selection */
.sb-sel{position:relative;margin-left:auto;width:44px;height:32px;display:flex;align-items:center;justify-content:flex-end;flex:none;cursor:pointer}
.sb-sel input{position:absolute;inset:0;z-index:1;opacity:0;margin:0;cursor:pointer}
.sb-sel i{pointer-events:none;width:22px;height:22px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1.5px var(--field-edge);background:var(--white);position:relative}
.sb-sel input:checked+i{background:var(--ink);box-shadow:none}
.sb-sel input:checked+i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sb-sel input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
.sb-card.is-sel{box-shadow:0 0 0 2px var(--ink)}
.sb-card.is-refover{box-shadow:0 0 0 3px var(--accent),0 0 0 5px var(--ink)}

/* the add menu and a reference opened */
/* Above the composer's sheet over the moodboard (.cp-sheet-back 2147481000), whose Add buttons open it;
   below the pickers it hands on to (.sb-back 2147482000), the toast and the dialogs. */
.rs-pop{position:absolute;z-index:2147481500;box-sizing:border-box;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15));color:var(--ink)}
.rs-menu{min-width:240px;max-width:300px;padding:6px;display:flex;flex-direction:column}
.rs-menu button{height:44px;border:0;background:none;text-align:left;padding:0 12px;border-radius:var(--r-s,10px);font:inherit;font-size:var(--fs-ui);color:var(--ink);cursor:pointer}
.rs-menu button:hover,.rs-menu button:focus-visible{background:var(--calm-2)}
.rs-menu p{margin:6px 12px;font-size:var(--fs-label);color:var(--ink-2)}
.rs-ed{width:340px;max-width:calc(100vw - 16px);padding:16px;display:flex;flex-direction:column;gap:12px}
.rs-ed-top{display:flex;gap:12px;align-items:flex-start}
.rs-ed-top img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-s,10px);flex:none;background:var(--calm-2)}
.rs-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.rs-field input{height:44px;box-sizing:border-box;border:1px solid var(--field-edge);border-radius:var(--r-s,10px);padding:0 12px;font:inherit;font-size:var(--fs-ui);font-weight:400;letter-spacing:normal;color:var(--ink);background:var(--white)}
.rs-field input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* R2: what to keep */
.rs-field textarea{box-sizing:border-box;min-height:76px;resize:vertical;border:1px solid var(--field-edge);border-radius:var(--r-s,10px);padding:10px 12px;font:inherit;font-size:var(--fs-small);font-weight:400;letter-spacing:normal;line-height:1.45;color:var(--ink);background:var(--white)}
.rs-field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rs-field textarea[aria-busy="true"]{background:var(--tint);color:var(--ink-2)}
.rs-notehint{margin:-6px 0 0;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.rs-noteagain{align-self:flex-start;margin:-8px 0 0 -4px}
.rs-noteagain[hidden]{display:none}
.rs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-rsbody]{display:flex;flex-direction:column;gap:12px}
.rs-ed-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-ed-foot .sb-pill{height:42px;flex:1;justify-content:center;white-space:normal;text-align:center}
.rs-hint{flex:1;font-size:var(--fs-label);color:var(--ink-2);line-height:1.45}

/* picking from the moodboard */
.rs-pick{width:min(760px,100%);max-height:100%;background:var(--white);border-radius:var(--r,16px);box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15));display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
.rs-pick .sb-dlg-top{border-bottom:1px solid var(--line)}
.rs-pbody{padding:16px 20px 20px;overflow:auto}
.rs-pbody h3{margin:4px 0 10px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rs-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:16px}
.rs-ptile{padding:0;border:0;border-radius:var(--r-s,10px);overflow:hidden;background:var(--calm-2);cursor:pointer;aspect-ratio:1/1}
.rs-ptile img{width:100%;height:100%;object-fit:cover;display:block}
.rs-ptile:hover,.rs-ptile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rs-pnone{margin:0;font-size:var(--fs-small);color:var(--ink-2)}

/* Miracue presets (4 Oct 2026): the cast and place cards, labelled AI */
.rs-ai{position:absolute;right:4px;top:4px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:var(--r-s);background:rgba(42,23,51,.82);color:var(--white);pointer-events:none}
.rs-card img{object-position:left center;object-view-box:inset(0 64% 0 0)}
.rs-pre-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px 0}
.rs-pre-bar .sb-chips button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.rs-pre-bar .sb-chips button span{font-weight:400;opacity:.75}
.rs-pre-bar input{flex:1;min-width:180px;height:40px;box-sizing:border-box;border:1px solid var(--field-edge);border-radius:var(--r-s,10px);padding:0 12px;font:inherit;font-size:var(--fs-ui);color:var(--ink);background:var(--white)}
.rs-pre-bar input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rs-pre-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rs-pre{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.rs-pre-img{position:relative;display:block;border-radius:var(--r-s,10px);overflow:hidden;background:var(--calm-2);aspect-ratio:3/2}
.rs-pre-img img{width:100%;height:100%;object-fit:cover;display:block}
.rs-pre b{margin-top:4px;font-size:var(--fs-small)}
.rs-pre>span{font-size:var(--fs-micro);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-pre:hover .rs-pre-img,.rs-pre:focus-visible .rs-pre-img{outline:2px solid var(--ink);outline-offset:2px}
.rs-pre:focus-visible{outline:none}

/* the enlarged preview (4 Oct 2026): a tile or a preset card, large and uncropped beside it */
.rs-pv{position:fixed;z-index:2147482600;box-sizing:border-box;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15));color:var(--ink);pointer-events:none;animation:rs-pv-in .15s ease-out}
.rs-pv[hidden]{display:none}
.rs-pv-img{position:relative;border-radius:var(--r-s,10px);overflow:hidden;background:var(--calm-2)}
.rs-pv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.rs-pv-img .rs-ai{right:6px;top:6px;font-size:var(--fs-micro);padding:2px 7px}
.rs-pv-img .rs-ai[hidden]{display:none}
.rs-pv-cap{display:flex;align-items:baseline;gap:8px;min-width:0;padding:8px 4px 2px;font-size:var(--fs-label);line-height:1.3}
.rs-pv-cap b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-pv-cap span{flex:1;min-width:0;color:var(--ink-2);font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes rs-pv-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rs-pv{animation:none}}
.rs-tile,.rs-pre{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* a narrow screen: the shelf goes above the frames, each group a row you swipe */
@media (max-width:900px){
  .sb-shelfwrap{grid-template-columns:minmax(0,1fr)}
  .rs{order:-1;position:static;max-height:none;overflow:visible;padding:12px;gap:10px}
  .rs-g{min-width:0}
  .rs-tiles{display:flex;overflow-x:auto;gap:8px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .rs-tile{flex:0 0 72px}
}
@media (max-width:560px){
  .rs-pop.rs-ed,.rs-pop.rs-menu{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;max-width:none}
  .rs-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-pre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-pre-bar{padding:10px 16px 0}
}
@media print{.rs,.rs-pop,.rs-pv,.sb-sel{display:none!important}.sb-shelfwrap{display:block}}