/* ============================================================================
   Scripture lookup in the Notes panel.                                v2.27.0
   ============================================================================
   Derives from the same --cn-* tokens the rest of the watch page uses, so it
   follows the theme toggle in light and dark without a second palette. */

.eos-nsc {
  --nsc-fg:     var(--cn-fg, #191919);
  --nsc-muted:  var(--cn-muted, rgba(0,0,0,.55));
  --nsc-border: var(--cn-border, rgba(0,0,0,.10));
  --nsc-soft:   var(--cn-bg-soft, rgba(0,0,0,.04));
  --nsc-gold:   var(--eos-gold, #F5A312);

  flex: 0 0 auto;
  margin: 8px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--nsc-border);
  border-radius: var(--eos-radius-lg, 14px);
  /* v2.27.0 - OPAQUE literal, not the theme token: --cn-bg is 0.72-alpha glass in light,
     and a translucent card sitting over the notes text is unreadable. Same trap the studio
     floating panels hit. */
  background: #FFFFFF;
  color: var(--nsc-fg);
  font-size: 12.5px;
}
[data-theme="dark"] .eos-nsc { background: #1F1F1E; }

.eos-nsc-h { display: flex; align-items: center; gap: 7px; font-weight: 500; margin-bottom: 8px; }
.eos-nsc-ico { display: inline-flex; color: var(--nsc-gold); }
.eos-nsc-ico svg { width: 15px; height: 15px; }
.eos-nsc-ref {
  background: rgba(245,163,18,.16); color: var(--nsc-fg);
  padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
}
.eos-nsc-x {
  margin-left: auto; background: none; border: 0; color: var(--nsc-muted);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 4px; border-radius: 5px;
}
.eos-nsc-x:hover { color: var(--nsc-gold); background: var(--nsc-soft); }

.eos-nsc-vers { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.eos-nsc-v {
  font: inherit; font-size: 11px; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--nsc-border); background: transparent; color: var(--nsc-muted);
}
.eos-nsc-v:hover { color: var(--nsc-fg); border-color: var(--nsc-muted); }
.eos-nsc-v.is-on { background: var(--nsc-gold); border-color: var(--nsc-gold); color: #2a1e04; }
.eos-nsc-v:focus-visible { outline: 2px solid var(--nsc-gold); outline-offset: 1px; }

.eos-nsc-prev {
  background: var(--nsc-soft); border-radius: 9px; padding: 9px 11px;
  line-height: 1.6; min-height: 46px; max-height: 190px; overflow-y: auto;
  overscroll-behavior: contain;
}
.eos-nsc-cite { display: block; margin-top: 6px; font-size: 11px; color: var(--nsc-muted); }
.eos-nsc-load { color: var(--nsc-muted); }

.eos-nsc-acts { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.eos-nsc-btn {
  font: inherit; font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--nsc-border); background: transparent; color: var(--nsc-fg);
}
.eos-nsc-btn:hover { background: var(--nsc-soft); }
.eos-nsc-btn.is-gold { background: var(--nsc-gold); border-color: var(--nsc-gold); color: #2a1e04; }
.eos-nsc-btn.is-gold:hover { filter: brightness(.95); }
.eos-nsc-btn[disabled] { opacity: .45; cursor: default; }
.eos-nsc-btn:focus-visible { outline: 2px solid var(--nsc-gold); outline-offset: 2px; }

/* The inserted quote, inside the notes editor. Deliberately quiet: it should read as
   part of the member's own notes, not as a widget dropped into them. */
.eos-nsc-quote {
  margin: 10px 0; padding: 8px 0 8px 12px;
  border-left: 3px solid var(--eos-gold, #F5A312);
  background: none;
}
.eos-nsc-quote p { margin: 0 0 4px; line-height: 1.65; }
.eos-nsc-quote cite { font-style: normal; font-size: 11.5px; opacity: .7; display: block; }
.eos-nsc-quote sup { font-size: .68em; opacity: .6; margin-right: 2px; }

/* v2.27.2 - the line that follows an inserted quote must never collapse to nothing, or the
   caret has no visible home and the member cannot see where typing will resume. */
.eos-ntp-editor > p:empty::after,
.eos-ntp-editor > p:has(> br:only-child)::after { content: ''; display: inline-block; }
.eos-ntp-editor > .eos-nsc-quote + p { min-height: 1.5em; }

/* In a short studio cell the panel must not eat the editor. */
@media (max-height: 760px) {
  .eos-nsc-prev { max-height: 120px; }
}