/* What is a Fail-Safe Model? — long-form explainer (fail-safe-model.html + .zh).
   Builds on styles.css (.article, .abstract, .callout, .figure, .refs); only adds
   what an article with mathematics needs: display math, theorem/proof boxes,
   a contents list, comparison tables and the authority diagram. */

.fsm-toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 26px; margin: 0 0 44px; }
.fsm-toc .lbl { display: block; font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: 2px; color: var(--sage-deep); font-weight: 600; margin-bottom: 8px; }
.fsm-toc ol { margin: 0 0 0 1.2em; font-size: .98rem; }
.fsm-toc li { margin-bottom: 4px; }
.fsm-toc a { color: var(--body); border-bottom: 1px solid var(--line-2); }
.fsm-toc a:hover { color: var(--ink); border-color: var(--sage); }

.article .fsm-def { font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--sage); padding: 4px 0 4px 20px; margin: 0 0 30px; }

.fsm-math { overflow-x: auto; margin: 22px 0 24px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.fsm-math math { font-size: 1.12rem; }
.article math { font-size: 1.04em; }

.fsm-thm, .fsm-proof, .fsm-defn { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin: 22px 0; background: var(--cream-2); color: var(--body); font-size: 1.02rem; }
.fsm-thm { border-left: 3px solid var(--sage); }
.fsm-defn { border-left: 3px solid var(--clay-deep, #a0643c); }
.fsm-proof { background: var(--paper); font-size: .98rem; }
.fsm-thm .lbl, .fsm-proof .lbl, .fsm-defn .lbl { font-family: var(--sans); font-weight: 600; color: var(--ink); margin-right: 6px; }
.fsm-proof .qed { float: right; color: var(--faint); }

.fsm-table-wrap { overflow-x: auto; margin: 24px 0 30px; }
.fsm-table { width: 100%; border-collapse: collapse; font-size: .95rem; color: var(--body); min-width: 560px; }
.fsm-table caption { caption-side: bottom; text-align: left; font-size: .84rem; color: var(--faint); padding-top: 10px; font-style: italic; }
.fsm-table th, .fsm-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.fsm-table th { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); background: var(--cream-2); }
.fsm-table td b { color: var(--ink); }
.fsm-table .yes { color: var(--sage-deep); font-weight: 600; }
.fsm-table .no { color: var(--clay-deep, #a0643c); font-weight: 600; }

.fsm-loop { font-family: var(--mono); font-size: .92rem; text-align: center; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 22px 0; overflow-x: auto; white-space: nowrap; }

.fsm-diagram svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.fsm-diagram text { font-family: var(--sans); }

.fsm-private { background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 20px 24px; margin: 30px 0; color: var(--body); font-size: 1rem; }
.fsm-private b { color: var(--ink); }

.fsm-faq dt { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); margin: 26px 0 8px; }
.fsm-faq dd { margin: 0 0 8px; color: var(--body); font-size: 1.05rem; }

.fsm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
.fsm-cta a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: .95rem; }
.fsm-cta a.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fsm-cta a:hover { border-color: var(--sage); }

.article .fsm-first { background: var(--sage-soft); border-radius: 12px; padding: 14px 18px; margin: -10px 0 30px; color: var(--body); font-size: 1.02rem; }
.article .fsm-first b { color: var(--ink); }