/* ==========================================================================
   NOTES / HIGHLIGHTING / MARKED BIBLE SYSTEM — PHASE 1 STYLES
   Modular, additive stylesheet for notes-system.js.
   Does not modify or override any existing Genesis Codex component styles
   except for one deliberate, narrowly-scoped .no-copy exception (see bottom
   of file) that keeps the notes editor selectable/editable regardless of
   ACCESS_TIER.

   Visual language (polish patch): mostly white / very soft off-white
   surfaces, pale grey borders, soft diffuse shadows, charcoal text, muted
   grey controls. Calm, clean, premium, manuscript-like - not yellow, not
   harsh black, not dated.
   ========================================================================== */

#notesDrawerMount {
  /* The mount div itself has no box — everything below is fixed-positioned
     so it never participates in the app's existing header/sidebar layout. */
  all: initial;
  /* `all: initial` above also wipes the inherited font, so without this line every
     descendant's `font-family: inherit` (below) would inherit the browser's UA default
     instead of the app's own font. Match the app's body font-family exactly (see
     styles.css body{} rule) so the notes system never looks like a separate document. */
  font-family: Arial, Helvetica, sans-serif;
}

#notesDrawerMount * {
  box-sizing: border-box;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Shared colour tokens (scoped to the notes system only)
   -------------------------------------------------------------------------- */

#notesDrawerMount {
  --gn-bg: #ffffff;
  --gn-bg-soft: #fafafa;
  --gn-bg-muted: #f4f4f5;
  --gn-border: #e3e3e6;
  --gn-border-soft: #ececee;
  --gn-text: #262626;
  --gn-text-muted: #6b6b70;
  --gn-text-faint: #9a9a9f;
  --gn-accent: #4a4a52;
  --gn-accent-hover: #efeff1;
  --gn-danger: #a1453c;
  --gn-danger-bg: #fbf0ef;
  --gn-danger-border: #ecd3d0;
  --gn-success: #4c8b6b;
  --gn-warning: #a17b1f;
  --gn-shadow: 0 10px 30px rgba(20, 20, 25, 0.10), 0 2px 8px rgba(20, 20, 25, 0.06);
  --gn-shadow-soft: 0 6px 18px rgba(20, 20, 25, 0.08);
}

#gnHighlightOverlayRoot {
  --gn-bg: #ffffff;
  --gn-bg-soft: #fafafa;
  --gn-bg-muted: #f4f4f5;
  --gn-border: #e3e3e6;
  --gn-border-soft: #ececee;
  --gn-text: #262626;
  --gn-text-muted: #6b6b70;
  --gn-text-faint: #9a9a9f;
  --gn-accent: #4a4a52;
  --gn-danger: #a1453c;
  --gn-shadow: 0 10px 30px rgba(20, 20, 25, 0.10), 0 2px 8px rgba(20, 20, 25, 0.06);
  --gn-shadow-soft: 0 6px 18px rgba(20, 20, 25, 0.08);
}

/* --------------------------------------------------------------------------
   Floating toggle button
   -------------------------------------------------------------------------- */

.gn-notes-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg);
  color: var(--gn-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--gn-shadow-soft);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.gn-notes-toggle:hover {
  background: var(--gn-accent-hover);
  border-color: #d4d4d8;
  transform: translateY(-1px);
  box-shadow: var(--gn-shadow);
}

.gn-notes-toggle:active {
  transform: translateY(0);
}

.gn-notes-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--gn-accent);
}

.gn-notes-toggle-icon svg {
  display: block;
}

/* --------------------------------------------------------------------------
   Backdrop (mobile only — interactive; desktop keeps background usable)
   -------------------------------------------------------------------------- */

.gn-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9498;
  background: rgba(30, 30, 32, 0.28);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.gn-drawer-backdrop.gn-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Drawer shell — desktop: right-side panel
   -------------------------------------------------------------------------- */

.gn-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9499;
  width: 400px;
  max-width: 92vw;
  background: var(--gn-bg);
  color: var(--gn-text);
  border-left: 1px solid var(--gn-border);
  box-shadow: var(--gn-shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  font-size: 15px;
  line-height: 1.5;
}

.gn-drawer.gn-open {
  transform: translateX(0);
}

.gn-drawer.gn-minimized {
  transform: translateX(calc(100% - 56px));
}

.gn-drawer.gn-minimized .gn-drawer-body,
.gn-drawer.gn-minimized .gn-header-row {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Drawer header
   -------------------------------------------------------------------------- */

.gn-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gn-border-soft);
  background: var(--gn-bg);
  flex: 0 0 auto;
}

.gn-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s ease;
}

.gn-current-note-control {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.gn-current-note-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 7px;
  text-align: left;
  font-size: 14px;
  color: var(--gn-text);
}

.gn-current-note-btn:hover {
  background: var(--gn-bg-muted);
  border-color: var(--gn-border-soft);
}

.gn-current-note-btn[aria-expanded="true"] {
  background: var(--gn-bg-muted);
  border-color: var(--gn-border);
}

.gn-current-note-label {
  color: var(--gn-text-faint);
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
}

.gn-current-note-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.gn-caret {
  flex: 0 0 auto;
  color: var(--gn-text-faint);
  font-size: 11px;
  transition: transform 0.15s ease;
}

.gn-current-note-btn[aria-expanded="true"] .gn-caret {
  transform: rotate(180deg);
  color: var(--gn-text-muted);
}

.gn-new-note-inline-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg-soft);
  color: var(--gn-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gn-new-note-inline-btn:hover {
  background: var(--gn-accent-hover);
  border-color: #d4d4d8;
}

.gn-new-note-plus {
  font-size: 15px;
  line-height: 1;
  color: var(--gn-text-muted);
}

.gn-drawer-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.gn-attached-note-delete-btn[hidden],
.gn-attached-note-delete-confirm[hidden] {
  display: none !important;
}

.gn-attached-note-delete-btn {
  color: var(--gn-danger, #9b3d37);
}

.gn-attached-note-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 8px;
  border: 1px solid rgba(143, 56, 50, 0.2);
  border-radius: 7px;
  background: #fffafa;
  color: var(--gn-text-muted, #6b6b70);
  font-size: 12px;
  white-space: nowrap;
}

.gn-attached-note-delete-confirm button {
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.gn-attached-note-delete-confirm button:hover,
.gn-attached-note-delete-confirm button:focus-visible {
  background: var(--gn-bg-muted, #f4f4f5);
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.gn-attached-note-delete-confirm .gn-attached-note-delete-confirm-btn {
  color: var(--gn-danger, #9b3d37);
  font-weight: 600;
}

.gn-save-status {
  font-size: 12px;
  color: var(--gn-text-faint);
  min-width: 96px;
  text-align: right;
  white-space: nowrap;
}

.gn-save-status.is-saving { color: var(--gn-warning); }
.gn-save-status.is-saved { color: var(--gn-success); }
.gn-save-status.is-error { color: var(--gn-danger); }

.gn-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gn-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gn-icon-btn:hover {
  background: var(--gn-bg-muted);
  border-color: var(--gn-border-soft);
  color: var(--gn-text);
}

.gn-icon-btn.gn-attached-note-delete-btn {
  width: 36px;
  height: 36px;
  color: var(--gn-text-muted, #6b6b70);
}

.gn-icon-btn.gn-attached-note-delete-btn svg {
  width: 19px;
  height: 19px;
  display: block;
}

.gn-icon-btn.gn-attached-note-delete-btn:hover,
.gn-icon-btn.gn-attached-note-delete-btn:focus-visible {
  color: var(--gn-danger, #9b3d37);
  background: #fff8f7;
  border-color: rgba(143, 56, 50, 0.3);
  outline: 2px solid rgba(143, 56, 50, 0.42);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Current-note switcher dropdown
   -------------------------------------------------------------------------- */

.gn-note-switcher {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--gn-bg);
  border: 1px solid var(--gn-border);
  border-radius: 10px;
  box-shadow: var(--gn-shadow);
  padding: 12px;
  z-index: 9501;
}

.gn-note-switcher-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.gn-note-switcher-actions button {
  flex: 1 1 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg-soft);
  color: var(--gn-text);
  font-size: 13px;
  cursor: pointer;
}

.gn-note-switcher-actions button:hover {
  background: var(--gn-bg-muted);
}

.gn-danger-btn {
  color: var(--gn-danger) !important;
  border-color: var(--gn-danger-border) !important;
  background: var(--gn-danger-bg) !important;
}

.gn-danger-btn:hover {
  background: #f7e2e0 !important;
}

.gn-note-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg-soft);
  color: var(--gn-text);
  font-size: 13.5px;
  margin-bottom: 8px;
}

.gn-note-search:focus {
  outline: none;
  border-color: #c7c7cc;
  background: var(--gn-bg);
}

/* Empty-state "create your first note" button keeps a slightly more inviting
   dashed treatment since it appears inside a large empty area, not a tight
   toolbar row. */
.gn-new-note-btn {
  width: 100%;
  padding: 10px 10px;
  border-radius: 7px;
  border: 1px dashed #c7c7cc;
  background: transparent;
  color: var(--gn-text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

.gn-new-note-btn:hover {
  background: var(--gn-bg-muted);
  color: var(--gn-text);
}

.gn-note-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gn-note-list-empty {
  font-size: 13px;
  color: var(--gn-text-faint);
  padding: 8px 4px;
  margin: 0;
}

.gn-note-list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.gn-note-list-item:hover {
  background: var(--gn-bg-muted);
}

.gn-note-list-item.active {
  background: var(--gn-bg-muted);
  border-color: var(--gn-border);
}

.gn-note-list-item-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gn-text);
}

.gn-note-list-item-meta {
  font-size: 11.5px;
  color: var(--gn-text-faint);
}

.gn-note-list-item-snippet {
  font-size: 12px;
  color: var(--gn-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Drawer body / editor
   -------------------------------------------------------------------------- */

.gn-drawer-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow-y: auto;
  background: var(--gn-bg);
}

.gn-empty-state {
  margin: auto 0;
  text-align: center;
  padding: 24px 12px;
}

.gn-empty-state p {
  color: var(--gn-text-muted);
  font-size: 14px;
  margin: 0 0 14px;
}

.gn-editor-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.gn-title-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 19px;
  font-weight: 700;
  color: var(--gn-text);
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--gn-border-soft);
  margin-bottom: 10px;
}

.gn-title-input:focus {
  outline: none;
  border-bottom-color: #c7c7cc;
}

.gn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gn-border-soft);
}

.gn-toolbar button {
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg-soft);
  color: var(--gn-text-muted);
  font-size: 12.5px;
  cursor: pointer;
}

.gn-toolbar button:hover {
  background: var(--gn-bg-muted);
  color: var(--gn-text);
}

.gn-toolbar-spacer {
  flex: 1 1 auto;
}

.gn-editor {
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 6px 2px 40px;
  outline: none;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gn-text);
}

.gn-editor:empty::before {
  content: "Start writing your study notes...";
  color: var(--gn-text-faint);
}

.gn-editor h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0.6em 0 0.35em;
}

.gn-editor h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0.6em 0 0.3em;
}

.gn-editor blockquote {
  margin: 0.5em 0;
  padding: 6px 14px;
  border-left: 3px solid #c7c7cc;
  color: var(--gn-text-muted);
  background: var(--gn-bg-soft);
}

.gn-editor ul,
.gn-editor ol {
  margin: 0.4em 0;
  padding-left: 1.4em;
}

.gn-editor p {
  margin: 0 0 0.6em;
}

.gn-public-mode-notice {
  margin: 12px 2px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--gn-bg-soft);
  border: 1px solid var(--gn-border-soft);
  color: var(--gn-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Mobile — bottom sheet instead of side drawer
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .gn-notes-toggle {
    right: 16px;
    bottom: 16px;
    padding: 10px 16px 10px 13px;
    font-size: 13.5px;
  }

  .gn-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 75vh;
    max-height: 88vh;
    border-left: none;
    border-top: 1px solid var(--gn-border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 20, 25, 0.14);
    transform: translateY(100%);
  }

  .gn-drawer.gn-open {
    transform: translateY(0);
  }

  .gn-drawer.gn-minimized {
    transform: translateY(calc(100% - 56px));
  }

  .gn-note-switcher {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
  }

  .gn-header-row {
    flex-wrap: wrap;
  }

  .gn-current-note-control {
    flex: 1 1 100%;
    order: 1;
  }

  .gn-new-note-inline-btn {
    order: 2;
  }
}

/* ==========================================================================
   PHASE 2 marking build - Hebrew selection highlight and underline only
   One marking surface: a tiny annotation bubble that appears beside selected
   Hebrew text, holding compact highlight, underline, colour, remove and close actions.
   No launcher, no toolbar, no mode. Plus the highlight and underline classes
   painted onto Hebrew word buttons.
   ========================================================================== */

/* SAFETY GUARD: an author `display` property on an overlay element would
   silently defeat the `hidden` attribute (this exact bug produced the old
   ghost toolbars). With this rule, hidden ALWAYS wins for anything we mount
   in the overlay root — "visible dead UI" bugs are structurally impossible. */
#gnHighlightOverlayRoot [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Word popup — a small, calm annotation bubble. Premium and quiet: soft
   shadow, hairline border, pill shape. It never covers more than one line.
   -------------------------------------------------------------------------- */

.gn-word-popup {
  position: absolute;
  z-index: 9700;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--gn-border, #e3e3e6);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 20, 25, 0.12), 0 1px 4px rgba(20, 20, 25, 0.06);
}

.gn-word-popup-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gn-word-popup-dot {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--gn-swatch-colour, #9a9a9f);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.gn-word-popup-dot:hover {
  transform: scale(1.2);
}

/* The current colour for the active layer is ringed. Removal uses the trash icon. */
.gn-word-popup-dot.is-current {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #8a8a92;
}

.gn-word-popup-divider {
  width: 1px;
  height: 16px;
  background: var(--gn-border, #e3e3e6);
}

.gn-selection-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Total gematria value of the current Hebrew selection: one compact inline
   item inside the original single-row pill, sitting directly before the
   unchanged Underline/Highlight action buttons. Never its own row. */
.gn-selection-value {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--gn-text-muted, #6b6b70);
  font-variant-numeric: tabular-nums;
}

.gn-selection-value[hidden] {
  display: none;
}

.gn-popup-icon-button,
.gn-word-popup-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--gn-border, #e3e3e6);
  border-radius: 50%;
  background: var(--gn-bg-soft, #fafafa);
  color: var(--gn-text-muted, #6b6b70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gn-word-popup-close {
  border-color: transparent;
  background: transparent;
  color: var(--gn-text-faint, #9a9a9f);
}

.gn-popup-icon-button:hover,
.gn-word-popup-close:hover {
  background: var(--gn-bg-muted, #f4f4f5);
  color: var(--gn-text, #262626);
}

.gn-popup-icon-button.is-active {
  border-color: rgba(150, 113, 37, 0.42);
  background: rgba(245, 200, 76, 0.16);
  color: #13233a;
}

.gn-selection-trash {
  color: #8f3832;
  border-color: rgba(143, 56, 50, 0.24);
  background: #fff8f7;
}

.gn-highlight-note-action {
  color: #66523a;
  border-color: rgba(102, 82, 58, 0.24);
  background: #fcfaf6;
}

.study-bible-verse {
  position: relative;
}

.gn-verse-note-rail {
  position: absolute;
  top: 56px;
  right: 9px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 3;
}

.gn-verse-note-marker {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.82;
}

.gn-verse-note-marker svg {
  display: block;
  width: 16px;
  height: 16px;
}

.gn-underline-note-marker::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.gn-marker-gold { color: #bf8e0d; }
.gn-marker-orange { color: #c67628; }
.gn-marker-red { color: #c75649; }
.gn-marker-purple { color: #8a61bd; }
.gn-marker-blue { color: #2b7cb4; }
.gn-marker-green { color: #2d9667; }
.gn-marker-grey { color: #787e8a; }
.gn-marker-brown { color: #96683a; }

.gn-verse-note-marker:hover,
.gn-verse-note-marker:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.72);
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.gn-word-popup-close svg {
  display: block;
}

.gn-popup-icon-button svg {
  display: block;
}

/* Temporary pointer-drag preview only - never persisted, cleared as soon as the popup opens
   or the drag is cancelled. */
.study-hebrew-word.gn-selection-preview,
.study-hebrew-word.gn-mark-selection-preview {
  outline: 1px solid rgba(19, 35, 58, 0.24);
  outline-offset: 2px;
  background-image: linear-gradient(rgba(19, 35, 58, 0.055), rgba(19, 35, 58, 0.055));
}

/* --------------------------------------------------------------------------
   Highlight colour states — background wash ONLY, on Hebrew word buttons.
   Colours read as real highlighter ink on paper: clearly visible, still calm.
   -------------------------------------------------------------------------- */

.study-hebrew-word.gn-hl,
.study-hebrew-word.gn-ul {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.gn-hl-gold { background-color: rgba(245, 200, 76, 0.45); }
.gn-hl-orange { background-color: rgba(240, 160, 75, 0.42); }
.gn-hl-red { background-color: rgba(242, 164, 155, 0.42); }
.gn-hl-purple { background-color: rgba(199, 174, 232, 0.42); }
.gn-hl-blue { background-color: rgba(126, 196, 240, 0.42); }
.gn-hl-green { background-color: rgba(143, 217, 182, 0.42); }
.gn-hl-grey { background-color: rgba(199, 202, 209, 0.45); }

/* Legacy compatibility: 'brown' is no longer in the palette, but marks saved with it
   may still exist in the database and must stay visible. */
.gn-hl-brown { background-color: rgba(216, 185, 147, 0.45); }

/* --------------------------------------------------------------------------
   Underline colour states - separate from highlight. Each selected Hebrew word button gets
   its own bottom border so wrapped rows cannot drop part of the underline.
   -------------------------------------------------------------------------- */

.study-hebrew-word.gn-ul {
  border-bottom: 2px solid var(--gn-underline-colour, rgba(126, 196, 240, 0.78)) !important;
}

.gn-ul-gold { --gn-underline-colour: rgba(210, 158, 35, 0.78); }
.gn-ul-orange { --gn-underline-colour: rgba(217, 126, 40, 0.78); }
.gn-ul-red { --gn-underline-colour: rgba(207, 88, 77, 0.74); }
.gn-ul-purple { --gn-underline-colour: rgba(141, 102, 194, 0.76); }
.gn-ul-blue { --gn-underline-colour: rgba(54, 130, 203, 0.78); }
.gn-ul-green { --gn-underline-colour: rgba(55, 145, 96, 0.78); }
.gn-ul-grey { --gn-underline-colour: rgba(119, 124, 135, 0.74); }
.gn-ul-brown { --gn-underline-colour: rgba(150, 104, 58, 0.76); }

/* --------------------------------------------------------------------------
   Keep the highlight visible on interaction. The Study Bible's own
   .study-hebrew-word :hover/:focus/:active style repaints the word's
   background, which briefly wiped the highlight while the pointer was over it.
   These rules re-assert the SAME highlight colour with higher specificity
   (element + three classes + state) and !important, so the wash never blinks
   out. Only the background is affected — cursor, click, focus ring and Word
   Study behaviour are untouched.
   -------------------------------------------------------------------------- */
.study-hebrew-word.gn-hl.gn-hl-gold:hover,
.study-hebrew-word.gn-hl.gn-hl-gold:focus,
.study-hebrew-word.gn-hl.gn-hl-gold:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-gold:active { background-color: rgba(245, 200, 76, 0.45) !important; }

.study-hebrew-word.gn-hl.gn-hl-orange:hover,
.study-hebrew-word.gn-hl.gn-hl-orange:focus,
.study-hebrew-word.gn-hl.gn-hl-orange:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-orange:active { background-color: rgba(240, 160, 75, 0.42) !important; }

.study-hebrew-word.gn-hl.gn-hl-red:hover,
.study-hebrew-word.gn-hl.gn-hl-red:focus,
.study-hebrew-word.gn-hl.gn-hl-red:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-red:active { background-color: rgba(242, 164, 155, 0.42) !important; }

.study-hebrew-word.gn-hl.gn-hl-purple:hover,
.study-hebrew-word.gn-hl.gn-hl-purple:focus,
.study-hebrew-word.gn-hl.gn-hl-purple:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-purple:active { background-color: rgba(199, 174, 232, 0.42) !important; }

.study-hebrew-word.gn-hl.gn-hl-blue:hover,
.study-hebrew-word.gn-hl.gn-hl-blue:focus,
.study-hebrew-word.gn-hl.gn-hl-blue:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-blue:active { background-color: rgba(126, 196, 240, 0.42) !important; }

.study-hebrew-word.gn-hl.gn-hl-green:hover,
.study-hebrew-word.gn-hl.gn-hl-green:focus,
.study-hebrew-word.gn-hl.gn-hl-green:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-green:active { background-color: rgba(143, 217, 182, 0.42) !important; }

.study-hebrew-word.gn-hl.gn-hl-grey:hover,
.study-hebrew-word.gn-hl.gn-hl-grey:focus,
.study-hebrew-word.gn-hl.gn-hl-grey:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-grey:active { background-color: rgba(199, 202, 209, 0.45) !important; }

.study-hebrew-word.gn-hl.gn-hl-brown:hover,
.study-hebrew-word.gn-hl.gn-hl-brown:focus,
.study-hebrew-word.gn-hl.gn-hl-brown:focus-visible,
.study-hebrew-word.gn-hl.gn-hl-brown:active { background-color: rgba(216, 185, 147, 0.45) !important; }

.study-hebrew-word.gn-ul:hover,
.study-hebrew-word.gn-ul:focus,
.study-hebrew-word.gn-ul:focus-visible,
.study-hebrew-word.gn-ul:active {
  border-bottom-color: var(--gn-underline-colour, rgba(126, 196, 240, 0.78)) !important;
}

/* --------------------------------------------------------------------------
   Defensive override: keep the notes editor usable even if ACCESS_TIER
   is ever a preview/free tier that disables selection elsewhere in the app.
   Scoped narrowly to the notes editor only — does not touch .no-copy
   behaviour anywhere else in the app.
   -------------------------------------------------------------------------- */

.no-copy .gn-editor,
.no-copy .gn-editor *,
.no-copy .gn-title-input,
.no-copy .gn-note-search {
  user-select: text !important;
  -webkit-user-select: text !important;
}