/* ============================================================
   reader.css - Section Reader Styles
   ============================================================ */

/* ----- Top Bar ----- */

.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.back-link {
  font-size: 0.95rem;
  color: #7c3aed;
  text-decoration: none;
  white-space: nowrap;
}

.back-link:hover { text-decoration: underline; }

.top-bar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #202124;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-counter {
  font-size: 0.9rem;
  color: #5f6368;
  white-space: nowrap;
}

/* ----- Main Content ----- */

.page-display {
  margin-top: 72px;
  margin-bottom: 100px;
  padding: 16px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  transition: transform 0.2s ease;
}

/* ----- Text View ----- */

.text-view {
  max-width: 800px;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #202124;
}

.text-view h1,
.text-view h2,
.text-view h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a2e;
  margin-top: 1.5em;
}

.text-view h2 {
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid #e8eaed;
}

.text-view h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5em;
}

.text-view h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  color: #1a1a2e;
  margin-top: 1em;
  margin-bottom: 0.4em;
}

.text-view p { margin-bottom: 1em; }

.text-view blockquote {
  border-left: 3px solid #dadce0;
  margin: 1em 0;
  padding: 0.5em 1em;
  color: #5f6368;
  background: #fafafa;
  border-radius: 0 6px 6px 0;
}

.text-view blockquote p { margin-bottom: 0.5em; }

.text-view .page-content { padding: 0; }

/* --- Speaker labels --- */
.text-view .speaker {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3em;
  display: block;
}

.text-view .speaker--host { color: #7c3aed; }
.text-view .speaker--guest { color: #0d9488; }
.text-view .speaker--note {
  color: #64748b;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  margin-bottom: 1em;
}

/* --- Transcript block --- */
.text-view .transcript {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 1.5em;
}

.text-view .transcript p:last-child { margin-bottom: 0; }

/* --- Definition boxes: green --- */
.text-view .definition-box {
  border-left: 4px solid #10b981;
  background: #f0faf3;
  padding: 14px 18px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

.text-view .definition-box strong { color: #065f46; }

/* --- Highlight boxes: blue --- */
.text-view .highlight-box {
  border-left: 4px solid #7c3aed;
  background: #f5f3ff;
  padding: 14px 18px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

.text-view .highlight-box strong { color: #5b21b6; }

/* --- Warning boxes: amber --- */
.text-view .warning-box {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  padding: 14px 18px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

.text-view .warning-box strong { color: #92400e; }

/* --- Quote boxes: for direct quotes --- */
.text-view .quote-box {
  border-left: 4px solid #6366f1;
  background: #eef2ff;
  padding: 14px 18px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* --- Commentary layer --- */
.text-view .commentary {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 24px;
  margin-top: 2em;
}

.text-view .commentary > h3 {
  font-size: 1.15rem;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #e8eaed;
}

.text-view .commentary-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid #eef0f2;
}

.text-view .commentary-section:last-child { margin-bottom: 0; }

.text-view .commentary-section h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.text-view .commentary-section p {
  margin-bottom: 0;
  color: #3c4043;
  font-size: 1.02rem;
  line-height: 1.75;
}

.text-view .commentary .definition-box { margin: 12px 0; }

/* ----- Zoom Panel ----- */

.zoom-panel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(-90%, -50%);
  transition: transform 0.25s ease;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: rgba(32, 33, 36, 0.85);
  border-radius: 0 10px 10px 0;
  backdrop-filter: blur(6px);
}

.zoom-panel:hover { transform: translate(0, -50%); }

.zoom-btn {
  background: transparent;
  color: #e8eaed;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.zoom-btn:hover { background: rgba(255, 255, 255, 0.15); }

.zoom-btn.active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* ----- Navigation ----- */

.page-nav {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 90;
  background: #fff;
  padding: 8px 20px;
  border-radius: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.nav-btn {
  min-width: 48px;
  height: 48px;
  border: none;
  border-radius: 24px;
  background: #f1f3f4;
  color: #202124;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0 20px;
  transition: background 0.15s, box-shadow 0.15s;
}

.nav-btn:hover { background: #e8eaed; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.nav-btn:active { background: #dadce0; }

.page-input-wrap { display: flex; align-items: center; }

.page-input {
  width: 80px;
  height: 40px;
  text-align: center;
  border: 1px solid #dadce0;
  border-radius: 20px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}

.page-input::-webkit-inner-spin-button,
.page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-input:focus { border-color: #7c3aed; }

/* ----- Progress Bar ----- */

.progress-bar-track {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #e8eaed;
  z-index: 200;
}

.progress-bar-fill {
  height: 100%;
  background: #7c3aed;
  width: 0;
  transition: width 0.3s ease;
}

/* ----- Context Menu FAB ----- */

.context-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #7c3aed;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

.context-fab:hover { background: #6d28d9; transform: scale(1.05); }

/* ----- Context Menu Overlay ----- */

.context-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.context-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.context-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ctx-nav-btn {
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 20px;
  background: #f1f3f4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.ctx-nav-btn:hover { background: #e8eaed; }

.ctx-page-label { font-size: 0.9rem; color: #5f6368; }

.ctx-btn {
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #7c3aed;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}

.ctx-btn:hover { background: #6d28d9; }

.ctx-btn-close { background: #f1f3f4; color: #202124; }
.ctx-btn-close:hover { background: #dadce0; }

.ctx-search-wrap { position: relative; }

.ctx-search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.ctx-search-input:focus { border-color: #7c3aed; }

.search-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
}

.search-results:empty { display: none; }

.search-results li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f3f4;
  transition: background 0.1s;
}

.search-results li:last-child { border-bottom: none; }
.search-results li:hover { background: #f1f3f4; }

.search-results .result-page {
  font-weight: 600;
  color: #7c3aed;
  margin-right: 8px;
}

.ctx-link {
  display: block;
  text-align: center;
  color: #7c3aed;
  text-decoration: none;
  font-size: 0.9rem;
}

.ctx-link:hover { text-decoration: underline; }

/* ----- Sepia Theme ----- */

body.sepia {
  background-color: #f4ecd8;
}

body.sepia .top-bar {
  background: #f4ecd8;
  box-shadow: 0 1px 4px rgba(80, 60, 30, 0.12);
}

body.sepia .top-bar-title { color: #3e2c1c; }
body.sepia .page-counter { color: #7a6652; }
body.sepia .back-link { color: #7a5230; }

body.sepia .text-view { color: #3e2c1c; }

body.sepia .text-view h2 {
  color: #3e2c1c;
  border-bottom-color: #d4c4a8;
}

body.sepia .text-view h3,
body.sepia .text-view h4 { color: #3e2c1c; }

body.sepia .text-view .speaker--host { color: #7a5230; }
body.sepia .text-view .speaker--guest { color: #4a7c6f; }
body.sepia .text-view .speaker--note { color: #7a6652; }

body.sepia .text-view .transcript {
  background: #faf5e8;
  border-color: #d4c4a8;
}

body.sepia .text-view .commentary {
  background: #efe6d0;
  border-color: #d4c4a8;
}

body.sepia .text-view .commentary > h3 {
  color: #7a6652;
  border-bottom-color: #d4c4a8;
}

body.sepia .text-view .commentary-section {
  background: #faf5e8;
  border-color: #e2d6be;
}

body.sepia .text-view .commentary-section h4 { color: #7a5230; }
body.sepia .text-view .commentary-section p { color: #4a3a2a; }

body.sepia .text-view .definition-box {
  background: #eef5e8;
  border-left-color: #6b9e5e;
}

body.sepia .text-view .definition-box strong { color: #3d6b30; }

body.sepia .text-view .highlight-box {
  background: #ede8f5;
  border-left-color: #7a5230;
}

body.sepia .text-view .highlight-box strong { color: #5a3820; }

body.sepia .text-view .warning-box {
  background: #f5f0e0;
  border-left-color: #c49030;
}

body.sepia .text-view .warning-box strong { color: #7a5a10; }

body.sepia .text-view .quote-box {
  background: #e8e4f0;
  border-left-color: #6a5a90;
}

body.sepia .page-nav {
  background: #f4ecd8;
  box-shadow: 0 2px 12px rgba(80, 60, 30, 0.15);
}

body.sepia .nav-btn { background: #e8dfc8; color: #3e2c1c; }
body.sepia .nav-btn:hover { background: #ddd2b8; }

body.sepia .page-input {
  border-color: #d4c4a8;
  background: #faf5e8;
  color: #3e2c1c;
}

body.sepia .page-input:focus { border-color: #7a5230; }

body.sepia .progress-bar-track { background: #d4c4a8; }
body.sepia .progress-bar-fill { background: #7a5230; }

body.sepia .context-fab { background: #7a5230; box-shadow: 0 4px 12px rgba(122, 82, 48, 0.35); }
body.sepia .context-fab:hover { background: #5e3e20; }

body.sepia .context-card { background: #f4ecd8; }
body.sepia .ctx-nav-btn { background: #e8dfc8; }
body.sepia .ctx-nav-btn:hover { background: #ddd2b8; }
body.sepia .ctx-page-label { color: #7a6652; }
body.sepia .ctx-btn { background: #7a5230; }
body.sepia .ctx-btn:hover { background: #5e3e20; }
body.sepia .ctx-btn-close { background: #e8dfc8; color: #3e2c1c; }
body.sepia .ctx-btn-close:hover { background: #ddd2b8; }
body.sepia .ctx-search-input { border-color: #d4c4a8; background: #faf5e8; }
body.sepia .ctx-search-input:focus { border-color: #7a5230; }
body.sepia .ctx-link { color: #7a5230; }
body.sepia .search-results { background: #faf5e8; }
body.sepia .search-results li { border-bottom-color: #e8dfc8; }
body.sepia .search-results li:hover { background: #efe6d0; }
body.sepia .search-results .result-page { color: #7a5230; }

/* ----- View Toggle: transcript-only / commentary-only ----- */

body.view-transcript .text-view .commentary { display: none; }
body.view-commentary .text-view .transcript { display: none; }

/* ----- View mode indicator ----- */

.view-indicator {
  position: fixed;
  top: 64px;
  right: 16px;
  background: #7c3aed;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  z-index: 110;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.view-indicator.visible { opacity: 1; }

body.sepia .view-indicator { background: #7a5230; }

/* ----- Responsive ----- */

@media (max-width: 768px) {
  .top-bar { padding: 0 12px; height: 48px; }
  .top-bar-title { font-size: 0.95rem; }
  .back-link { font-size: 0.85rem; }
  .page-counter { font-size: 0.8rem; }
  .page-display { margin-top: 60px; margin-bottom: 90px; padding: 8px; }

  .text-view { font-size: 1rem; line-height: 1.7; }
  .text-view h2 { font-size: 1.3rem; }
  .text-view .commentary { padding: 16px; }
  .text-view .commentary-section { padding: 12px 14px; }

  .text-view .definition-box,
  .text-view .highlight-box,
  .text-view .warning-box,
  .text-view .quote-box { padding: 10px 14px; }

  .page-nav { padding: 6px 12px; gap: 10px; }
  .nav-btn { padding: 0 14px; font-size: 0.85rem; }
  .context-card { padding: 20px 16px; width: 300px; }
  .zoom-panel { padding: 8px 6px; }
  .zoom-btn { padding: 4px 10px; font-size: 0.75rem; }
}