/* Site layout on top of system.css (copied from design/system.css; edit it there and copy it over).
   Page frames, the landing page, list controls, profile header and the closing call to action. */

/* ---------- Frame ---------- */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.top nav { display: flex; gap: var(--space-4); }
.top nav a { text-decoration: none; white-space: nowrap; }
.top .logo { white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current="page"] { text-decoration: underline; }
.foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-4); border-top: var(--hair) solid var(--line); padding-top: var(--space-3); }
.foot nav { display: flex; gap: var(--space-4); }
.intro { display: grid; gap: var(--space-4); }
a.btn { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
/* The system's text link action, on an anchor */
a.link {
  font-weight: 500; text-decoration: none; padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% var(--hair) no-repeat;
}
a.link:hover, a.link:focus-visible { background-size: 100% 2px, 100% var(--hair); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Landing ---------- */
body.landing { min-height: 100svh; display: grid; grid-template: auto 1fr auto / minmax(0, 1fr); }
.landing .bar, .landing .hero, .landing .end { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: var(--space-4); }
.landing .bar { padding-top: var(--space-5); }
.hero { display: grid; align-content: center; gap: var(--space-5); padding-block: var(--space-8); }
.hero h1 { font-size: var(--text-3xl); line-height: .9; letter-spacing: -0.05em; max-width: 11ch; }
.hero .lede { max-width: 46ch; }
.hero .ledes { display: grid; gap: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-2); }
.landing .end { padding-bottom: var(--space-5); }
.landing .end nav { display: flex; justify-content: flex-end; gap: var(--space-4); border-top: var(--hair) solid var(--line); padding-top: var(--space-3); }

/* ---------- Forms ---------- */
/* Email fields match the system's text inputs */
input[type=email] {
  font: inherit; color: var(--ink); background: var(--paper);
  border: var(--hair) solid var(--ink); border-radius: 0; height: 40px; padding: 0 var(--space-3);
  min-width: 0; max-width: 100%; appearance: none;
}
input[type=email]:focus-visible { outline-offset: 0; outline-width: 2px; }
.subscribe { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 460px; }
.subscribe[hidden] { display: none; }
.subscribe input { flex: 1 1 220px; }
.subscribe label, .subscribe .turnstile, .subscribe [data-status] { flex-basis: 100%; }
.turnstile:empty, [data-status]:empty { display: none; }
.form { display: grid; gap: var(--space-4); max-width: 560px; }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 500; }
.field input, .field textarea { width: 100%; }
textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: var(--hair) solid var(--ink); border-radius: 0;
  padding: var(--space-2) var(--space-3); min-height: 160px; resize: vertical;
}
textarea:focus-visible { outline-offset: 0; }
.error { font-size: var(--text-xs); font-weight: 500; }
.done { font-weight: 500; }

/* ---------- List ---------- */
.list { display: grid; gap: var(--space-4); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pager #range { margin-left: auto; }
.pager .pages { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); font-variant-numeric: tabular-nums; }
.pager [aria-current="page"] { font-weight: 700; padding-bottom: 3px; border-bottom: 2px solid currentColor; }
.pager .gap { color: var(--muted); }
.pager button.link:disabled { visibility: hidden; }
.asof { max-width: var(--measure); }
/* A lede with its small print: one shared width, measured at the lede's size, and a tight gap */
.standfirst { display: grid; gap: var(--space-2); font-size: var(--text-md); max-width: var(--measure); }
.standfirst .lede, .standfirst .asof { max-width: none; }

/* ---------- Profile ---------- */
.crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.crumbs nav { display: flex; gap: var(--space-4); }
.phead { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: end; }
.phead h1 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.phead .facts { margin-top: var(--space-4); }
.phead .chip { margin-top: var(--space-3); }
.ranks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.prog { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: var(--hair) solid var(--line); }
.prog:last-child { border-bottom: 0; padding-bottom: 0; }
.stack { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }

/* ---------- Method ---------- */
/* Equations: each term is a labeled block, operators set large between them.
   Both equations share one grid, so their = signs line up and their terms fill the box at one height. */
.equations { padding: var(--space-5) var(--space-4); display: grid; grid-template-columns: max-content 1fr; gap: var(--space-5) var(--space-4); container-type: inline-size; }
.equation { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.equation + .equation { border-top: var(--hair) solid var(--line); padding-top: var(--space-5); }
.rhs { display: flex; align-items: stretch; gap: var(--space-3); min-width: 0; }
.step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.step.constant { flex: none; }
.term { flex: 1; align-self: stretch; display: grid; align-content: center; gap: 2px; padding: var(--space-2) var(--space-3); border: var(--hair) solid var(--ink); background: var(--paper); }
.term b { font-size: var(--text-md); line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.term span { font-size: var(--text-xs); color: var(--muted); }
.step.constant .term { min-width: 3em; text-align: center; }
.term.result { border: 0; padding: 0; background: none; }
.term.result b { font-size: var(--text-lg); }
.op { font-size: var(--text-xl); font-weight: 400; line-height: 1; color: var(--ink); width: 0.7em; flex: none; text-align: center; }
/* Too narrow for a row: a column of arithmetic, the result on top and each operator beside its term */
@container (max-width: 940px) {
  .equation { grid-template-columns: 1fr; gap: var(--space-3); }
  .equation + .equation { padding-top: var(--space-4); }
  .rhs { flex-direction: column; gap: var(--space-2); }
  .step, .step.constant { flex: none; }
  .step.constant .term { text-align: left; }
  .term:not(.result) { min-height: calc(var(--text-md) * 1.2 + 2px + var(--text-xs) * 1.5 + 2 * var(--space-2)); }
  .op { font-size: var(--text-lg); }
  /* Growth as a fraction: FY end over FY base, a bar between them, then − 1 */
  .equation.ratio { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); }
  .ratio .rhs { display: grid; grid-template-columns: auto minmax(min-content, 18rem) auto auto; justify-content: start; gap: var(--space-3) var(--space-2); align-items: center; }
  .ratio .step { display: contents; }
  .ratio .step:nth-child(1) .op { grid-area: 1 / 1 / 3 / 2; }
  .ratio .step:nth-child(1) .term { grid-area: 1 / 2; position: relative; }
  .ratio .step:nth-child(1) .term::after { content: ""; position: absolute; left: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-3) / 2 - 2px); height: 2px; background: var(--ink); }
  .ratio .step:nth-child(2) .op { display: none; }
  .ratio .step:nth-child(2) .term { grid-area: 2 / 2; }
  .ratio .step:nth-child(1) .op, .ratio .constant .op { margin-inline: var(--space-1); }
  .ratio .constant .op { grid-area: 1 / 3 / 3 / 4; }
  .ratio .constant .term { grid-area: 1 / 4 / 3 / 5; align-self: center; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; }
  /* Operating revenue as a column of figures: the terms, a rule, then the total at the bottom */
  .ledger .rhs { order: 1; }
  .ledger .step:first-child .op { visibility: hidden; }
  .ledger .result { order: 2; display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--heavy) solid var(--ink); }
  .ledger .result::before { content: "="; font-size: var(--text-lg); font-weight: 400; line-height: 1; width: 0.7em; flex: none; text-align: center; }
}
/* The smallest phones: a tighter fraction so − 1 still fits on the line */
@container (max-width: 320px) {
  .ratio .result b { font-size: var(--text-md); }
  .ratio .step:nth-child(1) .op, .ratio .constant .op { margin-inline: 0; }
  .ratio .step:not(.constant) .term { padding-inline: var(--space-2); }
}
td.group { padding-top: var(--space-5); font-weight: 700; border-bottom: var(--hair) solid var(--ink); }
.funnel td:first-child { min-width: 220px; }
.funnel .gbar { min-width: 140px; }
/* Drawer: a full-height panel from the right, over a dimmed page */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; border: 0; border-left: var(--hair) solid var(--ink); background: var(--paper); color: var(--ink);
  display: none; grid-template-rows: auto 1fr;
}
.drawer[open] { display: grid; }
.drawer::backdrop { background: color-mix(in srgb, var(--gray-950) 40%, transparent); }
.drawer > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4); border-bottom: var(--heavy) solid var(--ink); }
.drawer > header h2 { font-size: var(--text-md); }
.drawer > header h2:focus { outline: none; }
.drawer-body { overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: drawer-in .22s ease-out; }
  .drawer[open]::backdrop { animation: backdrop-in .22s ease-out; }
}
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes backdrop-in { from { opacity: 0; } }

.pledge-example { max-width: 560px; }
.pledge-example td:first-child { white-space: nowrap; }

/* The revenue card's arithmetic: from the 990's total to the ranking's figure */
.reconcile { margin-top: var(--space-3); font-size: var(--text-xs); }
.reconcile dt { color: var(--muted); }
.reconcile .total { color: var(--ink); font-weight: 700; border-top: var(--hair) solid var(--ink); border-bottom: 0; }

/* ---------- Closing call to action ---------- */
.cta { padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-4); justify-items: start; }
.cta h2 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.cta .lede { max-width: 52ch; }

@media (prefers-reduced-motion: no-preference) { a.link { transition: background-size .2s ease; } }
@media (max-width: 640px) {
  .landing .bar, .landing .hero, .landing .end { padding-inline: var(--space-3); }
  .hero { padding-block: var(--space-7); gap: var(--space-4); }
  .phead { grid-template-columns: 1fr; gap: var(--space-5); }
  .phead h1 { font-size: var(--text-lg); }
  .cta { padding: var(--space-5) var(--space-3); }
  .cta h2 { font-size: var(--text-lg); }
  .equations { padding: var(--space-4) var(--space-3); }
  .funnel td:first-child { min-width: 0; }
  .top nav { gap: var(--space-3); }
  .bystate th { white-space: normal; }
}

/* ---------- State pages ---------- */
a.stat { color: inherit; text-decoration: none; }
a.stat:hover span, a.stat:focus-visible span { text-decoration: underline; }
.states { display: grid; gap: var(--space-3); }
.states ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2) var(--space-4); }
.states .note { font-variant-numeric: tabular-nums; }
td.org.state { min-width: 0; }