:root {
  --bg: #f8f7f5;
  --fg: #1a1a1a;
  --muted: #666;
  --accent: #7a5cfa;
  --accent-muted: rgba(122, 92, 250, 0.18);
  --entity-accent: #2aa198; /* subtle teal */
  --entity-accent-muted: rgba(42, 161, 152, 0.18);
  --border: #e4e1dc;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 16px/1.6 Georgia, "Times New Roman", serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Prefer old-style numerals globally; scope fractions elsewhere */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  overflow: hidden; /* prevent outer scrollbar; use pane scrolls */
}

.topbar {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.subtitle { color: var(--muted); font-size: .95rem; }

.app {
  display: grid;
  grid-template-columns: 220px 1fr 360px;
  gap: 0;
  height: 100vh;
}
/* Prefer dynamic viewport height to avoid iOS toolbar occlusion */
@supports (height: 100dvh) {
  .app { height: 100dvh; }
}

.sidebar {
  border-right: 1px solid var(--border);
  background: #fff;
  padding: 1rem .75rem 2rem;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Use lining numerals in navigation, and disable fraction shaping */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0, "frac" 0;
}
.sidebar-header { font-weight: 600; margin-bottom: .5rem; }
.sidebar-section { margin-bottom: .5rem; }
.sidebar-section .sidebar-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}
.section-toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: .25rem .25rem;
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.section-toggle::before {
  content: '▾';
  display: inline-block;
  margin-right: .25rem;
  transition: transform 160ms ease;
}
.sidebar-section.collapsed .section-toggle::before { transform: rotate(-90deg); }
.sidebar-section .section-body {
  overflow: hidden;
  transition: max-height 180ms ease;
  max-height: 1000px; /* large enough to accommodate content */
}
.sidebar-section.collapsed .section-body { max-height: 0; }

.filters {
  display: grid;
  gap: .25rem;
  padding: .25rem .25rem .5rem .25rem;
}
.filters label { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.filters input[type="checkbox"] { width: 1rem; height: 1rem; }
.sidebar nav a {
  display: block;
  padding: .35rem .5rem;
  margin: 2px 0;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.sidebar nav a.active { background: var(--accent-muted); color: #2b1a9a; }
.sidebar nav a:hover { background: #f2f0ec; }

.content {
  padding: 1.25rem 1.25rem 4rem;
  max-width: 900px;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
  .sidebar { height: 100dvh; }
  .content { height: 100dvh; }
}

/* Keep old-style numerals in reading panes */
.content, .preview {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

/* Only enable diagonal fraction shaping when explicitly marked */
.content .frac, .preview .frac {
  font-variant-numeric: diagonal-fractions;
  font-feature-settings: "frac" 1;
}

.loading { color: var(--muted); padding: 1rem; }

/* Hide mobile toggles on desktop by default */
.mobile-toggle { display: none; }
/* Hide sidebar hard-close on desktop */
.sidebar .close { display: none; }

.chapter-body {
  hyphens: auto;
}
.chapter-body p {
  margin: 0;
  text-align: justify;
}
.chapter-body p + p { text-indent: 1.2em; }
/* Chapter 17: no paragraph indentation */
.chapter-17 .chapter-body p + p { text-indent: 0; }

/* Chapter 7: add vertical separation for ALL CAPS headlines */
.chapter-7 .chapter-body p.headline {
  margin: 0.6rem 0;
  text-indent: 0;
  text-align: center;
  font-weight: 700;
}
/* In Episode 7, do not indent the first paragraph after a headline */
.chapter-7 .chapter-body p.headline + p { text-indent: 0; }
/* Centered chapter number header like "[ N ]" */
#chapter-title {
  font-size: 1.9rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0.5rem 0 1.25rem 0;
  font-weight: 600;
}

/* Episode 9: playbill-style block rendered as vertical lines with preserved spacing */
.playbill { text-align: left; margin: .75rem .25rem 1rem; font-weight: 500; padding-left: 1.2em; }
.playbill-line {
  display: grid;
  grid-template-columns: 22ch 2ch 1fr; /* name | paren | descriptor */
  column-gap: .5ch;
}
.playbill-line.no-split { grid-template-columns: 1fr; }
.playbill-line.no-split .paren, .playbill-line.no-split .desc { display: none; }
.playbill-line .name { justify-self: start; }
.playbill-line .paren { text-align: center; }
.playbill-line .desc { white-space: normal; }

/* Drop cap on first paragraph for selected chapters only (exclude 2,7,11,14,15,17) */
.chapter:not(.chapter-2):not(.chapter-7):not(.chapter-11):not(.chapter-14):not(.chapter-15):not(.chapter-17) .chapter-body p:first-of-type::first-letter {
  float: left;
  /* Target roughly two lines */
  font-size: 3.2rem;
  line-height: 0.9;
  margin-top: 0.04em;
  margin-right: 0.08em;
  font-weight: 700;
}

.word.clickable {
  cursor: pointer;
  border-bottom: 1px dotted rgba(0,0,0,.25);
  box-shadow: inset 0 -2px 0 0 rgba(122, 92, 250, 0.15);
}
.word.clickable:hover { background: rgba(122, 92, 250, 0.07); }
.word.highlight {
  background: var(--accent-muted);
  border-bottom-color: transparent;
}

/* Disable clickable word styling/interactions when Words filter is off */
.app:not(.filter-words) .word.clickable {
  border-bottom: none;
  box-shadow: none;
  cursor: text;
  pointer-events: none;
}
.app:not(.filter-words) .word.clickable:hover { background: transparent; }
.app:not(.filter-words) .word.highlight { background: transparent; }

/* Unique words (occur exactly once). Wrapped as spans but not clickable. */
.word.unique { border-bottom: 1px dotted rgba(0,0,0,.15); }
/* Only highlight unique words when the filter is enabled */
.app.filter-unique .word.unique {
  background: rgba(0, 0, 0, 0.06);
}

.entity.clickable {
  cursor: pointer;
  border-bottom: 1px dashed rgba(0,0,0,.25);
  box-shadow: inset 0 -2px 0 0 rgba(42, 161, 152, 0.15);
}
.entity.clickable:hover { background: rgba(42, 161, 152, 0.07); }
.entity.highlight {
  background: var(--entity-accent-muted);
  border-bottom-color: transparent;
}

.preview {
  border-left: 1px solid var(--border);
  background: #fff;
  height: 100vh;
  overflow: auto;
  padding: 0; /* flush to top; header handles padding */
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
  .preview { height: 100dvh; }
}
.preview-body { padding: .5rem .75rem 2rem; }
/* Add extra breathing room on iOS where bottom toolbars can overlap */
.preview-body { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.preview[aria-hidden="true"] { display: none; }
.preview[aria-hidden="true"] .close, .preview[aria-hidden="true"] .hide { display: none !important; }
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border);
}
.preview-header #preview-word {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On desktop, hide hard close unless a selection exists */
.app:not(.has-preview) .preview-header .close { display: none; }
.preview .close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.preview-header .close { margin-left: auto; }
.preview .hide {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  margin-right: .35rem;
  display: none; /* hidden on desktop */
}
.preview .occurrence {
  padding: .4rem .5rem;
  margin: 2px 0;
  border-radius: 6px;
  cursor: pointer;
}
.preview .occurrence:hover { background: #f5f3ef; }
.preview .occurrence.selected { background: var(--accent-muted); }
.preview .occurrence.entity.selected { background: var(--entity-accent-muted); }
.occurrence .chapter-tag {
  color: var(--muted);
  font-size: .85rem;
  margin-right: .5rem;
}
.occurrence .chapter-tag.entity {
  color: #1d5f59;
}

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  @supports (height: 100dvh) {
    .app { min-height: 100dvh; }
  }
  /* Allow window scrolling on mobile so iOS status-bar tap scrolls to top */
  body { overflow: auto; -webkit-overflow-scrolling: touch; }
  /* Show sidebar toggle on mobile; preview toggle shows only when there is an active selection and drawer is closed */
  .mobile-toggle { display: none; z-index: 120; }
  .mobile-toggle.sidebar-toggle { display: inline-block; left: .5rem; top: .5rem; position: fixed; }
  .app.has-preview:not(.preview-open) .mobile-toggle.preview-toggle { display: inline-block; }
  .mobile-toggle.preview-toggle { position: fixed; right: .5rem; top: .5rem; bottom: auto; }
  /* Mobile toggles */
  .mobile-toggle {
    position: fixed;
    top: .5rem;
    z-index: 50;
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: inherit;
    border-radius: 8px;
    padding: .35rem .55rem;
    font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  .mobile-toggle.sidebar-toggle { left: .5rem; }
  .mobile-toggle.preview-toggle { right: .5rem; }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    z-index: 80; /* below preview, below toggles */
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: 0 0 0 1px var(--border), 0 10px 24px rgba(0,0,0,.08);
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }

  /* Content uses window scroll on mobile */
  .content { height: auto; overflow: visible; }

  /* Preview becomes an off-canvas drawer on the right */
  .preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 92vw;
    max-width: 420px;
    transform: translateX(100%);
    transition: transform 180ms ease;
    box-shadow: 0 0 0 1px var(--border), 0 10px 24px rgba(0,0,0,.08);
    z-index: 90; /* above sidebar; below toggles */
  }
  .app.preview-open .preview { transform: translateX(0); }

  /* Safe-area padding for bottoms so last items aren't obscured by iOS toolbars */
  .sidebar { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .content { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

  /* Make the close button more obvious and not overlapped */
  .preview .close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: 1.25rem;
    z-index: 130; /* above toggles and drawer */
    background: #fff;
    border-radius: 6px;
    padding: .1rem .25rem;
  }
  .preview .hide {
    position: absolute;
    top: .5rem;
    right: 2.25rem; /* sit left of × */
    font-size: 1.1rem;
    z-index: 130;
    background: #fff;
    border-radius: 6px;
    padding: .1rem .25rem;
    display: inline-block; /* ensure visible on mobile */
  }

  /* Reserve space in header for absolute Hide/Close buttons */
  .preview-header { padding-right: 3.25rem; }

  /* Sidebar header close (mobile only) */
  .sidebar .close {
    display: inline-block;
    position: absolute;
    top: .5rem;
    right: .5rem;
    appearance: none;
    border: none;
    background: #fff;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 6px;
    padding: .1rem .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  /* Hide external preview toggle when drawer is open; use in-drawer Hide (⟨) */
}