/* The money and about pages (public-worker/src/pages/{money,about}.js; the home page has front.css, organizations org.css).
 * Colors, spacing and radii come from tokens.css; the shared pieces (cards, stats, tables, filters, definition lists)
 * from site.css. Nothing here is inline in a page: the CSP allows no style attribute. */

/* (the home page has its own stylesheet, front.css: the hub's home) */

/* (the organizations pages have their own stylesheets now: org.css and charts.css) */

/* ---- money ---- */
.money-block { margin-top: 30px; }
.money-block > h2 { margin-top: 0; }
.money-disclaimer { border: 2px solid var(--gold); background: var(--panel); border-radius: var(--radius-lg);
  padding: 14px 18px; margin: 12px 0 18px; max-width: 78ch; }
.money-disclaimer h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  font-family: var(--font-sans); color: var(--gold); }
.money-disclaimer p { margin: 0; font-size: 14px; white-space: pre-line; }
.money-table .coverage { color: var(--muted); font-size: 14px; min-width: 24ch; max-width: 52ch; }
.money-meta { max-width: 76ch; }
.money-meta h3 { margin-bottom: 4px; }
/* the Overview's cards: one for each part of Money (the tab bar names them too), the home page's tiles in shape */
.money-parts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
@media (min-width: 640px) { .money-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }      /* 2 by 2, never 3 and an orphan */
@media (min-width: 1180px) { .money-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.money-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; color: inherit; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--panel)) 0%, var(--panel) 60%);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.money-part:hover, .money-part:focus-visible { color: inherit; border-color: color-mix(in srgb, var(--gold) 60%, var(--border));
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--gold) 80%, transparent); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .money-part { transition: none; } .money-part:hover, .money-part:focus-visible { transform: none; } }
.mp-nm { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.money-part:hover .mp-nm, .money-part:focus-visible .mp-nm { text-decoration: underline; }
.mp-sc { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.mp-desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; flex: 1; }
.mp-go { margin-top: 6px; color: var(--gold); font-size: 14px; font-weight: 600; }
.mp-go::after { content: " \2192"; }

/* ---- about ---- */
.about-toc ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.about-toc a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); text-decoration: none; color: var(--muted); font-size: 14px; }
.about-toc a:hover { color: var(--text); border-color: var(--control-border); }
.about-block { margin-top: 32px; scroll-margin-top: 16px; max-width: 76ch; }
.about-block > h2 { margin-top: 0; }
.about-block:target > h2 { box-shadow: 0 3px 0 var(--gold); display: inline-block; }
.about-text p { white-space: pre-line; }
.about-contact { color: var(--text); white-space: pre-line; }
.coming-soon { color: var(--muted); font-style: italic; }
.cite-line { font-size: 15px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; margin: 10px 0 12px; }
.about-list { margin: 8px 0 14px; padding-left: 20px; }
.about-list li { margin: 6px 0; }

@media (max-width: 640px) {
  .state-links { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}