/*
 * Catholic Discussion Guides — guide renderer stylesheet (B1-M5-P2).
 *
 * Styles the fragment emitted by the single isomorphic renderer
 * (src/assets/js/renderer.js). Screen + print aware. This file is linked by the
 * page shell / layout (P3 build-time example pages, P6 live viewer) — NEVER by the
 * renderer itself (the renderer emits no <link>/<style>; renderer output seam is the
 * B1-M5-P2 / A-007 decision). Extends the P1 base design system (main.css).
 */

.guide {
  max-width: var(--measure, 42rem);
  margin-inline: auto;
}

/* Toolbar (B1-M6-P7): the leader-content switch and the Print button, one compact
   right-aligned row above the guide. Screen only. */
.guide__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--color-muted, #4b5759);
}
.guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
/* The checkbox drawn as a switch (role="switch"): a pill track with a sliding knob. */
.guide__toggle-input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--color-border, #e2d9c5);
  cursor: pointer;
  transition: background-color 0.15s;
}
.guide__toggle-input::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform 0.15s;
}
.guide__toggle-input:checked {
  background: var(--color-accent, #1f4b47);
}
.guide__toggle-input:checked::before {
  transform: translateX(1rem);
}
.guide__toggle-input:focus-visible {
  outline: 2px solid var(--color-accent, #1f4b47);
  outline-offset: 2px;
}
/* `.button` sets display, which would override the `hidden` attribute.
   guide-print.js removes `hidden` once it can wire the button. */
.guide__print[hidden] {
  display: none;
}
.guide__print {
  padding: 0.3rem 0.85rem;
  font-size: 0.9rem;
}

/*
 * The leader toggle (B1-M6-P7 Q-001). Every leader-only element carries `.leader-only`;
 * switching it off hides them all. Pure CSS, so it works with JS off, and print
 * follows whatever is on screen. A browser without :has() keeps everything shown.
 */
.guide:has(.guide__toggle-input:not(:checked)) .leader-only {
  display: none;
}

/* The guide's front matter: title, inputs and disclaimer on the left, the logo top
   right, all above the rule (owner, B1-M6-P7 review). */
.guide__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--color-accent, #1f4b47);
}
.guide__heading {
  flex: 1;
  min-width: 0;
}
.guide__logo {
  flex: none;
  width: 72px;
  height: 72px;
}
.guide__title {
  margin: 0 0 0.75rem;
}

/* The inputs block (B1-M6-P7 Q-003): labeled lines with real text labels. */
.guide__inputs {
  margin: 0;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.95rem;
  color: var(--color-muted, #4b5759);
}
.guide__input {
  display: flex;
  gap: 0.4rem;
}
.guide__input + .guide__input {
  margin-top: 0.2rem;
}
.guide__inputs dt {
  flex: none;
  font-weight: 600;
  color: var(--color-ink, #1f2a2c);
}
.guide__inputs dd {
  margin: 0;
}

/* The verbatim AI-assisted disclaimer, part of the front matter (B1-M6-P7): a quiet
   note, not a warning banner. Always visible, incl. print. */
.guide__disclaimer {
  margin: 1rem 0 0;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-muted, #4b5759);
}

@media (max-width: 30rem) {
  .guide__logo {
    width: 48px;
    height: 48px;
  }
}

/* One session block. `.guide-session` is the per-session page-break hook (print). */
.guide-session {
  margin-block: 2rem 2.5rem;
}
.guide-session__title {
  font-family: var(--font-ui, sans-serif);
  border-bottom: 1px solid var(--color-border, #e2d9c5);
  padding-bottom: 0.25rem;
}
/* The per-session brand endnote (B1-M6-P7 Q-007). Print only: on screen the site
   footer already carries the brand (owner, B1-M6-P7 review). */
@media screen {
  .guide-session__endnote {
    display: none;
  }
}
.guide-session__endnote {
  margin: 2rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, #e2d9c5);
  font-family: var(--font-ui, sans-serif);
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-muted, #4b5759);
}

.guide-section {
  margin-block: 1.5rem;
}
.guide-section__title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* Deterministic render constants (B1-M6-P2 iter #1): the contextual per-section
   helper notes AND the Sign-of-the-Cross line opening each session's prayer. Same
   treatment — muted, smaller, italic — so they read consistently as fixed guidance,
   distinct from the guide's generated content. */
.guide-section__help,
.guide-sign-of-cross {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-muted, #4b5759);
}

/* Participant-facing session summary (B1-M6-P2 iter #1) — a short lead blurb. */
.guide-section--summary p {
  font-size: 1.02rem;
}

/* Leader Prep (B1-M6-P7 Q-002): supporting material, so smaller and muted rather than
   competing with the session's own content. */
.guide-section--overview > p:not(.guide-section__help) {
  font-size: 0.95rem;
  color: var(--color-muted, #4b5759);
}

/* The warm-up -> reading bridge (B1-M6-P2 iter #2): its own element rather than
   help-text inside a question note. Set apart as words the leader SAYS, with a quiet
   neutral rule (B1-M6-P7 Q-002) rather than an accent bar. */
.guide-transition {
  margin: 0.75rem 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--color-border, #e2d9c5);
  font-style: italic;
}

.guide-questions {
  padding-left: 1.5rem;
}
.guide-question {
  margin-bottom: 1.1rem;
}
/* Question text at normal weight (owner, B1-M6-P7 review: too much bold). The quiet
   leader notes already set it apart; the bold accent number gives the scan line. */
.guide-question__prompt {
  margin: 0 0 0.35rem;
}
.guide-question::marker {
  font-family: var(--font-ui, sans-serif);
  font-weight: 700;
  color: var(--color-accent, #1f4b47);
}

/* Leader-facing answer key / talking points (B1-M6-P7 Q-002): supporting, not striking.
   No tinted box and no accent colour, so the question prompt stays the strongest thing
   on the page; a thin neutral rule and smaller muted text set them apart. */
.guide-leader-note {
  margin: 0.3rem 0 0;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-border, #e2d9c5);
  font-size: 0.9rem;
  color: var(--color-muted, #4b5759);
}
.guide-leader-note__label {
  font-family: var(--font-ui, sans-serif);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
}

/* Going Deeper's required call to action (B1-M6-P2 iter #2) — the concrete thing
   someone does afterwards, set apart so it is not lost in the surrounding prose. */
.guide-going-deeper__action {
  margin: 0.6rem 0 0;
  font-weight: 600;
}

/* Prayer intentions, split into its three parts (B1-M6-P2 iter #3): the spoken
   invitation to the group, the guide's own single petition, and the deterministic
   response cue. The cue is a render constant, so it takes the same muted treatment
   as the Sign of the Cross; the invitation and the petition are the guide's spoken
   words and read as ordinary prose. */
.guide-prayer__invitation {
  margin: 0 0 0.5rem;
}
.guide-prayer__intention {
  margin: 0 0 0.4rem;
}
.guide-prayer__cue {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-muted, #4b5759);
}

/* Readings: the passages the group reads aloud. */
.guide-refs {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}
.guide-ref {
  margin-bottom: 0.5rem;
}
.guide-ref__citation {
  font-style: normal;
  font-weight: 600;
}
.guide-ref__title,
.guide-ref__author,
.guide-ref__source {
  color: var(--color-muted, #4b5759);
}
.guide-ref__title::before,
.guide-ref__author::before,
.guide-ref__source::before {
  content: " — ";
}
.guide-ref__excerpt {
  margin: 0.25rem 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border, #e2d9c5);
  font-style: italic;
  color: var(--color-muted, #4b5759);
}

/* Sources (B1-M6-P7 §G.1): one labeled inline line per question / Going Deeper, plus
   a credited blockquote for any quotation. */
.guide-sources {
  margin: 0.35rem 0 0;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.85rem;
  color: var(--color-muted, #4b5759);
}
.guide-sources__label {
  font-weight: 600;
}
.guide-sources__citation {
  font-style: normal;
}
.guide-quote {
  margin: 0.5rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border, #e2d9c5);
  font-style: italic;
}
.guide-quote__credit {
  margin-top: 0.2rem;
  font-style: normal;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.85rem;
  color: var(--color-muted, #4b5759);
}
.guide-quote__credit::before {
  content: "— ";
}

/*
 * Print (B1-M6-P7 Q-008). The title block, disclaimer and Session 1 flow on page 1;
 * Sessions 2+ each start a new page. Sections are allowed to split across pages (a
 * whole-section `break-inside: avoid` pushed the long Leader Prep to page 2 and left
 * page 1 mostly blank); only small units are kept whole, and a heading never ends a
 * page. The toolbar is screen-only. The disclaimer stays visible.
 */
@media print {
  .guide {
    max-width: none;
  }
  .guide__tools {
    display: none !important;
  }
  .guide-session {
    margin-block: 0;
  }
  .guide-session + .guide-session {
    break-before: page;
    page-break-before: always; /* legacy fallback */
  }
  .guide-question,
  .guide-leader-note,
  .guide-prayer__intention,
  .guide-going-deeper__action,
  .guide-quote {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .guide-session__title,
  .guide-section__title {
    break-after: avoid;
    page-break-after: avoid;
  }
  .guide__disclaimer {
    display: block !important;
  }
}

/*
 * Live viewer chrome (B1-M5-P6). The progress states + refund/ready banners that wrap
 * the rendered guide fragment on the /guides/custom/?t=<token> page. Screen-only — a
 * printed guide should carry none of this chrome (the guide itself owns its print CSS
 * above).
 */
.guide-viewer__resume {
  margin-block-start: 1.5rem;
}

.guide-viewer__links {
  margin-block-start: 1.5rem;
}

.guide-viewer__ready {
  max-width: var(--measure, 42rem);
  margin-inline: auto;
  margin-block-end: 1rem;
  font-weight: 600;
  color: var(--color-accent, inherit);
}

.guide-viewer__refund {
  max-width: var(--measure, 42rem);
  margin-inline: auto;
  margin-block-end: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-surface-muted, #f6f6f4);
}

.guide-viewer__refund-heading {
  margin-block: 0 0.5rem;
  font-size: 1.125rem;
}

@media print {
  /* The viewer chrome never belongs in a printed guide. */
  .guide-viewer__resume,
  .guide-viewer__links,
  .guide-viewer__ready,
  .guide-viewer__refund {
    display: none !important;
  }
}