/* Audiobooks review. Everything not here comes from app.css, so the page
   reads as the same site. */

.navlinks { margin:0 0 14px; font-family:var(--sans); font-size:12px; }
.navlinks a { color:var(--proposed); margin-right:12px; }

/* -- the book toggles in the left panel --------------------------------- */
.bookstate { background:var(--card); border:1px solid var(--rule);
  border-radius:7px; padding:11px 12px; margin:10px 0 4px;
  font-family:var(--sans); font-size:12px; }
.bookstate .toggle { display:flex; align-items:center; gap:8px;
  padding:3px 0; cursor:pointer; }
.bookstate .toggle input { width:14px; height:14px; margin:0; }
.bookstate .minutes { display:block; margin:10px 0 5px; font:600 11px/1 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.bookstate input[type="number"] { width:100%; font:14px/1.3 var(--sans);
  padding:7px 9px; border:1px solid var(--line); border-radius:6px;
  background:var(--paper); color:var(--ink); }
.bookstate .saved { margin:7px 0 0; min-height:14px; color:var(--green);
  font-size:11px; }

.err { font-family:var(--sans); font-size:13px; color:var(--red);
  background:var(--red-bg); border:1px solid var(--red);
  border-radius:6px; padding:9px 12px; margin:0 0 16px; max-width:900px; }

/* -- characters ---------------------------------------------------------- */
.charrow { display:flex; gap:18px; align-items:flex-start;
  background:var(--card); border:1px solid var(--rule); border-radius:7px;
  padding:14px 16px; margin:0 0 12px; max-width:1000px; }
.charrow .cell { min-width:0; }
.charrow .who { flex:0 0 190px; }
.charrow .dir { flex:1 1 auto; }
.charrow .acts { flex:0 0 220px; display:flex; flex-direction:column;
  align-items:flex-start; gap:8px; }
.charrow .cname { display:block; font:600 16px/1.3 var(--serif); }
.charrow .tag { display:inline-block; margin:3px 0 0; padding:1px 7px;
  border-radius:4px; background:var(--proposed-bg); color:var(--proposed);
  font:700 10px/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.charrow .voice { display:block; margin-top:5px; font-family:var(--sans);
  font-size:12px; color:var(--muted); }
.charrow .sampleline { margin:8px 0 0; font-size:14px; color:var(--muted); }
.charrow .sampleline.none { font-family:var(--sans); font-size:12px;
  color:var(--faint); }
.charrow audio.sample { width:100%; max-width:210px; height:32px; }

label { display:block; font:600 10.5px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 5px; }
.main textarea { width:100%; font:14px/1.45 var(--sans); padding:8px 10px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  color:var(--ink); resize:vertical; }
.main textarea:disabled { opacity:.6; cursor:not-allowed; }

.btnrow { display:flex; flex-wrap:wrap; gap:6px; }
.dbtn { font:600 13px/1 var(--sans); padding:6px 11px;
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink); cursor:pointer; }
.dbtn:hover:not(:disabled) { border-color:var(--ink); }
.dbtn:disabled { opacity:.45; cursor:not-allowed; }
.dbtn.approve { color:var(--green); border-color:var(--green-bg); }
.dbtn.reject { color:var(--red); border-color:var(--red-bg); }
.dbtn.flag { color:var(--amber); border-color:var(--amber-bg); }
.dbtn.regen { color:var(--proposed); border-color:var(--proposed-line); }

.acts .none, .scenebody .none { font-family:var(--sans); font-size:12px;
  color:var(--faint); }

/* -- scenes -------------------------------------------------------------- */
.scenegrid { display:grid; gap:14px; max-width:1100px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.scenecard { background:var(--card); border:1px solid var(--rule);
  border-radius:7px; overflow:hidden; display:flex; flex-direction:column; }
.scenecard .shot { display:block; width:100%; aspect-ratio:4/3;
  object-fit:cover; background:var(--panel);
  border-bottom:1px solid var(--rule); }
.scenecard .shot.placeholder { display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  font-family:var(--sans); color:var(--faint);
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 10px,
    var(--paper) 10px,var(--paper) 20px); }
.scenecard .shot.placeholder span { font:600 15px/1 var(--sans);
  color:var(--muted); }
.scenecard .shot.placeholder .sub { font:400 11px/1 var(--sans);
  color:var(--faint); }
.scenebody { padding:12px 13px 14px; display:flex; flex-direction:column;
  gap:8px; }
.scenehead { display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:0; font-family:var(--sans); font-size:13px; }
.scenehead .chapter { color:var(--muted); font-size:12px; }
.scenebody .decided { margin:0; font-family:var(--sans); font-size:12px;
  color:var(--muted); }

.badge.sc-proposed { background:var(--proposed-bg); color:var(--proposed);
  border:1px solid var(--proposed-line); }
.badge.sc-approved { background:var(--implemented-bg); color:var(--implemented);
  border:1px solid var(--implemented-line); }
.badge.sc-rejected { background:var(--red-bg); color:var(--red);
  border:1px solid var(--red); }
.badge.sc-flagged { background:var(--amber-bg); color:var(--amber);
  border:1px solid var(--amber-line); }

@media (max-width:820px) {
  .charrow { flex-direction:column; gap:12px; }
  .charrow .who, .charrow .acts { flex:1 1 auto; width:100%; }
}