/* styles.css */
/* Core functionality and custom UI states that are not natively handled by Tailwind utilities */

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

/* Design tokens (see tailwind.config.js). Warm neutrals with a violet accent
   reserved for actions and selection. Dark mode follows the system setting,
   or can be forced with data-theme on <html>. */
:root {
  color-scheme: light;
  --c-ground: 246 244 241;
  --c-card: 255 255 255;
  --c-tile: 239 235 230;
  --c-line: 230 224 217;
  --c-ink: 28 25 23;
  --c-ink-2: 56 50 45;
  --c-muted: 107 99 91;
  --c-accent: 91 60 196;
  --c-on-accent: 255 255 255;
  --c-accent-soft: 236 231 251;
  --c-accent-text: 74 47 176;
  --c-danger: 220 38 38;
  --c-warn: 180 83 9;
  --shadow-1: rgba(28, 25, 23, 0.05);
  --shadow-2: rgba(28, 25, 23, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-ground: 20 18 16;
    --c-card: 31 28 25;
    --c-tile: 42 38 34;
    --c-line: 54 49 44;
    --c-ink: 244 241 236;
    --c-ink-2: 220 213 205;
    --c-muted: 169 159 149;
    --c-accent: 164 142 245;
    --c-on-accent: 22 16 45;
    --c-accent-soft: 44 36 80;
    --c-accent-text: 187 169 255;
    --c-danger: 248 113 113;
    --c-warn: 251 191 36;
    --shadow-1: rgba(0, 0, 0, 0.3);
    --shadow-2: rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-ground: 20 18 16;
  --c-card: 31 28 25;
  --c-tile: 42 38 34;
  --c-line: 54 49 44;
  --c-ink: 244 241 236;
  --c-ink-2: 220 213 205;
  --c-muted: 169 159 149;
  --c-accent: 164 142 245;
  --c-on-accent: 22 16 45;
  --c-accent-soft: 44 36 80;
  --c-accent-text: 187 169 255;
  --c-danger: 248 113 113;
  --c-warn: 251 191 36;
  --shadow-1: rgba(0, 0, 0, 0.3);
  --shadow-2: rgba(0, 0, 0, 0.45);
}

/* Mobile browsers (iOS Safari, Android Chrome/Samsung Internet) can
   natively scroll the whole page to keep a focused contenteditable
   visible above the on-screen keyboard, regardless of h-screen/
   overflow-hidden on descendants - which pushes the fixed header off
   the top of the screen while typing. Locking html/body from scrolling
   at all removes that scroll container, so there's nothing for the OS
   to move; every real scroll region in this app already has its own
   overflow-y-auto (note body, notes list). */
html, body {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* h-screen is 100vh, the *large* viewport, which never shrinks for the
   keyboard. 100dvh follows the real visible height, so with
   interactive-widget=resizes-content (index.html) Android Chrome gives the
   note scroller only the space above the keyboard (issue #1). */
#app-container {
  height: 100vh;
  height: 100dvh;
}

/* View Transitions handled by app.js state machine */
.view {
  display: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.view.active {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Motion ---
   Quick, decelerating movement so the app feels responsive, not slow.
   Entrance animations use fill-mode "backwards" (hold the first frame only
   during any delay): "both" would keep the last frame's transform forever and
   override the element's own transforms afterward, e.g. the cards' press
   feedback or the toast's centering. Exit animations use "both" so the
   element stays hidden until it is actually removed. */
:root {
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Screen changes: forward (into a note) slides from the right, back from the left */
.view.active.anim-forward { animation: slideFromRight 0.32s var(--ease-out) backwards; }
.view.active.anim-back { animation: slideFromLeft 0.32s var(--ease-out) backwards; }
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

/* Passage picker: slides up as a full-screen sheet */
#bible-picker-modal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.22s ease, transform 0.32s var(--ease-out);
}
#bible-picker-modal.is-open {
  opacity: 1;
  transform: none;
}

/* Bottom sheets and their dimmed background */
.sheet-in { animation: sheetUp 0.32s var(--ease-out) backwards; }
.sheet-out { animation: sheetDown 0.2s ease-in both; }
.scrim-in { animation: fadeOnly 0.25s ease backwards; }
.scrim-out { animation: fadeOnly 0.2s ease reverse both; }
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes sheetDown {
  from { transform: none; }
  to { transform: translateY(100%); }
}
@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Dialog: backdrop fades, card settles in */
.dialog-in { animation: fadeOnly 0.2s ease backwards; }
.dialog-in > * { animation: dialogPop 0.26s var(--ease-out) backwards; }
@keyframes dialogPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* Toast slides up from the bottom (it's centered with a -50% X translate) */
.toast-in { animation: toastUp 0.3s var(--ease-out) backwards; }
@keyframes toastUp {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Menus pop from their corner */
.menu-in { animation: menuPop 0.18s var(--ease-out) backwards; transform-origin: top right; }
@keyframes menuPop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* Content that appears in place: sermon cards (staggered), chapter grids,
   picker steps, the anchor scripture text */
.rise-in { animation: riseIn 0.34s var(--ease-out) backwards; }
.fade-in { animation: fadeOnly 0.22s ease backwards; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Inputs that size to their text (pills in the editor's details row).
   Browsers without field-sizing fall back to the min/max widths. */
.auto-width {
  field-sizing: content;
}

/* Form overrides */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* Rich Text Placeholder pseudo-element */
.rich-text-editor:empty:before,
#note-title:empty:before {
  content: attr(data-placeholder);
  color: rgb(var(--c-muted));
  pointer-events: none;
  display: block;
  white-space: pre-wrap;
}

#note-title:focus:empty:before {
  content: "";
}

/* Lists in the note editor - Tailwind's base reset strips bullets/numbers
   and indentation from ul/ol, so restore them for sermon-outline notes. */
.rich-text-editor ul,
.rich-text-editor ol {
  padding-left: 1.5rem;
  margin: 0.25rem 0;
}
.rich-text-editor ul { list-style: disc; }
.rich-text-editor ol { list-style: decimal; }
.rich-text-editor ul ul { list-style: circle; }
.rich-text-editor ul ul ul { list-style: square; }
.rich-text-editor ol ol { list-style: lower-alpha; }
.rich-text-editor li { margin: 0.125rem 0; }
.rich-text-editor li::marker { color: rgb(var(--c-muted)); }

/* Scripture inserted inline from the toolbar's Verse button: book-style
   serif with an accent bar, matching the sermon's anchor scripture. Older
   notes wrapped the text in <i>; render it upright either way. */
.rich-text-editor .note-scripture {
  position: relative;
  font-family: 'Literata', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--c-ink-2));
  padding-left: 1rem;
  margin: 0.75rem 0;
}
.rich-text-editor .note-scripture::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 3px;
  border-radius: 3px;
  background: rgb(var(--c-accent));
}
.rich-text-editor .note-scripture i {
  font-style: normal;
}
.rich-text-editor .note-scripture sup {
  color: rgb(var(--c-muted));
  font-size: 0.65em;
  margin-right: 0.2rem;
}
.rich-text-editor .note-scripture-ref {
  display: block;
  margin-top: 0.35rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  color: rgb(var(--c-ink));
}

/* The sermon's anchor scripture text (fetched verses) */
.scripture-body .v-num {
  color: rgb(var(--c-muted));
  font-size: 0.65em;
  margin-right: 0.2rem;
  user-select: none;
}
#anchor-scripture-container.collapsed #scripture-chevron {
  transform: rotate(180deg);
}

/* Legacy scripture block from an early version of the picker - kept so old
   notes that contain it still render consistently. */
.scripture-block {
  margin: 1rem 0;
  padding: 1rem;
  background: rgb(var(--c-tile));
  border-left: 3px solid rgb(var(--c-accent));
  border-radius: 0 0.5rem 0.5rem 0;
  color: rgb(var(--c-ink-2));
  font-family: 'Literata', Georgia, serif;
  font-size: 0.95rem;
}
.scripture-block .v-num {
  color: rgb(var(--c-muted));
  font-size: 0.75em;
  margin-right: 0.25rem;
  user-select: none;
}

/* Note text previews on the sermon cards */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide scrollbars on horizontal chip rows */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }