/* ==========================================================================
   RateMyChance — Figures layer (reusable article diagram components)
   Loads AFTER css/publication.css. Adds no new tokens beyond two neutrals and
   the Character strand red; every other value references styles.css tokens.

   Components:
     A. .rates      — Two-rate comparison (hero)
     B. .funnels    — Split funnel (domestic vs international)
     C. .hbars      — Department scale bars
     D. .fourbox    — Forced-choice slots
     E. .ladder     — Weighting ladder (Common Data Set)
     F. .radar      — Admission DNA radar (spiky vs whole)
     G. .coh        — Coherence map
     H. .tree       — Financial aid decision tree
     I. .tl         — Admissions timeline
     J. .speed      — "In 30 seconds" checklist
     K. .data-table — Plain data table
     L. .sources    — Grouped source list
   ========================================================================== */
:root{--fig-muted:#9AA3B2;--fig-grid:#EDEFF3;--fig-bar:#DDE3ED;--dna-character:#C0392B}

/* Shared figure shell */
.fig{margin:0}
.fig .fig-frame{border:1px solid var(--border);border-radius:var(--radius-card);background:#fff;padding:26px 20px}
@media(min-width:600px){.fig .fig-frame{padding:32px 30px}}
.fig figcaption{margin-top:12px;font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--text-helper);text-align:center;text-wrap:pretty}
.fig-label{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper);margin-bottom:22px}
.fig-note{font-family:var(--font-sans);font-size:12.5px;line-height:1.6;color:var(--text-helper);margin-top:20px}
.fig .num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em}

/* A. Two-rate comparison ---------------------------------------------------- */
.rates{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:520px){.rates{grid-template-columns:1fr 1fr;gap:0}.rates>div:first-child{padding-right:28px}.rates>div+div{border-left:1px solid var(--border);padding-left:28px}}
.rates .r-num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.035em;line-height:1;display:block}
.rates .quoted .r-num{font-size:50px;color:var(--fig-muted)}
.rates .yours .r-num{font-size:72px;color:var(--text-primary)}
@media(min-width:520px){.rates .quoted .r-num{font-size:56px}.rates .yours .r-num{font-size:86px}}
.rates .r-label{display:block;margin-top:14px;font-family:var(--font-sans);font-size:13.5px;line-height:1.5;color:var(--text-helper)}
.rates .yours .r-label{color:var(--text-secondary);font-weight:600}

/* B. Split funnel ---------------------------------------------------------- */
.funnels{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:560px){.funnels{grid-template-columns:1fr 1fr;gap:34px}}
.fn-head{font-family:var(--font-sans);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.fn-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:16px;font-family:var(--font-sans);font-size:13px;color:var(--text-helper)}
.fn-row .fn-v{font-size:15px;color:var(--text-primary)}
.fn-track{margin-top:6px;height:12px;border-radius:3px;background:var(--fig-grid)}
.fn-track i{display:block;height:100%;border-radius:3px;background:var(--fig-bar)}
.fn-track i.lit{background:var(--primary);min-width:4px}
.fn-rate{display:flex;align-items:baseline;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.fn-rate .num{font-size:32px;color:var(--primary);line-height:1}
.fn-rate em{font-family:var(--font-sans);font-style:normal;font-size:13px;color:var(--text-helper)}

/* C. Department scale bars ------------------------------------------------- */
.hbars{display:grid;gap:16px}
.hb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--font-sans);font-size:13.5px;color:var(--text-secondary)}
.hb-top .num{font-size:15px;color:var(--text-secondary)}
.hb-fill{height:15px;border-radius:3px;background:var(--fig-bar);margin-top:7px}
.hbar.lit .hb-top,.hbar.lit .hb-top .num{color:var(--text-primary);font-weight:700}
.hbar.lit .hb-fill{background:var(--primary)}

/* D. Forced-choice slots --------------------------------------------------- */
.fourbox{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:640px){.fourbox{grid-template-columns:1fr 28px 1fr;gap:16px}}
.fb-col{display:grid;gap:8px}
.fb-head{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper);margin-bottom:2px}
.fb-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;background:#fff;padding:11px 13px;font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.35;color:var(--text-primary)}
.fb-item.out{opacity:.3}
.fb-item.in{border-color:rgba(37,99,235,.35);background:var(--primary-tint)}
.fb-item .fb-mark{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dna-character);white-space:nowrap}
.fb-arrow{display:none}
@media(min-width:640px){.fb-arrow{display:flex;align-items:center;justify-content:center;min-height:180px;color:#C9D2E2}}
.fb-arrow svg{width:24px;height:24px}

/* E. Weighting ladder ----------------------------------------------------- */
.ladder .ld-band{display:grid;gap:6px}
.ladder .ld-mid{margin-top:28px}
.ladder .ld-low{margin-top:28px}
.ld-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--text-primary)}
.ld-tag{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-helper);white-space:nowrap}
.ld-top .ld-row{padding:17px 16px;border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.05);font-size:16.5px;font-weight:700}
.ld-top .ld-tag{color:var(--dna-character)}
.ld-low .ld-row{background:var(--locked-bg);border-color:#E6E6E6;color:var(--text-helper);font-weight:500}
.ld-low .ld-row .ld-name{text-decoration:line-through}

/* F. DNA radar ------------------------------------------------------------ */
.radar{display:block;width:100%;max-width:430px;height:auto;margin:0 auto}
.radar text{font-family:var(--font-sans);font-size:12.5px;font-weight:600;fill:#5A6070}
.rd-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:18px;font-family:var(--font-sans);font-size:13px;color:var(--text-secondary)}
.rd-legend span{display:inline-flex;align-items:center;gap:9px}
.rd-legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--primary)}
.rd-legend .spiky i{border-top:2px dashed #6E7686}

/* G. Coherence map ------------------------------------------------------- */
.coh{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:620px){.coh{grid-template-columns:1fr 1fr;gap:26px}}
.coh svg{display:block;width:100%;height:auto}
.coh text{font-family:var(--font-sans);font-size:12px;font-weight:600;fill:#6A7080}
.coh-head{text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper);margin-bottom:12px}

/* H. Financial aid tree -------------------------------------------------- */
.tree{display:grid;justify-items:center;gap:0}
.tree-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:440px}
.tree-box{border:1px solid var(--border);border-radius:8px;background:#fff;padding:12px 12px;text-align:center;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text-primary)}
.tree-conv{width:100%;max-width:440px;height:44px;color:#C4CFE2}
.tree-node{border:1px solid rgba(37,99,235,.3);background:var(--primary-tint);border-radius:8px;padding:15px 20px;text-align:center;font-family:var(--font-sans);font-size:15px;font-weight:700;line-height:1.45;color:var(--primary)}
.tree-out{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin-top:22px}
@media(min-width:560px){.tree-out{grid-template-columns:repeat(3,1fr)}}
.tree-out div{border:1px solid var(--border);border-radius:8px;padding:16px 12px;text-align:center}
.tree-out .num{display:block;font-family:var(--font-mono);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}
.tree-out .k{display:block;margin-top:7px;font-family:var(--font-sans);font-size:12.5px;line-height:1.45;color:var(--text-helper)}
.tree-out .lit .num{color:var(--primary)}

/* I. Timeline ----------------------------------------------------------- */
.tl{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:660px){.tl{grid-template-columns:repeat(5,1fr);gap:12px}}
.tl-ph{border-top:3px solid var(--primary);padding-top:13px}
.tl-ph:nth-child(1){border-color:#C6D5F7}
.tl-ph:nth-child(2){border-color:#A6BEF2}
.tl-ph:nth-child(3){border-color:#7B9DEB}
.tl-ph:nth-child(4){border-color:#4E7CE1}
.tl-mo{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-helper)}
.tl-t{display:block;margin-top:7px;font-family:var(--font-sans);font-size:14.5px;font-weight:700;line-height:1.35;color:var(--text-primary)}
.tl-tick{display:block;position:relative;margin-top:10px;padding-left:10px;font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:var(--text-secondary)}
.tl-tick::before{content:"";position:absolute;left:0;top:3px;width:2px;height:10px;background:var(--primary)}

/* J. "In 30 seconds" checklist ------------------------------------------ */
.speed{display:grid;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:#fff}
.speed>div{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--border);font-family:var(--font-sans);font-size:15.5px;line-height:1.5;color:var(--text-primary)}
.speed>div:last-child{border-bottom:none}
.speed .ck{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.speed .ck svg{width:12px;height:12px}
.speed strong{font-weight:700}

/* K. Data table -------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-family:var(--font-sans)}
.data-table th{text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-helper);white-space:nowrap}
.data-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.4;color:var(--text-primary)}
.data-table th:last-child,.data-table td:last-child{text-align:right;padding-right:0}
.data-table td.num{font-family:var(--font-mono);font-weight:700}
.data-table td.code{font-family:var(--font-mono);font-size:13.5px;color:var(--primary);font-weight:700}
.data-table tbody tr:last-child td{border-bottom:none}

/* L. Grouped source list ---------------------------------------------- */
.sources h3{margin-top:28px;margin-bottom:10px;font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper)}
.sources ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.article-body .sources li{margin:0;font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.sources li a{font-weight:600}
.article-body .source-note,.source-note{font-family:var(--font-sans);font-size:14px;line-height:1.65;color:var(--text-secondary);margin-top:24px}

/* Keep sans-serif inside figures even though .article-body restyles text */
.article-body .fig p,.article-body .fig li,.article-body .speed p{font-family:var(--font-sans)}