/* Static data pages (/ump, /umk, /jadwal-sholat, /libur-nasional, /kode-pos). Builds on site.css. */
.pg { max-width: 960px; margin: 0 auto; padding: var(--space-lg) var(--space-md) 0; }
.pg h2 { margin-top: var(--space-xl); }
.pg .lead { font-size: 1.125rem; }
.pg footer { margin-top: var(--space-2xl); padding-inline: 0; }
.sections ul, .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: 0; margin: 0; }
.sections { margin-bottom: var(--space-md); font-size: 0.875rem; }
.sections a[aria-current] { color: var(--on-surface); font-weight: 600; }
.crumbs { margin-bottom: var(--space-lg); font-size: 0.8125rem; color: var(--on-surface-variant); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-sm); color: var(--outline); }
.facts { display: grid; gap: var(--space-sm) var(--space-lg); grid-template-columns: 1fr; margin: var(--space-lg) 0; padding: var(--space-md); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 6px; }
.facts dt { font-size: 0.8125rem; color: var(--on-surface-variant); }
.facts dd { margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
@media (min-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.cols { columns: 2 220px; column-gap: var(--space-lg); list-style: none; padding: 0; }
.cols li { break-inside: avoid; padding-block: 2px; }
.spark { margin: var(--space-lg) 0; }
.spark svg { display: block; width: 100%; max-width: 560px; height: auto; }
.spark figcaption { font-size: 0.8125rem; color: var(--on-surface-variant); margin-top: var(--space-xs); }
.sp-line { stroke: var(--on-surface-variant); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sp-dot { fill: var(--primary); }
.sp-txt { fill: var(--on-surface-variant); font-size: 11px; font-family: 'IBM Plex Sans', sans-serif; }
/* Keep real tables on small screens: site.css stacks tables, these are long data tables. */
.pg table.flat thead { display: table-header-group; }
.pg table.flat tbody { display: table-row-group; }
.pg table.flat tr { display: table-row; padding: 0; border-bottom: none; }
.pg table.flat td { display: table-cell; width: auto; padding: var(--space-sm) 12px; border-bottom: 1px solid var(--outline-variant); }
.pg table.flat td::before { content: none; }
.pg table.flat { font-size: 0.9375rem; }
.pg td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg table.sholat td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg table.sholat tr.today td { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.today-card { padding: var(--space-md); background: var(--primary-container); color: var(--on-primary-container); border-radius: 6px; max-width: none; }
.pg h3 { margin-top: var(--space-lg); }