/* Flow diagrams that reflow. On a phone the arrows point down and everything stacks;
   nobody should have to pinch-zoom a picture to understand how the thing works. */

.flow {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

.flow--end { margin-top: 1.25rem; margin-bottom: 0; }

.node {
  flex: 1 1 10rem;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}

.node b { display: block; color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.node span { display: block; margin-top: 0.25rem; color: var(--dim); font-size: 0.8125rem; }
.node span.mono { font-family: var(--mono); font-size: 0.75rem; }

.node--gold { border-color: rgba(245, 176, 26, 0.45); }
.node--gold b { color: var(--gold); }
.node--ember { border-color: rgba(249, 115, 22, 0.4); }
.node--ember b { color: var(--ember); }

.arrow, .plus {
  flex: 0 0 auto;
  align-self: center;
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 1rem;
}

.arrow::before { content: "\2192"; }
.plus { font-size: 1.125rem; }

.split-lede { margin: 0 0 0.875rem; font-size: 0.875rem; color: var(--dim); }

.splits { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.splits .node { flex: 1 1 13rem; }

.tiers3 { display: flex; gap: 0.625rem; flex-wrap: wrap; margin: 1.25rem 0; }

.tier {
  flex: 1 1 9rem;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

/* Must be `.tier .tier-n`: a bare `.tier-n` loses to `.tier span` below, which is more
   specific, and the digits render small and grey instead of large and gold. */
.tier .tier-n {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.tier b { display: block; color: var(--text); font-size: 0.875rem; }
.tier span { display: block; margin-top: 0.1875rem; color: var(--dimmer); font-size: 0.75rem; }

.facts { margin: 0; }
.facts div { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--gold); font-size: 0.875rem; font-weight: 600; }
.facts dd { margin: 0.3125rem 0 0; color: var(--dim); font-size: 0.875rem; }

@media (max-width: 40rem) {
  .flow { flex-direction: column; }
  /* THE TALL-BOX BUG (fixed 2026-08-20, Corey: "biggest boxes for these small as sentences").
     `.node` sets `flex: 1 1 10rem`. In the desktop ROW layout that 10rem is a WIDTH basis and
     grow-1 just shares the leftover space. The moment this query flips the container to
     `column`, the main axis becomes vertical — so the same declaration silently turns into a
     10rem MINIMUM HEIGHT, and `flex-grow: 1` then stretches each node further to fill the
     container. Two lines of text ended up in a 160px+ box with a lake of dead space under it.
     Reset the basis so stacked nodes are sized by their content, which is all they ever needed. */
  .flow > .node { flex: 0 0 auto; }
  .arrow { align-self: flex-start; margin-left: 1rem; }
  .arrow::before { content: "\2193"; }
  .plus { align-self: flex-start; margin-left: 1rem; }
}