/* Covenant Course — the shared stylesheet for all three pages.
 *
 * The token block below is copied character-for-character from
 * staff-hub/public/index.html and elder-hub/public/index.html so this site
 * reads as the same family as the dashboards. One addition: --serif.
 *
 * The handoff prototype was a warm cream/terracotta editorial system. That is
 * gone — page ground, cards, rules, accents and every label are Forum's
 * navy/sky. What survives from it is Newsreader, kept deliberately for h1/h2,
 * scripture, and the closing benediction: this is a page people read slowly,
 * and the serif is doing work there that Mulish would not.
 *
 * Contract for anyone adding markup: use the classes defined here. Do not
 * write new colors, new radii, or new shadows — if something needs a value
 * that isn't a token, it belongs in this file, once.
 */

:root{
    --navy:#0f3654; --forum:#105498; --sky:#2d9ded; --ocean:#65dbed; --aqua:#b8f7f6;
    --green:#8ecd50; --green-dark:#5a8a1f; --amber:#e0952a; --amber-dark:#a86a15;
    --grey:#b2b8c4; --charcoal:#575759;
    --page:#eef0f3; --card:#ffffff;
    --rail:#fbfcfd;
    --rule-strong:#e3e6eb; --rule:#e8eaef;
    --chip-green-bg:#eef7e2; --chip-amber-bg:#faf1e0; --chip-sky-bg:#e7f1fb;
    --sans:'Mulish',system-ui,sans-serif;
    --cond:'Barlow Condensed',sans-serif;
    --serif:'Newsreader',Georgia,serif;
    --shadow-card:0 6px 26px rgba(15,54,84,.08);
    --shadow-float:0 8px 30px rgba(15,54,84,.14);
    --header-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--page);font-family:var(--sans);color:var(--navy);-webkit-font-smoothing:antialiased}
a{color:var(--forum)}
::selection{background:var(--aqua);color:var(--navy)}
input,textarea,select,button{font-family:var(--sans)}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:#9aa3ae;font-weight:500}

/* ---------- masthead — the family navy bar ---------- */

.app-header{position:sticky;top:0;z-index:60;background:var(--navy);padding:14px 24px;display:flex;align-items:center;gap:14px}
.hdr-logo{width:34px;height:34px;object-fit:contain;flex:none}
.hdr-titles{min-width:0}
.hdr-title{font:900 17px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-eyebrow{font:700 10px/1.3 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--ocean);margin-top:3px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.hdr-cta{background:var(--sky);color:#fff;border:none;border-radius:8px;padding:10px 16px;font:700 12.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s ease}
.hdr-cta:hover{background:#1b8ad8}
.hdr-back{color:#cfe0ee;text-decoration:none;font:700 13px var(--sans);white-space:nowrap}
.hdr-back:hover{color:#fff}
.back-brief{display:none}
.hdr-menu{display:none;width:38px;height:38px;flex:none;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:700 15px/1 var(--sans);cursor:pointer}
.hdr-menu:hover{background:rgba(255,255,255,.12)}

/* ---------- shell: sticky TOC rail + content column ---------- */

.shell{display:flex;align-items:flex-start;max-width:1160px;margin:0 auto}
.toc{position:sticky;top:calc(var(--header-h) + 14px);width:260px;flex:none;max-height:calc(100vh - var(--header-h) - 28px);overflow-y:auto;padding:34px 16px 60px 28px}
.toc-group{margin-bottom:22px}
.toc-glabel{display:block;text-decoration:none;font:700 12px/1.35 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.toc-glabel:hover{color:var(--forum)}
.toc-item{display:block;text-decoration:none;border-left:2px solid var(--rule-strong);font:600 13px/1.4 var(--sans);color:var(--charcoal);padding:6px 0 6px 12px;transition:color .15s ease,border-color .15s ease}
.toc-item:hover{color:var(--forum);border-left-color:var(--sky)}
.toc a:focus-visible,.drawer a:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

.wrap{flex:1;min-width:0;max-width:760px;margin:0 auto;padding:clamp(28px,5vw,48px) 28px 120px}

/* mobile drawer — same TOC content, off canvas */
.scrim{position:fixed;inset:0;z-index:85;background:rgba(15,54,84,.4);display:none}
.scrim.on{display:block}
.drawer{position:fixed;left:0;top:0;bottom:0;z-index:90;width:290px;max-width:84vw;background:var(--page);box-shadow:var(--shadow-float);padding:20px 20px 40px;overflow-y:auto;transform:translateX(-102%);transition:transform .22s ease}
.drawer.on{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer-head span{font:700 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8b95a1}
.drawer-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--rule-strong);background:var(--card);cursor:pointer;color:var(--charcoal);font:700 13px/1 var(--sans)}
.drawer-close:hover{border-color:var(--sky)}
/* Shown only below 640px, where the masthead button is hidden. */
.drawer-cta{display:none;align-items:center;justify-content:center;background:var(--sky);color:#fff;border-radius:8px;padding:12px 16px;margin-bottom:22px;font:700 12.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}

/* ---------- hero ---------- */

.hero{padding:8px 0 40px;border-bottom:1px solid var(--rule-strong);scroll-margin-top:calc(var(--header-h) + 16px)}
.eyebrow{font:700 12px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--forum)}
.hero h1{margin-top:14px;font:500 clamp(34px,5.2vw,50px)/1.08 var(--serif);letter-spacing:-.01em;color:var(--navy)}
.deck{margin-top:16px;font:400 italic clamp(18px,2.4vw,21px)/1.5 var(--serif);color:var(--charcoal);max-width:56ch}

/* ---------- sections ---------- */

.sec{padding:40px 0;border-bottom:1px solid var(--rule-strong);scroll-margin-top:calc(var(--header-h) + 16px)}
.sec:last-of-type{border-bottom:none}
.sec-eyebrow{font:700 11.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--forum);margin-bottom:12px}
.sec h2{font:500 clamp(26px,3.6vw,34px)/1.15 var(--serif);color:var(--navy)}
.sec h3{font:500 clamp(24px,3vw,29px)/1.2 var(--serif);color:var(--navy)}
.sec h4{font:800 16px/1.3 var(--sans);color:var(--navy)}
.sec p{margin-top:16px;font:500 15.5px/1.75 var(--sans);color:var(--charcoal);max-width:64ch}
.sec p:first-of-type{margin-top:14px}
.sec p strong,.sec li strong{color:var(--navy);font-weight:700}
.sec-note{margin-top:8px;font:500 14.5px/1.6 var(--sans);color:#8b95a1;max-width:64ch}
.lede{font-weight:600!important;color:var(--navy)!important}
.u{color:var(--navy);font-weight:600;border-bottom:2px solid var(--sky)}

/* session divider — the navy banner from winter-weather */
.banner{background:var(--navy);border-radius:12px;padding:clamp(26px,4.5vw,38px) clamp(24px,4.5vw,36px);margin:44px 0 4px;color:#fff;scroll-margin-top:calc(var(--header-h) + 16px)}
.banner .eyebrow{color:var(--ocean)}
.banner h2{margin-top:10px;font:500 clamp(26px,4vw,36px)/1.15 var(--serif);color:#fff}
.banner p{margin-top:10px;font:500 15.5px/1.6 var(--sans);color:rgba(255,255,255,.82);max-width:56ch}

/* ---------- cards, callouts, quotes ---------- */

.card{background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow-card)}
.card-label{font:700 11.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8b95a1;margin-bottom:14px}

.callout{margin-top:20px;border:1px solid var(--rule-strong);border-radius:12px;padding:16px 20px}
.callout-title{font:700 11.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.callout p{margin-top:6px;max-width:none}
.callout p:first-of-type{margin-top:6px}
.callout .pull{margin-top:8px}
.callout.key{background:var(--chip-sky-bg);border-color:#cfe6f9}
.callout.key .callout-title{color:var(--forum)}
.callout.note{background:var(--rail)}
.callout.note .callout-title{color:#8b95a1}
.callout.warn{background:var(--chip-amber-bg);border-color:#f0dfc0}
.callout.warn .callout-title{color:var(--amber-dark)}

blockquote.scripture{margin-top:20px;padding:16px 22px;border-left:3px solid var(--ocean);background:#f4fbfd;border-radius:0 9px 9px 0}
blockquote.scripture p{margin:0;font:400 italic 18.5px/1.6 var(--serif);color:var(--navy);max-width:58ch}
blockquote.scripture p + p{margin-top:12px}
blockquote.scripture cite{display:block;margin-top:10px;font:700 10.5px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--forum);font-style:normal}
.quotes-2{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
.quotes-2 blockquote.scripture{flex:1 1 260px;margin-top:0}
.quotes-2 blockquote.scripture p{font-size:16.5px}

.pull{margin-top:18px;font:400 italic clamp(20px,2.8vw,25px)/1.45 var(--serif);color:var(--navy);max-width:52ch}
.benediction{margin-top:22px;font:400 italic 19px/1.6 var(--serif);color:var(--navy);max-width:56ch}

/* ---------- numbered lists ---------- */

.numlist{margin-top:20px}
.numrow{display:flex;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--rule)}
.numrow:first-child{border-top:none}
.n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font:800 11px/26px var(--sans);text-align:center;letter-spacing:.02em}
.numrow-text{font:600 15.5px/1.5 var(--sans);color:var(--navy)}

/* statement-of-faith / commitment cards */
.stack{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.move-label{margin-top:24px;font:700 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8b95a1}
.move-label:first-child{margin-top:0}
.item{background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-card)}
.item-head{display:flex;align-items:center;gap:12px}
.item-title{font:800 12.5px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--forum)}
.item-text{margin-top:12px;font:500 15px/1.7 var(--sans);color:var(--charcoal)}
.item-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);font:500 italic 14.5px/1.6 var(--sans);color:var(--navy)}

/* ---------- two-column commitments ---------- */

.cols{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px}
.col{flex:1 1 300px;min-width:0}
.col-head{font:800 13px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding-bottom:10px;border-bottom:2px solid var(--rule-strong);margin-bottom:14px}
.sub-label{margin:18px 0 10px;font:700 10.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8b95a1}
.sub-label:first-child{margin-top:0}

/* ---------- covenant vs contract ---------- */

.compare{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:22px}
.compare-card{background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-card)}
.compare-card.is-covenant{border-left:4px solid var(--sky)}
.compare-kind{font:700 11.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#8b95a1;margin-bottom:10px}
.compare-card.is-covenant .compare-kind{color:var(--forum)}
.compare-quote{font:400 italic 19px/1.45 var(--serif);color:var(--navy)}
.compare-card p{margin-top:10px;font-size:14.5px;max-width:none}

/* ---------- the gifts reference ---------- */

.gifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 28px;margin-top:20px}
.gift{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--rule)}
.gift .num{flex:none;font:700 11px/1.6 var(--cond);letter-spacing:.08em;color:#8b95a1}
.gift .name{flex:1;font:600 14.5px/1.5 var(--sans);color:var(--navy)}
.gift .refs{flex:none;font:500 12.5px/1.5 var(--sans);color:#8b95a1;text-align:right}
.allusions{margin-top:22px}

/* the one honest number */
.stat{margin-top:20px;background:var(--navy);border-radius:12px;padding:20px 24px;color:#fff}
.stat .stat-label{font:700 10.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--ocean)}
.stat .stat-big{margin-top:8px;font:900 clamp(28px,4vw,36px)/1.1 var(--sans)}
.stat p{margin-top:8px;font:500 14.5px/1.6 var(--sans);color:rgba(255,255,255,.82);max-width:52ch}

/* ---------- At Your Table ---------- */

.round{margin-top:24px;background:var(--card);border:1px solid var(--rule-strong);border-left:4px solid var(--sky);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow-card);scroll-margin-top:calc(var(--header-h) + 16px)}
.round-eyebrow{font:700 11px/1.35 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--forum)}
.round-title{margin-top:6px;font:500 21px/1.3 var(--serif);color:var(--navy)}
ol.round-qs{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
ol.round-qs li{font:500 15px/1.65 var(--sans);color:var(--charcoal)}

/* ---------- pathway ---------- */

.panel{margin-top:24px;background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:clamp(24px,4vw,32px);box-shadow:var(--shadow-card)}
.steps{counter-reset:step}
.step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.step:first-child{border-top:none}
.step-body h4{font:800 15.5px/1.3 var(--sans);color:var(--navy)}
.step-body p{margin-top:5px;font:500 14.5px/1.6 var(--sans);color:var(--charcoal);max-width:56ch}

/* ---------- footer ---------- */

footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule-strong);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:500 13px/1.6 var(--sans);color:#8b95a1}
footer a{color:var(--forum);text-decoration:none;font-weight:700}
footer a:hover{text-decoration:underline}

/* ---------- forms (feedback + unlock) ---------- */

.form-intro{margin-top:16px;font:500 15.5px/1.7 var(--sans);color:var(--charcoal);max-width:60ch}
.field{margin-top:26px}
.f-label{display:block;font:800 12.5px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.f-help{margin-top:5px;font:500 13.5px/1.5 var(--sans);color:#8b95a1}
.f-hint{margin-top:6px;font:500 12.5px/1.4 var(--sans);color:#9aa3ae}
input[type=text],input[type=password],select,textarea{
    width:100%;margin-top:10px;padding:11px 13px;border:1.5px solid var(--rule-strong);border-radius:10px;
    font:500 15px/1.55 var(--sans);color:var(--navy);background:#fff;outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(45,157,237,.15)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23105498' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.qblock{margin-top:30px;padding-top:26px;border-top:1px solid var(--rule-strong)}
.qhead{display:flex;gap:14px;align-items:baseline}
.qnum{flex:none;font:700 11px/1.6 var(--cond);letter-spacing:.1em;color:var(--forum)}
.qtext{font:800 16.5px/1.4 var(--sans);color:var(--navy)}
.qhelp{margin-top:5px;margin-left:31px;font:500 italic 14px/1.5 var(--sans);color:#8b95a1}
.qblock textarea{margin-top:12px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--rule-strong);background:#fff;border-radius:10px;padding:11px 18px;font:700 13.5px var(--sans);color:var(--forum);cursor:pointer;text-decoration:none;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.btn:hover{border-color:var(--sky);transform:translateY(-1px)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:800}
.btn-primary:hover{background:#164a72;border-color:#164a72}
.btn-danger{color:var(--amber-dark)}
.btn-danger:hover{border-color:var(--amber)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;border-color:var(--rule-strong)}
.btn-primary:disabled{background:var(--grey);border-color:var(--grey)}
.btn-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.msg{margin-top:18px;border-radius:10px;padding:12px 16px;font:600 14px/1.5 var(--sans)}
.msg.err{background:var(--chip-amber-bg);border:1px solid #f0dfc0;color:var(--amber-dark)}
.msg.ok{background:var(--chip-green-bg);border:1px solid #d6ebbb;color:var(--green-dark)}
.msg[hidden]{display:none}

/* ---------- results page ---------- */

.tabs{display:flex;gap:4px;margin-top:26px;border-bottom:1px solid var(--rule-strong);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:none;border:0;border-bottom:3px solid transparent;padding:12px 12px 10px;font:700 12.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#8b95a1;cursor:pointer}
.tab:hover{color:var(--forum)}
.tab.on{color:var(--forum);border-bottom-color:var(--sky)}

.stat-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-top:22px}
.fact{background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:14px 15px 13px;box-shadow:var(--shadow-card)}
.f-kicker{font:700 10px/1.3 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--forum)}
.f-big{margin-top:6px;font:900 22px/1.2 var(--sans);color:var(--navy)}
.f-note{margin-top:4px;font:600 11.5px/1.4 var(--sans);color:#8b95a1}

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.controls select{width:auto;min-width:190px;margin-top:0}

.qgroup{margin-top:30px}
.qgroup-head{display:flex;gap:12px;align-items:baseline;border-bottom:2px solid var(--rule-strong);padding-bottom:10px;margin-bottom:6px}
.qgroup-head .qnum{font-size:12px}
.qgroup-head h3{font:800 17px/1.3 var(--sans);color:var(--navy)}

.answer{padding:14px 0;border-top:1px solid var(--rule)}
.answer:first-child{border-top:none}
.answer-meta{font:700 10.5px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#8b95a1;margin-bottom:7px}
.answer-body{font:500 15px/1.7 var(--sans);color:var(--charcoal);white-space:pre-wrap}

.resp{margin-top:16px;background:var(--card);border:1px solid var(--rule-strong);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-card)}
.resp.is-flagged{border-left:4px solid var(--amber)}
.resp-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.resp-name{font:800 17px/1.3 var(--sans);color:var(--navy)}
.resp-meta{font:700 10.5px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#8b95a1}
.resp-qa{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.resp-qa .q{font:800 13.5px/1.4 var(--sans);color:var(--navy)}
.resp-qa .a{margin-top:5px;font:500 14.5px/1.7 var(--sans);color:var(--charcoal);white-space:pre-wrap}

.chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 11px;font:700 10.5px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.chip.flag{background:var(--chip-amber-bg);color:var(--amber-dark)}
.empty{margin-top:26px;background:var(--card);border:1px dashed var(--rule-strong);border-radius:12px;padding:26px;text-align:center;font:500 14.5px/1.6 var(--sans);color:#8b95a1}

.unlock{max-width:420px;margin:0 auto;padding-top:20px}

/* ---------- responsive ---------- */

@media (max-width:960px){
    .toc{display:none}
    .hdr-menu{display:block}
    .wrap{max-width:none;margin:0}
}
@media (max-width:640px){
    .app-header{padding:12px 16px;gap:12px}
    .hdr-title{font-size:15px;letter-spacing:.1em}
    /* "Reference material" costs 122px of a 365px bar, which was enough to
       ellipse the page title next to it. The arrow plus "Back" is the same
       affordance in a third of the width. */
    .hdr-back{font-size:12.5px}
    .back-full{display:none}
    .back-brief{display:inline}
    /* The feedback button moves into the drawer down here. Wrapping the bar
       instead cost a third of the screen to a header that is sticky on every
       one of this page's 13,000 pixels; squeezing it truncated the title to
       "COVENANT C…". The drawer is already the mobile nav — it can hold one
       more thing. */
    .hdr-cta{display:none}
    .drawer-cta{display:flex}
    .wrap{padding:24px 18px 90px}
    .qhelp{margin-left:0}
    .gift .refs{font-size:11.5px}
}

/* ---------- print ---------- */

@media print{
    .app-header,.toc,.drawer,.scrim,.tabs,.controls,.btn,.no-print{display:none!important}
    body{background:#fff}
    .wrap{max-width:none;padding:0}
    .shell{display:block}
    .sec,.round,.resp{page-break-inside:avoid}
    .card,.item,.round,.panel,.resp,.fact{box-shadow:none}
    .banner,.stat{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    @page{margin:.7in}
}