/* ---------- Notes (notes.js): the Notes button (the pencil), the Notes panel, markers, All my notes ---------- */
/* Notes button: a round button at the bottom right, on the same line as Ask Grok and Resources (bottom left; resources.js keeps
   Resources clear of it). Above the minimized verse bar when that is showing; Back to top sits just above it. */
.nt-fab { position: fixed; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 40; width: var(--fab, 44px); height: var(--fab, 44px); box-sizing: border-box; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--gold); background: var(--paper);
  color: var(--accent); box-shadow: var(--shadow-lift); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease); }
.nt-fab svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .nt-fab:hover { transform: translateY(-2px); } }
.nt-fab[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nt-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.nt-fab-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--rc-notes, var(--gold)); box-shadow: 0 0 0 2px var(--paper); }
.nt-fab-dot[hidden] { display: none; }
html.srp-minimized .nt-fab { bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 3.6rem); }
@media (max-width: 640px) {
  .nt-fab { right: max(.8rem, env(safe-area-inset-right)); bottom: max(.8rem, env(safe-area-inset-bottom)); }
  html.srp-minimized .nt-fab { bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 3.4rem); }
}
.rc-mynotes { --rc: var(--rc-notes); }

/* The panel: right side on wide screens, a bottom sheet on phones (the passage stays visible above it). */
.nt-panel { position: fixed; z-index: 62; top: 0; right: 0; bottom: 0; width: min(25rem, 92vw); box-sizing: border-box; overflow: auto; overscroll-behavior: contain;
  padding: max(1rem, env(safe-area-inset-top)) max(1.1rem, env(safe-area-inset-right)) 1.2rem 1.1rem; background: var(--paper);
  border-left: 1px solid var(--gold); box-shadow: -18px 0 50px rgba(40, 20, 10, .22); font-family: var(--sans); color: var(--ink);
  transform: translateX(16px); opacity: 0; transition: opacity .2s, transform .22s var(--ease); }
.nt-panel.open { transform: none; opacity: 1; }
.nt-panel[hidden] { display: none; }
.nt-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--accent)); }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.nt-head h2 { margin: 0; font: 700 1.15rem/1.2 var(--sans); letter-spacing: 0; }
.nt-x { flex: none; width: 2.75rem; height: 2.75rem; }
.nt-x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nt-ctxs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 .3rem; }
.nt-on { margin-right: .15rem; }
.nt-ref { margin: 0; font-size: .95rem; }
.nt-ref a { font-weight: 650; }
.nt-chip { min-height: 36px; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
  font: 600 .82rem/1.2 var(--sans); cursor: pointer; text-align: left; max-width: 100%; }
.nt-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.nt-chip-n { display: inline-block; min-width: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .7rem; text-align: center; }
.nt-quote { margin: .2rem 0 .5rem; font: italic .9rem/1.45 var(--serif); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-quote[hidden] { display: none; }
.nt-text { width: 100%; box-sizing: border-box; min-height: 7rem; padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink); font: 1rem/1.5 var(--serif); resize: vertical; }
.nt-text:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.nt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .55rem; }
.nt-row .btn { margin: 0; min-height: 44px; }
.nt-saved { margin-right: auto; }
.nt-list-h { margin: 1.1rem 0 .4rem; font: 700 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nt-card { margin: 0 0 .55rem; padding: .65rem .8rem .5rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); }
.nt-card.nt-editing { border-color: var(--gold); }
.nt-card-ref { margin: 0 0 .25rem; font: 650 .88rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.nt-card-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.5 var(--serif); color: var(--ink); }
.nt-card-meta { margin: .3rem 0 0; font-size: .74rem; }
.nt-card-acts { display: flex; flex-wrap: wrap; gap: .1rem .3rem; margin: .15rem -.45rem 0; }
.nt-act:not(.btn) { min-height: 40px; padding: .3rem .5rem; border: 0; background: none; color: var(--accent); font: 600 .82rem/1.2 var(--sans); cursor: pointer; border-radius: 8px; }
.nt-act:not(.btn):hover { background: var(--gold-soft); }
.nt-act.danger-text { color: #a3302a; }
:root[data-theme="dark"] .nt-act.danger-text { color: #f0a59f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nt-act.danger-text { color: #f0a59f; } }
.nt-confirm { margin-top: .4rem; padding-top: .5rem; border-top: 1px dashed var(--rule); }
.nt-confirm p { margin: 0 0 .4rem; }
.nt-confirm .btn { margin: 0 .4rem 0 0; min-height: 40px; }
.nt-confirm[hidden] { display: none; }
.nt-remind { margin: 1rem 0 .3rem; padding: .75rem .9rem; border: 1px solid var(--gold); border-radius: 12px; background: color-mix(in srgb, var(--gold-soft) 45%, var(--paper)); }
.nt-remind p { margin: 0; }
.nt-remind .nt-row { justify-content: flex-start; }
.nt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .8rem; margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.nt-all { font-weight: 700; font-size: .92rem; }
@media (max-width: 899px) {
  .nt-panel { top: auto; left: 0; width: auto; max-height: 62vh; max-height: 62dvh; border-left: 0; border-top: 1px solid var(--gold); border-radius: 18px 18px 0 0;
    padding: .9rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    box-shadow: 0 -16px 44px rgba(40, 20, 10, .25); transform: translateY(24px); }
  .nt-panel::before { inset: 0 0 auto 0; width: auto; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--gold), var(--accent)); }
  .nt-text { min-height: 5.5rem; }
  /* the bottom sheet covers the buttons; keep the page scrollable to its end above the sheet */
  html.nt-panel-open body { padding-bottom: 62vh; }
  html.nt-panel-open .nt-fab, html.nt-panel-open .ask-fab, html.nt-panel-open .res-fab { visibility: hidden; }
}
@media (max-width: 360px) { .nt-row .btn { padding-left: .8rem; padding-right: .8rem; } }

/* Markers beside verses and headings that have a note (Resources → Notes on). */
.nt-mark { display: none; }
.nt-marks-on .nt-mark { display: inline-flex; align-items: center; gap: .1rem; vertical-align: super; line-height: 1; margin: 0 .2em 0 -.05em; padding: .12rem .2rem;
  min-width: 1.3rem; min-height: 1.3rem; justify-content: center; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--rc-notes) 18%, transparent);
  color: var(--rc-notes); font: 700 .62rem/1 var(--sans); cursor: pointer; }
.nt-marks-on .nt-mark svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nt-marks-on .nt-mark-h { vertical-align: middle; margin-left: .45rem; font-size: .75rem; padding: .25rem .4rem; }
.nt-marks-on .nt-mark-h svg { width: 1rem; height: 1rem; }
.nt-marks-on .nt-mark:hover { background: color-mix(in srgb, var(--rc-notes) 30%, transparent); }
.nt-mark:focus-visible { outline: 2px solid var(--rc-notes); outline-offset: 2px; }
/* a tap target big enough on touch screens, without moving the text */
@media (pointer: coarse) { .nt-marks-on .nt-mark { position: relative; } .nt-marks-on .nt-mark::after { content: ""; position: absolute; inset: -10px -8px; } }

/* After sign-in on a device with no notes: a gentle offer to restore a backup. */
.nt-offer { position: fixed; z-index: 66; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(26rem, calc(100vw - 1.6rem));
  box-sizing: border-box; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--gold); background: var(--paper); box-shadow: var(--shadow-lift);
  font: .9rem/1.45 var(--sans); color: var(--ink); }
.nt-offer p { margin: 0; }

/* All my notes (#/notes) */
.nt-tabs { display: flex; gap: .3rem; margin: .4rem 0 1rem; font-family: var(--sans); border-bottom: 1px solid var(--rule); }
.nt-tabs a { padding: .55rem .8rem; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nt-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.nt-print-sub { display: none; }
.nt-tools { display: grid; gap: .7rem; margin: 0 0 .5rem; }
.nt-q { width: 100%; box-sizing: border-box; min-height: 46px; padding: .6rem .9rem; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); font: 1rem var(--sans); }
.nt-q:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.nt-exp { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--sans); }
.nt-exp .btn { margin: 0; min-height: 42px; padding-top: .45rem; padding-bottom: .45rem; font-size: .85rem; }
.nt-dl { flex-basis: 100%; font-size: .85rem; line-height: 2; }
.nt-dl .linkbtn { font-size: .85rem; min-height: 32px; }
.nt-mailmsg:empty { display: none; }
.nt-book h2 { margin: 1.6rem 0 .3rem; padding-bottom: .2rem; border-bottom: 1px solid var(--rule); }
.nt-ctx { margin: .6rem 0 1rem; }
.nt-ctx-h { margin: .7rem 0 .35rem; font: 650 1rem/1.3 var(--sans); }
.nt-ctx-h a { text-decoration: none; }
.nt-page .nt-card { background: var(--paper); }
.nt-empty { margin: 1rem 0; padding: 1rem 1.1rem; }
.nt-empty svg { width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-store { margin: 2rem 0 1rem; padding: 1rem 1.1rem; font-family: var(--sans); }
.nt-store h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.nt-store .btn-row { margin-top: .7rem; }
.nt-file-ask { margin: .6rem 0 .2rem; }
.nt-file-ask .btn { margin: 0; }
.nt-file-ask p { margin: .35rem 0 0; }
.nt-file-on { padding: .55rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--rc-jewish, #2c6a2c) 10%, var(--paper)); }
.nt-acct { margin: 0 0 .6rem; }
.nt-acct .btn { margin: .4rem 0 0; }
.nt-settings .btn-row { margin-top: .6rem; }

@media print {
  .nt-fab, .nt-panel, .nt-mark, .nt-offer, .nt-tabs, .nt-tools, .nt-store, .nt-card-acts, .nt-confirm, .nt-remind-slot, .nt-mailmsg, .footer, footer { display: none !important; }
  .nt-page .eyebrow { display: none; }
  .nt-print-sub { display: block; font: .8rem var(--sans); color: #555; margin: 0 0 1rem; }
  .nt-page .nt-card { border: 0; padding: 0 0 .5rem; background: none; break-inside: avoid; }
  .nt-book h2 { break-after: avoid; }
  .nt-ctx-h { break-after: avoid; }
  .nt-ctx-h a { color: #000; }
  .nt-ctx-h a[href]::after { content: ""; }
}
@media (prefers-reduced-motion: reduce) { .nt-panel, .nt-fab { transition: none; } }