[hidden] { display: none !important; }
.flush { margin-top: 0; }
.card { margin-bottom: 16px; }
.warn { color: var(--warn); font-weight: 600; }
h3 { font-size: 17px; margin: 18px 0 6px; }
ul { padding-left: 20px; }
code { font-family: var(--mono); }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin: 10px 0 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; color: var(--muted); }
.years { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0 6px; }
.card > .field { margin: 10px 0 0; }

.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin: 0 0 10px; }
.preset { display: flex; flex-direction: column; gap: 4px; }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button:disabled { opacity: .55; cursor: not-allowed; }
label.btn { display: inline-flex; align-items: center; min-height: 40px; }
input.sr:focus-visible + label.btn { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Period table: a real table on wide screens, stacked rows on phones (no horizontal scroll). */
#period-table { margin: 0 0 10px; }
#period-table caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
#period-table thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
#period-table tbody th { font-weight: 600; width: 36%; }
#period-table td { font-variant-numeric: tabular-nums; }
#period-table td:nth-child(n+2) { text-align: right; }
#period-table thead th:nth-child(n+2) { text-align: right; }
#period-table .m-src { display: block; font-weight: 400; margin-top: 2px; overflow-wrap: anywhere; }
.na { color: var(--muted); font-style: italic; }
.part { color: var(--warn); font-size: 12px; white-space: nowrap; }

.metric { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.metric .label { font-size: 14px; flex: 1 1 200px; }
.metric .value { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; text-align: right; }
.metric p { flex-basis: 100%; margin: 0; }
.metric details { flex-basis: 100%; margin-top: 2px; }
.metric summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.metric code { font-size: 12px; display: block; margin-top: 4px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.metric.nofall { border-bottom: none; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 600; }
.formulas { margin: 4px 0 12px; }
.formulas summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.formulas code { font-size: 12px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
#reading, #r-verdict { margin: 4px 0 8px; }

.chart-fig { margin: 12px 0 0; }
.chart-fig figcaption { font-weight: 600; overflow-wrap: anywhere; }
.chart { display: block; width: 100%; max-width: 560px; height: auto; margin: 8px 0 4px; }
.chart text { fill: var(--muted); font-family: var(--font); font-size: 10px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .seg { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .band { fill: var(--accent); opacity: .14; }
.chart .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.chart .hollow { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.chart text.lbl { fill: var(--ink); font-weight: 600; }

.sources { margin: 12px 0 0; }
.sources ul { margin: 6px 0; }
.sources li { margin-bottom: 4px; overflow-wrap: anywhere; }
.limits li { margin-bottom: 6px; }

@media (max-width: 640px) {
  #period-table, #period-table tbody, #period-table tr, #period-table th, #period-table td, #period-table caption { display: block; }
  #period-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #period-table tbody tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  #period-table tbody tr:last-child { border-bottom: none; }
  #period-table tbody th { width: auto; }
  #period-table th, #period-table td { border: 0; padding: 2px 0; }
  #period-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; }
  #period-table td:nth-child(n+2) { text-align: left; }
  #period-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; flex: 0 0 auto; }
  #period-table td .v { text-align: right; overflow-wrap: anywhere; font-weight: 600; }
}