/*
  The bulletin: the notes beside a lesson's video, as the course page shows them and the course editor's preview
  shows them, from one stylesheet so the two cannot differ. Moved out of the course page's own <style> on
  2026-10-15, rule for rule; the panel around it (its border, its scrolling, its height beside the video) is the
  page's and stays there. Every colour and radius is a tokens.css variable.
*/

  .bulletin-body { font-size: 0.92rem; line-height: 1.65; color: var(--text); }
  .bulletin-body p { margin-bottom: 0.85rem; }
  .bulletin-body ul { margin: 0 0 0.85rem 1.1rem; }
  .bulletin-body li { margin-bottom: 0.35rem; }
  .bulletin-body strong { color: var(--navy); }
  .bulletin-empty { color: var(--text-muted); font-style: italic; font-size: 0.88rem; }

  /* ── STRUCTURED BULLETIN CONTENT ── */
  .bl-scripture {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    color: #fff; border-radius: var(--radius-sm); padding: 0.85rem 1rem;
    margin-bottom: 1.3rem;
  }
  .bl-scripture .bl-scripture-kicker {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; opacity: 0.78; margin-bottom: 3px;
  }
  .bl-scripture .bl-scripture-ref { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600; }
  .bl-scripture-verse + .bl-scripture-verse { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid rgba(255,255,255,0.22); }
  .bl-scripture-text { font-style: italic; font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.35rem; opacity: 0.96; }
  /* A passage that is not a quotation — lesson 1's welcome — set upright and a touch larger. It was an
     inline style when bulletins were HTML; lesson.json says "plain": true. */
  .bl-scripture-text.bl-scripture-plain { font-style: normal; font-size: 0.96rem; }
  .bl-scripture-verse .bl-scripture-ref {
    font-family: 'DM Sans', sans-serif; font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85;
  }
  .bl-section { margin-bottom: 1.25rem; }
  .bl-section:last-child { margin-bottom: 0; }
  .bl-sec-title {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-family: 'Playfair Display', serif; font-size: 0.98rem; font-weight: 600;
    color: var(--navy); line-height: 1.3; margin-bottom: 0.55rem;
  }
  .bl-num {
    flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%;
    background: var(--navy); color: #fff; font-family: 'DM Sans', sans-serif;
    font-size: 0.74rem; font-weight: 700; display: flex; align-items: center;
    justify-content: center; margin-top: 1px;
  }
  .bl-points { list-style: none; margin: 0 0 0 2.05rem; padding: 0; }
  .bl-points > li { position: relative; padding-left: 0.95rem; margin-bottom: 0.4rem; }
  .bl-points > li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
  }
  .bl-sub { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0; }
  .bl-sub > li { position: relative; padding-left: 0.95rem; margin-bottom: 0.28rem; color: var(--text-muted); }
  .bl-sub > li::before { content: '–'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
  .bl-ref { color: var(--blue); font-weight: 500; white-space: nowrap; }
  .bl-section em { color: var(--navy); }