/* Kim's Book Reader — kitty theme 🐾
   Dark by default, calm warm colors, big friendly touch targets. */

:root {
  --kitty-accent: #e58fb1;        /* dusty rose */
  --kitty-accent-strong: #d4649a;
  --kitty-cream: #fdf3e7;
  --kitty-plum: #2a2233;
}

/* ---- palette ------------------------------------------------------- */

[data-bs-theme="dark"] {
  --bs-body-bg: #241d2e;          /* soft plum, gentler than pure black */
  --bs-body-color: #f2e9f4;
  --bs-tertiary-bg: #2f2740;
  --bs-secondary-bg: #3a3150;
}

[data-bs-theme="light"] {
  --bs-body-bg: var(--kitty-cream);
  --bs-body-color: #3c2a3e;
  --bs-tertiary-bg: #f7e8d8;
}

.btn-primary {
  --bs-btn-bg: var(--kitty-accent-strong);
  --bs-btn-border-color: var(--kitty-accent-strong);
  --bs-btn-hover-bg: #c25488;
  --bs-btn-hover-border-color: #c25488;
  --bs-btn-active-bg: #b04a7c;
  --bs-btn-active-border-color: #b04a7c;
}

.btn-outline-primary {
  --bs-btn-color: var(--kitty-accent);
  --bs-btn-border-color: var(--kitty-accent);
  --bs-btn-hover-bg: var(--kitty-accent-strong);
  --bs-btn-hover-border-color: var(--kitty-accent-strong);
  --bs-btn-active-bg: var(--kitty-accent-strong);
  --bs-btn-active-border-color: var(--kitty-accent-strong);
}

.text-kitty { color: var(--kitty-accent); }

.card, .list-group-item, .btn, .form-control, .form-select, .offcanvas, .toast {
  border-radius: 1rem;
}

/* ---- library ------------------------------------------------------- */

.book-cover {
  width: 3.5rem;
  height: 5.25rem;
  object-fit: cover;
}

/* Show the whole title, wrapped and kept inside the card. overflow-wrap keeps
   an absurdly long unbroken title (or URL-like string) from spilling past the
   card edge; the title used to be text-truncate'd to one clipped line. */
.book-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.book-progress {
  height: 0.5rem;
  border-radius: 1rem;
}

.book-progress .progress-bar {
  background: var(--kitty-accent-strong);
}

.empty-cat {
  font-size: 4rem;
  filter: grayscale(0.2);
}

/* "Kim verified" reminder: loud until checked, quiet after (book always openable) */
.book-card.unverified {
  border: 2px solid #e6a23c;
  box-shadow: 0 0 0 0.2rem rgba(230, 162, 60, 0.25);
}

.book-card.unverified .verify-check {
  background: rgba(230, 162, 60, 0.15);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 2.1rem;
  font-weight: 600;
}

.book-card .verify-check label { cursor: pointer; }

.book-card:not(.unverified) .verify-check {
  opacity: 0.6;
  font-size: 0.85rem;
}

/* ---- reader toolbar (big labeled buttons, always visible) ---------- */

.reader-toolbar {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.reader-toolbar::-webkit-scrollbar { display: none; }

.toolbar-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 4.2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  border: none;
  background: transparent;
  color: var(--bs-body-color);
  border-radius: 0.75rem;
}

.toolbar-btn .icon { font-size: 1.25rem; }

.toolbar-btn:hover, .toolbar-btn:focus {
  background: var(--bs-secondary-bg);
}

/* thin whole-book progress bar under the toolbar */
.book-bar {
  height: 0.3rem;
  background: var(--bs-secondary-bg);
}

.book-bar .fill {
  height: 100%;
  width: 0;
  background: var(--kitty-accent-strong);
  transition: width 0.4s ease;
}

/* ---- reading / listen view ----------------------------------------- */

#pdfCanvas {
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border-radius: 0.5rem;
}

.sentence-box {
  font-size: calc(1.15rem * var(--read-scale, 1));
  line-height: var(--read-leading, 1.9);
  /* keep last lines above the playback bar — reader.js publishes the bar's
     real height (it wraps to 2-3 rows on narrow phones) */
  padding-bottom: calc(var(--playbar-h, 6rem) + 1.5rem);
}

/* 🎨 Behind the text: an (optionally see-through) color card under the words —
   set from the Comfort panel; --read-pane-* come from reader.js */
body.has-pane .sentence-box {
  background: var(--read-pane-bg);
  color: var(--read-pane-text, inherit);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  border-radius: 0.75rem;
}
.pane-dot.chosen, .pane-btn.chosen { border-color: var(--bs-body-color); transform: scale(1.12); }
.pane-btn.chosen { transform: none; font-weight: 600; }

body.easy-font .sentence-box {
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
}

.sentence {
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.1rem 0.15rem;
}

.sentence:hover { background: var(--bs-secondary-bg); }

.sentence.speaking {
  background: #ffe89e;
  color: #212529;
}

[data-bs-theme="dark"] .sentence.speaking {
  background: #7a4a68;
  color: #fff6fb;
}

/* focus mode: the current sentence pops, neighbors stay readable — dimming
   below ~0.6 makes glancing back/ahead impossible and turns paragraph ends
   into little cliffs */
body.focus-mode .sentence:not(.speaking) { opacity: 0.6; }
body.focus-mode .sentence.speaking { font-weight: 600; }
/* the voice skipped it (🔇 Skip citations & captions) — tap it to hear it */
.sentence.skipped:not(.speaking) { opacity: 0.5; font-style: italic; }

.playback-bar { padding-bottom: env(safe-area-inset-bottom); }

/* The shared nav renders its rows as sibling .container-fluid divs; Bootstrap's
   .navbar-expand lays nav children in a nowrap ROW, which put row 2 (the
   reader tabs) beside row 1 — off-screen on phones. Stack them. */
.kbn-nav { flex-direction: column; align-items: stretch; }

/* Used by the nav title wrapper and book cards but never defined anywhere —
   without it a flex item's min-content size is the full untruncated title,
   which shoved the nav buttons off-screen on phones. */
.min-width-0 { min-width: 0; }

/* a finished audiobook: the 🎧 card button turns green so "ready" is visible at rest */
.ab-toggle.ab-ready {
  color: var(--bs-success);
  border-color: var(--bs-success);
}

.voice-select { max-width: 11rem; }

.sticky-under-nav {
  position: sticky;
  /* below the sticky navbar, not underneath it (navbar z-index 1020);
     --kbn-nav-h is bumped by render_nav() when the nav has a second row */
  top: var(--kbn-nav-h, 3.5rem);
  z-index: 10;
}

/* ---- split view (book page beside the listening text) --------------- */

#viewsWrap { display: flex; align-items: flex-start; }

#viewsWrap > main { flex: 1 1 0; min-width: 0; }

body.split-view #viewsWrap > main {
  /* nav + ~8px of toolbar chrome; the rest tracks the real playback bar */
  height: calc(100vh - var(--kbn-nav-h, 3.5rem) - 8px - var(--playbar-h, 96px));
  overflow-y: auto;
}

@media (max-width: 767px) {
  body.split-view #viewsWrap { flex-direction: column; }
  body.split-view #viewsWrap > main {
    width: 100%;
    /* flex-basis 0 (from the desktop row layout) would override height on the
       column axis and collapse both panes to nothing — opt out of flex sizing */
    flex: none;
    height: calc(50vh - (var(--kbn-nav-h, 3.5rem) + 8px) / 2 - var(--playbar-h, 96px) / 2);
  }
  body.split-view #readView { border-bottom: 2px solid var(--bs-border-color); }
}

body.split-view #listenView .sticky-under-nav { position: static; }

/* ---- table of contents ---------------------------------------------- */

.toc-item {
  padding: 0.55rem 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--bs-body-color);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.toc-item:hover { background: var(--bs-secondary-bg); }

.toc-item .toc-page { color: var(--bs-secondary-color); flex-shrink: 0; }

.toc-item.current {
  background: var(--bs-secondary-bg);
  border-left: 0.25rem solid var(--kitty-accent);
}

/* ---- highlights ----------------------------------------------------- */

.sentence.hl-yellow { background: rgba(255, 220, 90, 0.45); }
.sentence.hl-green  { background: rgba(120, 220, 130, 0.4); }
.sentence.hl-pink   { background: rgba(255, 130, 180, 0.4); }
.sentence.hl-blue   { background: rgba(120, 180, 255, 0.4); }

/* the spoken-sentence highlight always wins over a stored highlight */
.sentence.speaking { background: #ffe89e !important; }
[data-bs-theme="dark"] .sentence.speaking { background: #7a4a68 !important; }

.sentence .note-mark {
  font-size: 0.7em;
  vertical-align: super;
  cursor: pointer;
}

body.mark-mode .sentence { cursor: crosshair; }

#markModeBtn.active {
  background: var(--kitty-accent-strong);
  color: #fff;
}

.color-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  padding: 0;
}

.color-dot.hl-yellow { background: #ffdc5a; }
.color-dot.hl-green  { background: #78dc82; }
.color-dot.hl-pink   { background: #ff82b4; }
.color-dot.hl-blue   { background: #78b4ff; }

.color-dot.chosen { border-color: var(--bs-body-color); transform: scale(1.15); }

.annot-chip {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* ---- notes & bookmarks --------------------------------------------- */

.note-card {
  border-left: 0.3rem solid var(--kitty-accent);
  white-space: pre-wrap;
}

.jump-chip {
  cursor: pointer;
}

.paw-list li::marker { content: "🐾 "; }

/* ---- flavors & accents (data-kbn-flavor / data-kbn-accent on <html>) ---- */

[data-kbn-flavor="sepia"] {
  --bs-body-bg: #f4e9d3;
  --bs-body-color: #46352a;
  --bs-tertiary-bg: #ecdcbb;
  --bs-secondary-bg: #e2cfa6;
  --bs-border-color: #d5bd8f;
}

[data-kbn-flavor="sepia"] .sentence.speaking {
  background: #e8c26a !important;
  color: #3b2c20;
}

[data-kbn-accent="purple"] { --kitty-accent: #b28fe5; --kitty-accent-strong: #8f64d4; }
[data-kbn-accent="teal"]   { --kitty-accent: #6cc7bc; --kitty-accent-strong: #3f9e92; }
[data-kbn-accent="amber"]  { --kitty-accent: #e8bd6d; --kitty-accent-strong: #cf9434; }

.accent-dot { border-radius: 50%; width: 2.4rem; height: 2.4rem; border: 2px solid var(--bs-border-color); padding: 0; }
.accent-dot.rose   { background: #d4649a; }
.accent-dot.purple { background: #8f64d4; }
.accent-dot.teal   { background: #3f9e92; }
.accent-dot.amber  { background: #cf9434; }
.accent-dot.chosen { border-color: var(--bs-body-color); transform: scale(1.12); }

.flavor-btn.chosen { outline: 3px solid var(--kitty-accent); }

/* ---- settings hub (admin.php) --------------------------------------- */

.link-card { color: var(--bs-body-color); }

.theme-promo-icon { font-size: 2.6rem; }

.link-card:hover, .link-card:focus {
  color: var(--bs-body-color);
  border-color: var(--kitty-accent);
}

/* ---- "Make it yours" editor (theme.php) ----------------------------- */

.color-cell { text-align: center; }

.color-cell label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.color-input {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.15rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: var(--bs-secondary-bg);
  cursor: pointer;
}

.preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--pv-bg);
  color: var(--pv-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.preset-btn .pv-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--pv-accent);
  flex-shrink: 0;
}

.bg-thumb {
  max-width: 100%;
  max-height: 140px;
  border-radius: 0.75rem;
}

/* ---- touch friendliness -------------------------------------------- */

* { -webkit-tap-highlight-color: transparent; }

button, .btn, select, a.btn, .form-check-input, .toolbar-btn, .sentence {
  touch-action: manipulation; /* no double-tap-zoom delay on controls */
}

@media (pointer: coarse) {
  .btn, .form-select, .form-control { min-height: 2.75rem; }
  .btn-sm { min-height: 2.5rem; }
  .toolbar-btn { min-width: 4.6rem; padding: 0.5rem 0.6rem; font-size: 0.78rem; }
  .toolbar-btn .icon { font-size: 1.45rem; }
  .sentence { padding: 0.2rem 0.25rem; }
  .form-check-input { width: 2.4rem; height: 1.3rem; margin-top: 0.1rem; }
  .form-check-input[type="checkbox"]:not([role="switch"]) { width: 1.5rem; height: 1.5rem; }
  .playback-bar .btn-lg { min-height: 3.4rem; min-width: 5rem; font-size: 1.4rem; }
  .playback-bar .btn { min-height: 3rem; }
  .jump-chip { padding: 0.5em 0.8em; font-size: 0.85em; }
  .note-mark { padding: 0.3rem; }
  /* :not(.annot-chip): the tiny highlight chips in note lists reuse
     .color-dot for its palette — they are labels, not touch targets */
  .color-dot:not(.annot-chip), .accent-dot { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
  .preset-btn { min-height: 2.75rem; }
}

.touch-btn { min-width: 2.75rem; }

.note-card-text { white-space: pre-wrap; }

/* ---- My writing (docs.php — the documents open in the cloud) --------- */

.doc-card .doc-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* My writing: the paper-format picker under New document */
#templateRow .btn-check:checked + .btn { background: var(--kitty-accent-strong); border-color: var(--kitty-accent-strong); color: #fff; }

/* ---- reader: copy words out of the book (reader.php / reader.js) ------ */
.sentence-box { user-select: text; -webkit-user-select: text; }
.sentence .note-mark { user-select: none; -webkit-user-select: none; }
.sentence::selection, .sentence-box::selection { background: var(--kitty-accent, #e58fb1); color: #212529; }
/* floating "Copy selected words": sits above the playback bar, never over the nav */
.copy-chip {
  position: fixed;
  left: 50%;
  bottom: calc(var(--playbar-h, 6rem) + 0.75rem);
  transform: translateX(-50%);
  z-index: 1030;
  border-radius: 2rem;
  padding: 0.6rem 1.2rem;
}