:root{--navy:#1A2332;--navy-mid:#243044;--navy-lt:#2E3F5C;--cream:#FAF7F2;--linen:#F0EBE1;--stone:#DDD5C8;--gold:#C49A2A;--gold-lt:#D4B050;--sage:#5C7A6A;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--navy);color:var(--cream);font-family:"Source Serif 4",serif;-webkit-font-smoothing:antialiased;}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--navy);transition:opacity 0.35s ease,transform 0.35s ease;overflow:hidden;}
.screen.hidden{opacity:0;pointer-events:none;transform:translateY(16px);}
.screen.visible{opacity:1;pointer-events:all;transform:translateY(0);}
/* LOADING */
#screen-loading{justify-content:center;align-items:center;gap:24px;}
.loading-logo{font-family:"Playfair Display",serif;font-size:72px;font-weight:700;color:var(--cream);text-align:center;line-height:0.9;}
.loading-logo span{color:var(--gold);}
.loading-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1);}}
/* WELCOME */
#screen-welcome{padding:env(safe-area-inset-top,48px) 28px env(safe-area-inset-bottom,32px);justify-content:space-between;}
.welcome-logo{font-family:"Playfair Display",serif;font-size:68px;font-weight:700;color:var(--cream);line-height:.9;text-align:center;}
.welcome-logo span{color:var(--gold);}
.welcome-tag{font-size:13px;font-style:italic;color:rgba(255,255,255,.5);text-align:center;margin-top:10px;line-height:1.6;}
.welcome-intro{font-size:14px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.85;text-align:center;margin-top:20px;}
.welcome-bottom{display:flex;flex-direction:column;gap:14px;}
.setup-label{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gold);text-align:center;}
.date-wrap{background:var(--navy-mid);border:1.5px solid rgba(196,154,42,.4);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:10px;}
.date-wrap input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-family:"Source Serif 4",serif;font-size:16px;font-style:italic;}
.date-wrap input::placeholder{color:rgba(255,255,255,.3);}
.btn-gold{background:var(--gold);color:var(--navy);font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:18px;border-radius:10px;border:none;cursor:pointer;width:100%;}
.free-note{font-size:12px;font-style:italic;color:rgba(255,255,255,.3);text-align:center;}
/* DAILY */
#screen-daily{background:var(--navy);}
.daily-header{background:var(--navy-mid);padding:calc(env(safe-area-inset-top,0px) + 18px) 22px 18px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(196,154,42,.15);flex-shrink:0;}
.day-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:3px;}
.day-num{font-family:"Playfair Display",serif;font-size:46px;font-weight:700;color:var(--gold);line-height:1;}
.day-date{font-family:"Source Serif 4",serif;font-size:11px;font-style:italic;color:rgba(255,255,255,.45);margin-top:4px;}
.day-phase{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);text-align:right;opacity:.65;max-width:120px;}
.daily-body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:22px;-webkit-overflow-scrolling:touch;}
.section-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:9px;opacity:.8;}
.journal-text{font-size:15px;font-weight:300;color:rgba(255,255,255,.88);line-height:1.88;}
.scripture-block{background:var(--navy-mid);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:15px 17px;}
.scripture-ref{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.scripture-text{font-size:14px;font-style:italic;font-weight:300;color:rgba(255,255,255,.88);line-height:1.72;}
.reflection-block{background:rgba(92,122,106,.1);border-radius:12px;padding:18px;border:1px solid rgba(92,122,106,.22);}
.reflection-text{font-size:14px;font-style:italic;color:rgba(255,255,255,.72);line-height:1.8;}
.milestone-banner{background:linear-gradient(135deg,rgba(196,154,42,.14),rgba(196,154,42,.04));border:1px solid rgba(196,154,42,.28);border-radius:12px;padding:18px;text-align:center;}
.milestone-text{font-family:"Playfair Display",serif;font-size:21px;font-weight:600;color:var(--gold);}
.nav-row{display:flex;gap:10px;padding-bottom:6px;}
.btn-prev{flex:1;padding:13px;background:var(--navy-mid);border:1px solid rgba(196,154,42,.2);border-radius:10px;color:rgba(255,255,255,.55);font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;}
.btn-next{flex:1;padding:13px;background:var(--gold);border:none;border-radius:10px;color:var(--navy);font-family:"Montserrat",sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;}
/* BOTTOM NAV */
.bottom-nav{background:var(--navy-mid);padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;justify-content:space-around;border-top:1px solid rgba(196,154,42,.15);flex-shrink:0;}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:8px 14px;border-radius:8px;color:rgba(255,255,255,.38);}
.nav-btn.active{color:var(--gold);}
.nav-icon{font-size:21px;}
.nav-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;}
/* THURSDAY */
#screen-thursday{background:var(--navy);}
.thu-header{background:var(--gold);padding:calc(env(safe-area-inset-top,0px) + 22px) 22px 18px;flex-shrink:0;}
.thu-title{font-family:"Playfair Display",serif;font-size:26px;font-weight:700;color:var(--navy);}
.thu-sub{font-size:13px;font-style:italic;color:rgba(26,35,50,.6);margin-top:3px;}
.thu-body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch;}
.voice-card{background:var(--navy-mid);border-radius:14px;padding:18px;display:flex;align-items:center;gap:14px;}
.play-btn{width:46px;height:46px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;font-size:17px;flex-shrink:0;}
.voice-desc{font-size:14px;font-style:italic;color:rgba(255,255,255,.78);line-height:1.6;}
.word-prompt{font-family:"Playfair Display",serif;font-size:24px;font-style:italic;color:var(--gold);text-align:center;padding:10px 0 4px;}
.word-sub{font-size:13px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:12px;}
.words-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.word-pill{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:600;padding:10px 16px;border-radius:24px;border:1.5px solid rgba(196,154,42,.32);color:rgba(255,255,255,.72);cursor:pointer;background:none;transition:all .18s;}
.word-pill.selected{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.share-note{font-size:13px;font-style:italic;color:rgba(255,255,255,.32);text-align:center;}
/* JOURNEY */
#screen-journey{background:var(--cream);color:var(--navy);}
.journey-header{background:var(--navy);padding:calc(env(safe-area-inset-top,0px) + 22px) 22px 18px;flex-shrink:0;}
.journey-title{font-family:"Playfair Display",serif;font-size:25px;font-weight:700;color:var(--cream);}
.journey-sub{font-size:20px;font-style:italic;color:rgba(255,255,255,.45);margin-top:3px;}
.journey-body{flex:1;overflow-y:auto;padding:22px;-webkit-overflow-scrolling:touch;}
.progress-wrap{background:var(--stone);border-radius:8px;height:7px;overflow:hidden;margin-bottom:7px;}
.progress-fill{height:100%;background:var(--gold);border-radius:8px;transition:width .6s ease;}
.progress-label{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#3D4F65;margin-bottom:22px;}
.phase-section{margin-bottom:26px;}
.phase-title{font-family:"Playfair Display",serif;font-size:17px;font-weight:600;color:var(--navy);margin-bottom:10px;padding-bottom:7px;border-bottom:1.5px solid var(--stone);}
.phase-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.day-dot{
    aspect-ratio:1;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:"Montserrat",sans-serif;
    font-size:8px;
    font-weight:600;
    cursor:pointer;
    border:1.5px solid var(--stone);
    color:#3D4F65;
    background:var(--linen);
}

/* Previous days */
.day-dot.past{
    background:#3D4F65;
    border-color:#3D4F65;
    color:var(--cream);
}

/* Current day */
.day-dot.current{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--navy);
    transform:scale(1.14);
}
.day-dot.locked{opacity:.3;cursor:default;}
/* SUBSCRIBE */
#screen-subscribe{justify-content:center;padding:40px 28px calc(env(safe-area-inset-bottom,0px) + 40px);}
.sub-title{font-family:"Playfair Display",serif;font-size:30px;font-weight:700;color:var(--cream);text-align:center;line-height:1.2;margin-bottom:10px;}
.sub-body{font-size:15px;font-style:italic;color:rgba(255,255,255,.55);text-align:center;line-height:1.8;margin-bottom:32px;}
.plan-card{background:var(--navy-mid);border-radius:14px;padding:22px;margin-bottom:12px;border:1.5px solid rgba(196,154,42,.2);cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.plan-card.featured{border-color:var(--gold);background:linear-gradient(135deg,rgba(196,154,42,.1),rgba(196,154,42,.02));}
.plan-name{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.plan-price{font-family:"Playfair Display",serif;font-size:28px;font-weight:700;color:var(--cream);}
.plan-period{font-size:13px;color:rgba(255,255,255,.4);}
.plan-badge{background:var(--gold);color:var(--navy);font-family:"Montserrat",sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.sub-note{font-size:12px;font-style:italic;color:rgba(255,255,255,.22);text-align:center;margin-top:14px;}

/* ── LOGIN / ACCOUNT ── */
#screen-login{justify-content:space-between;padding:env(safe-area-inset-top,48px) 28px env(safe-area-inset-bottom,32px);}
.login-logo{font-family:"Playfair Display",serif;font-size:56px;font-weight:700;color:var(--cream);line-height:.9;text-align:center;}
.login-logo span{color:var(--gold);}
.login-tag{font-size:13px;font-style:italic;color:rgba(255,255,255,.45);text-align:center;margin-top:8px;}
.login-tabs{display:flex;background:var(--navy-mid);border-radius:10px;padding:4px;margin-bottom:20px;}
.login-tab{flex:1;padding:10px;border:none;border-radius:8px;font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:none;color:rgba(255,255,255,.4);transition:all .2s;}
.login-tab.active{background:var(--gold);color:var(--navy);}
.input-wrap{background:var(--navy-mid);border:1.5px solid rgba(196,154,42,.35);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-family:"Source Serif 4",serif;font-size:16px;}
.input-wrap input::placeholder{color:rgba(255,255,255,.3);}
.input-icon{font-size:18px;opacity:.6;}
.divider-text{text-align:center;font-size:12px;font-style:italic;color:rgba(255,255,255,.3);margin:14px 0;}
.btn-outline{background:none;border:1.5px solid rgba(196,154,42,.4);color:var(--gold);font-family:"Montserrat",sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;padding:16px;border-radius:10px;cursor:pointer;width:100%;margin-bottom:10px;}
.login-note{font-size:12px;font-style:italic;color:rgba(255,255,255,.28);text-align:center;line-height:1.6;}
.forgot-link{font-size:12px;font-style:italic;color:rgba(196,154,42,.6);text-align:right;margin-top:-4px;margin-bottom:12px;cursor:pointer;}

/* ── THURSDAY FULL ── */
.thu-gathering-card{background:var(--navy-mid);border-radius:14px;overflow:hidden;margin-bottom:16px;}
.thu-card-header{background:var(--navy-lt);padding:16px 18px 12px;border-bottom:2px solid var(--gold);}
.thu-card-title{font-family:"Playfair Display",serif;font-size:18px;font-weight:600;color:#FAF7F2;display:block;}
.thu-card-date{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:3px;opacity:.75;}
.thu-card-desc{font-size:13px;font-style:italic;color:rgba(255,255,255,.6);padding:12px 18px 8px;line-height:1.6;}
.audio-player{padding:12px 18px 16px;display:flex;align-items:center;gap:14px;}
.audio-play{width:44px;height:44px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;font-size:16px;color:var(--navy);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.audio-bar-wrap{flex:1;display:flex;flex-direction:column;gap:6px;}
.audio-bar{height:4px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;}
.audio-bar-fill{height:100%;background:var(--gold);border-radius:4px;width:0%;transition:width .1s;}
.audio-time{font-family:"Montserrat",sans-serif;font-size:9px;color:rgba(255,255,255,.4);letter-spacing:1px;}
.thu-reflection{background:rgba(92,122,106,.1);margin:0 14px 14px;border-radius:10px;padding:14px;border:1px solid rgba(92,122,106,.2);}
.thu-reflection-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--sage);margin-bottom:6px;}
.thu-reflection-text{font-size:13px;font-style:italic;color:rgba(255,255,255,.7);line-height:1.7;}
.thu-past-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);margin:8px 0 10px;}
.thu-past-item{background:var(--navy-mid);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.thu-past-title{font-size:13px;color:rgba(255,255,255,.7);}
.thu-past-date{font-family:"Montserrat",sans-serif;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;}
/* ── WEEKLY WORDS ── */
.button.className = "community-word";s{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:14px;
}

.community-word{
    width:100%;
    min-height:54px;
    padding:12px 14px;
    border:1px solid rgba(212,175,55,.35);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#FAF7F2;
    font-family:"Montserrat",sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    cursor:pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;
}

.community-word:hover{
    background:rgba(212,175,55,.12);
    border-color:var(--gold);
}

.community-word:active{
    transform:scale(.97);
}

.community-word.selected{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--navy);
}

/* Single-column layout on very narrow screens */
@media(max-width:380px){
    .community-words{
        grid-template-columns:1fr;
    }
}
/* ── FULL WELCOME SCREEN ── */
#screen-fullwelcome{padding:calc(env(safe-area-inset-top,0px) + 40px) 28px calc(env(safe-area-inset-bottom,0px) + 32px);overflow-y:auto;display:block;}
.fw-logo{font-family:"Playfair Display",serif;font-size:44px;font-weight:700;color:var(--gold);text-align:center;line-height:.9;margin-bottom:6px;}
.fw-title{font-family:"Playfair Display",serif;font-size:22px;font-weight:600;color:var(--cream);text-align:center;margin-bottom:24px;}
.fw-text{font-size:15px;font-weight:300;color:rgba(255,255,255,.82);line-height:1.9;margin-bottom:18px;}
.fw-verse{font-family:"Playfair Display",serif;font-size:17px;font-style:italic;color:var(--gold);text-align:center;line-height:1.6;margin:28px 0;padding:0 10px;}
.fw-divider{width:40px;height:1.5px;background:var(--gold);margin:24px auto;opacity:.6;}

/* ── LIFELINE BUTTON ── */
.lifeline-fab{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);right:18px;width:56px;height:56px;border-radius:50%;background:var(--gold);border:none;box-shadow:0 4px 16px rgba(0,0,0,.4);cursor:pointer;font-size:24px;z-index:50;display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.lifeline-fab:active{transform:scale(.92);}
#screen-lifeline{padding:calc(env(safe-area-inset-top,0px) + 24px) 28px calc(env(safe-area-inset-bottom,0px) + 32px);overflow-y:auto;display:block;background:var(--navy);}
.lifeline-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);right:24px;background:none;border:none;color:rgba(255,255,255,.5);font-size:28px;cursor:pointer;z-index:10;}
.lifeline-title{font-family:"Playfair Display",serif;font-size:26px;font-weight:600;color:var(--gold);text-align:center;margin:20px 0 8px;}
.lifeline-sub{font-size:14px;font-style:italic;color:rgba(255,255,255,.55);text-align:center;line-height:1.7;margin-bottom:28px;}
.lifeline-section{background:var(--navy-mid);border-radius:14px;padding:20px;margin-bottom:16px;}
.lifeline-section-label{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.lifeline-scripture{font-size:15px;font-style:italic;color:rgba(255,255,255,.85);line-height:1.8;}
.lifeline-prayer{font-size:15px;color:rgba(255,255,255,.8);line-height:1.85;}
/* breathing */
.breathe-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0;}
.breathe-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(196,154,42,.3),rgba(196,154,42,.05));border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:"Source Serif 4",serif;font-size:14px;font-style:italic;color:var(--cream);text-align:center;animation:breathe 8s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(.7);}50%{transform:scale(1.1);}}
.breathe-label{font-size:13px;font-style:italic;color:rgba(255,255,255,.5);margin-top:18px;text-align:center;}
.lifeline-form input,.lifeline-form textarea{width:100%;background:var(--navy);border:1.5px solid rgba(196,154,42,.3);border-radius:10px;padding:13px 15px;color:var(--cream);font-family:"Source Serif 4",serif;font-size:15px;margin-bottom:10px;outline:none;}
.lifeline-form textarea{min-height:90px;resize:vertical;}
.lifeline-form input::placeholder,.lifeline-form textarea::placeholder{color:rgba(255,255,255,.3);}

/* ── MILESTONE FULL SCREEN ── */
#screen-milestone{justify-content:center;align-items:center;padding:40px;text-align:center;background:var(--navy);}
#screen-milestone::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(196,154,42,.12),transparent 65%);pointer-events:none;}
.ms-big{font-family:"Playfair Display",serif;font-size:48px;font-weight:700;color:var(--gold);line-height:1.1;margin-bottom:16px;position:relative;}
.ms-sub{font-size:17px;font-style:italic;color:var(--cream);line-height:1.7;margin-bottom:10px;position:relative;}
.ms-verse{font-size:14px;font-style:italic;color:var(--sage);margin-bottom:32px;position:relative;}

/* MORE COMING */
.more-coming{background:linear-gradient(135deg,rgba(196,154,42,.12),rgba(196,154,42,.03));border:1px solid rgba(196,154,42,.3);border-radius:14px;padding:28px 22px;text-align:center;margin-top:8px;}
.more-coming-title{font-family:"Playfair Display",serif;font-size:22px;font-weight:600;color:var(--gold);margin-bottom:10px;}
.more-coming-text{font-size:15px;font-style:italic;color:rgba(255,255,255,.7);line-height:1.8;}

/* MY JOURNAL */
#screen-myjournal{background:var(--cream);color:var(--navy);}
.mj-header{background:var(--navy);padding:calc(env(safe-area-inset-top,0px) + 22px) 22px 18px;flex-shrink:0;}
.mj-title{font-family:"Playfair Display",serif;font-size:25px;font-weight:700;color:var(--cream);}
.mj-sub{font-size:13px;font-style:italic;color:rgba(255,255,255,.45);margin-top:3px;}
.mj-search{margin:16px 22px 0;background:var(--linen);border:1px solid var(--stone);border-radius:10px;padding:12px 15px;display:flex;align-items:center;gap:10px;}
.mj-search input{flex:1;background:none;border:none;outline:none;font-family:"Source Serif 4",serif;font-size:15px;color:var(--navy);}
.mj-body{flex:1;overflow-y:auto;padding:16px 22px 22px;-webkit-overflow-scrolling:touch;}
.mj-entry{background:white;border-radius:12px;padding:16px 18px;margin-bottom:12px;border:1px solid var(--stone);}
.mj-entry-day{font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.mj-entry-text{font-size:14px;color:var(--navy);line-height:1.7;}
.mj-empty{text-align:center;padding:40px 20px;font-size:15px;font-style:italic;color:#3D4F65;line-height:1.8;}

.refl-tab{flex:1;padding:10px;border:none;border-radius:8px 8px 0 0;font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:var(--navy-mid);color:rgba(255,255,255,.4);}
.refl-tab.active{background:rgba(92,122,106,.15);color:var(--gold);}
.jour-textarea{width:100%;min-height:140px;background:rgba(92,122,106,.08);border:1px solid rgba(92,122,106,.25);border-radius:12px;padding:16px;color:var(--cream);font-family:"Source Serif 4",serif;font-size:15px;line-height:1.7;outline:none;resize:vertical;}
.jour-textarea::placeholder{color:rgba(255,255,255,.3);font-style:italic;}
.jour-saved{font-size:11px;font-style:italic;color:var(--sage);text-align:right;margin-top:6px;height:14px;}

.special-entry{background:var(--linen);border:1px solid var(--stone);border-radius:12px;padding:16px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;cursor:pointer;}
.special-entry-icon{font-size:20px;color:var(--gold);flex-shrink:0;}
.special-entry-title{font-family:"Playfair Display",serif;font-size:17px;font-weight:600;color:var(--navy);}
.special-entry-sub{font-size:12px;font-style:italic;color:#3D4F65;margin-top:2px;}
.special-entry.locked-entry{opacity:.5;cursor:default;}
.gathering-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px 90px;
    -webkit-overflow-scrolling: touch;
}
/* =========================================================
GET UP — LIFELINE
========================================================= */

.lifeline-screen {
position: relative;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
padding:
calc(env(safe-area-inset-top, 0px) + 24px)
24px
calc(env(safe-area-inset-bottom, 0px) + 32px);
overflow-y: auto;
background: var(--navy);
color: var(--cream);
}

/* ---------------------------------------------------------
Close
--------------------------------------------------------- */

.lifeline-close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 14px);
right: 18px;
width: 42px;
height: 42px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255,255,255,.55);
font-family: Arial, sans-serif;
font-size: 34px;
font-weight: 300;
line-height: 42px;
text-align: center;
cursor: pointer;
z-index: 20;
transition:
color .2s ease,
transform .2s ease;
}

.lifeline-close:hover {
color: var(--cream);
}

.lifeline-close:active {
transform: scale(.9);
}

/* ---------------------------------------------------------
Header
--------------------------------------------------------- */

.lifeline-header {
padding:
24px
34px
8px;
text-align: center;
}

.lifeline-title {
margin: 0 0 8px;

 
font-family: "Playfair Display", serif;
font-size: 30px;
font-weight: 600;
line-height: 1.2;

color: var(--gold);
 

}

.lifeline-sub {
max-width: 320px;
margin: 0 auto;

 
font-family: "Source Serif 4", serif;
font-size: 14px;
font-style: italic;
line-height: 1.7;

color: rgba(255,255,255,.58);
 

}

/* ---------------------------------------------------------
Sections
--------------------------------------------------------- */

.lifeline-section {
max-width: 620px;
margin: 0 auto 18px;
padding: 20px;

 
box-sizing: border-box;

background: var(--navy-mid);
border: 1px solid rgba(196,154,42,.14);
border-radius: 16px;

box-shadow:
    0 8px 28px rgba(0,0,0,.12);
 

}

.lifeline-section p {
margin: 0 0 12px;

 
font-family: "Source Serif 4", serif;
font-size: 15px;
font-weight: 300;
line-height: 1.8;

color: rgba(255,255,255,.78);
 

}

.lifeline-section p:last-child {
margin-bottom: 0;
}

.lifeline-section-label {
margin-bottom: 11px;

 
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 3px;
line-height: 1.4;
text-transform: uppercase;

color: var(--gold);
 

}

/* ---------------------------------------------------------
Breathing Circle
--------------------------------------------------------- */

.breathe-wrap {
display: flex;
flex-direction: column;
align-items: center;

 
padding: 18px 0 24px;
 

}

.breathe-circle {
width: 124px;
height: 124px;

 
border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;

border: 2px solid rgba(196,154,42,.85);

background:
    radial-gradient(
        circle,
        rgba(196,154,42,.24) 0%,
        rgba(196,154,42,.11) 48%,
        rgba(196,154,42,.03) 72%,
        transparent 74%
    );

box-shadow:
    0 0 0 0 rgba(196,154,42,.12),
    0 0 28px rgba(196,154,42,.12);

color: var(--cream);

font-family: "Source Serif 4", serif;
font-size: 15px;
font-style: italic;
line-height: 1.5;
text-align: center;

cursor: pointer;

animation:
    lifelineBreath 8s
    ease-in-out
    infinite;

transition:
    box-shadow .3s ease;
 

}

.breathe-circle:hover {
box-shadow:
0 0 0 8px rgba(196,154,42,.04),
0 0 36px rgba(196,154,42,.18);
}

.breathe-circle:focus {
outline: 2px solid var(--gold);
outline-offset: 5px;
}

@keyframes lifelineBreath {

 
0%,
100% {
    transform: scale(.72);
    box-shadow:
        0 0 0 0 rgba(196,154,42,.08),
        0 0 22px rgba(196,154,42,.10);
}

50% {
    transform: scale(1.08);
    box-shadow:
        0 0 0 18px rgba(196,154,42,.025),
        0 0 40px rgba(196,154,42,.20);
}
 

}

.breathe-label {
margin-top: 18px;

 
font-family: "Source Serif 4", serif;
font-size: 13px;
font-style: italic;
line-height: 1.6;
text-align: center;

color: rgba(255,255,255,.48);
 

}

/* ---------------------------------------------------------
Scripture
--------------------------------------------------------- */

.lifeline-scripture {
font-family: "Playfair Display", serif;
font-size: 17px;
font-style: italic;
line-height: 1.7;
text-align: center;

 
color: rgba(255,255,255,.82);
 

}

.lifeline-reference {
margin-top: 12px;

 
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;

color: var(--gold);
 

}

/* ---------------------------------------------------------
Form
--------------------------------------------------------- */

.lifeline-form-intro {
margin-bottom: 18px !important;

 
font-style: italic;
color: rgba(255,255,255,.58) !important;
 

}

.lifeline-form .form-group {
margin-bottom: 16px;
}

.lifeline-form label:not(.lifeline-checkbox) {
display: block;

 
margin-bottom: 7px;

font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;

color: rgba(255,255,255,.62);
 

}

.lifeline-form input[type="text"],
.lifeline-form input[type="email"],
.lifeline-form textarea {
width: 100%;
box-sizing: border-box;

 
padding: 13px 14px;

border: 1px solid rgba(196,154,42,.28);
border-radius: 10px;

background: var(--navy);
color: var(--cream);

font-family: "Source Serif 4", serif;
font-size: 15px;
line-height: 1.5;

outline: none;

transition:
    border-color .2s ease,
    box-shadow .2s ease;
 

}

.lifeline-form input[type="text"]:focus,
.lifeline-form input[type="email"]:focus,
.lifeline-form textarea:focus {
border-color: rgba(196,154,42,.75);

 
box-shadow:
    0 0 0 3px rgba(196,154,42,.08);
 

}

.lifeline-form textarea {
min-height: 130px;
resize: vertical;
}

.lifeline-form input::placeholder,
.lifeline-form textarea::placeholder {
color: rgba(255,255,255,.28);
}

/* ---------------------------------------------------------
Checkboxes
--------------------------------------------------------- */

.lifeline-checkbox {
display: flex;
align-items: flex-start;
gap: 11px;

 
margin: 13px 0;

font-family: "Source Serif 4", serif;
font-size: 13px;
line-height: 1.55;

color: rgba(255,255,255,.62);

cursor: pointer;
 

}

.lifeline-checkbox input {
flex: 0 0 auto;

 
width: 18px;
height: 18px;

margin: 1px 0 0;

accent-color: var(--gold);
 

}

/* ---------------------------------------------------------
Submit
--------------------------------------------------------- */

.lifeline-submit {
width: 100%;

 
display: flex;
align-items: center;
justify-content: center;
gap: 9px;

margin-top: 22px;
padding: 14px 18px;

border: 1px solid var(--gold);
border-radius: 10px;

background: var(--gold);
color: var(--navy);

font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;

cursor: pointer;

transition:
    transform .2s ease,
    opacity .2s ease,
    box-shadow .2s ease;
 

}

.lifeline-submit:hover {
box-shadow:
0 6px 20px rgba(196,154,42,.18);
}

.lifeline-submit:active {
transform: scale(.98);
}

.lifeline-submit:disabled {
opacity: .55;
cursor: wait;
}

/* ---------------------------------------------------------
Saved Message
--------------------------------------------------------- */

.lifeline-saved {
min-height: 20px;

 
margin-top: 14px;

font-family: "Source Serif 4", serif;
font-size: 13px;
font-style: italic;
line-height: 1.5;
text-align: center;
 

}

.lifeline-saved.success {
color: #B9D8B2;
}

.lifeline-saved.error {
color: #E5A4A4;
}

/* ---------------------------------------------------------
Immediate Help
--------------------------------------------------------- */

.lifeline-help {
max-width: 620px;
margin: 24px auto 0;
padding: 4px 8px 20px;

 
text-align: center;
 

}

.lifeline-help p {
margin: 0;

 
font-family: "Source Serif 4", serif;
font-size: 12px;
font-style: italic;
line-height: 1.7;

color: rgba(255,255,255,.42);
 

}

/* ---------------------------------------------------------
Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

 
.breathe-circle {
    animation: none;
    transform: scale(.9);
}
 

}
/* =========================================================
   LIFELINE FORM VISIBILITY FIX
   ========================================================= */

#lifelineScreen {
    display: block;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
}

#lifelineScreen.hidden {
    display: none;
}

#lifelineScreen .lifeline-section {
    display: block;
    visibility: visible;
    opacity: 1;
}

#lifelineScreen .lifeline-form {
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 2;
}

#lifelineScreen .form-group {
    display: block;
    visibility: visible;
}

#lifelineScreen input,
#lifelineScreen textarea {
    display: block;
    visibility: visible;
    opacity: 1;
}

#lifelineScreen .lifeline-checkbox {
    display: flex;
    visibility: visible;
}

#lifelineScreen .lifeline-submit {
    display: flex;
    visibility: visible;
}

/* =========================================================
   LIFELINE — ENABLE VERTICAL SCROLLING
   ========================================================= */

#lifelineScreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    padding:
        calc(env(safe-area-inset-top, 0px) + 24px)
        24px
        calc(env(safe-area-inset-bottom, 0px) + 40px);
}
#lifelineScreen .lifeline-section:last-of-type {
    margin-bottom: 30px;
}
/* =========================================================
GET UP — YOUR JOURNEY
========================================================= */

#journeyScreen {
position: fixed;
inset: 0;

 
width: 100%;
height: 100%;
height: 100dvh;

box-sizing: border-box;

overflow-x: hidden;
overflow-y: auto;

-webkit-overflow-scrolling: touch;

background: var(--navy);
color: var(--cream);

padding-bottom: 88px;
 

}

/* =========================================================
HEADER
========================================================= */

#journeyScreen .journey-header {
position: relative;

 
display: flex;
align-items: center;

min-height: 82px;

padding:
    calc(env(safe-area-inset-top, 0px) + 12px)
    52px
    12px
    52px;

box-sizing: border-box;

border-bottom: 1px solid rgba(196,154,42,.12);
 

}

#journeyScreen .journey-back {
position: absolute;
left: 16px;
top: 50%;

 
transform: translateY(-50%);

width: 38px;
height: 38px;

border: 0;
border-radius: 50%;

background: transparent;

color: rgba(255,255,255,.65);

font-size: 16px;

cursor: pointer;

transition:
    color .2s ease,
    background .2s ease;
 

}

#journeyScreen .journey-back:hover {
background: rgba(255,255,255,.05);
color: var(--cream);
}

#journeyScreen .journey-heading {
width: 100%;
text-align: center;
}

#journeyScreen .journey-heading h1 {
margin: 0;

 
font-family: "Playfair Display", serif;
font-size: 27px;
font-weight: 600;
line-height: 1.2;

color: var(--gold);
 

}

#journeyScreen .journey-heading p {
margin: 6px 0 0;

 
font-family: "Source Serif 4", serif;
font-size: 13px;
font-style: italic;
line-height: 1.5;

color: rgba(255,255,255,.48);
 

}

/* =========================================================
CONTENT
========================================================= */

#journeyScreen .journey-content {
width: 100%;
max-width: 680px;

 
margin: 0 auto;

padding:
    18px
    18px
    30px;

box-sizing: border-box;
 

}

/* =========================================================
PROGRESS
========================================================= */

#journeyScreen .journey-progress-card {
margin-bottom: 18px;
padding: 15px 17px;

 
border:
    1px solid
    rgba(196,154,42,.14);

border-radius: 14px;

background: rgba(255,255,255,.025);
 

}

#journeyScreen .journey-progress-heading {
display: flex;
align-items: center;
justify-content: space-between;

 
margin-bottom: 10px;

font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;

color: rgba(255,255,255,.48);
 

}

#journeyScreen .journey-progress-heading span:last-child {
color: var(--gold);
}

#journeyScreen .journey-progress {
width: 100%;
height: 4px;

 
overflow: hidden;

border-radius: 4px;

background: rgba(255,255,255,.08);
 

}

#journeyScreen .journey-progress-fill {
width: 0;
height: 100%;

 
border-radius: inherit;

background: var(--gold);

transition: width .5s ease;
 

}

/* =========================================================
DAY HEADER
========================================================= */

#journeyScreen .journey-day-card {
position: relative;

 
margin-bottom: 18px;
padding: 26px 20px 24px;

text-align: center;

border:
    1px solid
    rgba(196,154,42,.20);

border-radius: 18px;

background:
    radial-gradient(
        circle at 50% 0%,
        rgba(196,154,42,.10),
        transparent 62%
    ),
    rgba(255,255,255,.025);
 

}

#journeyScreen .journey-phase-label {
margin-bottom: 12px;

 
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;

color: var(--gold);
 

}

#journeyScreen .journey-day-number {
display: flex;
align-items: baseline;
justify-content: center;
gap: 18px;
}

#journeyScreen .journey-day-word {
font-family: "Source Serif 4", serif;
font-size: 36px;
font-style: italic;

 
color: rgba(255,255,255,.48);
 

}

#journeyScreen #journeyDay {
font-family: "Playfair Display", serif;
font-size: 62px;
font-weight: 600;
line-height: .95;

 
color: var(--cream);
 

}

#journeyScreen .journey-date {
margin-top: 12px;

 
font-family: "Source Serif 4", serif;
font-size: 14px;
font-style: italic;

color: rgba(255,255,255,.50);
 

}

#journeyScreen .journey-milestone {
width: fit-content;

 
margin: 15px auto 0;
padding: 6px 12px;

border-radius: 20px;

background: rgba(196,154,42,.10);

font-family: "Montserrat", sans-serif;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;

color: var(--gold);
 

}

/* =========================================================
COMMON CARD
========================================================= */

#journeyScreen .journey-entry-card,
#journeyScreen .journey-scripture-card,
#journeyScreen .journey-reflection-card,
#journeyScreen .journey-notes-card {
margin-bottom: 16px;
padding: 21px 20px;

 
box-sizing: border-box;

border:
    1px solid
    rgba(255,255,255,.07);

border-radius: 16px;

background: var(--navy-mid);

box-shadow:
    0 7px 25px rgba(0,0,0,.10);
 

}

#journeyScreen .journey-card-label {
margin-bottom: 12px;

 
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;

color: var(--gold);
 

}

/* =========================================================
TUPOU'S JOURNEY
========================================================= */

#journeyScreen .journey-text {
font-family: "Source Serif 4", serif;
font-size: 16px;
font-weight: 300;
line-height: 1.85;

 
color: rgba(255,255,255,.78);

white-space: pre-wrap;
 

}

/* =========================================================
SCRIPTURE
========================================================= */

#journeyScreen .journey-scripture-card {
border-color:
rgba(196,154,42,.15);

 
background:
    linear-gradient(
        145deg,
        rgba(196,154,42,.055),
        rgba(255,255,255,.018)
    );
 

}

#journeyScreen .journey-scripture {
padding-left: 16px;

 
border-left:
    2px solid
    rgba(196,154,42,.55);

font-family: "Playfair Display", serif;
font-size: 17px;
font-style: italic;
line-height: 1.75;

color: rgba(255,255,255,.78);
 

}

/* =========================================================
REFLECTION
========================================================= */

#journeyScreen .journey-reflection-card {
background:
rgba(255,255,255,.018);
}

#journeyScreen .journey-reflection {
font-family: "Source Serif 4", serif;
font-size: 15px;
font-style: italic;
line-height: 1.8;

 
color: rgba(255,255,255,.64);
 

}

/* =========================================================
MY JOURNEY
========================================================= */

#journeyScreen .journey-notes-intro {
margin: -3px 0 14px;

 
font-family: "Source Serif 4", serif;
font-size: 13px;
font-style: italic;
line-height: 1.6;

color: rgba(255,255,255,.42);
 

}

#journeyScreen .journey-notes {
width: 100%;
min-height: 150px;

 
box-sizing: border-box;

padding: 14px;

resize: vertical;

border:
    1px solid
    rgba(196,154,42,.20);

border-radius: 11px;

outline: none;

background: var(--navy);
color: var(--cream);

font-family: "Source Serif 4", serif;
font-size: 15px;
line-height: 1.7;

transition:
    border-color .2s ease,
    box-shadow .2s ease;
 

}

#journeyScreen .journey-notes:focus {
border-color: rgba(196,154,42,.65);

 
box-shadow:
    0 0 0 3px rgba(196,154,42,.07);
 

}

#journeyScreen .journey-notes::placeholder {
color: rgba(255,255,255,.25);
}

#journeyScreen .journey-saved {
min-height: 20px;

 
margin-top: 9px;

font-family: "Source Serif 4", serif;
font-size: 12px;
font-style: italic;
text-align: center;
 

}

#journeyScreen .journey-saved.success {
color: #B9D8B2;
}

#journeyScreen .journey-saved.error {
color: #E5A4A4;
}

#journeyScreen .journey-note-actions {
display: flex;
gap: 10px;

 
margin-top: 12px;
 

}

#journeyScreen .journey-save-button,
#journeyScreen .journey-clear-button {
min-height: 42px;

 
border-radius: 9px;

font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;

cursor: pointer;
 

}

#journeyScreen .journey-save-button {
flex: 1;

 
border: 1px solid var(--gold);

background: var(--gold);
color: var(--navy);

transition:
    transform .2s ease,
    box-shadow .2s ease;
 

}

#journeyScreen .journey-save-button:hover {
box-shadow:
0 5px 18px rgba(196,154,42,.18);
}

#journeyScreen .journey-save-button:active {
transform: scale(.98);
}

#journeyScreen .journey-clear-button {
padding: 0 17px;

 
border:
    1px solid
    rgba(255,255,255,.14);

background: transparent;
color: rgba(255,255,255,.52);
 

}

/* =========================================================
PREVIOUS / NEXT
========================================================= */

#journeyScreen .journey-navigation {
display: flex;
justify-content: space-between;
gap: 12px;

 
margin: 4px 0 18px;
 

}

#journeyScreen .journey-nav-button {
flex: 1;

 
min-height: 48px;

display: flex;
align-items: center;
justify-content: center;
gap: 8px;

border:
    1px solid
    rgba(196,154,42,.20);

border-radius: 10px;

background: transparent;

color: rgba(255,255,255,.68);

font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;

cursor: pointer;

transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
 

}

#journeyScreen .journey-nav-button:hover {
border-color: rgba(196,154,42,.55);

 
background: rgba(196,154,42,.05);

color: var(--cream);
 

}

#journeyScreen .journey-nav-button:disabled {
opacity: .25;
cursor: not-allowed;
}

#journeyScreen .journey-nav-arrow {
font-size: 17px;
color: var(--gold);
}

/* =========================================================
LIFELINE
========================================================= */

#journeyScreen .journey-lifeline {
width: 100%;

 
display: flex;
align-items: center;
justify-content: center;
gap: 10px;

margin: 0 0 25px;
padding: 13px 15px;

border:
    1px solid
    rgba(196,154,42,.14);

border-radius: 11px;

background: rgba(196,154,42,.035);

color: rgba(255,255,255,.48);

font-family: "Source Serif 4", serif;
font-size: 13px;
font-style: italic;

cursor: pointer;
 

}

#journeyScreen .journey-lifeline-icon {
color: var(--gold);
font-size: 18px;
}

/* =========================================================
BOTTOM NAVIGATION
========================================================= */

#journeyScreen .journey-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;

 
z-index: 50;

padding:
    7px
    8px
    calc(env(safe-area-inset-bottom, 0px) + 7px);

box-sizing: border-box;

background:
    rgba(8,27,43,.96);

border-top:
    1px solid
    rgba(196,154,42,.13);

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
 

}

#journeyScreen .journey-bottom-nav .bottom-nav-item {
color: rgba(255,255,255,.40);
}

#journeyScreen .journey-bottom-nav .bottom-nav-item.active {
color: var(--gold);
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 480px) {

 
#journeyScreen .journey-content {
    padding-left: 14px;
    padding-right: 14px;
}

#journeyScreen .journey-heading h1 {
    font-size: 25px;
}

#journeyScreen #journeyDay {
    font-size: 56px;
}

#journeyScreen .journey-entry-card,
#journeyScreen .journey-scripture-card,
#journeyScreen .journey-reflection-card,
#journeyScreen .journey-notes-card {
    padding: 19px 17px;
}
 

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

 
#journeyScreen * {
    scroll-behavior: auto;
    transition: none !important;
}
 

}

/* =========================================================
JOURNEY MAP
========================================================= */

.journey-screen {
background: #F4EFE6;
color: #182B42;
}

.journey-header {
background: #182B42;
color: #F4EFE6;
padding: 22px;
padding-top: calc(env(safe-area-inset-top, 0px) + 22px);
flex-shrink: 0;
position: relative;
}

.journey-title-wrap {
padding-left: 42px;
}

.journey-title-wrap h1 {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 25px;
font-weight: 700;
color: #F4EFE6;
}

.journey-title-wrap p {
margin: 3px 0 0;
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-style: italic;
color: rgba(255,255,255,.45);
}

.journey-back {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: #F4EFE6;
font-size: 18px;
cursor: pointer;
}

.journey-body {
flex: 1;
overflow-y: auto;
padding: 22px;
padding-bottom: 110px;
-webkit-overflow-scrolling: touch;
}

/* =========================================================
PROGRESS
========================================================= */

.journey-progress-track {
width: 100%;
height: 7px;
background: #D8D0C3;
border-radius: 8px;
overflow: hidden;
margin-bottom: 7px;
 padding-bottom: 110px;
}

.journey-progress-fill {
height: 100%;
width: 0;
background: #C49A2A;
border-radius: 8px;
transition: width .6s ease;
}

.journey-progress-label {
font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #3D4F65;
margin-bottom: 22px;
}

/* =========================================================
CURRENT DAY
========================================================= */

.journey-current {
text-align: center;
margin-bottom: 24px;
}

.journey-current-label {
font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
color: #3D4F65;
margin-bottom: 4px;
}

.journey-current-day {
font-family: "Playfair Display", serif;
color: #182B42;
}

.journey-current-day span {
font-size: 14px;
}

.journey-current-day strong {
font-size: 32px;
font-weight: 700;
}

.journey-current-date {
font-family: "Montserrat", sans-serif;
font-size: 11px;
color: #3D4F65;
margin-top: 2px;
}

/* =========================================================
PHASES
========================================================= */

.journey-phase {
margin-bottom: 28px;
}

.journey-phase-heading {
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1.5px solid #D8D0C3;
}

.journey-phase-number {
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #C49A2A;
margin-bottom: 2px;
}

.journey-phase-heading h2 {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 18px;
font-weight: 600;
color: #182B42;
}

.journey-phase-heading p {
margin: 3px 0 0;
font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
color: #3D4F65;
}

/* =========================================================
DAY GRID
========================================================= */

.journey-day-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
width: 100%;
}

/* =========================================================
   DAY CIRCLES
========================================================= */

.day-dot {
    appearance: none;
    -webkit-appearance: none;

    width: 50%;
    aspect-ratio: 1;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    color: #3D4F65;
    background: #F4EFE6;

    border: 1.5px solid #D8D0C3;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.day-dot:hover {
    transform: scale(1.08);
}

/* Completed */
.day-dot.completed {
    background: #C49A2A;
    border-color: #C49A2A;
    color: #182B42;
}

/* Current */
.day-dot.current {
    background: #C49A2A;
    border-color: #C49A2A;
    color: #182B42;
    transform: scale(1.14);
    box-shadow: 0 0 0 3px rgba(196, 154, 42, .25);
}

/* Locked */
.day-dot.locked {
    background: #EEE9E0;
    border-color: #D8D0C3;
    color: #B7B0A5;
    cursor: not-allowed;
    opacity: .65;
}

/* =========================================================
SPECIAL ENTRY
========================================================= */

.special-entry {
width: 100%;
margin: 8px 0 26px;

 
display: flex;
align-items: center;
gap: 14px;

padding: 15px;

border: 1px solid rgba(196,154,42,.35);
border-radius: 12px;

background: rgba(255,255,255,.35);

color: #182B42;

text-align: left;

cursor: pointer;
 

}

.special-entry.locked-entry {
opacity: .55;
cursor: not-allowed;
}

.special-entry-icon {
width: 40px;
height: 40px;

 
border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

background: #C49A2A;
color: #182B42;

font-size: 18px;

flex-shrink: 0;
 

}

.special-entry-content {
display: flex;
flex-direction: column;
}

.special-entry-title {
font-family: "Playfair Display", serif;
font-size: 16px;
font-weight: 600;
}

.special-entry-sub {
margin-top: 3px;

 
font-family: "Montserrat", sans-serif;
font-size: 10px;

color: #3D4F65;
 

}

/* =========================================================
DAY DETAIL
========================================================= */

.journey-day-detail {
margin-top: 20px;
}

.journey-day-detail[hidden] {
display: none;
}

.journey-map-hidden {
display: none;
}

.journey-detail-header {
position: relative;
text-align: center;
padding: 18px 12px 22px;
}

.journey-detail-close {
position: absolute;
right: 0;
top: 0;

 
width: 34px;
height: 34px;

border: 0;
background: transparent;

color: #182B42;
font-size: 18px;
 

}

.journey-detail-phase {
font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #C49A2A;
}

.journey-detail-day {
margin-top: 5px;
font-family: "Playfair Display", serif;
font-size: 28px;
color: #182B42;
}

.journey-milestone {
margin-top: 8px;
font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
color: #C49A2A;
}

/* =========================================================
DETAIL CARDS
========================================================= */

.journey-detail-card {
margin-bottom: 14px;
padding: 20px;

 
background: #FFFFFF;

border-radius: 12px;

box-shadow:
    0 2px 10px rgba(24,43,66,.06);
 

}

.journey-card-label {
margin-bottom: 10px;

 
font-family: "Montserrat", sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;

color: #C49A2A;
 

}

.journey-text,
.journey-scripture,
.journey-reflection {
font-family: "Source Serif 4", serif;
font-size: 15px;
line-height: 1.75;
color: #182B42;
}

.journey-scripture {
font-style: italic;
}

.journey-detail-actions {
display: flex;
gap: 10px;
margin: 18px 0;
}

.journey-nav-button {
flex: 1;

 
padding: 12px;

border: 1px solid #D8D0C3;
border-radius: 8px;

background: #FFFFFF;
color: #182B42;

font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 600;
 

}

.journey-nav-button:disabled {
opacity: .35;
}

/* =========================================================
JOURNEY NOTES
========================================================= */

.journey-notes-card {
padding: 20px;
background: #FFFFFF;
border-radius: 12px;
}

.journey-notes-card textarea {
width: 100%;
min-height: 130px;

 
box-sizing: border-box;

resize: vertical;

padding: 13px;

border: 1px solid #D8D0C3;
border-radius: 8px;

background: #F9F6F0;

color: #182B42;

font-family: "Source Serif 4", serif;
font-size: 14px;
line-height: 1.6;
 

}

.journey-note-actions {
display: flex;
gap: 10px;
margin-top: 10px;
}

.journey-save-button,
.journey-clear-button {
padding: 10px 16px;

 
border-radius: 7px;

font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;
 

}

.journey-save-button {
border: 0;
background: #182B42;
color: #F4EFE6;
}

.journey-clear-button {
border: 1px solid #D8D0C3;
background: transparent;
color: #3D4F65;
}

.journey-saved {
min-height: 18px;
margin-top: 8px;

 
font-family: "Montserrat", sans-serif;
font-size: 10px;
 

}

.journey-saved.success {
color: #54704F;
}

.journey-saved.error {
color: #9B4545;
}

/* =========================================================
LIFELINE
========================================================= */

.journey-lifeline {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;

 
width: 100%;

margin: 18px 0;

padding: 12px;

border: 0;
border-radius: 24px;

background: #182B42;
color: #F4EFE6;

font-family: "Montserrat", sans-serif;
font-size: 10px;
font-weight: 600;

cursor: pointer;
 

}

.journey-lifeline-icon {
color: #C49A2A;
font-size: 16px;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.journey-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 68px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #182B42;

    border-top: 1px solid rgba(255,255,255,.08);

    z-index: 1000;

    padding-bottom: env(safe-area-inset-bottom, 0px);
}


.journey-bottom-nav .bottom-nav-item {
    appearance: none;
    -webkit-appearance: none;

    border: 0;

    background: transparent;

    color: rgba(244,239,230,.55);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .3px;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.journey-bottom-nav
.bottom-nav-item i {

    font-size: 17px;

}


.journey-bottom-nav
.bottom-nav-item span {

    font-size: 9px;

}


.journey-bottom-nav
.bottom-nav-item.active {

    color: #C49A2A;

}


.journey-bottom-nav
.bottom-nav-item:hover {

    color: #F4EFE6;

}


.journey-bottom-nav
.bottom-nav-item.active i {

    color: #C49A2A;

}

/* ==========================================================
   GET UP
   SIGNUP & ONBOARDING
   Visual styling
   ========================================================== */

/* ----------------------------------------------------------
   SIGNUP SCREEN
   ---------------------------------------------------------- */

#signupScreen {
    padding:
        env(safe-area-inset-top, 32px)
        28px
        env(safe-area-inset-bottom, 32px);

    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#signupScreen .screen-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
}

#signupScreen .screen-header h1 {
    margin: 0;
    color: var(--cream);
    font-family: "Playfair Display", serif;
    font-size: 26px;
    font-weight: 700;
}

#signupScreen .back-button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(196,154,42,.35);
    border-radius: 50%;

    background: var(--navy-mid);
    color: var(--gold);

    cursor: pointer;
}

#signupScreen .screen-content {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

#signupScreen .content-card,
#signupScreen .quote-card {
    box-sizing: border-box;
    width: 100%;

    padding: 22px;

    background: var(--navy-mid);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}

#signupScreen .content-card h2 {
    margin: 0 0 10px;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
}

#signupScreen .content-card p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-family: "Source Serif 4", serif;
    font-size: 15px;
    line-height: 1.7;
}

#signupScreen .signup-intro {
    border-left: 2px solid var(--gold);
}

#signupScreen .form-group {
    margin-bottom: 18px;
}

#signupScreen .form-group:last-of-type {
    margin-bottom: 0;
}

#signupScreen .form-group label:not(.checkbox-label) {
    display: block;

    margin-bottom: 7px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#signupScreen input[type="email"],
#signupScreen input[type="password"] {
    box-sizing: border-box;

    width: 100%;
    min-height: 50px;

    padding: 13px 15px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(196,154,42,.28);
    border-radius: 10px;

    color: var(--cream);

    font-family: "Source Serif 4", serif;
    font-size: 16px;

    outline: none;
}

#signupScreen input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(196,154,42,.10);
}

#signupScreen input::placeholder {
    color: rgba(255,255,255,.28);
}

#signupScreen .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: rgba(255,255,255,.58);

    font-family: "Source Serif 4", serif;
    font-size: 13px;
    line-height: 1.5;

    cursor: pointer;
}

#signupScreen .checkbox-label input {
    margin-top: 3px;
    accent-color: var(--gold);
}

#signupScreen .form-status {
    min-height: 20px;

    margin: 12px 0;

    color: rgba(255,255,255,.65);

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    line-height: 1.5;
}

#signupScreen .form-status.error {
    color: #d98b8b;
}

#signupScreen .form-status.success {
    color: var(--gold);
}

#signupScreen .btn {
    box-sizing: border-box;
    width: 100%;

    min-height: 50px;

    border: none;
    border-radius: 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;
}

#signupScreen .btn-primary {
    background: var(--gold);
    color: var(--navy);
}

#signupScreen .btn-primary:hover {
    filter: brightness(1.08);
}

#signupScreen .btn-secondary {
    background: transparent;
    color: var(--gold);

    border: 1px solid rgba(196,154,42,.4);
}

#signupScreen .signup-login-link {
    text-align: center;
}

#signupScreen .signup-login-link p {
    margin-bottom: 14px;
    color: rgba(255,255,255,.45);
}

#signupScreen .quote-card {
    text-align: center;

    padding: 24px 20px;

    background: transparent;

    border: none;
}

#signupScreen blockquote {
    margin: 0;

    color: rgba(255,255,255,.62);

    font-family: "Source Serif 4", serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
}

#signupScreen .quote-reference {
    margin-top: 10px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   ONBOARDING SCREEN
   ---------------------------------------------------------- */

#onboardingScreen {
    box-sizing: border-box;

    min-height: 100%;

    padding:
        env(safe-area-inset-top, 28px)
        28px
        env(safe-area-inset-bottom, 28px);

    background: var(--navy);

    overflow-y: auto;
}

#onboardingScreen .onboarding-container {
    position: relative;

    width: 100%;
    max-width: 520px;
    min-height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}


/* Progress */

#onboardingScreen .onboarding-progress {
    width: 100%;
    height: 3px;

    margin-bottom: 24px;

    background: rgba(255,255,255,.08);

    border-radius: 3px;

    overflow: hidden;
}

#onboardingScreen .onboarding-progress-bar {
    width: 25%;
    height: 100%;

    background: var(--gold);

    transition: width .3s ease;
}


/* Header */

#onboardingScreen .onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 32px;
}

#onboardingScreen .onboarding-brand {
    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

#onboardingScreen .onboarding-step {
    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* Step panels */

#onboardingScreen .onboarding-step-panel {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    padding: 30px 24px;

    background: var(--navy-mid);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;

    text-align: center;
}

#onboardingScreen .onboarding-step-panel.hidden {
    display: none !important;
}


/* Icon */

#onboardingScreen .onboarding-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(196,154,42,.45);
    border-radius: 50%;

    color: var(--gold);

    font-size: 22px;
}


/* Headings */

#onboardingScreen .onboarding-step-panel h1 {
    margin: 0 0 14px;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}


/* Text */

#onboardingScreen .onboarding-step-panel p {
    margin: 0 auto 12px;

    max-width: 420px;

    color: rgba(255,255,255,.64);

    font-family: "Source Serif 4", serif;
    font-size: 15px;
    line-height: 1.7;
}


/* Fields */

#onboardingScreen .onboarding-field {
    margin: 24px 0;

    text-align: left;
}

#onboardingScreen .onboarding-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#onboardingScreen .onboarding-field input {
    box-sizing: border-box;

    width: 100%;
    min-height: 50px;

    padding: 13px 15px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(196,154,42,.28);
    border-radius: 10px;

    color: var(--cream);

    font-family: "Source Serif 4", serif;
    font-size: 16px;

    outline: none;
}

#onboardingScreen .onboarding-field input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(196,154,42,.10);
}


/* Buttons */

#onboardingScreen .onboarding-buttons {
    display: flex;
    gap: 12px;

    margin-top: 28px;
}

#onboardingScreen .onboarding-buttons button {
    position: relative;
    z-index: 20;

    flex: 1;

    min-height: 50px;

    padding: 13px 16px;

    border-radius: 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;

    pointer-events: auto;
}

#onboardingScreen .onboarding-buttons .btn-primary {
    background: var(--gold);
    color: var(--navy);

    border: none;
}

#onboardingScreen .onboarding-buttons .btn-secondary {
    background: transparent;
    color: var(--gold);

    border: 1px solid rgba(196,154,42,.4);
}


/* Choice buttons */

#onboardingScreen .onboarding-choice-group {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 24px;
}

#onboardingScreen .onboarding-choice {
    position: relative;
    z-index: 20;

    width: 100%;

    padding: 18px;

    display: flex;
    flex-direction: column;

    text-align: left;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;

    color: var(--cream);

    cursor: pointer;
    pointer-events: auto;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

#onboardingScreen .onboarding-choice:hover {
    border-color: rgba(196,154,42,.5);
}

#onboardingScreen .onboarding-choice.selected {
    background: rgba(196,154,42,.10);
    border-color: var(--gold);
}

#onboardingScreen .onboarding-choice-title {
    color: var(--cream);

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#onboardingScreen .onboarding-choice-description {
    margin-top: 7px;

    color: rgba(255,255,255,.52);

    font-family: "Source Serif 4", serif;
    font-size: 13px;
    line-height: 1.5;
}


/* Status */

#onboardingScreen .form-status {
    min-height: 20px;

    margin-top: 12px;

    color: rgba(255,255,255,.6);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
}

#onboardingScreen .form-status.error {
    color: #d98b8b;
}

#onboardingScreen .form-status.success {
    color: var(--gold);
}


/* Logout */

#onboardingScreen .onboarding-logout {
    position: relative;
    z-index: 20;

    align-self: center;

    margin-top: auto;
    padding: 14px 20px;

    background: transparent;
    border: none;

    color: rgba(255,255,255,.35);

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;
    pointer-events: auto;
}


/* ----------------------------------------------------------
   IMPORTANT:
   Don't allow hidden onboarding panels to intercept clicks
   ---------------------------------------------------------- */

#onboardingScreen .onboarding-step-panel.hidden,
#signupScreen.hidden {
    display: none !important;
}


/* Mobile */

@media (max-width: 480px) {

    #signupScreen {
        padding-left: 20px;
        padding-right: 20px;
    }

    #onboardingScreen {
        padding-left: 20px;
        padding-right: 20px;
    }

    #onboardingScreen .onboarding-step-panel {
        padding: 26px 20px;
    }

    #onboardingScreen .onboarding-step-panel h1 {
        font-size: 25px;
    }

}

/* ==========================================================
   GET UP
   WELCOME & LOGIN SCREENS
   ========================================================== */


/* ==========================================================
   WELCOME SCREEN
   Based on original one-page design
   ========================================================== */

#welcomeScreen {
    box-sizing: border-box;

    min-height: 100%;

    padding:
        env(safe-area-inset-top, 48px)
        28px
        env(safe-area-inset-bottom, 32px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow-y: auto;
}


/* ----------------------------------------------------------
   Welcome content
   ---------------------------------------------------------- */

#welcomeScreen .welcome-logo {
    margin-top: 20px;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 68px;
    font-weight: 700;

    line-height: .9;
    text-align: center;
}

#welcomeScreen .welcome-logo span {
    color: var(--gold);
}

#welcomeScreen .welcome-tag {
    margin-top: 10px;

    color: rgba(255,255,255,.5);

    font-family: "Source Serif 4", serif;
    font-size: 13px;
    font-style: italic;

    line-height: 1.6;
    text-align: center;
}

#welcomeScreen .welcome-intro {
    max-width: 430px;

    margin: 20px auto 0;

    color: rgba(255,255,255,.72);

    font-family: "Source Serif 4", serif;
    font-size: 14px;
    font-weight: 300;

    line-height: 1.85;
    text-align: center;
}


/* ----------------------------------------------------------
   Welcome bottom
   ---------------------------------------------------------- */

#welcomeScreen .welcome-bottom {
    width: 100%;
    max-width: 520px;

    margin: 30px auto 0;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

#welcomeScreen .setup-label {
    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;

    text-align: center;
}


/* ----------------------------------------------------------
   Date field
   ---------------------------------------------------------- */

#welcomeScreen .date-wrap {
    box-sizing: border-box;

    width: 100%;

    min-height: 54px;

    padding: 15px 18px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: var(--navy-mid);

    border: 1.5px solid rgba(196,154,42,.4);
    border-radius: 12px;
}

#welcomeScreen .date-wrap input {
    box-sizing: border-box;

    flex: 1;

    min-width: 0;

    padding: 0;

    background: none;
    border: none;
    outline: none;

    color: var(--cream);

    font-family: "Source Serif 4", serif;
    font-size: 16px;
    font-style: italic;
}

#welcomeScreen .date-wrap input::placeholder {
    color: rgba(255,255,255,.3);
}


/* ----------------------------------------------------------
   Gold buttons
   ---------------------------------------------------------- */

#welcomeScreen .btn-gold {
    box-sizing: border-box;

    width: 100%;

    min-height: 54px;

    padding: 18px;

    background: var(--gold);

    border: none;
    border-radius: 10px;

    color: var(--navy);

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease;
}

#welcomeScreen .btn-gold:hover {
    filter: brightness(1.08);
}

#welcomeScreen .btn-gold:active {
    transform: scale(.98);
}

#welcomeScreen .free-note {
    color: rgba(255,255,255,.3);

    font-family: "Source Serif 4", serif;
    font-size: 12px;
    font-style: italic;

    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   LOGIN SCREEN
   ========================================================== */

#loginScreen {
    box-sizing: border-box;

    min-height: 100%;

    padding:
        env(safe-area-inset-top, 32px)
        28px
        env(safe-area-inset-bottom, 32px);

    display: flex;
    flex-direction: column;

    overflow-y: auto;
}


/* ----------------------------------------------------------
   Login container
   ---------------------------------------------------------- */

#loginScreen .login-container {
    width: 100%;
    max-width: 480px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

#loginScreen .screen-header {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 30px;
}

#loginScreen .screen-header h1 {
    margin: 0;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 700;
}

#loginScreen .back-button {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--navy-mid);

    border: 1px solid rgba(196,154,42,.35);
    border-radius: 50%;

    color: var(--gold);

    cursor: pointer;

    position: relative;
    z-index: 20;

    pointer-events: auto;
}


/* ----------------------------------------------------------
   Login branding
   ---------------------------------------------------------- */

#loginScreen .login-logo {
    margin: 15px 0 8px;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 54px;
    font-weight: 700;

    line-height: .9;

    text-align: center;
}

#loginScreen .login-logo span {
    color: var(--gold);
}

#loginScreen .login-tag {
    margin-bottom: 30px;

    color: rgba(255,255,255,.45);

    font-family: "Source Serif 4", serif;
    font-size: 13px;
    font-style: italic;

    text-align: center;
}


/* ----------------------------------------------------------
   Login card
   ---------------------------------------------------------- */

#loginScreen .content-card,
#loginScreen .login-card {
    box-sizing: border-box;

    width: 100%;

    padding: 24px;

    background: var(--navy-mid);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}

#loginScreen .content-card h2,
#loginScreen .login-card h2 {
    margin: 0 0 20px;

    color: var(--cream);

    font-family: "Playfair Display", serif;
    font-size: 23px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   Form groups
   ---------------------------------------------------------- */

#loginScreen .form-group {
    margin-bottom: 18px;
}

#loginScreen .form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

#loginScreen .form-group input {
    box-sizing: border-box;

    width: 100%;

    min-height: 50px;

    padding: 13px 15px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(196,154,42,.28);
    border-radius: 10px;

    color: var(--cream);

    font-family: "Source Serif 4", serif;
    font-size: 16px;

    outline: none;
}

#loginScreen .form-group input:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 2px rgba(196,154,42,.10);
}

#loginScreen .form-group input::placeholder {
    color: rgba(255,255,255,.28);
}


/* ----------------------------------------------------------
   Login button
   ---------------------------------------------------------- */

#loginScreen .btn-primary {
    position: relative;
    z-index: 20;

    box-sizing: border-box;

    width: 100%;

    min-height: 52px;

    padding: 16px;

    background: var(--gold);

    border: none;
    border-radius: 10px;

    color: var(--navy);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;

    pointer-events: auto;
}

#loginScreen .btn-primary:hover {
    filter: brightness(1.08);
}


/* ----------------------------------------------------------
   Login status
   ---------------------------------------------------------- */

#loginScreen #loginStatus {
    min-height: 20px;

    margin: 10px 0;

    color: rgba(255,255,255,.6);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;

    line-height: 1.5;
}

#loginScreen #loginStatus.error {
    color: #d98b8b;
}

#loginScreen #loginStatus.success {
    color: var(--gold);
}


/* ----------------------------------------------------------
   Signup link
   ---------------------------------------------------------- */

#loginScreen .login-signup {
    margin-top: 18px;

    padding: 20px;

    text-align: center;

    background: transparent;

    border: none;
}

#loginScreen .login-signup p {
    margin: 0 0 12px;

    color: rgba(255,255,255,.4);

    font-family: "Source Serif 4", serif;
    font-size: 13px;
}

#loginScreen .btn-secondary {
    position: relative;
    z-index: 20;

    box-sizing: border-box;

    width: 100%;

    min-height: 48px;

    padding: 14px;

    background: transparent;

    border: 1px solid rgba(196,154,42,.4);
    border-radius: 10px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;

    pointer-events: auto;
}


/* ----------------------------------------------------------
   Mobile adjustments
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    #welcomeScreen {
        padding-left: 20px;
        padding-right: 20px;
    }

    #welcomeScreen .welcome-logo {
        font-size: 58px;
    }

    #loginScreen {
        padding-left: 20px;
        padding-right: 20px;
    }

    #loginScreen .login-logo {
        font-size: 48px;
    }

    #loginScreen .content-card,
    #loginScreen .login-card {
        padding: 20px;
    }

}

/* ==========================================================
   GET UP - WELCOME COLOUR OVERRIDE
   ========================================================== */

#welcomeScreen {
    background: #071B33 !important;
    color: #F4EBD0 !important;
}


/* Main GET UP logo */

#welcomeScreen .welcome-logo {
    color: #F4EBD0 !important;
}

#welcomeScreen .welcome-logo span {
    color: #C49A2A !important;
}


/* Tagline */

#welcomeScreen .welcome-tag {
    color: rgba(255,255,255,.60) !important;
}


/* Introduction */

#welcomeScreen .welcome-intro {
    color: rgba(255,255,255,.78) !important;
}


/* Bottom label */

#welcomeScreen .setup-label {
    color: #C49A2A !important;
}


/* Date area */

#welcomeScreen .date-wrap {
    background: #102947 !important;
    border-color: rgba(196,154,42,.55) !important;
}

#welcomeScreen .date-wrap input {
    color: #F4EBD0 !important;
}

#welcomeScreen .date-wrap input::placeholder {
    color: rgba(255,255,255,.40) !important;
}


/* Main gold button */

#welcomeScreen .btn-gold {
    background: #C49A2A !important;
    color: #071B33 !important;
}


/* Small note */

#welcomeScreen .free-note {
    color: rgba(255,255,255,.42) !important;
}


/* Any icons used inside the Welcome screen */

#welcomeScreen i,
#welcomeScreen .fa {
    color: #C49A2A !important;
}

/* ======================================================
   COMMUNITY — WEEKLY WORD SELECTION
   ====================================================== */

.community-word-card {
    margin-top: 20px;
}

.community-word-intro {
    margin-bottom: 20px;
    line-height: 1.6;
}

.community-words {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.community-word {
    width: 100%;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid #d8c9b5;
    border-radius: 12px;
    background: #fffaf3;
    color: #4a4038;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}

.community-word:hover {
    border-color: #b99b72;
}

.community-word:active {
    transform: scale(0.97);
}

.community-word.selected {
    background: #b99b72;
    border-color: #b99b72;
    color: #ffffff;
}

.community-word:focus-visible {
    outline: 3px solid rgba(185, 155, 114, 0.35);
    outline-offset: 2px;
}

@media (max-width: 380px) {

    .community-words {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   GET UP — THURSDAY GATHERING
   Scoped to #gatheringScreen so existing screens are untouched
   ========================================================= */

#gatheringScreen {
    background: var(--navy);
    color: var(--cream);
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

#gatheringScreen .screen-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--navy);
    border-bottom: 1px solid rgba(240, 235, 225, 0.10);
}

#gatheringScreen .screen-header h1 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cream);
    letter-spacing: 0.01em;
}

#gatheringScreen .back-button {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Scrollable content
   --------------------------------------------------------- */

#gatheringScreen .screen-content {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

#gatheringScreen .gathering-hero {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--navy-mid);
    border-radius: 14px;
    border: 1px solid rgba(240, 235, 225, 0.08);
}

#gatheringScreen .gathering-label {
    margin-bottom: 0.5rem;
    color: var(--gold);
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#gatheringScreen .gathering-hero h2 {
    margin: 0 0 0.5rem;
    color: var(--cream);
    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: 600;
}

#gatheringScreen .gathering-date {
    color: rgba(240, 235, 225, 0.65);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   Content cards
   --------------------------------------------------------- */

#gatheringScreen .content-card {
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: var(--navy-mid);
    border: 1px solid rgba(240, 235, 225, 0.08);
    border-radius: 14px;
    box-sizing: border-box;
}

#gatheringScreen .content-card h3 {
    margin: 0 0 0.75rem;
    color: var(--cream);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

#gatheringScreen .content-card p {
    margin: 0;
    color: rgba(240, 235, 225, 0.78);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   Weekly words
   --------------------------------------------------------- */

#gatheringScreen #weeklyWords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

/*
   These styles only apply to word buttons inside
   the Thursday Gathering screen.
*/

#gatheringScreen #weeklyWords button {
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(240, 235, 225, 0.15);
    border-radius: 999px;
    background: var(--navy);
    color: var(--cream);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

#gatheringScreen #weeklyWords button:hover {
    border-color: var(--gold);
}

#gatheringScreen #weeklyWords button:active {
    transform: scale(0.97);
}

#gatheringScreen #weeklyWords button.selected,
#gatheringScreen #weeklyWords button.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

/* Status beneath weekly words */

#gatheringScreen #weeklyWordStatus {
    margin-top: 0.75rem;
}

/* ---------------------------------------------------------
   Audio player
   --------------------------------------------------------- */

#gatheringScreen #gatheringAudio {
    display: block;
    width: 100%;
    margin: 0.5rem 0 1rem;
    border-radius: 8px;
}

#gatheringScreen .audio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

#gatheringScreen .audio-actions .btn {
    flex: 1 1 auto;
    min-width: 90px;
}

/* ---------------------------------------------------------
   Reflection
   --------------------------------------------------------- */

#gatheringScreen #gatheringReflection {
    color: var(--cream);
    font-size: 1rem;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   Notes
   --------------------------------------------------------- */

#gatheringScreen #gatheringNotes {
    display: block;
    width: 100%;
    min-height: 140px;
    margin-bottom: 0.85rem;
    padding: 0.9rem;
    box-sizing: border-box;

    background: var(--navy);
    border: 1px solid rgba(240, 235, 225, 0.15);
    border-radius: 10px;

    color: var(--cream);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;

    resize: vertical;
}

#gatheringScreen #gatheringNotes::placeholder {
    color: rgba(240, 235, 225, 0.40);
}

#gatheringScreen #gatheringNotes:focus {
    outline: none;
    border-color: var(--gold);
}

/* ---------------------------------------------------------
   Quote
   --------------------------------------------------------- */

#gatheringScreen .quote-card {
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.25rem;
    background: var(--navy-mid);
    border-left: 3px solid var(--gold);
    border-radius: 0 14px 14px 0;
}

#gatheringScreen .quote-card blockquote {
    margin: 0;
    color: rgba(240, 235, 225, 0.80);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   Mobile adjustments
   --------------------------------------------------------- */

@media (max-width: 480px) {

    #gatheringScreen .screen-content {
        padding: 0.75rem;
    }

    #gatheringScreen .gathering-hero {
        padding: 1.25rem 1rem;
    }

    #gatheringScreen .gathering-hero h2 {
        font-size: 1.45rem;
    }

    #gatheringScreen .content-card {
        padding: 1rem;
    }

    #gatheringScreen .audio-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #gatheringScreen .audio-actions .btn {
        width: 100%;
    }

    #gatheringScreen .audio-actions .btn:first-child {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   GET UP — WELCOME SCREEN
   Complete Welcome Screen CSS
   ========================================================= */

/* ---------------------------------------------------------
   Main Welcome Screen
   --------------------------------------------------------- */

#welcomeScreen {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    min-height: 100vh;
    min-height: 100dvh;

    box-sizing: border-box;

    display: block;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--navy, #1A2332);
    color: var(--cream, #FAF7F2);

    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------
   Background
   --------------------------------------------------------- */

#welcomeScreen .welcome-background {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10, 18, 30, 0.40) 0%,
            rgba(10, 18, 30, 0.68) 55%,
            rgba(10, 18, 30, 0.94) 100%
        ),
        url("../images/welcome-background.jpg")
        center center / cover no-repeat;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   Background Overlay
   --------------------------------------------------------- */

#welcomeScreen .welcome-overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(196, 154, 42, 0.08),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(26, 35, 50, 0.08),
            rgba(26, 35, 50, 0.40)
        );
}


/* ---------------------------------------------------------
   Main Content
   --------------------------------------------------------- */

#welcomeScreen .welcome-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 620px;

    margin: 0 auto;

    padding:
        4rem
        1.5rem
        2.5rem;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ---------------------------------------------------------
   Welcome Title
   --------------------------------------------------------- */

#welcomeScreen .welcome-title {
    margin: 0 0 1.75rem;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(2.3rem, 9vw, 4rem);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.02em;

    color: var(--cream, #FAF7F2);

    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.35);
}


/* GET UP within title */

#welcomeScreen .welcome-title span {
    display: block;

    margin-top: 0.15rem;

    color: var(--gold, #C49A2A);

    font-size: 1.15em;

    font-weight: 700;

    letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
   Welcome Text
   --------------------------------------------------------- */

#welcomeScreen .welcome-text {
    width: 100%;
    max-width: 520px;

    margin:
        0
        auto
        2rem;

    font-family:
        "Source Serif 4",
        Georgia,
        serif;

    font-size: 17px;

    line-height: 1.75;

    font-weight: 400;

    color: var(--cream, #FAF7F2);

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.45);
}


/* ---------------------------------------------------------
   Scripture
   --------------------------------------------------------- */

#welcomeScreen .welcome-scripture {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto
        0.75rem;

    padding:
        1.25rem
        1.25rem
        1.15rem;

    box-sizing: border-box;

    border-left:
        3px solid
        var(--gold, #C49A2A);

    border-radius:
        0
        10px
        10px
        0;

    background:
        rgba(10, 18, 30, 0.45);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 17px;

    font-style: italic;

    line-height: 1.65;

    color: var(--cream, #FAF7F2);

    text-align: left;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   Scripture Reference
   --------------------------------------------------------- */

#welcomeScreen .welcome-reference {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto
        2rem;

    padding-left: 1.25rem;

    box-sizing: border-box;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--gold, #C49A2A);

    text-align: left;
}


/* ---------------------------------------------------------
   Welcome Buttons Container
   --------------------------------------------------------- */

#welcomeScreen .welcome-actions {
    width: 100%;
    max-width: 440px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 0.5rem;
}


/* ---------------------------------------------------------
   Buttons — Base
   --------------------------------------------------------- */

#welcomeScreen .welcome-actions .btn {
    display: block;

    width: 100%;

    min-height: 54px;

    padding:
        14px
        20px;

    box-sizing: border-box;

    border-radius: 10px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 0.01em;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* ---------------------------------------------------------
   Primary Button
   --------------------------------------------------------- */

#welcomeScreen .welcome-actions .btn-primary {
    background:
        var(--gold, #C49A2A);

    border:
        1px solid
        var(--gold, #C49A2A);

    color:
        var(--navy, #1A2332);

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.22);
}


#welcomeScreen .welcome-actions .btn-primary:hover {
    background: #D2AA3C;

    border-color: #D2AA3C;

    transform: translateY(-1px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28);
}


#welcomeScreen .welcome-actions .btn-primary:active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   Secondary Button
   --------------------------------------------------------- */

#welcomeScreen .welcome-actions .btn-secondary {
    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(250, 247, 242, 0.42);

    color:
        var(--cream, #FAF7F2);
}


#welcomeScreen .welcome-actions .btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.11);

    border-color:
        var(--gold, #C49A2A);

    color:
        var(--cream, #FAF7F2);
}


#welcomeScreen .welcome-actions .btn-secondary:active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   Keyboard Focus
   --------------------------------------------------------- */

#welcomeScreen .welcome-actions .btn:focus-visible {
    outline:
        3px solid
        var(--gold, #C49A2A);

    outline-offset: 3px;
}


/* ---------------------------------------------------------
   Footer Quote
   --------------------------------------------------------- */

#welcomeScreen .welcome-footer {
    position: relative;

    z-index: 2;

    width: 100%;

    box-sizing: border-box;

    padding:
        1rem
        1.5rem
        2rem;

    text-align: center;
}


#welcomeScreen .welcome-footer p {
    max-width: 500px;

    margin: 0 auto;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-style: italic;

    line-height: 1.6;

    color:
        rgba(250, 247, 242, 0.78);

    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.4);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #welcomeScreen .welcome-content {
        padding:
            3rem
            1.25rem
            2rem;
    }


    #welcomeScreen .welcome-title {
        margin-bottom: 1.5rem;

        font-size:
            clamp(
                2.1rem,
                11vw,
                3.2rem
            );
    }


    #welcomeScreen .welcome-text {
        font-size: 16px;

        line-height: 1.7;
    }


    #welcomeScreen .welcome-scripture {
        font-size: 16px;

        line-height: 1.6;

        padding: 1rem;
    }


    #welcomeScreen .welcome-reference {
        margin-bottom: 1.5rem;
    }


    #welcomeScreen .welcome-actions .btn {
        min-height: 54px;

        font-size: 15px;
    }


    #welcomeScreen .welcome-footer {
        padding:
            1rem
            1.25rem
            1.5rem;
    }
}


/* ---------------------------------------------------------
   Short Screens / Smaller Phones
   --------------------------------------------------------- */

@media (max-height: 700px) {

    #welcomeScreen .welcome-content {
        padding-top: 2rem;

        padding-bottom: 1.5rem;
    }


    #welcomeScreen .welcome-title {
        margin-bottom: 1rem;
    }


    #welcomeScreen .welcome-text {
        margin-bottom: 1.25rem;
    }


    #welcomeScreen .welcome-scripture {
        padding:
            0.85rem
            1rem;
    }


    #welcomeScreen .welcome-reference {
        margin-bottom: 1rem;
    }


    #welcomeScreen .welcome-actions {
        gap: 8px;
    }


    #welcomeScreen .welcome-actions .btn {
        min-height: 50px;

        padding:
            12px
            16px;
    }


    #welcomeScreen .welcome-footer {
        padding-top: 0.5rem;

        padding-bottom: 1rem;
    }


    #welcomeScreen .welcome-footer p {
        font-size: 14px;
    }
}


/* ---------------------------------------------------------
   Extra Safety — Prevent Global Screen Rules Clipping
   --------------------------------------------------------- */

#welcomeScreen.screen,
#welcomeScreen.screen.active,
#welcomeScreen.screen.hidden {
    box-sizing: border-box;
}


/*
   The Welcome screen controls its own scrolling.
   This prevents the global .screen rules from clipping
   the second button or footer.
*/

#welcomeScreen.screen.active {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* =========================================================
   GET UP — WELCOME SCREEN
   FINAL VIEWPORT / CLIPPING FIX
   ========================================================= */

/*
   The global .screen layout can constrain the Welcome
   screen's height and clip its contents.

   Make Welcome a viewport-level scrolling screen.
*/

#welcomeScreen {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    display: block !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    background: var(--navy, #1A2332);

    z-index: 999 !important;
}


/* ---------------------------------------------------------
   Keep the Welcome background behind the content
   --------------------------------------------------------- */

#welcomeScreen .welcome-background {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0 !important;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Keep the overlay behind the content
   --------------------------------------------------------- */

#welcomeScreen .welcome-overlay {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Welcome content
   --------------------------------------------------------- */

#welcomeScreen .welcome-content {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;
    max-width: 620px !important;

    margin: 0 auto !important;

    padding:
        4rem
        1.5rem
        3rem !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

#welcomeScreen .welcome-footer {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    min-height: 70px;

    padding:
        1rem
        1.5rem
        2rem !important;

    box-sizing: border-box !important;

    text-align: center !important;
}


/* ---------------------------------------------------------
   Make sure the content creates actual scroll height
   --------------------------------------------------------- */

#welcomeScreen .welcome-content,
#welcomeScreen .welcome-footer {
    flex-shrink: 0 !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #welcomeScreen .welcome-content {
        padding:
            3rem
            1.25rem
            2.5rem !important;
    }

    #welcomeScreen .welcome-footer {
        padding:
            1rem
            1.25rem
            2rem !important;
    }
}


/* ---------------------------------------------------------
   Short mobile screens
   --------------------------------------------------------- */

@media (max-height: 700px) {

    #welcomeScreen .welcome-content {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #welcomeScreen .welcome-footer {
        padding-bottom: 1.5rem !important;
    }
}
/* ==========================================================
   SUBSCRIPTION
   ========================================================== */

#subscriptionScreen {
    min-height: 100vh;
    min-height: 100dvh;

    box-sizing: border-box;

    padding: 0 14px 50px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(92, 105, 125, 0.28),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #1b1d21 0%,
            #111214 100%
        );

    color: #f4f1ea;

    overflow-y: auto;
}

#subscriptionScreen .onboarding-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 30px;
}

/* Main subscription panel */

#subscriptionScreen .onboarding-step-panel {
    width: 100%;
    box-sizing: border-box;

    padding: 32px 26px;

    background: rgba(30, 32, 37, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35);
}

/* Plans */

#subscriptionScreen .subscription-plans {
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 100%;
    margin: 28px 0;
}

#subscriptionScreen .subscription-plan {
    width: 100%;
    box-sizing: border-box;

    padding: 24px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}

#subscriptionScreen .subscription-plan h2 {
    margin: 0 0 10px;

    color: #f4f1ea;

    font-size: 1.35rem;
    font-weight: 600;
}

#subscriptionScreen .subscription-plan-price {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
}

#subscriptionScreen .subscription-plan p {
    margin: 0 0 20px;

    color: rgba(244, 241, 234, 0.72);

    font-size: 0.95rem;
    line-height: 1.5;
}

#subscriptionScreen .subscription-plan button {
    width: 100%;
    min-height: 48px;
}

#subscriptionScreen .subscription-loading {
    padding: 30px 15px;
    text-align: center;
    color: rgba(244, 241, 234, 0.7);
}

#subscriptionScreen #subscriptionStatus {
    margin: 15px 0;
    text-align: center;
}

#subscriptionScreen #subscriptionLogout {
    display: block;
    margin: 24px auto 0;
}

#subscriptionScreen .subscription-plans button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Mobile */

@media (max-width: 480px) {

    #subscriptionScreen {
        padding: 0 12px 40px;
    }

    #subscriptionScreen .onboarding-step-panel {
        padding: 28px 18px;
        border-radius: 16px;
    }

    #subscriptionScreen .subscription-plan {
        padding: 21px 18px;
    }

    #subscriptionScreen .subscription-plan-price {
        font-size: 1.8rem;
    }
}
.day-dot.past {
    /* Previous days — darker than the current day */
}

.day-dot.current {
    /* Current day — gold */
}

.day-dot.locked {
    /* Future days — existing locked styling */
}

/* Login screen text buttons */
.text-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.text-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
}

.text-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Reset password form button */
#resetPasswordSubmit {
    display: block;
    width: 100%;
    padding: 14px 18px;
    margin-top: 20px;
    background: var(--color-primary, #7b6ca8);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#forgotPasswordSubmit {
    display: block;
    width: 100%;
    padding: 14px 18px;
    margin-top: 20px;
    background: var(--color-primary, #7b6ca8);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
#forgotPasswordSubmit:hover {
    background: var(--color-primary-dark, #65558f);
}

#forgotPasswordSubmit:active {
    transform: scale(0.98);
}

#forgotPasswordSubmit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

#forgotPasswordSubmit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* =========================================
   FORGOT PASSWORD SCREEN
   ========================================= */

#forgotPasswordScreen .screen-content {
    padding: 24px 20px 32px;
}

#forgotPasswordScreen .screen-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

#forgotPasswordScreen .screen-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

#forgotPasswordScreen .back-button {
    flex-shrink: 0;
}

#forgotPasswordScreen .login-intro {
    max-width: 440px;
    margin: 0 auto 24px;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
}

#forgotPasswordScreen #forgotPasswordForm {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 14px;
}

#forgotPasswordScreen .form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 8px;
}

#forgotPasswordScreen .form-group label {
    font-size: 14px;
    font-weight: 600;
}

#forgotPasswordScreen .form-group input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#forgotPasswordScreen .form-group input:focus {
    outline: none;
    border-color: var(--color-primary, #7b6ca8);
    box-shadow: 0 0 0 3px rgba(123, 108, 168, 0.15);
}

#forgotPasswordScreen .form-status {
    max-width: 440px;
    margin: 16px auto;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
}

#forgotPasswordScreen .form-status:empty {
    display: none;
}

#forgotPasswordScreen .form-status.success,
#forgotPasswordScreen .form-status.error {
    padding: 12px 14px;
    border-radius: 8px;
}

#forgotPasswordScreen .form-status.success {
    background: rgba(46, 139, 87, 0.12);
    color: #267348;
}

#forgotPasswordScreen .form-status.error {
    background: rgba(190, 55, 55, 0.10);
    color: #b83232;
}

#forgotPasswordScreen .quote-card {
    max-width: 440px;
    margin: 28px auto 0;
    padding: 22px 20px;
    border-radius: 12px;
    text-align: center;
}

#forgotPasswordScreen .quote-card blockquote {
    margin: 0;
    font-size: 16px;
    font-style: italic;
    line-height: 1.7;
}

#forgotPasswordScreen .quote-reference {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.75;
}

@media (max-width: 480px) {
    #forgotPasswordScreen .screen-content {
        padding: 20px 16px 28px;
    }

    #forgotPasswordScreen #forgotPasswordForm {
        padding: 20px 16px;
    }

    #forgotPasswordScreen .screen-header h1 {
        font-size: 22px;
    }
}

/* =========================================
   DASHBOARD — PERSONAL JOURNAL
   ========================================= */

.personal-journal-card .journal-introduction {
    margin: 12px 0 20px;
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
    opacity: 0.8;
}

.personal-journal-card .dashboard-journal-input {
    display: block;
    width: 100%;
    min-height: 170px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    background: rgba(128, 128, 128, 0.05);
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.personal-journal-card .dashboard-journal-input::placeholder {
    color: inherit;
    opacity: 0.45;
}

.personal-journal-card .dashboard-journal-input:focus {
    outline: none;
    border-color: var(--color-primary, #7b6ca8);
    box-shadow: 0 0 0 3px rgba(123, 108, 168, 0.15);
}

.personal-journal-card .journal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.personal-journal-card .journal-actions .btn {
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.personal-journal-card .journal-actions .btn:hover {
    opacity: 0.88;
}

.personal-journal-card .journal-actions .btn:active {
    transform: scale(0.98);
}

.personal-journal-card .dashboard-journal-saved {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
}

.personal-journal-card .dashboard-journal-saved:empty {
    display: none;
}

@media (max-width: 480px) {
    .personal-journal-card .dashboard-journal-input {
        min-height: 150px;
        padding: 13px;
    }

    .personal-journal-card .journal-actions {
        gap: 10px;
    }

    .personal-journal-card .journal-actions .btn {
        flex: 1;
        padding: 12px 14px;
    }
}

/* =========================================
   MY JOURNAL — JOURNAL LIST
   ========================================= */

.mj-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}

/* Loading and empty-state messages */
.mj-body .loading,
.mj-body .empty-state {
    padding: 28px 20px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 12px;
    background: rgba(128, 128, 128, 0.04);
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.8;
}

/* Shared styling for journal entry cards.
   These selectors apply if the generated HTML
   uses one of these common class names. */
.mj-body .journal-entry,
.mj-body .journal-item,
.mj-body .mj-entry {
    padding: 20px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 14px;
    background: rgba(128, 128, 128, 0.04);
    overflow-wrap: anywhere;
}

.mj-body .journal-entry + .journal-entry,
.mj-body .journal-item + .journal-item,
.mj-body .mj-entry + .mj-entry {
    margin-top: 0;
}

/* Journal entry dates */
.mj-body .journal-date,
.mj-body .entry-date,
.mj-body .mj-date {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
}

/* Journal entry text */
.mj-body .journal-text,
.mj-body .entry-content,
.mj-body .mj-content {
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Mobile spacing */
@media (max-width: 480px) {
    .mj-body {
        gap: 12px;
        margin-top: 16px;
    }

    .mj-body .journal-entry,
    .mj-body .journal-item,
    .mj-body .mj-entry {
        padding: 16px;
        border-radius: 12px;
    }
}

/* =========================================
   MY JOURNAL — SAVED ENTRY CARDS
   ========================================= */

#journalList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}

/* Individual journal entry */
#journalList .mj-card {
    padding: 22px 24px;
    background: var(--card-background, rgba(128, 128, 128, 0.05));
    border: 1px solid rgba(128, 128, 128, 0.20);
    border-radius: 14px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Subtle hover effect */
#journalList .mj-card:hover {
    border-color: rgba(128, 128, 128, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Journey day label */
#journalList .mj-day {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary, #7b6ca8);
}

/* Date the entry was last updated */
#journalList .mj-date {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.65;
}

/* Journal text preview */
#journalList .mj-preview {
    font-size: 15px;
    line-height: 1.8;
    color: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Empty journal message */
#journalList .empty-state {
    padding: 32px 24px;
    text-align: center;
    border: 1px solid rgba(128, 128, 128, 0.20);
    border-radius: 14px;
    background: rgba(128, 128, 128, 0.04);
}

#journalList .empty-state h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
}

#journalList .empty-state p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.75;
}

/* Mobile layout */
@media (max-width: 480px) {
    #journalList {
        gap: 12px;
        margin-top: 16px;
    }

    #journalList .mj-card {
        padding: 18px;
        border-radius: 12px;
    }

    #journalList .mj-day {
        font-size: 16px;
    }

    #journalList .mj-preview {
        font-size: 14px;
        line-height: 1.75;
    }
}

.reset-password-message {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.7;
}

.reset-password-message:empty {
    display: none;
}

.reset-password-message.success {
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(46, 139, 87, 0.12);
    color: #267348;
}

.reset-password-message.error {
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(190, 55, 55, 0.10);
    color: #b83232;
}

#resetPasswordSubmit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Sign Out bottom navigation item */
.bottom-nav .nav-signout {
    color: #b65353;
}

.bottom-nav .nav-signout .nav-icon {
    font-size: 20px;
}

.bottom-nav .nav-signout:hover {
    background: rgba(182, 83, 83, 0.08);
}

.bottom-nav .nav-signout:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}


/* Journey day circles — reduced size */
#journeyScreen .journey-day-circle {
    width: 50%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Larger numbers inside the circles */
#journeyScreen .journey-day-circle .journey-day-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
/* Onboarding - Continue button */
button#onboardingNext1.btn-primary.onboarding-next {
    display: block;
    width: 100%;
    padding: 15px 20px;
    margin-top: 24px;
    background-color: #6B8E76;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

button#onboardingNext1.btn-primary.onboarding-next:hover {
    background-color: #587762;
}

button#onboardingNext1.btn-primary.onboarding-next:active {
    transform: scale(0.99);
}

button#onboardingNext1.btn-primary.onboarding-next:focus-visible {
    outline: 3px solid #A8C5AE;
    outline-offset: 3px;
}

/* Day 0 welcome screen */
.day-zero-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

.day-zero-header {
    text-align: center;
    padding: 28px 10px;
}

.day-zero-header h1 {
    margin: 12px 0;
}

.day-zero-header p {
    line-height: 1.7;
}

.day-zero-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.8;
}

#dayZeroAudio {
    display: block;
    width: 100%;
    max-width: 100%;
}

#dayZeroContinue {
    display: block;
    width: 100%;
    margin: 24px 0 0;
}

#dayZeroStatus {
    color: #a33;
    margin-top: 12px;
}