/* Site shell — header and footer. Card 5.
 *
 * Role tokens only. No raw colour appears here: tools/check-assets.py fails the
 * build on a hex or a --ct-c-* primitive in page CSS, because a colour named by
 * how it looks has lost the reason it was chosen. */

/* Base typography. The shell owns this: the token file declares the families
 * and the scale, but nothing applied them, so every page rendered in the
 * browser's serif default while the fonts sat self-hosted and unused. A token
 * that is declared and never applied is indistinguishable from one that is
 * missing, from the reader's side. */

body {
  margin: 0;
  background: var(--ct-surface-raised);
  color: var(--ct-text);
  font-family: var(--ct-font-text);
  font-weight: var(--ct-weight-light);
  font-size: var(--ct-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  color: var(--ct-text-strong);
  line-height: 1.3;
}

main { padding: 22px 40px 28px; }
main a { color: var(--ct-accent-primary); }

.placeholder-notice {
  background: var(--ct-surface);
  border-left: 4px solid var(--ct-accent-positive);
  padding: 12px 18px;
  margin: 18px 40px 0;
  font-size: var(--ct-size-body-sm);
}
.placeholder-notice p { margin: 0; }

.ct-header {
  background: var(--ct-surface-inverse);
  color: var(--ct-text-inverse);
  padding: 18px 40px 6px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.ct-header__mark {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.ct-header__wordmark {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-wordmark);
  line-height: .95;
  letter-spacing: -.5px;
}

.ct-header__up { color: var(--ct-accent-positive); }

.ct-header__descriptor {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-meta);
  letter-spacing: var(--ct-track-descriptor);
  color: var(--ct-accent-on-inverse);
  text-transform: uppercase;
}

.ct-header__nav { margin-left: auto; }
.ct-header__nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.ct-header__nav a {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-medium);
  font-size: var(--ct-size-ui);
  color: var(--ct-text-inverse-muted);
  text-decoration: none;
}
.ct-header__nav a:hover { color: var(--ct-text-inverse); }

.ct-footer {
  background: var(--ct-surface-inverse);
  color: var(--ct-text-inverse);
  padding: 2px 40px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: var(--ct-size-ui);
}

.ct-footer__site {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-body);
}

.ct-footer__detail,
.ct-footer__place { color: var(--ct-text-inverse-muted); font-weight: var(--ct-weight-light); }
.ct-footer__detail span { color: var(--ct-text-inverse); }

.ct-footer__by {
  margin-left: auto;
  text-align: right;
  color: var(--ct-text-inverse-subtle);
  font-size: var(--ct-size-micro);
  letter-spacing: var(--ct-track-micro);
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  text-transform: uppercase;
}
.ct-footer__by a { color: var(--ct-text-inverse); display: block; font-size: var(--ct-size-ui); letter-spacing: 0; }

/* The footer's asymmetric padding — 2px top, 28px bottom — mirrors the print
 * sheet's, where it lifts the text clear of a printer's unprintable margin. It
 * is retained here so the two artifacts sit the same way, and because a footer
 * band with its text hard against the top edge reads as a mistake either way. */

/* Focus. Card 27 requires a visible indicator on every interactive element, and
 * the two grounds need different rings: the light ring measures 2.20:1 on navy
 * and the inverse ring 1.70:1 on white, so neither works on both. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ct-focus-ring-width) solid var(--ct-focus-ring);
  outline-offset: var(--ct-focus-ring-offset);
}

.ct-header a:focus-visible,
.ct-footer a:focus-visible {
  outline-color: var(--ct-focus-ring-inverse);
}

/* ---- The next-step block. ------------------------------------------------
 *
 * Two pages carry it, and they order it DIFFERENTLY on purpose:
 *
 *   /where-does-your-money-go/  the report leads, a conversation is the alternate
 *   /score/  (results)          a conversation only, and no report link at all
 *
 * The reason is what precedes it. On the money-flow page the reader has drawn a
 * picture of their own cash and nothing has judged them, so an offer to go
 * deeper reads as the next step it is. On the results view the reader has just
 * been handed a verdict — an area named, a band against it — and a paid CTA
 * directly beneath a finding makes the finding read as the setup for it.
 *
 * Recorded here as well as on both pages because a reasoned difference is only
 * reasoned if the reason is findable from either side of it.
 * -------------------------------------------------------------------------- */

.ct-next {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--ct-border);
  max-width: 66ch;
}
.ct-next__h {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-label);
  letter-spacing: var(--ct-track-section);
  text-transform: uppercase;
  color: var(--ct-text-muted);
  margin: 0 0 10px;
}
.ct-next p { font-size: var(--ct-size-body-sm); line-height: 1.5; margin: 0 0 11px; }
.ct-next__cta { margin-top: 14px; }
.ct-next__link {
  display: inline-block;
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-ui);
  color: var(--ct-text-inverse);
  background: var(--ct-accent-primary);
  padding: 10px 16px;
  text-decoration: none;
}
.ct-next__link:focus-visible {
  outline: var(--ct-focus-ring-width) solid var(--ct-focus-ring);
  outline-offset: var(--ct-focus-ring-offset);
}
.ct-next__alt { color: var(--ct-text-muted); }
.ct-next__alt a { color: var(--ct-accent-primary); }