/* ── why.css — the "why" section on the ending notice (banking/js/why.js) ──
   Written in the desk's tokens: on the notice (paper) the paper block in desk.css turns them
   to ink, on the result card of a fixed term they stay the terminal's. */
.why{ clear:both; margin:var(--sp-3h) 0 var(--sp-2); }
.why-kind{ font-weight:600; }
.why-kind.win{ color:var(--up); } .why-kind.loss{ color:var(--down); } .why-kind.draw{ color:var(--muted); }
.why-top{ margin:calc(-1 * var(--sp-5)) 0 var(--sp-5); font-size:var(--fs-3); }
.why-t{ width:100%; border-collapse:collapse; font:var(--fs-3)/var(--lh-2) var(--mono); margin:var(--sp-2) 0 var(--sp-3); }
.why-t th{ font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.why-t th, .why-t td{ padding:var(--sp-1) var(--sp-1h) var(--sp-1) 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.why-t .n{ text-align:right; white-space:nowrap; padding-right:var(--sp-3h); }
.why-t td.bad{ color:var(--down); font-weight:600; } .why-t td.ok{ color:var(--text); }
.why-t td.line{ color:var(--muted); }
.why-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:var(--sp-3) 0 var(--sp-1); }
.why ul{ margin:0 0 var(--sp-3) var(--sp-4); padding:0; } .why li{ margin:0 0 var(--sp-1h); }
/* the same section on the result card of a fixed term, which is not paper */
.mode-box .why{ color:var(--text); text-align:left; }
.mode-box .why-top{ margin:var(--sp-2) 0; }