/* Chapala Theological Seminary — one stylesheet for every page.
 *
 * It replaces the 102 per-page stylesheets in public/assets/css. Those were
 * not 102 designs: clustering them by selector vocabulary found 18, and the
 * rest were copies that had drifted. A student moving from Acts to 1 Peter met
 * a different site each time, and a change to a shared component had to be
 * made 102 times or not at all.
 *
 * What still varies per course is --accent and --accent-ink. Nothing else.
 *
 * The class names below are the ones the 451 unit bodies already use. The
 * bodies were not rewritten to suit this file; this file was written to suit
 * them, because rewriting 451 pages of lesson prose is how lesson prose gets
 * lost. See tools/prose-baseline.mjs.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#f6f1e8; --card:#fffdfa; --ink:#22201d; --muted:#6b6154;
  --rule:#d7cec1; --rule-soft:#e7dfd2;
  --accent:#5b3a1f; --accent-ink:#ffffff;
  --gold:#c9a032; --gold-bright:#f4c542;
  --ok-bg:#e8f5ea; --ok-ink:#1f6b3b; --ok-line:#bfe0c8;
  --no-bg:#fae8e8; --no-ink:#8a1f1f; --no-line:#e8bdbd;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --shell:1040px;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px; --s6:56px;
  --r:10px;
}

/* Per-course accent. The seminary's ground stays the same warm paper; the
   spine colour tells a student which course they are in without a label. */
body[data-course="ots"],body[data-course="genesis"],body[data-course="psalms"]{--accent:#5b3a1f}
body[data-course="nt"],body[data-course="matt"],body[data-course="john"],body[data-course="acts"]{--accent:#7a3b12}
body[data-course="1peter"],body[data-course="galatians"],body[data-course="romans"],body[data-course="rev"]{--accent:#2f4f2f}
body[data-course="st"],body[data-course="hs"],body[data-course="pent"]{--accent:#3d3a6b}
body[data-course="ch"],body[data-course="pentecostal"],body[data-course="cults"]{--accent:#5c2c3a}
body[data-course="pm"],body[data-course="cs"],body[data-course="dp"],body[data-course="deaconfamilyministry"]{--accent:#2b4a5e}
body[data-course="evangelism"],body[data-course="evanpreach"],body[data-course="missions"],body[data-course="radical"]{--accent:#8a4a12}
body[data-course="apol"],body[data-course="bible"],body[data-course="hermeneutics"],body[data-course="la"]{--accent:#37474f}
body[data-course="ce"],body[data-course="cg"],body[data-course="pt"],body[data-course="wr"],body[data-course="worship"]{--accent:#4a3566}
body[data-course="biblecharacters"],body[data-course="biblecharacters2"],body[data-course="josh"],body[data-course="loc"],body[data-course="re"],body[data-course="al"]{--accent:#6b4423}

/* ── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
     font:400 18px/1.72 var(--body);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.18;
            margin:0;text-wrap:balance}
p{margin:var(--s3) 0}
a{color:var(--accent)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s5) 0}
::selection{background:var(--gold-bright);color:#3a2c07}

/* The shell. `.container` and `.wrap` are the two names the bodies already use
   for "the column the page lives in"; both resolve here. */
.wrap,.container{width:100%;max-width:var(--shell);margin-inline:auto;
                 padding-inline:var(--s3)}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.cts-masthead{background:var(--accent);color:var(--accent-ink);
              border-bottom:4px solid var(--gold)}
.cts-masthead .wrap{padding-block:var(--s6) var(--s5);text-align:center}
.cts-masthead h1{font-family:var(--display);
                 font-size:clamp(1.55rem,4.2vw,2.3rem);
                 margin:0 auto;max-width:34ch;color:var(--accent-ink)}
.cts-masthead h2,.cts-masthead h3{font-family:var(--body);font-weight:600;
                 font-size:1.02rem;opacity:.92;margin-top:var(--s2);
                 color:var(--accent-ink)}
.cts-masthead p,.cts-masthead div{color:inherit}
.cts-masthead p{font-size:.95rem;opacity:.78;margin:var(--s2) auto 0;max-width:62ch}
.cts-masthead a{color:var(--accent-ink);text-decoration-color:rgba(255,255,255,.5)}
.cts-masthead small{opacity:.75}
/* The eyebrow line: course name above the unit title. */
.cts-masthead .course,.cts-masthead .eyebrow,.cts-masthead .course-title,
.cts-masthead .unit-badge,.cts-masthead .unit,.cts-masthead .sub,
.cts-masthead .subtitle,.cts-masthead .unit-title,.cts-masthead .unit-meta{
  font-family:var(--body);font-size:.95rem;opacity:.88;margin-top:var(--s1)}
.cts-masthead .eyebrow,.cts-masthead .course{
  font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.8;margin:0 0 var(--s2)}
.cts-masthead .credits,.cts-masthead .instructors,.cts-masthead .course-author{
  font-size:.88rem;opacity:.72;margin-top:var(--s3)}
.cts-masthead .crest{margin-bottom:var(--s2)}
/* Some courses open with a scripture epigraph inside the title block. */
.cts-masthead .scripture{
  background:rgba(255,255,255,.08);border-left:3px solid var(--gold-bright);
  color:var(--accent-ink);max-width:62ch;margin-inline:auto;text-align:left}
.cts-masthead .scripture cite{color:rgba(255,255,255,.72)}
/* Hebrew/Greek display lines in the language courses. */
.cts-masthead .hb,.cts-masthead .gk{font-size:1.9rem;line-height:1.4}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.cts-nav{position:sticky;top:0;z-index:30;
         background:color-mix(in srgb,var(--paper) 92%,transparent);
         -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
         border-bottom:1px solid var(--rule)}
@supports not (backdrop-filter:blur(8px)){.cts-nav{background:var(--paper)}}
.cts-nav .wrap{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
               justify-content:space-between;padding-block:var(--s2)}
/* min-width:0 on every flex child: without it a long row of unit pills sets a
   min-content floor wider than a phone, and the whole page scrolls sideways.
   Media queries cannot fix that -- it is a sizing rule, not a breakpoint. */
.cts-nav .wrap > *{min-width:0}
.cts-navmain{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
             min-width:0;flex:1 1 auto}
.cts-navmain > *{min-width:0}
.cts-units{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:0;padding:0}
.cts-units a{display:grid;place-items:center;min-width:34px;min-height:34px;
             border-radius:50%;text-decoration:none;
             font:600 .86rem/1 var(--body);font-variant-numeric:tabular-nums;
             color:var(--muted);border:1px solid var(--rule);background:var(--card)}
.cts-units a:hover{border-color:var(--accent);color:var(--accent)}
.cts-units a.done{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.cts-units a.here{background:var(--gold-bright);color:#3a2c07;
                  border-color:var(--gold);font-weight:700}
.cts-units a.locked{opacity:.45;pointer-events:none}
.cts-steps{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;min-width:0}
.cts-steps .btn{min-width:0;flex:0 1 auto}
.cts-units{min-width:0}
.cts-seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;
         overflow:hidden;background:var(--card)}
.cts-seg button{appearance:none;border:0;background:none;cursor:pointer;
                font:600 .82rem/1 var(--body);color:var(--muted);
                padding:9px 14px;min-height:38px}
.cts-seg button + button{border-left:1px solid var(--rule-soft)}
.cts-seg button.active,.cts-seg button[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-ink)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn,.small,button.primary,button.secondary,.actions button{
  appearance:none;cursor:pointer;font:600 .88rem/1 var(--body);
  min-height:38px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--accent);background:var(--card);color:var(--accent);
  text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;gap:6px}
.btn.solid,.btn.primary,button.primary{
  background:var(--accent);color:var(--accent-ink)}
.btn.secondary,button.secondary{background:var(--card);color:var(--muted);
                                border-color:var(--rule)}
.btn:disabled,button:disabled,.btn[disabled]{
  opacity:.4;cursor:not-allowed}
.btn:hover:not(:disabled){border-color:var(--accent)}
.actions{
  display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ── Content surfaces ───────────────────────────────────────────────────── */
main{display:block;padding-block:var(--s5) var(--s6)}
.card,.pane{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
@media(max-width:560px){.card,.pane{padding:var(--s3)}}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
/* A pane is one language's whole column; it is not a separate surface. */
.pane{border:0;background:none;padding:0;margin:0}

h2,.lesson h2{font-size:1.42rem;color:var(--accent);
  margin-top:var(--s5);padding-bottom:var(--s1);border-bottom:2px solid var(--rule)}
h2:first-child,.card > h2:first-child{margin-top:0}
h3{font-size:1.14rem;color:var(--accent);margin-top:var(--s4)}
h4{font-size:1rem;margin-top:var(--s3)}
.lead{font-size:1.06rem;color:var(--ink)}
ul,ol{padding-left:1.35em}
li{margin:var(--s1) 0}

/* ── Scripture ──────────────────────────────────────────────────────────── */
/* display:block is load-bearing, not decoration: several courses mark a
   quotation with a <span>, and a left border and padding on an inline element
   wrap around the line ends instead of down the side, clipping the reference
   that sits inside it. A scripture quotation is a block by nature. */
.scripture,blockquote{
  display:block;margin:var(--s4) 0;padding:var(--s3) var(--s4);
  background:var(--paper);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;font-style:italic}
.card .scripture,.card blockquote{background:var(--paper)}
.scripture cite,blockquote cite,.ref,.passage-label{
  display:block;font-style:normal;font-size:.85rem;color:var(--muted);
  margin-top:var(--s2);letter-spacing:.04em}
.passage-label{font-weight:600;text-transform:uppercase;letter-spacing:.1em;
               font-size:.72rem;margin:0 0 var(--s1)}
.note{font-size:.88rem;color:var(--muted)}

/* ── Figures ────────────────────────────────────────────────────────────── */
.illustration,figure{margin:var(--s4) 0;text-align:center}
.illustration img,figure img{border-radius:var(--r);
  border:1px solid var(--rule)}
figcaption,.illustration .caption{font-size:.85rem;color:var(--muted);
  margin-top:var(--s2);font-style:italic}

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress-grid,.progress-section{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:var(--s3) var(--s4);margin:0 0 var(--s4)}
.progress-grid h3,.progress-section h3{font-family:var(--body);font-weight:600;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s2);border:0;padding:0}
.progress-grid .units,.progress-section .units{display:flex;flex-wrap:wrap;
  gap:var(--s1);list-style:none;margin:0;padding:0}
.progress-grid .units a,.progress-grid .units span,
.progress-section .units a,.progress-section .units span{
  display:grid;place-items:center;min-width:32px;min-height:32px;
  border-radius:50%;font:600 .82rem/1 var(--body);font-variant-numeric:tabular-nums;
  color:var(--muted);border:1px solid var(--rule);text-decoration:none;
  background:var(--paper)}
.progress-grid .units .done,.progress-section .units .done{
  background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.progress-grid .units .here,.progress-grid .units .current,
.progress-section .units .here{background:var(--gold-bright);color:#3a2c07;
  border-color:var(--gold)}
.progress-bar{height:10px;border-radius:999px;background:var(--rule-soft);
  overflow:hidden;margin:var(--s2) 0}
.progress-bar-fill{height:100%;background:var(--accent);color:transparent;
  font-size:0;transition:width .3s ease}
.course-complete{margin-top:var(--s2);color:var(--ok-ink);font-weight:600}

/* ── Registration ───────────────────────────────────────────────────────── */
.reg-form,.registration-panel,.registration-card,.registration-section,
.register{background:var(--card);border:1px solid var(--rule);
  border-top:4px solid var(--gold);border-radius:var(--r);
  padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
@media(max-width:560px){.reg-form,.registration-panel,.registration-card,
  .registration-section,.register{padding:var(--s3)}}
.reg-form h2,.register h2,.registration-panel h2{font-size:1.28rem;
  color:var(--accent);border:0;padding:0;margin-top:0}
.reg-form p,.register p,.registration-panel p{font-size:.95rem;color:var(--muted)}
.registration-fields,.fields,.track-options{display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--s2)}
@media(min-width:640px){.registration-fields,.fields{
  grid-template-columns:repeat(2,minmax(0,1fr))}
  .registration-fields .full,.fields .full{grid-column:1/-1}}
.registration-fields > *,.fields > *,.track-options > *{min-width:0;max-width:100%}
label,.label,.lbl,.en-lbl,.es-lbl{font:600 .74rem/1.3 var(--body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:5px}
input,select,textarea{width:100%;min-width:0;min-height:46px;
  padding:11px 12px;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);color:var(--ink);font:400 1rem/1.35 var(--body)}
textarea{min-height:120px;line-height:1.6;resize:vertical}
.registered-info,.greeting,.track-indicator,.track-banner,.track-bar{
  font-size:.92rem;color:var(--muted)}
.reg-warn,.reg-warning{background:var(--no-bg);color:var(--no-ink);
  border:1px solid var(--no-line);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin:0 0 var(--s4);font-size:.95rem}
.modal,.reg-modal{position:fixed;inset:0;z-index:60;display:grid;
  place-items:center;background:rgba(34,32,29,.55);padding:var(--s3)}
.modal-inner,.reg-modal-inner{background:var(--card);border-radius:var(--r);
  border:1px solid var(--rule);padding:var(--s5);width:min(520px,100%);
  max-height:90vh;overflow:auto}

/* ── Exam ───────────────────────────────────────────────────────────────── */
.exam{margin-top:var(--s5)}
.exam-header,.quiz-header{margin-bottom:var(--s4)}
.exam-header h2,.exam-header h3,.quiz-header h3{margin-top:0}
.exam-header p{font-size:.94rem;color:var(--muted)}
.exam-status{background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--s3) var(--s4);font-size:.94rem;color:var(--muted);
  margin:var(--s3) 0}
.exam-status.pass{background:var(--ok-bg);color:var(--ok-ink);
  border-color:var(--ok-line)}
.exam-status.fail{background:var(--no-bg);
  color:var(--no-ink);border-color:var(--no-line)}
.q{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3)}
.q .stem,.question{font-weight:600}
.opts,.options{display:grid;gap:var(--s1);margin-top:var(--s3)}
.opt,.option,.opts label,.options label{appearance:none;cursor:pointer;
  text-align:left;width:100%;min-height:46px;display:flex;gap:var(--s2);
  align-items:baseline;padding:11px 14px;border:1px solid var(--rule);
  border-radius:8px;background:var(--paper);color:var(--ink);
  font:400 1rem/1.45 var(--body);text-transform:none;letter-spacing:0;margin:0}
.opt:hover,.option:hover{border-color:var(--accent)}
.opt[aria-pressed="true"],.opt.selected,.option.selected{
  border-color:var(--accent);background:#fff8e6;
  box-shadow:inset 0 0 0 1px var(--accent)}
.opt.correct,.option.correct{background:var(--ok-bg);border-color:var(--ok-line);
  color:var(--ok-ink)}
.opt.wrong,.option.wrong{background:var(--no-bg);border-color:var(--no-line);
  color:var(--no-ink)}
/* Per-question verdict shown the moment an option is clicked (restored from
   the original engines). .feedback below it carries the explanation, if any. */
.feedback-text{margin-top:8px;font:400 .9rem/1.4 var(--body);padding:6px 10px;
  border-radius:8px}
.feedback-text.correct{background:var(--ok-bg);color:var(--ok-ink)}
.feedback-text.incorrect{background:var(--no-bg);color:var(--no-ink)}
.opt input[type=radio],.option input[type=radio]{width:auto;min-height:0;
  margin:0 var(--s1) 0 0;flex:none}
.sa-badge,.badge{display:inline-block;font:600 .7rem/1 var(--body);
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;
  border-radius:999px;background:var(--rule-soft);color:var(--muted)}
.sa-badge.pass,.badge.pass{background:var(--ok-bg);color:var(--ok-ink)}
.sa-badge.fail,.badge.fail{background:var(--no-bg);color:var(--no-ink)}

/* ── Bilingual ──────────────────────────────────────────────────────────────
   The site's convention, unchanged: the body carries lang-en / lang-es /
   lang-both and every translated fragment carries its language's class. Five
   naming schemes are in the bodies; all five resolve here, so cts-engine.js
   toggles one class on <body> and every page follows. */
/* Six spellings, not five: twenty pages name the language with an id rather
   than a class (#teach-en, #sa-note-es). Leaving those out is how a page ends
   up showing both languages at once while every class-based check passes. */
body.lang-en :is(.lang-es,.es-only,.block-es,.es-lbl,.pane.es,.teach-es,span.es,div.es,section.es,
                 #teach-es,#sa-note-es,#sa-badge-es,#titleEs,#t-title-es){display:none}
body.lang-es :is(.lang-en,.en-only,.block-en,.en-lbl,.pane.en,.teach-en,span.en,div.en,section.en,
                 #teach-en,#sa-note-en,#sa-badge-en,#titleEn,#t-title-en){display:none}
body.lang-both :is(.lang-es,.es-only,.block-es,.pane.es,.teach-es,div.es,section.es,
                   #teach-es,#sa-note-es){
  display:block;color:var(--muted);margin-top:var(--s1)}
body.lang-both :is(span.es,.es-lbl){display:inline;margin-left:.35em;color:var(--muted)}
body.lang-both .cts-masthead :is(.lang-es,.es-only,span.es){color:rgba(255,255,255,.75)}

/* ── Utility ────────────────────────────────────────────────────────────── */
.hidden,.hide,[hidden]{display:none!important}
.small{font-size:.85rem}
.muted{color:var(--muted)}
.center{text-align:center}
.anchor{display:block;position:relative;top:-72px;visibility:hidden}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.cts-foot{border-top:1px solid var(--rule);color:var(--muted);font-size:.88rem}
.cts-foot .wrap{padding-block:var(--s4) var(--s6);
                display:flex;flex-wrap:wrap;gap:var(--s3);
                justify-content:space-between;align-items:center}
.cts-foot a{color:var(--muted)}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── Print: a unit should print as a clean reading for students without
      reliable connections. ─────────────────────────────────────────────── */
@media print{
  .cts-nav,.cts-seg,.cts-steps,.reg-form,.registration-panel,
  .actions,.progress-grid,.cts-foot{display:none!important}
  body{background:#fff;font-size:11pt}
  .card{border:0;padding:0;background:none}
  .cts-masthead{background:none;color:#000;border-bottom:2px solid #000}
  .cts-masthead h1,.cts-masthead h2{color:#000}
}

/* A passed unit, said plainly with the next step (cts-engine.js passedPanel). */
.cts-passed{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line);
  border-radius:12px;padding:14px 18px;margin:0 0 18px}
.cts-passed p{margin:0 0 10px}
.cts-passed .cts-passed-title{font-weight:700;font-size:1.15em}
.cts-passed .btn{margin:4px 6px 0 0}
/* the unit bar marks passed units with a tick, not only a colour */
.cts-units a.done::after{content:" \2713"}
/* Diagram lines that swap with the language (a <tspan> per language): the
   diagrams are already drawn bilingual, so "Both" shows the English line. */
body.lang-both svg tspan.lang-es{display:none}