/* Exegetical note pages — builds on styles.css tokens */
.note-page { background: var(--paper); }
.note-bar { background: var(--indigo); color: var(--limestone); border-bottom: 1px solid rgba(223, 218, 203, .18); }
.note-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.note-bar .brand-mark { font-size: 26px; }
.note-back { color: var(--limestone); font-size: 15px; font-weight: 500; text-decoration: none; }
.note-back::before { content: "← "; }
[dir="rtl"] .note-back::before { content: "→ "; }
.note-back:hover { color: var(--white); text-decoration: underline; }

.note { max-width: calc(1040px + 2 * var(--gutter)); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); }
.note-head { max-width: 760px; margin-bottom: 40px; }
.note-kicker { font-size: 14px; font-weight: 600; color: var(--olive); margin-bottom: 14px; }
.note-kicker a { color: inherit; text-decoration: none; }
.note-kicker a:hover { text-decoration: underline; }
.note-head h1 { font-size: clamp(38px, 5.5vw, 60px); line-height: 1.02; }
.note-reference { margin-top: 12px; font-family: var(--serif); font-size: 24px; color: var(--ink-2); }
.note-versions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.note-versions a, .note-versions span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); background: var(--paper); }
.note-versions a:hover { border-color: var(--indigo); color: var(--indigo); }
.note-versions [aria-current] { background: var(--indigo); border-color: var(--indigo); color: var(--white); }

/* Greek text beside the translation */
.parallel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 48px; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 6px; box-shadow: 0 1px 2px rgba(35, 38, 32, .06); }
.parallel-col { padding: 28px 32px; }
.parallel-col + .parallel-col { border-inline-start: 1px solid var(--rule-soft); }
.parallel-label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.parallel-col p { font-family: var(--serif); font-size: 18px; line-height: 1.65; margin: 0 0 10px; }
.parallel-col sup { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--olive); margin-inline-end: 3px; }

/* commentary */
.note-body { max-width: 720px; font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--ink); }
.note-body p { margin: 0 0 1.1em; }
.note-body h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--indigo); margin: 2em 0 .6em; padding-top: 1em; border-top: 1px solid var(--rule); }
.note-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.note-body strong { font-weight: 600; }
.note-body sup { font-size: .65em; }
.note-body ul, .note-body ol { padding-inline-start: 1.3em; margin: 0 0 1.1em; }
.note-body a { color: var(--olive); }

.note-notice { max-width: 720px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.note-notice p { margin: 0 0 .6em; }
.note-notice strong, .note-notice em { font-weight: inherit; font-style: normal; }
.note-foot { background: var(--indigo-deep); padding: 28px 0; font-size: 14px; }
.note-foot a { color: var(--limestone); }

/* scripts: polytonic Greek and Cyrillic in Gentium, Arabic in Amiri */
[lang="el"], [lang="ru"], [lang="sr"] { font-family: "Gentium Book Plus", Georgia, serif; }
[lang="ru"] .note-body, [lang="sr"] .note-body, [lang="ru"] h1, [lang="sr"] h1, [lang="ru"] .note-reference, [lang="sr"] .note-reference { font-family: "Gentium Book Plus", Georgia, serif; }
.parallel-col[lang="el"] p, .parallel-col[lang="ru"] p, .parallel-col[lang="sr"] p { font-family: "Gentium Book Plus", Georgia, serif; }
[lang="ar"] .note-body, [lang="ar"] h1, [lang="ar"] .note-reference, .parallel-col[lang="ar"] p { font-family: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif; }
[lang="ar"] .note-body { font-size: 21px; line-height: 1.9; }
.parallel-col[lang="ar"] p { font-size: 20px; line-height: 1.85; }
[dir="rtl"] .note-body, [dir="rtl"] .note-head { text-align: right; }

@media (max-width: 760px) {
  .parallel { grid-template-columns: minmax(0, 1fr); }
  .parallel-col + .parallel-col { border-inline-start: 0; border-top: 1px solid var(--rule-soft); }
  .parallel-col { padding: 22px; }
  .note-body { font-size: 18px; }
}
@media print {
  .note-bar, .note-foot, .note-versions, .skip { display: none; }
  .note-page { background: #fff; }
  .parallel { box-shadow: none; }
}

/* skip link that works in both directions */
.note-page .skip { left: auto; inset-inline-start: 8px; top: 8px; transform: translateY(-200%); }
.note-page .skip:focus { transform: none; }

/* ---------- exegetical notes: popup ---------- */
.has-dialog, .has-dialog body { overflow: hidden; }
.note-dialog { width: min(1120px, 94vw); height: min(92vh, 1200px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px rgba(15, 27, 46, .45); overflow: hidden; }
.note-dialog[open] { display: flex; flex-direction: column; }
.note-dialog::backdrop { background: rgba(15, 27, 46, .72); }
.note-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px 12px 24px; background: var(--indigo); color: var(--limestone); flex-shrink: 0; }
.note-dialog-bar p { font-size: 14px; font-weight: 600; color: var(--olive-light); }
.note-dialog-actions { display: flex; align-items: center; gap: 8px; }
.note-dialog-full { color: var(--limestone); font-size: 14px; font-weight: 500; padding: 8px 10px; }
.note-dialog-full:hover { color: var(--white); }
.note-dialog-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--limestone); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.note-dialog-close:hover { background: rgba(223, 218, 203, .12); color: var(--white); }
.note-dialog-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.note-dialog-body .note { max-width: none; margin: 0; padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) 48px; }
.note-dialog-body .note-kicker { display: none; }
.note-dialog-body .note-head h1 { font-size: clamp(32px, 4vw, 48px); }
.note-dialog-status { padding: 48px; font-size: 17px; color: var(--ink-2); }
@media (max-width: 680px) {
  .note-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .note-dialog-bar { padding-left: 16px; }
  .note-dialog-bar p { display: none; }
}

/* translated notes */
.note-ai { margin-top: 16px; font-size: 14px; color: var(--ink-soft); font-family: var(--sans); }
[lang="zh-Hans"] .note-body, [lang="zh-Hans"] h1, [lang="zh-Hans"] .note-reference, .parallel-col[lang="zh-Hans"] p { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; }
[lang="zh-Hans"] .note-body { line-height: 1.95; }
[lang="el"] .note-body, [lang="el"] h1, [lang="el"] .note-reference { font-family: "Gentium Book Plus", Georgia, serif; }