/* G.3′ — procedure body keyword styling.
 *
 * render-procmd.ts emits <strong class="kw-<keyword>"> for every procmd
 * body keyword (Check / Action / Caution / Note / Within / Because /
 * Against / Abort-if / Until / When / By / Concurrent / CSF / RNO).
 * This stylesheet gives each a distinct visual treatment so an operator
 * can scan the step body the way they would scan a real ERG: structure
 * jumps out, semantics are obvious without reading prose.
 *
 * Pure CSS — works in both light and dark Material themes via the
 * built-in palette CSS variables.
 */

/* === Default: every keyword is monospaced + slightly tighter so the
 *    body prose breathes around it. ============================== */

[class*="kw-"] {
  font-family: var(--md-code-font, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0 0.2em;
  border-radius: 2px;
  margin-right: 0.2em;
  /* Light mode keeps a faint tinted background; dark mode drops it (see below). */
}

/* === Light mode: faint tinted backgrounds, saturated text ============== */

.kw-action {
  color: #5e35b1;
  background: rgba(94, 53, 177, 0.08);
}

.kw-check {
  color: #1f618d;
  background: rgba(31, 97, 141, 0.07);
}

.kw-caution {
  color: #b7791f;
  background: rgba(183, 121, 31, 0.10);
}

.kw-note {
  color: #5e6c84;
  background: rgba(94, 108, 132, 0.08);
}

.kw-within,
.kw-abort-if,
.kw-until,
.kw-when,
.kw-by,
.kw-concurrent {
  color: #6c3483;
  font-style: italic;
  background: rgba(108, 52, 131, 0.07);
}

.kw-because {
  color: #1e7d32;
  background: rgba(30, 125, 50, 0.07);
}

.kw-against {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.07);
}

/* === Dark mode: drop the background tints entirely, lean on muted
 *    foreground colour + uppercase letter-spacing so the keywords still
 *    scan as distinct without the highlighter look. =================== */

[data-md-color-scheme="slate"] [class*="kw-"] {
  background: transparent;
  padding: 0;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .kw-action { color: #b39ddb; }
[data-md-color-scheme="slate"] .kw-check { color: #90caf9; }
[data-md-color-scheme="slate"] .kw-caution {
  color: #e6c466;
  font-weight: 700; /* caution still needs slight emphasis */
}
[data-md-color-scheme="slate"] .kw-note { color: #9aa6b3; }

[data-md-color-scheme="slate"] .kw-within,
[data-md-color-scheme="slate"] .kw-abort-if,
[data-md-color-scheme="slate"] .kw-until,
[data-md-color-scheme="slate"] .kw-when,
[data-md-color-scheme="slate"] .kw-by,
[data-md-color-scheme="slate"] .kw-concurrent {
  color: #c8a9d6;
  font-style: italic;
}

[data-md-color-scheme="slate"] .kw-because { color: #81c784; }
[data-md-color-scheme="slate"] .kw-against { color: #e57373; }

/* === Because / Against rationale continuation block. =============== */

.procmd-rationale {
  font-size: 0.92em;
  font-style: italic;
  opacity: 0.82;
  margin-left: 0.5em;
}

/* === CSF / RNO: cross-cutting page-structure markers. ============= */

.kw-csf,
.kw-rno {
  color: var(--md-primary-fg-color, #1f618d);
  font-weight: 800;
}

/* === Branch arrows in `- … → target` lines.
 *    No render-side class today; style the arrow glyph itself via the
 *    list-item context. Lists inside step bodies look like
 *      <ul><li>condition → <a href="#target">target</a></li></ul>
 *    so we don't need a class hook — just bump weight on the arrow. */

.md-typeset li {
  /* Modest indent so the arrow lines up visually with keyword leaders. */
  line-height: 1.55;
}