/* ============================================================
   theword.tools: guide pages (/guides/*). theword-only; not synced.
   Canopy look (jesustools.org docs/CANOPY.md + docs/DESIGN.md):
   site.css tokens and components only, no hex. Plus Jakarta Sans
   17px / 1.6 body on a 36rem measure, glass cards for callouts,
   26px radii, Scripture in Fraunces italic via site.css `.scripture`
   (leaf tint over glass, faint gold rule).
   ============================================================ */

/* ---------- Column ---------- */
.guide.container { max-width: var(--measure); }

/* ---------- Header ---------- */
.guide__header { text-align: center; }
.guide__header > * + * { margin-top: var(--space-3); }
.guide__header .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--accent-text);
}
.guide__title { font-size: var(--fs-h1); }
.guide__meta { margin: var(--space-3) auto 0; font-size: var(--fs-caption); font-weight: 600; color: var(--subtle); }

/* ---------- Prose ---------- */
.guide__prose > * + * { margin-top: var(--space-4); }
.guide__prose p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); max-width: var(--measure); }
.guide__prose a { font-weight: 700; }
.guide__prose p.guide__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.guide__h {
  font-size: var(--fs-h3);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: left;
  margin: var(--space-6) 0 0;
}
.guide__prose > .guide__h:first-child { margin-top: var(--space-2); }
.guide-ref { font-weight: 700; white-space: nowrap; color: var(--text); }

/* ---------- Scripture quote (look comes from site.css .scripture) ---------- */
.guide__prose .guide-quote { margin: var(--space-5) 0 0; }
.guide__prose .guide-quote p { color: var(--text); font-size: 1.3125rem; line-height: 1.45; }
@media (min-width: 640px) { .guide-quote.scripture { padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 4px); } }

/* ---------- Steps: one glass callout card ---------- */
.guide__steps {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow);
  gap: var(--space-5);
}
@media (min-width: 640px) { .guide__steps { padding: var(--space-6); } }
.guide__steps .step__text { font-size: var(--fs-body); line-height: var(--lh-body); }
.guide__steps .step__text + .step__text { margin-top: var(--space-2); }

/* ---------- Mark as read (.pill--accent, then .pill--soft once done) ---------- */
.guide-done { text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: var(--space-4); }
.guide-done .card__title { font-size: var(--fs-h3); font-weight: 750; margin: 0; }
.guide-done .card__text { margin: 0 auto; font-size: var(--fs-body); }
.mark-read { gap: var(--space-2); }
.mark-read__check { width: 22px; height: 22px; display: none; }
.mark-read.is-done .mark-read__check { display: block; }
.mark-read.is-done { cursor: default; opacity: 1; }
.mark-read[aria-busy="true"] { opacity: 0.7; }
.guide-done__status { margin: 0 auto; font-size: var(--fs-caption); color: var(--subtle); min-height: 1em; }
.guide-done__status:empty { display: none; }
.guide-done__hint { margin: 0 auto; font-size: var(--fs-caption); color: var(--subtle); }
.guide-done__hint[hidden] { display: none; }

.guide-next { display: flex; justify-content: center; }

/* ---------- 7-day plan: glass day cards ---------- */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.plan-head .guide__h { margin: 0; }
.plan { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.plan__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 450ms var(--ease-lift), background-color var(--dur) var(--ease), box-shadow 450ms var(--ease-lift);
}
@media (hover: hover) {
  .plan__item:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-hover); }
}
.plan__item:has(.plan__check:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan__badge { transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plan__tick { width: 18px; height: 18px; display: none; }
.plan__check:checked + .plan__badge { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.plan__check:checked + .plan__badge .plan__num { display: none; }
.plan__check:checked + .plan__badge .plan__tick { display: block; }
.plan__check:checked ~ .plan__body .plan__title { color: var(--muted); }
.plan__item:has(.plan__check:checked) {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--glass));
  box-shadow: 0 0 0 1px var(--glass-edge);
}
.plan__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.plan__label { font-size: var(--fs-caption); font-weight: 700; color: var(--subtle); }
.plan__item:has(.plan__check:checked) .plan__label { color: var(--muted); }
.plan__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.plan__text { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.plan__note { margin: 0; font-size: var(--fs-caption); color: var(--subtle); text-align: center; max-width: none; }
body.is-authed .plan__note { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plan__item, .plan__item:hover { transition: none; transform: none; }
}