/* Scoped layout for the article, its figures and its explorer. */
.post-article li { line-height: 1.75; margin: .6rem 0; color: var(--ink-secondary); }
.post-article > .article-figure, .post-article > .article-table-scroll { grid-column: 1 / -1; }
.article-figure { margin: 2rem 0; }
.figure-scroll { overflow-x: auto; border-radius: 14px; background: #0f172a; }
.figure-scroll img { display: block; width: 100%; min-width: 880px; height: auto; }
.article-figure figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--ink-secondary); }
.article-table-scroll { overflow-x: auto; margin: 1rem 0; }
.article-table-scroll table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .95rem; line-height: 1.6; }
.article-table-scroll table.mas-scoring { min-width: 960px; font-size: .9rem; }
.article-table-scroll caption { text-align: left; font-weight: 600; margin-bottom: .75rem; }
.article-table-scroll th, .article-table-scroll td { padding: .9rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-table-scroll th { background: #edf7f2; }
.figure-scroll:focus-visible, .article-table-scroll:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 4px; }
.skip-link { position: absolute; top: .5rem; left: .5rem; transform: translateY(-200%); background: white; padding: .75rem; z-index: 10; color: var(--brand-strong); }
.skip-link:focus { transform: none; }
/* Explorer */
.ex-panel { background: #172235; border: 1px solid var(--gc-line); border-radius: 10px; padding: 18px; }
.ex-panel h3 { margin-top: 0; }
.ex-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 0; }
.ex-stats div { background: #0f1a2b; border: 1px solid var(--gc-line); border-radius: 8px; padding: 10px 12px; }
.ex-stats dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-muted); }
.ex-stats dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; color: #f8fafc; }
.ex-chart { width: 100%; height: auto; display: block; background: #111d30; border-radius: 8px; margin-top: 12px; }
.ex-range { width: 100%; }
.ex-range-labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gc-muted); }
.ex-chart-scroll .ex-chart { min-width: 560px; }