:root {
  --bg:        #f5efe2;
  --paper:     #faf6ed;
  --ink:       #2b1f0e;
  --ink-light: #5a4530;
  --direction: #6b5840;
  --poem-bg:   #ede3d0;
  --rule:      #c9b897;
  --label-w:   110px;

  --elijah:        #7a1f1f;
  --elijah-bg:     #fde6c8;
  --elijah-border: #c0622a;
  --elijah-flash:  #f0a040;

  --ahab:    #4a2070;
  --ahab-bg: #f5f0fc;

  --jezebel:    #8b1a4a;
  --jezebel-bg: #fdf0f5;

  --both:    #5a3060;
  --both-bg: #f8f0ff;

  --soldiers:    #3a3a3a;
  --soldiers-bg: #f2f2f2;

  --god:    #1a3a5c;
  --god-bg: #eef4fb;

  --widow:    #2e4a2e;
  --widow-bg: #f0f7f0;

  --obadiah:    #1a4a3a;
  --obadiah-bg: #edf7f3;

  --prophets:    #5a3000;
  --prophets-bg: #fdf5e8;

  --all:    #5a4530;
  --all-bg: #f0ebe0;

  --angel:    #3a5a3a;
  --angel-bg: #f0f7f0;

  --servant:    #5a4010;
  --servant-bg: #fdf8ee;

  --women:    #6a2050;
  --women-bg: #fdf0f8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14110b;
    --paper:     #1d1810;
    --ink:       #e8dec6;
    --ink-light: #b8a988;
    --direction: #9a8866;
    --poem-bg:   #2a2218;
    --rule:      #5a4a30;

    --elijah:        #f0a040;
    --elijah-bg:     #3a2410;
    --elijah-border: #f0a040;
    --elijah-flash:  #c0622a;

    --ahab:    #b89af0;
    --ahab-bg: #1f1828;

    --jezebel:    #f099c0;
    --jezebel-bg: #2a1820;

    --both:    #c8a0d8;
    --both-bg: #221828;

    --soldiers:    #c0c0c0;
    --soldiers-bg: #222;

    --god:    #88c0f0;
    --god-bg: #16202a;

    --widow:    #90c890;
    --widow-bg: #182218;

    --obadiah:    #80d0a8;
    --obadiah-bg: #142218;

    --prophets:    #d8a060;
    --prophets-bg: #2a1f10;

    --all:    #c8b890;
    --all-bg: #221d10;

    --angel:    #a0d8a0;
    --angel-bg: #182218;

    --servant:    #d8b870;
    --servant-bg: #28200f;

    --women:    #e090c0;
    --women-bg: #281828;
  }
}

body[data-theme="light"] { color-scheme: light; }
body[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  background: var(--paper);
  padding: 60px 64px 80px;
  box-shadow: 0 4px 40px rgba(0,0,0,0.12);
  position: relative;
}

@media (max-width: 640px) {
  .page { padding: 16px 12px 80px; }
  .title-block { margin-bottom: 24px; padding-bottom: 16px; }
  .title-block h1 { font-size: 1.5rem; }
  .line { flex-direction: column; }
  .speaker { width: auto; text-align: left; font-size: 0.72em; padding-top: 0; }
  .legend { padding: 10px 12px; gap: 8px 14px; }
  .poem { padding: 12px 14px; }
}

.title-block {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--rule);
}

.title-block h1 {
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
}

.title-block .subtitle {
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.95rem;
}

.poem {
  background: var(--poem-bg);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--rule);
  border-radius: 8px;
  padding: 18px 24px;
  margin: 28px 0;
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.97em;
  line-height: 1.9;
  white-space: pre-wrap;
  text-align: center;
}

.scene-break {
  text-align: center;
  color: var(--rule);
  font-size: 1.4em;
  letter-spacing: 0.4em;
  margin: 32px 0 24px;
  user-select: none;
}

.direction {
  color: var(--direction);
  font-style: italic;
  font-size: 0.92em;
  margin: 25px 0;
  display: block;
}

.prop {
  display: block;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  margin: 20px auto;
  width: fit-content;
  border-radius: 2px;
}

.line {
  display: flex;
  gap: 0 10px;
  margin: 10px 0;
  align-items: flex-start;
  scroll-margin-top: 80px;
}

.speaker {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: var(--label-w);
  text-align: left;
  padding-top: 3px;
  color: var(--ink-light);
}

.text {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 3px solid transparent;
}

.aside {
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.95em;
}

.elijah .speaker { color: var(--elijah); font-weight: 900; }
.elijah .text {
  background: var(--elijah-bg);
  border-left-color: var(--elijah-border);
  border-left-width: 7px;
  color: var(--ink);
  font-weight: 700;
}

.ahab .speaker { color: var(--ahab); }
.ahab .text { background: var(--ahab-bg); border-left-color: var(--ahab); color: var(--ink); }

.jezebel .speaker { color: var(--jezebel); }
.jezebel .text { background: var(--jezebel-bg); border-left-color: var(--jezebel); color: var(--ink); }

.both .speaker { color: var(--both); font-style: italic; }
.both .text { background: var(--both-bg); border-left-color: var(--both); color: var(--ink); font-style: italic; }

.soldiers .speaker { color: var(--soldiers); }
.soldiers .text { background: var(--soldiers-bg); border-left-color: #aaa; color: var(--ink); }

.god .speaker { color: var(--god); }
.god .text { background: var(--god-bg); border-left-color: var(--god); color: var(--ink); }

.widow .speaker { color: var(--widow); }
.widow .text { background: var(--widow-bg); border-left-color: var(--widow); color: var(--ink); }

.obadiah .speaker { color: var(--obadiah); }
.obadiah .text { background: var(--obadiah-bg); border-left-color: var(--obadiah); color: var(--ink); }

.prophets .speaker { color: var(--prophets); font-style: italic; }
.prophets .text { background: var(--prophets-bg); border-left-color: var(--prophets); color: var(--ink); }

.all .speaker { color: var(--all); font-style: italic; }
.all .text { background: var(--all-bg); border-left-color: var(--rule); color: var(--ink); font-weight: 600; }

.angel .speaker { color: var(--angel); }
.angel .text { background: var(--angel-bg); border-left-color: var(--angel); color: var(--ink); }

.servant .speaker { color: var(--servant); }
.servant .text { background: var(--servant-bg); border-left-color: var(--servant); color: var(--ink); }

.women .speaker { color: var(--women); font-style: italic; }
.women .text { background: var(--women-bg); border-left-color: var(--women); color: var(--ink); }

@keyframes elijah-flash {
  0%   { background-color: var(--elijah-bg); transform: scale(1); }
  20%  { background-color: var(--elijah-flash); transform: scale(1.012); }
  100% { background-color: var(--elijah-bg); transform: scale(1); }
}

.elijah-active .text {
  animation: elijah-flash 1.2s ease-out;
  border-left-width: 10px;
}

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--elijah-border);
  width: 0%;
  z-index: 1000;
  transition: width 0.25s ease;
}

#elijah-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(43, 31, 14, 0.92);
  color: #faf6ed;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
}

#elijah-nav button {
  background: none;
  border: 1px solid rgba(250,246,237,0.25);
  color: #faf6ed;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2em;
  border-radius: 3px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 36px;
}

#elijah-nav button:active,
#elijah-nav button:hover { background: rgba(255,246,236,0.18); }

#elijah-nav button.toggle.on { background: var(--elijah-border); border-color: var(--elijah-border); }

#elijah-nav .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

#elijah-nav .counter {
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.1em;
}

#elijah-nav .preview {
  font-size: 0.92em;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

body { padding-bottom: 64px; }

body.cue-mode .line:not(.elijah) .text {
  position: relative;
  color: transparent;
  user-select: none;
  background: transparent !important;
  border-color: rgba(0,0,0,0.05) !important;
  min-height: 0;
  padding: 4px 14px;
  font-size: 0.85em;
}

body.cue-mode .line:not(.elijah) .text::after {
  content: attr(data-cue) " …";
  position: absolute;
  inset: 4px 14px;
  color: var(--ink-light);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.cue-mode .line:not(.elijah) .speaker { opacity: 0.5; }
body.cue-mode .direction,
body.cue-mode .poem,
body.cue-mode .scene-break,
body.cue-mode .prop { opacity: 0.4; }

@media print {
  body { background: white; padding-bottom: 0; }
  .page { box-shadow: none; padding: 0; }
  #elijah-nav, #progress-bar { display: none; }
  .line { page-break-inside: avoid; }
  .scene-break { page-break-after: avoid; }
  .elijah .text   { background: #fff3ec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ahab .text     { background: #f5f0fc; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jezebel .text  { background: #fdf0f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .soldiers .text { background: #f2f2f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .god .text      { background: #eef4fb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .widow .text    { background: #f0f7f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .obadiah .text  { background: #edf7f3; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prophets .text { background: #fdf5e8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .angel .text    { background: #f0f7f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .servant .text  { background: #fdf8ee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .women .text    { background: #fdf0f8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .all .text      { background: #f0ebe0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .poem           { background: #f5f0e8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Index page ── */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.day-card {
  display: block;
  background: var(--poem-bg);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 6px solid var(--elijah-border);
  border-radius: 8px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.day-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.day-card .day-num {
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--elijah);
  font-weight: 800;
  text-transform: uppercase;
}

.day-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 4px 0 6px;
  line-height: 1.3;
}

.day-card .ref {
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.92em;
  margin-bottom: 10px;
}

.day-card .stats {
  font-size: 0.82em;
  color: var(--ink-light);
  letter-spacing: 0.04em;
}

.day-card .stats strong { color: var(--elijah); font-weight: 800; }