/* Extend the overview's palette and cards to generated pages. */
.masthead h1 { max-width: 36ch; overflow-wrap: anywhere; }
.tagline { max-width: 72ch; }
.reading > nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 20px 0; font-size: .85rem; color: var(--ink-2); }
.reading > section {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; margin: 24px 0; overflow-wrap: anywhere;
}
.reading section > p { max-width: 72ch; color: var(--ink-2); }
.reading section > p:empty { display: none; }
.reading section > h2 { line-height: 1.3; }
.reading .s-value { font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: end; margin-top: 20px; }
label { display: grid; gap: 6px; min-width: 0; font-size: .9rem; color: var(--ink-2); }
input, select, button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--baseline); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%; min-width: 0; }
button { cursor: pointer; font-weight: 600; background: var(--accent-wash); color: var(--series-1-deep); }
button:hover { border-color: var(--series-1); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: end; }
.form-actions button, form > button { width: auto; min-width: 140px; }
form > button { grid-column: 1 / -1; justify-self: end; }
.history-chart { display: block; width: 100%; height: auto; color: var(--series-1); border-bottom: 1px solid var(--grid); margin-top: 20px; }
summary { cursor: pointer; padding: 10px 0; color: var(--series-1-deep); }
.reading #conversion-result, .reading .tool-result { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
#conversion-source { font-size: .85rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.reading table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
td, th { padding: 10px; text-align: start; border-bottom: 1px solid var(--grid); }
th { color: var(--ink-2); }
.currency-directory, .reference-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; list-style: none; padding: 0; margin: 24px 0; }
.currency-directory li { min-width: 0; }
.currency-directory a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; }
.currency-directory strong { color: var(--ink); font-size: 1.15rem; }
.currency-directory span { color: var(--ink-2); font-size: .9rem; }
.currency-directory a:hover { border-color: var(--series-1); background: var(--accent-wash); }
.reference-rates { gap: 0 20px; font-size: .85rem; }
.reference-rates li { padding: 12px 0; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.reference-rates a { font-weight: 650; }
progress { max-width: 100%; }
@media (max-width: 540px) {
  .reading > section { padding: 18px; }
  form { grid-template-columns: minmax(0, 1fr); }
  .form-actions { flex-direction: column; }
  .form-actions button, form > button { width: 100%; }
}
.number-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.number-scale > div { padding: 1rem; border: 1px solid currentColor; }
progress { max-width: 100%; width: 100%; }

.ranking-table { min-width: 700px; width: 100%; }
.ranking-table th:first-child, .ranking-table td:first-child { min-width: 160px; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { white-space: nowrap; min-width: 95px; }
.ranking-table td:nth-child(3) { min-width: 160px; }
.ranking-table td:last-child { min-width: 135px; }