/* ============================================================
   Sanctum Crisis Protocol  —  /assets/css/crisis-protocol.css
   ============================================================

   Shared CSS for the "morning after a fall" surface used by all
   four Brotherhood Pass tools.

   Covenant gate #7: every paid tool ships a crisis / fall
   protocol.  The pastoral register is fixed:

     SACRAMENTAL-ANCHORED RE-ENGAGEMENT, NOT SHAME.

   The five-beat structure is canonical (locked here so all four
   tools render the same shape):

     1. NAME             What happened, in one sentence.
                         No condemnation, no minimization.
                         Catechism citation in the margin.
     2. SCRIPTURE        One verse.  Always pull-quoted.
                         Always the just man rising
                         (Prov 24:16 / 1 Jn 1:8-9 /
                         Lk 15:17-20 / Ps 51 / 2 Cor 12:9).
     3. SACRAMENT        Pointer to the next concrete sacramental
                         act available to this man today.
                         Confession-finder, Mass-finder, or
                         spiritual-communion script.
     4. ACTION           ONE concrete thing to do in the next 15
                         minutes.  Tool-specific.
     5. RETURN           Back to TODAY view.  Streak reset is
                         honest, not punitive; the rule itself
                         is unchanged.

   This file owns the layout + register.  The corresponding
   /assets/js/crisis-protocol.js owns the renderer that takes a
   tool-specific config object and writes the full shell into
   any host element.

   Locked 2026-05-16, Fire #13 (shared-infrastructure track).
*/


/* ============================================================
   ROOT VARS (inherit if host page sets them; otherwise default)
   ============================================================ */
.crisis-protocol {
  --cp-paper:      var(--paper, #e8e2d3);
  --cp-paper-soft: var(--paper-soft, #cfc6b0);
  --cp-paper-dim:  var(--paper-dim, #9a8d6f);
  --cp-ink:        var(--dark, #0A0A0A);
  --cp-ink-card:   var(--dark-card, #14141a);
  --cp-gold:       var(--gold, #c9a96a);
  --cp-gold-bright:var(--gold-bright, #FFD400);
  --cp-line:       var(--line, rgba(201,169,106,0.25));
  --cp-line-soft:  var(--line-soft, rgba(201,169,106,0.12));
  --cp-warm:       #d18ba7;     /* rose — the colour of penitential vestments
                                   on Laetare + Gaudete; NEVER red, which
                                   would carry martyrdom register here */
}


/* ============================================================
   CONTAINER + REGISTER
   ============================================================ */
.crisis-protocol {
  display: block;
  background: var(--cp-ink);
  color: var(--cp-paper);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  padding: 2.2rem 1.6rem 2.8rem;
  border-top: 1px solid var(--cp-gold);
  border-bottom: 1px solid var(--cp-gold);
  margin: 1.5rem 0;
  position: relative;
}
@media (min-width: 720px) {
  .crisis-protocol { padding: 3rem 2.5rem 3.5rem; }
}

.crisis-protocol *,
.crisis-protocol *::before,
.crisis-protocol *::after { box-sizing: border-box; }


/* ============================================================
   HEADER (the only place we name what happened)
   ============================================================ */
.crisis-header {
  text-align: center;
  margin-bottom: 1.8rem;
}
.crisis-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cp-gold);
  margin: 0 0 0.7rem;
}
.crisis-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--cp-paper);
}
@media (min-width: 720px) {
  .crisis-title { font-size: 1.95rem; }
}
.crisis-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--cp-paper);
  max-width: 38rem;
  margin: 0 auto;
}
.crisis-ccc-cite {
  display: block;
  margin-top: 0.6rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--cp-paper-dim);
}


/* ============================================================
   FIVE-BEAT STEP LIST  (NAME / SCRIPTURE / SACRAMENT / ACTION / RETURN)
   ============================================================ */
.crisis-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: cp-step;
  display: grid;
  gap: 1.5rem;
}
.crisis-step {
  counter-increment: cp-step;
  background: var(--cp-ink-card);
  border: 1px solid var(--cp-line);
  border-left: 3px solid var(--cp-gold);
  padding: 1.4rem 1.4rem 1.5rem 3.4rem;
  position: relative;
}
.crisis-step::before {
  content: counter(cp-step);
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cp-ink);
  background: var(--cp-gold);
  border-radius: 50%;
}

.crisis-step-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cp-gold);
  margin: 0 0 0.5rem;
}
.crisis-step-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
  color: var(--cp-paper);
}


/* ============================================================
   SCRIPTURE PULL-QUOTE  (step 2)
   ============================================================ */
.crisis-scripture {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--cp-paper);
  padding: 0.4rem 0 0.5rem;
  margin: 0;
  border-left: none;
  text-align: left;
}
@media (min-width: 720px) {
  .crisis-scripture { font-size: 1.6rem; }
}
.crisis-scripture-cite {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-gold);
}

/* Optional second scripture layered inside the same Scripture beat.
   Pastoral pairing: the man's first instinct (mercy / return —
   Prodigal Son) sits above; the Lord's direct word to one caught
   in this specific kind of sin (Christ to the woman in adultery,
   "Neither will I condemn thee.  Go, and now sin no more.") sits
   below.  One beat, two passages — mercy and amendment in one
   moment.  The bridge between them is typographic, not visual
   noise: a hand-drawn em-dash pair at reading width.            */
.crisis-scripture-bridge {
  margin: 0.9rem 0 0.7rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  letter-spacing: 0.36em;
  color: var(--cp-gold);
  opacity: 0.65;
  user-select: none;
}
.crisis-scripture.crisis-scripture-second {
  font-size: 1.28rem;
  color: var(--cp-paper-soft);
}
@media (min-width: 720px) {
  .crisis-scripture.crisis-scripture-second { font-size: 1.45rem; }
}


/* ============================================================
   SACRAMENTAL ANCHOR  (step 3)
   ============================================================ */
.crisis-sacrament {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.crisis-sacrament-block {
  border-top: 1px solid var(--cp-line-soft);
  padding-top: 0.7rem;
}
.crisis-sacrament-block:first-child {
  border-top: none;
  padding-top: 0;
}
.crisis-sacrament-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-gold);
  margin: 0 0 0.3rem;
}
.crisis-sacrament-body { margin: 0; color: var(--cp-paper); }
.crisis-prayer {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--cp-gold);
  color: var(--cp-paper);
  margin: 0.5rem 0 0;
}


/* ============================================================
   ACTION CALL-TO-ACT  (step 4)
   ============================================================ */
.crisis-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.crisis-action-button {
  display: inline-block;
  background: var(--cp-gold-bright);
  color: var(--cp-ink);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.crisis-action-button:hover,
.crisis-action-button:focus {
  background: #ffe35e;
  outline: none;
}
.crisis-action-time {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--cp-paper-dim);
}


/* ============================================================
   RETURN (step 5)
   ============================================================ */
.crisis-return {
  text-align: left;
}
.crisis-return-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--cp-line);
  padding-bottom: 0.15rem;
}
.crisis-return-link:hover { border-color: var(--cp-gold); }
.crisis-return-note {
  margin-top: 0.5rem;
  font-family: 'EB Garamond', serif;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--cp-paper-dim);
}


/* ============================================================
   FOOTER (rare; one optional reassurance line)
   ============================================================ */
.crisis-footer {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cp-line);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--cp-paper-dim);
}


/* ============================================================
   REFUSALS — anti-patterns guarded at the CSS layer
   ============================================================
   These classes are deliberately empty. Their job is to make
   it obvious during code review when a tool author tries to
   smuggle the wrong register into a crisis protocol.
   ============================================================ */
.crisis-protocol .shame-text { /* DISALLOWED — refuse in code review */ }
.crisis-protocol .gamify     { /* DISALLOWED — refuse in code review */ }
.crisis-protocol .streak-loss-celebration { /* DISALLOWED */ }