/* ── Armed record structure — shared styles ────────────────────────────────
 * Companion to armed-records.js, loaded by BOTH /hub/decisions-rfis/ and
 * /hub/rraidd-log/ for the same reason the parser is shared: the two pages render
 * the same RRAIDD records, and before these files existed the RRAIDD Log had none
 * of this — a decision that read as structured panels on one page read as a wall
 * of prose on the other. Duplicated CSS drifts the same way duplicated logic does;
 * the difference is only that this drift is visible.
 *
 * The armed-record standard is part of how Cirrius runs an RRAIDD log: no decision
 * is escalated blind, so every one arrives with analysis, pros/cons and a
 * recommendation, and every RFI arrives with a proposed working answer the client
 * can confirm rather than compose. These styles make that content STRUCTURAL
 * rather than merely bold text, so an approver sees the recommendation before the
 * reasoning. Records that do not carry the sections fall back to a plain
 * description — the treatment is additive and never drops content.
 *
 * ── ON SPECIFICITY ────────────────────────────────────────────────────────
 * Each host page has its own body scale (.card-body / .detail-body) whose
 * descendant rules — `.card-body ul`, `.detail-body li` — tie with a bare
 * `.armed-option ul` on specificity, making the outcome depend on which
 * stylesheet happens to load last. Rules that collide are therefore written with
 * the `.armed-wrap` ancestor to win outright, so this file behaves the same
 * wherever it is linked.
 *
 * ── ON COLOUR ─────────────────────────────────────────────────────────────
 * Every colour here resolves through a token generated into assets/theme.css from
 * engagement.config.json. No raw hex, no fallback literal — a hardcoded colour is
 * invisible to a retheme, and build.mjs refuses a page that carries one. The
 * tokens used (--brand, --brand-deep, --chrome, --tint, --tint-border,
 * --pri-urgent-fg, --pri-urgent-bg) are all defined globally, so this file is safe
 * to link from any page.
 * ---------------------------------------------------------------------- */

.armed-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
/* The wrap is the sole child of the host's body element, whose own bottom margin
   already spaces it from what follows — so the two would otherwise stack. */
.armed-wrap:only-child { margin-bottom: 0; }
.armed-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 5px; }
.armed-body > *:last-child { margin-bottom: 0; }

/* The recommendation — or, on an RFI, the working answer — leads, and is the only
   section given a filled panel. */
.armed-rec { background: var(--tint); border: 1px solid var(--tint-border); border-left: 4px solid var(--brand); border-radius: 9px; padding: 12px 15px; }
.armed-rec .armed-label { color: var(--brand-deep); }
.armed-rec .armed-body { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.55; }

.armed-action { padding: 0 2px; }
.armed-action .armed-label { color: var(--brand-deep); }
.armed-action .armed-body { font-size: 0.84rem; font-weight: 700; color: var(--chrome); }

.armed-analysis .armed-label { color: var(--muted); }

/* One bordered block per option so pros and cons read as a pair, not prose. The
   RFI vocabulary's "WHAT'S STILL OPEN" shares this treatment: an itemised list of
   what remains unanswered is the same shape of content. */
.armed-option { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; }
.armed-option .armed-label { color: var(--chrome); font-size: 0.66rem; }
.armed-wrap .armed-option ul, .armed-wrap .armed-option ol { margin: 0; padding-left: 18px; }
.armed-wrap .armed-option li { margin: 2px 0; }

/* Conditions carry the same weight as the recommendation they qualify, so they
   get a panel too — a caveat rendered as body text reads as optional. */
.armed-condition { background: var(--white); border: 1px solid var(--tint-border); border-left: 4px solid var(--brand-deep); border-radius: 9px; padding: 11px 14px; }
.armed-condition .armed-label { color: var(--brand-deep); }

/* Attention tone — the same red the pages already use for blocking and aged
   items, not a new one. */
.armed-consequence { border-left: 3px solid var(--pri-urgent-fg); background: var(--pri-urgent-bg); border-radius: 0 8px 8px 0; padding: 10px 14px; }
.armed-consequence .armed-label { color: var(--pri-urgent-fg); }

/* Pre-existing context is preserved, never deleted — just de-emphasised. */
.armed-context { border-top: 1px solid var(--border); padding-top: 10px; }
.armed-context .armed-label { color: var(--muted); }
.armed-context .armed-body { color: var(--muted); font-size: 0.82rem; }