/* ==========================================================================
   The money page.

   Only what money.html needs that components.css does not already provide.
   The charts here are the house .chart table, and the badges, banners and
   section rules are the shared ones — what is added below is the figure card,
   the headline scale, and the dark panel where the withheld figures live.

   One deliberate restraint runs through the whole file: no status colour.
   The thermal ramp on this site is a legend — teal means operational, amber
   under construction, violet proposed, and signal is reserved for a resident
   reporting a problem. A tax figure is none of those things, so colouring a
   bar by whether the money is collected or forgone would put a meaning into
   the palette that the map's legend then has to contradict. Every bar here is
   ink on a sunken track, and the comparison is carried by length alone, which
   is the only honest encoding of a quantity anyway.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Figure cards

   A value is never printed without its label, its period and a link to the
   document it came from — so they are one block, and the block is what gets
   laid out. Splitting the source into a separate column would let a redesign
   drop it.
   -------------------------------------------------------------------------- */

/* The page header already carries a heavy rule under it, so the first section
   opens flush against it rather than adding a second gap. */
.money-lede {
  padding-top: 0;
}

.money-sources__foot {
  margin-top: var(--space-5);
}

.money-fig-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .money-fig-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .money-fig-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.money-fig {
  border-top: var(--rule-heavy) solid var(--text);
  padding-top: var(--space-3);
}

.money-fig__value {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  /* Nine-digit dollar figures are the widest thing on this page. Let them
     break rather than push the grid column open on a 375px screen. */
  overflow-wrap: anywhere;
}

.money-fig__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text);
}

.money-fig__period {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.money-fig__tags {
  margin: 0 0 var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.money-fig__source {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* The source link is the whole point of the card and it is on its own line, so
   it gets a real target rather than the height of 13px type. inline-flex keeps
   the "dated …" stamp beside it instead of on a line of its own. */
.money-fig__source a,
.money-chart__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.money-fig__asof {
  color: var(--text-subtle);
  white-space: nowrap;
}

.money-fig__note {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Estimates are marked at the container as well as on the card, because the
   badge on a single card is easy to skim past and the distinction between a
   published figure and a modelled one is the whole point of that section. */
.money-figures--estimate .money-fig {
  border-top-color: var(--border-strong);
  border-left: var(--rule-heavy) solid var(--border-strong);
  padding-left: var(--space-3);
  background: var(--bg-sunken);
  padding-bottom: var(--space-3);
  padding-right: var(--space-3);
}

/* --------------------------------------------------------------------------
   The headline scale

   Two bars, one scale, both from zero. The value is set above the bar rather
   than at its end so the two figures line up with each other vertically and
   can be compared as text as well as by length.
   -------------------------------------------------------------------------- */

.money-scale__figure {
  margin: var(--space-5) 0 0;
}

.money-scale__row + .money-scale__row {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--rule-width) solid var(--rule);
}

.money-scale__caption {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}

.money-scale__value {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 84;
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
}

.money-scale__track {
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border);
  height: 18px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.money-scale__bar {
  height: 100%;
  background: var(--bg-ink);
  min-width: 3px;
}

.money-scale__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  max-width: 60ch;
}

.money-scale__caveat {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.money-chart {
  margin: var(--space-5) 0 var(--space-4);
}

.money-chart__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  white-space: nowrap;
}

.money-chart__note,
.money-chart__credit {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 68ch;
}

.money-chart__credit {
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   The dark panel: what is not disclosed

   Full-bleed and inverted, because this is the one section of the page that
   is not a number. It is the shape of a hole, and it needs to read as a
   different kind of statement from the tables around it.
   -------------------------------------------------------------------------- */

/* Contained rather than full-bleed. The 100vw bleed trick measures the
   viewport including the scrollbar gutter, which puts a few pixels of
   horizontal scroll on every desktop browser that reserves one — and a page
   that scrolls sideways is a bug, not a layout choice. */
.money-dark {
  background: var(--bg-ink);
  color: var(--text-on-ink);
  padding: var(--space-7) var(--space-4);
  border-radius: var(--radius-lg);
  margin-block: var(--space-7);
}

@media (min-width: 700px) {
  .money-dark {
    padding: var(--space-8) var(--space-6);
  }
}

.money-dark h2 {
  color: var(--text-on-ink);
}

.money-dark .kicker {
  color: var(--text-on-ink);
}

.money-dark .kicker::after {
  background: var(--border-on-ink);
}

.money-dark__prose p {
  color: var(--text-on-ink);
}

.money-dark__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--border-on-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-on-ink-muted);
  max-width: 68ch;
}

.money-figures--invert .money-fig {
  border-top-color: var(--text-on-ink);
}

.money-figures--invert .money-fig__value,
.money-figures--invert .money-fig__label {
  color: var(--text-on-ink);
}

.money-figures--invert .money-fig__period,
.money-figures--invert .money-fig__asof,
.money-figures--invert .money-fig__note {
  color: var(--text-on-ink-muted);
}

.money-figures--invert a {
  color: var(--teal-bright);
}

.money-withheld__list {
  margin: var(--space-6) 0 0;
}

.money-withheld__item + .money-withheld__item {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--rule-width) solid var(--border-on-ink);
}

/* Two up once there is room. Each entry is short, and stacking four of them in
   a single column on a wide screen leaves the panel reading as a list of
   afterthoughts rather than the section the page is built around. */
@media (min-width: 900px) {
  .money-withheld__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
  }

  .money-withheld__item + .money-withheld__item {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .money-withheld__item {
    padding-top: var(--space-4);
    border-top: var(--rule-width) solid var(--border-on-ink);
  }
}

.money-withheld__claim {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 84;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-ink);
}

.money-withheld__why {
  margin: 0;
  max-width: 68ch;
}

.money-withheld__why p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-on-ink-muted);
  margin-bottom: var(--space-2);
}

.money-withheld__why .money-fig__source {
  margin: 0;
}

.money-withheld__why a {
  color: var(--teal-bright);
}

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.money-sources__group + .money-sources__group {
  margin-top: var(--space-5);
}

.money-sources__kind {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-width) solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}

.money-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.money-sources__list li {
  padding-block: var(--space-2);
  border-bottom: var(--rule-width) solid var(--rule);
}

.money-sources__list li:last-child {
  border-bottom: 0;
}

/* Source links are the main way off this page, so they get a full touch
   target rather than the line height of their text. */
.money-sources__list a {
  display: flex;
  min-height: 44px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.money-sources__pub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}