:root {
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --ink: #2b2620;
  --muted: #8a8175;
  --accent: #7a5c3e;
  --line: #e2dbcd;
  --hl-yellow: rgba(255, 220, 80, .45);
  --hl-green: rgba(140, 205, 130, .45);
  --hl-blue: rgba(130, 180, 235, .45);
  --hl-pink: rgba(245, 150, 180, .45);
  --shadow: 0 8px 30px rgba(60, 45, 25, .18);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 Georgia, 'Times New Roman', serif;
  overflow: hidden;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.linkish { color: var(--accent); text-decoration: underline; font-size: .9em; }
.danger { color: #a33; }
.fleuron { text-align: center; color: var(--accent); font-size: 1.1em; margin: 14px 0; }

/* ---------- auth ---------- */
#auth {
  height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 36px 32px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.5em; font-weight: normal; letter-spacing: .04em; }
.auth-sub { color: var(--muted); margin-top: 8px; font-size: .88em; font-style: italic; }
.auth-card input {
  width: 100%; padding: 10px 12px; margin-bottom: 10px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.auth-card button[type=submit] {
  width: 100%; padding: 10px; background: var(--accent); color: #fff; border-radius: 6px; margin: 6px 0 14px;
}
.auth-error { color: #a33; font-size: .85em; min-height: 1.2em; margin-bottom: 4px; }

/* ---------- views ---------- */
#app { height: 100%; }
#home-view { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#reader-view { height: 100%; display: flex; flex-direction: column; }

/* ---------- home ---------- */
.home-wrap { max-width: 720px; margin: 0 auto; padding: 18px 20px 90px; }

.home-topline {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  color: var(--muted); font-size: .85em;
}
.home-topline .dot { color: var(--line); }

.masthead { text-align: center; margin: 44px 0 6px; }
.masthead h1 { font-size: 2.1em; font-weight: normal; letter-spacing: .05em; }
.masthead-sub { color: var(--muted); font-style: italic; margin-top: 8px; line-height: 1.4; }
.masthead-author {
  margin-top: 14px; font-size: .78em; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}

.home-section h2 {
  display: flex; align-items: center; gap: 16px; margin: 46px 0 18px;
  font-size: .8em; font-weight: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.home-section h2::before, .home-section h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.home-empty { color: var(--muted); text-align: center; font-style: italic; }

/* continue reading */
.continue-card {
  display: block; text-align: center; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-top: 30px;
}
.continue-card:hover { border-color: var(--accent); }
.continue-label {
  display: block; font-size: .72em; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.continue-where { display: block; font-size: 1.1em; margin-top: 6px; }
.continue-detail { display: block; color: var(--muted); font-size: .85em; margin-top: 3px; }

/* meetings */
.meeting {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 14px;
}
.meeting.past { opacity: .55; }
.meeting.next {
  border-color: var(--accent); outline: 1px solid var(--line); outline-offset: 3px;
  box-shadow: var(--shadow); padding: 24px 26px; margin: 22px 0;
}
.meeting-when { color: var(--muted); font-size: .82em; letter-spacing: .04em; }
.meeting-count { color: var(--accent); font-style: italic; margin-left: 10px; }
.meeting-title { font-weight: normal; font-size: 1.12em; margin-top: 4px; }
.meeting.next .meeting-title { font-size: 1.3em; }
.meeting-reading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.meeting-reading-label { color: var(--muted); font-size: .85em; margin-right: 4px; }

.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 3px 12px; font-size: .84em; text-decoration: none; color: inherit;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-page { color: var(--muted); font-size: .82em; }
.chip-dim { border-style: dashed; color: var(--muted); background: none; }

.meeting-body { margin-top: 12px; font-size: .93em; }
.meeting-body p { margin: 8px 0; }
.meeting-body ul, .meeting-body ol { margin: 8px 0; padding-left: 22px; }
.meeting-body li { margin: 4px 0; }
.meeting-body blockquote {
  margin: 10px 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--accent);
  color: var(--muted); font-style: italic;
}
.meeting-body a { color: var(--accent); }
.meeting-more { margin-top: 10px; }
.meeting-more summary { color: var(--muted); font-size: .85em; cursor: pointer; }

/* library */
#library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vol-card {
  display: flex; flex-direction: column; gap: 7px; min-height: 215px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 14px 13px; text-decoration: none; color: inherit;
}
a.vol-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.vol-unavailable { border-style: dashed; opacity: .6; }
.vol-ordinal { font-size: .68em; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.vol-title { font-size: 1em; line-height: 1.3; }
.vol-epigraph { color: var(--muted); font-size: .76em; font-style: italic; line-height: 1.45; flex: 1; }
.vol-progress { display: block; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.vol-progress span { display: block; height: 100%; background: var(--accent); }
.vol-meta { display: block; color: var(--muted); font-size: .74em; margin-top: 6px; }

/* ---------- reader layout ---------- */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 20;
}
#topbar .spacer { flex: 1; }
#btn-home { color: var(--accent); text-decoration: none; font-size: 1.05em; padding: 2px 4px; }
#btn-menu { font-size: 1.2em; padding: 2px 8px; }
#chapter-label { font-size: .92em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-notes { color: var(--accent); font-size: .92em; }
#zoom-ctl { display: flex; align-items: center; gap: 2px; margin-right: 10px; }
#zoom-ctl button { color: var(--muted); padding: 2px 7px; border-radius: 5px; }
#zoom-ctl button:hover { background: var(--bg); color: var(--ink); }
#btn-zoom-in, #btn-zoom-out { font-size: 1.15em; }
#btn-zoom-reset { font-size: .78em; min-width: 44px; text-align: center; }

#reader { flex: 1; position: relative; overflow: hidden; }
#page-wrap { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
#page-box {
  position: relative; margin: 14px auto 40px;
  width: calc(min(94vw, 820px) * var(--zoom, 1));
  box-shadow: var(--shadow); background: #fff;
}
#page-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#hl-layer, #sel-layer, #touch-layer { position: absolute; inset: 0; }
#touch-layer { touch-action: pan-y; cursor: text; }
.hl-rect { position: absolute; border-radius: 2px; pointer-events: none; }
.sel-rect { position: absolute; background: rgba(120, 140, 255, .30); border-radius: 2px; pointer-events: none; }
.hl-note-dot {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
  transform: translate(4px, -4px); pointer-events: none;
}

.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2.2em; color: var(--muted); padding: 20px 10px; z-index: 5; opacity: .55;
}
.nav-arrow:hover { opacity: 1; }
#nav-prev { left: 0; }
#nav-next { right: 0; }

#pagebar {
  display: flex; align-items: center; gap: 14px; padding: 8px 16px;
  background: var(--panel); border-top: 1px solid var(--line);
}
#page-slider { flex: 1; accent-color: var(--accent); }
#page-label { font-size: .85em; color: var(--muted); white-space: nowrap; }

/* ---------- sidebar ---------- */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 85vw);
  background: var(--panel); border-right: 1px solid var(--line); z-index: 40;
  transform: translateX(-100%); transition: transform .2s ease; display: flex; flex-direction: column;
}
#sidebar.open { transform: translateX(0); }
.sidebar-head { display: flex; justify-content: space-between; align-items: start; padding: 16px; border-bottom: 1px solid var(--line); }
.sidebar-back { display: block; color: var(--accent); text-decoration: none; font-size: .82em; margin-bottom: 10px; }
.sidebar-ordinal { font-size: .68em; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.sidebar-title { font-size: 1.05em; }
.sidebar-user { color: var(--muted); font-size: .85em; margin-top: 2px; }
#btn-close-sidebar { font-size: 1.4em; color: var(--muted); }
#chapter-list { list-style: none; overflow-y: auto; flex: 1; padding: 8px 0; }
#chapter-list li { padding: 9px 16px; font-size: .92em; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
#chapter-list li:hover { background: var(--bg); }
#chapter-list li.current { background: var(--bg); border-left: 3px solid var(--accent); padding-left: 13px; }
.ch-pages { color: var(--muted); font-size: .85em; white-space: nowrap; }
.ch-done { color: var(--accent); }
.sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--line); }
#scrim, #modal-scrim {
  position: fixed; inset: 0; background: rgba(40, 30, 15, .35); z-index: 30;
}

/* ---------- popover ---------- */
#popover {
  position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 10px; width: 230px;
}
.pop-colors { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; }
.swatch[data-color=yellow] { background: var(--hl-yellow); }
.swatch[data-color=green] { background: var(--hl-green); }
.swatch[data-color=blue] { background: var(--hl-blue); }
.swatch[data-color=pink] { background: var(--hl-pink); }
.swatch.active { border-color: var(--accent); }
.pop-actions { display: flex; justify-content: space-around; }
.pop-actions button { font-size: .9em; color: var(--accent); }
#pop-note-area textarea, #reflect-text {
  width: 100%; font: inherit; font-size: .92em; padding: 8px; border: 1px solid var(--line);
  border-radius: 6px; resize: vertical; margin-top: 8px; background: #fff;
}
#pop-note-save { display: block; margin: 6px 0 0 auto; color: var(--accent); font-size: .9em; }

/* ---------- reflection modal ---------- */
#modal-scrim { display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
#reflect-modal {
  background: var(--panel); border-radius: 12px; box-shadow: var(--shadow);
  padding: 26px; width: min(560px, 100%);
}
#reflect-modal h2 { font-weight: normal; font-size: 1.2em; }
.modal-sub { color: var(--muted); font-size: .88em; margin: 6px 0 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 18px; margin-top: 14px; align-items: center; }
#reflect-save { background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 6px; }

/* ---------- notes view ---------- */
#notes-view {
  position: fixed; inset: 0; background: var(--bg); z-index: 55; display: flex; flex-direction: column;
}
.notes-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.notes-head h2 { font-weight: normal; font-size: 1.15em; }
#btn-close-notes { font-size: 1.6em; color: var(--muted); }
#notes-body { overflow-y: auto; padding: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.notes-volume {
  font-weight: normal; font-size: .8em; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); margin: 26px 0 16px; text-align: center;
}
.notes-chapter { margin-bottom: 30px; }
.notes-chapter h3 { font-weight: normal; font-size: 1.05em; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; }
.note-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.note-card:hover { border-color: var(--accent); }
.note-quote { font-style: italic; font-size: .95em; }
.chip-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; }
.note-text { margin-top: 6px; font-size: .92em; }
.note-meta { color: var(--muted); font-size: .8em; margin-top: 6px; }
.reflection-card { border-left: 3px solid var(--accent); }
.notes-empty { color: var(--muted); text-align: center; margin-top: 60px; }

#toast {
  position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 8px 18px; border-radius: 20px;
  font-size: .88em; z-index: 70; opacity: .95;
}

@media (max-width: 640px) {
  .nav-arrow { display: none; }
  #btn-notes { font-size: .85em; }
  .masthead h1 { font-size: 1.7em; }
  #library-grid { grid-template-columns: repeat(2, 1fr); }
  .vol-card { min-height: 190px; }
}