/* ==========================================================================
   UECF.NET — Daily Bible Promise: Multimedia enhancement stylesheet
   --------------------------------------------------------------------------
   Everything in this file is NEW. The original card styling (.dbp-card,
   .dbp-verses, .dbp-reflection, .dbp-prayer, .dbp-actions, .dbp-find, ...)
   stays exactly as it was, inline in index.html's own <style> block, and is
   never touched or overridden here. This file only adds rules for the new
   LISTEN / WATCH / PRAY flow, the reflection/application/prayer add-ons, and
   the expandable secondary sections (Context, Translations, Related,
   Categories, Search, Calendar, Saved, Share, Layout, Day part).

   Reuses the site's existing CSS custom properties (--ink, --gold,
   --gold-soft, --cream, --maroon, --teal, --font-display, --font-body,
   --font-te), defined on :root in index.html, so colors and type stay in
   sync with the rest of the page automatically.
   ========================================================================== */

/* -------------------------------------------------------------- utility -- */
.dbp-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.dbp-hidden{display:none !important;}

/* --------------------------------------------------------- NEW PROMISE --- */
/* "New Promise ↻" is the single most prominent action under the card
   content — its own centered row, well above Find/Save/Share, noticeably
   bigger than every other button on the card. */
.dbp-actions-primary{
  display:flex; justify-content:center; margin:18px auto 12px;
}
.dbp-btn-hero{
  font-size:1.05rem;
  padding:16px 36px;
  box-shadow:0 10px 26px rgba(199,154,61,.38);
}
.dbp-btn-hero:hover, .dbp-btn-hero:focus-visible{
  box-shadow:0 14px 32px rgba(199,154,61,.46);
}

/* ------------------------------------------------------------ AUDIO UI -- */
.dbp-audio-panel{
  max-width:620px; margin:0 auto 18px; padding:14px 16px 15px;
  border-radius:12px; border:1px solid rgba(228,198,133,.22);
  background:rgba(8,15,30,.5);
}
.dbp-audio-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color:var(--gold-soft); margin-bottom:10px;
}
.dbp-audio-close{
  background:none; border:none; color:var(--gold-soft); cursor:pointer;
  font-size:1rem; line-height:1; padding:2px 4px; border-radius:4px;
}
.dbp-audio-close:hover, .dbp-audio-close:focus-visible{background:rgba(228,198,133,.15);}
.dbp-audio-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.dbp-audio-row:last-child{margin-bottom:0;}
.dbp-audio-transport{display:flex; gap:8px;}
.dbp-audio-control{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  background:rgba(251,247,238,.08); border:1px solid rgba(251,247,238,.22);
  color:var(--cream); font-size:1rem; cursor:pointer;
  transition: background .18s ease, border-color .18s ease;
}
.dbp-audio-control:hover, .dbp-audio-control:focus-visible{
  background:rgba(228,198,133,.18); border-color:var(--gold-soft);
}
.dbp-audio-control[aria-pressed="true"]{border-color:var(--gold); background:rgba(228,198,133,.22);}
.dbp-audio-field{display:flex; align-items:center; gap:6px; font-size:.78rem; color:#D9DFEC;}
.dbp-audio-field label{white-space:nowrap;}
.dbp-select, .dbp-audio-field select{
  background:rgba(251,247,238,.08); color:var(--cream);
  border:1px solid rgba(251,247,238,.22); border-radius:6px;
  padding:6px 8px; font-size:.8rem; font-family:var(--font-body);
}
.dbp-range{width:100px; accent-color:var(--gold);}
.dbp-audio-status{
  font-size:.75rem; color:#C7CEDD; font-style:italic; min-height:1.1em;
}
/* "Play Full Devotional" (or whatever "Play" mode is selected — see the
   mode pills above) is the single most prominent action inside the panel —
   its own full-width row, solid gold, bigger type/padding than the other
   controls. */
.dbp-audio-full-btn-prominent{
  display:flex; width:100%; justify-content:center;
  padding:14px 20px; font-size:.95rem; margin-bottom:14px;
  box-shadow:0 8px 20px rgba(199,154,61,.3);
}

/* Distinguishes a real recorded voice from a temporary browser-speech
   fallback (spec: "clearly distinguish professional audio from temporary
   browser TTS") — also doubles as the friendly "being prepared" message
   when nothing has been generated for this promise yet, so the player
   never just silently degrades without saying why. */
.dbp-audio-quality{
  font-size:.72rem; color:var(--gold-soft); text-align:center;
  margin:0 0 10px; min-height:1.2em;
}

/* Language / Voice / Play-mode pickers — three short rows of pill toggle
   buttons, each acting as a small radio group (aria-pressed marks the
   active pill). Large enough to be comfortable touch targets on a phone
   (spec: "no tiny controls"), and wrap naturally rather than scrolling
   horizontally on narrow screens. */
.dbp-audio-picker{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.dbp-audio-picker-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:#B9C2D6; min-width:52px;
}
.dbp-audio-pills{display:flex; gap:8px; flex-wrap:wrap;}
.dbp-audio-pills-mode{flex:1 1 100%;}
.dbp-audio-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:8px 14px; border-radius:999px;
  background:rgba(251,247,238,.06); border:1px solid rgba(251,247,238,.22);
  color:var(--cream); font-size:.78rem; font-family:var(--font-body); cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dbp-audio-pill:hover, .dbp-audio-pill:focus-visible{border-color:var(--gold-soft);}
.dbp-audio-pill[aria-pressed="true"]{
  background:var(--gold); border-color:var(--gold); color:#1B1300; font-weight:700;
}

/* Seek/progress — only shown while a real single audio file (not a
   multi-step TTS sequence) is playing; see attachProgressTracking() in
   daily-promises.js. The range input doubles as both the visual bar and
   the seek control. */
.dbp-audio-progress-wrap{
  display:flex; flex-direction:column; gap:4px; margin-bottom:10px;
}
.dbp-audio-progress{
  width:100%; accent-color:var(--gold); height:6px; cursor:pointer;
}
.dbp-audio-time{
  font-size:.72rem; color:#C7CEDD; text-align:right; font-variant-numeric:tabular-nums;
}

.dbp-audio-row-actions{justify-content:flex-end;}
.dbp-audio-download{text-decoration:none;}
.dbp-audio-download[hidden]{display:none;}

.dbp-bg-audio-row{
  border-top:1px dashed rgba(228,198,133,.2); margin-top:10px; padding-top:10px;
}
/* .dbp-audio-row sets display:flex, which (being an author-origin rule)
   would otherwise beat the browser's default [hidden]{display:none} even
   though hidden's the more specific instruction — so hidden is restated
   here at higher specificity for any row that also carries this class. */
.dbp-audio-row[hidden]{display:none;}

/* ------------------------------------------------------------ VIDEO UI -- */
.dbp-video-section{max-width:700px; margin:0 auto 18px;}
.dbp-video-frame{
  position:relative; border-radius:12px; overflow:hidden;
  background:#000; aspect-ratio:16/9;
  border:1px solid rgba(228,198,133,.25);
}
.dbp-video-poster{width:100%; height:100%; object-fit:cover; opacity:.75;}
.dbp-video-poster-fallback{
  width:100%; height:100%;
  background:linear-gradient(135deg, #101B31, #2C3E60);
}
.dbp-video-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px;
  border-radius:999px; border:2px solid var(--gold-soft);
  background:rgba(8,15,30,.65); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.4rem;
}
.dbp-video-play:hover, .dbp-video-play:focus-visible{background:rgba(199,154,61,.55);}
.dbp-video-embed{width:100%; height:100%; border:0; display:block;}
.dbp-video-fullscreen{
  position:absolute; right:10px; bottom:10px;
  background:rgba(8,15,30,.6); color:var(--cream); border:1px solid rgba(251,247,238,.3);
  border-radius:6px; width:34px; height:34px; cursor:pointer;
}
.dbp-video-caption{
  text-align:center; font-size:.78rem; color:#C7CEDD; margin-top:8px;
}

/* --------------------------------------------------------- GALLERY UI -- */
.dbp-gallery-section{max-width:760px; margin:0 auto 18px;}
.dbp-gallery-heading{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color:var(--gold-soft); margin-bottom:10px; text-align:center;
}
.dbp-gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px;
}
.dbp-gallery-item{
  position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(228,198,133,.22);
  background:rgba(251,247,238,.05); cursor:pointer; padding:0; aspect-ratio:1/1;
}
.dbp-gallery-item img{width:100%; height:100%; object-fit:cover; display:block;}
.dbp-gallery-item-video{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;}
.dbp-gallery-video-icon{font-size:1.6rem; color:var(--gold-soft);}
.dbp-gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:var(--cream); font-size:.68rem; padding:14px 8px 6px; text-align:left;
}

.dbp-lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(4,8,16,.92);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
body.dbp-lightbox-open{overflow:hidden;}
.dbp-lightbox-stage{max-width:min(92vw, 900px); max-height:80vh;}
.dbp-lightbox-stage img, .dbp-lightbox-stage video{
  max-width:100%; max-height:80vh; border-radius:8px; display:block; margin:0 auto;
}
.dbp-lightbox-caption{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:var(--cream); font-size:.85rem;
}
.dbp-lightbox-close, .dbp-lightbox-prev, .dbp-lightbox-next{
  position:absolute; background:rgba(251,247,238,.1); border:1px solid rgba(251,247,238,.3);
  color:var(--cream); border-radius:999px; cursor:pointer; font-size:1.2rem;
  width:44px; height:44px;
}
.dbp-lightbox-close{top:18px; right:18px;}
.dbp-lightbox-prev{left:18px; top:50%; transform:translateY(-50%);}
.dbp-lightbox-next{right:18px; top:50%; transform:translateY(-50%);}
.dbp-lightbox-close:hover, .dbp-lightbox-prev:hover, .dbp-lightbox-next:hover{background:rgba(228,198,133,.25);}

/* ------------------------------------------------------- LIFE APPLICATION */
.dbp-life-app{
  max-width:62ch; margin:0 auto 16px; padding:12px 16px 13px;
  border-radius:10px; border:1px solid rgba(47,93,98,.4); border-left:3px solid var(--teal);
  background:linear-gradient(180deg, rgba(47,93,98,.16) 0%, rgba(47,93,98,.05) 100%);
}
.dbp-life-app-label{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700;
  color:#9FD6D8; margin-bottom:7px;
}
.dbp-life-app-text{
  text-align:center; color:#E6E2D6; font-family:var(--font-display); font-style:italic;
  font-size:clamp(.86rem, 1.35vw, .95rem); line-height:1.6;
}

/* --------------------------------------------------------- DRAWERS/ACCORDION */
.dbp-drawers{max-width:700px; margin:20px auto 0; display:grid; gap:10px;}
.dbp-drawers details{
  background:rgba(251,247,238,.04); border:1px solid rgba(228,198,133,.18);
  border-radius:10px; overflow:hidden;
}
.dbp-drawers details[open]{border-color:rgba(228,198,133,.4);}
.dbp-drawers summary{
  cursor:pointer; list-style:none; padding:13px 16px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:var(--cream);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  user-select:none;
}
.dbp-drawers summary::-webkit-details-marker{display:none;}
.dbp-drawers summary::after{
  content:"+"; color:var(--gold-soft); font-size:1.2rem; font-weight:400; flex:none;
}
.dbp-drawers details[open] summary::after{content:"–";}
.dbp-drawers .dbp-drawer-body{padding:0 16px 16px; color:#D9DFEC; font-size:.88rem; line-height:1.6;}

/* Read Full Context */
.dbp-context-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.dbp-context-verses{display:grid; gap:6px; margin-bottom:8px;}
.dbp-context-verse{padding:6px 0; border-bottom:1px dashed rgba(251,247,238,.1);}
.dbp-context-verse.dbp-context-verse-focus{
  background:rgba(228,198,133,.08); border-radius:6px; padding:6px 8px;
  border-bottom-color:transparent;
}
.dbp-context-vnum{color:var(--gold-soft); font-weight:700; margin-right:6px; font-size:.78rem;}

/* Compare Translations */
.dbp-translation-row{
  display:grid; gap:3px; padding:8px 0; border-bottom:1px dashed rgba(251,247,238,.1);
}
.dbp-translation-row:last-child{border-bottom:none;}
.dbp-translation-label{color:var(--gold-soft); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;}

/* Related Promises */
.dbp-related-list{display:grid; gap:8px; list-style:none; margin:0; padding:0;}
.dbp-related-item{
  width:100%; text-align:left; background:rgba(251,247,238,.04);
  border:1px solid rgba(251,247,238,.12); border-radius:8px; padding:9px 12px;
  color:var(--cream); cursor:pointer; font-family:var(--font-body); font-size:.85rem;
}
.dbp-related-item:hover, .dbp-related-item:focus-visible{border-color:var(--gold-soft); background:rgba(228,198,133,.1);}
.dbp-related-item .dbp-related-ref{color:var(--gold-soft); font-weight:700; display:block; margin-bottom:2px; font-size:.78rem;}

/* Categories */
.dbp-categories-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px;}
.dbp-category-btn{
  display:flex; align-items:center; gap:6px; justify-content:center;
  padding:9px 8px; border-radius:8px; border:1px solid rgba(251,247,238,.14);
  background:rgba(251,247,238,.04); color:var(--cream); font-size:.8rem; cursor:pointer;
}
.dbp-category-btn:hover, .dbp-category-btn:focus-visible{border-color:var(--gold-soft); background:rgba(228,198,133,.12);}
.dbp-category-btn[aria-pressed="true"]{border-color:var(--gold); background:rgba(228,198,133,.2);}

/* Search */
.dbp-search-row{display:flex; gap:8px; margin-bottom:10px;}
.dbp-search-row input{flex:1 1 auto; min-width:0;}
.dbp-search-results{display:grid; gap:6px; list-style:none; margin:0; padding:0;}

/* Calendar / Archive */
.dbp-calendar-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.dbp-calendar-row input[type="date"]{
  background:rgba(8,15,30,.4); color:var(--cream); border:1px solid rgba(251,247,238,.22);
  border-radius:6px; padding:6px 8px; font-family:var(--font-body); font-size:.82rem;
  color-scheme: dark;
}
.dbp-calendar-status{font-size:.78rem; color:#9FD6D8; font-style:italic;}

/* Saved Promises */
.dbp-saved-list{display:grid; gap:8px; list-style:none; margin:0 0 10px; padding:0;}
.dbp-saved-empty{color:#9AA6BC; font-style:italic; font-size:.85rem;}

/* ---------------------------------------------------------------- SHARE -- */
.dbp-share-panel{
  max-width:520px; margin:14px auto 0; padding:14px 16px 15px;
  border-radius:12px; border:1px solid rgba(228,198,133,.22); background:rgba(8,15,30,.5);
}
.dbp-share-grid{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:10px;}
.dbp-share-grid .dbp-btn{padding:8px 14px; font-size:.78rem;}
.dbp-share-image-row{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
  border-top:1px dashed rgba(228,198,133,.2); padding-top:10px;
}
.dbp-share-image-preview{
  display:block; max-width:220px; margin:10px auto 0; border-radius:8px;
  border:1px solid rgba(228,198,133,.3);
}
.dbp-share-status{text-align:center; font-size:.75rem; color:#9FD6D8; font-style:italic; margin-top:8px; min-height:1.1em;}

/* -------------------------------------------------------- LAYOUT MODES -- */
.dbp-mode-row{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:16px auto 0; max-width:560px;
}
.dbp-mode-btn, .dbp-daypart-btn{
  padding:6px 12px; border-radius:999px; font-size:.72rem; font-weight:600;
  border:1px solid rgba(251,247,238,.18); background:rgba(251,247,238,.04);
  color:#D9DFEC; cursor:pointer;
}
.dbp-mode-btn[aria-pressed="true"], .dbp-daypart-btn[aria-pressed="true"]{
  border-color:var(--gold); color:var(--gold-soft); background:rgba(228,198,133,.15);
}
.dbp-daypart-row{
  display:flex; gap:6px; justify-content:center; margin:8px auto 0; max-width:560px;
}

/* Layout mode behavior: "Listening"/"Media" modes force the audio panel or
   video section open (daily-promises.js adds .dbp-force-open and clears
   the `hidden` attribute directly). Reading/Prayer modes don't hide them —
   the Listen/Watch buttons already control that with the `hidden`
   attribute, and a CSS rule here would fight with a manual click. */

/* Safety net: several elements above are toggled purely via the `hidden`
   attribute (JS never adds/removes a "-hidden" class for them), but also
   carry a class that sets `display` for when they ARE shown — and an
   author-origin `display` declaration otherwise beats the browser's own
   [hidden]{display:none} regardless of selector specificity. Restating it
   here, scoped to the feature and !important, means any element in this
   section that is marked hidden is always actually hidden, present or
   future, without having to special-case each class one at a time. */
#daily-promises [hidden]{display:none !important;}

/* ------------------------------------------------------------- MOBILE --- */
@media (max-width: 560px){
  .dbp-btn-hero{width:100%; justify-content:center;}
  .dbp-audio-row{gap:8px;}
  .dbp-range{width:80px;}
  .dbp-share-grid .dbp-btn{flex:1 1 42%;}
  /* Audio panel on a phone: pills wrap onto their own full-width rows so
     nothing is ever squeezed below a comfortable tap size, and the action
     row (Download/Share) stacks instead of crowding two buttons together. */
  .dbp-audio-picker{align-items:flex-start; flex-direction:column; gap:6px;}
  .dbp-audio-pills{width:100%;}
  .dbp-audio-pill{flex:1 1 auto; min-width:0;}
  .dbp-audio-row-actions{flex-direction:column; align-items:stretch;}
  .dbp-audio-row-actions .dbp-btn{width:100%; justify-content:center;}
  .dbp-audio-control{width:44px; height:44px;} /* 44px = the accepted minimum comfortable touch target */
}

/* iPhone safe-area: the audio panel can sit near the bottom of very short
   viewports (small phones, landscape) — pad for the home-indicator inset
   so the action row is never obscured by it. */
.dbp-audio-panel{
  padding-bottom: max(15px, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce){
  .dbp-primary-btn, .dbp-audio-control, .dbp-video-play{transition:none !important;}
}