/* Scoped layout for the MAS guidelines article, its figures and the materiality explorer. */
.mas-article li { line-height: 1.75; margin: .6rem 0; color: var(--ink-secondary); }
.mas-article > .article-figure, .mas-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 */
#mas-output { background: #172235; border: 1px solid var(--gc-line); border-radius: 10px; padding: 18px; }
#mas-output h3 { margin-top: 0; }
#mas-output h4 { margin: 14px 0 4px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-muted); }
#mas-output p { margin: 0; }
.mas-tiers { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 4px !important; }
.mas-tier { display: inline-block; padding: 6px 12px; border-radius: 7px; border: 1px solid; font-weight: 700; font-size: .85rem; }
.mas-tier[data-tier="high"] { color: var(--gc-hazard); border-color: var(--gc-hazard); background: #3a1620; }
.mas-tier[data-tier="medium-high"] { color: var(--gc-approx); border-color: var(--gc-approx); background: #3a2a10; }
.mas-tier[data-tier="medium"] { color: var(--gc-control); border-color: var(--gc-control); background: #1e2547; }
.mas-tier[data-tier="low"] { color: var(--gc-truth); border-color: var(--gc-truth); background: #123028; }
.mas-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 650px) { .mas-dims { grid-template-columns: 1fr; } }