/* ============================================================================
   INTERACTIVE BIBLE STUDIO DESIGN SYSTEM · components.css
   Reusable parts built only from tokens.css. Prefix: .ls-
   Retint any region by wrapping it in [data-course="…"].
   ========================================================================== */

/* ── Wordmark (brand — constant, gold) ───────────────────────────────────── */
.ls-wordmark{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--brand-gold);}
.ls-wordmark svg{flex:none;}
.ls-wordmark b{font-family:var(--font-label);font-weight:500;letter-spacing:1.5px;font-size:clamp(11px,1.35vw,14px);color:var(--on-shell);white-space:nowrap;}
.ls-wordmark--ink b{color:var(--ink);}
.ls-wordmark--ink{color:var(--brand-gold-ink);}

/* ── Eyebrow + label ─────────────────────────────────────────────────────── */
.ls-eyebrow{font-family:var(--font-label);font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--shell-violet);}
.ls-label{font-family:var(--font-label);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent-ink);}

/* ── Headings + reading ──────────────────────────────────────────────────── */
.ls-display{font-family:var(--font-display);font-weight:300;font-size:var(--t-display);line-height:var(--lh-tight);}
.ls-title{font-family:var(--font-display);font-weight:400;font-size:var(--t-title);line-height:var(--lh-snug);}
.ls-title em,.ls-display em{font-style:italic;color:var(--accent);}
.ls-h2{font-family:var(--font-display);font-weight:500;font-size:var(--t-h2);line-height:var(--lh-snug);}
.ls-lead{font-family:var(--font-display);font-style:italic;font-size:var(--t-lead);line-height:1.55;color:var(--on-shell-soft);}
.ls-body{font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ls-btn{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;border:none;
  font-family:var(--font-label);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;padding:14px 30px;border-radius:var(--r-pill);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);}
.ls-btn--primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#2a2010;
  box-shadow:0 12px 36px var(--glow);}
.ls-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px var(--glow);}
.ls-btn--ghost{background:transparent;color:var(--on-shell);border:1px solid var(--shell-line);}
.ls-btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.ls-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.ls-badge{display:inline-block;font-family:var(--font-label);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);}
.ls-badge--available{background:var(--accent);color:#2a2010;}
.ls-badge--soon{background:transparent;color:var(--on-shell-faint);border:1px solid var(--shell-line);}

/* ── Thread pills (the course's triad) ───────────────────────────────────── */
.ls-threads{display:flex;flex-wrap:wrap;gap:var(--space-7);}
.ls-thread{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-label);
  font-size:var(--t-label);letter-spacing:1.8px;text-transform:uppercase;color:var(--on-shell-soft);}
.ls-thread i{width:8px;height:8px;border-radius:var(--r-pill);}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.ls-progress{height:5px;border-radius:var(--r-pill);background:rgba(44,35,24,.14);overflow:hidden;}
.ls-progress i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));}
.ls-progress--on-dark{background:rgba(201,182,226,.18);}

/* ── Course card (parchment, floats on the shell) ────────────────────────── */
.ls-course{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--parchment),var(--parchment-deep));
  color:var(--ink);border-radius:var(--r-md);padding:var(--space-6);box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);}
.ls-course:hover{transform:translateY(-5px);box-shadow:var(--shadow-float);}
.ls-course__bar{position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--thread-1),var(--thread-2),var(--thread-3));}
.ls-course__ref{font-family:var(--font-label);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-ink);}
.ls-course__title{font-family:var(--font-display);font-weight:500;font-size:27px;line-height:1.06;margin:var(--space-2) 0;}
.ls-course__title em{font-style:italic;color:var(--accent-ink);}
.ls-course__desc{font-family:var(--font-body);font-size:var(--t-small);color:var(--ink-soft);line-height:1.5;min-height:66px;}
.ls-course__meta{margin-top:var(--space-3);font-family:var(--font-label);font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--thread-2-ink);}
/* "in preparation" variant — dark, recedes */
.ls-course--soon{background:linear-gradient(180deg,var(--shell-card),var(--shell-raised));color:var(--on-shell-soft);
  border:1px solid var(--shell-line);box-shadow:none;}
.ls-course--soon:hover{transform:none;}
.ls-course--soon .ls-course__title{color:var(--on-shell);}
.ls-course--soon .ls-course__ref,.ls-course--soon .ls-course__meta{color:var(--shell-violet);}
.ls-course--soon .ls-course__desc{color:var(--on-shell-faint);}

/* ── Lesson row (table-of-contents style, for the course overview) ───────── */
.ls-lesson{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;
  padding:var(--space-4) var(--space-2);border-bottom:1px solid var(--parchment-line);transition:background var(--dur-fast);}
.ls-lesson:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.ls-lesson__n{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--accent-deep);min-width:28px;text-align:center;}
.ls-lesson__t{font-family:var(--font-display);font-size:21px;color:var(--ink);}
.ls-lesson__t small{display:block;font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--ink-faint);margin-top:2px;}
.ls-lesson__s{font-family:var(--font-label);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-ink);}

/* ── Chapter spine (optional progress signature, borrowed from Direction C) ─ */
.ls-spine{background:var(--shell-raised);border:1px solid var(--shell-line);border-radius:var(--r-lg);padding:var(--space-6);}
.ls-spine__t{font-family:var(--font-label);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--on-shell-faint);margin-bottom:var(--space-4);}
.ls-spine__row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}
.ls-spine__n{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--accent);width:24px;}
.ls-spine__track{flex:1;height:7px;border-radius:var(--r-pill);background:rgba(201,182,226,.16);overflow:hidden;}
.ls-spine__track i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-deep),var(--accent));}
.ls-spine__pct{font-size:11px;color:var(--on-shell-faint);width:36px;text-align:right;font-family:var(--font-body);}

/* ── Top nav ─────────────────────────────────────────────────────────────── */
.ls-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-8);}
.ls-nav__links{display:flex;align-items:center;gap:var(--space-6);font-family:var(--font-label);
  font-size:var(--t-label);letter-spacing:1.6px;text-transform:uppercase;color:var(--on-shell-soft);}
.ls-nav__signin{border:1px solid var(--shell-line);border-radius:var(--r-pill);padding:7px 18px;color:var(--accent);}

/* ── Hero (gathered light) ───────────────────────────────────────────────── */
.ls-hero{position:relative;text-align:center;padding:var(--space-9) var(--space-6) var(--space-11);overflow:hidden;}
.ls-hero__glow{position:absolute;left:50%;top:6%;width:min(640px,90vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,var(--glow) 0%,transparent 64%);pointer-events:none;}
.ls-hero > *{position:relative;z-index:1;}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ls-footer{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;
  padding:var(--space-6) var(--space-8);border-top:1px solid var(--shell-line);
  font-family:var(--font-body);font-size:13px;color:var(--on-shell-faint);}

/* ── Accessibility floor ─────────────────────────────────────────────────── */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r-sm);}