/* Scenes review. The page chrome and the common card parts come from
   media-cards.css; this sheet is only what a scene tile adds.

   The page is built to be skimmed, the same way the Speakers page is: every
   card is collapsed to a tile, the tiles sit in a grid, and a disclosure
   arrow opens the one that needs redoing. A scene tile is mostly picture,
   because the picture is the thing being reviewed. */

/* -- the grid ------------------------------------------------------------ */
/* Four across on a wide screen, three on a smaller desktop, two on a laptop,
   one on a phone. A tile that is opened grows in its own column. */
.cards { display:grid; gap:var(--s4); align-items:start;
  grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1399px) { .cards { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1280px) { .cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:720px)  { .cards { grid-template-columns:1fr; } }

.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* -- the disclosure arrow, the same control as on the Speakers page ------ */
.disclose { flex:0 0 auto; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-full);
  background:var(--card); color:var(--ink); cursor:pointer;
  transition:border-color var(--tr), background-color var(--tr); }
.disclose:hover:not(:disabled) { border-color:var(--ink);
  background:var(--subtle); }
.disclose::after { content:""; width:7px; height:7px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform var(--tr); }
[data-open="1"] > .foldbar > .disclose::after,
.card.scn[data-open="1"] .disclose::after { margin-top:3px;
  transform:rotate(-135deg); }

/* -- a folded section: the house style and the characters ---------------- */
.foldbox { background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3) var(--s4);
  margin:0 0 var(--s4); box-shadow:var(--sh-surface); }
.foldbox .foldbar { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s3); }
.foldbox .foldbar h2 { flex:0 0 auto; margin:0;
  font:500 var(--t-h4)/1.25 var(--serif); letter-spacing:-.01em; }
.foldbox .foldbar .peek { flex:1 1 220px; min-width:0; margin:0;
  color:var(--ink-2); font-family:var(--sans); font-size:var(--t-sm);
  line-height:1.45; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.foldbox .foldbar .acts { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2); margin-left:auto; }
.foldbox .foldbar .side { color:var(--muted); font-family:var(--sans);
  font-size:var(--t-sm); }
/* Approving everything is the main thing a reviewer comes to a section bar to
   do, so it is the one filled button in the row. */
.bookbar .pillbtn.go, .foldbox .foldbar .pillbtn.go { background:var(--ink);
  color:var(--lds-page); border-color:var(--ink); }
.bookbar .pillbtn.go:hover:not(:disabled),
.foldbox .foldbar .pillbtn.go:hover:not(:disabled) { background:var(--muted);
  color:var(--lds-page); }
/* Un-approving everything undoes a book's worth of work, so it is a quiet
   link at the end of the row and asks first. */
.foldbox .foldbar .linkbtn.quiet { background:none; border:0; padding:0;
  color:var(--muted); font:var(--t-sm)/1.3 var(--sans); cursor:pointer;
  text-decoration:underline; }
.foldbox .foldbar .linkbtn.quiet:hover:not(:disabled) { color:var(--ink); }
.foldbox .foldbar .linkbtn.quiet:disabled { opacity:.55;
  cursor:not-allowed; }
.foldbox .folddetail { margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--rule); }
.foldbox .folddetail .thin { margin:0 0 var(--s3); font-family:var(--sans);
  font-size:var(--t-sm); color:var(--faint); }
.foldbox .folddetail .acts { display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s2); }
.styleform .field { margin:0 0 var(--s3); }

/* -- the filter chips above the grid ------------------------------------- */
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin:0 0 var(--s4); }
.filters .pillbtn { padding:var(--s1) var(--s3); font-size:var(--t-sm); }
.filters .pillbtn .n { font-variant-numeric:tabular-nums; opacity:.7;
  margin-left:6px; }
.filters .pillbtn[aria-pressed="true"] .n { opacity:.85; }

/* -- the characters grid ------------------------------------------------- */
.castbox .cast { display:grid; gap:var(--s3); align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.casttile { border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--card); padding:var(--s2); min-width:0; }
.casttile.busy { opacity:.85; }
.casttile.dirtycard { border-color:var(--warn-line);
  box-shadow:inset 3px 0 0 var(--warn); }

/* The tile is mostly picture. */
.casttile .shotbtn { display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; border-radius:var(--r-sm);
  overflow:hidden; }
.casttile .shotbtn img { display:block; width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center top; border-radius:var(--r-sm);
  background:var(--warm-1); }
.casttile .noshot { margin:0; aspect-ratio:3/4; display:flex;
  align-items:center; justify-content:center; background:var(--warm-1);
  border:1px dashed var(--rule); border-radius:var(--r-sm);
  color:var(--faint); font:500 var(--t-h3)/1 var(--serif); }

.casttile .card-head { display:flex; align-items:flex-start; gap:var(--s2);
  margin:var(--s2) 0 var(--s1); }
.casttile .headtext { flex:1 1 auto; min-width:0; }
.casttile .pname { margin:0; font:500 var(--t-md)/1.3 var(--serif);
  overflow-wrap:anywhere; }
.casttile .pchips { display:flex; flex-wrap:wrap; gap:4px;
  margin:var(--s1) 0 0; }
.casttile .chip { font:var(--t-sm)/1.3 var(--sans);
  border-radius:var(--r-full); padding:2px 8px; border:1px solid transparent; }
.casttile .disclose { width:28px; height:28px; }

.casttile .look { margin:0 0 var(--s2); color:var(--ink-2);
  font-family:var(--sans); font-size:var(--t-sm); line-height:1.45; }
.casttile[data-open="0"] .look { display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.casttile .tilebar { display:flex; flex-wrap:wrap; gap:var(--s2); }
.casttile .act.small, .card.scn .act.small { min-height:28px;
  padding:var(--s1) var(--s3); font-size:var(--t-sm); }
.casttile .pmsg { margin:var(--s1) 0 0; font-family:var(--sans);
  font-size:var(--t-sm); color:var(--muted); }
.casttile .pmsg:empty { margin:0; }
.casttile .pmsg.good { color:var(--good-ink); }
.casttile .pmsg.bad { color:var(--bad-ink); }

.casttile .carddetail { margin-top:var(--s2); padding-top:var(--s2);
  border-top:1px solid var(--rule); }
.casttile .carddetail label { display:block;
  font:500 var(--t-label)/1.2 var(--sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 var(--s1); }
.casttile .carddetail textarea { width:100%; font:var(--t-md)/1.45 var(--sans);
  color:var(--ink); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:7px 10px; resize:vertical; }
.casttile .carddetail .field { margin:0 0 var(--s2); }
.casttile details { margin:0 0 var(--s2); border:1px solid var(--rule);
  border-radius:var(--r-md); background:var(--warm-1); }
.casttile details summary { cursor:pointer; padding:var(--s1) var(--s2);
  font:500 var(--t-sm)/1.3 var(--sans); }
.casttile details pre { margin:0; padding:0 var(--s2) var(--s2);
  font:var(--t-sm)/1.5 var(--mono); white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--ink-2); }
.casttile .caption { margin:0 0 var(--s2); font-family:var(--sans);
  font-size:var(--t-sm); color:var(--faint); }
.casttile .acts { display:flex; flex-wrap:wrap; gap:var(--s2); }
.casttile .ptakes { margin:0 0 var(--s2); }
/* The prompt is the thing being edited, so it is a field like any other and
   the note above it says where its first lines come from. */
.casttile .carddetail .field .thin { margin:0 0 var(--s1);
  font:var(--t-sm)/1.4 var(--sans); color:var(--faint); }
.casttile .carddetail textarea[data-prompt] { font:var(--t-sm)/1.5 var(--mono);
  max-height:22em; }
/* The earlier versions are the quiet part of an open tile. */
.casttile .phistory .ptakes { padding:0 var(--s2) var(--s2); margin:0; }
.casttile .thumbs, .card.scn .thumbs { display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); }
.casttile .thumb, .card.scn .thumb { margin:0; }
.casttile .thumb figcaption, .card.scn .thumb figcaption {
  font-family:var(--sans); font-size:var(--t-sm); margin-top:2px; }
.casttile .thumb .thin, .card.scn .thumb .thin { display:block;
  color:var(--faint); margin:0; }
.casttile .thumb .shotbtn img, .card.scn .thumb .shotbtn img {
  aspect-ratio:auto; }

/* -- one scene tile ------------------------------------------------------ */
.card.scn { padding:var(--s2); }
.card.scn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.card.scn .shot { margin:0; }
.card.scn .shotbtn { display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; border-radius:var(--r-sm);
  overflow:hidden; }
.card.scn .shotbtn img { display:block; width:100%; height:auto;
  border-radius:var(--r-sm); background:var(--warm-1); }
.card.scn .noshot { margin:0; aspect-ratio:3/2; display:flex;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--s3); background:var(--warm-1); border:1px dashed var(--rule);
  border-radius:var(--r-sm); font-family:var(--sans);
  font-size:var(--t-sm); color:var(--faint); }
.card.scn.busy .shot { opacity:.55; }

.card.scn .card-head { display:flex; flex-wrap:nowrap; align-items:flex-start;
  gap:var(--s2); margin:var(--s2) 0 var(--s1); }
.card.scn .headtext { flex:1 1 auto; min-width:0; }
.card.scn .headline { display:flex; align-items:baseline; gap:var(--s2);
  min-width:0; }
.card.scn .ord { flex:0 0 auto; font:500 var(--t-sm)/1.3 var(--sans);
  color:var(--faint); font-variant-numeric:tabular-nums; }
.card.scn .cname { font:500 var(--t-md)/1.3 var(--serif); margin:0;
  overflow-wrap:anywhere; }
.card.scn .chipline { display:flex; flex-wrap:wrap; align-items:center;
  gap:4px; margin:var(--s1) 0 0; }
.card.scn .chipline .chip { font:var(--t-sm)/1.3 var(--sans);
  border-radius:var(--r-full); padding:2px 8px; border:1px solid transparent; }
.card.scn .chipline .pill { padding:2px 8px; }
.card.scn .chipline .dirty { padding:2px 8px; }

/* -- the small round faces this picture was drawn from ------------------- */
.card.scn .refsbox:empty { display:none; }
.card.scn .refs { display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin:0 0 var(--s2); }
.card.scn .refthumb { width:26px; height:26px; border-radius:var(--r-full);
  object-fit:cover; object-position:center top; border:1px solid var(--rule);
  background:var(--warm-1); }
.card.scn .refthumb.none { display:flex; align-items:center;
  justify-content:center; font:500 10px/1 var(--sans); color:var(--faint);
  text-transform:uppercase; }
/* The model holds five likenesses at most. Anyone past that is named in the
   opened panel rather than shown as a reference that was never used. */
.card.scn .refsrest { margin:0 0 var(--s3); font-family:var(--sans);
  font-size:var(--t-sm); color:var(--faint); }

.card.scn .desc { margin:0 0 var(--s2); color:var(--ink-2);
  font-family:var(--sans); font-size:var(--t-sm); line-height:1.45; }
.card.scn[data-open="0"] .desc { display:-webkit-box; -webkit-line-clamp:1;
  -webkit-box-orient:vertical; overflow:hidden; }
.card.scn .tilebar { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2); }
.card.scn .cardmsg { margin:var(--s1) 0 0; min-height:0; }
.card.scn .cardmsg:empty { display:none; }
.card.scn .caption { margin:0 0 var(--s2); font-family:var(--sans);
  font-size:var(--t-sm); color:var(--faint); }
.card.scn .cast { margin:0 0 var(--s3); }
.card.scn .slugline { margin:0 0 var(--s2); }

.card.scn .carddetail { margin-top:var(--s2); padding-top:var(--s2);
  border-top:1px solid var(--rule); }
.card.scn .takes { margin:0 0 var(--s3); font-size:var(--t-md); }
.card.scn .histlab { display:block; font:500 var(--t-label)/1.2 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin:0 0 var(--s1); }

/* -- the full size picture ----------------------------------------------- */
/* The box itself is shared with the Speakers page and lives in
   media-cards.css; the chrome that lets a reviewer flip through the book at
   full size is only here. */
.lightbox .navbox { position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; padding:0; display:flex; align-items:center;
  justify-content:center; border-radius:var(--r-full);
  border:1px solid var(--lds-page); background:var(--lds-page);
  color:var(--ink); cursor:pointer; }
.lightbox .navbox::after { content:""; width:12px; height:12px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; }
.lightbox .navbox.prev { left:var(--s4); }
.lightbox .navbox.prev::after { transform:rotate(135deg); margin-left:4px; }
.lightbox .navbox.next { right:var(--s4); }
.lightbox .navbox.next::after { transform:rotate(-45deg); margin-right:4px; }
.lightbox .lightbar { position:absolute; left:50%; bottom:var(--s4);
  transform:translateX(-50%); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s3); max-width:min(92vw, 900px);
  padding:var(--s2) var(--s4); border-radius:var(--r-full);
  background:var(--lds-page); border:1px solid var(--line);
  box-shadow:var(--sh-surface); }
.lightbox .lbtitle { font:500 var(--t-md)/1.3 var(--serif); color:var(--ink);
  overflow-wrap:anywhere; }
.lightbox .lbchips { display:flex; flex-wrap:wrap; gap:4px; }
.lightbox .lbchips .chip { font:var(--t-sm)/1.3 var(--sans);
  border-radius:var(--r-full); padding:2px 8px; border:1px solid transparent; }
.lightbox img { max-height:74vh; }

@media (max-width:640px) {
  .foldbox { padding:var(--s3); }
  .castbox .cast { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
  .foldbox .foldbar .acts { margin-left:0; }
  .lightbox .navbox { width:40px; height:40px; }
  .lightbox .navbox.prev { left:var(--s2); }
  .lightbox .navbox.next { right:var(--s2); }
  .lightbox .lightbar { bottom:var(--s2); padding:var(--s2) var(--s3);
    border-radius:var(--r-md); }
}