/* Extracted from inline style="" attributes. Do not re-inline:
   the CSP below forbids inline styles once this is complete. */

/* ── Utilities (shared vocabulary) ── */
.ai-center{align-items:center}
.ai-start{align-items:flex-start}
.d-flex{display:flex}
.d-grid{display:grid}
.d-inline{display:inline}
.d-none{display:none}
.ff-serif{font-family:'Playfair Display',serif}
.flex-1{flex:1}
.fs-72{font-size:.72rem}
.fs-80{font-size:.8rem}
.fs-85{font-size:.85rem}
.fs-88{font-size:.88rem}
.fs-95{font-size:.95rem}
.fw-400{font-weight:400}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.jc-between{justify-content:space-between}
.jc-center{justify-content:center}
.m-0{margin:0}
.mb-1{margin-bottom:.2rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mt-3{margin-top:.75rem}
.no-underline{text-decoration:none}
.shrink-0{flex-shrink:0}
.ta-center{text-align:center}
.ta-left{text-align:left}
.txt-danger{color:#dc3545}
.txt-gold{color:var(--gold)}
.txt-inherit{color:inherit}
.txt-muted{color:var(--text3)}
.txt-soft{color:var(--text2)}
.txt-white{color:#fff}
.uppercase{text-transform:uppercase}
.wrap{flex-wrap:wrap}

/* ── Page-scoped components ── */

/* site-footer.php */
.site-footer-1{gap:1rem}
.site-footer-2{color:rgba(212,201,184,.4);transition:color .18s}
.site-footer-3{color:rgba(212,201,184,.4);transition:color .18s}
.site-footer-4{color:rgba(212,201,184,.4);transition:color .18s}

/* about.php */
.about-1{grid-template-columns:1fr 1fr;gap:4rem}
.about-2{line-height:1.75}
.about-3{line-height:1.75}
.about-4{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.about-5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem}
.about-6{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1rem}
.about-7{font-size:2.2rem;margin-bottom:.35rem}
.about-8{font-size:.83rem}
.about-9{padding:.75rem 1.75rem}
.about-10{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:.75rem 1.75rem}

/* app-header.php */
.app-header-1{justify-content:center;gap:.35rem .75rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.06)}

/* app-bible.php */
.app-bible-1{margin-bottom:.9rem}
.app-bible-2{font-size:1.3rem}
.app-bible-3{font-size:.78rem}
.app-bible-4{max-height:360px;overflow-y:auto;flex-direction:column;gap:.4rem}
.app-bible-5{padding:.5rem}

/* app-bookmarks.php */
.app-bookmarks-1{padding:3rem 1rem}
.app-bookmarks-2{font-size:.78rem;letter-spacing:.07em;margin-bottom:.6rem}
.app-bookmarks-3{font-size:.73rem;margin-top:.4rem}
.app-bookmarks-4{flex-direction:column;gap:.4rem}

/* app-community.php */
.app-community-1{font-size:.78rem}
.app-community-2{margin-top:.5rem}
.app-community-3{margin-top:.25rem}

/* app-devotions.php */
.app-devotions-1{gap:.35rem}
.app-devotions-2{padding:.35rem .6rem;width:auto}
.app-devotions-4{font-size:1.65rem;line-height:1.3}
.app-devotions-5{font-size:.98rem;line-height:1.85;color:var(--text);white-space:pre-line}

/* app-index.php */
.app-index-1{width:42px;height:42px;background:var(--gold-bg);border-radius:10px}
.app-index-2{font-size:.9rem}
.app-index-3{margin-top:.5rem}

/* app-journal.php */
.app-journal-1{font-style:italic;margin-bottom:.5rem;border-left:3px solid var(--gold);padding-left:.75rem}
.app-journal-2{min-height:160px}
.app-journal-3{font-size:.83rem;cursor:pointer}
.app-journal-4{grid-template-columns:1fr 80px 80px;gap:.5rem;margin-top:.5rem}
.app-journal-5{margin-top:.5rem;min-height:60px}

/* app-login.php */

/* app-prayer.php */
.app-prayer-1{margin:-2px 0 2px}

/* app-profile.php */
.app-profile-1{margin:-.25rem 0 .35rem}
.app-profile-2{grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.75rem}
.app-profile-3{font-size:1.3rem}
.app-profile-4{font-size:.73rem}
.app-profile-5{margin-top:.35rem}
.app-profile-6{margin-top:1rem}

/* app-search.php */
.app-search-1{font-size:.82rem;margin-bottom:.9rem}
.app-search-2{margin-bottom:.35rem}
.app-search-3{font-size:.75rem;padding:.2rem .5rem;border-radius:4px;border:1px solid var(--border)}
.app-search-4{font-size:.75rem;margin-top:.4rem;display:inline-block}
.app-search-5{font-style:italic;line-height:1.6;margin-bottom:1.25rem;padding:.75rem;background:var(--bg2);border-radius:var(--radius-sm)}

/* app-watch.php */
.app-watch-1{width:100%;height:100%;background:#111}
.app-watch-2{margin-top:.2rem;font-size:.75rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.app-watch-3{padding:0;overflow:hidden;background:#000;border-radius:var(--radius)}
.app-watch-4{padding:.75rem 1rem;background:#111}
.app-watch-5{font-size:.9rem}
.app-watch-6{background:rgba(255,255,255,.1)}
.app-watch-7{aspect-ratio:16/9;width:100%}
.app-watch-8{display:block}

/* contact.php */
.contact-1{padding:4rem 1.5rem 3.5rem}
.contact-2{grid-template-columns:1fr 1.6fr;gap:3rem;align-items:start}
.contact-3{font-size:1.4rem}
.contact-4{line-height:1.7}
.contact-5{padding:1.25rem;gap:.85rem}
.contact-6{width:40px;height:40px}
.contact-7{padding:1.25rem;gap:.85rem}
.contact-8{width:40px;height:40px}
.contact-9{margin-top:1.5rem}
.contact-10{letter-spacing:.07em}
.contact-11{gap:.5rem}
.contact-12{padding:2rem}
.contact-13{font-size:1.2rem}
.contact-14{padding:.85rem 1rem;border-radius:var(--radius-sm);margin-bottom:1.25rem;font-size:.875rem;font-weight:500}
.contact-15{grid-template-columns:1fr 1fr;gap:1rem}
.contact-16{padding:.75rem}

/* index.php */
.index-1{letter-spacing:.1em;color:var(--gold-light)}
.index-2{padding:.75rem 1.75rem}
.index-3{padding:.75rem 1.75rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.index-4{background:var(--bg2);padding:3.5rem 1.5rem}
.index-5{max-width:700px;margin:0 auto}
.index-6{font-size:.7rem;letter-spacing:.1em;gap:.35rem}
.index-7{font-size:clamp(1.2rem,3vw,1.7rem);font-style:italic;line-height:1.55;color:var(--text)}
.index-8{font-style:normal}
.index-9{margin-top:1.25rem}
.index-10{font-size:.7rem;letter-spacing:.1em;color:var(--gold-light);margin-bottom:.6rem}
.index-11{padding:.75rem 1.75rem}
.index-12{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:.75rem 1.75rem}
.index-13{height:56px;margin:0 auto}
/* Row of store badges — one per published platform, so it must hold two side
   by side once iOS is enabled. A platform with no badge artwork renders
   .store-btn instead, sized to match the 56px badge beside it. */
.store-badges{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.85rem}
.store-btn{display:inline-flex;align-items:center;gap:.5rem;height:56px;padding:0 1.4rem;
  border-radius:10px;background:#000;color:#fff;font-weight:600;font-size:.95rem;
  border:1px solid rgba(255,255,255,.22)}
.store-btn:hover{background:#1a1a1a}
.index-14{margin-top:1rem;font-size:.82rem}

/* ── Avatar palette (was an inline background colour in prayer.php) ── */
.avatar-c0{background:#b8763a}
.avatar-c1{background:#7c5cbf}
.avatar-c2{background:#2e86ab}
.avatar-c3{background:#57a773}
.avatar-c4{background:#c94040}
.avatar-c5{background:#e67e22}
.avatar-c6{background:#1a7a4a}
.avatar-none{background:var(--bg3)}

/* ── Bible version picker (was a PHP-interpolated inline style) ── */
.version-option{display:flex;align-items:center;justify-content:space-between;
  text-align:left;padding:.65rem .85rem;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--card)}
.version-option.is-active{border-color:var(--gold);background:var(--gold-bg)}

/* ── Misc extracted one-offs ── */
.app-index-continue{gap:1rem;padding:1rem}
.app-profile-tile{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.75rem .5rem}

/* Client-side thumbnail for images queued in the community composer. Built in
   JS (previewPostImages), so it is styled by class rather than cssText — a
   style string assembled in script is still inline CSS. */
.post-image-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }

/* Contact form result banner. Applied on top of .contact-14 (which carries the
   padding/radius/type) so success and error keep identical box metrics. */
.form-status--ok  { background: var(--gold-bg); color: #5a3e10; border: 1px solid var(--gold); }
.form-status--err { background: #fdecea;        color: #721c24; border: 1px solid #f5c6cb; }

/* Hover states that used to live in onmouseover/onmouseout attributes. Base
   colours still come from the element's own class, so these only supply the
   hover end of the existing transition — and the markup no longer needs
   script-src 'unsafe-inline' for styling. */
.site-footer-2:hover, .site-footer-3:hover, .site-footer-4:hover { color: var(--gold); }
.link-hover-gold:hover { color: var(--gold); }
.app-search-3:hover { border-color: var(--gold); color: var(--gold); }