:root {
  --bg: #0d0b09;
  --ink: #f1ebe1;
  --muted: #b3a896;
  --accent: #d9ac62;
  --glass: rgba(16, 13, 10, .72);
  --line: rgba(255, 255, 255, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); }
body { height: 100dvh; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; color: inherit; }

/* image is the primary layer */
.stage { position: fixed; z-index: 1; top: 0; left: 0; right: 0; bottom: var(--sheet-h, 0px); display: flex; align-items: center; justify-content: center; transition: bottom .35s ease; }
.backdrop { position: fixed; z-index: 0; inset: 0; overflow: hidden; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.45) saturate(.9); transform: scale(1.15); }
.scene { position: relative; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.scene.loading { opacity: 0; }
.no-image { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #2a2219, var(--bg) 70%); }
body.immersive .stage, body.listen .stage { bottom: 0; }

/* minimal top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: .5rem;
  padding: calc(.45rem + var(--safe-top)) .75rem .45rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  transition: opacity .3s ease, transform .3s ease;
}
.title { flex: 1; text-align: left; background: none; border: 0; padding: .3rem 0; font-size: .95rem; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7); cursor: pointer; letter-spacing: .01em; }
.title .chev { opacity: .6; margin-left: .35rem; font-size: .75em; }
.icon { background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer; }
.icon.fmt { width: auto; min-width: 2.2rem; padding: 0 .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.icon.fmt.fallback { opacity: .5; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .1); }
#progressBar { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* bottom text sheet */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0 auto; max-width: 46rem;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line); border-radius: 1.1rem 1.1rem 0 0;
  padding: .15rem 1.1rem calc(.6rem + var(--safe-bottom));
  max-height: 62dvh; display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, max-height .35s ease;
}
.grip { display: block; width: 100%; background: none; border: 0; padding: .45rem 0 .35rem; cursor: pointer; }
.grip span { display: block; width: 2.4rem; height: .28rem; border-radius: 99px; background: rgba(255, 255, 255, .35); margin: 0 auto; }
.sheet-head { display: flex; align-items: baseline; gap: .6rem; }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--accent); }
#position { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.sheet-body { overflow-y: auto; margin-top: .35rem; overscroll-behavior: contain; }
.verses { font-family: var(--serif); font-size: calc(1.12rem * var(--font-scale, 1)); line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.verses sup { color: var(--accent); font-family: var(--sans); font-size: .6em; margin: 0 .2em 0 .3em; }
.about { margin: .8rem 0 .2rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.about summary { cursor: pointer; }
.sheet.collapsed .sheet-body { max-height: 3.3em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.sheet.collapsed .about { display: none; }
.sheet-nav { position: absolute; top: .55rem; right: .7rem; display: none; gap: .3rem; }
.sheet-nav button { width: 2rem; height: 2rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.sheet-nav button:disabled { opacity: .3; }
@media (hover: hover) { .sheet-nav { display: flex; } .sheet-head { padding-right: 4.8rem; } }

/* immersive: UI hidden, only the image */
body.immersive .topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
body.immersive .sheet { transform: translateY(calc(100% - 0px)); opacity: 0; pointer-events: none; }

/* listen mode */
body.listen .topbar, body.listen .sheet { opacity: 0; pointer-events: none; }
body.listen .sheet { transform: translateY(100%); }
.listen-ui { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.listen-ui[hidden] { display: none; }
.listen-ui .caption { margin: 0 auto 1rem; max-width: 40rem; padding: 0 1.2rem; text-align: center; font-family: var(--serif);
  font-size: 1rem; color: var(--ink); text-shadow: 0 1px 8px #000; opacity: 0; transition: opacity .3s; }
.listen-ui .controls { display: flex; justify-content: center; gap: 1rem; padding: 1rem 1rem calc(1.4rem + var(--safe-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); opacity: 0; transition: opacity .3s; }
.listen-ui .controls button { width: 3.2rem; height: 3.2rem; border-radius: 99px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .45); font-size: 1.2rem; cursor: pointer; }
.listen-ui.show .controls, .listen-ui.show .caption { opacity: 1; pointer-events: auto; }

/* picker */
.picker { position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; }
.picker[hidden] { display: none; }
.picker-panel { margin-top: calc(3.2rem + var(--safe-top)); width: min(34rem, 94vw); background: #18140f; border: 1px solid var(--line);
  border-radius: 1rem; padding: .9rem; }
.picker-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.picker select { flex: 1; min-width: 6rem; background: #221c15; border: 1px solid var(--line); border-radius: .55rem; padding: .45rem .5rem; }
.slices { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0; max-height: 40dvh; overflow-y: auto; }
.slices button { min-width: 2.1rem; height: 2.1rem; border-radius: .4rem; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.slices button.img { border-color: #6b5a40; color: var(--ink); }
.slices button.cur { background: var(--accent); border-color: var(--accent); color: #1a140c; font-weight: 700; }
.picker-close { width: 100%; padding: .55rem; border-radius: .6rem; border: 0; background: var(--accent); color: #1a140c; font-weight: 600; cursor: pointer; }
.error { padding: 2rem; color: #f08a7a; }

/* settings */
.settings-panel { max-height: calc(100dvh - 4.5rem - var(--safe-top)); overflow-y: auto; }
.settings-panel h3 { margin: 0 0 .6rem; font-size: 1rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.set-row select { flex: 1; max-width: 70%; background: #221c15; border: 1px solid var(--line); border-radius: .55rem; padding: .45rem .5rem; }
.set-ctl { display: flex; align-items: center; gap: .4rem; }
.set-ctl button { min-width: 2.4rem; height: 2.1rem; padding: 0 .7rem; border-radius: .5rem; border: 1px solid var(--line); background: #221c15; cursor: pointer; }
.set-ctl output { min-width: 3rem; text-align: center; color: var(--muted); font-size: .85rem; }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #1a140c; font-weight: 600; }
.about-app { margin: .7rem 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.about-app summary { cursor: pointer; color: var(--ink); }
.about-app h4 { margin: .7rem 0 .3rem; color: var(--ink); font-size: .85rem; }
.about-app p { margin: .3rem 0 .5rem; }
.about-app a { color: var(--accent); }

/* image fix note */
.fix-btn { flex: none; padding: .15rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--muted); font-size: .75rem; cursor: pointer; }
.fix-btn[hidden] { display: none; }
.fix-panel h3 { margin: 0 0 .3rem; font-size: 1rem; }
.fix-ref { margin: 0 0 .5rem; color: var(--muted); font-size: .82rem; }
.fix-open { margin: 0 0 .6rem; padding-left: 1.1rem; max-height: 25dvh; overflow-y: auto; color: #f0c47b; font-size: .84rem; line-height: 1.4; }
.fix-panel textarea { display: block; width: 100%; padding: .6rem; resize: vertical; color: var(--ink); background: #221c15; border: 1px solid var(--line); border-radius: .55rem; font: .92rem/1.45 var(--sans); }
.fix-status { min-height: 1.1rem; margin: .4rem 0; color: #f08a7a; font-size: .8rem; }
.fix-actions { display: flex; gap: .5rem; }
.fix-actions button { flex: 1; }
#fixCancel { padding: .55rem; border-radius: .6rem; border: 1px solid var(--line); background: none; cursor: pointer; }

/* administrator review */
#reviewMode { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; overflow: hidden; background: #101311; }
#reviewMode[hidden] { display: none; }
.review-toolbar { display: flex; align-items: center; gap: .65rem; min-height: 3.8rem; padding: .55rem 1rem; background: #1a201d; border-bottom: 1px solid var(--line); }
.review-toolbar strong { white-space: nowrap; }
.review-count { color: #b9c3bc; font-size: .86rem; white-space: nowrap; }
.review-toolbar select { min-width: 8rem; max-width: 18rem; padding: .45rem .55rem; background: #252d28; border: 1px solid var(--line); border-radius: .35rem; }
.review-back, .review-export, .review-prompt-head button, .review-actions button { min-height: 2.45rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: .35rem; cursor: pointer; }
.review-back, .review-export, .review-prompt-head button { background: #252d28; }
.review-work { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 38rem); }
.review-visual { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 1rem; background: radial-gradient(ellipse at center, #27312a, #101311 72%); }
.review-visual img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.review-panel { min-height: 0; overflow-y: auto; padding: 1rem 1.2rem max(1.2rem, var(--safe-bottom)); border-left: 1px solid var(--line); background: #181e1a; }
.review-heading { display: flex; align-items: flex-start; gap: .75rem; }
.review-heading h1 { margin: .2rem 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; }
.review-reference, .review-position, .review-scores { color: #b9c3bc; font-size: .82rem; }
.review-reference, .review-summary, .review-scores { margin: .25rem 0; }
.review-summary { color: #d3dad4; line-height: 1.45; }
.review-position { margin-left: auto; white-space: nowrap; }
.review-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: .45rem; margin-top: .55rem; }
.review-nav button { min-height: 2.3rem; padding: .35rem .65rem; color: var(--ink); background: #252d28; border: 1px solid var(--line); border-radius: .35rem; cursor: pointer; }
.review-nav button:first-child { text-align: left; }
.review-nav button:last-child { text-align: right; }
.review-nav button:disabled { opacity: .35; cursor: default; }
.review-nav #reviewSkip { color: #d3dad4; background: transparent; }
.review-reasons, .review-passage { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.review-reasons ul { margin: .35rem 0; padding-left: 1.2rem; color: #f0c47b; line-height: 1.4; }
.review-passage .verses { margin-top: .35rem; font-size: 1rem; line-height: 1.45; }
.review-field, .review-prompt-head { display: block; margin-top: .8rem; font-size: .88rem; font-weight: 600; }
.review-field textarea, .review-prompt { display: block; width: 100%; margin-top: .3rem; padding: .6rem; resize: vertical; color: var(--ink); background: #0e1310; border: 1px solid var(--line); border-radius: .35rem; font: .9rem/1.45 var(--sans); }
.review-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.review-prompt-head button { min-height: 2rem; padding: .3rem .6rem; }
.review-actions { display: flex; gap: .6rem; margin-top: .7rem; }
.review-actions button { flex: 1; font-weight: 600; }
.review-approve { background: #263b32; border-color: #577663 !important; }
.review-regenerate { color: #17120a; background: #d9ac62; border-color: #d9ac62 !important; }
.review-status { min-height: 1.2rem; margin: .45rem 0 0; color: #b9c3bc; font-size: .8rem; }
.review-empty { margin: auto; max-width: 34rem; padding: 2rem; text-align: center; color: #d3dad4; line-height: 1.5; }
body.review-mode { overflow: hidden; }
@media (max-width: 760px) {
  .review-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back title" "count count" "export export" "book book" "item item"; gap: .4rem; padding: .45rem .6rem; }
  .review-back { grid-area: back; justify-self: start; }
  .review-toolbar strong { grid-area: title; align-self: center; white-space: normal; }
  .review-count { grid-area: count; width: auto; align-self: center; white-space: normal; }
  .review-toolbar select { min-width: 0; max-width: none; width: 100%; }
  #reviewBookFilter { grid-area: book; }
  #reviewItemSelect { grid-area: item; }
  .review-export { grid-area: export; justify-self: end; }
  .review-work { grid-template-columns: 1fr; grid-template-rows: minmax(12rem, 38dvh) minmax(0, 1fr); }
  .review-visual { padding: .35rem; }
  .review-panel { padding: .8rem .9rem max(1rem, var(--safe-bottom)); border-left: 0; border-top: 1px solid var(--line); }
}