/* The page chrome the two media review pages share, Speakers and Scenes.
   Every token comes from app.css, so both pages read as the same site. */

/* Speakers and Scenes use the same two column shell as the Books page:
   .app, .panel and .main all come from app.css, so the panel is the same
   control in the same place and this sheet only dresses the main column. */

.pagehead { margin:0 0 var(--s5); max-width:var(--c-read); }
.pagehead h1 { font:500 var(--t-h3)/1.2 var(--serif); margin:0 0 var(--s1);
  letter-spacing:-.01em; }
.pagehead .by { margin:0 0 var(--s3); color:var(--muted);
  font-family:var(--sans); font-size:var(--t-md); }
.pagehead .say { margin:0; color:var(--muted); font-size:var(--t-lg);
  line-height:1.5; }
.pagehead .crumb { margin:0 0 var(--s2); font-family:var(--sans);
  font-size:var(--t-sm); }
.pagehead .links { display:flex; flex-wrap:wrap; gap:var(--s3);
  margin:var(--s3) 0 0; font-family:var(--sans); font-size:var(--t-sm); }

.loadnote { font-family:var(--sans); color:var(--faint);
  font-size:var(--t-md); margin:0 0 var(--s4); }
.err { font-family:var(--sans); font-size:var(--t-md); color:var(--red);
  background:var(--red-bg); border:1px solid var(--bad-line);
  border-left:3px solid var(--bad); border-radius:var(--r-md);
  padding:10px var(--s3); margin:0 0 var(--s4); max-width:var(--c-read); }
.nothing { font-family:var(--sans); color:var(--faint); padding:var(--s7) 0; }

/* -- buttons, at least 32px tall everywhere ------------------------------ */
.pillbtn, .act { min-height:32px; font:500 var(--t-md)/1 var(--sans);
  padding:var(--s2) var(--s4); border:1px solid var(--line);
  background:var(--card); color:var(--ink); border-radius:var(--r-full);
  cursor:pointer; transition:border-color var(--tr), background-color var(--tr); }
.pillbtn:hover:not(:disabled), .act:hover:not(:disabled)
  { border-color:var(--ink); background:var(--subtle); }
.pillbtn:disabled, .act:disabled { opacity:.55; cursor:not-allowed; }
.pillbtn[aria-pressed="true"] { background:var(--ink); color:var(--lds-page);
  border-color:var(--ink); }
.act.go { background:var(--ink); color:var(--lds-page); border-color:var(--ink); }
.act.go:hover:not(:disabled) { background:var(--muted); color:var(--lds-page); }
.act.ok { border-color:var(--good-line); background:var(--good-bg);
  color:var(--good-ink); }
.pillbtn.stop { border-color:var(--bad-line); background:var(--bad-bg);
  color:var(--bad-ink); }
[aria-busy="true"] { cursor:progress; }

/* -- the small second line on a panel book row --------------------------- */
.matches .who.tally { color:var(--muted); }

/* -- the counts on a book's header --------------------------------------- */
.counts { display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s3) 0 0;
  font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); }
.counts .cnt b { color:var(--ink); font-variant-numeric:tabular-nums; }
.counts .cnt.done b { color:var(--good-ink); }

/* -- the per book action bar --------------------------------------------- */
.bookbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin:0 0 var(--s5); padding:var(--s3) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.bookbar .side { color:var(--muted); font-family:var(--sans);
  font-size:var(--t-sm); }

/* -- what every card has in common --------------------------------------- */
.mcard { background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s4) var(--s5);
  box-shadow:var(--sh-surface); min-width:0; }
.mcard.dirtycard { border-color:var(--warn-line);
  box-shadow:inset 3px 0 0 var(--warn); }
.mcard.busy { opacity:.85; }
.mcard[data-status="error"] { border-color:var(--bad-line); }

.mcard .card-head { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2); margin:0 0 2px; border-bottom:0; padding-bottom:0; }
.mcard .cname { font:500 var(--t-h4)/1.25 var(--serif); letter-spacing:-.01em;
  margin-right:var(--s1); }
/* Scoped to a card: the panel has its own .pill, the filter pill from
   app.css, and the two must not tread on each other. */
.mcard .pill { font:500 var(--t-label)/1.2 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; border-radius:var(--r-full); padding:4px 10px;
  background:var(--panel); color:var(--olive); border:1px solid var(--rule); }
.mcard .pill.role.r-narrator { background:var(--ink); color:var(--lds-page);
  border-color:var(--ink); }
.mcard .pill.voice, .mcard .pill.plain { background:var(--warm-2);
  color:var(--ink); border-color:var(--warm-2); text-transform:none;
  letter-spacing:.02em; }
.mcard .chip { font:var(--t-sm)/1.3 var(--sans); border-radius:var(--r-full);
  padding:3px 10px; border:1px solid transparent; }
.chip.st-ok { color:var(--good-ink); background:var(--good-bg);
  border-color:var(--good-line); }
.chip.st-pending { color:var(--proposed); background:var(--proposed-bg);
  border-color:var(--proposed-line); }
.chip.st-err { color:var(--bad-ink); background:var(--bad-bg);
  border-color:var(--bad-line); }
.chip.st-approved { color:var(--deep); background:var(--deep-bg);
  border-color:var(--deep-line); }
.mcard .dirty { font:500 var(--t-sm)/1.3 var(--sans); color:var(--warn-ink);
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:var(--r-full); padding:3px 10px; }
.mcard .slugline { margin:0 0 var(--s3); font-family:var(--mono);
  font-size:var(--t-sm); color:var(--faint); word-break:break-word; }

.mcard .field, .styleform .field { margin:0 0 var(--s3); min-width:0; }
.mcard label, .mcard legend, .styleform 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); }
.mcard input[type="text"], .mcard textarea, .mcard select,
.styleform textarea, .styleform input[type="text"] {
  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; }
.mcard textarea, .styleform textarea { resize:vertical; }
.mcard input:disabled, .mcard textarea:disabled, .mcard select:disabled
  { opacity:.7; }
.mcard .thin { margin:var(--s1) 0 0; font-family:var(--sans);
  font-size:var(--t-sm); color:var(--muted); }
.mcard .readhere { color:var(--ink); }

.mcard details { margin:0 0 var(--s3); border:1px solid var(--rule);
  border-radius:var(--r-md); background:var(--warm-1); }
.mcard details summary { cursor:pointer; padding:var(--s2) var(--s3);
  font:500 var(--t-sm)/1.3 var(--sans); }
.mcard details pre { margin:0; padding:0 var(--s3) var(--s3);
  font:var(--t-sm)/1.5 var(--mono); white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--ink-2); }

.mcard .cardmsg { margin:0 0 var(--s2); min-height:18px;
  font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); }
.mcard .cardmsg.good { color:var(--good-ink); }
.mcard .cardmsg.bad { color:var(--bad-ink); }

.mcard .acts { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2); }
.mcard .acts .side { color:var(--faint); font-family:var(--sans);
  font-size:var(--t-sm); }

/* -- the character portrait ---------------------------------------------- */
/* The same block on a speaker card and, in .compact, on the character strip
   at the top of the Scenes page. Roughly 3:4, modest, click to enlarge. */
.portrait { display:flex; gap:var(--s3); align-items:flex-start;
  min-width:0; }
.portrait .shot { flex:0 0 108px; width:108px; }
.portrait.compact .shot { flex:0 0 84px; width:84px; }
.portrait .pbody { flex:1 1 auto; min-width:0; }
.portrait .shotbtn { display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; border-radius:var(--r-sm);
  overflow:hidden; }
.portrait .shotbtn img { display:block; width:100%; aspect-ratio:3/4;
  object-fit:cover; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--warm-1); }
.portrait .noshot { margin:0; aspect-ratio:3/4; display:flex;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--s2); 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); }
.portrait .lab { 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); }
.portrait .pname { margin:0 0 var(--s1);
  font:500 var(--t-md)/1.3 var(--serif); }
.portrait .pchips { display:flex; flex-wrap:wrap; gap:var(--s1);
  margin:0 0 var(--s2); min-height:0; }
.portrait .pchips .chip { font:var(--t-sm)/1.3 var(--sans);
  border-radius:var(--r-full); padding:3px 10px; border:1px solid transparent; }
.portrait .field { margin:0 0 var(--s2); }
.portrait details { margin:0 0 var(--s2); border:1px solid var(--rule);
  border-radius:var(--r-md); background:var(--warm-1); }
.portrait details summary { cursor:pointer; padding:var(--s2) var(--s3);
  font:500 var(--t-sm)/1.3 var(--sans); }
.portrait details pre { margin:0; padding:0 var(--s3) var(--s3);
  font:var(--t-sm)/1.5 var(--mono); white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--ink-2); }
.portrait .ptakes { padding:0 var(--s3) var(--s3); font-size:var(--t-md); }
.portrait .thumbs { display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); }
.portrait .thumb { margin:0; }
.portrait .thumb figcaption { font-family:var(--sans);
  font-size:var(--t-sm); margin-top:2px; }
.portrait .thumb .thin { display:block; color:var(--faint); margin:0; }
.portrait .pmsg { margin:0 0 var(--s2); min-height:18px;
  font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); }
.portrait .pmsg.good { color:var(--good-ink); }
.portrait .pmsg.bad { color:var(--bad-ink); }
.portrait .acts { display:flex; flex-wrap:wrap; gap:var(--s2); }

/* -- the full size picture ----------------------------------------------- */
/* Both pages open a picture this way, a scene on one and a portrait on the
   other, so the box is styled once here. */
.lightbox { position:fixed; inset:0; z-index:50; display:flex;
  align-items:center; justify-content:center; padding:var(--s5);
  background:rgba(1,1,1,.82); }
.lightbox img { max-width:100%; max-height:88vh; border-radius:var(--r-sm);
  background:var(--warm-1); }
.lightbox .closebox { position:absolute; top:var(--s4); right:var(--s4);
  min-height:32px; font:500 var(--t-md)/1 var(--sans);
  padding:var(--s2) var(--s4); border-radius:var(--r-full);
  border:1px solid var(--lds-page); background:var(--lds-page);
  color:var(--ink); cursor:pointer; }

@media (max-width:640px) {
  .lightbox { padding:var(--s3); }
  .mcard { padding:var(--s3); }
  .portrait .shot, .portrait.compact .shot { flex:0 0 84px; width:84px; }
}

/* Landing grid: every book on the page as a card, so the main column is never
   empty while the reader decides what to open. */
.bookgrid { display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); margin-top:var(--s4); }
.bookcard { display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left; padding:var(--s4); background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r2); cursor:pointer;
  font:inherit; transition:box-shadow var(--tr), border-color var(--tr); }
.bookcard:hover { border-color:var(--ink); box-shadow:var(--shadow-1, 0 1px 3px rgba(0,0,0,.08)); }
.bookcard:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.bookcard .bc-title { font-family:var(--serif, Georgia, serif); font-size:20px; line-height:1.25; }
.bookcard .bc-author { color:var(--dusk, #6B6B6B); font-size:13px; }
.bookcard .bc-tally { margin-top:var(--s2); font-size:13px; color:var(--dusk, #6B6B6B);
  font-variant-numeric:tabular-nums; }
.bookcard .bc-tally b { color:var(--ink); font-weight:600; margin-left:6px; }
.bookcard .bc-tally b:first-child { margin-left:0; }