/* ==========================================================================
   Eterniseed — Notes panel + reader overlay (Ship Notes, Phase 1, 2026-06-23)
   --------------------------------------------------------------------------
   A right-side slide-over panel for passage notes, plus the reader overlay
   markers that show "you have a note here" on a re-read.

   Responsive posture (Joe 2026-06-23 — "sizing decisions for each format"):
     - Wide screens (≥ 1500px): the panel auto-opens DOCKED in the right
       margin (the reading column is max 720px centred, so a 400px panel sits
       beside the text without covering it — no content shift, no scrim).
     - Tablet / phone (< 1500px): the panel is a slide-over with a scrim; it
       opens from the floating toggle, the pill's "Take Note", or a noted verse.
   ========================================================================== */

/* Floating toggle — bottom-right, STACKED ABOVE the feedback/bug-report FAB
   (.fab in globals.css: 56px tall at bottom: nav + space-7, right: space-9).
   Sharing that slot made the Notes pill cover the bug-report button
   (Laura-reported 2026-06-23), so we align right edges (space-9) and lift the
   Notes toggle above the 56px FAB + a gap. */
.es-notes-toggle {
  position: fixed;
  right: var(--space-9);
  bottom: calc(var(--bottom-nav-height, 64px) + var(--space-7) + 56px + var(--space-5));
  z-index: 8400;
  display: none;                 /* shown by JS only on note-capable surfaces */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--skin-border);
  border-radius: var(--radius-pill);
  background: var(--skin-surface);
  color: var(--skin-ink-primary);
  box-shadow: var(--skin-shadow-float);
  font-family: var(--skin-font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--easing);
}
.es-notes-toggle:hover { transform: translateY(-2px); }
.es-notes-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--skin-accent-strong);
  color: var(--skin-ink-on-brand, #fff);
  font-size: var(--text-xs);
  font-weight: 700;
}
.es-notes-toggle__count[hidden] { display: none; }

/* Scrim (narrow only). */
.es-notes-scrim {
  position: fixed;
  inset: 0;
  z-index: 8450;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) var(--easing), visibility var(--motion-base) var(--easing);
}
.es-notes-scrim.is-visible { opacity: 1; visibility: visible; }

/* Panel. */
.es-notes-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8500;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--skin-surface);
  border-left: 1px solid var(--skin-border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--easing);
  font-family: var(--skin-font-body);
  /* Native edge-to-edge (Capacitor targetSdk 36): this panel is position:fixed
     so the body's safe-area padding doesn't reach it — pad the header below the
     status bar itself. env() is 0 on web + non-notch devices (no-op there). */
  padding-top: var(--eterniseed-safe-top, 0px);
}
.es-notes-panel.is-open { transform: translateX(0); }

.es-notes-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-7);
  border-bottom: 1px solid var(--skin-border);
}
.es-notes-panel__title {
  margin: 0;
  font-family: var(--skin-font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--skin-ink-primary);
}
.es-notes-panel__close {
  border: none;
  background: none;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--skin-ink-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}
.es-notes-panel__close:hover { background: var(--skin-surface-hover, rgba(0,0,0,0.05)); }

.es-notes-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Note list (chapter view). */
.es-notes-listhead {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--skin-ink-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.es-note-card {
  border: 1px solid var(--skin-border);
  border-left: 3px solid var(--skin-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  background: var(--skin-surface-sunken, var(--skin-surface));
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing);
}
.es-note-card:hover { border-color: var(--skin-accent-strong); }
.es-note-card__ref {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--skin-accent-strong);
  margin-bottom: var(--space-2);
}
.es-note-card__quote {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--skin-ink-secondary);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.es-note-card__body {
  font-size: var(--text-sm);
  color: var(--skin-ink-primary);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.es-notes-empty {
  color: var(--skin-ink-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-9) var(--space-5);
  line-height: var(--leading-relaxed);
}
.es-notes-viewall {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--skin-border);
  text-align: center;
}
.es-notes-viewall a {
  color: var(--skin-accent-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

/* Editor view. */
.es-note-editor { display: flex; flex-direction: column; gap: var(--space-6); height: 100%; }
.es-note-editor__ref {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--skin-accent-strong);
}
.es-note-editor__quote {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--skin-accent);
  background: var(--skin-accent-tint-bg, var(--skin-surface-sunken));
  border-radius: var(--radius-md);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--skin-ink-secondary);
  line-height: var(--leading-relaxed);
  max-height: 30vh;
  overflow-y: auto;
}
.es-note-editor__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--skin-ink-secondary);
}
.es-note-editor__textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 160px;
  resize: vertical;
  padding: var(--space-5);
  border: 1px solid var(--skin-border);
  border-radius: var(--radius-md);
  background: var(--skin-input-bg, var(--skin-surface));
  color: var(--skin-ink-primary);
  font-family: var(--skin-font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.es-note-editor__textarea:focus {
  outline: none;
  border-color: var(--skin-accent-strong);
}

/* Rich-text toolbar (P2). */
.es-note-toolbar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
}
.es-note-fmt {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--skin-border);
  border-radius: var(--radius-sm);
  background: var(--skin-surface);
  color: var(--skin-ink-primary);
  font-family: var(--skin-font-body);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}
.es-note-fmt:hover { background: var(--skin-surface-hover, rgba(0,0,0,0.05)); border-color: var(--skin-accent-strong); }

/* Contenteditable rich-text area. */
.es-note-editor__rt {
  width: 100%;
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--skin-border);
  border-radius: var(--radius-md);
  background: var(--skin-input-bg, var(--skin-surface));
  color: var(--skin-ink-primary);
  font-family: var(--skin-font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.es-note-editor__rt:focus { outline: none; border-color: var(--skin-accent-strong); }
.es-note-editor__rt:empty::before {
  content: attr(data-placeholder);
  color: var(--skin-ink-tertiary);
  pointer-events: none;
}

/* Rich content rendered in the editor + cards + library + print. */
.es-note-editor__rt ul, .es-note-card__body ul, .lib-card__body ul,
.es-note-editor__rt ol, .es-note-card__body ol, .lib-card__body ol {
  margin: var(--space-3) 0; padding-left: var(--space-9);
}
.es-note-editor__rt h3, .es-note-card__body h3, .lib-card__body h3 {
  font-size: var(--text-md); font-weight: 700; margin: var(--space-4) 0 var(--space-2);
}
.es-note-editor__rt p, .es-note-card__body p, .lib-card__body p { margin: 0 0 var(--space-3); }
.es-note-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--skin-ink-secondary);
  cursor: pointer;
}
.es-note-share input { accent-color: var(--skin-accent-strong); width: 16px; height: 16px; }
.es-note-shared-badge {
  display: inline-block;
  margin-left: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--skin-accent-strong);
}
.es-note-editor__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.es-note-editor__actions .es-note-spacer { margin-left: auto; }
.es-note-editor__status {
  font-size: var(--text-sm);
  color: var(--skin-ink-tertiary);
}

/* Reader overlay — a verse that carries a note. */
.scripture [data-verse].es-has-note { background: var(--skin-accent-tint-bg, rgba(212,160,23,0.08)); border-radius: var(--radius-sm); }
.es-note-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  font-size: 0.7em;
  vertical-align: super;
  color: var(--skin-accent-strong);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0 2px;
}
.es-note-marker:hover { color: var(--skin-ink-primary); }

/* Docked posture on very wide screens — panel lives in the right margin
   beside the 720px reading column; no content shift, no scrim needed. */
@media (min-width: 1500px) {
  .es-notes-panel { box-shadow: -1px 0 0 var(--skin-border); }
}

@media (prefers-reduced-motion: reduce) {
  .es-notes-panel, .es-notes-scrim, .es-notes-toggle { transition: none; }
}