/* ============================================================================
 * lumen-phase-a.css — Phase A premium features (2026-06-15)
 *
 *   Approved by Yousef. Implements features 1–15 of the redesign:
 *
 *      1  Smart Verse Tooltip      — popover for hovered KJV refs
 *      2  Liturgical Hours Ribbon  — thin band of the canonical hours
 *      3  Quiet Moment Button      — candle icon → dim + breathing circle
 *      4  Adaptive First-Visit Greeting
 *      5  Stained-Glass Loading Skeleton
 *      6  Light a Candle (sanctuary) — SVG candle, flickers in session
 *      7  Reading-Progress Halo    — gold scroll ring (corner)
 *      8  Illuminated Drop-Caps    — vine-bordered initial letter
 *      9  Pull-out Scripture Frames
 *     10  Stained-Glass Sanctuary Background (very low-opacity SVG)
 *     11  Medieval Hand-Drawn Icons (in /assets/svg/icons/)
 *     12  Sacred Time Toolbar      — floating widget (br corner)
 *     13  Liturgical Color Picker  — JS sets --page-accent to today's colour
 *     14  Hand-Written Signature SVG (footer)
 *     15  Marian Theotokos icon (replaces generic Mary)
 *
 *  Vanilla CSS. Uses tokens from lumen-tokens.css + joy-palette-extended.css.
 *  Mobile-first. WCAG-AA contrast. `prefers-reduced-motion` honoured everywhere.
 * ========================================================================== */


/* ─── 1. Smart Verse Tooltip — extended ───────────────────────────────────── */
.lumen-verse-tip {
    position: fixed;
    z-index: 9999;
    max-width: 340px;
    padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
    background: rgba(13, 17, 23, 0.96);
    color: #FAF6E9;
    border-radius: var(--r-md, 8px);
    box-shadow: var(--sh-lg);
    border: 1px solid rgba(212, 168, 67, 0.4);
    font-family: var(--ff-serif);
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur-fast, 200ms) var(--cb-ease),
                transform var(--dur-fast, 200ms) var(--cb-ease);
    pointer-events: none;
}
.lumen-verse-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.lumen-verse-tip__text { font-style: italic; }
.lumen-verse-tip__ref {
    margin-top: var(--s-2, 0.5rem);
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #E8C067;
}
.lumen-verse-tip__loading {
    font-style: italic;
    color: rgba(250, 246, 233, 0.7);
}
.lumen-verse-ref {
    border-bottom: 1px dotted rgba(212, 168, 67, 0.55);
    cursor: help;
    transition: color var(--dur-fast) var(--cb-ease);
}
.lumen-verse-ref:hover { color: #B8881A; }


/* ─── 2. Liturgical Hours Ribbon ──────────────────────────────────────────── */
.lumen-hours-ribbon {
    background: linear-gradient(90deg,
        rgba(232, 192, 103, 0.05),
        rgba(232, 192, 103, 0.12),
        rgba(232, 192, 103, 0.05));
    border-top: 1px solid rgba(212, 168, 67, 0.25);
    border-bottom: 1px solid rgba(212, 168, 67, 0.25);
    font-family: var(--ff-serif);
    font-size: 0.8rem;
    padding: var(--s-2, 0.5rem) 0;
    overflow: hidden;
}
.lumen-hours-ribbon__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3, 0.75rem) var(--s-5, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lumen-hours-ribbon__item {
    color: rgba(13, 17, 23, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
    position: relative;
    padding: 0 var(--s-2, 0.5rem);
    transition: color var(--dur-fast) var(--cb-ease);
}
.lumen-hours-ribbon__item small {
    display: block;
    font-size: 0.62rem;
    opacity: 0.75;
    margin-top: 0.1rem;
    letter-spacing: 0.04em;
}
.lumen-hours-ribbon__item.is-active {
    color: #0D1117;
    font-weight: 600;
}
.lumen-hours-ribbon__item.is-active::before {
    content: "";
    position: absolute;
    inset: -0.15rem -0.4rem;
    border-radius: var(--r-pill);
    background: rgba(232, 192, 103, 0.25);
    z-index: -1;
}


/* ─── 3. Quiet Moment Button ──────────────────────────────────────────────── */
.lumen-quiet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--cb-ease);
}
.lumen-quiet-button:hover {
    background: rgba(232, 192, 103, 0.15);
}
.lumen-quiet-button svg { width: 20px; height: 20px; }

.lumen-quiet-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(13, 17, 23, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FAF6E9;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: var(--s-7, 3rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-deliberate, 700ms) var(--cb-ease);
}
.lumen-quiet-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.lumen-quiet-overlay__verse {
    max-width: 32rem;
    text-align: center;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.5;
    color: #FAF6E9;
    padding: 0 var(--s-5);
}
.lumen-quiet-overlay__verse cite {
    display: block;
    margin-top: var(--s-3);
    font-style: normal;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E8C067;
}
.lumen-quiet-overlay__breath {
    width: 180px; height: 180px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 192, 103, 0.6);
    box-shadow: 0 0 60px rgba(232, 192, 103, 0.18);
    animation: lumen-breath 19s ease-in-out infinite;
}
.lumen-quiet-overlay__label {
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 246, 233, 0.6);
}
.lumen-quiet-overlay__close {
    position: absolute;
    top: var(--s-5);
    right: var(--s-5);
    background: transparent;
    border: 1px solid rgba(250, 246, 233, 0.3);
    color: #FAF6E9;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

/* 4-7-8 breathing: inhale 4s, hold 7s, exhale 8s = 19s cycle */
@keyframes lumen-breath {
    0%   { transform: scale(0.7); opacity: 0.5; }   /* exhale rest */
    21%  { transform: scale(1.05); opacity: 1; }    /* 4s inhale */
    58%  { transform: scale(1.05); opacity: 1; }    /* 7s hold */
    100% { transform: scale(0.7); opacity: 0.5; }   /* 8s exhale */
}
@media (prefers-reduced-motion: reduce) {
    .lumen-quiet-overlay__breath { animation: none; }
}


/* ─── 4. Adaptive First-Visit Greeting ────────────────────────────────────── */
.lumen-greeting {
    position: fixed;
    left: 50%;
    bottom: var(--s-6, 2rem);
    transform: translateX(-50%) translateY(120%);
    z-index: 9997;
    max-width: min(540px, calc(100vw - 2rem));
    background: #FAF6E9;
    color: #0D1117;
    border: 1px solid rgba(212, 168, 67, 0.45);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: var(--s-4) var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--ff-serif);
    font-size: 1.05rem;
    line-height: 1.45;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--cb-ease),
                transform var(--dur-slow) var(--cb-ease);
}
.lumen-greeting.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.lumen-greeting__text { flex: 1; font-style: italic; }
.lumen-greeting__dismiss {
    background: transparent;
    border: 1px solid rgba(13, 17, 23, 0.2);
    color: inherit;
    width: 32px; height: 32px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 1.1rem;
}


/* ─── 5. Stained-Glass Loading Skeleton ───────────────────────────────────── */
.lumen-skeleton {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    background: #F4ECD6;
    overflow: hidden;
    position: relative;
}
.lumen-skeleton svg {
    width: 100%; height: 100%;
}
.lumen-skeleton__tile {
    opacity: 0;
    animation: lumen-tile-in 1.6s var(--cb-ease) infinite;
}
.lumen-skeleton__tile:nth-child(1) { animation-delay: 0s;    fill: #E8C067; }
.lumen-skeleton__tile:nth-child(2) { animation-delay: 0.2s;  fill: #C0506B; }
.lumen-skeleton__tile:nth-child(3) { animation-delay: 0.4s;  fill: #6FA3C7; }
.lumen-skeleton__tile:nth-child(4) { animation-delay: 0.6s;  fill: #8AAD75; }
.lumen-skeleton__tile:nth-child(5) { animation-delay: 0.8s;  fill: #B89BDA; }
.lumen-skeleton__tile:nth-child(6) { animation-delay: 1.0s;  fill: #D4A843; }
.lumen-skeleton__tile:nth-child(7) { animation-delay: 1.2s;  fill: #C0506B; }
.lumen-skeleton__tile:nth-child(8) { animation-delay: 1.4s;  fill: #6FA3C7; }
@keyframes lumen-tile-in {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lumen-skeleton__tile { animation: none; opacity: 0.8; }
}


/* ─── 6. Light a Candle (sanctuary) ───────────────────────────────────────── */
.lumen-candle {
    display: inline-block;
    cursor: pointer;
    width: 80px;
    height: 140px;
    position: relative;
    transition: transform var(--dur-fast) var(--cb-ease);
}
.lumen-candle:hover { transform: translateY(-2px); }
.lumen-candle svg { width: 100%; height: 100%; }
.lumen-candle__flame {
    transform-origin: 50% 100%;
    transform: scale(0.001);
    transition: transform var(--dur-slow) var(--cb-ease);
}
.lumen-candle.is-lit .lumen-candle__flame {
    transform: scale(1);
    animation: lumen-flicker 1.7s ease-in-out infinite;
}
.lumen-candle__glow {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--cb-ease);
}
.lumen-candle.is-lit .lumen-candle__glow { opacity: 1; }
@keyframes lumen-flicker {
    0%, 100% { transform: scale(1)    rotate(0); }
    30%      { transform: scale(0.97) rotate(-1.5deg); }
    65%      { transform: scale(1.04) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .lumen-candle.is-lit .lumen-candle__flame { animation: none; }
}
.lumen-candle-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--s-5);
    padding: var(--s-5);
    background: rgba(13, 17, 23, 0.04);
    border-radius: var(--r-md);
    max-width: 600px;
    margin: var(--s-6) auto;
}


/* ─── 7. Reading-Progress Halo ────────────────────────────────────────────── */
.lumen-halo {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    width: 56px; height: 56px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--cb-ease);
}
.lumen-halo.is-visible { opacity: 1; }
.lumen-halo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lumen-halo__track {
    fill: none;
    stroke: rgba(13, 17, 23, 0.08);
    stroke-width: 4;
}
.lumen-halo__ring {
    fill: none;
    stroke: #D4A843;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 157;       /* 2 * π * 25 */
    stroke-dashoffset: 157;
    transition: stroke-dashoffset 60ms linear;
}


/* ─── 8. Illuminated Drop-Caps ────────────────────────────────────────────── */
.devotional > p:first-of-type::first-letter,
.letter      > p:first-of-type::first-letter,
.story       > p:first-of-type::first-letter,
.lumen-illuminate > p:first-of-type::first-letter,
p.lumen-illuminate::first-letter {
    font-family: var(--ff-serif);
    font-size: 3.25em;
    line-height: 0.9;
    color: #B8881A;
    float: left;
    margin: 0.05em 0.12em 0 0;
    padding: 0.2em 0.3em 0 0.25em;
    background-image:
        radial-gradient(circle at 12% 24%, rgba(232, 192, 103, 0.18) 0, transparent 60%),
        radial-gradient(circle at 88% 80%, rgba(192, 80, 107, 0.14) 0, transparent 55%);
    border-left: 2px solid #D4A843;
    text-shadow: 0 1px 0 rgba(212, 168, 67, 0.25);
    font-weight: 600;
}


/* ─── 9. Pull-out Scripture Frames ────────────────────────────────────────── */
.scripture-frame {
    position: relative;
    margin: var(--s-7) auto;
    max-width: 36rem;
    padding: var(--s-7) var(--s-7) var(--s-6);
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.55;
    color: #2A2118;
    text-align: center;
    background: radial-gradient(ellipse at center,
        rgba(250, 246, 233, 0.65) 0%, rgba(244, 236, 214, 0.4) 100%);
}
.scripture-frame::before,
.scripture-frame::after {
    content: "";
    position: absolute;
    left: var(--s-5);
    right: var(--s-5);
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M0 7 Q20 0 40 7 T80 7 T120 7 T160 7 T200 7' fill='none' stroke='%23D4A843' stroke-width='1.3'/><circle cx='100' cy='7' r='3' fill='%23E8C067'/><circle cx='40' cy='7' r='2' fill='%23B8881A'/><circle cx='160' cy='7' r='2' fill='%23B8881A'/></svg>");
    background-size: 200px 14px;
    background-repeat: repeat-x;
    background-position: center;
}
.scripture-frame::before { top: var(--s-3); }
.scripture-frame::after  { bottom: var(--s-3); transform: scaleY(-1); }
.scripture-frame cite {
    display: block;
    margin-top: var(--s-4);
    font-family: var(--ff-sans);
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B8881A;
}


/* ─── 10. Stained-Glass Sanctuary Background ──────────────────────────────── */
body[data-section="sanctuary"]::before {
    content: "";
    position: fixed; inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><defs><pattern id='glass' width='80' height='80' patternUnits='userSpaceOnUse'><polygon points='40,4 76,40 40,76 4,40' fill='%23E8C067' fill-opacity='0.4'/><polygon points='40,12 68,40 40,68 12,40' fill='%236FA3C7' fill-opacity='0.45'/><circle cx='40' cy='40' r='6' fill='%23C0506B' fill-opacity='0.5'/></pattern></defs><rect width='240' height='240' fill='url(%23glass)'/></svg>");
    background-size: 240px 240px;
    opacity: 0.08;
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    body[data-section="sanctuary"]::before {
        animation: lumen-sanctuary-drift 60s linear infinite;
    }
}
@keyframes lumen-sanctuary-drift {
    from { background-position: 0 0; }
    to   { background-position: 240px 240px; }
}


/* ─── 12. Sacred Time Toolbar ─────────────────────────────────────────────── */
.lumen-sacred-toolbar {
    position: fixed;
    right: var(--s-5);
    bottom: calc(var(--s-5) + 72px);     /* clear of the halo */
    z-index: 95;
    background: rgba(250, 246, 233, 0.97);
    border: 1px solid rgba(212, 168, 67, 0.35);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    overflow: hidden;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    max-width: 260px;
    transition: transform var(--dur-slow) var(--cb-ease),
                box-shadow var(--dur-slow) var(--cb-ease);
}
.lumen-sacred-toolbar__toggle {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.lumen-sacred-toolbar__toggle::after {
    content: "▾";
    margin-left: auto;
    color: #B8881A;
    transition: transform var(--dur-fast) var(--cb-ease);
}
.lumen-sacred-toolbar[data-state="open"] .lumen-sacred-toolbar__toggle::after {
    transform: rotate(180deg);
}
.lumen-sacred-toolbar__color {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(13, 17, 23, 0.2);
    flex-shrink: 0;
}
.lumen-sacred-toolbar__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--cb-ease);
}
.lumen-sacred-toolbar[data-state="open"] .lumen-sacred-toolbar__panel {
    max-height: 320px;
}
.lumen-sacred-toolbar__row {
    display: flex;
    justify-content: space-between;
    padding: var(--s-2) var(--s-4);
    border-top: 1px dashed rgba(212, 168, 67, 0.25);
}
.lumen-sacred-toolbar__row dt { color: rgba(13, 17, 23, 0.6); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; }
.lumen-sacred-toolbar__row dd { margin: 0; font-weight: 500; }


/* ─── 14. Hand-Written Signature SVG ──────────────────────────────────────── */
.lumen-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-7) auto var(--s-4);
    max-width: 360px;
    text-align: center;
}
.lumen-signature svg { width: 100%; max-width: 320px; height: auto; }
.lumen-signature__path {
    fill: none;
    stroke: #B8881A;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: lumen-sign 4.5s ease-in-out forwards;
}
@keyframes lumen-sign {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lumen-signature__path { animation: none; stroke-dashoffset: 0; }
}


/* ─── 15. Marian Theotokos icon ───────────────────────────────────────────── */
.lumen-theotokos {
    display: inline-block;
    width: 96px;
    height: 96px;
    color: #B8881A;
}
.lumen-theotokos svg { width: 100%; height: 100%; }


/* ─── Generic utility: small icon block ───────────────────────────────────── */
.lumen-icon {
    display: inline-block;
    width: 24px; height: 24px;
    vertical-align: middle;
    color: currentColor;
}
.lumen-icon svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}