#verseActionPanel { position:absolute; bottom:0; left:0; right:0; background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -4px 32px rgba(0,0,0,0.18); overflow:hidden; font-family:'Futura','Arimo',sans-serif; }
    #verseActionHeader { background:#8B0000; padding:12px 20px 18px; text-align:center; }
    /* Tap to close. The ::after box gives the 36x4 bar a finger-sized hit
       area without changing how it looks. */
    #verseActionHandle { width:36px; height:4px; background:rgba(255,255,255,0.35); border-radius:99px; margin:0 auto 12px; position:relative; cursor:pointer; }
    #verseActionHandle::after { content:''; position:absolute; inset:-12px -40px; }
    #verseActionRef { font-size: 11px; font-weight: 700; color: #FFD54F; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } /* #FFD54F on #8B0000 = 4.6:1 ✓ */
    #verseActionVerseNum { color:#ffffff; }
    #verseActionBody { padding:16px 20px 0; max-height:200px; overflow-y:auto; }
    #verseActionChr { font-size:14px; color:#1a1a1a; line-height:1.8; margin-bottom:8px; font-family:'Noto Sans Cherokee','Futura',sans-serif; }
    #verseActionDivider { border-top:0.5px solid #E2DDD7; margin-bottom:8px; }
    #verseActionText { font-size:13px; color:#4A4A4A; line-height:1.6; font-style:italic; } /* #4A4A4A on white = 9.7:1 ✓ */
    #verseActionGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 20px; }
    .vas-card { background:#F5F1EC; border:1.5px solid transparent; border-radius:14px; padding:18px 10px 14px; cursor:pointer; text-align:center; position:relative; transition:background 0.15s, border-color 0.15s; -webkit-tap-highlight-color:transparent; font-family:'Futura','Arimo',sans-serif; }
    .vas-card:active { transform:scale(0.96); }
    .vas-card-icon  { font-size:20px; display:block; margin-bottom:6px; line-height:1; color:#1a1a1a; }
    .vas-card-title { font-size:15px; font-weight:700; color:#1a1a1a; display:block; margin-bottom:2px; }
    .vas-card-sub   { font-size:12px; color:#595550; display:block; } /* #595550 on #F5F1EC = 5.2:1 ✓ */
    .vas-dot { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; display:none; }
    /* Active: Bookmark verse */
    .vas-card.active-fav { background:#FFF0F0; border-color:#A71C20; }
    .vas-card.active-fav .vas-card-icon,
    .vas-card.active-fav .vas-card-title,
    .vas-card.active-fav .vas-card-sub  { color:#A71C20; }
    .vas-card.active-fav .vas-dot       { background:#A71C20; display:block; }
    /* Active: Highlight */
    .vas-card.active-hlit { background:#FFF8E7; border-color:#C8941A; }
    .vas-card.active-hlit .vas-card-icon,
    .vas-card.active-hlit .vas-card-title,
    .vas-card.active-hlit .vas-card-sub { color:#C8941A; }
    .vas-card.active-hlit .vas-dot      { background:#C8941A; display:block; }
    /* Active: Chapter fav */
    .vas-card.active-ch { background:#FFF0F0; border-color:#A71C20; }
    .vas-card.active-ch .vas-card-icon,
    .vas-card.active-ch .vas-card-title,
    .vas-card.active-ch .vas-card-sub   { color:#A71C20; }
    .vas-card.active-ch .vas-dot        { background:#A71C20; display:block; }
    #verseActionClose { display:block; width:calc(100% - 40px); margin:0 20px 28px; padding:14px; background:#F5F1EC; border:none; border-radius:14px; font-size:16px; font-weight:600; color:#333; cursor:pointer; font-family:'Futura','Arimo',sans-serif; }
    .vb.highlighted { background:rgba(200,148,26,0.18) !important; border-left:5px solid #9A6F12 !important; padding-left:6px; }
    /* Ensure main participates correctly in body flex column layout */
    main { display:contents; }

@font-face {
  font-family: 'Futura';
  src: url('font/futura-light-webfont.woff2') format('woff2'),
       url('font/futura-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arimo';
  src: url('font/Arimo-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Cherokee:wght@400;700&family=Arimo:wght@400;600;700&display=swap');

:root {
  --brand:      #A71C20;
  --brand-dark: #8B0000;
  --brand-deep: #3E0B0B;
  --gold:       #C8941A;
  --gold-light: #E8B84B;
  --gold-bright:#ffc107;
  --cream:      #F7F3EE;
  --panel-bg:   #FAFAF8;
  --divider:    #E2DDD7;
  --tp:         #1A1714;
  --ts:         #6B6560;
  --tm:         #767676;  /* was #9E9A95 (2.8:1) — now 4.54:1 on white for WCAG AA */
  --text-main:  #525252;
  --text-dark:  #333333;
  --text-scale: 1;        /* controlled by text-size buttons */

  /* ── Cherokee reading font (swappable via Options → Font) ──
     Every stack ends in Noto Sans Cherokee, which is always loadable
     from Google Fonts, so the syllabary never falls back to tofu. */
  --chr-font:   'Noto Sans Cherokee', 'Futura', 'Arimo', sans-serif;
  --chr-weight: 400;

  /* ── Reading THEME tokens (overridden by [data-theme] below) ──
     Defaults reproduce the original red Cherokee panel exactly so
     nothing changes visually until a theme is chosen. */
  --rd-cherokee-bg:      var(--brand);          /* Cherokee panel background   */
  --rd-cherokee-label:   rgba(139,26,26,0.97);  /* sticky label bar background */
  --rd-verse-num-bg:     #7c1517;               /* verse-number gutter          */
  --rd-verse-num:        var(--gold-bright);    /* verse-number text            */
  --rd-text:             rgba(255,255,255,0.88); /* Cherokee body text          */
  --rd-text-played:      rgba(255,255,255,0.22); /* already-sung words          */
  --rd-text-pending:     rgba(255,255,255,0.88); /* not-yet-sung words          */
  --rd-word-hover:       rgba(255,255,255,0.12);
  --rd-verse-active-bg:  rgba(255,255,255,0.08); /* active verse row tint       */
  --rd-hl-bg:            var(--gold-bright);     /* current karaoke word bg     */
  --rd-hl-text:          #1A0800;                /* current karaoke word text   */
  --rd-hl-shadow:        rgba(255,193,7,0.45);
  --rd-accent:           var(--gold-bright);     /* label dots / accents        */
  --rd-focus-ring:       #ffffff;                /* keyboard focus ring in panel */
  --rd-focus-halo:       rgba(0,0,0,0.45);
}

/* ═══════════════════════════════════════════════════════════════
   READING THEMES — set on <html data-theme="…"> from the Options menu.
   Only the Cherokee reading panel is re-themed; the brand chrome
   (header, selector bar, audio controls) stays constant for identity.
   ═══════════════════════════════════════════════════════════════ */

/* Light — white background, black text */
:root[data-theme="light"] {
  --rd-cherokee-bg:     #ffffff;
  --rd-cherokee-label:  rgba(255,255,255,0.97);
  --rd-verse-num-bg:    #f0eeea;
  --rd-verse-num:       #725a0a;
  --rd-text:            #1a1a1a;
  --rd-text-played:     rgba(26,26,26,0.32);
  --rd-text-pending:    #1a1a1a;
  --rd-word-hover:      rgba(0,0,0,0.07);
  --rd-verse-active-bg: rgba(0,0,0,0.04);
  --rd-hl-bg:           #996515;
  --rd-hl-text:         #ffffff;
  --rd-hl-shadow:       rgba(153,101,21,0.35);
  --rd-accent:          #996515;
  --rd-focus-ring:      #1a73e8;
  --rd-focus-halo:      rgba(26,115,232,0.25);
}

/* Sepia — warm paper background, black text */
:root[data-theme="sepia"] {
  --rd-cherokee-bg:     #f4ecd8;
  --rd-cherokee-label:  rgba(244,236,216,0.97);
  --rd-verse-num-bg:    #e6dabc;
  --rd-verse-num:       #6b500e;
  --rd-text:            #2b2415;
  --rd-text-played:     rgba(43,36,21,0.34);
  --rd-text-pending:    #2b2415;
  --rd-word-hover:      rgba(90,70,20,0.12);
  --rd-verse-active-bg: rgba(120,90,30,0.10);
  --rd-hl-bg:           #875f0a;
  --rd-hl-text:         #fdf6e3;
  --rd-hl-shadow:       rgba(135,95,10,0.40);
  --rd-accent:          #6b500e;
  --rd-focus-ring:      #1a5fb4;
  --rd-focus-halo:      rgba(26,95,180,0.22);
}

/* Dark — black background, white text */
:root[data-theme="dark"] {
  --rd-cherokee-bg:     #0e0e0f;
  --rd-cherokee-label:  rgba(20,20,22,0.97);
  --rd-verse-num-bg:    #26262a;
  --rd-verse-num:       #e8b84b;
  --rd-text:            rgba(255,255,255,0.92);
  --rd-text-played:     rgba(255,255,255,0.30);
  --rd-text-pending:    rgba(255,255,255,0.92);
  --rd-word-hover:      rgba(255,255,255,0.12);
  --rd-verse-active-bg: rgba(255,255,255,0.06);
  --rd-hl-bg:           #ffc107;
  --rd-hl-text:         #141414;
  --rd-hl-shadow:       rgba(255,193,7,0.45);
  --rd-accent:          #e8b84b;
  --rd-focus-ring:      #ffffff;
  --rd-focus-halo:      rgba(0,0,0,0.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Accessibility: visible keyboard focus indicator (WCAG 2.4.7) ──
   Uses :focus-visible so mouse/touch users don't see rings, but
   keyboard users get a clear high-contrast outline everywhere. */
:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 3px;
}
/* On the dark red header/panel, use a light ring for contrast.
   The Cherokee reading panel uses a theme-aware ring (--rd-focus-ring)
   so it stays visible in light/sepia themes too. */
.app-header :focus-visible,
.selector-bar :focus-visible,
.audio-panel :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.45);
}
.ptop :focus-visible,
.w:focus-visible,
.vn-more:focus-visible {
  outline: 3px solid var(--rd-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--rd-focus-halo);
}
/* Older browsers without :focus-visible fall back to :focus, but we
   suppress the default ring only where we provide our own above. */

html, body {
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
  background-color: #ffffff;
  color: var(--text-main);
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  margin-bottom: 100px;
  height: 100%;
  overflow: hidden;
}

#sidebarMenu {
  padding-top: 60px;
  height: 100%;
  top: 0;
  position: fixed;
  left: 0;
  width: 250px;
  transform: translateX(-250px);
  transition: transform 250ms ease-in-out;
  background: linear-gradient(180deg, #a71c20 0%, #0C0203 100%);
  z-index: 1001;
}

.helpBtn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
  transform: translateX(0);
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.sidebarMenuInner li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.sidebarMenuInner li a i {
  margin-right: 8px;
  color: var(--gold-bright);
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: fixed;
  z-index: 1002;
  top: 40px;
  left: 15px;
  height: 22px;
  width: 22px;
  padding-top: 30px;
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
  box-shadow: 0.5px 0.5px;
  border-radius: 6px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
  box-shadow: 0.5px 0.5px;
  border-radius: 6px;
  height: 3px;
  width: 15px;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
  box-shadow: 0.5px 0.5px;
  border-radius: 6px;
  height: 3px;
  width: 15px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
  opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
  transform: rotate(-135deg);
  margin-top: -9px;
}

.language-switcher-container {
  padding: 5px;
  display: flex;
  border-radius: 5px;
  width: fit-content;
  margin: 20px;
}

.language-button {
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 0;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: transparent;
  color: white;
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
}

.language-button:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.language-button:last-child  { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.language-button.active      { background-color: #333; color: #fff; outline: 2px solid #525252; }
.language-button:not(.active){ background-color: #fff; color: #5A5A5A; }
.language-button:not(.active):hover { background-color: #f0f0f0; }

.app-header {
  background: #A71C20;
  background-size: cover;
  background-image: url(pattern-background-02.svg);
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}


.hback {
  color: #ffffff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  user-select: none;
  flex-shrink: 0;
}

.hback:hover { background: rgba(255,255,255,0.12); }
.htb { flex: 1; text-align: center; min-width: 0; }

.hbt {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  line-height: 1.15;
  overflow: visible;
  text-overflow: ellipsis;
  padding: 15px;
}

/* Chapter + Verse pills sit directly under the title */
.hpills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.hpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.hpill:hover { background: rgba(0,0,0,0.30); border-color: rgba(255,255,255,0.55); }
.hpill i { font-size: 10px; opacity: 0.85; }

.hico {
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  user-select: none;
  flex-shrink: 0;
}

.hico:hover { background: rgba(255,255,255,0.12); }

/* ── Chapter / Verse dropdown panels ──────────────────────────
   Anchored below the header, slide down over the scripture text. */
.pick-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s;
  z-index: 40;
}
.pick-overlay.open { opacity: 1; visibility: visible; }

.pick-panel {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  width: min(92vw, 440px);
  max-height: 70vh;
  margin-top: calc(env(safe-area-inset-top, 0px) + 8px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 41;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
  opacity: 0;
  visibility: hidden;
}
.pick-panel.open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}
.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #A71C20;
  color: #fff;
  flex-shrink: 0;
}
.pick-head-title {
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.pick-head-title .pick-head-chr {
  display: block;
  font-size: 11px;
  color: var(--gold-bright);
  opacity: 0.95;
  margin-top: 2px;
}
.pick-close {
  background: rgba(255,255,255,0.15);
  border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pick-list {
  overflow-y: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
.pick-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
  border-bottom: 0.5px solid #f0ede8;
  transition: background 0.12s;
}
.pick-item:hover  { background: #fdf4f4; }
.pick-item.current { background: rgba(167,28,32,0.08); }
.pick-item-num {
  font-size: 13px;
  font-weight: 700;
  color: #A71C20;
  min-width: 26px;
  flex-shrink: 0;
}
.pick-item-labels { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pick-item-en  { font-size: 13px; color: #1a1a1a; }
.pick-item-chr {
  font-family: var(--chr-font), 'Noto Sans Cherokee', sans-serif;
  font-size: 12px; color: #6B6560;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Legacy selector bar retired — kept hidden in case markup lingers */
.selector-bar { display: none !important; }

.split {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.ptop {
  background-color: var(--rd-cherokee-bg);
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  transition: background-color 0.25s ease;
}

.plbl {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px 6px;
  position: sticky; top: 0; z-index: 2;
  background: var(--rd-cherokee-label);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(128,128,128,0.12);
}

.pldot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rd-accent); opacity: 0.7; flex-shrink: 0;
}

.pltxt {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--rd-accent); opacity: 0.9;
}

.vb {
  padding: 8px 8px 8px 6px;
  display: flex; gap: 0; align-items: flex-start;
  border-radius: 6px; margin: 2px 6px;
  transition: background 0.18s;
}

.vb.av { background: var(--rd-verse-active-bg); }

/* Verse number — plain light-gold margin label (no chip, no tap target).
   Actions now live on the dedicated ⋮ button (.vn-more) at the row's end. */
.vn {
  font-size: 11px; font-weight: 700;
  color: var(--rd-verse-num); opacity: 0.9;
  min-width: 30px; width: 30px;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px;
  flex-shrink: 0;
  user-select: none;
  background: transparent;
}
.vn-num { line-height: 1; }
/* Small star marker, shown only when the verse is bookmarked */
.vn-star {
  font-size: 8px;
  color: var(--rd-accent);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.vn.is-bookmarked .vn-star { opacity: 1; }

/* Dedicated "⋮" more-actions button — always visible per verse row */
.vn-more {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--rd-verse-num);
  opacity: 0.6;
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.vn-more:hover  { opacity: 1; background: var(--rd-word-hover); }
.vn-more:active { transform: scale(0.9); }

.vtc {
  font-family: var(--chr-font);
  font-weight: var(--chr-weight);
  font-size: calc(13px * var(--text-scale)); line-height: 1.9;
  color: var(--rd-text); flex: 1;
  padding-left: 10px;
}

.w {
  cursor: pointer;
  border-radius: 4px; padding: 1px 2px; display: inline;
  transition: background 0.06s, color 0.06s;
  position: relative;
}

.w:hover   { background: var(--rd-word-hover); }
.w.played  { color: var(--rd-text-played); }
.w.current {
  background: var(--rd-hl-bg); color: var(--rd-hl-text);
  border-radius: 5px; padding: 2px 5px; font-weight: 700;
  box-shadow: 0 1px 6px var(--rd-hl-shadow);
}
.w.pending { color: var(--rd-text-pending); }

.w.dict-found   { font-weight: 700; }
.w.dict-missing { font-weight: 400; opacity: 0.82; }

@keyframes lpFlash {
  0%   { background: rgba(255,193,7,0.55); }
  100% { background: transparent; }
}

.long-press-flash { animation: lpFlash 0.3s ease-out; }

/* Flash a whole verse row when jumped to from the Verse pill */
@keyframes verseFlash {
  0%, 40% { background: var(--rd-hl-bg, rgba(255,193,7,0.55)); }
  100%    { background: transparent; }
}
.vb.verse-flash { animation: verseFlash 1.2s ease-out; }

#dictBubble {
  display: none;
  position: absolute;
  z-index: 3000;
  min-width: 260px;
  /* Wide enough for "Play from here" + "view more" side by side on ANY
     font. Futura is absent off Apple platforms, and the wider fallback
     face pushed the row past the old 300px cap — which "view more" then
     absorbed by wrapping to two lines. Capped to the viewport so the
     card still fits on a narrow phone. */
  max-width: min(340px, calc(100vw - 16px));
  background: #F7F3EE;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  padding: 18px 20px 14px;
  transform: translateY(-100%) translateY(-12px);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

#dictBubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  /* Sits over the tapped word, which is not the middle of the card once the
     card has been clamped to the viewport. showBubble() sets --arrow-x; the
     50% fallback keeps it centred if anything fails to set it. */
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #F7F3EE;
  border-bottom: 0;
}

.db-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.db-label {
  font-size: 11px;
  color: #9E9A95;
  min-width: 62px;
  text-align: right;
  font-family: 'Futura', sans-serif;
  letter-spacing: 0.02em;
}

.db-val {
  font-size: 15px;
  color: #1A1714;
  font-weight: 400;
  font-family: 'Noto Sans Cherokee', 'Futura', sans-serif;
  line-height: 1.3;
}

.db-prac {
  font-family: 'Futura', 'Arimo', sans-serif;
}

.db-eng {
  font-family: 'Futura', 'Arimo', sans-serif;
  color: #333333;
}

.db-more {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  width: fit-content;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-family: 'Futura', 'Arimo', sans-serif;
  padding: 8px 20px;
  border-radius: 20px;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.01em;
}

.db-more:hover { background: var(--brand-dark); }

/* Action row — "Play from here" + "view more", side by side */
.db-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  /* No effect while both buttons fit, which is the normal case. On a very
     narrow phone with a wide fallback font, "view more" drops to its own
     line whole instead of overflowing the card. */
  flex-wrap: wrap;
}

.db-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-family: 'Futura', 'Arimo', sans-serif;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.15s;
}

.db-play:hover  { background: var(--brand-dark); }
.db-play:active { transform: scale(0.97); }
.db-play i { font-size: 11px; }

/* When both buttons show, reset the pill's auto-margin so the flex row
   controls layout; "view more" becomes the lighter secondary action. */
.db-actions .db-more {
  margin-top: 0;
  margin-left: 0;
  /* Sized to its label and never shrinks: .db-play is white-space:nowrap
     so it cannot give way, which made this the only flexible item in the
     row and left it wrapping whenever space ran short. "Play from here"
     takes the slack instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 7px 16px;
}
.db-actions .db-more:hover {
  background: var(--brand);
  color: #ffffff;
}

/* Phonetic hover tooltip — a single floating element on <body> (see
   showPhonTip in the JS). position:fixed + top z-index means it renders
   above everything and is never clipped by .ptop's overflow. Positioned
   entirely from JS, so no anchor arrow / transform here. */
#phonTip {
  display: none;
  position: fixed;
  background: #1A0800;
  color: var(--gold-bright);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4000;   /* above every other layer (dict bubble is 3000) so the phonetic tooltip is never covered */
  border: 1px solid rgba(255,255,255,0.15);
}

.pbot {
  background-color: var(--panel-bg);
  display: flex; 
  flex-direction: column;
  /* In-flow flex child (not an overlay) so opening it shrinks the
     Cherokee panel above instead of covering it. Collapsed = just the
     44px header; open = a share of the column via flex-basis. */
  flex: 0 0 44px;
  width: 100%;
  overflow: hidden;
  transition: flex-basis 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1px solid var(--divider);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  z-index: 10;
}

.pbot.drawer-open {
  flex: 0 0 50%;
  overflow-y: auto;
}

.plblt {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 18px;
  position: sticky; top: 0;
  background: rgba(250,250,248,0.97);
  backdrop-filter: blur(4px);
  z-index: 2;
  border-bottom: 0.5px solid var(--divider);
  cursor: pointer;
  height: 44px;
  flex-shrink: 0;
}

.drawer-icon {
  color: var(--tm);
  font-size: 14px;
  transition: transform 0.3s ease;
}

.pbot.drawer-open .drawer-icon {
  transform: rotate(180deg);
}

.pldott {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tm); opacity: 0.6; flex-shrink: 0;
}

.pltxtt {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--tm);
}

.ven {
  padding: 8px 18px;
  display: flex; gap: 10px; align-items: flex-start;
  transition: background 0.2s, border-color 0.2s, padding-left 0.2s;
  border-left: 2px solid transparent;
  margin: 2px 0;
}

/* English verses are read-only — no hover/press affordances, no pointer
   cursor. The .ven.active rule below is NOT a tap affordance: it marks the
   verse currently being narrated (set from updateUI during playback) so
   readers can follow along. Removing it would break current-verse sync. */
.ven.active {
  background: rgba(255,193,7,0.08);
  border-left-color: var(--gold);
  padding-left: 16px;
}

.vne {
  font-size: 10px; font-weight: 600;
  color: var(--gold); min-width: 16px; padding-top: 4px;
  text-align: right; flex-shrink: 0;
}

.vte {
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
  font-size: calc(13px * var(--text-scale)); line-height: 1.7; color: var(--text-dark); flex: 1;
}

.audio-panel {
  background-color: #2C2829;
  flex-shrink: 0;
  padding: 13px 20px 30px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Track row: [0:33] ──●────── [7:21] ──────────────────────── */
.ww {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  cursor: default;
  overflow: visible;
}

.wc { display: none; } /* canvas no longer used */

.ww-time-start,
.ww-time-end {
  font-size: 12px;
  font-family: 'Futura', 'Arimo', sans-serif;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 34px;
  user-select: none;
}
.ww-time-end { text-align: right; }

/* The clickable track container */
.ww-track {
  flex: 1;
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  cursor: pointer;
}

/* Filled (played) portion */
.po {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: #a71c20;
  border-radius: 99px;
  pointer-events: none;
  transition: width 0.05s linear;
}

/* Circular thumb */
.pn {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.05s linear;
  box-shadow: 0 1px 5px rgba(0,0,0,0.35);
}

.scrub-hover {
  position: absolute; top: -26px;
  background: #2C2829; color: #ffffff;
  font-size: 9px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity 0.1s;
  white-space: nowrap; border: 1px solid rgba(255,255,255,0.1);
}
.ww-track:hover .scrub-hover { opacity: 1; }

/* ── Controls row ───────────────────────────────────────────── */
.trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.tb {
  background: transparent; border: none; cursor: pointer;
  padding: 6px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background 0.12s;
}
.tb:hover { background: rgba(255,255,255,0.12); }
.tb svg {
  width: 22px; height: 22px; fill: none; stroke: #ffffff;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;
}

/* Large centred play button */
.pbtn {
  width: 62px; height: 62px; border-radius: 50%;
  background: #f1a91c;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s;
  box-shadow: 0 4px 18px rgba(122,18,21,0.55);
}
.pbtn:hover  { background: #f1a91c; }
.pbtn:active { transform: scale(0.93); }
.pbtn svg   { width: 24px; height: 24px; fill: #ffffff; stroke: none; display: block; }

.tlbl { display: none; }
.sp   { display: none; }

.pill {
  font-size: 12px;
  letter-spacing: 0.03em; color: #1a1a1a;
  border: 1.5px solid rgba(0,0,0,0.15); border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
  background: rgba(255,255,255,0.92);
  transition: all 0.15s; white-space: nowrap;
  font-family: 'Futura', 'Arimo', sans-serif;
  display: flex; align-items: center; gap: 6px;
}
.pill:hover { background: #ffffff; }
.pill.on {
  color: #ffffff; border-color: #ffc106; background: rgb(139 99 22);
}

/* Playback speed cycles 1× → 1.5× → 2× → 0.75× → 0.5×, and letting the
   label size the pill made it jump ~20px between steps. Pin it to the
   Loop pill's width; the horizontal padding is trimmed because "0.75×"
   is wider than "Loop". min-width, not width, so an unusually wide font
   grows the pill instead of clipping the label. */
#spdB {
  min-width: 68px;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
}

.pill-text {
  font-size: 12px;
  letter-spacing: 0.03em; color: #1a1a1a;
  border: 1.5px solid rgba(0,0,0,0.15); border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
  background: rgba(255,255,255,0.92);
  transition: all 0.15s; white-space: nowrap;
  font-family: 'Futura', 'Arimo', sans-serif;
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
}
.pill-text:hover { background: #ffffff; }
.pill-text.on {
  color: #ffffff; border-color: #ffc106; background: rgb(139 99 22);
}

/* ── Text size control row ───────────────────────────────────── */
.jump-to-verse {
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    padding-left: 15px;
    /* padding-bottom: 15px; */
    font-size: 11px;
    text-transform: uppercase;
    background: #a81c1f;
    color: #ffffff;
}

.text-size-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  justify-content: space-between;
  flex-direction: row;
  background: #ffffff;
}
.text-size-label {
  font-size: 11px;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.text-size-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: #f5f5f5;
  color: #1a1a1a;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
  line-height: 1;
}
.text-size-btn:hover  { background: #e8e8e8; }
.text-size-btn:active { transform: scale(0.92); }

/* ── Theme picker (Options → Reading theme) ─────────────────── */
.theme-control {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  justify-content: space-between;
}
.theme-swatch {
  flex: 1;
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Futura', 'Arimo', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-swatch .tsw-chip {
  width: 100%;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--chr-font);
  font-size: 15px;
  font-weight: 700;
}
.theme-swatch[data-theme-val="default"] .tsw-chip { background: #A71C20; color: #ffc107; }
.theme-swatch[data-theme-val="light"]   .tsw-chip { background: #ffffff; color: #1a1a1a; }
.theme-swatch[data-theme-val="sepia"]   .tsw-chip { background: #f4ecd8; color: #2b2415; }
.theme-swatch[data-theme-val="dark"]    .tsw-chip { background: #0e0e0f; color: #ffffff; }
.theme-swatch.active {
  border-color: #A71C20;
  box-shadow: 0 0 0 2px rgba(167,28,32,0.25);
}

/* ── Font picker (Options → Cherokee font) ──────────────────── */
.font-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
  background: #ffffff;
}
.font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.font-option:hover { background: #faf7f7; }
.font-option.active {
  border-color: #A71C20;
  box-shadow: 0 0 0 2px rgba(167,28,32,0.2);
}
.font-option .fo-name {
  font-family: 'Futura', 'Arimo', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.font-option .fo-note {
  display: block;
  font-size: 10px;
  color: #767676;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.font-option .fo-sample {
  font-size: 20px;
  color: #1a1a1a;
  flex-shrink: 0;
  line-height: 1;
}
.text-size-preview {
  flex: 1;
  font-family: var(--chr-font);
  font-weight: var(--chr-weight);
  font-size: calc(13px * var(--text-scale));
  color: #1a1a1a;
  text-align: center;
  letter-spacing: 0.02em;
  transition: font-size 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loading-msg {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: rgba(255,255,255,0.4);
  font-size: 13px; letter-spacing: 0.06em;
}
/* BOTTOM NAVIGATION */
.fixed-bottom-title img { width: 30px; height: 24px; margin-bottom: 0.25rem; }
.fixed-bottom-title.active-page i { color: #AD1D35; }
.fixed-bottom-title.active-page img { color: #AD1D35; }
.fixed-bottom-nav { position: fixed; bottom: 0; z-index: 1000; background-color: #fff; padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; border-top-width: 1px; border-color: #e5e7eb; flex-wrap: nowrap; box-shadow: 0px 1px 3px; }
.fixed-bottom-title { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; margin: 0 0.2rem; color: #9C9C9C; padding: 0.2rem; border-radius: 0.375rem; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 200ms; white-space: nowrap; text-decoration: none; }
.fixed-bottom-title.active-page { color: #AD1D35; }
.fixed-bottom-title:hover { color: #AD1D35; }
.fixed-bottom-title i { font-size: 1.5rem; margin-bottom: 0.25rem; }
.fixed-bottom-title span { font-size: 0.6rem; }


.fixed-bottom-title.active-page svg,
.ni.active svg { stroke: #AD1D35; }
.fixed-bottom-title:hover,
.ni:hover { color: #AD1D35; }
.fixed-bottom-title:hover svg,
.ni:hover svg { stroke: #AD1D35; }
.nl { color: inherit; }

.verse-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 280px;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.18);
  z-index: 1100;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

.verse-menu.open { transform: translateX(0); }

.vm-head {
  background: var(--brand); padding: 16px 18px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between;
  background-image: url('pattern-background-02.svg');
}

.vm-title {
  color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.vm-close {
  background: none; border: none;
  color: #ffffff; font-size: 30px; cursor: pointer;
  line-height: 1; padding: 2px;
}

.vm-list { overflow-y: auto; flex: 0 1 auto; max-height: 50vh; }

.vm-item {
  padding: 12px 18px;
  border-bottom: 0.5px solid var(--divider);
  cursor: pointer; display: flex; gap: 12px; align-items: flex-start;
  transition: background 0.15s;
}

.vm-item:hover   { background: #fdf4f4; }
.vm-item.current { background: rgba(255,193,7,0.08); border-left: 2px solid var(--gold); }

.vm-vn {
  font-size: 10px; font-weight: 600;
  color: var(--gold); min-width: 24px; padding-top: 2px;
}

.vm-text {
  font-family: 'Noto Sans Cherokee', 'Futura', 'Arimo', sans-serif;
  font-size: calc(13px * var(--text-scale)); color: var(--ts); line-height: 1.5;
}

.vm-overlay {
  position: fixed; inset: 0; z-index: 1099; display: none;
}

.vm-overlay.open { display: block; }

.history-sidebar {
  position: fixed;
  top: 0; right: -400px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  padding: 20px;
  padding-top: 40px;
  z-index: 1200;
  width: 300px;
}

.history-sidebar.open { right: 0; }
.history-sidebar h2 { color: #333; margin-bottom: 12px; }

#closeHistoryButton {
  position: absolute; top: 15px; right: 10px;
  background: none; border: none; font-size: 24px; cursor: pointer; color: #333;
}

#closeHistoryButton:hover { color: #8a8573; }
#historyList { list-style: none; padding: 0; }
#historyList li { margin-bottom: 10px; border-bottom: 1px dashed #ddd; padding-bottom: 8px; }
#historyList li a { color: #333; text-decoration: none; font-size: 16px; }
#historyList li a:hover { text-decoration: underline; }

.Favorites-sidebar {
  position: fixed;
  top: 0; right: -300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  padding: 20px;
  padding-top: 40px;
  z-index: 1200;
  width: 300px;
}

.Favorites-sidebar.open { right: 0; }
.Favorites-sidebar h2 { color: #333; margin-bottom: 12px; }

#closeFavoritesButton {
  position: absolute; top: 15px; right: 10px;
  background: none; border: none; font-size: 24px; cursor: pointer; color: #333;
}

#closeFavoritesButton:hover { color: #005bb5; }
#FavoritesList { list-style: none; padding: 0; }
#FavoritesList li { margin-bottom: 10px; border-bottom: 1px dashed #ddd; padding-bottom: 8px; }

button {
  cursor: pointer;
  font-family: 'Futura', 'Arimo', 'Noto Sans Cherokee', sans-serif;
}

@media (max-width: 640px) {
  .split {
    display: flex;
  }
}

.ptop::-webkit-scrollbar,
.pbot::-webkit-scrollbar,
.vm-list::-webkit-scrollbar { width: 4px; }
.ptop::-webkit-scrollbar-track  { background: transparent; }
.ptop::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 2px; }
.pbot::-webkit-scrollbar-track  { background: transparent; }
.pbot::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.1); border-radius: 2px; }

body {
  display: flex;
  flex-direction: column;
}

.split {
  flex: 1;
  min-height: 0;
}

/* =============================================================
   LANDSCAPE — side-by-side panels
   Placed at end of file so these rules win over portrait styles
   above (same specificity, last-rule-wins).
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {

  .app-header   { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .hpills       { margin-top: 4px; }
  .audio-panel {padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));}
  .pbtn {width: 35px; height: 35px;}
  .trow {padding-bottom: 10px;}
  .pbtn svg {width: 18px; height: 18px;}

  body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Split row fills all space between selector and audio panel */
  .split {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  /* Cherokee — left column */
  .ptop {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 8px;
    border-right: 1px solid rgba(255,255,255,0.1);
  }

  /* English — right column, fully visible, no drawer behaviour */
  .pbot {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    height: 100%;
    flex: 1;
    overflow-y: auto;
    overflow: hidden auto;
    border-top: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  /* Prevent the portrait drawer flex-basis from leaking into side-by-side */
  .pbot,
  .pbot.drawer-open {
    height: 100%;
    flex: 1;
    overflow-y: auto;
  }

  /* Remove drawer chevron — not needed side by side */
  .pbot .drawer-icon { display: none; }

  /* English label header — sticky at top of right column */
  .pbot .plblt {
    position: sticky;
    top: 0;
    cursor: default;
  }

  /* Audio panel full width at bottom */
  .audio-panel {
    flex-shrink: 0;
    width: 100%;
  }
}