/* Article figures: editorial tables, the five-level ladder, the compliance path.
   Replaces the bordered-cell look with rules, scale and type. Loaded after the page's own CSS. */

/* ---- 1. Tables: rules, not a grid ---- */
.article-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.65;margin:6px 0 26px;font-variant-numeric:tabular-nums}
.article-table thead th{text-align:left;vertical-align:bottom;font-size:12px;font-weight:700;color:var(--muted);padding:0 18px 10px;background:none;border:0;border-bottom:1.5px solid var(--ink)}
.article-table thead th:first-child{padding-left:0}
.article-table tbody td{padding:14px 18px;border:0;border-bottom:1px solid var(--border);vertical-align:top;background:none}
.article-table tbody td:first-child{padding-left:0;font-weight:700;color:var(--ink);background:none;white-space:normal}
.article-table tbody td:last-child{padding-right:0}
.article-table tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
@media(hover:hover){.article-table tbody tr:hover td{background:#FAFBFF}}
@media(min-width:741px){.article-table thead th{white-space:nowrap}}
@media(min-width:741px) and (max-width:820px){
.article-table--plan{table-layout:fixed}
.article-table--plan th:nth-child(n),.article-table--plan td:nth-child(n){min-width:0}
.article-table--plan th:nth-child(1),.article-table--plan td:nth-child(1){width:14%}
.article-table--plan th:nth-child(2),.article-table--plan td:nth-child(2){width:20%}
.article-table--plan th:nth-child(3),.article-table--plan td:nth-child(3){width:36%}
.article-table--plan th:nth-child(4),.article-table--plan td:nth-child(4){width:30%}
}

/* Below 741 px a three or four column table cannot hold its text: the page's own min-widths
   alone push it past 680 px, so the last column sat off-screen behind a scroll box. Each row
   becomes its own block instead, labelled from its column heading (written by
   tools/build_article_figures.py), so nothing is hidden and nothing scrolls sideways. */
@media(max-width:740px){
.article-table{display:block;font-size:14.5px;margin:6px 0 24px}
.article-table thead{display:none}
.article-table tbody{display:block}
.article-table tbody tr{display:block;padding:16px 0 12px;border:0;border-bottom:1px solid var(--border)}
.article-table tbody tr:first-child{border-top:1.5px solid var(--ink)}
.article-table tbody tr:last-child{border-bottom:1.5px solid var(--ink)}
.article-table tbody td{display:block;min-width:0;padding:0 0 10px;border:0;white-space:normal;line-height:1.65}
.article-table tbody td:last-child{padding-right:0;padding-bottom:0}
.article-table tbody td:first-child{padding:0 0 8px;font-size:16px;font-weight:800;line-height:1.45}
.article-table tbody td:not(:first-child)::before{content:attr(data-label-zh);display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:0 0 1px}
html[data-lang=en] .article-table tbody td:not(:first-child)::before{content:attr(data-label-en)}
.article-table tbody td:empty{display:none}
}

/* ---- 2. Figure frame ---- */
.article-diagram{margin:10px 0 32px;padding:22px 0 0;border:0;border-top:1.5px solid var(--ink);border-radius:0;background:none}
.diagram-cap{font-size:13.5px;color:var(--muted);margin:16px 0 0;line-height:1.7;max-width:74ch}

/* ---- 3. The five-level ladder: one shaded row per level, the ramp darkening upward ---- */
.level-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.level-ladder li.lv{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start;padding:14px 18px;border-radius:12px;border:0;border-left:7px solid #2F6BFF;background:#F4F7FF}
.level-ladder li.lv1{border-left-color:#93B4FF;background:#F8FAFF}
.level-ladder li.lv2{border-left-color:#7CA3FF;background:#F4F7FF}
.level-ladder li.lv3{border-left-color:#5C8BFF;background:#EFF4FF}
.level-ladder li.lv4{border-left-color:#3F72FF;background:#EAF1FF}
.level-ladder li.lv5{border-left-color:#0F2A4F;background:#E3ECFF}
.lv-code{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#2F6BFF;color:#fff;font-weight:800;font-size:17px;line-height:1;margin-top:1px;font-variant-numeric:tabular-nums}
.lv5 .lv-code{background:#0F2A4F}
.lv-name{font-size:18px;font-weight:800;color:var(--ink);line-height:1.35;margin:2px 0 4px}
.lv-what{font-size:15.5px;color:#475569;line-height:1.6;margin:0 0 9px}
.lv-meta{display:flex;flex-direction:column;gap:2px;margin:0;font-size:13px;line-height:1.55}
.lv-pair{display:inline-flex;flex-wrap:wrap;gap:0 7px}
.lv-k{font-size:11px;font-weight:700;letter-spacing:.02em;color:#7C8AA5;padding-top:2px}
.lv-v{color:#475569}
@media(max-width:640px){
.level-ladder li.lv{grid-template-columns:38px minmax(0,1fr);column-gap:12px;padding:13px 14px;border-left-width:6px;border-radius:10px}
.lv-code{width:38px;height:38px;font-size:15px;border-radius:9px}
.lv-name{font-size:17px}
.lv-what{font-size:15px;margin-bottom:8px}
.lv-meta{display:block;font-size:12.5px}
.lv-pair{display:block;margin-bottom:3px}
.lv-k{display:inline;margin-right:6px}
.lv-v{display:inline}
}
@media(hover:hover){
.level-ladder li.lv{transition:background .15s}
}

/* ---- 4. The compliance path ---- */
.compliance-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.compliance-flow li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px;align-items:start;padding:0 0 26px;border:0;background:none}
.compliance-flow li::before{content:"";position:absolute;left:19.5px;top:44px;bottom:0;width:1px;background:var(--border)}
.compliance-flow li:last-of-type::before{display:none}
.compliance-flow .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);background:#fff;color:var(--accent);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.compliance-flow strong{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.45;padding-top:6px}
.compliance-flow p{margin:5px 0 0;font-size:15px;line-height:1.65;color:#475569;max-width:56ch}
.compliance-end{margin:2px 0 0;padding:16px 20px;border-radius:0 10px 10px 0;border-left:3px solid var(--accent);background:#F4F7FF;color:var(--ink);font-size:15px;font-weight:600;line-height:1.65}
@media(max-width:640px){
.compliance-flow li{grid-template-columns:34px minmax(0,1fr);column-gap:14px}
.compliance-flow .n{width:34px;height:34px;font-size:13px}
.compliance-flow li::before{left:17px;top:38px}
.compliance-flow strong{font-size:16px}
}


/* ---- 4. The compliance path ---- */
.compliance-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.compliance-flow li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px;align-items:start;padding:0 0 26px;border:0;background:none}
.compliance-flow li::before{content:"";position:absolute;left:19.5px;top:44px;bottom:0;width:1px;background:var(--border)}
.compliance-flow li:last-of-type::before{display:none}
.compliance-flow .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);background:#fff;color:var(--accent);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.compliance-flow strong{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.45;padding-top:6px}
.compliance-flow p{margin:5px 0 0;font-size:15px;line-height:1.65;color:#475569;max-width:56ch}
.compliance-end{margin:2px 0 0;padding:16px 20px;border-radius:0 10px 10px 0;border-left:3px solid var(--accent);background:#F4F7FF;color:var(--ink);font-size:15px;font-weight:600;line-height:1.65}
@media(max-width:640px){
.compliance-flow li{grid-template-columns:34px minmax(0,1fr);column-gap:14px}
.compliance-flow .n{width:34px;height:34px;font-size:13px}
.compliance-flow li::before{left:17px;top:38px}
.compliance-flow strong{font-size:16px}
}