:root {
  color-scheme: light;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-soft: #fafafa;
  --ink: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-dark: #d1d5db;
  --accent: #374151;
  --accent-dark: #1f2937;
  --accent-soft: #f1f5f9;
  --sidebar: #1f2937;
  --sidebar-ink: #374151;
  --sidebar-border: #e5e7eb;
  --sidebar-bg: #f9fafb;
  --purple: #4B2E83;
  --gold: #9ca3af;
  --gold-soft: #f1f5f9;
  --crimson: #8B1E2D;
  --crimson-soft: #FFF3F1;
  --sidebar-width: 200px;
  --header-bg: #ffffff;
  --tab-active-bg: #f3f4f6;
  --panel-head-bg: #f9fafb;
  --verse-bg: transparent;
  --table-head-bg: #f3f4f6;
  --row-hover: #f9fafb;
  --placeholder: #9ca3af;
  --warn-bg: #FFF3D1;
  --warn-ink: #6f5310;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --border: #e5e7eb;
  --study-english-color: #5f6368;
  --study-hebrew-color: #202124;
}

/* ===========================================================================
   Study Bible reading canvas — calm, text-first visual refinement.
   Visual only: existing rendering, headings, word actions and annotation hooks remain intact.
   ========================================================================== */

.study-bible-section {
  background: #fffdf9;
}

.study-bible-controls-sticky {
  margin-bottom: 16px;
  padding-block: 8px 10px;
  border-bottom-color: #f0ede7;
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 1px 0 rgba(55, 65, 81, 0.025);
}

.study-passage-selector {
  gap: 6px;
}

.study-passage-selector label {
  gap: 3px;
  color: #7b818a;
  font-size: 11px;
  font-weight: 600;
}

.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select,
.study-passage-selector > button {
  min-height: 34px;
  border-color: #dedbd5;
  border-radius: 7px;
  background: #fffefa;
  box-shadow: none;
}

.study-passage-selector > button {
  padding-inline: 11px;
}

#studyLoadBtn {
  border-color: #b9b4aa;
  color: #303943;
}

.study-toolbar {
  gap: 6px;
}

.study-toolbar-button {
  width: 34px;
  height: 34px;
  border-color: #e2dfd9;
  border-radius: 7px;
  background: #fffefa;
  color: #737982;
}

.study-toolbar-button.study-daily-reading-btn {
  padding-inline: 10px;
  font-size: 11.5px;
}

.weekly-reading-toolbar-info {
  min-height: 34px;
}

.study-bible-layout {
  grid-template-columns: minmax(0, 980px);
}

.study-bible-layout.study-word-panel-open {
  grid-template-columns: minmax(0, 980px) 8px minmax(280px, var(--study-word-panel-width));
}

.study-passage-panel {
  border-color: transparent;
  border-radius: 6px;
  background: #fffdf9;
  box-shadow: none;
}

.study-word-panel {
  border-color: #ebe8e2;
  box-shadow: none;
}

.study-passage-head {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px 20px 18px;
  border-bottom: 0;
  text-align: center;
}

.study-passage-head strong {
  color: #4a5058;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.study-passage-head span {
  color: #9a9ca0;
  font-size: 11px;
  line-height: 1.4;
}

.study-verse-stack {
  gap: 2px;
  padding: 0 8px 28px;
}

.torah-portion-banner {
  margin: 36px auto 22px;
  padding: 8px 18px 12px;
}

.torah-portion-name-he {
  color: #343b43;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}

.torah-portion-name-en {
  margin-top: 7px;
  color: #777f89;
  font-size: 13px;
  font-weight: 400;
}

.torah-portion-reference {
  margin-top: 4px;
  color: #a0a3a7;
  font-size: 11px;
}

.study-chapter-marker {
  margin: 40px 0 24px;
  text-align: center;
}

.study-chapter-hebrew {
  color: #3d444c;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.15;
}

.study-chapter-number {
  color: #a3a5a8;
  font-size: 15px;
  font-weight: 400;
}

.study-bible-verse {
  padding: 25px 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 180ms ease;
}

.study-bible-verse:hover {
  background: rgba(242, 246, 249, 0.42);
}

.study-bible-verse.study-verse-jump-highlight,
.study-bible-verse.study-verse-selected,
.study-bible-verse.study-verse-active-highlight {
  background: #f1f6fa;
  box-shadow: none;
}

.study-bible-verse.study-verse-fading,
.study-bible-verse.study-verse-fade-highlight {
  background: #fafcfd;
}

.study-bible-verse-number {
  color: #b0b2b5;
  font-size: 12px;
  font-weight: 400;
}

.study-bible-verse-number:hover,
.study-bible-hebrew-verse-marker:hover {
  color: #737982;
}

.study-bible-hebrew-row {
  gap: 10px;
}

.study-bible-hebrew {
  max-width: 940px;
  margin-inline: auto;
  color: var(--study-hebrew-color, #343b43);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.72;
  word-spacing: 0.025em;
}

.study-passage-results.font-small .study-bible-hebrew {
  font-size: 30px;
  line-height: 1.68;
}

.study-passage-results.font-normal .study-bible-hebrew {
  font-size: 36px;
  line-height: 1.72;
}

.study-passage-results.font-large .study-bible-hebrew {
  font-size: 40px;
  line-height: 1.72;
}

.study-passage-results.font-extra-large .study-bible-hebrew {
  font-size: 46px;
  line-height: 1.68;
}

.study-bible-english {
  max-width: 820px;
  margin: 13px auto 2px;
  color: var(--study-english-color, #69717b);
  font-size: 19px;
  line-height: 1.65;
}

.study-passage-results.font-small .study-bible-english {
  font-size: 17px;
  line-height: 1.62;
}

.study-passage-results.font-normal .study-bible-english {
  font-size: 19px;
  line-height: 1.65;
}

.study-passage-results.font-large .study-bible-english {
  font-size: 21px;
  line-height: 1.66;
}

.study-passage-results.font-extra-large .study-bible-english {
  font-size: 23px;
  line-height: 1.66;
}

.study-hebrew-word {
  border-radius: 2px;
  padding-inline: 1px;
}

/* Higher specificity is intentional: notes-system.css loads after this file. */
.study-bible-hebrew .study-hebrew-word.gn-hl {
  border-radius: 2px;
}

.study-bible-hebrew .study-hebrew-word.gn-hl-gold { background-color: rgba(245, 200, 76, 0.34); }
.study-bible-hebrew .study-hebrew-word.gn-hl-orange { background-color: rgba(240, 160, 75, 0.32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-red { background-color: rgba(242, 164, 155, 0.32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-purple { background-color: rgba(199, 174, 232, 0.32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-blue { background-color: rgba(126, 196, 240, 0.32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-green { background-color: rgba(143, 217, 182, 0.32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-grey { background-color: rgba(199, 202, 209, 0.34); }
.study-bible-hebrew .study-hebrew-word.gn-hl-brown { background-color: rgba(216, 185, 147, 0.34); }

.study-bible-hebrew .study-hebrew-word.gn-ul {
  border-bottom-width: 1.5px !important;
  padding-bottom: 3px;
}

@media (max-width: 900px) {
  .study-bible-layout,
  .study-bible-layout.study-word-panel-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-passage-head {
    padding-block: 20px 14px;
  }

  .study-bible-verse {
    padding: 21px 10px;
  }

  .study-passage-results.font-normal .study-bible-hebrew {
    font-size: 32px;
    line-height: 1.68;
  }

  .study-passage-results.font-normal .study-bible-english {
    font-size: 18px;
    line-height: 1.64;
  }
}

@media (max-width: 560px) {
  .study-bible-controls-sticky {
    padding-inline: 12px;
  }

  .study-passage-selector {
    gap: 7px 5px;
  }

  .study-toolbar {
    flex-wrap: wrap;
  }

  .study-verse-stack {
    padding-inline: 0;
  }

  .study-bible-verse {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    padding: 18px 4px;
  }

  .study-bible-hebrew-row {
    grid-template-columns: minmax(0, 1fr) 25px;
    gap: 5px;
  }

  .study-passage-results.font-normal .study-bible-hebrew {
    font-size: 28px;
    line-height: 1.64;
  }

  .study-passage-results.font-normal .study-bible-english {
    font-size: 17px;
    line-height: 1.62;
  }

  .torah-portion-name-he,
  .study-chapter-hebrew {
    font-size: 31px;
  }
}

/* Final Study Bible toolbar balance and chapter-heading rhythm. */
.study-bible-controls-sticky {
  margin-bottom: 0;
  padding-block: 6px 8px;
}

.study-passage-selector {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1fr);
  align-items: end;
  gap: 10px;
  width: 100%;
}

.study-nav-passage-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.study-nav-passage-group .study-book-control {
  width: 132px;
  min-width: 118px;
}

.study-nav-passage-group .study-chapter-control,
.study-nav-passage-group .study-verse-control {
  width: 46px;
  min-width: 44px;
}

.study-nav-passage-group #studyChapter,
.study-nav-passage-group #studyVerse {
  min-width: 44px;
  max-width: 46px;
}

.study-nav-passage-group .study-version-compact {
  width: 84px;
  min-width: 78px;
}

#studyLoadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  max-width: none;
  height: 34px;
  min-height: 34px;
  padding-inline: 9px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
  font-size: 11px;
  font-weight: 500;
}

#studyClearBtn {
  flex-basis: 34px;
}

.study-toolbar {
  justify-content: center;
  gap: 3px;
}

.study-toolbar-button.study-daily-reading-btn {
  width: auto;
  min-width: 0;
  padding-inline: 6px;
  border-color: transparent;
  background: transparent;
  color: #6b7280;
  font-size: 10px;
  font-weight: 400;
}

.study-toolbar-button.study-daily-reading-btn:hover,
.study-toolbar-button.study-daily-reading-btn:focus-visible {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #374151;
}

.study-weekly-reading-panel {
  justify-self: stretch;
  min-width: 140px;
  align-self: end;
}

.weekly-reading-toolbar-chip {
  justify-content: flex-end;
  gap: 3px;
  color: #6b7280;
}

.weekly-reading-toolbar-chip strong {
  flex: 0 1 auto;
  color: #4b5563;
  font-weight: 500;
}

.weekly-reading-reference-link {
  flex: 0 1 auto;
  color: #6b7280;
  font-weight: 400;
  text-decoration: none;
}

.weekly-reading-reference-link:hover,
.weekly-reading-reference-link:focus-visible {
  color: #111827;
  text-decoration: underline;
  text-decoration-color: rgba(75, 85, 99, .3);
  text-underline-offset: 2px;
}

.study-passage-head {
  gap: 0;
  padding: 22px 20px 8px;
  border: 0;
  text-align: center;
}

.study-passage-book-hebrew {
  color: #1f2937;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.12;
}

.study-passage-head .study-passage-book-chapter {
  margin-top: 5px;
  color: #374151;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
}

.study-passage-head .study-passage-context {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}

.study-passage-context:empty,
.study-passage-book-hebrew:empty {
  display: none;
}

.study-verse-stack {
  padding-top: 0;
}

.study-verse-stack > .study-bible-verse:first-child {
  padding-top: 16px;
}

@media (max-width: 880px) {
  .study-passage-selector {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .study-nav-passage-group {
    flex-wrap: wrap;
  }

  .study-weekly-reading-panel {
    grid-column: 1 / -1;
  }

  .weekly-reading-toolbar-chip {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .study-passage-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .study-toolbar {
    justify-content: flex-start;
  }

  .study-weekly-reading-panel {
    grid-column: 1;
  }

  .study-passage-head {
    padding: 18px 12px 7px;
  }

  .study-passage-book-hebrew {
    font-size: 30px;
  }

  .study-verse-stack > .study-bible-verse:first-child {
    padding-top: 14px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  user-select: text;
}

.no-copy,
.no-copy * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.no-copy input,
.no-copy textarea,
.no-copy button,
.no-copy select {
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.app-header {
  min-height: 54px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 6px 18px;
  border-bottom: 1px solid #eef0f2;
  background: var(--header-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.brand-left {
  grid-column: 1 / 3;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-logo {
  width: auto;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
}

.brand-copy h1 {
  margin: 0;
}

.brand-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.bereshit-header-mark {
  grid-column: 3;
  justify-self: center;
  align-self: center;
  direction: rtl;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  color: var(--accent);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 0.9;
  transform: translateY(-1px);
}

.header-spacer {
  grid-column: 4;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 48px;
}

.mode-badge {
  align-items: center;
  min-height: 24px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.72);
  color: var(--accent-dark);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mode-badge:not(.hidden) {
  display: inline-flex;
}

.bereshit-bet {
  color: var(--accent);
  font-size: 1.82em;
  font-weight: 600;
  line-height: 0.78;
}

.bereshit-rest {
  font-size: 1em;
  font-weight: 700;
  line-height: 0.9;
}

.status-strip {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-badge,
.metric {
  min-height: 34px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 5px 8px;
}

.public-load-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.public-load-banner {
  display: block;
  padding: 6px 22px 0;
}

.public-load-banner.hidden {
  display: none;
}

.status-badge {
  min-width: 82px;
  justify-items: center;
  font-weight: 700;
}

.status-badge.loaded {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.status-badge.not-loaded {
  color: var(--crimson);
  background: var(--crimson-soft);
}

.status-badge.loading {
  color: var(--warn-ink);
  background: var(--warn-bg);
}

.metric span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.metric strong {
  font-size: 14px;
}

.app-shell {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  padding: 14px 12px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}

@media (min-width: 821px) {
  .sidebar {
    position: sticky;
    top: var(--app-header-height, 0px);
    align-self: start;
    height: calc(100vh - var(--app-header-height, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.tab {
  width: 100%;
  justify-content: flex-start;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 2px 8px;
  margin-bottom: 2px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-ink);
  padding: 8px 10px;
  text-align: left;
  font-weight: 500;
  font-size: 13.5px;
}

.tab::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.55;
}

.tab.active::before { opacity: 0.8; }

/* Section icons — Lucide-based */
/* scroll-text - Study Bible parent only (Bible Reader sub-item gets its own book-open below) */
.tab[data-tab="studyBible"]:not(.nav-subitem)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M3 7v13a2 2 0 0 1 2 2h2'/%3E%3Ccircle cx='3' cy='7' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M3 7v13a2 2 0 0 1 2 2h2'/%3E%3Ccircle cx='3' cy='7' r='2'/%3E%3C/svg%3E");
}

/* book-open - Bible Reader sub-item */
.nav-subitem[data-tab="studyBible"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

/* search - Gematria Tools parent only, distinct from Dictionary's icon below */
.tab[data-tab="gematriaTools"]:not(.nav-subitem)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* scroll-text + search overlay - Dictionary sub-item */
.tab[data-tab="dictionary"]::before,
.nav-subitem[data-gematria-tool="dictionary"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4' stroke-width='2'/%3E%3Cpath d='M3 7v13a2 2 0 0 1 2 2h2' stroke-width='2'/%3E%3Ccircle cx='3' cy='7' r='2' stroke-width='2'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke-width='2'/%3E%3Cline x1='8' y1='12' x2='12' y2='12' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='3' stroke-width='1.5'/%3E%3Cline x1='20.1' y1='20.1' x2='22' y2='22' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4' stroke-width='2'/%3E%3Cpath d='M3 7v13a2 2 0 0 1 2 2h2' stroke-width='2'/%3E%3Ccircle cx='3' cy='7' r='2' stroke-width='2'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke-width='2'/%3E%3Cline x1='8' y1='12' x2='12' y2='12' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='3' stroke-width='1.5'/%3E%3Cline x1='20.1' y1='20.1' x2='22' y2='22' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* calculator - Calculator sub-item */
.tab[data-tab="calculator"]::before,
.nav-subitem[data-gematria-tool="calculator"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
}

/* text-search - Find Phrases sub-item */
.tab[data-tab="phrases"]::before,
.nav-subitem[data-gematria-tool="phrases"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M10 12H3'/%3E%3Cpath d='M10 18H3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cline x1='19.1' y1='17.1' x2='21' y2='19'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M10 12H3'/%3E%3Cpath d='M10 18H3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cline x1='19.1' y1='17.1' x2='21' y2='19'/%3E%3C/svg%3E");
  grid-row: 1;
}

/* list-search (list bullets + search overlay) - Concordance sub-item */
.tab[data-tab="concordance"]::before,
.nav-subitem[data-gematria-tool="concordance"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Cline x1='8' y1='6' x2='15' y2='6'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Cline x1='8' y1='12' x2='12' y2='12'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3Cline x1='20.1' y1='18.1' x2='22' y2='20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Cline x1='8' y1='6' x2='15' y2='6'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Cline x1='8' y1='12' x2='12' y2='12'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3Cline x1='20.1' y1='18.1' x2='22' y2='20'/%3E%3C/svg%3E");
}

/* hash - Verse Value sub-item */
.tab[data-tab="verseValue"]::before,
.nav-subitem[data-gematria-tool="verseValue"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='9' y2='9'/%3E%3Cline x1='4' x2='20' y1='15' y2='15'/%3E%3Cline x1='10' x2='8' y1='3' y2='21'/%3E%3Cline x1='16' x2='14' y1='3' y2='21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='9' y2='9'/%3E%3Cline x1='4' x2='20' y1='15' y2='15'/%3E%3Cline x1='10' x2='8' y1='3' y2='21'/%3E%3Cline x1='16' x2='14' y1='3' y2='21'/%3E%3C/svg%3E");
  grid-row: 1;
}

/* calendar-days */
.tab[data-tab="tehillimDaily"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
}

/* book-heart */
.tab[data-tab="traditionalPrayers"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3Cpath d='M16 8.2C16 7 15 6 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9C9 6 8 7 8 8.2c0 .6.3 1.2.7 1.6L12 13l3.3-3.1c.4-.5.7-1.1.7-1.7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3Cpath d='M16 8.2C16 7 15 6 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9C9 6 8 7 8 8.2c0 .6.3 1.2.7 1.6L12 13l3.3-3.1c.4-.5.7-1.1.7-1.7z'/%3E%3C/svg%3E");
}

/* copy / panels */
.tab[data-tab="hebrewFlashcards"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
}

/* calendar-clock */
.tab[data-tab="calendarTimes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M17.5 17.5 16 16.3V14'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M17.5 17.5 16 16.3V14'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
}

/* list-tree */
.tab[data-tab="torahPortions"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H11'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H11'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E");
}

/* info */
.tab[data-tab="credits"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

.tab small {
  grid-column: 2;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
}

.tab span {
  grid-column: 2;
}

.tab:hover {
  background: #f3f4f6;
  color: var(--accent-dark);
}

.tab.active {
  background: #eef0f2;
  color: var(--accent-dark);
  font-weight: 600;
}

/* A dropdown parent (Study Bible / Gematria Tools) gets this persistent, slightly softer
   "in this family" look whenever any of its sub-items is the one actually active - same calm
   grey language as .tab.active, no harsh blue, so the parent still reads as "current section"
   even when it isn't itself the literal active .tab. See updateNavSubitemsExpansion in app.js. */
.tab.nav-parent-active {
  background: #f3f4f6;
  color: var(--accent-dark);
}

.tab.nav-parent-active::before {
  opacity: 0.7;
}

.tab.locked-nav-item {
  color: #9ca3af;
}

/* Shared dropdown pattern used by both Study Bible and Gematria Tools: their sub-items are
   indented lists of plain .tab buttons (same click handling, same active/hover colours already
   defined above) - only spacing/indent/icon-size changes below.
   Hidden (display:none) by default - updateNavSubitemsExpansion() in app.js adds/removes the
   "expanded" class on the relevant #...NavSubitems element whenever the active tool changes, so
   each dropdown only shows while the user is actually inside that family of sections. */
.nav-group {
  margin-bottom: 2px;
}

.nav-subitems {
  display: none;
  gap: 1px;
  margin: 2px 0 6px 9px;
  padding-left: 8px;
  border-left: 2px solid var(--sidebar-border);
}

.nav-subitems.expanded {
  display: grid;
}

.nav-subitem {
  grid-template-columns: 15px 1fr;
  gap: 2px 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
}

.nav-subitem::before {
  width: 15px;
  height: 15px;
}

.torah-portions-sidebar {
  margin-top: 10px;
  border-top: 1px solid #e5e7eb;
  color: var(--sidebar-ink);
}

.torah-portions-sidebar summary {
  cursor: pointer;
  padding: 10px 9px 8px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.torah-portion-list {
  display: grid;
  gap: 4px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 0 0 8px;
}

.torah-portion-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-ink);
  text-align: left;
  cursor: pointer;
}

.torah-portion-row:hover,
.torah-portion-row:focus {
  background: #f3f4f6;
  outline: 2px solid transparent;
}

.torah-portion-order {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
}

.torah-portion-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.torah-portion-row-name {
  overflow: hidden;
  color: #FFF7DD;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torah-portion-row-hebrew {
  color: #374151;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: right;
}

.torah-portion-row-reference {
  grid-column: 2;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.work-area {
  width: min(1280px, calc(100% - 32px));
  margin: 12px auto 36px;
}

.panel,
.tool,
.result-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tool {
  display: none;
  padding: 14px 18px;
}

.tool.active {
  display: block;
}

.tool-helper {
  max-width: 620px;
  margin: -4px 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.gematria-tools-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.gematria-tools-head h2 {
  margin-bottom: 0;
}

/* Navigation between Dictionary/Calculator/Find Phrases/Concordance/Verse Value now lives in the
   sidebar dropdown under "Gematria Tools" (see #gematriaNavSubitems in index.html and
   updateNavSubitemsExpansion in app.js), so this in-page row is hidden rather than deleted - its
   buttons still exist and still carry [data-gematria-tool], so setGematriaTool() and the click
   listener in setupGematriaToolsWorkspace() are untouched and still work exactly as before; they
   just aren't shown twice on the page anymore. */
.gematria-tool-switcher {
  display: none;
}

.gematria-tool-switcher button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}

.gematria-tool-switcher button:hover,
.gematria-tool-switcher button:focus {
  border-color: var(--line-dark);
  color: var(--ink);
}

.gematria-tool-switcher button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.gematria-subtool {
  display: none;
}

.gematria-subtool.active {
  display: block;
}

.loader,
.diagnostics {
  margin-bottom: 0;
}

.loader-actions,
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

button,
.file-label {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  border-radius: 6px;
  padding: 7px 12px;
  min-height: 34px;
  font-weight: 600;
  cursor: pointer;
}

button:hover,
.file-label:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

button:disabled:hover {
  background: inherit;
}

.primary-load {
  min-height: 50px;
  padding: 12px 22px;
  font-size: 16px;
}

.secondary-btn {
  border-color: #e5e7eb;
  background: #ffffff;
  color: #4b5563;
}

.secondary-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.clear-search-button {
  min-height: 32px;
  border-color: #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #4b5563;
  padding: 7px 10px;
  font-size: 13px;
}

.clear-search-button:hover,
.clear-search-button:focus {
  border-color: #d1d5db;
  background: #f3f4f6;
}

.compact-secondary-btn {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.copy-btn {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11.5px;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #6b7280;
  font-weight: 500;
}

.copy-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.file-label input {
  display: none;
}

.legacy-tools {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.legacy-tools summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

label {
  display: grid;
  gap: 5px;
  color: #374151;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

input,
select {
  height: 40px;
  font-size: 16px;
  line-height: 22px;
}

textarea {
  resize: vertical;
}

input[dir="rtl"] {
  font-size: 16px;
}

textarea[dir="rtl"] {
  font-size: 22px;
}

#dictionary .actions {
  align-items: center;
  margin-top: 2px;
}

#dictionary .actions button {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

#dictionary h2 {
  margin-bottom: 8px;
}

.dictionary-search-grid {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(310px, 360px) minmax(150px, 180px);
  justify-content: space-between;
  column-gap: clamp(16px, 5vw, 88px);
  row-gap: 8px;
  align-items: end;
  margin-bottom: 6px;
}

.dictionary-search-block {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  min-width: 0;
}

.dictionary-search-block label {
  display: grid;
  gap: 5px;
}

.dictionary-search-block input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 8px 10px;
}

.dictionary-value-search {
  max-width: 180px;
}

.dictionary-word-search {
  max-width: 360px;
}

.dictionary-strong-search {
  max-width: 180px;
}

.dictionary-search-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-top: 6px;
}

.dictionary-search-actions button {
  min-height: 34px;
  padding: 7px 12px;
}

.dictionary-word-search .dictionary-search-actions {
  flex-wrap: nowrap;
}

.dictionary-word-search .dictionary-search-actions button {
  padding-inline: 9px;
  font-size: 12px;
}

.dictionary-helper-row {
  display: none;
  min-height: 0;
  margin-top: 0;
}

.dictionary-value-search .dictionary-helper-row {
  display: none;
}

.dictionary-value-summary-row {
  min-height: 22px;
  margin: 0 0 6px;
}

.dictionary-tools-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 12px;
}

.dictionary-tools-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.dictionary-tools-row button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.compact-tool-field,
.compact-form-grid {
  max-width: 420px;
}

.compact-tool-actions {
  margin-top: 2px;
  margin-bottom: 6px;
}

.study-gateway {
  min-height: 560px;
}

.study-bible-section {
  min-height: 620px;
}

.study-bible-section.active {
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: visible;
}

.study-bible-controls-sticky {
  position: sticky;
  top: var(--app-header-height, 0px);
  z-index: 30;
  margin: 0 -18px 12px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid #eef0f2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
}

.study-passage-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: transparent;
}

.study-passage-selector label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.study-book-control {
  width: 180px;
}

.study-chapter-control {
  width: 64px;
}

.study-verse-control {
  width: 64px;
}

.study-passage-selector .study-version-compact {
  width: 108px;
  min-width: 108px;
}

.study-passage-selector select,
.study-passage-selector input {
  width: 100%;
  min-height: 38px;
  padding: 6px 9px;
}

.study-passage-selector input::placeholder {
  color: #9AA5B3;
  opacity: 1;
  font-weight: 500;
}

#studyBook.study-book-placeholder {
  color: #9ca3af;
  font-weight: 500;
  background-color: #ffffff;
}

#studyChapter {
  min-width: 64px;
  max-width: 64px;
  text-align: center;
}

#studyVerse {
  min-width: 64px;
  max-width: 64px;
  text-align: center;
}

.study-passage-selector > button {
  width: auto;
  min-width: 0;
  max-width: 130px;
  min-height: 38px;
  align-self: end;
  padding-inline: 10px;
  white-space: nowrap;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  font-weight: 600;
}

.study-passage-selector > button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

#studyClearBtn {
  max-width: 120px;
}

.study-toolbar-shell {
  position: static;
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.study-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  align-self: end;
}

.study-version-compact select {
  width: 100%;
  min-width: 108px;
  max-width: none;
  min-height: 38px;
  padding: 6px 30px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  overflow: visible;
  text-overflow: clip;
}

.study-toolbar-button {
  width: 38px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #6b7280;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.study-toolbar-button[hidden] {
  display: none;
}

.study-toolbar-button::before {
  color: #6b7280;
}

#studyAudioOptionsBtn,
#studyOptionsBtn {
  color: transparent;
  font-size: 0;
}

#studyAudioOptionsBtn::before {
  content: "\266A";
  font-size: 17px;
}

#studyOptionsBtn::before {
  content: "\2699";
  font-size: 16px;
}

.study-toolbar-button:hover,
.study-toolbar-button:focus,
.study-toolbar-button[aria-expanded="true"] {
  background: #f3f4f6;
  border-color: #d1d5db;
  box-shadow: none;
  outline: 2px solid transparent;
}

.study-toolbar-button.study-daily-reading-btn {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

.study-popover {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 60;
  min-width: 260px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  padding: 12px;
}

.study-popover-title {
  margin-bottom: 10px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.study-popover-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.dev-inline-label {
  color: #8B1E2D;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

.study-popover label {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.study-popover select {
  min-height: 32px;
  border-color: #e5e7eb;
  background-color: #ffffff;
}

.study-mode-popover {
  display: grid;
  gap: 6px;
}

.study-mode-popover button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  padding: 7px 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.study-mode-popover button:hover,
.study-mode-popover button:focus {
  background: #FFF6E3;
  outline: 2px solid transparent;
}

.study-mode-popover button.active {
  border-color: #9ca3af;
  background: #E8CF7A;
}

.study-toggle-list {
  display: grid;
  gap: 6px;
  margin: 4px 0 10px;
}

.study-compare-settings {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.study-compare-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
}

.study-compare-settings .study-compare-unloaded {
  opacity: .58;
}

.study-toggle-list label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}

.study-toggle-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}

.study-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 14px;
}

.study-segmented-control button {
  min-height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.study-segmented-control button.active,
.study-segmented-control button[aria-pressed="true"] {
  border-color: #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
}

.study-font-stepper,
.study-font-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.study-font-stepper {
  justify-content: space-between;
  margin-bottom: 10px;
}

.study-font-stepper strong {
  color: #374151;
}

.study-font-presets .active {
  border-color: #6b7280;
  background: #eef0f2;
  color: #374151;
}

.study-settings-font-size {
  margin: 4px 0 12px;
}

.study-popover-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#studyOptionsPopover {
  padding: 16px;
}

#studyOptionsPopover .study-popover-title {
  margin-bottom: 14px;
  color: #374151;
  font-size: 16px;
  font-weight: 700;
}

#studyOptionsPopover .study-popover-subtitle,
#studyOptionsPopover > label {
  color: #6F7A89;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#studyOptionsPopover .study-popover-subtitle {
  margin: 0 0 6px;
}

#studyOptionsPopover > label {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

#studyOptionsPopover select {
  min-height: 40px;
  height: 40px;
  border-color: #e5e7eb;
  background-color: #ffffff;
  color: #374151;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

#studyOptionsPopover select option {
  font-size: 14px;
  font-weight: 500;
}

#studyOptionsPopover .study-font-presets {
  gap: 8px;
}

#studyOptionsPopover .study-font-presets button {
  min-height: 38px;
  border-color: #e5e7eb;
  background: #ffffff;
  color: #374151;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
}

#studyOptionsPopover .study-font-presets button.active {
  border-color: #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
}

#studyOptionsPopover .study-settings-font-size,
#studyOptionsPopover .study-hebrew-marks-options {
  margin: 0 0 16px;
}

.study-audio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.study-audio-controls button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

.study-audio-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.study-audio-controls select {
  min-height: 30px;
  padding: 4px 24px 4px 8px;
  font-size: 12px;
}

.study-audio-status {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.study-audio-disabled {
  opacity: .78;
}

.study-bible-layout {
  display: grid;
  grid-template-columns: minmax(0, 960px);
  justify-content: center;
  gap: 0;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
  --study-word-panel-width: 360px;
  transition: none;
}

.study-bible-layout.study-word-panel-open {
  grid-template-columns: minmax(0, 1fr) 8px minmax(280px, var(--study-word-panel-width));
  justify-content: start;
}

.study-bible-layout.study-bible-layout-empty {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  align-items: start;
  overflow: visible;
}

.study-bible-layout.study-bible-layout-empty .study-passage-panel {
  min-height: 0;
  height: auto;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.study-bible-layout.study-bible-layout-empty .study-word-panel {
  display: none;
}

.study-word-resize-handle {
  align-self: stretch;
  min-height: 100%;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}

.study-word-resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.14);
  transition: background .16s ease;
}

.study-word-resize-handle:hover::before,
.study-word-panel-resizing .study-word-resize-handle::before {
  background: rgba(107, 114, 128, 0.32);
}

.study-word-resize-handle[hidden],
.study-word-panel[hidden] {
  display: none;
}

.study-passage-panel,
.study-word-panel {
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.study-passage-panel {
  min-height: 0;
  height: auto;
  max-height: none;
  min-width: 0;
  overflow: visible;
}

.study-word-panel {
  position: sticky;
  top: 112px;
  height: 100%;
  max-height: calc(100vh - 150px);
  overflow: auto;
  min-width: 0;
  opacity: 1;
  transition: opacity 160ms ease;
}

.study-passage-head,
.study-word-panel-head,
.same-value-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
}

.study-passage-head span,
.same-value-head span,
.study-word-panel-head span,
.study-word-panel-head em {
  color: #9ca3af;
  font-size: .82rem;
  font-weight: 400;
}

.study-word-summary {
  display: grid;
  gap: 9px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eef0f2;
}

.study-word-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-word-summary-head > span {
  color: #9ca3af;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Panel tab row (Word Study / Sources) */
.study-panel-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.study-panel-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.study-panel-tab:hover {
  color: var(--ink, #374151);
}

.study-panel-tab.active {
  color: var(--ink, #374151);
  border-bottom-color: var(--ink, #374151);
}

/* Sources content */
.sources-content {
  padding: 16px;
}

.sources-coming,
.sources-empty,
.sources-error {
  font-size: .82rem;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #eef0f2;
}

.sources-loading {
  font-size: .82rem;
  color: #9ca3af;
  margin: 0;
  padding: 8px 0;
}

/* Sources header with verse ref and nav arrows */
.sources-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.sources-header .sources-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink, #374151);
  margin: 0;
  flex: 1;
}
.sources-verse-label {
  color: var(--ink, #374151);
}
.sources-verse-nav {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: .85rem;
  color: #6b7280;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.sources-verse-nav:hover {
  background: #f0f4f8;
  color: var(--ink, #374151);
}

/* Direct | Related toggle */
.sources-mode-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.sources-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px 12px;
  font-size: .74rem;
  color: var(--muted, #6b7280);
  cursor: pointer;
  border-right: 1px solid var(--border, #e5e7eb);
  transition: background .15s, color .15s;
}
.sources-mode-btn:last-child { border-right: none; }
.sources-mode-btn:hover { background: #f3f4f6; }
.sources-mode-btn--active {
  background: #f0f4f8;
  color: var(--ink, #374151);
  font-weight: 600;
}

/* Category row (top-level) */
.sources-category-row {
  appearance: none;
  border: none;
  background: #f9fafb;
  border-radius: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background .12s;
}
.sources-category-row:hover {
  background: #f0f4f8;
}
.sources-category-row-name {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink, #374151);
}
.sources-category-row-count {
  font-size: .75rem;
  color: #9ca3af;
  font-weight: 600;
}

/* Drill-down: commentator rows */
.sources-drill-category {
  font-size: .78rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.sources-commentator-row {
  appearance: none;
  border: none;
  background: #f9fafb;
  border-radius: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  margin-bottom: 3px;
  cursor: pointer;
  transition: background .12s;
}
.sources-commentator-row:hover {
  background: #f0f4f8;
}
.sources-commentator-name {
  font-size: .82rem;
  color: var(--ink, #374151);
  font-weight: 500;
}
.sources-commentator-count {
  font-size: .72rem;
  color: #9ca3af;
  font-weight: 600;
}

.sources-commentator-count--external {
  font-style: italic;
  font-weight: 500;
  opacity: 0.85;
}

/* Source detail view */
.source-detail-ref {
  font-size: .78rem;
  color: #9ca3af;
  margin: 0 0 10px;
}
.source-detail-segment-ref {
  font-size: .72rem;
  color: #9ca3af;
  margin: 10px 0 4px;
  font-style: italic;
}
/* Source detail view */
.source-detail-back {
  appearance: none;
  border: none;
  background: none;
  font-size: .78rem;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 10px;
  display: inline-block;
  transition: color .12s;
}
.source-detail-back:hover {
  color: var(--ink, #374151);
}

.source-detail-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink, #374151);
  margin: 0 0 4px;
  line-height: 1.35;
}

.source-detail-category {
  font-size: .74rem;
  color: #9ca3af;
  margin: 0 0 14px;
}

.source-detail-text {
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink, #374151);
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #eef0f2;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}
.source-detail-text--he {
  font-family: "SBL Hebrew", "Frank Ruehl CLM", "Ezra SIL", serif;
  font-size: 1rem;
  line-height: 1.9;
}
.source-detail-text--en {
  color: #4b5563;
  font-size: .97rem;
  line-height: 1.6;
}
/* One parent card for Both mode */
.source-detail-card {
  background: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.source-detail-card-subtitle {
  font-size: .72rem;
  color: #9ca3af;
  margin: 0 0 10px;
  font-style: italic;
}
.source-detail-section-label {
  font-size: .68rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
.source-detail-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 12px 0;
}
.source-detail-text--incard {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.source-detail-text b {
  font-weight: 600;
}

.source-detail-blocked {
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #eef0f2;
  margin-bottom: 10px;
}
.source-detail-blocked p {
  font-size: .82rem;
  color: #6b7280;
  margin: 0 0 8px;
  line-height: 1.5;
}
.source-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.source-detail-meta span {
  font-size: .72rem;
  color: #9ca3af;
}

.source-detail-sefaria-link {
  font-size: .78rem;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  transition: color .12s;
}
.source-detail-sefaria-link:hover {
  color: var(--ink, #374151);
}

.source-detail-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid #eef0f2;
  margin-top: 4px;
}
.source-detail-attribution span {
  font-size: .7rem;
  color: #9ca3af;
  line-height: 1.4;
}
.source-detail-attribution a {
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px dotted #d1d5db;
}
.source-detail-attribution a:hover {
  color: var(--ink, #374151);
}
.source-detail-lang-note {
  font-size: .75rem;
  color: #9ca3af;
  margin: 4px 0 0;
  font-style: italic;
}
.source-lang-toggle {
  display: flex;
  gap: 0;
  margin: 6px 0 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.source-lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 3px 10px;
  font-size: .72rem;
  color: var(--muted, #6b7280);
  cursor: pointer;
  border-right: 1px solid var(--border, #e5e7eb);
  transition: background .15s, color .15s;
}
.source-lang-btn:last-child { border-right: none; }
.source-lang-btn:hover { background: #f3f4f6; }
.source-lang-btn--active {
  background: #f0f4f8;
  color: var(--ink, #374151);
  font-weight: 600;
}

.study-word-close {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #F9FAFB;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.study-word-close:hover,
.study-word-close:focus {
  background: #F3F4F6;
  color: #374151;
  outline: 2px solid transparent;
}

.study-word-hero {
  display: block;
  align-items: start;
}

.study-word-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.study-word-hero-left .word-study-pointed {
  align-self: flex-start;
  display: inline-block;
  max-width: 100%;
  color: var(--study-hebrew-color, #374151);
  direction: rtl;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  unicode-bidi: isolate;
}

.study-word-hero-left .word-study-pronunciation {
  display: block;
  margin-top: 6px;
  color: #374151;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  text-align: left;
}

.word-study-unvowelled-wrap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
}

.word-study-unvowelled-label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.word-study-unvowelled {
  display: block;
  color: var(--study-hebrew-color, #374151);
  direction: rtl;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.1;
  unicode-bidi: isolate;
}

.study-word-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 16px 10px;
  border-bottom: 1px solid #eef0f2;
}

.study-word-badges button {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  color: #4b5563;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.study-word-primary-meaning,
.study-word-root-block {
  display: grid;
  gap: 5px;
  padding-top: 5px;
}

.study-word-primary-meaning > span,
.study-word-root-label,
.study-word-root-meaning span,
.study-word-root-block > div > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.study-word-primary-meaning > strong {
  color: #374151;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.study-word-root-block {
  margin-top: 3px;
  padding: 10px 12px;
  border: 1px solid #eef0f2;
  border-radius: 6px;
  background: #fafbfc;
}

.study-word-root-hebrew {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  justify-self: start;
  color: var(--study-hebrew-color, #374151);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  unicode-bidi: isolate;
}

.study-word-root-meaning,
.study-word-root-block > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.study-word-root-meaning strong,
.study-word-root-block > div > strong {
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .study-word-root-hebrew {
    font-size: 20px;
  }
}

.study-word-badges button:hover,
.study-word-badges button:focus {
  border-color: #d1d5db;
  background: #f3f4f6;
  outline: 2px solid transparent;
}

.study-word-quick-facts {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding: 10px 12px;
  background: #fafbfc;
  border-radius: 6px;
  border: 1px solid #eef0f2;
}

.study-word-quick-facts div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.study-word-quick-facts span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
}

.study-word-quick-facts strong {
  color: var(--study-hebrew-color, #374151);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.study-verse-stack {
  display: grid;
  gap: 0;
}

.torah-portion-banner {
  text-align: center;
  margin: 20px 0 14px;
  padding: 12px 12px 10px;
  border: 0;
}

.torah-portion-name-he {
  color: #374151;
  direction: rtl;
  font-family: var(--hebrew-font, "Times New Roman", "Noto Serif Hebrew", serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}

.torah-portion-name-en {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.torah-portion-reference {
  margin-top: 2px;
  color: #9ca3af;
  font-size: 11.5px;
  font-weight: 400;
}

.torah-portions-page {
  display: grid;
  gap: 14px;
}

.torah-portions-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 2px;
}

.torah-portions-toolbar label,
.torah-book-column-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.torah-portion-highlight-toggle {
  align-self: center;
  margin-bottom: 2px;
  letter-spacing: 0;
  text-transform: none;
}

.torah-current-portion-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.torah-current-portion-note strong {
  color: #374151;
  font-size: 16px;
}

.torah-current-portion-note em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.torah-current-portion-muted strong {
  color: #9ca3af;
}

.torah-portion-notices {
  display: grid;
  gap: 4px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #FFFDF8;
  padding: 8px 10px;
}

.torah-portion-notices p {
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
}

.torah-portions-books {
  display: grid;
}

/* Chabad-style density: up to 5 book columns side by side on desktop instead of stacked
   full-width sections, so a reader can scan several books at once. Narrows to fewer columns,
   then a single column, as the viewport shrinks (see the responsive rules further down). */
.torah-books-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 10px;
  align-items: start;
}

.torah-book-column {
  display: grid;
  gap: 2px;
  border-right: 1px solid var(--line);
  padding-right: 8px;
}

.torah-book-column:last-child {
  border-right: 0;
  padding-right: 0;
}

/* Book heading: Hebrew name is the dominant line (large, bold serif), the English/
   transliteration name sits underneath as a clearly secondary line. A 2px border-bottom acts as
   the "current book" indicator track - normally neutral, recolored to a soft calm grey (the same
   pale/muted language used everywhere else for "current", e.g. .tehillim-daily-item.is-today)
   when .current-book is set. No blue/cyan anywhere. */
.torah-book-column-head {
  display: grid;
  gap: 1px;
  padding: 0 2px 4px;
  border-bottom: 2px solid var(--line-dark);
  margin-bottom: 3px;
}

.torah-book-column-hebrew {
  color: var(--accent-dark);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
}

.torah-book-column-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.torah-book-column.current-book .torah-book-column-head {
  border-bottom-color: var(--muted);
}

.torah-book-column.current-book .torah-book-column-hebrew {
  color: var(--accent-dark);
}

.torah-book-column-items {
  display: grid;
  gap: 0;
}

.torah-portions-empty {
  margin: 0;
  border: 1px solid rgba(222, 214, 200, 0.78);
  border-radius: 8px;
  background: #FFFDF8;
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Torah portion grid cards ── */
.torah-portion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}

.torah-portion-card {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 2px 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}

.torah-portion-card:hover {
  background: var(--accent-soft);
  border-color: var(--line-dark);
}

.torah-portion-card.current-week {
  border-color: var(--line-dark);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--muted);
}

.torah-combined-section .torah-portion-card {
  grid-template-columns: 1fr auto;
}

.torah-portion-card-num {
  grid-row: 1 / 3;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.torah-portion-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.torah-portion-card-hebrew {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  justify-self: end;
}

.torah-portion-card-ref {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-week-badge {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--line-dark);
}

/* Compact Chabad-style portion item - name line plus two clickable reference lines (Torah,
   Haftarah), no action buttons and no fixed row height, so items pack as tightly as the text
   itself needs. Reused as-is inside the collapsed "Combined readings" <details> so both sections
   share one visual language. */
.torah-portion-item {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 2px 2px 2px 6px;
  line-height: 1.2;
}

/* Current-week portion: same soft pale-grey background + thin muted left border used by
   Daily Tehillim & Mishlei's "today" highlight (.tehillim-daily-item.is-today), so both pages
   share one calm, premium highlight language. No blue/cyan. */
.torah-portion-item.current-week {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--muted);
}

.torah-portion-item-name {
  min-width: 0;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.torah-portion-item-name .hebrew {
  color: var(--accent-dark);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 14px;
  font-weight: 500;
}

/* Clickable reference text - deliberately styled like inline text, not a button, since the
   reference itself is the click target (no separate "Open Torah"/"Open Haftarah" controls). */
.torah-ref-link {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.torah-ref-link:hover,
.torah-ref-link:focus {
  color: var(--accent-dark);
  text-decoration-color: currentColor;
  outline: 2px solid transparent;
}

.torah-ref-link-haftarah {
  color: #8a8578;
}

.torah-ref-missing {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.torah-book-portion-badge {
  display: inline-block;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--line-dark);
}

/* Combined/double readings: kept, but secondary and out of the way inside a collapsed <details>
   (same pattern as .legacy-tools/.advanced-textual-data elsewhere in the app) so they never
   dominate the page the way an always-open section would. */
.torah-combined-details {
  margin: 6px 0 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 2px 10px 4px;
}

.torah-combined-details summary {
  cursor: pointer;
  padding: 8px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.torah-combined-details summary span {
  font-weight: 500;
}

.torah-combined-details[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.torah-combined-list {
  display: grid;
  gap: 0;
}

.torah-combined-list .torah-portion-item {
  padding: 4px 2px;
}

/* Narrower viewports: fewer book columns, eventually a single column, before density starts
   hurting readability. */
@media (max-width: 1180px) {
  .torah-books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .torah-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .torah-books-grid { grid-template-columns: 1fr; }
  .torah-book-column { border-right: 0; padding-right: 0; }
}

.study-weekly-reading-panel {
  flex: 1 1 220px;
  min-width: 180px;
  margin: 0;
  align-self: end;
  position: relative;
}

.study-weekly-reading-panel[hidden] {
  display: none;
}

.weekly-reading-toolbar-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  width: 100%;
  overflow: visible;
}

.weekly-reading-toolbar-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #415064;
  padding: 3px 6px;
  text-align: left;
  font-size: 11px;
  line-height: 1.18;
  max-height: 30px;
  overflow: hidden;
  cursor: default;
}

.weekly-reading-reference-link {
  appearance: none;
  border: 0;
  border-radius: 4px;
  padding: 1px 3px;
  background: transparent;
  color: #526276;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(82, 98, 118, 0.32);
  text-underline-offset: 2px;
}

.weekly-reading-reference-link:hover,
.weekly-reading-reference-link:focus-visible {
  color: #24364d;
  background: #eef2f6;
  outline: 2px solid rgba(82, 98, 118, 0.34);
  outline-offset: 1px;
}

.weekly-reading-toolbar-chip:hover,
.weekly-reading-toolbar-chip:focus,
.weekly-reading-toolbar-chip[aria-expanded="true"] {
  border-color: #e5e7eb;
  background: #ffffff;
  outline: 2px solid transparent;
}

.weekly-reading-toolbar-chip strong {
  color: #374151;
  font-size: 11px;
  font-weight: 600;
}

.weekly-toolbar-label {
  color: #8B95A3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.weekly-toolbar-separator {
  color: #B6A27A;
  font-weight: 600;
}

.weekly-reading-muted {
  color: #9ca3af;
  font-weight: 700;
}

.weekly-reading-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 36px));
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #FFFDF7;
  box-shadow: 0 14px 32px rgba(15, 31, 53, .16);
  padding: 12px;
}

.weekly-reading-popover[hidden] {
  display: none;
}

.weekly-reading-popover-head,
.weekly-reading-popover-refs {
  display: grid;
  gap: 4px;
}

.weekly-reading-popover-head span,
.weekly-reading-popover-refs span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.weekly-reading-popover-head strong,
.weekly-reading-popover-refs strong {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.weekly-reading-popover-refs div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.weekly-reading-popover-note {
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.weekly-reading-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.weekly-reading-popover-actions button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
}

.weekly-reading-visibility-actions {
  border-top: 1px solid #eef0f2;
  padding-top: 8px;
}

.study-chapter-marker {
  margin: 24px 0 14px;
  text-align: center;
}

.study-chapter-hebrew {
  margin-inline-end: 10px;
  color: #374151;
  direction: rtl;
  font-family: var(--hebrew-font, "Times New Roman", "Noto Serif Hebrew", serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.study-chapter-number {
  color: #AAA;
  font-size: 18px;
  font-weight: 500;
  vertical-align: baseline;
}

.study-end-marker {
  margin: 28px 16px 14px;
  padding: 14px 12px;
  border: 0;
  color: #7D6A42;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.study-chapter-sentinel,
.study-chapter-sentinel-previous,
.study-range-sentinel {
  width: 100%;
  height: 1px;
}

.study-bible-verse {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 20px 12px;
  border-bottom: none;
  transition: background 0.6s ease;
}

.study-bible-verse.study-verse-jump-highlight {
  background: #f1f5f9;
  box-shadow: inset 2px 0 0 #94a3b8;
}

.study-bible-verse:hover {
  background: #f8fafccc;
}
.study-bible-verse.study-verse-selected {
  background: #f0f4f8;
  box-shadow: inset 2px 0 0 #c7d2de;
}
.study-bible-verse.study-verse-active-highlight {
  background: #f0f4f8;
}
.study-bible-verse.study-verse-fading {
  background: #f8fafc;
  transition: background 10s ease-out;
}
.study-bible-verse.study-verse-fade-highlight {
  background: #f8fafc;
  transition: background 3s ease-out;
}

.study-bible-verse:last-child {
  border-bottom: none;
}

.study-bible-verse-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: color .15s;
}
.study-bible-verse-number:hover {
  color: #6b7280;
}

.study-bible-hebrew {
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--study-hebrew-color, #374151);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  word-spacing: .02em;
  letter-spacing: 0;
  user-select: text;
}

.study-bible-hebrew-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: start;
  justify-items: stretch;
}

.study-bible-hebrew-verse-marker {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 0 0;
  text-align: center;
}

.study-bible-hebrew-verse-marker:hover {
  color: #6b7280;
}

.study-bible-hebrew.align-right {
  text-align: right;
}

.study-bible-hebrew.align-center {
  text-align: center;
}

.study-bible-hebrew.align-left {
  text-align: left;
}

.study-bible-english.align-left {
  text-align: left;
}

.study-bible-english.align-center {
  text-align: center;
}

.study-bible-english.align-right {
  text-align: right;
}

.study-passage-results.font-small .study-bible-hebrew {
  font-size: 24px;
  line-height: 1.5;
}

.study-passage-results.font-normal .study-bible-hebrew {
  font-size: 28px;
  line-height: 1.5;
}

.study-passage-results.font-large .study-bible-hebrew {
  font-size: 34px;
  line-height: 1.5;
}

.study-passage-results.font-extra-large .study-bible-hebrew {
  font-size: 42px;
  line-height: 1.5;
}

.study-passage-results.font-small .study-bible-english {
  font-size: 15px;
  line-height: 1.55;
}

.study-passage-results.font-normal .study-bible-english {
  font-size: 16px;
  line-height: 1.55;
}

.study-passage-results.font-large .study-bible-english {
  font-size: 18px;
  line-height: 1.58;
}

.study-passage-results.font-extra-large .study-bible-english {
  font-size: 22px;
  line-height: 1.62;
}

.study-hebrew-word {
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  display: inline;
  margin: 0;
  padding: 1px 2px;
  user-select: text;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}

.study-hebrew-word:hover,
.study-hebrew-word:focus {
  background: #eff6ff;
  outline: 2px solid transparent;
  box-shadow: none;
}

.study-hebrew-word.selected {
  background: #dbeafe;
  color: #202124;
  box-shadow: none;
}

.study-hebrew-word.selected-return {
  background: #eff6ff;
  color: #202124;
  box-shadow: none;
  transition: background 3s ease-out;
}

.study-hebrew-word.same-value-highlight {
  background: #e0e7ff;
  box-shadow: none;
}

.study-hebrew-word.selected.same-value-highlight {
  background: #dbeafe;
}

.special-letter-large {
  display: inline-block;
  font-size: 1.45em;
  line-height: 0;
  transform: translateY(0.04em);
}

.special-letter-small {
  display: inline-block;
  font-size: 0.72em;
}

.special-letter-suspended {
  display: inline-block;
  position: relative;
  top: -0.35em;
  font-size: 0.85em;
}

.special-letter-dotted {
  position: relative;
  display: inline-block;
}

.special-letter-dotted::after {
  content: "·";
  position: absolute;
  top: -0.65em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75em;
}

.special-letter-broken {
  display: inline-block;
  opacity: 0.92;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.study-bible-english {
  margin-top: 5px;
  color: var(--study-english-color, #6B7280);
  font-size: 16px;
  line-height: 1.55;
  cursor: pointer;
}
.study-bible-english:hover {
  color: var(--study-english-color, #4b5563);
}

.study-bible-english p {
  margin: 0;
}

.study-word-empty,
.study-bible-empty {
  padding: 24px;
  color: var(--muted);
}

.study-empty-state {
  padding: 24px 0;
  color: #8A7A5E;
  font-size: 15px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.study-word-detail-grid {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.study-word-detail-grid div {
  display: grid;
  grid-template-columns: minmax(120px, .72fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid #EEF1F5;
}

.study-word-detail-grid div:last-child {
  border-bottom: 0;
}

.study-word-detail-grid span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.study-word-detail-grid strong {
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.study-word-letter-values {
  display: grid;
  gap: 8px;
  padding: 2px 0 10px;
}

.study-word-letter-values-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.study-gematria-breakdown {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}

.study-gematria-letter-sequence {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
  max-width: 100%;
  padding: 2px 1px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.study-gematria-letter-unit {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  max-width: 34px;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: start;
  gap: 3px;
  padding-inline: 0;
  padding-block: 1px;
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  text-align: center;
}

.study-gematria-letter {
  color: #374151;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.study-gematria-letter-value {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
}

.study-gematria-total {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 600px) {
  .study-gematria-letter-sequence {
    gap: 3px;
  }

  .study-gematria-letter-unit {
    width: 28px;
    min-width: 28px;
    max-width: 32px;
    padding-inline: 0;
  }

  .study-gematria-letter {
    font-size: 22px;
  }
}

.study-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid #eef0f2;
}

.study-panel-actions button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11.5px;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #6b7280;
  font-weight: 500;
}

.study-panel-actions button:hover {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.study-panel-dev-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  background: #f9fafb;
}

.study-word-sections {
  display: grid;
}

.study-word-section {
  border-bottom: 1px solid #eef0f2;
}

.study-word-section summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #4b5563;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.study-word-section summary::-webkit-details-marker {
  display: none;
}

.study-word-section[open] summary {
  background: #f9fafb;
}

.study-word-section[open] summary span:last-child {
  transform: rotate(45deg);
}

.study-word-section-body {
  padding: 0 16px 12px;
}

.study-word-section-body .study-word-detail-grid {
  padding: 0;
  gap: 4px;
}

.study-word-section-body .same-value-head {
  padding: 0 0 8px;
  border-bottom: 0;
}

.study-panel-note {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

.study-lexicon-notes {
  display: grid;
  gap: 8px;
}

.same-value-list {
  max-height: 210px;
  overflow: auto;
  padding: 6px 0;
}

.same-value-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}

.same-value-row:hover,
.same-value-row:focus {
  background: #FFF6E3;
  outline: 2px solid transparent;
}

.same-value-row strong {
  color: #374151;
  font-size: 1.15rem;
  text-align: right;
}

.same-value-row em {
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}

.same-value-copy {
  margin: 6px 0 0;
}

.study-occurrence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.study-occurrence-list span {
  border: 1px solid #E7DCC5;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
}

.gateway-grid {
  display: grid;
  gap: 12px;
}

.two-column-gateway {
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  align-items: start;
}

.gateway-card {
  display: grid;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
  box-shadow: 0 5px 16px rgba(28, 38, 48, 0.06);
}

.gateway-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid #eef0f2;
  padding-bottom: 8px;
}

.gateway-card-head span {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gateway-card-head strong {
  color: var(--accent-dark);
  font-size: 15px;
}

.gateway-select-label {
  max-width: 260px;
  color: var(--accent-dark);
  font-size: 13px;
}

.daily-reading-card {
  display: grid;
  gap: 3px;
  width: fit-content;
  min-width: 220px;
  border-left: 3px solid #9ca3af;
  border-radius: 8px;
  background: #eef0f2;
  padding: 10px 12px;
}

.daily-reading-card span,
.daily-reading-card small,
.gateway-note {
  color: var(--muted);
  font-size: 13px;
}

.daily-reading-card strong {
  color: #374151;
  font-size: 22px;
  line-height: 1.15;
}

/* ── Tehillim Daily — compact grid layout ── */
/* Simple Hebrew-month daily reading list (days 1-30/29) - replaces the old two-pane
   day-list + inline verse reader below (.tehillim-layout etc., now unused - see
   renderTehillimDailySection in app.js), since that inline reader duplicated Study Bible.
   Rendered as a dense grid of compact items (.tehillim-daily-grid/-item) rather than one
   full-width row per day, so most/all of the month fits on one screen. The Psalms/Proverbs
   references themselves are the click targets (.torah-ref-link, shared with Torah Portions) -
   no separate "Open Tehillim"/"Open Mishlei" buttons. */
.tehillim-daily-page {
  display: grid;
  gap: 8px;
}

.tehillim-daily-page-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 2px 6px;
}

.tehillim-daily-page-head strong {
  color: var(--ink);
  font-size: 14px;
}

.tehillim-daily-page-head small {
  color: var(--muted);
  font-size: 12px;
}

.tehillim-daily-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 10px;
  border-top: 1px solid var(--line);
}

.tehillim-daily-item {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 3px 2px;
  line-height: 1.25;
}

.tehillim-daily-item.is-today {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--muted);
}

.tehillim-daily-item-day {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .tehillim-daily-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .tehillim-daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tehillim-daily-grid { grid-template-columns: 1fr; }
}

.tehillim-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.tehillim-day-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.tehillim-day-list-head {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.tehillim-day-list-head strong {
  color: var(--ink);
  font-size: 14px;
}

.tehillim-day-list-head small {
  color: var(--muted);
  font-size: 12px;
}

.tehillim-day-items {
  display: grid;
  gap: 2px;
  padding: 6px;
  max-height: 65vh;
  overflow-y: auto;
}

.tehillim-day-btn {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  padding: 5px 7px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: background 0.15s;
}

.tehillim-day-btn:hover {
  background: var(--accent-soft);
}

.tehillim-day-btn.active {
  border-color: var(--line-dark);
  background: var(--accent-soft);
  font-weight: 600;
}

.tehillim-day-num {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.tehillim-day-btn.active .tehillim-day-num {
  color: var(--ink);
}

.tehillim-day-psalms {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tehillim reading pane ── */
.tehillim-reading-pane {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.tehillim-reading-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.tehillim-reading-head strong {
  color: var(--ink);
  font-size: 15px;
}

.tehillim-reading-head span {
  color: var(--muted);
  font-size: 13px;
}

.tehillim-reading-body {
  padding: 8px 20px 28px;
  max-height: 70vh;
  overflow-y: auto;
}

.tehillim-chapter-block {
  margin-bottom: 32px;
}

.tehillim-chapter-block:last-child {
  margin-bottom: 0;
}

.tehillim-chapter-head {
  text-align: center;
  padding: 24px 0 14px;
  margin-bottom: 10px;
  border-bottom: none;
}

.tehillim-chapter-head .tehillim-chapter-hebrew {
  display: block;
  color: var(--ink, #374151);
  direction: rtl;
  font-family: var(--hebrew-font, "Times New Roman", "Noto Serif Hebrew", serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
}

.tehillim-chapter-head .tehillim-chapter-number {
  display: block;
  color: #AAA;
  font-size: 16px;
  font-weight: 500;
  margin-top: 4px;
}

.tehillim-verse {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 20px 12px;
}

.tehillim-verse-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  border: none;
}

.tehillim-verse-body {
  display: grid;
  gap: 5px;
}

.tehillim-verse-hebrew {
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--study-hebrew-color, #374151);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  word-spacing: .02em;
}

.tehillim-verse-english {
  margin-top: 5px;
  color: var(--study-english-color, #6B7280);
  font-size: 16px;
  line-height: 1.55;
}

.tehillim-loading {
  color: var(--muted);
  font-size: 14px;
  padding: 20px 0;
}

.gateway-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gateway-action-row button {
  min-height: 31px;
  padding: 6px 10px;
  font-size: 12px;
}

/* old tehillim-schedule-list removed — replaced by tehillim-day-list */

.prayer-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.prayer-list {
  display: grid;
  gap: 6px;
}

.prayer-list button {
  justify-content: space-between;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
  min-height: 34px;
  padding: 7px 9px;
  text-align: left;
}

.prayer-list button.active {
  border-color: #9ca3af;
  background: #eef0f2;
  color: #374151;
  box-shadow: inset 3px 0 0 #9ca3af;
}

.prayer-list button span {
  color: var(--muted);
  font-size: 11px;
}

.prayer-hebrew {
  direction: rtl;
  unicode-bidi: isolate;
  color: #374151;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.45;
  text-align: right;
}

.prayer-translit {
  color: #64748B;
  font-size: 16px;
  line-height: 1.35;
}

.prayer-english {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.key-word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.key-word-row span {
  border: 1px solid #E3D6BC;
  border-radius: 999px;
  background: #fafbfc;
  color: #374151;
  padding: 4px 8px;
  font-size: 20px;
  line-height: 1;
}

/* Learn Hebrew only: trims the shared h2/tool-helper spacing a little so the card sits higher on
   the page. Scoped to #hebrewFlashcards specifically so no other tool section's heading spacing is
   affected. */
#hebrewFlashcards h2 {
  margin-bottom: 3px;
}

#hebrewFlashcards .tool-helper {
  margin: -2px 0 6px;
}

.flashcard-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 12px 12px;
  gap: 8px;
  text-align: center;
}

/* True three-column grid - left: deck selector, centre: card, right: lesson buttons - exactly as
   specified, rather than anything stacked above the card. "deck" and "lesson" each span all three
   content rows (note/progress/card), so both side columns sit at the same height as the card
   itself instead of occupying a row of their own above it - this is what actually moves the card
   up next to the deck selector instead of below a full-width header strip. Row heights are driven
   only by the always-present centre-column content (note/progress/card), never by whether the deck
   or lesson selector's own content is short or tall, so nothing in the side columns can ever push
   the card down. The actions row spans the full width beneath everything, centred under the card
   (see .flashcard-action-row below). */
.flashcard-layout {
  display: grid;
  /* Left column widened from 160px to 210px so the deck <select> has room to show its full label
     ("Top 200 Hebrew Words") without clipping - 160px was enough for shorter labels (Aleph-Bet,
     Hebrew Vowels, Prefixes & Particles) but not that one. Card/lesson columns are unchanged. */
  grid-template-columns: 210px minmax(320px, 1fr) 170px;
  grid-template-areas:
    "deck    note     lesson"
    "deck    progress lesson"
    "deck    card     lesson"
    "actions actions  actions";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  text-align: left;
}

.flashcard-deck-select {
  grid-area: deck;
  align-self: start;
  min-width: 0;
}

.flashcard-deck-select select {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-shadow: none;
}

.flashcard-deck-select select option {
  font-size: 16px;
  font-weight: 500;
}

/* The card (.flashcard-display, grid-area: card) is centred by margin:0 auto within its own
   minmax(320px, 1fr) column - but that column sits between an 210px deck column and a 170px
   lesson column, which are NOT equal widths. That 40px difference shifts the card's own column
   (and therefore the card) 20px to the right of this layout's true horizontal centre - the centre
   that lines up with the בראשית header mark above (.bereshit-header-mark, which is centred
   independently of the sidebar via .app-header's own symmetric column split, the same true centre
   .flashcard-shell/.work-area already share). This nudges only the rendered card back onto that
   line with a pure transform (no box-size, width/height, or grid-track change, so the deck
   selector and lesson buttons do not move and the card's own dimensions are untouched). Gated to
   above 820px, not just above the flashcard layout's own 760px breakpoint: .app-header collapses
   to a different (non-symmetric) column split at max-width:820px, where .bereshit-header-mark no
   longer sits on that same true centre line, so a fixed correction only makes sense while the
   header itself is still using its wide symmetric layout. */
@media (min-width: 821px) {
  .flashcard-display {
    transform: translateX(-20px);
  }
}

/* Two centred rows under the card, not one: top row is the study flow (Previous | Show/Hide Answer
   | Add to Review | Next - the order a student actually uses them: reveal, judge, queue for
   review, move on), bottom row is list management (Review List · [count] | Clear Review |
   Shuffle). Both rows are just ".gateway-action-row" elements (see .flashcard-action-row-top/
   -bottom below), so they inherit the same shared button flex/sizing rules the rest of the app
   uses - only this wrapper (grid-area: actions, unchanged from before) is flashcard-specific, and
   it only stacks the two rows vertically and centres them; it does not affect the card above it. */
.flashcard-action-row {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flashcard-shell .gateway-action-row {
  justify-content: center;
  flex-wrap: wrap;
}

.flashcard-shell .flashcard-arrow-btn {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

/* Frequency-sourced decks (Top 200 Biblical Hebrew Words) show a one-line sourcing note here so
   the card order is never mistaken for a curated teaching sequence. Fixed height (not min-height)
   plus overflow:hidden, not just reserved-but-growable space, so even an unusually long note could
   never add height above the card. */
.flashcard-deck-note {
  grid-area: note;
  height: 14px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.flashcard-progress {
  grid-area: progress;
  height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Lesson selector for decks over FLASHCARD_LESSON_SIZE cards: a short "N cards · M lessons"
   summary plus a compact 2-column grid of chip buttons, one per 25-card range (Top 200 Biblical
   Hebrew Words has 8: 1-25, 26-50 ... 176-200) - a genuine right-side column running the full
   height of the note/progress/card rows (grid-area: lesson above), never a row above the card.
   Because the "lesson" grid area's row-span height is set by the centre column (note/progress/card,
   always present) and not by the lesson block's own content, a deck with zero lesson chips and a
   deck with eight take up exactly the same footprint in the grid - switching between them cannot
   move the card.
   The explicit [hidden] rule matters: a normal author-stylesheet rule always wins the cascade over
   the browser's built-in `[hidden] { display: none }` UA rule regardless of selector specificity,
   so without an override here the block would stay visible even while JS sets block.hidden = true.
   Deliberately uses visibility (not display) so the reservation above still holds even while
   hidden. */
.flashcard-lesson-block[hidden] {
  visibility: hidden;
}

.flashcard-lesson-block {
  grid-area: lesson;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.flashcard-lesson-summary {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}

.flashcard-lesson-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.flashcard-lesson-chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 6px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}

.flashcard-lesson-chip:hover {
  border-color: var(--accent-dark);
}

.flashcard-lesson-chip.is-active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* Fixed-size, playing-card-shaped deck, self-centred (margin: 0 auto) at a hard-locked width and
   height - not min-height/max-width, which can still grow or shrink with content. This is the
   single most important rule for "the card must not move": width and height are constants, so
   card.categoryId's font-size class, word length, answer visibility, and which deck/lesson/review
   pass is active can only ever change what's drawn *inside* this fixed box, never the box itself
   or its centred position on the page. */
.flashcard-display {
  grid-area: card;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 460px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  padding: 32px 22px 22px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.07);
}

/* Pointed Hebrew on flashcards is always rendered as one combined text node (see
   renderFlashcardHebrew() in app.js) — base letters and niqqud are never split into separate
   spans, so the marks stay correctly positioned under/on the carrier letter. Font stack matches
   Study Bible's Hebrew rendering. Weight is kept moderate (not heavy bold) and letter-spacing is
   zero so niqqud never drifts away from its letter.
   flex: 0 0 250px (a fixed height, not flex:1 auto/min-height) is the key fix for "the Hebrew word
   position keeps changing between words": previously this zone's *actual* height depended on how
   tall .flashcard-back ended up (which varied card to card - some show a value line, some also
   show a root/occurrences line), so even though the outer card was a fixed size, the split between
   front and back within it wasn't, and the centred glyph landed at a different pixel each time.
   Now both zones (see .flashcard-back below) are their own fixed heights that always sum to the
   same total, so place-items: center always centres the glyph inside the exact same 250px
   rectangle - the same fixed horizontal line - no matter which card, deck, or answer state is
   showing. */
.flashcard-front {
  flex: 0 0 250px;
  height: 250px;
  display: grid;
  place-items: center;
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--ink);
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: clamp(56px, 14vw, 88px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0;
}

.flashcard-hebrew-text {
  display: inline-block;
  letter-spacing: 0;
  line-height: inherit;
  font-weight: inherit;
}

/* Deck-specific sizing only - never colour-splits or otherwise separates base letters from
   niqqud. Aleph-Bet is a letter-recognition deck, so its single glyph should dominate the card -
   sized well above the other decks, not just modestly larger. Vowel cards (carrier letter + mark)
   sit at the base size for clarity. Word cards (including Prefixes & Particles) use one standard
   size for every normal short word - 2, 3, and 4 (and typically 5-6) base-letter words all render
   identically; only genuinely long words step down (see .is-long-word below), so nothing about a
   short word's own length changes its size or position. */
.flashcard-front.is-letter-card,
.flashcard-front.is-letter-form-card {
  font-size: clamp(104px, 27vw, 176px);
}

.flashcard-front.is-vowel-card {
  font-size: clamp(56px, 14vw, 88px);
}

.flashcard-front.is-word-card {
  font-size: clamp(44px, 11vw, 68px);
}

/* Only genuinely long words (7+ base letters, measured by unpointHebrew(card.front).length in
   renderFlashcard - see app.js) step down a size, so they still fit inside the fixed-width card
   rather than overflowing it. Normal 2-6 letter words - the overwhelming majority of any deck,
   including every 2/3/4-letter word - all use the standard .is-word-card size above and are never
   affected by this rule. */
.flashcard-front.is-word-card.is-long-word {
  font-size: clamp(30px, 7.5vw, 46px);
}

.flashcard-back {
  flex: 0 0 144px;
  height: 144px;
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr) 20px;
  align-content: stretch;
  gap: 5px;
  justify-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  padding: 9px 8px 7px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: rgba(15, 23, 42, 0.02);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.flashcard-back.is-visible {
  visibility: visible;
  opacity: 1;
}

.flashcard-pronunciation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow: visible;
  line-height: 1.25;
}

.flashcard-pronunciation strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.flashcard-meaning-details {
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  line-height: 1.35;
}

.flashcard-meaning {
  display: block;
  overflow-wrap: anywhere;
}

.flashcard-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  line-height: 1.25;
}

.flashcard-value em,
.flashcard-meaning-details small {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.flashcard-empty {
  display: grid;
  gap: 5px;
  justify-items: center;
  align-content: center;
  height: 100%;
  color: var(--muted);
}

.flashcard-empty strong {
  color: var(--accent-dark);
  font-size: 20px;
}

/* Controls order (Previous | Show/Hide Answer | Next | Add to Review | Shuffle | Review List ·
   [count] | Clear Review) comes straight from source order in the renderHebrewFlashcardsSection()
   markup in app.js - no CSS reordering needed. Review List and Clear Review only ever appear
   together (see syncFlashcardActionControls in app.js): both show once there's a queued review
   list or a review pass is active, both stay hidden the rest of the time.
   Add to Review flips to this once the card on screen is already saved, as a quiet confirmation
   the click worked rather than a button that looks identical whether or not anything happened. */
#flashcardAddToReview.is-in-review {
  background: var(--accent-soft, rgba(15, 23, 42, 0.06));
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Same [hidden]-vs-author-rule cascade issue as .flashcard-lesson-block above: an explicit
   override keeps these fully gone (not just empty) whenever there's no review activity. */
.flashcard-review-chip[hidden],
.flashcard-clear-review[hidden] {
  display: none;
}

.flashcard-review-chip {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  font-weight: 700;
}

/* Active while a review pass is actually under way (state.flashcards.reviewMode), not just
   whenever the chip is visible - so it reads as "you are here" during the pass and as a plain
   re-entry button the rest of the time. */
.flashcard-review-chip.is-active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.flashcard-clear-review {
  color: var(--muted);
}

.flashcard-clear-review:hover {
  color: var(--crimson, #b91c1c);
  border-color: var(--crimson, #b91c1c);
}

/* Below this width the three-column grid (deck | card | lesson) no longer has room for a 160px
   left column plus a 320px card plus a 170px right column, so the deck selector moves into its own
   full-width row above the centre column, leaving a two-column grid: centre (note/progress/card)
   and a right-hand lesson column. The "lesson" area still spans all of the centre column's rows
   (deck/note/progress/card), so - exactly as at full width - it can only ever affect layout
   sideways, never push the card down, and a deck with no lesson chips reserves the same space as
   one with eight. */
@media (max-width: 760px) {
  .flashcard-layout {
    grid-template-columns: minmax(0, 1fr) 170px;
    grid-template-areas:
      "deck     lesson"
      "note     lesson"
      "progress lesson"
      "card     lesson"
      "actions  actions";
  }

  .flashcard-deck-select {
    align-self: auto;
  }
}

/* Below this width even a two-column grid is too tight, so everything stacks in a single column -
   but the lesson block keeps its fixed-height reservation (see .flashcard-lesson-block[hidden]
   above) so a deck with no lessons and a deck with many still take up the same vertical space, and
   the card/actions below still use their own fixed, smaller width/height at this breakpoint.
   Whichever tier is active, the numbers are hard constants for that tier, so nothing about
   deck/lesson/answer/review state can move the card at any width. */
@media (max-width: 480px) {
  .flashcard-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "deck"
      "lesson"
      "note"
      "progress"
      "card"
      "actions";
  }

  .flashcard-lesson-block {
    height: 72px;
    overflow: hidden;
  }

  .flashcard-lesson-summary {
    text-align: center;
  }

  .flashcard-lesson-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 60px;
    overflow-y: auto;
  }

  .flashcard-display {
    width: 280px;
    height: 400px;
    padding: 24px 18px 18px;
  }

  .flashcard-front {
    flex-basis: 220px;
    height: 220px;
  }

  .flashcard-back {
    flex-basis: 126px;
    height: 126px;
    grid-template-rows: 23px minmax(0, 1fr) 19px;
    gap: 4px;
    padding: 7px 6px 6px;
  }
}

#calendarTimes {
  --font-page-title: 20px;
  --font-section-label: 11px;
  --font-card-title: 14px;
  --font-primary-value: 28px;
  --font-timer-value: 26px;
  --font-secondary-value: 14px;
  --font-small-label: 11px;
  --font-helper: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

#calendarTimes,
#calendarTimes * {
  font-family: Arial, Helvetica, sans-serif;
}

#calendarTimes > h2 {
  margin-bottom: 12px;
  color: #374151;
  font-size: var(--font-page-title);
  font-weight: 700;
  line-height: 1.2;
}

.calendar-page-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.calendar-location-bar {
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 9px;
}

.calendar-toolbar-location {
  display: grid;
  gap: 0;
  min-width: 0;
}

.calendar-location-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-location-bar strong,
.calendar-location-line {
  color: var(--accent-dark);
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-location-bar small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.calendar-location-message:empty {
  display: none;
}

.calendar-location-actions {
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.calendar-location-actions button {
  min-height: 29px;
  padding: 5px 8px;
  font-size: 12px;
}

.calendar-location-actions label {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
}

.calendar-location-actions input {
  width: 132px;
  height: 29px;
  min-height: 29px;
  padding: 4px 7px;
  font-size: 13px;
}

.calendar-manual-location {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 160px) minmax(120px, 160px) auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid #eef0f2;
  padding-top: 10px;
}

.calendar-manual-location label {
  color: var(--accent-dark);
  font-size: 13px;
}

.calendar-manual-location input {
  min-height: 32px;
}

.calendar-coordinate-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.calendar-coordinate-actions button {
  min-height: 32px;
  white-space: nowrap;
}

.calendar-moed-info {
  margin-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 5px;
}

.calendar-moed-info summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
}

.calendar-moed-info div {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.calendar-moed-info span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.calendar-moed-info p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.jerusalem-compass-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  text-align: center;
}

.jerusalem-compass-card > strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.jerusalem-compass-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.jerusalem-compass {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.compass-face {
  position: relative;
  width: 104px;
  aspect-ratio: 1;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.55);
}

.compass-face span {
  position: absolute;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.compass-n {
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
}

.compass-e {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.compass-s {
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
}

.compass-w {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.compass-needle {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 3px;
  height: 41px;
  border-radius: 999px;
  background: var(--accent-dark);
  transform-origin: 50% 41px;
}

.compass-needle::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--accent-dark);
  transform: translateX(-50%);
}

.compass-needle::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent-dark);
  transform: translateX(-50%);
}

.compass-bearing {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}

.compass-distance {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calendar-dashboard-grid,
.calendar-times-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.calendar-secondary-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.74fr) minmax(156px, 0.58fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.calendar-top-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.54fr) minmax(620px, 2.46fr);
  gap: 14px;
  align-items: start;
}

.calendar-support-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.84fr) minmax(520px, 1.3fr);
  gap: 14px;
  align-items: start;
}

.calendar-card {
  align-content: start;
  gap: 8px;
  border-color: #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 11px 12px;
  box-shadow: 0 7px 18px rgba(28, 38, 48, 0.055);
}

.calendar-card-body {
  display: grid;
  gap: 8px;
}

.calendar-hero-panel .calendar-card-body,
.moon-simulator-card .calendar-card-body,
.calendar-moedim-panel .calendar-card-body {
  gap: 8px;
}

.calendar-hero-panel {
  padding-inline: 10px;
}

.calendar-top-grid .calendar-hero-panel,
.calendar-top-grid .moon-simulator-card {
  min-height: 0;
}

.calendar-support-grid .moedim-grid {
  grid-template-columns: 1fr;
}

.calendar-support-grid .moedim-card {
  min-height: 0;
  padding-block: 7px;
}

.calendar-support-grid .prayer-times-card {
  min-width: 0;
}

.calendar-hero-panel .gateway-card-head,
.moon-simulator-card .gateway-card-head,
.calendar-moedim-panel .gateway-card-head {
  gap: 5px;
  padding-bottom: 6px;
}

.calendar-hero-panel .gateway-card-head,
.moon-simulator-card .gateway-card-head,
.calendar-moedim-panel .gateway-card-head {
  align-items: start;
  flex-direction: column;
}

.calendar-hero-panel .gateway-card-head strong,
.moon-simulator-card .gateway-card-head strong,
.calendar-moedim-panel .gateway-card-head strong {
  font-size: 13px;
}

.calendar-moedim-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.calendar-moedim-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calendar-moedim-filter {
  display: grid;
  gap: 3px;
  flex: 0 0 min(210px, 48%);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-moedim-filter select {
  height: 31px;
  min-height: 31px;
  border-color: #d1d5db;
  background: rgba(255, 253, 248, 0.86);
  color: #374151;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.compact-card-head {
  justify-content: flex-start;
}

.hebrew-hour-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 13px 16px 14px;
}

.calendar-hour-hero-panel {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.78), transparent 50%),
    linear-gradient(180deg, #ffffff, #f9fafb);
}

.hebrew-hour-card .gateway-card-head {
  border-bottom: 0;
  padding-bottom: 2px;
}

.hebrew-hour-card .gateway-card-head strong {
  font-size: 16px;
}

.calendar-hero-card {
  display: grid;
  gap: 2px;
}

.calendar-section-label {
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hebrew-date-hero {
  color: #374151;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}

.gregorian-date-muted {
  margin-top: 2px;
  color: #8B8B8B;
  font-size: 12px;
  font-weight: 500;
}

.daily-calendar-list {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.calendar-notes-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}

.calendar-hero-panel .calendar-fact {
  grid-template-columns: 1fr;
  gap: 1px;
  min-height: 0;
  border-bottom-color: rgba(222, 214, 200, 0.52);
  padding: 3px 0;
}

.calendar-hero-panel .calendar-fact span {
  font-size: 9.6px;
}

.calendar-hero-panel .calendar-fact strong {
  font-size: 11px;
  line-height: 1.25;
}

.calendar-hero-panel .calendar-fact strong {
  text-align: left;
}

.calendar-fact-list,
.calendar-mini-list,
.time-list,
.night-watch-panel {
  display: grid;
  gap: 6px;
}

.calendar-fact,
.time-row,
.watch-row,
.calendar-mini-list div {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(222, 214, 200, 0.72);
  border-radius: 0;
  background: transparent;
  min-height: 32px;
  padding: 6px 2px;
}

.calendar-mini-list {
  max-width: 760px;
}

.moedim-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.moedim-card {
  display: grid;
  gap: 3px;
  min-height: 54px;
  border: 1px solid rgba(222, 214, 200, 0.68);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.68);
  padding: 8px 10px;
}

.moedim-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.moedim-card strong {
  color: var(--accent-dark);
  font-size: 13px;
  line-height: 1.25;
}

.moedim-card small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.calendar-fact span,
.time-row span,
.watch-row span,
.calendar-mini-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calendar-fact strong,
.time-row strong,
.watch-row strong,
.calendar-mini-list em {
  min-width: 0;
  color: var(--accent-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  text-align: right;
}

.moon-simulator-card .calendar-fact {
  grid-template-columns: 1fr;
  gap: 1px;
  min-height: 0;
  padding: 4px 0;
}

.moon-simulator-card .calendar-fact strong {
  font-size: 11px;
  text-align: left;
  white-space: normal;
}

.hebrew-hour-card .calendar-fact,
.hebrew-hour-card .time-row {
  min-height: 30px;
  padding-block: 5px;
}

.calendar-mini-list > strong,
.time-list > strong,
.night-watch-panel > strong {
  color: #6b7280;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.night-watch-panel details {
  margin-top: 2px;
}

.moon-card-body,
.moon-simulator {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 76px;
}

.moon-disc {
  width: 56px;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}

.moon-disc-shadow {
  fill: url(#moonPhaseShadowGradient);
}

.moon-disc-light {
  fill: url(#moonPhaseLightGradient);
}

.moon-disc-shadow-craters circle {
  fill: #233148;
  opacity: 0.36;
}

.moon-disc-light-craters circle {
  fill: #7D8997;
  opacity: 0.24;
}

.moon-disc-sphere-shade {
  fill: url(#moonPhaseSphereShade);
  pointer-events: none;
}

.moon-disc-rim {
  fill: none;
  stroke: #536174;
  stroke-width: 1.1;
}

.moon-phase-content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.moon-phase-hero {
  display: grid;
  gap: 3px;
}

.moon-phase-hero span {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.moon-phase-hero strong {
  color: var(--accent-dark);
  font-size: 12px;
}

.moon-phase-hero small {
  color: var(--muted);
  font-size: 11px;
}

.crescent-note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  align-items: baseline;
  border: 0;
  border-top: 1px solid #E3D6BC;
  border-radius: 7px;
  background: transparent;
  padding: 5px 2px 0;
}

.crescent-note strong {
  color: var(--accent-dark);
}

.crescent-note span {
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
  white-space: normal;
}

.crescent-note small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.hebrew-hour-card-body,
.hebrew-hour-simulator {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.hebrew-hour-instrument-grid {
  display: grid;
  grid-template-columns: minmax(166px, 0.74fr) minmax(400px, 580px) minmax(144px, 0.52fr);
  gap: 9px;
  align-items: start;
}

.hebrew-hour-side-panel {
  display: grid;
  min-width: 0;
  align-self: stretch;
  align-content: start;
  border-block: 0;
  background: rgba(255, 253, 248, 0.36);
  padding: 0 0 8px;
}

.hebrew-hour-panel-kicker {
  margin-bottom: 7px;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hebrew-hour-now-primary {
  color: #374151;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
}

.hebrew-hour-now-state {
  margin-top: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hebrew-hour-now-countdown {
  margin-top: 9px;
  color: #6b7280;
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hebrew-hour-now-until {
  margin-top: 4px;
  color: #374151;
  font-size: 12px;
  font-weight: 900;
}

.hebrew-hour-boundary-countdown {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}

.hebrew-hour-boundary-countdown span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.hebrew-hour-boundary-countdown strong {
  color: #374151;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.hebrew-hour-now-details {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.hebrew-hour-now-details div,
.hebrew-hour-key-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
}

.hebrew-hour-now-details div {
  grid-template-columns: 1fr;
  gap: 2px;
}

.hebrew-hour-now-details span,
.hebrew-hour-key-time-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.hebrew-hour-key-time-row span {
  white-space: nowrap;
}

.hebrew-hour-now-details span {
  font-size: 10.5px;
}

.hebrew-hour-now-details strong,
.hebrew-hour-key-time-row strong {
  color: #374151;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.hebrew-hour-dial-stack {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
}

.hebrew-hour-key-time-list {
  display: grid;
  gap: 5px;
}

.hebrew-hour-key-time-group {
  display: grid;
  gap: 0;
}

.hebrew-hour-key-time-group-label {
  color: #6b7280;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hebrew-hour-key-time-row {
  min-height: 20px;
  border-top: 1px solid rgba(222, 214, 200, 0.48);
  padding: 2.5px 0;
}

.hebrew-hour-context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: center;
  justify-content: center;
  width: min(100%, 580px);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.hebrew-hour-context-strip span:not(:last-child)::after {
  content: "\00B7";
  margin-left: 8px;
  color: rgba(154, 122, 62, 0.72);
}

.hebrew-hour-instrument-context {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.hebrew-hour-instrument-context span,
.hebrew-hour-instrument-context strong,
.hebrew-hour-instrument-context em,
.hebrew-hour-instrument-context i {
  min-width: 0;
}

.hebrew-hour-instrument-context i {
  color: rgba(154, 122, 62, 0.72);
  font-style: normal;
}

.hebrew-hour-instrument-context strong {
  color: #374151;
}

.hebrew-hour-instrument-context em {
  color: #9ca3af;
  font-style: normal;
}

.hebrew-hour-svg-shell {
  justify-self: center;
  width: min(100%, 580px);
}

.hebrew-hour-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.svg-dial-shadow {
  fill: #FBF7EF;
  stroke: rgba(183, 121, 31, 0.24);
  stroke-width: 2;
  filter: drop-shadow(0 18px 22px rgba(23, 35, 58, 0.14));
}

.svg-day-arc {
  fill: url(#hebrewHourDayFill);
}

.svg-night-arc {
  fill: url(#hebrewHourNightFill);
}

.svg-special-segment {
  pointer-events: none;
}

.svg-horizon-glow {
  pointer-events: none;
}

.svg-horizon-dawn-glow {
  fill: url(#hebrewHourDawnHorizon);
  opacity: 0.38;
}

.svg-horizon-erev-glow {
  fill: url(#hebrewHourErevHorizon);
  opacity: 0.38;
}

.svg-horizon-line {
  stroke: rgba(233, 244, 249, 0.62);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.svg-transition-zone {
  opacity: 1;
  pointer-events: none;
  stroke: none;
  stroke-width: 0;
}

.svg-arc-band .svg-transition-zone {
  stroke: none;
  stroke-width: 0;
}

.svg-transition-dawn-zone {
  fill: url(#hebrewHourDawnHorizon);
}

.svg-transition-erev-zone {
  fill: url(#hebrewHourErevHorizon);
}

.svg-special-segment-day {
  fill: rgba(37, 111, 158, 0.13);
}

.svg-special-segment-night {
  fill: rgba(170, 190, 230, 0.16);
}

.svg-current-hour-segment {
  fill: rgba(30, 105, 150, 0.14);
  stroke: rgba(18, 78, 116, 0.42);
  stroke-width: 1.2;
}

.hebrew-hour-svg.is-night .svg-current-hour-segment {
  fill: rgba(220, 231, 255, 0.16);
  stroke: rgba(230, 239, 255, 0.5);
}

.svg-arc-band path {
  stroke: rgba(255, 252, 245, 0.36);
  stroke-width: 1;
}

.svg-hour-line {
  stroke-linecap: round;
  stroke-width: 1.1;
}

.svg-hour-line-day {
  stroke: rgba(44, 91, 113, 0.45);
}

.svg-hour-line-night {
  stroke: rgba(223, 234, 243, 0.62);
}

.svg-hour-line.major {
  stroke-width: 2.35;
}

.svg-hour-line-day.major {
  stroke: rgba(22, 74, 105, 0.78);
}

.svg-hour-line-night.major {
  stroke: rgba(226, 236, 255, 0.86);
}

.svg-hour-line-alot.major {
  stroke: rgba(255, 238, 214, 0.94);
  stroke-width: 2.7;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}

.svg-special-boundary {
  stroke-linecap: round;
  stroke-width: 2.45;
}

.svg-special-boundary-day {
  stroke: rgba(17, 69, 101, 0.82);
}

.svg-special-boundary-midday {
  stroke: rgba(8, 49, 82, 0.96);
  stroke-width: 3.55;
}

.svg-special-boundary-night {
  stroke: rgba(240, 247, 255, 0.88);
}

.svg-accent-tick {
  stroke-linecap: round;
  stroke-width: 2.3;
}

.svg-accent-tick-day {
  stroke: rgba(22, 74, 105, 0.7);
}

.svg-accent-tick-night,
.svg-accent-tick-midnight,
.svg-accent-tick-alot {
  stroke: rgba(218, 230, 255, 0.82);
}

.svg-accent-tick-sunrise {
  stroke: rgba(31, 65, 94, 0.74);
}

.svg-accent-tick-sunset {
  stroke: rgba(255, 232, 174, 0.86);
}

.svg-accent-tick-midday {
  stroke: rgba(8, 49, 82, 0.96);
  stroke-width: 3;
}

.svg-center-guard {
  fill: url(#hebrewHourCenterGlow);
  stroke: rgba(183, 121, 31, 0.28);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 8px rgba(23, 35, 58, 0.12));
}

.svg-center-celestial {
  pointer-events: none;
}

.svg-center-moon-system {
  pointer-events: none;
}

.svg-center-moon-arc {
  fill: none;
  stroke-linecap: round;
}

.svg-center-moon-arc-visible {
  stroke: rgba(66, 91, 124, 0.9);
  stroke-width: 3;
}

.svg-center-moon-arc-hidden {
  stroke: rgba(66, 91, 124, 0.38);
  stroke-dasharray: 2.5 6;
  stroke-width: 1.8;
}

.svg-center-moon-horizon {
  stroke: rgba(77, 89, 107, 0.56);
  stroke-width: 1.15;
  stroke-linecap: round;
}

.svg-center-moon-rise-set-tick {
  stroke: rgba(57, 75, 100, 0.82);
  stroke-width: 1.55;
  stroke-linecap: round;
}

.svg-center-moon-path-label {
  fill: rgba(45, 58, 77, 0.86);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.2px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.svg-center-moon-phase-label {
  fill: rgba(23, 36, 55, 0.84);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11.2px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.svg-center-moon-state-label {
  fill: rgba(29, 42, 61, 0.82);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
}

.svg-center-moon-state-primary {
  font-size: 10.8px;
  font-weight: 900;
}

.svg-center-moon-state-secondary {
  fill: rgba(43, 55, 74, 0.76);
  font-size: 9.7px;
  font-weight: 600;
}

.svg-moon-disc-shadow {
  fill: url(#hebrewHourCenterMoonShadow);
}

.svg-moon-disc-light {
  fill: url(#hebrewHourCenterMoonLight);
}

.svg-moon-disc-craters circle {
  pointer-events: none;
}

.svg-moon-disc-shadow-craters circle {
  fill: #334258;
  opacity: 0.38;
}

.svg-moon-disc-light-craters circle {
  fill: #6F7D8D;
  opacity: 0.2;
}

.svg-moon-disc-sphere {
  fill: url(#hebrewHourCenterMoonSphere);
}

.svg-moon-disc-rim {
  fill: none;
  stroke: #64758B;
  stroke-width: 1.25;
}

.svg-center-moving-moon {
  opacity: 1;
}

.svg-center-moon-system.is-hidden .svg-center-moving-moon {
  opacity: 0.64;
}

.svg-center-moving-moon .svg-moon-disc-rim {
  stroke: #40546E;
  stroke-width: 1.3;
}

.svg-center-moving-moon .svg-moon-disc-light {
  stroke: rgba(246, 250, 255, 0.46);
  stroke-width: 0.45;
}

.svg-center-moving-moon .svg-moon-disc-shadow-craters circle {
  opacity: 0.48;
}

.svg-center-moving-moon .svg-moon-disc-light-craters circle {
  opacity: 0.26;
}

.svg-hour-labels text {
  dominant-baseline: middle;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.1px;
  font-weight: 600;
  paint-order: stroke;
  stroke-linejoin: round;
}

.svg-hour-label-day {
  fill: rgba(31, 71, 91, 0.72);
  stroke: rgba(235, 250, 255, 0.66);
  stroke-width: 1.75px;
}

.svg-hour-label-night {
  fill: rgba(224, 236, 255, 0.86);
  stroke: rgba(5, 12, 25, 0.52);
  stroke-width: 1.45px;
}

.svg-major-labels text {
  dominant-baseline: middle;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(251, 247, 239, 0.62);
  stroke-width: 2.8px;
  stroke-linejoin: round;
}

.svg-label-day {
  fill: #123F5B;
  font-size: 10.8px;
  stroke: rgba(235, 250, 255, 0.8);
}

.svg-major-labels .svg-label-night {
  fill: #FFFFFF;
  font-size: 10.8px;
  stroke: none;
  stroke-width: 0;
  paint-order: normal;
}

.svg-major-labels .svg-label-alot {
  fill: #FFF7E4;
  font-size: 9.6px;
  stroke: none;
  stroke-width: 0;
  paint-order: normal;
}

.svg-label-midday {
  fill: #31536A;
  font-size: 8.9px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.svg-hour-label-day.svg-label-current-hour,
.svg-label-day.svg-label-current-hour {
  fill: #113E5D;
  stroke: rgba(235, 250, 255, 0.88);
}

.svg-hour-label-night.svg-label-current-hour,
.svg-major-labels .svg-label-night.svg-label-current-hour {
  fill: #FFFFFF;
  stroke: none;
  stroke-width: 0;
  paint-order: normal;
}

.svg-hour-label.svg-label-current-hour {
  font-size: 8.9px;
  font-weight: 900;
}

.svg-core-text text {
  font-family: Arial, Helvetica, sans-serif;
  fill: #374151;
}

.svg-core-hour {
  font-size: 23px;
  font-weight: 900;
}

.svg-core-watch {
  fill: #6b7280;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.svg-core-countdown {
  fill: #6b7280;
  font-size: 32px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.svg-core-until,
.svg-core-local-time,
.svg-core-meta,
.svg-core-boundary {
  fill: #756B5A;
  font-size: 10.5px;
  font-weight: 600;
}

.svg-core-local-time {
  fill: #4C6077;
}

.svg-core-boundary {
  fill: #7E6126;
}

.svg-current-marker-axis {
  stroke: #123F5B;
  stroke-width: 1.55;
  stroke-linecap: round;
}

.svg-current-marker-through {
  stroke-width: 1.35;
  stroke-linecap: round;
}

.svg-current-marker-through.is-dark-line {
  stroke: #102036;
}

.svg-current-marker-through.is-light-line {
  stroke: #F7FAFF;
}

.svg-marker-sun-disc {
  fill: #E7A72B;
  stroke: #8A5E12;
  stroke-width: 1.15;
  filter: none;
}

.hebrew-hour-svg.is-night .svg-current-marker-axis {
  stroke: #38bdf8;
  stroke-width: 1.85;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.65));
}

.hebrew-hour-svg.is-night .svg-current-marker-through {
  stroke: #22d3ee;
  stroke-width: 1.75;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.65));
}

.svg-marker-moon-shadow {
  fill: #1C2E48;
  stroke: none;
}

.svg-marker-moon-light {
  fill: #EAF6FF;
  stroke: rgba(224, 246, 255, 0.65);
  stroke-width: 0.45;
}

.svg-marker-moon-rim {
  fill: none;
  stroke: #22d3ee;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.85));
}

.hebrew-hour-support-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 6px;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  opacity: 0.82;
}

.hebrew-hour-support-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid rgba(222, 214, 200, 0.58);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.38);
  padding: 5px 7px;
  text-align: center;
}

.hebrew-hour-support-item span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.hebrew-hour-support-item strong {
  color: #374151;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.calendar-page-inner .gateway-card {
  padding: 16px;
}

.calendar-page-inner .calendar-card {
  gap: 14px;
  border-color: #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.calendar-page-inner .calendar-card-body {
  gap: 8px;
}

.calendar-page-inner .calendar-card > .gateway-card-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  align-items: start;
  border-bottom: 0;
  padding-bottom: 0;
}

.calendar-page-inner .calendar-card > .gateway-card-head span,
.calendar-moedim-filter,
.hebrew-hour-panel-kicker,
.calendar-mini-list > strong,
.time-list > strong,
.night-watch-panel > strong,
.hebrew-hour-key-time-group-label {
  color: #9ca3af;
  font-size: var(--font-section-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.calendar-page-inner .calendar-card > .gateway-card-head strong {
  color: #374151;
  font-size: var(--font-card-title);
  font-weight: 700;
  line-height: 1.2;
}

.calendar-page-inner .calendar-card > .gateway-card-head.calendar-card-head-with-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.calendar-settings-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 50%;
  padding: 0;
  color: #374151;
  font-size: 15px;
  line-height: 1;
}

.calendar-hero-card {
  position: relative;
}

.calendar-settings-popover {
  position: absolute;
  top: -2px;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 8px;
  width: min(250px, 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #FFFDF8;
  box-shadow: 0 14px 30px rgba(23, 35, 58, 0.16);
  padding: 11px;
}

.calendar-settings-title {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-settings-options {
  display: grid;
  gap: 6px;
}

.calendar-settings-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-settings-option input {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.calendar-settings-popover p,
.calendar-location-geocode-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calendar-location-geocode-note {
  grid-column: 1 / -1;
}

.calendar-times-grid,
.calendar-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.calendar-main-dashboard {
  display: grid;
  grid-template-columns: 280px minmax(560px, 1fr) 220px;
  gap: 24px;
  align-items: start;
}

.calendar-left-column {
  display: grid;
  gap: 14px;
  align-items: start;
}

.watch-simulator {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.watch-simulator > .gateway-card-head {
  align-self: stretch;
  text-align: center;
}

.watch-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hebrew-hour-card {
  width: 100%;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.78), transparent 50%),
    linear-gradient(180deg, #ffffff, #f9fafb);
  padding: 16px;
}

.hebrew-hour-card-body,
.hebrew-hour-simulator {
  width: 100%;
  justify-items: center;
  text-align: center;
}

.hebrew-hour-svg-shell {
  width: min(100%, 600px);
  max-width: 600px;
}

.hebrew-hour-context-strip {
  width: min(100%, 600px);
  font-size: var(--font-helper);
  font-weight: 600;
}

.hebrew-hour-now-card,
.hebrew-hour-key-times-card {
  min-width: 0;
}

.hebrew-hour-side-panel {
  align-self: start;
  background: transparent;
  padding: 0;
}

.hebrew-hour-panel-kicker {
  margin-bottom: 8px;
}

.hebrew-hour-now-primary {
  color: #374151;
  font-size: var(--font-primary-value);
  font-weight: 600;
  line-height: 1.05;
}

.hebrew-hour-now-state {
  margin-top: 6px;
  color: #6b7280;
  font-size: var(--font-secondary-value);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.hebrew-hour-now-countdown {
  margin-top: 14px;
  color: #6b7280;
  font-size: var(--font-timer-value);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hebrew-hour-now-until {
  margin-top: 5px;
  color: #374151;
  font-size: var(--font-helper);
  font-weight: 700;
}

.hebrew-hour-boundary-countdown {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}

.hebrew-hour-now-details {
  gap: 8px;
  margin-top: 12px;
}

.hebrew-hour-now-details div {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.calendar-fact,
.time-row,
.watch-row,
.calendar-mini-list div,
.hebrew-hour-key-time-row,
.hebrew-hour-now-details div,
.hebrew-hour-boundary-countdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.calendar-fact,
.time-row,
.watch-row,
.calendar-mini-list div {
  min-height: 0;
  padding: 7px 0;
}

.calendar-hero-panel .calendar-fact {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 0;
}

.calendar-fact span,
.time-row span,
.watch-row span,
.calendar-mini-list span,
.hebrew-hour-now-details span,
.hebrew-hour-key-time-row span,
.hebrew-hour-boundary-countdown span {
  color: #7D7261;
  font-size: var(--font-small-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.calendar-page-inner .calendar-fact span,
.calendar-page-inner .time-row span,
.calendar-page-inner .watch-row span,
.calendar-page-inner .calendar-mini-list span,
.calendar-page-inner .hebrew-hour-now-details span,
.calendar-page-inner .hebrew-hour-key-time-row span,
.calendar-page-inner .hebrew-hour-boundary-countdown span {
  font-size: var(--font-small-label);
  font-weight: 700;
}

.calendar-fact strong,
.time-row strong,
.watch-row strong,
.calendar-mini-list em,
.hebrew-hour-now-details strong,
.hebrew-hour-key-time-row strong,
.hebrew-hour-boundary-countdown strong {
  min-width: 0;
  color: #374151;
  font-size: var(--font-secondary-value);
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}

.calendar-page-inner .calendar-fact strong,
.calendar-page-inner .time-row strong,
.calendar-page-inner .watch-row strong,
.calendar-page-inner .calendar-mini-list em,
.calendar-page-inner .hebrew-hour-now-details strong,
.calendar-page-inner .hebrew-hour-key-time-row strong,
.calendar-page-inner .hebrew-hour-boundary-countdown strong {
  font-size: var(--font-secondary-value);
  font-weight: 600;
}

.hebrew-date-hero {
  color: #374151;
  font-size: var(--font-primary-value);
  font-weight: 600;
  line-height: 1.08;
}

.gregorian-date-muted {
  color: #7D7261;
  font-size: var(--font-helper);
  font-weight: 400;
}

.daily-calendar-list {
  gap: 0;
  margin-top: 12px;
}

.hebrew-hour-key-time-list {
  gap: 8px;
}

.hebrew-hour-key-time-group {
  gap: 3px;
}

.hebrew-hour-key-time-row {
  min-height: 24px;
  border-top: 1px solid rgba(222, 214, 200, 0.46);
  padding: 4px 0;
}

.hebrew-hour-key-time-row span {
  white-space: normal;
}

.calendar-support-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
  gap: 24px;
  align-items: start;
}

.calendar-support-grid .moedim-grid {
  grid-template-columns: 1fr;
}

.moedim-card {
  min-height: 0;
  padding: 10px 12px;
}

.moedim-card span {
  color: #7D7261;
  font-size: var(--font-small-label);
  font-weight: 700;
}

.moedim-card strong {
  color: #374151;
  font-size: var(--font-secondary-value);
  font-weight: 600;
}

.moedim-card small {
  font-size: var(--font-helper);
  font-weight: 400;
}

.calendar-moedim-head {
  align-items: end;
  gap: 14px;
}

.calendar-moedim-filter {
  flex: 0 0 210px;
}

.calendar-moedim-filter select {
  height: 34px;
  min-height: 34px;
  padding: 5px 9px;
  font-size: var(--font-helper);
  font-weight: 600;
}

.calendar-location-bar {
  grid-template-columns: minmax(230px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
}

.calendar-location-label {
  font-size: var(--font-section-label);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.calendar-location-bar strong {
  font-size: var(--font-card-title);
  font-weight: 700;
}

.calendar-location-bar small {
  font-size: var(--font-helper);
  font-weight: 400;
}

.calendar-location-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-location-actions button,
.calendar-location-actions input {
  min-height: 34px;
  height: 34px;
  padding: 6px 10px;
  font-size: var(--font-helper);
  font-weight: 700;
}

.calendar-location-actions label {
  align-items: center;
  color: #7D7261;
  font-size: var(--font-small-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prayer-times-grid,
.time-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.prayer-location-title {
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 600;
}

.night-watch-panel details {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 8px;
}

.night-watch-panel summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .calendar-main-dashboard,
  .calendar-secondary-grid,
  .calendar-support-grid {
    grid-template-columns: 1fr;
  }

  .calendar-left-column {
    display: contents;
  }

  .watch-simulator {
    order: 1;
  }

  .hebrew-hour-now-card {
    order: 2;
  }

  .calendar-hero-panel {
    grid-column: auto;
    order: 3;
  }

  .hebrew-hour-key-times-card {
    order: 4;
  }

  .prayer-times-grid,
  .time-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .night-watch-panel {
    grid-column: 1 / -1;
  }

  .moedim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-support-grid .moedim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#calculator #calcInput {
  min-height: 96px;
  max-height: 180px;
  line-height: 1.45;
}

#phrases .hint {
  margin-bottom: 8px;
}

.phrase-search-console {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(120px, 150px) minmax(150px, 190px) 92px 92px 112px auto auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 8px;
}

.phrase-search-console label {
  gap: 4px;
  font-size: 12px;
}

.phrase-search-console input,
.phrase-search-console select,
.phrase-search-console button {
  height: 36px;
}

.phrase-search-console input,
.phrase-search-console select {
  padding: 6px 8px;
  font-size: 14px;
}

.phrase-search-console button {
  white-space: nowrap;
  padding: 7px 10px;
}

.phrase-control-note {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.phrase-option-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 2px 0 8px;
}

.phrase-option-row .checkbox-label {
  min-height: 30px;
  padding: 0;
}

.phrase-option-row .checkbox-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

  .two-column-gateway,
  .prayer-layout {
    grid-template-columns: 1fr;
  }

  .prayer-list-card,
  .flashcard-shell {
    max-width: none;
  }

  .concordance-search-grid {
    grid-template-columns: minmax(260px, 520px);
  }

#verseValue .compact-form-grid {
  grid-template-columns: minmax(260px, 520px);
}

.keyboard-toggle {
  width: fit-content;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.locked-tool-button {
  color: var(--muted);
  border-color: var(--line-dark);
  background: var(--panel-soft);
}

.locked-feature-panel {
  display: grid;
  gap: 12px;
  max-width: 680px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--panel-soft);
  box-shadow: var(--shadow);
}

.locked-feature-panel h2,
.locked-feature-panel p {
  margin-bottom: 0;
}

.locked-feature-panel ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.locked-feature-badge {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.locked-tool-message {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: rgba(234, 241, 255, 0.42);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.locked-tool-message p {
  margin-bottom: 0;
}

.hebrew-keyboard {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
}

#calcKeyboardPanel,
#concKeyboardPanel {
  max-width: 680px;
  margin-bottom: 8px;
}

#concKeyboardPanel {
  max-width: 520px;
}

.hebrew-keyboard-row {
  direction: rtl;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

.hebrew-keyboard-row.finals {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.hebrew-keyboard button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.hebrew-keyboard .hebrew-key {
  min-width: 30px;
  border-color: var(--line-dark);
  background: var(--panel);
  color: var(--ink);
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 20px;
  line-height: 1;
}

.hebrew-keyboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
}

input[dir="rtl"]::placeholder,
textarea[dir="rtl"]::placeholder {
  direction: ltr;
  text-align: left;
  font-size: 14px;
}

.field-help {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.value-only-preview {
  display: inline-flex;
  gap: 5px;
  color: var(--muted);
}

.value-only-preview strong {
  color: var(--ink);
}

.dictionary-fallback-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: rgba(243, 244, 246, 0.34);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.dictionary-fallback-notice > strong {
  color: var(--accent-dark);
}

.dictionary-fallback-notice .inline-hebrew {
  color: var(--accent-dark);
  font-size: 18px;
}

.dictionary-nearby-values {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 4px;
}

.dictionary-nearby-values button,
.dictionary-nearby-values strong {
  min-height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--accent-dark);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}

.dictionary-nearby-values button {
  cursor: pointer;
}

.dictionary-nearby-values button:hover,
.dictionary-nearby-values button:focus {
  background: rgba(243, 244, 246, 0.64);
  border-color: #9ca3af;
}

.letter-values-panel,
.hebrew-vowels-panel {
  margin-top: 6px;
}

.letter-values-card,
.hebrew-vowels-card {
  display: grid;
  gap: 10px;
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.letter-values-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.letter-values-head strong {
  color: var(--ink);
  font-size: 14px;
}

.letter-values-rows {
  display: grid;
  gap: 5px;
}

.letter-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 5px;
  direction: rtl;
}

.letter-value-tile {
  display: grid;
  direction: rtl;
  justify-items: center;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.letter-value-tile .hebrew {
  color: var(--accent-dark);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}

.letter-value-tile strong {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.letter-values-card .letter-value-tile {
  display: grid;
  justify-items: center;
  min-height: 48px;
  padding: 7px 8px;
  border-radius: 6px;
  white-space: normal;
}

.letter-values-card .letter-value-tile .hebrew {
  color: var(--accent-dark);
  font-size: 27px;
  font-weight: 700;
}

.letter-values-card .letter-value-tile strong {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.final-forms-note {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.final-forms-grid {
  grid-template-columns: repeat(5, minmax(54px, 1fr));
}

.letter-values-lock {
  max-width: 420px;
}

.vowel-chart-wrap {
  overflow-x: auto;
}

.vowel-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vowel-chart th,
.vowel-chart td {
  padding: 8px 10px;
  border-bottom: 1px solid #E3D6BC;
  text-align: left;
  vertical-align: middle;
}

.vowel-chart th {
  position: static;
  background: transparent;
  color: #4B5563;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vowel-chart tbody tr:last-child td {
  border-bottom: 0;
}

.vowel-mark,
.vowel-example {
  direction: rtl;
  unicode-bidi: isolate;
  color: #374151;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.vowel-chart-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calculator-total-only {
  width: fit-content;
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.calculator-total-only span {
  color: var(--accent-dark);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.calculator-letter-breakdown {
  margin-top: 10px;
}

.hebrew-inline {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 18px;
}

.warning {
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.advanced-phrase-controls {
  margin: 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 7px 9px;
}

.advanced-phrase-controls summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
}

.advanced-phrase-controls .form-grid {
  margin: 8px 0 0;
}

.phrase-cross-verse-note {
  margin: 6px 0 0;
}

.phrase-cross-verse-option {
  align-items: flex-start;
  padding-top: 7px;
}

.checkbox-label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
}

.checkbox-label input {
  width: auto;
  height: auto;
}

.hidden {
  display: none;
}

.hint,
.muted,
.load-summary {
  color: var(--muted);
  font-size: 13px;
}

.testing-copy-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* TODO before public launch: decide which text remains copyable and which copy buttons remain enabled. */
.word-list,
.word-list *,
.word-study-card,
.word-study-card *,
.verse-card,
.english-verse,
.word-hero,
.word-hero *,
.study-meaning,
.word-hero-meaning,
.lexical-detail,
.lexical-detail *,
.letter-value-breakdown,
.letter-value-breakdown *,
.study-occurrences,
.study-occurrences *,
.compact-inline-detail,
.hebrew,
.inline-hebrew {
  user-select: text;
}

.no-copy .word-list,
.no-copy .word-list *,
.no-copy .word-study-card,
.no-copy .word-study-card *,
.no-copy .verse-card,
.no-copy .english-verse,
.no-copy .word-hero,
.no-copy .word-hero *,
.no-copy .study-meaning,
.no-copy .word-hero-meaning,
.no-copy .lexical-detail,
.no-copy .lexical-detail *,
.no-copy .letter-value-breakdown,
.no-copy .letter-value-breakdown *,
.no-copy .occurrences-table,
.no-copy .occurrences-table *,
.no-copy .study-occurrences,
.no-copy .study-occurrences *,
.no-copy .compact-inline-detail,
.no-copy .hebrew,
.no-copy .inline-hebrew,
.no-copy .access-funnel,
.no-copy .access-funnel *,
.no-copy .access-result-message,
.no-copy .access-result-message *,
.no-copy .free-preview-unlock-bar,
.no-copy .free-preview-unlock-bar *,
.no-copy .calculator-total-only,
.no-copy .calculator-total-only *,
.no-copy .value-only-preview,
.no-copy .value-only-preview *,
.no-copy .bereshit-header-mark,
.no-copy .bereshit-header-mark * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hebrew-text {
  color: var(--accent-dark);
  direction: rtl;
  unicode-bidi: isolate;
  letter-spacing: 0;
}

.hebrew-mark {
  color: #8B8172;
  opacity: 0.65;
  font-weight: 400;
}

.main-hebrew-word .hebrew-mark {
  opacity: 0.58;
}

.study-verse-preview .hebrew-mark,
.occurrence-detail .hebrew-mark,
.research-card .verse-card.hebrew .hebrew-mark,
.phrase-detail-card .hebrew-mark {
  opacity: 0.62;
}

.highlighted-hebrew-word {
  background: #dbeafe;
  color: #1e3a5f;
  border-radius: 5px;
  padding: 1px 4px;
  box-shadow: 0 0 0 1px #93c5fd;
  font-weight: 700;
}

.highlighted-hebrew-word .hebrew-text {
  color: #374151;
  font-weight: 700;
}

.highlighted-hebrew-word .hebrew-mark {
  color: #374151;
  opacity: 0.92;
}

.load-summary {
  margin-top: 14px;
  display: grid;
  gap: 5px;
}

.load-summary strong {
  color: var(--ink);
}

.source-note {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.source-note strong {
  color: var(--ink);
}

.credits-list {
  display: grid;
  gap: 8px;
}

.credits-list p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.results {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}

.access-funnel {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

body[data-dev-mode="true"] #dictionary .access-funnel,
body[data-access-tier="PAID"] #dictionary .access-funnel {
  display: none;
}

#dictionary {
  padding-top: 16px;
}

#dictionary .results {
  margin-top: 6px;
}

.access-funnel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.access-funnel-head > div:first-child {
  display: grid;
  gap: 1px;
}

.access-funnel-head > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.access-funnel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.access-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.access-tier-grid div {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
}

.access-tier-grid strong,
.access-funnel-head strong {
  font-size: 13px;
}

.access-tier-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.access-tier-grid em {
  margin-left: auto;
  color: var(--accent-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.access-tier-grid .recommended-tier {
  border-color: #d1d5db;
  background: rgba(252, 244, 224, 0.84);
  box-shadow: inset 3px 0 0 var(--gold);
}

.access-result-message,
.upgrade-card {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
}

body[data-dev-mode="true"] #dictionary .access-result-message,
body[data-access-tier="PAID"] #dictionary .access-result-message {
  display: none;
}

.access-result-message strong,
.upgrade-card strong {
  color: var(--ink);
}

.upgrade-card {
  display: grid;
  gap: 8px;
}

.upgrade-card p {
  margin-bottom: 0;
}

.free-preview-unlock-bar {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(19, 35, 58, 0.13);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.free-preview-unlock-bar strong {
  font-weight: 700;
}

.dictionary-workspace {
  display: grid;
  grid-template-columns:
    minmax(190px, var(--dict-word-list-width, 230px))
    8px
    minmax(0, 1fr)
    8px
    minmax(110px, var(--dict-value-index-width, 145px));
  align-items: start;
  gap: 8px;
  max-width: 100%;
  min-height: 560px;
  overflow-x: hidden;
}

.dictionary-workspace > .dict-panel {
  align-self: start;
  margin-top: 0;
  height: min(72vh, 780px);
}

.dictionary-workspace .dict-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  white-space: nowrap;
}

.dictionary-workspace .dict-panel-head strong,
.dictionary-workspace .dict-panel-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dictionary-workspace .dict-panel-head span:empty {
  display: none;
}

.dictionary-workspace > .word-study-panel {
  align-self: start;
  margin-top: 0;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
}

.word-study-panel .dict-panel-body {
  padding-top: 14px;
}

.resize-handle {
  align-self: stretch;
  width: 8px;
  min-height: 240px;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}

.resize-handle::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #d1d5db;
  border-radius: 2px;
  transition: background 140ms ease, width 140ms ease;
}

.resize-handle:hover::after,
.resize-handle:focus-visible::after,
.dictionary-workspace.is-resizing .resize-handle::after {
  background: #6b7280;
}

.is-resizing-panels {
  cursor: col-resize;
  user-select: none;
}

.value-index-panel {
  align-self: start;
  position: sticky;
  top: 12px;
  container-type: inline-size;
  min-width: 110px;
  max-width: 190px;
  height: min(72vh, 780px);
  max-height: min(72vh, 780px);
  box-shadow: none;
  overflow: hidden;
  margin-top: 0;
}

.dictionary-index-rail {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.dictionary-rail-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 240, 0.72);
}

.dictionary-rail-tabs button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.dictionary-rail-tabs button:hover,
.dictionary-rail-tabs button:focus,
.dictionary-rail-tabs button.active {
  border-color: #d1d5db;
  background: rgba(243, 244, 246, 0.48);
  color: var(--accent-dark);
}

.dictionary-rail-body {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.dictionary-rail-tab-panel {
  display: none;
  min-height: 0;
  height: 100%;
}

.dictionary-rail-tab-panel.active {
  display: grid;
}

.dict-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.dict-panel.dictionary-index-rail {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.dict-panel-head {
  min-height: 54px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-head-bg);
}

.dict-panel-head strong {
  font-size: 14px;
}

.dict-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.dict-panel-body {
  min-height: 0;
  overflow: auto;
  padding: 7px;
}

.dict-panel-body > .result-card {
  box-shadow: none;
}

.matching-list-panel-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.matching-list-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  padding: 8px 8px 4px;
  border-bottom: 1px solid #E3D6BC;
  background: #fafbfc;
}

.matching-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 7px;
}

.value-index-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  overflow: hidden;
}

.value-index-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.value-index-virtual-space {
  position: relative;
  min-height: 100%;
}

.value-index-virtual-rows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
}

.value-index-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 30px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  padding: 4px 8px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

.value-index-row:hover,
.value-index-row:focus {
  border-color: rgba(201, 154, 46, 0.36);
  background: #f3f4f6;
}

.value-index-row.active {
  border: 2px solid #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(201, 154, 46, 0.25);
}

.value-index-row.no-results-active {
  border: 1px dashed #CDBB93;
  background: #F8F3E8;
  color: #6B5E45;
  font-weight: 700;
  box-shadow: none;
}

.value-index-row.no-results-active span {
  color: #6B5E45;
  font-size: 11px;
  font-weight: 700;
}

.value-index-row.selected,
.value-index-row.is-selected {
  border: 2px solid #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(201, 154, 46, 0.25);
}

.value-index-row strong {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
}

.value-index-count {
  display: none;
}

@media (max-width: 899px) {
  .dictionary-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .dictionary-workspace > .dict-panel,
  .dictionary-workspace > .word-study-panel,
  .value-index-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .resize-handle {
    display: none;
  }

  .value-index-panel {
    min-height: 280px;
  }

  .value-index-list {
    max-height: 320px;
  }

  .dict-panel {
    min-height: 320px;
  }

  .calendar-location-bar,
  .calendar-dashboard-grid,
  .calendar-main-dashboard,
  .calendar-secondary-grid,
  .calendar-support-grid,
  .moedim-grid,
  .calendar-times-grid,
  .prayer-times-grid,
  .time-columns,
  .calendar-manual-location {
    grid-template-columns: 1fr;
  }

  .calendar-left-column {
    display: contents;
  }

  .watch-simulator {
    order: 1;
  }

  .hebrew-hour-now-card {
    order: 2;
  }

  .calendar-hero-panel {
    order: 3;
  }

  .hebrew-hour-key-times-card {
    order: 4;
  }

  .calendar-hero-panel,
  .night-watch-panel {
    grid-column: auto;
  }

  .calendar-notes-grid {
    grid-template-columns: 1fr;
  }

  .moon-card-body,
  .moon-simulator,
  .hebrew-hour-card-body,
  .hebrew-hour-simulator {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hebrew-hour-instrument-grid {
    grid-template-columns: 1fr;
    width: min(100%, 500px);
  }

  .hebrew-hour-side-panel {
    width: 100%;
    text-align: left;
  }

  .hebrew-hour-svg-shell {
    width: min(100%, 500px);
  }

  .hebrew-hour-support-strip {
    grid-template-columns: 1fr;
    justify-self: center;
    max-width: 220px;
  }

  .hebrew-hour-support-item {
    text-align: center;
  }

  .calendar-location-actions {
    justify-content: flex-start;
  }

  .calendar-moedim-head {
    display: grid;
    gap: 10px;
  }

  .calendar-moedim-filter {
    flex: 1 1 auto;
  }

  .calendar-fact,
  .time-row,
  .watch-row,
  .calendar-mini-list div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .torah-portions-toolbar,
  .torah-current-portion-note {
    grid-template-columns: 1fr;
  }

  .weekly-reading-toolbar-info,
  .weekly-reading-popover-actions {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .weekly-reading-toolbar-info {
    display: grid;
  }
}

.value-index-preview {
  border-top: 1px solid #eef0f2;
  padding-top: 7px;
  overflow: hidden;
}

.value-index-preview > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.value-preview-card {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.value-preview-card strong {
  color: var(--accent-dark);
}

.value-preview-card span,
.value-preview-card small,
.value-index-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.value-preview-words {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

@media (max-width: 1180px) {
  .dictionary-search-grid {
    grid-template-columns: minmax(150px, 180px) minmax(220px, 260px);
  }

  .dictionary-strong-search {
    grid-column: 1 / -1;
    max-width: 180px;
  }
}

.value-preview-words .hebrew {
  direction: rtl;
  color: var(--accent-dark);
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.word-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.word-list-toolbar {
  display: grid;
  gap: 4px;
  margin: 0;
}

.matching-list-button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.word-list-sort {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.word-list-copy-format {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.word-list-copy-btn,
.copy-list-button {
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  background: #fafbfc;
  color: #374151;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.word-list-copy-status {
  display: block;
  min-height: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.dictionary-no-result-state,
.dictionary-no-result-study {
  display: grid;
  gap: 10px;
  padding: 14px;
  color: var(--muted);
}

.dictionary-no-result-state strong,
.dictionary-no-result-study strong {
  color: #374151;
}

.dictionary-nearest-values {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.dictionary-nearest-values button,
.dictionary-nearest-values span {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
}

.dictionary-nearest-values button {
  cursor: pointer;
}

.phrase-copy-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}

.copy-phrases-button {
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafbfc;
  color: #374151;
  font-size: 13px;
  white-space: nowrap;
}

.phrase-copy-status {
  display: block;
  min-height: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Standardised copy/export controls (Plain Hebrew, Hebrew + Reference,
   AI Compact, Full Study Info, CSV) — see copy-modes.js */
.copy-modes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.copy-modes-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.copy-modes-select {
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
}

.copy-modes-btn {
  border-radius: 8px;
  cursor: pointer;
}

.copy-modes-status {
  display: inline-block;
  min-height: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.dictionary-copy-modes {
  margin: 0 0 12px;
}

.word-list-sort label {
  font-weight: 700;
  color: var(--accent-dark);
}

.word-list-sort select,
.word-list-copy-format select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  height: 30px;
  padding: 3px 6px;
  font-size: 12px;
}

.same-letter-notice {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: rgba(243, 244, 246, 0.44);
  color: var(--muted);
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 600;
}

.patterns-toggle {
  display: inline-grid;
  align-content: center;
  min-height: 31px;
  padding: 7px 10px;
  line-height: 1;
}

.same-letter-notice strong,
.same-letter-notice summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 700;
}

.same-letter-legend {
  display: grid;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
}

.same-letter-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-marker {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.legend-gold {
  color: #d97706;
  background: #d97706;
}

.legend-blue {
  color: #2563eb;
  background: #2563eb;
}

.pattern-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.grouped-word-list {
  gap: 6px;
  border-top: 0;
}

.word-list-group {
  border: 1px solid color-mix(in srgb, var(--pattern-color, var(--gold)) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pattern-color, var(--gold)) 8%, var(--panel));
  box-shadow: inset 3px 0 0 var(--pattern-color, var(--gold));
  overflow: hidden;
}

.word-list-group.group-set {
  border-style: dashed;
  background: color-mix(in srgb, var(--pattern-color, var(--gold)) 5%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pattern-color, var(--gold)) 72%, transparent);
}

.word-list-group-head {
  padding: 4px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--pattern-color, var(--gold)) 24%, var(--line));
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 700;
}

.word-list-group-rows,
.word-list-standalone {
  display: grid;
}

.word-list-standalone {
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

.word-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}

.word-list-item:hover {
  background: #f3f4f6;
}

.word-list-item:focus {
  outline: 2px solid rgba(19, 35, 58, 0.34);
  outline-offset: -2px;
}

.word-list-item.selected-row,
.word-list-item.selected-row:hover {
  border-bottom-color: #6b7280;
  background: #eef0f2;
  box-shadow: inset 3px 0 0 #9ca3af;
}

.word-list-seq {
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.word-list-item-locked {
  color: var(--muted);
}

.word-list-main {
  justify-self: stretch;
  color: #374151;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-list-item.selected-row .word-list-main {
  color: #374151;
  font-weight: 700;
}

.pattern-search-list .word-list-group {
  --pattern-color: var(--accent);
}

.pattern-search-list,
.pattern-search-list .word-list-group,
.pattern-search-list .word-list-group-rows {
  overflow-x: hidden;
}

.pattern-search-item {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px;
  overflow-x: hidden;
}

.pattern-search-item .word-list-main {
  min-width: 0;
  text-align: right;
}

.word-list-pattern-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  grid-column: 2;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.word-list-pattern-meta span {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  background: var(--panel-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-list-pattern-meta span:first-child {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--accent-dark);
  font-weight: 700;
}

.matching-word-row.selected,
.matching-word-row.is-selected,
.word-list-item.selected,
.word-list-item.is-selected {
  border-bottom-color: #6b7280;
  background: #eef0f2;
  box-shadow: inset 3px 0 0 #9ca3af;
}

.matching-word-row.selected .matching-word-hebrew,
.matching-word-row.is-selected .matching-word-hebrew,
.word-list-item.selected .word-list-main,
.word-list-item.is-selected .word-list-main {
  color: #374151;
  font-weight: 700;
}

.word-list-translit {
  display: none;
  align-items: center;
  gap: 6px;
  color: #44515D;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-gold { --pattern-color: #d97706; }
.pattern-blue { --pattern-color: #2563eb; }

.locked-study-card {
  align-content: start;
}

.locked-word-hero .word-hero-hebrew {
  font-size: 30px;
}

.locked-placeholder-grid {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.locked-placeholder-grid div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(245, 241, 232, 0.72), rgba(251, 248, 241, 0.42));
  color: var(--muted);
}

.locked-placeholder-grid span {
  font-size: 12px;
  font-weight: 700;
}

.locked-placeholder-grid strong {
  color: #7A838B;
  font-size: 12px;
  font-weight: 600;
}

.locked-upgrade-card {
  border-color: #e5e7eb;
  background: rgba(234, 241, 255, 0.38);
}

.text-link-btn {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  padding: 6px 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.free-sample-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.free-sample-note span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.free-sample-note p {
  margin-bottom: 0;
}

.word-study-card {
  display: grid;
  gap: 9px;
}

.word-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.word-study-card > .word-study-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 18px;
  align-items: start;
  padding: 9px 12px;
  min-height: unset;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  border-bottom-color: #E3D6BC;
  background: rgba(250, 247, 240, 0.62);
}

.word-study-hero-word,
.word-study-hero-value {
  min-width: 0;
}

/* Information hierarchy inside the word section: the meaning sits directly
   beneath the hero Hebrew word and pronunciation in dark, slightly stronger
   sentence-case text; Root/Base stays visible but secondary; Unpointed is
   light tertiary metadata. */
.word-study-meaning-lines {
  margin-top: 6px;
}

.meaning-line.meaning-line--primary strong {
  color: #374151;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.meaning-line.meaning-line--primary span {
  color: #1F2937;
  font-size: 15px;
  font-weight: 600;
}

.meaning-line.meaning-line--secondary strong {
  color: #6B7280;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.meaning-line.meaning-line--secondary span {
  color: #4B5563;
  font-size: 13px;
}

.word-study-hero-value {
  justify-self: stretch;
}

.word-study-hero-label {
  margin-bottom: 6px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.word-hero-hebrew {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: left;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  color: var(--accent-dark);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

.word-study-card > .word-study-hero .word-hero-hebrew {
  color: #374151;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
}

.word-hero-translit {
  color: #65717A;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 3px;
}

.word-study-card > .word-study-hero .word-hero-translit {
  margin-top: 4px;
  margin-bottom: 0;
  color: #64748B;
  font-size: 15px;
  line-height: 1.25;
}

.word-study-card > .word-study-hero .word-hero-unpointed {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  color: #9CA3AF;
  font-size: 12.5px;
  line-height: 1.2;
}

.word-study-card > .word-study-hero .word-hero-unpointed strong {
  flex: 0 0 auto;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.word-study-card > .word-study-hero .word-hero-unpointed span {
  min-width: 0;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
  color: #6B7280;
}

.word-hero-meaning {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.word-hero-meaning strong {
  color: var(--accent-dark);
}

.word-form-meaning-block {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.word-form-meaning-label {
  color: #6B7280;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin-top: 2px;
  text-transform: uppercase;
}

.word-form-meaning-text {
  max-width: 760px;
  color: #374151;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
}

.word-study-meaning-block {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.72);
}

.word-study-root-meaning-label {
  color: #6B7280;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.word-study-root-meaning-text {
  max-width: 760px;
  color: #374151;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
}

.literal-sense-label {
  margin-top: 8px;
}

.word-study-literal-sense-text {
  max-width: 760px;
  color: #25364d;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}

.word-hero-unpointed {
  color: var(--muted);
  font-size: 13px;
}

.word-hero-unpointed span {
  display: inline-block;
  unicode-bidi: isolate;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
}

.word-study-meaning-lines {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.3;
}

.meaning-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.meaning-line strong {
  flex: 0 0 auto;
  color: #4B5563;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meaning-line span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.hero-unpointed-hebrew {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
}

.study-hero-value-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  max-width: 220px;
  color: #374151;
}

.study-hero-total {
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.study-hero-total {
  color: #4B5563;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.study-hero-total span {
  color: #374151;
  margin-left: 4px;
}

.study-hero-letter-grid {
  min-width: 0;
}

.study-hero-value-grid {
  display: grid;
  grid-template-columns: repeat(var(--letter-count), minmax(16px, 1fr));
  gap: 2px 6px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  direction: rtl;
  text-align: center;
}

.study-hero-letter-column {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.word-value-letter {
  color: #374151;
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  direction: rtl;
  line-height: 1;
}

.word-value-number {
  color: #6B7280;
  font-size: 12px;
  line-height: 1.1;
}

@media (max-width: 1020px) {
  .word-study-card > .word-study-hero {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 200px);
    gap: 14px;
  }

  .study-hero-value-block {
    min-width: 170px;
    max-width: 200px;
  }

  .study-hero-value-grid {
    gap: 2px 4px;
  }

  .word-value-letter {
    font-size: 22px;
  }
}

.study-hero-letter-empty {
  color: var(--muted);
  font-size: 12px;
}

.letter-value-equals {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 800px) {
  .word-study-card > .word-study-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 12px;
  }
}

.lexical-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.lexical-detail summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

.lexical-detail-grid {
  margin-top: 4px;
  display: grid;
  gap: 5px;
}

.lexical-detail-grid div {
  display: grid;
  gap: 2px;
}

.lexical-detail-grid .lexical-detail-strong {
  width: fit-content;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: rgba(243, 244, 246, 0.38);
  padding: 5px 8px;
}

.lexical-detail-grid span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.lexical-detail-grid strong {
  color: var(--ink);
  font-weight: 600;
}

.lexical-detail-grid .lexical-detail-strong strong {
  color: var(--accent-dark);
  font-size: 13px;
  letter-spacing: 0;
}

.lexical-detail-grid .lexical-detail-lemma strong {
  justify-self: start;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
}

.study-value-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 4px 8px;
  font-size: 12.5px;
  line-height: 1.2;
}

.study-value-line strong {
  color: var(--accent-dark);
}

.study-verse-preview {
  display: grid;
  gap: 3px;
  margin-top: 1px;
}

.verse-reference-badge {
  justify-self: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-dark);
  padding: 0 1px 1px;
  font-size: 12px;
  font-weight: 700;
}

.rtl-cue {
  margin: 0 0 4px;
  color: #8B8172;
  font-size: 18px;
  line-height: 1;
  text-align: right;
}

.uses-unlock-message {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.occurrence-reference-list,
.related-root-list {
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
}

.occurrence-reference {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}

.occurrence-reference > summary {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  list-style: none;
}

.occurrence-reference > summary::-webkit-details-marker {
  display: none;
}

.occurrence-reference[open] > summary,
.occurrence-reference > summary:hover {
  background: #f3f4f6;
}

.occurrence-seq {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.occurrence-ref-badge {
  justify-self: start;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-dark);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.occurrence-detail {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.occurrence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 12px;
}

.study-occurrences,
.tid-locked-section,
.related-root-section {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 12px;
}

.study-occurrences summary,
.tid-locked-section summary,
.related-root-section summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

.related-root-note {
  margin: 5px 0 7px;
  color: var(--muted);
  font-size: 11px;
}

.related-root-row {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(80px, 0.9fr) minmax(100px, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
}

.related-root-row:hover {
  background: #f3f4f6;
}

.related-root-hebrew {
  justify-self: end;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.related-root-translit,
.related-root-meaning {
  color: #56616B;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-root-count {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tid-locked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.tid-locked-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 3px 8px;
}

.compact-table {
  max-height: none;
  height: 100%;
}

.compact-table th,
.compact-table td {
  padding: 7px 8px;
  font-size: 12px;
}

.compact-table td.hebrew {
  min-width: 88px;
  font-size: 22px;
}

.occurrences-table table {
  table-layout: fixed;
}

.occurrences-table th,
.occurrences-table td {
  padding-left: 6px;
  padding-right: 6px;
}

.occurrences-table th:nth-child(1),
.occurrences-table td:nth-child(1) {
  width: 34%;
}

.occurrences-table th:nth-child(2),
.occurrences-table td:nth-child(2),
.occurrences-table th:nth-child(3),
.occurrences-table td:nth-child(3),
.occurrences-table th:nth-child(4),
.occurrences-table td:nth-child(4) {
  width: 42px;
  text-align: center;
}

.occurrences-table th:nth-child(5),
.occurrences-table td:nth-child(5) {
  width: auto;
  min-width: 82px;
}

.study-occurrences .occurrences-table th:nth-child(1),
.study-occurrences .occurrences-table td:nth-child(1) {
  width: 28%;
}

.study-occurrences .occurrences-table th:nth-child(5),
.study-occurrences .occurrences-table td:nth-child(5) {
  width: 86px;
}

.study-occurrences .occurrences-table th:nth-child(6),
.study-occurrences .occurrences-table td:nth-child(6) {
  width: auto;
}

.compact-table .word-cell,
.compact-table .pointed-sample-cell {
  min-width: 96px;
}

.pointed-sample-cell {
  white-space: normal;
}

.pointed-sample {
  display: inline-block;
  white-space: nowrap;
}

.pointed-sample-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.phrase-results-list {
  display: grid;
  gap: 6px;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 6px;
}

.phrase-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.phrase-pagination-top {
  margin: 6px 0 8px;
}

.phrase-pagination-range {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-right: auto;
}

.phrase-result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.phrase-result-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.phrase-result-card summary::-webkit-details-marker {
  display: none;
}

.phrase-result-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-width: 0;
  gap: 2px 10px;
}

.phrase-result-main .phrase-reference-line { order: -1; }
.phrase-result-main .phrase-result-meta { grid-column: 1 / -1; }

.phrase-reference-line {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.phrase-reference {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.phrase-result-hebrew {
  color: #374151;
  direction: rtl;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.phrase-result-hebrew .hebrew-text {
  color: #374151;
}

.phrase-result-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.phrase-open-action {
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.phrase-open-action::before {
  content: "Open";
}

.phrase-result-card[open] .phrase-open-action::before {
  content: "Close";
}

.phrase-cross-badge {
  display: inline-flex;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.phrase-context-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding: 10px 12px 12px;
  background: var(--panel-soft);
}

.phrase-context-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.phrase-context-heading {
  margin: 7px 0 3px;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.phrase-context-verses {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.phrase-context-verse {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.phrase-context-ref {
  color: var(--accent-dark);
  font-weight: 600;
}

.phrase-context-primary-ref {
  color: #374151;
  font-weight: 600;
}

.phrase-context-hebrew {
  color: #374151;
  font-size: 24px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: normal;
}

.phrase-context-hebrew .hebrew-text {
  color: #374151;
}

.phrase-context-english {
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.english-heading {
  margin-top: 2px;
}

.verse-hebrew-heading {
  margin-top: 0;
}

.phrase-highlight-word {
  margin-inline: 1px;
  border-bottom: 2px solid rgba(147, 197, 253, 0.8);
  background: rgba(219, 234, 254, 0.5);
  box-shadow: inset 0 -6px 0 rgba(219, 234, 254, 0.35);
}

@media (max-width: 720px) {
  .word-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .word-list-copy-control {
    justify-content: space-between;
  }

  .phrase-result-card summary {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .phrase-result-hebrew {
    font-size: 22px;
  }

  .phrase-open-action {
    align-self: end;
  }
}

.concordance-card .result-head {
  margin-bottom: 6px;
}

.concordance-mode-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}

.concordance-mode-control > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.concordance-mode-control button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 4px 9px;
  font-size: 12px;
}

.concordance-mode-control button.active {
  border-color: #d1d5db;
  background: rgba(243, 244, 246, 0.56);
  color: var(--accent-dark);
}

.concordance-search-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.concordance-search-note span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.hebrew-cell {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
  font-size: 21px;
  line-height: 1.35;
  white-space: nowrap;
}

.concordance-table table {
  table-layout: fixed;
}

.concordance-table th,
.concordance-table td {
  padding: 7px 8px;
  vertical-align: middle;
}

.concordance-table th {
  text-transform: none;
  font-size: 12px;
}

.concordance-table th:nth-child(1),
.concordance-table td:nth-child(1) {
  width: 15%;
}

.concordance-table th:nth-child(2),
.concordance-table td:nth-child(2),
.concordance-table th:nth-child(5),
.concordance-table td:nth-child(5),
.concordance-table th:nth-child(6),
.concordance-table td:nth-child(6) {
  width: 13%;
}

.concordance-table th:nth-child(3),
.concordance-table td:nth-child(3),
.concordance-table th:nth-child(4),
.concordance-table td:nth-child(4),
.concordance-table th:nth-child(7),
.concordance-table td:nth-child(7),
.concordance-table th:nth-child(8),
.concordance-table td:nth-child(8) {
  width: 8%;
}

.concordance-table th:nth-child(9),
.concordance-table td:nth-child(9) {
  width: 14%;
}

.strongs-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.strongs-study-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-height: calc(100vh - 220px);
  overflow: hidden;
}

.strongs-study-hero {
  margin-bottom: 2px;
}

.strongs-study-hebrew .hebrew-text,
.strong-form-hebrew .hebrew-text,
.strong-result-row .hebrew .hebrew-text,
.strongs-index-row .hebrew .hebrew-text {
  color: #374151;
}

.strongs-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.strongs-meta-badges span {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--accent-dark);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.strongs-card-body {
  display: grid;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.strongs-navigator {
  display: grid;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.72);
  padding: 8px;
}

.strongs-navigator > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.strongs-nav-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.strongs-nav-controls strong {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.58);
  color: var(--accent-dark);
  padding: 5px 11px;
  font-size: 13px;
}

.strongs-nav-controls button,
.strongs-index-row {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
}

.strongs-nav-controls button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.strongs-nav-controls button:hover,
.strongs-nav-controls button:focus,
.strongs-index-row:hover,
.strongs-index-row:focus {
  border-color: rgba(201, 154, 46, 0.36);
  background: #f3f4f6;
}

.strongs-nav-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 0 4px;
}

.strongs-index-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 240px);
  min-height: 360px;
  border: 1px solid #e4d9bf;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  overflow: hidden;
}

.strongs-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.strongs-index-head strong {
  color: #374151;
  font-size: 15px;
}

.strongs-index-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.strongs-index-jump {
  display: grid;
  gap: 3px;
}

.strongs-index-jump span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.strongs-index-jump input {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
}

.strongs-index-list {
  min-height: 0;
  max-height: calc(100vh - 360px);
  overflow-y: auto;
  padding-right: 2px;
}

.strongs-index-virtual-space {
  position: relative;
  min-height: 100%;
}

.strongs-index-virtual-rows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  gap: 0;
}

.strongs-index-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  height: 38px;
  padding: 6px 10px;
  text-align: left;
  width: 100%;
}

.strongs-index-row.active {
  border: 2px solid #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(201, 154, 46, 0.25);
}

.strongs-index-row.selected,
.strongs-index-row.is-selected {
  border: 2px solid #9ca3af;
  background: #eef0f2;
  color: #374151;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(201, 154, 46, 0.25);
}

.strongs-index-id {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.strongs-index-hebrew {
  color: #374151;
  direction: rtl;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.strongs-index-preview {
  border-top: 1px solid #eef0f2;
  padding-top: 6px;
  max-height: 180px;
  overflow: hidden;
}

.dictionary-strongs-index-panel {
  position: static;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  width: 100%;
  max-height: none;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 7px;
  box-shadow: none;
}

.dictionary-strongs-index-panel .strongs-index-head {
  display: grid;
  gap: 1px;
}

.dictionary-strongs-index-panel .strongs-index-head strong {
  font-size: 13px;
}

.dictionary-strongs-index-panel .strongs-index-list {
  max-height: none;
}

.dictionary-strongs-index-panel .strongs-index-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  height: 34px;
  padding: 4px 8px;
  font-size: 13px;
  white-space: nowrap;
}

.dictionary-strongs-index-panel .strongs-index-id {
  font-size: 12px;
}

.dictionary-strongs-index-panel .strongs-index-hebrew {
  display: none;
  font-size: 17px;
}

.dictionary-strongs-index-panel .strongs-index-preview {
  max-height: 150px;
}

@container (min-width: 145px) {
  .dictionary-strongs-index-panel .strongs-index-row {
    display: grid;
    grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
    gap: 6px;
  }

  .dictionary-strongs-index-panel .strongs-index-hebrew {
    display: inline-block;
  }
}

.strongs-index-preview > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.strongs-preview-card {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.strongs-preview-card strong {
  color: var(--accent-dark);
}

.strongs-preview-card .hebrew {
  color: #374151;
  direction: rtl;
  font-size: 24px;
  line-height: 1.15;
}

.strongs-preview-card em,
.strongs-preview-card small {
  color: var(--muted);
  font-style: normal;
}

.strongs-preview-label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.strongs-preview-card p {
  margin: 2px 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.strong-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.strong-study-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px 9px;
}

.strong-study-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.strong-study-grid div:nth-child(2) {
  grid-column: span 2;
}

.strong-forms-section,
.strong-occurrences-section {
  display: grid;
  gap: 7px;
}

.strong-forms-section h3,
.strong-occurrences-section h3 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 14px;
}

.strong-forms-section p {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.strong-form-list,
.strong-result-list,
.strong-occurrence-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}

.strong-form-header {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 72px 74px;
  gap: 8px;
  padding: 0 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.strong-form-header span:nth-child(3),
.strong-form-header span:nth-child(4) {
  text-align: right;
}

.strong-form-row,
.strong-result-row {
  display: grid;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 6px 9px;
  text-align: left;
  cursor: pointer;
}

.strong-form-row {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 72px 74px;
}

.strong-form-card {
  width: min(320px, 100%);
  grid-template-columns: 1fr;
  justify-items: start;
}

.strong-result-row {
  grid-template-columns: 70px minmax(100px, 0.8fr) minmax(160px, 1.5fr) 78px;
}

.strong-form-row:hover,
.strong-form-row:focus,
.strong-result-row:hover,
.strong-result-row:focus {
  border-color: #d1d5db;
  background: rgba(243, 244, 246, 0.28);
}

.strong-form-hebrew,
.strong-result-row .hebrew {
  color: #374151;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
}

.strong-form-translit {
  color: var(--muted);
  font-size: 13px;
}

.strong-form-row strong,
.strong-result-row strong {
  color: var(--accent-dark);
  font-size: 13px;
  text-align: right;
}

.strong-form-value {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
}

.strong-form-row em,
.strong-result-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.strong-occurrence-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}

.strong-occurrence-row[open] {
  grid-column: 1 / -1;
  border-color: var(--line-dark);
  background: var(--panel-soft);
}

.strong-occurrence-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: #25364d;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.strong-occurrence-detail {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding: 9px 10px 10px;
}

.strong-occurrence-detail .verse-card.hebrew {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.58;
}

.strong-occurrence-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.strong-occurrence-facts div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 7px 8px;
}

.strong-occurrence-facts span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.strong-occurrence-facts strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.concordance-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.concordance-showing-range {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .strongs-main-layout {
    grid-template-columns: 1fr;
  }

  .strongs-index-panel {
    position: static;
    max-height: 360px;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .strongs-study-card {
    max-height: none;
    overflow: visible;
  }

  .strongs-card-body {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .strong-study-grid div:nth-child(2) {
    grid-column: auto;
  }

  .strong-form-header {
    display: none;
  }

  .strong-form-row,
  .strong-result-row,
  .strongs-index-row {
    grid-template-columns: 1fr;
  }

  .strong-form-row strong,
  .strong-result-row strong,
  .strong-form-row em,
  .strong-result-row em {
    text-align: left;
  }
}

tbody tr.selected-row,
tbody tr.selected-row:nth-child(even),
tbody tr.selected-row:hover {
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}

.panel-note {
  margin: 8px 2px 0;
}

.empty-state {
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: var(--panel-soft);
}

.research-card {
  display: grid;
  gap: 7px;
  min-height: 100%;
}

.research-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.verse-display {
  display: grid;
  gap: 7px;
}

.verse-label {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.verse-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--verse-bg);
  padding: 8px 11px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.study-verse-preview .verse-card.hebrew,
.occurrence-detail .verse-card.hebrew {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.6;
}

.research-card .verse-card.hebrew {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.58;
}

.english-verse {
  background: var(--panel);
  color: #344054;
  font-size: 13px;
  line-height: 1.35;
  padding: 6px 9px;
  white-space: pre-line;
}

.selected-word-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.verse-value-card {
  display: grid;
  gap: 12px;
}

.verse-value-status {
  border-color: #e5e7eb;
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 600;
}

.verse-value-lock {
  max-width: 620px;
}

.verse-value-total {
  width: fit-content;
  display: flex;
  align-items: baseline;
  gap: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: rgba(243, 244, 246, 0.42);
  padding: 8px 11px;
}

.verse-value-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.verse-value-total strong {
  color: var(--accent-dark);
  font-size: 24px;
  line-height: 1;
}

.verse-included-count {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.verse-included-count strong {
  color: var(--accent-dark);
}

.verse-value-display {
  display: grid;
  gap: 7px;
}

.verse-reference-secondary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.verse-word-values {
  display: grid;
  gap: 7px;
}

.verse-word-values-head {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
}

.verse-word-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}

.verse-word-value {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
}

.verse-word-value:hover,
.verse-word-value:focus {
  border-color: #d1d5db;
  background: rgba(243, 244, 246, 0.28);
}

.verse-word-index {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.verse-word-hebrew {
  justify-self: end;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}

.verse-word-value strong {
  color: var(--accent-dark);
  font-size: 14px;
}

.passage-verse-values {
  display: grid;
  gap: 7px;
}

.passage-verse-row {
  border: 1px solid rgba(19, 35, 58, 0.1);
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.74);
  overflow: hidden;
}

.passage-verse-row[open] {
  border-color: #e5e7eb;
  background: rgba(243, 244, 246, 0.22);
}

.passage-verse-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  color: var(--ink);
  cursor: pointer;
  list-style-position: inside;
}

.passage-verse-summary span {
  min-width: 0;
  color: #25364d;
  font-size: 13px;
  font-weight: 700;
}

.passage-verse-summary strong {
  color: var(--accent-dark);
  font-size: 14px;
}

.passage-verse-detail {
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(19, 35, 58, 0.08);
  padding: 9px 10px 10px;
}

.passage-verse-detail .verse-card.hebrew {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.58;
}

.compact-research-lines {
  display: grid;
  gap: 4px;
}

.compact-inline-detail {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1.35;
}

.compact-inline-detail strong {
  color: var(--accent-dark);
}

.letter-value-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.letter-value-direction {
  color: var(--muted);
  font-weight: 400;
}

.letter-value-tiles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.letter-value-tile {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 2px 7px;
  direction: rtl;
  white-space: nowrap;
}

.letter-value-total {
  color: var(--accent-dark);
  font-weight: 700;
  white-space: nowrap;
}

.value-pattern-inline {
  min-height: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  color: var(--accent-dark);
  font-weight: 700;
  line-height: 1.18;
  font-size: 12px;
}

.value-pattern-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 1px 6px;
  white-space: nowrap;
}

.value-pattern-pill span {
  color: var(--muted);
}

.value-pattern-separator {
  color: var(--line-dark);
  font-weight: 700;
}

.inline-hebrew {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}

.detail-separator {
  color: var(--muted);
  margin: 0 2px;
}

.selected-word-card div,
.compact-detail div {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 6px 8px;
}

.selected-word-card span,
.compact-detail span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.selected-word-card strong,
.compact-detail strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.selected-word-card strong.hebrew {
  display: block;
  font-size: 20px;
  line-height: 1.4;
}

.advanced-textual-data {
  border-top: 1px solid var(--line);
  padding-top: 4px;
  font-size: 12px;
}

.advanced-textual-data summary,
.letter-picture-section summary,
.milui-section summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

.letter-picture-section,
.milui-section {
  border-top: 1px solid var(--line);
  padding-top: 4px;
  font-size: 12px;
}

.letter-picture-note,
.milui-note {
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.letter-picture-table,
.milui-table {
  max-height: 220px;
}

.letter-picture-letter,
.milui-letter {
  font-size: 22px;
}

.compact-detail {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

.research-card-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0 0;
  background: var(--panel);
}

.research-card-actions .copy-btn {
  min-height: 28px;
  border-color: var(--line-dark);
  background: var(--panel-soft);
  color: var(--ink);
  padding: 4px 8px;
  font-size: 11px;
}

.result-card {
  padding: 12px;
}

.result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.result-head h3 {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink, #374151);
  margin: 0;
}
.result-subtitle {
  font-size: .78rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.detail-table th {
  text-align: left;
  font-weight: 600;
  font-size: .82rem;
  color: var(--muted, #6b7280);
  padding: 3px 12px 3px 0;
  white-space: nowrap;
  vertical-align: top;
}
.detail-table td {
  font-size: .88rem;
  color: var(--ink, #374151);
  padding: 3px 0;
  word-break: break-word;
}

.hebrew {
  direction: rtl;
  text-align: right;
  font-size: 23px;
  line-height: 1.75;
  font-family: "Times New Roman", "Noto Serif Hebrew", serif;
}

.english {
  color: var(--ink);
}

.kv {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-head-bg);
  color: #374151;
  font-size: 12px;
  text-transform: uppercase;
}

tbody tr:nth-child(even) {
  background: var(--panel-soft);
}

tbody tr:hover {
  background: var(--row-hover);
}

td.hebrew {
  min-width: 110px;
  font-size: 24px;
  white-space: nowrap;
}

.pass {
  color: var(--accent-dark);
  font-weight: 700;
}

.fail {
  color: var(--crimson);
  font-weight: 700;
}

.highlight-word {
  background: #dbeafe;
  color: #1e3a5f;
  font-weight: 700;
  border-radius: 5px;
  padding: 1px 4px;
  box-shadow: 0 0 0 1px #93c5fd;
}

.verse-highlight,
.hebrew-word-highlight,
mark.selected-hebrew {
  background: #dbeafe;
  color: #1e3a5f;
  border-radius: 5px;
  padding: 1px 4px;
  box-shadow: 0 0 0 1px #93c5fd;
  font-weight: 700;
}

code {
  background: var(--table-head-bg);
  padding: 2px 4px;
  border-radius: 4px;
}

@media (max-width: 820px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 12px;
  }

  .bereshit-header-mark {
    grid-column: 2;
    font-size: 28px;
    transform: translateY(-1px);
  }

  .brand-left {
    grid-column: 1;
    gap: 9px;
  }

  .brand-logo {
    height: 42px;
  }

  .header-spacer {
    display: none;
  }

  .status-strip {
    justify-content: flex-start;
    width: 100%;
  }

  .app-shell {
    grid-template-columns: 1fr;
    /* The shell's min-height (calc(100vh - 64px)) combined with the grid default
       align-content: stretch used to stretch BOTH auto rows evenly, inflating the
       navigation row to ~110px and vertically stretching every nav button to ~93px.
       Pinning the rows keeps the nav strip compact (content height) and gives the
       remaining space to the work area. */
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    display: flex;
    /* Stop nav buttons stretching to fill any residual row height; they keep their
       natural compact height and stay vertically centred in the strip. */
    align-items: center;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    gap: 4px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar > .tab,
  .sidebar > .nav-group {
    flex: 0 0 auto;
    scroll-snap-align: nearest;
  }

  .sidebar .nav-group {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 0;
  }

  .sidebar .nav-subitems.expanded {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0 0 0 3px;
    border-left: 1px solid var(--sidebar-border);
  }

  .tab {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 7px 9px;
  }

  .sidebar.nav-overflow-left {
    box-shadow: inset 18px 0 14px -15px rgba(31, 41, 55, 0.65);
  }

  .sidebar.nav-overflow-right {
    box-shadow: inset -18px 0 14px -15px rgba(31, 41, 55, 0.65);
  }

  .sidebar.nav-overflow-left.nav-overflow-right {
    box-shadow:
      inset 18px 0 14px -15px rgba(31, 41, 55, 0.65),
      inset -18px 0 14px -15px rgba(31, 41, 55, 0.65);
  }

  .work-area {
    width: min(100% - 20px, 1280px);
    margin-top: 12px;
  }

  .phrase-search-console {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-head {
    display: block;
  }

  .access-funnel-head,
  .access-tier-grid {
    grid-template-columns: 1fr;
  }

  .access-funnel-head {
    display: grid;
  }

  .dictionary-search-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .dictionary-value-search,
  .dictionary-word-search,
  .dictionary-strong-search {
    max-width: 100%;
  }

  .dictionary-search-actions,
  .dictionary-tools-row {
    gap: 6px;
  }

  .study-passage-selector,
  .study-bible-layout {
    grid-template-columns: 1fr;
  }

  .study-bible-section.active {
    max-height: none;
  }

  .study-passage-selector,
  .study-toolbar-shell {
    position: static;
  }

  .study-book-control,
  .study-chapter-control,
  .study-verse-control,
  .study-passage-selector .study-version-compact {
    width: min(100%, 220px);
  }

  .study-bible-layout {
    overflow: visible;
  }

  .study-bible-layout.study-word-panel-open {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .study-bible-layout.study-word-panel-open .study-word-resize-handle {
    display: none;
  }

  .study-passage-panel {
    height: auto;
    overflow: visible;
  }

  .study-word-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .study-bible-verse {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 10px;
  }

  .study-bible-hebrew {
    line-height: 1.45;
    word-spacing: .02em;
  }

  .study-word-detail-grid div {
    grid-template-columns: 1fr;
  }

  .same-value-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .same-value-row em {
    grid-column: 2;
  }

  .dictionary-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .dictionary-workspace > .dict-panel,
  .dictionary-workspace > .word-study-panel,
  .value-index-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .resize-handle {
    display: none;
  }

  .value-index-panel {
    min-height: 280px;
  }

  .value-index-list {
    max-height: 320px;
  }

  .dict-panel {
    min-height: 320px;
  }
}

/* Final Study Bible reading overrides: intentionally last in the cascade. */
.study-bible-section { background: #fffdf9; }
.study-bible-controls-sticky {
  margin-bottom: 16px;
  padding-block: 8px 10px;
  border-bottom-color: #f0ede7;
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 1px 0 rgba(55, 65, 81, 0.025);
}
.study-passage-selector { gap: 6px; }
.study-passage-selector label { gap: 3px; color: #7b818a; font-size: 11px; font-weight: 600; }
.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select,
.study-passage-selector > button {
  min-height: 34px;
  border-color: #dedbd5;
  border-radius: 7px;
  background: #fffefa;
  box-shadow: none;
}
#studyLoadBtn { border-color: #b9b4aa; color: #303943; }
.study-toolbar { gap: 6px; }
.study-toolbar-button { width: 34px; height: 34px; border-color: #e2dfd9; border-radius: 7px; background: #fffefa; color: #737982; }
.study-toolbar-button.study-daily-reading-btn { padding-inline: 10px; font-size: 11.5px; }
.weekly-reading-toolbar-info { min-height: 34px; }
.study-bible-layout { grid-template-columns: minmax(0, 980px); }
.study-bible-layout.study-word-panel-open { grid-template-columns: minmax(0, 980px) 8px minmax(280px, var(--study-word-panel-width)); }
.study-passage-panel { border-color: transparent; border-radius: 6px; background: #fffdf9; box-shadow: none; }
.study-word-panel { border-color: #ebe8e2; box-shadow: none; }
.study-passage-head { flex-direction: column; justify-content: center; gap: 4px; padding: 24px 20px 18px; border-bottom: 0; text-align: center; }
.study-passage-head strong { color: #4a5058; font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.study-passage-head span { color: #9a9ca0; font-size: 11px; line-height: 1.4; }
.study-verse-stack { gap: 2px; padding: 0 8px 28px; }
.torah-portion-banner { margin: 36px auto 22px; padding: 8px 18px 12px; }
.torah-portion-name-he { color: #343b43; font-size: 36px; font-weight: 400; line-height: 1.2; }
.torah-portion-name-en { margin-top: 7px; color: #777f89; font-size: 13px; font-weight: 400; }
.torah-portion-reference { margin-top: 4px; color: #a0a3a7; font-size: 11px; }
.study-chapter-marker { margin: 40px 0 24px; text-align: center; }
.study-chapter-hebrew { color: #3d444c; font-size: 38px; font-weight: 400; line-height: 1.15; }
.study-chapter-number { color: #a3a5a8; font-size: 15px; font-weight: 400; }
.study-bible-verse { padding: 25px 14px; border: 0; background: transparent; box-shadow: none; transition: background-color 180ms ease; }
.study-bible-verse:hover { background: rgba(242, 246, 249, 0.42); }
.study-bible-verse.study-verse-jump-highlight,
.study-bible-verse.study-verse-selected,
.study-bible-verse.study-verse-active-highlight { background: #f1f6fa; box-shadow: none; }
.study-bible-verse.study-verse-fading,
.study-bible-verse.study-verse-fade-highlight { background: #fafcfd; }
.study-bible-verse-number { color: #b0b2b5; font-size: 12px; font-weight: 400; }
.study-bible-verse-number:hover,
.study-bible-hebrew-verse-marker:hover { color: #737982; }
.study-bible-hebrew-row { gap: 10px; }
.study-bible-hebrew { max-width: 940px; margin-inline: auto; color: var(--study-hebrew-color, #343b43); font-size: 36px; font-weight: 400; line-height: 1.72; word-spacing: .025em; }
.study-passage-results.font-small .study-bible-hebrew { font-size: 30px; line-height: 1.68; }
.study-passage-results.font-normal .study-bible-hebrew { font-size: 36px; line-height: 1.72; }
.study-passage-results.font-large .study-bible-hebrew { font-size: 40px; line-height: 1.72; }
.study-passage-results.font-extra-large .study-bible-hebrew { font-size: 46px; line-height: 1.68; }
.study-bible-english { max-width: 820px; margin: 13px auto 2px; color: var(--study-english-color, #69717b); font-size: 19px; line-height: 1.65; }
.study-passage-results.font-small .study-bible-english { font-size: 17px; line-height: 1.62; }
.study-passage-results.font-normal .study-bible-english { font-size: 19px; line-height: 1.65; }
.study-passage-results.font-large .study-bible-english { font-size: 21px; line-height: 1.66; }
.study-passage-results.font-extra-large .study-bible-english { font-size: 23px; line-height: 1.66; }
.study-hebrew-word { border-radius: 2px; padding-inline: 1px; }
.study-bible-hebrew .study-hebrew-word.gn-hl { border-radius: 2px; }
.study-bible-hebrew .study-hebrew-word.gn-hl-gold { background-color: rgba(245, 200, 76, .34); }
.study-bible-hebrew .study-hebrew-word.gn-hl-orange { background-color: rgba(240, 160, 75, .32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-red { background-color: rgba(242, 164, 155, .32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-purple { background-color: rgba(199, 174, 232, .32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-blue { background-color: rgba(126, 196, 240, .32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-green { background-color: rgba(143, 217, 182, .32); }
.study-bible-hebrew .study-hebrew-word.gn-hl-grey { background-color: rgba(199, 202, 209, .34); }
.study-bible-hebrew .study-hebrew-word.gn-hl-brown { background-color: rgba(216, 185, 147, .34); }
.study-bible-hebrew .study-hebrew-word.gn-ul { border-bottom-width: 1.5px !important; padding-bottom: 3px; }

@media (max-width: 900px) {
  .study-bible-layout,
  .study-bible-layout.study-word-panel-open { grid-template-columns: minmax(0, 1fr); }
  .study-passage-head { padding-block: 20px 14px; }
  .study-bible-verse { padding: 21px 10px; }
  .study-passage-results.font-normal .study-bible-hebrew { font-size: 32px; line-height: 1.68; }
  .study-passage-results.font-normal .study-bible-english { font-size: 18px; line-height: 1.64; }
}

@media (max-width: 560px) {
  .study-bible-controls-sticky { padding-inline: 12px; }
  .study-passage-selector { gap: 7px 5px; }
  .study-toolbar { flex-wrap: wrap; }
  .study-verse-stack { padding-inline: 0; }
  .study-bible-verse { grid-template-columns: 28px minmax(0, 1fr); gap: 5px; padding: 18px 4px; }
  .study-bible-hebrew-row { grid-template-columns: minmax(0, 1fr) 25px; gap: 5px; }
  .study-passage-results.font-normal .study-bible-hebrew { font-size: 28px; line-height: 1.64; }
  .study-passage-results.font-normal .study-bible-english { font-size: 17px; line-height: 1.62; }
  .torah-portion-name-he,
  .study-chapter-hebrew { font-size: 31px; }
}

/* Study Bible navigation and reading-colour polish. Presentation only. */
.study-bible-controls-sticky {
  padding-block: 7px 9px;
  border-bottom-color: #eeeae3;
  background: rgba(255, 253, 249, 0.975);
  box-shadow: 0 1px 0 rgba(52, 59, 67, 0.018);
}

.study-passage-selector {
  gap: 5px;
}

.study-passage-selector label,
.study-version-compact {
  color: #85817a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.025em;
}

.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select,
.study-passage-selector > button,
.study-toolbar-button {
  min-height: 32px;
  border-color: #e5e0d8;
  border-radius: 6px;
  background: #fffefa;
  color: #625f5a;
  box-shadow: none;
  font-weight: 400;
}

.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select {
  padding-block: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

#studyLoadBtn {
  min-height: 32px;
  padding-inline: 11px;
  border-color: #c9c1b5;
  background: #f8f5ef;
  color: #4f4b45;
  font-size: 11.5px;
  font-weight: 500;
}

#studyClearBtn {
  min-height: 32px;
  padding-inline: 8px;
  border-color: transparent;
  background: transparent;
  color: #89857e;
  font-size: 11px;
  font-weight: 400;
}

#studyClearBtn:hover,
#studyClearBtn:focus-visible {
  border-color: #e7e2da;
  background: #faf8f4;
  color: #595650;
}

.study-toolbar {
  gap: 5px;
}

.study-toolbar-button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #7b7770;
  font-size: 12px;
}

.study-toolbar-button:hover,
.study-toolbar-button:focus-visible,
.study-toolbar-button[aria-expanded="true"] {
  border-color: #d8d1c7;
  background: #f7f4ee;
  color: #4f4b45;
}

.study-toolbar-button.study-daily-reading-btn {
  min-height: 32px;
  padding-inline: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 400;
}

.weekly-reading-toolbar-info {
  min-height: 32px;
}

.weekly-reading-toolbar-chip {
  min-height: 26px;
  padding: 2px 4px;
  color: #79756e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.75px;
  font-weight: 400;
}

.weekly-reading-toolbar-chip strong {
  color: #625f59;
  font-size: 10.75px;
  font-weight: 400;
}

.weekly-toolbar-label {
  color: #99938a;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.weekly-toolbar-separator {
  color: #c2b9aa;
  font-weight: 400;
}

.weekly-reading-reference-link {
  color: #686f76;
  font-weight: 400;
  text-decoration-color: rgba(104, 111, 118, 0.24);
}

.weekly-reading-reference-link:hover,
.weekly-reading-reference-link:focus-visible {
  color: #3f4850;
  background: #f5f3ef;
  outline-color: rgba(104, 111, 118, 0.22);
}

/* Muted mineral/paper tones; class names and stored colour values remain unchanged. */
.study-bible-hebrew .study-hebrew-word.gn-hl-gold { background-color: rgba(211, 196, 137, 0.30); }
.study-bible-hebrew .study-hebrew-word.gn-hl-orange { background-color: rgba(210, 170, 132, 0.28); }
.study-bible-hebrew .study-hebrew-word.gn-hl-red { background-color: rgba(205, 151, 149, 0.27); }
.study-bible-hebrew .study-hebrew-word.gn-hl-purple { background-color: rgba(177, 158, 198, 0.27); }
.study-bible-hebrew .study-hebrew-word.gn-hl-blue { background-color: rgba(137, 174, 194, 0.27); }
.study-bible-hebrew .study-hebrew-word.gn-hl-green { background-color: rgba(145, 181, 159, 0.27); }
.study-bible-hebrew .study-hebrew-word.gn-hl-grey { background-color: rgba(174, 176, 178, 0.28); }
.study-bible-hebrew .study-hebrew-word.gn-hl-brown { background-color: rgba(181, 158, 134, 0.28); }

.study-bible-hebrew .study-hebrew-word.gn-hl {
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Editorial Torah portion boundaries embedded in the Study Bible text flow. */
.bible-portion-marker {
  clear: both;
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 25px 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: #1f2937;
  text-align: center;
}

.bible-portion-marker-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-size: 25px;
  font-weight: 550;
  line-height: 1.2;
}

.bible-portion-marker-name-he {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 26px;
  font-weight: 600;
}

.bible-portion-marker-range {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.3;
}

.bible-portion-marker + .study-bible-verse {
  padding-top: 8px;
}

.study-chapter-marker + .bible-portion-marker {
  margin-top: 14px;
}

@media (max-width: 560px) {
  .bible-portion-marker {
    margin-block: 22px 14px;
  }

  .bible-portion-marker-name {
    gap: 8px;
    font-size: 22px;
  }

  .bible-portion-marker-name-he {
    font-size: 23px;
  }
}

/* Chapter and Torah-boundary headings share the uninterrupted Scripture canvas. */
.study-chapter-marker {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.study-chapter-hebrew {
  margin: 0;
  color: #4b5563;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}

.study-chapter-number {
  color: #6b7280;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  vertical-align: baseline;
}

.study-verse-stack,
.study-verse-stack > .study-bible-verse {
  background: transparent;
}

.bible-portion-marker {
  width: auto;
  min-height: 0;
  margin: 22px 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.bible-portion-marker + .study-bible-verse.study-verse-jump-highlight {
  background: transparent;
  box-shadow: none;
}

/* Only the Study Bible Book control receives the larger selector typography. */
.study-passage-selector .study-book-control {
  font-size: 10.5px;
  font-weight: 400;
}

.study-passage-selector #studyBook {
  padding-inline: 9px;
  color: #4b5563;
  font-size: 14.5px;
  font-weight: 500;
  line-height: normal;
}

.study-passage-selector #studyBook option {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

/* Fixed Word Study / Sources drawer header; only the active tab body scrolls. */
.study-word-panel {
  display: flex;
  flex-direction: column;
  top: 64px;
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.study-word-panel > .study-word-summary-head {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.study-word-panel > .study-word-summary-head .study-panel-tabs {
  align-items: stretch;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.study-word-panel > .study-word-summary-head .study-panel-tab {
  min-height: 0;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

.study-word-panel > .study-word-summary-head .study-panel-tab:focus-visible,
.study-word-panel > .study-word-summary-head .study-word-close:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: -2px;
}

.study-word-panel > .study-word-summary-head .study-word-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border-color: #e5e7eb;
  border-radius: 7px;
  background: #ffffff;
}

.study-word-panel > .study-word-tab-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.study-word-panel > .study-word-tab-body[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .study-word-panel {
    height: min(78vh, 720px);
    max-height: 78vh;
  }
}

/* Compact Time & Calendar framing. Watch/moon graphics and geometry are intentionally untouched. */
#calendarTimes {
  padding-top: 16px;
  font-family: var(--ui-font);
}

#calendarTimes,
#calendarTimes * {
  font-family: var(--ui-font);
}

#calendarTimes > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

#calendarTimes > .tool-helper {
  display: none;
}

.calendar-page-inner {
  display: grid;
  gap: 14px;
}

.calendar-page-inner .gateway-card,
.calendar-page-inner .calendar-card,
.calendar-page-inner .jerusalem-compass-card {
  border-color: #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.calendar-page-inner .calendar-card {
  gap: 9px;
  padding: 14px;
}

.calendar-page-inner .calendar-card-body {
  gap: 5px;
}

.calendar-location-bar.calendar-toolbar {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  box-sizing: border-box;
}

.calendar-toolbar-location {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.calendar-location-bar strong {
  overflow: hidden;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-location-bar small:empty {
  display: none;
}

.calendar-location-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.calendar-location-actions button,
.calendar-location-actions input {
  min-height: 32px;
  height: 32px;
  padding: 5px 8px;
  border-color: #e5e7eb;
  font-size: 11px;
  font-weight: 600;
}

.calendar-location-actions label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.calendar-times-grid,
.calendar-dashboard-grid {
  gap: 14px;
}

.calendar-main-dashboard {
  grid-template-columns: 270px minmax(560px, 1fr) 220px;
  gap: 14px;
}

.calendar-left-column {
  gap: 10px;
}

.calendar-page-inner .calendar-card > .gateway-card-head {
  gap: 2px;
}

.calendar-page-inner .calendar-card > .gateway-card-head.calendar-card-head-with-action > div {
  display: grid;
  gap: 2px;
}

.calendar-page-inner .calendar-card > .gateway-card-head span,
.hebrew-hour-panel-kicker,
.hebrew-hour-key-time-group-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .055em;
}

.calendar-page-inner .calendar-card > .gateway-card-head strong {
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
}

.hebrew-hour-panel-kicker {
  margin-bottom: 3px;
}

.hebrew-hour-now-primary-line {
  display: grid;
  gap: 3px;
}

.hebrew-hour-now-primary {
  font-size: 22px;
  font-weight: 650;
}

.hebrew-hour-now-countdown {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

.hebrew-hour-now-status-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  margin-top: 5px;
}

.hebrew-hour-now-state,
.hebrew-hour-now-until {
  margin-top: 0;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 500;
}

.hebrew-hour-boundary-countdown {
  margin-top: 7px;
}

.hebrew-hour-now-details {
  gap: 4px;
  margin-top: 7px;
}

.hebrew-hour-now-details div {
  gap: 7px;
}

.calendar-page-inner .hebrew-hour-now-details span,
.calendar-page-inner .hebrew-hour-boundary-countdown span {
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.calendar-page-inner .hebrew-hour-now-details strong,
.calendar-page-inner .hebrew-hour-boundary-countdown strong {
  color: #374151;
  font-size: 10.5px;
  font-weight: 600;
}

.hebrew-date-hero {
  font-size: 22px;
  font-weight: 600;
}

.gregorian-date-muted {
  color: #64748b;
  font-size: 10.5px;
}

.daily-calendar-list {
  margin-top: 6px;
}

.calendar-hero-panel .calendar-fact {
  gap: 7px;
  padding: 4px 0;
  border-top-color: #eef2f7;
}

.calendar-page-inner .calendar-fact span {
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.calendar-page-inner .calendar-fact strong {
  color: #374151;
  font-size: 10.5px;
  font-weight: 500;
}

.hebrew-hour-key-time-list {
  gap: 6px;
}

.hebrew-hour-key-time-group {
  gap: 2px;
}

.hebrew-hour-key-time-row {
  min-height: 20px;
  padding: 3px 0;
  border-top-color: #eef2f7;
}

.calendar-page-inner .hebrew-hour-key-time-row span {
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.calendar-page-inner .hebrew-hour-key-time-row strong {
  color: #374151;
  font-size: 10.5px;
  font-weight: 600;
}

/* Subtle emphasis for the Key Times rows that mark a Hebrew day/night hour
   boundary (3rd/6th/9th Day Hour, Midday, Midnight). Restrained: a very light
   background tint plus a touch more weight, no colour, icons, or shadows. */
.calendar-page-inner .hebrew-hour-key-time-row--major {
  border-radius: 5px;
  background: var(--accent-soft);
  padding: 4px 6px;
  margin-inline: -6px;
}

.calendar-page-inner .hebrew-hour-key-time-row--major span {
  color: var(--ink);
  font-weight: 700;
}

.calendar-page-inner .hebrew-hour-key-time-row--major strong {
  color: var(--accent-dark);
  font-weight: 800;
}

.jerusalem-compass-card {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
}

.jerusalem-compass-card > strong {
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .calendar-location-bar.calendar-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-location-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  #calendarTimes {
    padding-top: 12px;
  }

  .calendar-location-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-location-actions label {
    grid-column: 1 / -1;
  }
}

/* Unified study-list hierarchy: Torah Portions and daily Tehillim/Mishlei only. */
.torah-book-column-hebrew {
  font-size: 19px;
  font-weight: 650;
}

.torah-book-column-title {
  color: #64748b;
  font-size: 12px;
}

.torah-portion-item.current-week {
  background: #f1f5f9;
  box-shadow: inset 3px 0 0 #64748b;
}

.torah-portion-item.current-week .torah-portion-item-name {
  font-weight: 700;
}

.torah-portion-item.current-week .torah-book-portion-badge,
.tehillim-daily-item.is-today .torah-book-portion-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  vertical-align: 1px;
}

#tehillimDaily > h2 {
  margin-bottom: 2px;
  color: #1f2937;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.2;
}

#tehillimDaily > .tool-helper {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}

.tehillim-daily-page {
  gap: 6px;
}

.tehillim-daily-page-head {
  gap: 7px;
  padding: 3px 2px 6px;
  border-bottom: 1px solid #d1d5db;
}

.tehillim-daily-page-head strong {
  color: #1f2937;
  font-size: 13px;
  font-weight: 650;
}

.tehillim-daily-page-head small {
  color: #64748b;
  font-size: 11px;
}

.tehillim-daily-grid {
  gap: 0 9px;
  border-top: 0;
}

.tehillim-daily-item {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 2px;
  padding: 5px 4px;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.25;
}

.tehillim-daily-item:hover {
  background: #f8fafc;
}

.tehillim-daily-item.is-today {
  background: #f1f5f9;
  box-shadow: inset 3px 0 0 #64748b;
}

.tehillim-daily-item-day {
  grid-column: 1;
  grid-row: 1;
  color: #1f2937;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
}

.tehillim-daily-item > .torah-ref-link {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tehillim-daily-item > [data-open-tehillim-ref] {
  grid-column: 2;
  grid-row: 1;
}

.tehillim-daily-item > [data-open-mishlei-ref] {
  grid-column: 1 / -1;
  grid-row: 2;
  color: #5f6875;
}

.tehillim-daily-item > .torah-ref-link:hover,
.tehillim-daily-item > .torah-ref-link:focus-visible {
  color: #1f2937;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Compact Study Bible navigation band. Does not alter sticky/fold behaviour. */
.study-bible-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.study-bible-controls-sticky {
  padding-block: 6px 8px;
}

.study-passage-selector {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
}

.study-passage-selector label,
.study-version-compact {
  gap: 2px;
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.1;
}

.study-book-control {
  width: 150px;
  min-width: 130px;
}

.study-chapter-control,
.study-verse-control {
  width: 50px;
  min-width: 46px;
}

#studyChapter,
#studyVerse {
  min-width: 46px;
  max-width: 50px;
}

.study-passage-selector .study-version-compact {
  width: 92px;
  min-width: 84px;
}

.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select {
  min-height: 34px;
  height: 34px;
  padding: 4px 7px;
  border-width: 1px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 400;
}

.study-nav-icon-button,
#studyLoadBtn,
#studyClearBtn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

#studyLoadBtn {
  border-color: #d1d5db;
  background: #f9fafb;
}

#studyClearBtn {
  border-color: transparent;
  background: transparent;
}

.study-nav-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.study-nav-icon-button:focus-visible,
.study-toolbar-button:focus-visible,
.weekly-reading-reference-link:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: 2px;
}

.study-toolbar {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
}

.study-toolbar-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 6px;
  font-weight: 400;
}

.study-toolbar-button.study-daily-reading-btn {
  width: auto;
  min-width: 42px;
  height: 34px;
  min-height: 34px;
  padding-inline: 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
}

.study-weekly-reading-panel {
  flex: 1 1 300px;
  min-width: 180px;
  overflow: hidden;
}

.weekly-reading-toolbar-info,
.weekly-reading-toolbar-chip {
  width: 100%;
  min-width: 0;
}

.weekly-reading-toolbar-chip {
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 34px;
  max-height: 34px;
  padding: 3px 2px;
  overflow: hidden;
  white-space: nowrap;
}

.weekly-reading-toolbar-chip strong,
.weekly-reading-reference-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-reading-toolbar-chip strong {
  flex: 0 1 auto;
  color: #4b5563;
  font-size: 10.5px;
  font-weight: 500;
}

.weekly-toolbar-label {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 400;
}

.weekly-toolbar-separator {
  flex: 0 0 auto;
}

.weekly-reading-reference-link {
  flex: 1 1 auto;
  padding-inline: 2px;
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .study-passage-selector {
    flex-wrap: wrap;
  }

  .study-weekly-reading-panel {
    flex: 1 0 100%;
    order: 10;
  }
}

@media (max-width: 560px) {
  .study-bible-page-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: normal;
  }

  .study-book-control {
    flex: 1 1 132px;
  }

  .study-passage-selector .study-version-compact {
    flex: 1 1 84px;
  }
}

@media (max-width: 560px) {
  .study-passage-selector { gap: 5px 4px; }
  .study-toolbar { gap: 4px; }
  .study-toolbar-button.study-daily-reading-btn { padding-inline: 7px; }
  .weekly-reading-toolbar-chip { padding-inline: 2px; }
}

/* Final neutral workspace refinement. Visual only; Hebrew display fonts stay intact. */
:root {
  --ui-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-dark: #d1d5db;
  --accent: #374151;
  --accent-dark: #111827;
  --accent-soft: #f1f5f9;
  --sidebar-bg: #f9fafb;
  --sidebar-ink: #374151;
  --sidebar-border: #e5e7eb;
  --header-bg: #ffffff;
  --tab-active-bg: #f3f4f6;
  --panel-head-bg: #f8fafc;
  --row-hover: #f8fafc;
  --study-english-color: #4b5563;
}

html,
body {
  background: #f7f7f8;
  color: #111827;
  font-family: var(--ui-font);
}

button,
input,
select,
textarea,
.app-header,
.sidebar,
.app-sidebar,
.main-nav,
.study-passage-selector label,
.study-version-compact,
.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select,
.study-toolbar-button,
.weekly-reading-toolbar-chip,
.study-bible-english,
.study-word-panel,
.study-sources-panel {
  font-family: var(--ui-font);
}

/* notes-system.css remains untouched; this only aligns its isolated mount with the app UI. */
#notesDrawerMount {
  font-family: var(--ui-font) !important;
}

.app-header {
  border-bottom-color: #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .025);
}

.panel,
.card,
.study-word-panel,
.study-sources-panel {
  border-color: #e5e7eb;
  background-color: #ffffff;
}

.study-bible-section,
.study-passage-panel {
  background: #f8fafc;
}

.study-bible-controls-sticky {
  border-bottom-color: #e5e7eb;
  background: rgba(247, 247, 248, .975);
  box-shadow: 0 1px 0 rgba(17, 24, 39, .025);
}

.study-passage-selector label,
.study-version-compact {
  color: #9ca3af;
  font-weight: 400;
}

.study-passage-selector select,
.study-passage-selector input,
.study-version-compact select,
.study-passage-selector > button,
.study-toolbar-button {
  border-color: #e5e7eb;
  background: #ffffff;
  color: #4b5563;
  font-weight: 400;
}

#studyLoadBtn {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-weight: 500;
}

#studyClearBtn {
  border-color: transparent;
  background: transparent;
  color: #9ca3af;
  font-weight: 400;
}

#studyClearBtn:hover,
#studyClearBtn:focus-visible,
.study-toolbar-button:hover,
.study-toolbar-button:focus-visible,
.study-toolbar-button[aria-expanded="true"] {
  border-color: #d1d5db;
  background: #f3f4f6;
  color: #374151;
}

.study-toolbar-button.study-daily-reading-btn,
.weekly-reading-toolbar-chip {
  font-family: var(--ui-font);
  font-weight: 400;
}

.weekly-reading-toolbar-chip,
.weekly-reading-toolbar-chip strong {
  color: #6b7280;
  font-weight: 400;
}

.weekly-toolbar-label {
  color: #9ca3af;
  font-weight: 400;
}

.weekly-toolbar-separator {
  color: #d1d5db;
}

.weekly-reading-reference-link {
  color: #4b5563;
  text-decoration-color: rgba(75, 85, 99, .24);
}

.weekly-reading-reference-link:hover,
.weekly-reading-reference-link:focus-visible {
  color: #111827;
  background: #f3f4f6;
  outline-color: rgba(107, 114, 128, .22);
}

.study-passage-head strong {
  color: #374151;
}

.study-passage-head span,
.study-bible-verse-number,
.torah-portion-reference {
  color: #9ca3af;
}

.study-bible-verse {
  background: rgba(255, 255, 255, .62);
}

.study-bible-verse:hover {
  background: #ffffff;
}

.study-bible-verse.study-verse-jump-highlight,
.study-bible-verse.study-verse-selected,
.study-bible-verse.study-verse-active-highlight {
  background: #f1f5f9;
}

.study-bible-verse.study-verse-fading,
.study-bible-verse.study-verse-fade-highlight {
  background: #f8fafc;
}

.study-bible-english {
  color: var(--study-english-color, #4b5563);
}

/* Final effective Study Bible toolbar balance and chapter-heading rhythm. */
.study-bible-controls-sticky { margin-bottom: 0; padding-block: 6px 8px; }
.study-passage-selector { display: grid; grid-template-columns: auto auto minmax(140px, 1fr); align-items: end; gap: 10px; width: 100%; }
.study-nav-passage-group { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.study-nav-passage-group .study-book-control { width: 132px; min-width: 118px; }
.study-nav-passage-group .study-chapter-control { width: 56px; min-width: 54px; }
.study-nav-passage-group .study-verse-control { width: 46px; min-width: 44px; }
.study-nav-passage-group #studyChapter { min-width: 54px; max-width: 56px; }
.study-nav-passage-group #studyVerse { min-width: 44px; max-width: 46px; }
.study-nav-passage-group .study-version-compact { width: 84px; min-width: 78px; }
#studyBible[data-testament="new"] #studyEnglishVersionToolbar { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
#studyLoadBtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 44px; max-width: none; height: 34px; min-height: 34px; padding-inline: 9px; border: 1px solid #d1d5db; border-radius: 6px; background: #f9fafb; color: #374151; font-size: 11px; font-weight: 500; }
#studyClearBtn { flex-basis: 34px; }
.study-toolbar { justify-content: center; gap: 3px; }
.study-toolbar-button.study-daily-reading-btn { width: auto; min-width: 0; padding-inline: 6px; border-color: transparent; background: transparent; color: #6b7280; font-size: 10px; font-weight: 400; }
.study-toolbar-button.study-daily-reading-btn:hover,
.study-toolbar-button.study-daily-reading-btn:focus-visible { border-color: #e5e7eb; background: #f3f4f6; color: #374151; }
.study-weekly-reading-panel { justify-self: stretch; min-width: 140px; align-self: end; }
.weekly-reading-toolbar-chip { justify-content: flex-end; gap: 3px; color: #6b7280; }
.weekly-reading-toolbar-chip strong { flex: 0 1 auto; color: #4b5563; font-weight: 500; }
.weekly-reading-reference-link { flex: 0 1 auto; color: #6b7280; font-weight: 400; text-decoration: none; }
.weekly-reading-reference-link:hover,
.weekly-reading-reference-link:focus-visible { color: #111827; text-decoration: underline; text-decoration-color: rgba(75, 85, 99, .3); text-underline-offset: 2px; }
.study-passage-head { gap: 0; padding: 22px 20px 8px; border: 0; text-align: center; }
.study-passage-book-hebrew { color: #1f2937; font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif; font-size: 34px; font-weight: 400; line-height: 1.12; }
.study-passage-head .study-passage-book-chapter { margin-top: 5px; color: #374151; font-size: 17px; font-weight: 500; line-height: 1.25; }
.study-passage-head .study-passage-context { margin-top: 4px; color: #9ca3af; font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.study-passage-context:empty,
.study-passage-book-hebrew:empty { display: none; }
.study-verse-stack { padding-top: 0; }
.study-verse-stack > .study-bible-verse:first-child { padding-top: 16px; }

/* Scripture Presentation Mode: a display-only reading state that leaves the reader's
   canonical passage and scrolling architecture in place. */
.study-toolbar-button.study-presentation-mode-btn {
  width: auto;
  min-width: 0;
  padding-inline: 9px;
  color: #4b5563;
  font-size: 10px;
  white-space: nowrap;
}

.study-presentation-overlay {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-presentation-overlay[hidden] { display: none !important; }

.study-presentation-overlay button {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(55, 65, 81, .3);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 16px rgba(17, 24, 39, .12);
  color: #374151;
  font: 600 15px/1 var(--ui-font);
}

.study-presentation-overlay button:hover,
.study-presentation-overlay button:focus-visible {
  border-color: #64748b;
  background: #fff;
  outline: 2px solid rgba(100, 116, 139, .35);
  outline-offset: 2px;
}

.study-presentation-location {
  width: 44px;
  padding: 5px 3px;
  border: 1px solid rgba(55, 65, 81, .18);
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
  color: #64748b;
  font: 600 10px/1.25 var(--ui-font);
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
}

.study-presentation-display { display: flex; flex-direction: column; gap: 3px; width: 44px; }
.study-presentation-display[hidden] { display: none; }
.study-presentation-display button { min-height: 25px; font-size: 9px; }
.study-presentation-display button[aria-pressed="true"] { background: #e5e7eb; color: #111827; }
.study-presentation-overlay #studyPresentationIncreaseBtn { order: 1; }
.study-presentation-overlay #studyPresentationDecreaseBtn { order: 2; }
.study-presentation-overlay #studyPresentationUpBtn { order: 3; }
.study-presentation-overlay #studyPresentationExitBtn { order: 4; }
.study-presentation-overlay #studyPresentationDownBtn { order: 5; }
.study-presentation-overlay .study-presentation-location { order: 6; }
.study-presentation-overlay .study-presentation-display { order: 7; }

body.scripture-presentation-active {
  background: #fffdf9;
}

body.scripture-presentation-active .app-header,
body.scripture-presentation-active #publicLoadStatus,
body.scripture-presentation-active .sidebar,
body.scripture-presentation-active #notesDrawerMount,
body.scripture-presentation-active .study-bible-page-title,
body.scripture-presentation-active .study-bible-controls-sticky,
body.scripture-presentation-active .study-toolbar-shell,
body.scripture-presentation-active .study-word-panel,
body.scripture-presentation-active .study-word-resize-handle,
body.scripture-presentation-active .tool:not(#studyBible) {
  display: none !important;
}

body.scripture-presentation-active .app-shell {
  display: block;
  min-height: 100vh;
}

body.scripture-presentation-active .app-shell > main,
body.scripture-presentation-active #studyBible {
  display: block;
  width: 100%;
  min-height: 100vh;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fffdf9;
}

body.scripture-presentation-active .study-bible-layout {
  display: block;
  max-width: none;
}

body.scripture-presentation-active .study-passage-panel,
body.scripture-presentation-active .study-passage-results {
  width: calc(100% - 120px);
  max-width: none;
  margin-inline: auto;
  background: #fffdf9;
}

body.scripture-presentation-active .study-passage-head,
body.scripture-presentation-active .study-verse-stack {
  width: 100%;
  margin-inline: auto;
}

body.scripture-presentation-active .study-passage-head {
  padding-top: 42px;
  padding-bottom: 18px;
}

body.scripture-presentation-active .study-passage-book-hebrew {
  font-size: clamp(32px, 4vw, 46px);
}

body.scripture-presentation-active .study-passage-head .study-passage-book-chapter {
  font-size: clamp(18px, 2vw, 24px);
}

body.scripture-presentation-active .study-verse-stack {
  padding-bottom: 104px;
}

/* Flow Reading: visual-only treatment of the existing canonical verse DOM. */
body.scripture-presentation-active .study-bible-verse { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.scripture-presentation-active .study-bible-verse-number { display: inline; margin-inline: .2em; font-size: .5em; vertical-align: super; }
body.scripture-presentation-active .study-bible-verse-number { font-size: clamp(16px, .6em, 22px); }
body.scripture-presentation-active[data-presentation-display="english"] .study-bible-verse,
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-verse { display: inline; }
body.scripture-presentation-active[data-presentation-display="english"] .study-bible-verse-body,
body.scripture-presentation-active[data-presentation-display="english"] .study-bible-english,
body.scripture-presentation-active[data-presentation-display="english"] .study-bible-english p,
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-verse-body,
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-hebrew-row,
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-hebrew { display: inline; }
body.scripture-presentation-active[data-presentation-display="english"] .study-bible-hebrew-row,
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-english { display: none; }
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-verse-stack { direction: rtl; text-align: right; }
body.scripture-presentation-active[data-presentation-display="both"] .study-bible-verse { padding-block: 5px; }
body.scripture-presentation-active[data-presentation-display="both"] .study-bible-hebrew-row { margin: 0; }
body.scripture-presentation-active[data-presentation-display="both"] .study-bible-english { margin: 2px 0 0; }

body.scripture-presentation-active .study-bible-english {
  font-size: var(--study-presentation-english-size) !important;
  line-height: 1.65;
}

body.scripture-presentation-active .study-bible-hebrew,
body.scripture-presentation-active .study-bible-hebrew * {
  font-size: var(--study-presentation-hebrew-size) !important;
  line-height: 1.72;
}

@media (max-width: 560px) {
  .study-presentation-overlay {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    flex-direction: row;
    justify-content: center;
  }

  .study-presentation-overlay button {
    flex: 0 1 44px;
    font-size: 12px;
  }

  .study-presentation-location {
    flex: 0 1 74px;
    width: auto;
    min-height: 30px;
    padding-inline: 6px;
  }

  .study-presentation-display { flex: 0 1 88px; width: auto; flex-direction: row; }
  .study-presentation-display button { min-width: 0; flex: 1 1 auto; }

  body.scripture-presentation-active .study-passage-head,
  body.scripture-presentation-active .study-verse-stack {
    width: 100%;
  }

  body.scripture-presentation-active .study-passage-head { padding-top: 26px; }
  body.scripture-presentation-active .study-passage-panel,
  body.scripture-presentation-active .study-passage-results { width: calc(100% - 24px); }
  body.scripture-presentation-active .study-verse-stack { padding-bottom: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .study-presentation-overlay button { transition: none; }
}

/* Final stable Presentation Mode geometry. */
body.scripture-presentation-active .study-bible-layout {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

body.scripture-presentation-active .study-passage-panel,
body.scripture-presentation-active .study-passage-results {
  width: calc(100vw - 160px) !important;
  max-width: none !important;
  margin-inline: 24px auto !important;
}

body.scripture-presentation-active .study-bible-verse {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: clamp(12px, 1vw, 24px) !important;
  align-items: start;
  width: 100%;
}

body.scripture-presentation-active .study-bible-verse-number {
  position: static !important;
  grid-column: 1;
  margin: 0 !important;
  padding-top: .2em;
  font-size: clamp(16px, .6em, 22px) !important;
  vertical-align: baseline;
}

body.scripture-presentation-active .study-bible-verse-body {
  grid-column: 2;
  min-width: 0;
}

body.scripture-presentation-active .study-bible-english {
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

body.scripture-presentation-active .study-bible-hebrew-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  column-gap: clamp(12px, 1vw, 24px) !important;
  align-items: start;
}

body.scripture-presentation-active .study-bible-hebrew { max-width: none !important; text-align: right !important; }
body.scripture-presentation-active .study-bible-hebrew-verse-marker { position: static !important; margin: 0 !important; font-size: clamp(16px, .6em, 22px) !important; }

/* Hebrew Presentation Mode rows must always occupy the same available width.
   This overrides the compact inline Flow Reading treatment only for Hebrew
   display, preserving each word's existing hover identity and RTL content. */
body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-verse {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  width: 100% !important;
}

body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-verse-body {
  display: block !important;
  grid-column: 2;
  min-width: 0;
}

body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-hebrew-row,
body.scripture-presentation-active[data-presentation-display="both"] .study-bible-hebrew-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  width: 100% !important;
  min-width: 0;
}

body.scripture-presentation-active[data-presentation-display="hebrew"] .study-bible-hebrew,
body.scripture-presentation-active[data-presentation-display="both"] .study-bible-hebrew {
  display: block !important;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  margin-inline: 0 !important;
  direction: rtl;
  text-align: right !important;
}

@media (max-width: 560px) {
  body.scripture-presentation-active .study-passage-panel,
  body.scripture-presentation-active .study-passage-results {
    width: calc(100vw - 24px) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 880px) {
  .study-passage-selector { grid-template-columns: minmax(0, 1fr) auto; }
  .study-nav-passage-group { flex-wrap: wrap; }
  .study-weekly-reading-panel { grid-column: 1 / -1; }
  .weekly-reading-toolbar-chip { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .study-passage-selector { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .study-toolbar { justify-content: flex-start; }
  .study-weekly-reading-panel { grid-column: 1; }
  .study-passage-head { padding: 18px 12px 7px; }
  .study-passage-book-hebrew { font-size: 30px; }
  .study-verse-stack > .study-bible-verse:first-child { padding-top: 14px; }
}

/* Compact Torah Portions reference page. Scoped to this page only. */
.torah-portions-page { gap: 10px; }
.torah-portions-topbar { position: relative; display: grid; grid-template-columns: minmax(350px, 390px) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; }
.torah-portions-toolbar { display: flex; grid-template-columns: none; align-items: center; gap: 5px; min-width: 0; margin: 0; }
.torah-portion-search-control { position: relative; display: block; flex: 0 1 320px; width: min(320px, 100%); min-width: 280px; }
.torah-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.torah-search-icon { position: absolute; left: 9px; top: 50%; z-index: 1; display: grid; place-items: center; width: 15px; height: 15px; color: #9ca3af; transform: translateY(-50%); pointer-events: none; }
.torah-search-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#torahPortionSearch { width: 100%; min-height: 34px; height: 34px; padding: 5px 30px 5px 30px; border-color: #e5e7eb; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 400; }
.torah-search-clear { position: absolute; right: 5px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #9ca3af; font-size: 17px; line-height: 1; transform: translateY(-50%); }
.torah-search-clear:hover,
.torah-search-clear:focus-visible { background: #f3f4f6; color: #374151; }
.torah-portion-highlight-toggle { flex: 0 0 auto; gap: 3px; margin: 0; color: #9ca3af; font-size: 10px; font-weight: 400; white-space: nowrap; }
.torah-portion-highlight-toggle input { width: 14px; height: 14px; }

.torah-current-portion-note { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; white-space: nowrap; }
.torah-current-portion-note > span { flex: 0 0 auto; color: #9ca3af; font-size: 10px; font-weight: 400; text-transform: none; }
.torah-current-portion-note strong { flex: 0 1 auto; min-width: 0; overflow: hidden; color: #374151; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.torah-current-portion-note em { display: flex; align-items: center; gap: 3px; min-width: 0; color: #d1d5db; font-size: 11px; font-weight: 400; overflow: hidden; }
.torah-current-portion-note .torah-ref-link { display: inline-block; flex: 0 1 auto; width: auto; min-width: 0; color: #6b7280; font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; }

.torah-combined-details { position: relative; align-self: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.torah-combined-details summary { display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 7px; border: 1px solid transparent; border-radius: 6px; color: #6b7280; font-size: 10.5px; font-weight: 400; white-space: nowrap; list-style-position: inside; }
.torah-combined-details summary:hover,
.torah-combined-details summary:focus-visible { border-color: #e5e7eb; background: #f9fafb; color: #374151; }
.torah-combined-details[open] summary { margin: 0; border-bottom: 1px solid #e5e7eb; }
.torah-combined-list { position: absolute; top: calc(100% + 5px); right: 0; z-index: 50; width: min(340px, calc(100vw - 36px)); max-height: 60vh; overflow: auto; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(17, 24, 39, .12); }

.torah-books-grid { gap: 0 8px; }
.torah-book-column { gap: 0; padding-right: 7px; border-right-color: #e5e7eb; }
.torah-book-column-head { gap: 1px; margin-bottom: 0; padding: 0 3px 6px; border-bottom: 1px solid #d1d5db; text-align: center; }
.torah-book-column-hebrew { font-size: 20px; font-weight: 500; line-height: 1.15; }
.torah-book-column-title { color: #9ca3af; font-size: 10.5px; font-weight: 400; line-height: 1.2; }
.torah-book-column.current-book .torah-book-column-head { border-bottom-color: #94a3b8; }
.torah-book-column-items { gap: 0; }
.torah-portion-item { gap: 2px; padding: 6px 4px 5px; border-bottom: 1px solid #eef0f2; background: transparent; line-height: 1.2; }
.torah-portion-item-name { font-size: 12px; font-weight: 500; line-height: 1.25; }
.torah-portion-name-link { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #111827; text-align: left; cursor: pointer; }
.torah-portion-name-link:hover,
.torah-portion-name-link:focus-visible { background: transparent; color: #374151; text-decoration: underline; text-underline-offset: 2px; }
.torah-portion-item-name .hebrew { font-size: 13px; font-weight: 400; }
.torah-portion-item .torah-ref-link,
.torah-portion-item .torah-ref-missing { font-size: 10.5px; line-height: 1.25; }
.torah-ref-link-haftarah { color: #6b7280; }
.torah-portion-item.current-week { border-radius: 4px; background: #f1f5f9; box-shadow: inset 2px 0 0 #94a3b8; }
.torah-portion-item.current-week .torah-book-portion-badge { border-color: transparent; background: transparent; color: #64748b; padding-inline: 3px; font-size: 9px; font-weight: 500; }

@media (min-width: 1100px) {
  .torah-books-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
  .torah-portions-topbar { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .torah-combined-details { grid-column: 1 / -1; justify-self: end; }
  .torah-books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .torah-portions-topbar { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .torah-portions-toolbar { width: 100%; }
  .torah-portion-search-control { width: 100%; max-width: none; }
  .torah-current-portion-note { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .torah-current-portion-note em { flex-wrap: wrap; }
  .torah-combined-details { grid-column: 1; justify-self: start; }
  .torah-combined-list { position: static; width: 100%; margin-top: 5px; box-shadow: none; }
  .torah-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .torah-books-grid { grid-template-columns: minmax(0, 1fr); }
  .torah-book-column { padding-right: 0; border-right: 0; }
}

/* Final Torah Portions visual refinement. Scoped to the Torah Portions page. */
#torahPortions {
  padding-top: 16px;
}

#torahPortions > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

#torahPortions > .tool-helper {
  display: none;
}

.torah-portions-page {
  gap: 10px;
}

.torah-portions-topbar {
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  padding: 4px 8px;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}

.torah-portions-toolbar {
  display: block;
  min-width: 0;
}

.torah-portion-search-control {
  width: 300px;
  min-width: 0;
  max-width: 300px;
}

#torahPortionSearch {
  height: 32px;
  min-height: 32px;
  font-size: 12px;
}

.torah-current-portion-note {
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  line-height: 1.35;
}

.torah-current-portion-note > span {
  font-size: 10.5px;
}

.torah-current-portion-note strong {
  flex: 0 1 auto;
  font-size: 12.5px;
  font-weight: 600;
}

.torah-current-portion-note em {
  flex: 1 1 auto;
  gap: 5px;
  color: #cbd5e1;
  font-size: 11.25px;
  font-style: normal;
}

.torah-current-portion-note .torah-ref-link {
  overflow: hidden;
  color: #4b5563;
  font-size: 11.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torah-combined-details summary {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 11px;
  list-style: none;
  cursor: pointer;
}

.torah-combined-details summary::-webkit-details-marker {
  display: none;
}

.torah-combined-details summary::after {
  content: "▾";
  color: #9ca3af;
  font-size: 10px;
  transition: transform .15s ease;
}

.torah-combined-details[open] summary::after {
  transform: rotate(180deg);
}

.torah-combined-details summary:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: 2px;
}

.torah-book-column-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  height: 40px;
  margin-bottom: 4px;
  padding: 3px 3px 4px;
  border-bottom: 1px solid #d1d5db;
  box-sizing: border-box;
  white-space: nowrap;
}

.torah-book-column-hebrew {
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.15;
}

.torah-book-column-title {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torah-portion-item {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 2px;
  padding: 5px 4px;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.25;
}

.torah-portion-item-name {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torah-portion-item-name .hebrew {
  font-size: 12px;
  font-weight: 500;
}

.torah-portion-item .torah-ref-link,
.torah-portion-item .torah-ref-missing {
  display: inline;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #4b5563;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torah-portion-item > .torah-ref-link:not(.torah-ref-link-haftarah) {
  grid-column: 2;
  grid-row: 1;
}

.torah-portion-item > .torah-ref-link:not(.torah-ref-link-haftarah)::after {
  content: none;
}

.torah-portion-item > .torah-ref-link-haftarah,
.torah-portion-item > .torah-ref-missing {
  grid-column: 1 / -1;
  grid-row: 2;
}

.torah-portion-item .torah-ref-link-haftarah {
  color: #5f6875;
}

.torah-portion-item.current-week {
  padding: 5px 4px;
  border-radius: 2px;
  background: #f1f5f9;
  box-shadow: inset 3px 0 0 #64748b;
}

.torah-portion-item.current-week .torah-book-portion-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  vertical-align: 1px;
}

@media (max-width: 1099px) {
  .torah-portions-topbar {
    grid-template-columns: minmax(290px, 310px) minmax(0, 1fr) auto;
    gap: 8px;
  }

  .torah-combined-details {
    grid-column: auto;
    justify-self: end;
  }
}

@media (max-width: 900px) {
  .torah-portions-topbar {
    grid-template-columns: minmax(290px, 300px) minmax(0, 1fr);
    height: auto;
    padding-block: 6px 8px;
  }

  .torah-combined-details {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  #torahPortions {
    padding-top: 12px;
  }

  .torah-portions-topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

  .torah-portion-search-control,
  #torahPortionSearch {
    width: 100%;
    max-width: none;
  }

  .torah-current-portion-note {
    flex-wrap: wrap;
  }

  .torah-current-portion-note em {
    flex-wrap: wrap;
    overflow: visible;
  }

  .torah-combined-details {
    grid-column: 1;
    justify-self: start;
  }
}

/* Cleaner translucent accents; marking classes and persisted values are unchanged. */
.study-bible-hebrew .study-hebrew-word.gn-hl-gold { background-color: rgba(250, 204, 21, .26); }
.study-bible-hebrew .study-hebrew-word.gn-hl-orange { background-color: rgba(251, 146, 60, .24); }
.study-bible-hebrew .study-hebrew-word.gn-hl-red { background-color: rgba(248, 113, 113, .22); }
.study-bible-hebrew .study-hebrew-word.gn-hl-purple { background-color: rgba(192, 132, 252, .22); }
.study-bible-hebrew .study-hebrew-word.gn-hl-blue { background-color: rgba(96, 165, 250, .22); }
.study-bible-hebrew .study-hebrew-word.gn-hl-green { background-color: rgba(74, 222, 128, .20); }
.study-bible-hebrew .study-hebrew-word.gn-hl-grey { background-color: rgba(148, 163, 184, .24); }
.study-bible-hebrew .study-hebrew-word.gn-hl-brown { background-color: rgba(180, 135, 90, .22); }

.study-bible-hebrew .study-hebrew-word.gn-hl-gold:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(250, 204, 21, .26) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-orange:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(251, 146, 60, .24) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-red:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(248, 113, 113, .22) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-purple:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(192, 132, 252, .22) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-blue:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(96, 165, 250, .22) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-green:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(74, 222, 128, .20) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-grey:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(148, 163, 184, .24) !important; }
.study-bible-hebrew .study-hebrew-word.gn-hl-brown:is(:hover, :focus, :focus-visible, :active) { background-color: rgba(180, 135, 90, .22) !important; }

.study-bible-hebrew .study-hebrew-word.gn-hl {
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Ordinary Study Bible verse numbers only. */
.study-bible-hebrew-verse-marker {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.study-bible-verse-number {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 560px) {
  .study-bible-hebrew-verse-marker {
    font-size: 14px;
  }

  .study-bible-verse-number {
    font-size: 13px;
  }
}

/* Time & Calendar live/simulation controls; calculations and watch geometry are unchanged. */
.calendar-key-times-head {
  align-items: stretch;
  flex-direction: column;
  gap: 7px;
}

.calendar-key-times-heading-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calendar-key-times-heading-copy strong {
  line-height: 1.3;
}

.calendar-date-status {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.calendar-date-status.is-live {
  color: #718078;
}

.calendar-date-status.is-simulation {
  color: #64748b;
}

.calendar-key-times-date-controls {
  display: grid;
  grid-template-columns: 24px 36px 68px 50px 24px;
  gap: 2px;
  align-items: center;
  margin-inline: -6px;
}

.calendar-key-times-date-controls button,
.calendar-key-times-date-controls select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 4px;
  border-color: #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.calendar-key-times-date-controls select {
  appearance: auto;
  font-weight: 600;
}

.calendar-key-times-date-controls select:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.28);
  outline-offset: 1px;
}

.calendar-key-times-date-controls button:disabled {
  cursor: default;
  opacity: 0.45;
}

.calendar-key-times-date-controls .calendar-return-today {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  color: #475569;
}

@media (max-width: 760px) {
  .calendar-key-times-head {
    gap: 8px;
  }

  .calendar-key-times-date-controls {
    grid-template-columns: 26px 40px minmax(72px, 1fr) 56px 26px;
    margin-inline: 0;
  }
}

/* Compact Hebrew Hour hierarchy; watch SVG dimensions and geometry remain unchanged. */
.calendar-page-inner .hebrew-hour-now-card {
  gap: 6px;
  padding: 12px 14px;
}

.hebrew-hour-now-primary-line {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
}

.hebrew-hour-now-countdown {
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}

.hebrew-hour-now-status-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  margin-top: 3px;
}

.hebrew-hour-now-state,
.hebrew-hour-now-until {
  line-height: 1.25;
}

.hebrew-hour-boundary-countdown {
  gap: 6px 10px;
  margin-top: 5px;
}

.hebrew-hour-now-details {
  gap: 4px;
  margin-top: 5px;
}

.hebrew-hour-now-details div {
  gap: 6px 10px;
}

.calendar-page-inner .hebrew-hour-now-details span,
.calendar-page-inner .hebrew-hour-boundary-countdown span {
  font-size: 11px;
}

.calendar-page-inner .hebrew-hour-now-details strong,
.calendar-page-inner .hebrew-hour-boundary-countdown strong {
  font-size: 11.5px;
  text-align: right;
}

.calendar-page-inner .watch-simulator {
  padding-top: 0;
}

.calendar-page-inner .watch-simulator > .gateway-card-head {
  margin-bottom: 0;
}

.calendar-page-inner .watch-simulator > .watch-simulator-title {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

/* Keep the live dial clear of its single-line title. */
.calendar-page-inner .watch-simulator .hebrew-hour-svg-shell {
  margin-top: 8px;
}

@media (max-width: 480px) {
  .hebrew-hour-now-primary-line,
  .hebrew-hour-now-status-line {
    column-gap: 7px;
  }
}

/* Persistent selected-location state; dimensions remain fixed across weight changes. */
.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn,
.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn {
  box-sizing: border-box;
  padding-inline: 12px;
  border-color: #DDE3EA;
  background: #FFFFFF;
  color: #374151;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
}

.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn {
  width: 100px;
  min-width: 100px;
}

.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn {
  width: 78px;
  min-width: 78px;
}

.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn:hover:not(.is-selected-location),
.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn:hover:not(.is-selected-location) {
  border-color: #C8D3DF;
  background: #F7F9FC;
}

.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn.is-selected-location,
.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn.is-selected-location,
.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn.is-selected-location:hover,
.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn.is-selected-location:hover {
  border-color: #9CB9D8;
  background: #EAF2FB;
  color: #1F3B5B;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(79, 121, 166, 0.08);
}

.calendar-page-inner .calendar-location-actions #calendarUseLocationBtn:focus-visible,
.calendar-page-inner .calendar-location-actions #calendarJerusalemBtn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

/* ===========================================================================
   Scripture-word hover card (desktop only) - the single hover popup for
   Scripture Hebrew words (see ensureScriptureWordHoverCard() in app.js).
   One reusable tooltip element, never one node per word. The native
   title="" attribute previously on .study-hebrew-word has been removed
   (see studyWordButtonHtml()), so this is the only hover UI - no second,
   competing popup. Compact single-line layout: transliteration | meaning
   | Value NNN, pale dividers, restrained panel matching the application's
   existing popover language (same border/shadow/radius tokens used
   elsewhere, e.g. .study-word-panel). pointer-events: none so the card can
   never intercept or block the underlying word's existing click handling.
   =========================================================================== */
.scripture-word-hover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 2px;
  max-width: 340px;
  width: max-content;
  padding: 6px 12px;
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 110ms ease, transform 110ms ease;
}

.scripture-word-hover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scripture-word-hover__transliteration,
.scripture-word-hover__meaning,
.scripture-word-hover__value {
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.scripture-word-hover__transliteration[hidden],
.scripture-word-hover__meaning[hidden],
.scripture-word-hover__value[hidden],
.scripture-word-hover__rootline[hidden],
.scripture-word-hover__divider[hidden] {
  display: none;
}

.scripture-word-hover__rootline {
  flex-basis: 100%;
  line-height: 1.3;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 320px;
  text-align: center;
  border-top: 1px solid var(--line, #e5e7eb);
  padding-top: 3px;
  margin-top: 1px;
}

.scripture-word-hover__rootline--unavailable {
  font-style: italic;
  opacity: 0.75;
}

.scripture-word-hover__transliteration {
  direction: ltr;
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  color: var(--muted, #6b7280);
}

.scripture-word-hover__meaning {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #374151);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 200px;
}

.scripture-word-hover__value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.scripture-word-hover__divider {
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 9px;
  background: var(--line, #e5e7eb);
  flex-shrink: 0;
}

/* Narrow viewports: let the row wrap onto more than one line rather than
   overflow or force a huge/ugly card, while keeping the same left-to-right
   content order (transliteration, meaning, value) and hiding dividers that
   would otherwise land awkwardly at a wrap point. */
@media (max-width: 420px) {
  .scripture-word-hover {
    max-width: min(88vw, 300px);
  }
  .scripture-word-hover__divider {
    display: none;
  }
  .scripture-word-hover__transliteration,
  .scripture-word-hover__meaning,
  .scripture-word-hover__value {
    flex-basis: 100%;
    text-align: center;
    max-width: 100%;
  }
  .scripture-word-hover__rootline {
    max-width: 100%;
  }
}

@media (hover: none), (pointer: coarse) {
  .scripture-word-hover {
    display: none;
  }
}

/* ===========================================================================
   Genesis Interlinear view (toggle-controlled, see studyInterlinearWordHtml()
   and toggleStudyInterlinear() in app.js). Reuses the exact same
   ".study-hebrew-word" occurrence element as normal reading mode - only
   display/flow is overridden here (a "study-hebrew-word--interlinear"
   modifier, never a replacement class), so gn-hl-*/gn-ul-* highlight and
   underline colours from notes-system.css, the selected/same-value-
   highlight states above, and click/keyboard targeting all keep working
   unchanged. No borders or background boxes are added per word - only the
   existing hover/selection washes above, which now simply cover a taller
   three-line unit instead of a single inline word.

   Font sizing: deliberately NO isolated px font-size anywhere below.
   ".study-bible-hebrew" already receives its font-size from the existing
   text-size control (studyBibleSettings.fontSize -> the font-small/
   font-normal/font-large/font-extra-large class on #studyPassageResults,
   see syncStudyPassageFontClass() in app.js) - that cascades down,
   unmodified, onto ".study-hebrew-word.study-hebrew-word--interlinear"
   (which sets no font-size of its own, so it simply inherits it) and from
   there the Hebrew/pronunciation/Meaning lines below are sized with `em`
   relative to that SAME inherited value, so the one existing text-size
   control remains the single source of truth - no second font-size state
   is introduced anywhere here.
   =========================================================================== */
.study-bible-hebrew--interlinear {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  --interlinear-gap-x: 0.42em;
  column-gap: var(--interlinear-gap-x);
  row-gap: 0.56em;
  max-width: 940px;
  margin-inline: auto;
}

.study-hebrew-word.study-hebrew-word--interlinear {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.06em;
  min-width: 0;
  max-width: 4.6em;
  padding: 0.09em 0.14em;
  vertical-align: top;
  text-align: center;
}

.study-interlinear-word__hebrew {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Times New Roman", "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--study-hebrew-color, #202124);
}

.study-interlinear-word__pronunciation {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.48em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.study-interlinear-word__meaning {
  font-size: 0.48em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #374151);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Narrower screens: tighter word-unit spacing only. Font sizes are NOT
   overridden here - they already scale automatically (via em, above) with
   whatever text-size level is selected, at every viewport width. Longer
   Meanings still wrap within their own word unit rather than overflowing
   the page - never split a word's Hebrew away from its own pronunciation
   or Meaning (they stay one flex-column unit at every width). */
@media (max-width: 640px) {
  .study-bible-hebrew--interlinear {
    --interlinear-gap-x: 0.3em;
    row-gap: 0.42em;
  }
  .study-hebrew-word.study-hebrew-word--interlinear {
    max-width: 3.8em;
    padding: 0.07em 0.1em;
  }
}

/* ---------------------------------------------------------------------------
   Continuous highlight/underline appearance for adjacent Interlinear word
   units that share the same colour (same continuous mark). Pure CSS: uses
   the plain adjacent-sibling combinator against the SAME gn-hl-*/gn-ul-*
   colour classes notes-system.js already applies (see notes-system.css) -
   no new classes, no JS, no change to stored marks. applyMarkToArticle()
   in notes-system.js always marks a continuous range as DOM-adjacent
   .study-hebrew-word elements, so "previous DOM sibling has the same
   colour class" reliably means "same continuous mark, same colour" - a
   different colour, or an unmarked word breaking the range, never matches
   these selectors, so those stay visually separate automatically.

   :has() targets the FIRST word of a matching pair (flattens its trailing
   corner); the plain adjacent-sibling selector targets the SECOND word
   (flattens its leading corner and pulls it most of the way across the
   gap, leaving only a small readable seam). A middle word in a 3+ run
   matches both rules at once, so all four corners flatten; the first and
   last words in a run each keep their own outer corner rounded. If a
   matching pair happens to wrap onto different visual lines, flex-wrap
   simply starts the second word at its own row's edge - the small
   leading-margin pull has nothing to bridge to there, so no connector is
   ever drawn across the page.
   --------------------------------------------------------------------------- */
.study-hebrew-word--interlinear.gn-hl-gold + .study-hebrew-word--interlinear.gn-hl-gold,
.study-hebrew-word--interlinear.gn-hl-orange + .study-hebrew-word--interlinear.gn-hl-orange,
.study-hebrew-word--interlinear.gn-hl-red + .study-hebrew-word--interlinear.gn-hl-red,
.study-hebrew-word--interlinear.gn-hl-purple + .study-hebrew-word--interlinear.gn-hl-purple,
.study-hebrew-word--interlinear.gn-hl-blue + .study-hebrew-word--interlinear.gn-hl-blue,
.study-hebrew-word--interlinear.gn-hl-green + .study-hebrew-word--interlinear.gn-hl-green,
.study-hebrew-word--interlinear.gn-hl-grey + .study-hebrew-word--interlinear.gn-hl-grey,
.study-hebrew-word--interlinear.gn-hl-brown + .study-hebrew-word--interlinear.gn-hl-brown {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.study-hebrew-word--interlinear.gn-hl-gold:has(+ .study-hebrew-word--interlinear.gn-hl-gold),
.study-hebrew-word--interlinear.gn-hl-orange:has(+ .study-hebrew-word--interlinear.gn-hl-orange),
.study-hebrew-word--interlinear.gn-hl-red:has(+ .study-hebrew-word--interlinear.gn-hl-red),
.study-hebrew-word--interlinear.gn-hl-purple:has(+ .study-hebrew-word--interlinear.gn-hl-purple),
.study-hebrew-word--interlinear.gn-hl-blue:has(+ .study-hebrew-word--interlinear.gn-hl-blue),
.study-hebrew-word--interlinear.gn-hl-green:has(+ .study-hebrew-word--interlinear.gn-hl-green),
.study-hebrew-word--interlinear.gn-hl-grey:has(+ .study-hebrew-word--interlinear.gn-hl-grey),
.study-hebrew-word--interlinear.gn-hl-brown:has(+ .study-hebrew-word--interlinear.gn-hl-brown) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Same gap-closing pull for both highlight and underline pairs (16 colour
   combinations total) - a small residual seam (~15% of the gap) is kept
   deliberately for readability rather than letting the two word units
   touch completely. */
.study-hebrew-word--interlinear.gn-hl-gold + .study-hebrew-word--interlinear.gn-hl-gold,
.study-hebrew-word--interlinear.gn-hl-orange + .study-hebrew-word--interlinear.gn-hl-orange,
.study-hebrew-word--interlinear.gn-hl-red + .study-hebrew-word--interlinear.gn-hl-red,
.study-hebrew-word--interlinear.gn-hl-purple + .study-hebrew-word--interlinear.gn-hl-purple,
.study-hebrew-word--interlinear.gn-hl-blue + .study-hebrew-word--interlinear.gn-hl-blue,
.study-hebrew-word--interlinear.gn-hl-green + .study-hebrew-word--interlinear.gn-hl-green,
.study-hebrew-word--interlinear.gn-hl-grey + .study-hebrew-word--interlinear.gn-hl-grey,
.study-hebrew-word--interlinear.gn-hl-brown + .study-hebrew-word--interlinear.gn-hl-brown,
.study-hebrew-word--interlinear.gn-ul-gold + .study-hebrew-word--interlinear.gn-ul-gold,
.study-hebrew-word--interlinear.gn-ul-orange + .study-hebrew-word--interlinear.gn-ul-orange,
.study-hebrew-word--interlinear.gn-ul-red + .study-hebrew-word--interlinear.gn-ul-red,
.study-hebrew-word--interlinear.gn-ul-purple + .study-hebrew-word--interlinear.gn-ul-purple,
.study-hebrew-word--interlinear.gn-ul-blue + .study-hebrew-word--interlinear.gn-ul-blue,
.study-hebrew-word--interlinear.gn-ul-green + .study-hebrew-word--interlinear.gn-ul-green,
.study-hebrew-word--interlinear.gn-ul-grey + .study-hebrew-word--interlinear.gn-ul-grey,
.study-hebrew-word--interlinear.gn-ul-brown + .study-hebrew-word--interlinear.gn-ul-brown {
  margin-inline-start: calc(-1 * var(--interlinear-gap-x, 0.42em) * 0.85);
}

/* Underline continuity: move the visible line from the whole three-line
   unit (which would otherwise sit under the Meaning text) to just below
   the Hebrew line, reading var(--gn-underline-colour) - the SAME custom
   property notes-system.css already sets per colour on this exact element
   (.gn-ul-<colour>), inherited automatically by this child span. A plain
   border-bottom carries no corner radius, so once the horizontal gap above
   is closed the line already reads as continuous - no radius rules are
   needed for underlines the way they are for the highlight background.
   Higher specificity than notes-system.css's own ".study-hebrew-word.gn-ul"
   rule (3 selectors vs its 2) lets this override safely without touching
   that file. */
.study-bible-hebrew--interlinear .study-hebrew-word.gn-ul {
  border-bottom: none !important;
}

.study-bible-hebrew--interlinear .study-hebrew-word.gn-ul .study-interlinear-word__hebrew {
  padding-bottom: 0.08em;
  border-bottom: 2px solid var(--gn-underline-colour, rgba(126, 196, 240, 0.78));
}

/* Interlinear toggle button - matches the existing Study Bible toolbar
   button language exactly (.study-toolbar-button). It carries a text
   label like the Daily Tehillim/Mishlei buttons, so - like those - it
   needs an auto width rather than the toolbar's default fixed icon-button
   square; the ON state is a restrained colour change, not a new style. */
.study-interlinear-toggle-btn {
  width: auto;
  min-width: 0;
  padding-inline: 10px;
  font-size: 11.5px;
}

.study-interlinear-toggle-btn.active {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* The Hebrew word wrapper, rather than just its row, establishes the
   ordinary reader's text boundary. Keep its existing 940px cap, but anchor
   that full-width wrapper to the RTL start instead of auto-centring it. */
body:not(.scripture-presentation-active) .study-bible-hebrew {
  display: block;
  width: 100%;
  max-width: 940px;
  margin-inline: 0;
  justify-self: end;
  direction: rtl;
  text-align: right;
}

/* Presentation Mode uses its broad grid column without a content-sized
   Hebrew line box; the marker remains in the adjacent grid column. */
body.scripture-presentation-active .study-bible-hebrew-row {
  justify-items: stretch;
}

body.scripture-presentation-active .study-bible-hebrew {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch;
  direction: rtl;
  text-align: right !important;
}