/* ============================================================================
   legal.css — /privacy and /terms.

   The last two pages still wearing the old dark site's design. They were moved
   onto the tokens in an earlier pass (which fixed a live AA failure and the
   1.4.1 colour-alone links), but kept a bespoke inline <style>, a 660px
   column and DM Sans — a font the rebuild does not use anywhere else. This is
   the restyle that note was asking for.

   ⚠ PRESENTATION ONLY. Not one word of either document changed; the markup is
   byte-identical apart from swapping the inline <style> for this file and the
   font link for the site's. They are legal documents and the diff should be
   readable as such.

   ── ⚠ THE GROUND IS THE FORECAST PAGES', DELIBERATELY ─────────────────────
   #E9EDF1 / #091322 is the pair css/forecast.css settled on, chosen there for
   SEPARATION: cards are white, and this ground gives a 1.177 ground-to-card
   ratio where a near-white gave 1.087, so the card lifts instead of floating
   on a surface almost its own value.

   It is redeclared here rather than reused as `--fcp-ground` because these
   pages do not load forecast.css — the token's LIGHT value lives there, and
   only its dark override is in theme-tokens.css. Importing a whole page shell
   for one colour would be the worse trade. The value is duplicated; the
   REASONING is not, and this comment is the pointer back to it.
   ========================================================================== */

:root { --legal-ground: #E9EDF1; }
:root[data-theme='dark'] { --legal-ground: #091322; }

/* ⚠ NO PADDING ON THE BODY, AND --nav-h IS NOT AN OFFSET HERE. The nav is
   `position: sticky; top: 0` (css/nav.css) — it is IN FLOW and takes its own
   height at the top of the document. Padding the body by nav-h therefore
   pushes the NAV down rather than clearing it, which is exactly what the
   first attempt did: 92px of ground above the bar. Horizontal padding on the
   body would inset the nav too, narrowing it against every other page. So the
   card owns its own inset and the body owns only the ground. */
.legal-body {
  min-height: 100dvh;
  background: var(--legal-ground);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

/* ⚠ THE READING COLUMN IS --maxw-text (760px), THE SITE'S, not the 660 these
   pages carried. Prose wants a measure of roughly 65-75 characters and the
   token already encodes that decision for every text surface here; a second
   number would drift from it silently. */
.legal-card {
  /* min() rather than max-width + a media query: the gutter is the same
     expression at every width, so there is no breakpoint to keep in step. */
  width: min(var(--maxw-text), calc(100% - 2 * var(--sp-4)));
  margin: var(--sp-8) auto var(--sp-12);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgb(16 24 32 / 4%);
}
@media (max-width: 560px) {
  .legal-card {
    width: min(var(--maxw-text), calc(100% - 2 * var(--sp-3)));
    margin-block: var(--sp-5) var(--sp-8);
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-md);
  }
}

/* ── type ─────────────────────────────────────────────────────────────────
   The site's scale, not a per-page one. Line-height stays generous (1.75)
   because these are long documents read once, carefully — the forecast pages'
   tighter rhythm is for scanning. */
.legal-body { font-size: var(--fs-body); line-height: 1.75; }
.legal-card h1 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-label);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.legal-card h2 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-label);
  line-height: 1.3;
  color: var(--text);
}
.legal-card p, .legal-card ul { margin: 0 0 var(--sp-4); }
.legal-card ul { padding-left: 1.15rem; }
.legal-card li { margin-bottom: var(--sp-2); }
.legal-card strong { color: var(--text); font-weight: var(--fw-label); }

.legal-card .up {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ⚠ INLINE LINKS STAY UNDERLINED. This is a fix, not a preference, and it is
   the reason these pages entered the a11y suite: a link inside a paragraph
   distinguished from its surroundings by COLOUR ALONE fails WCAG 1.4.1 for
   anyone who cannot separate those hues. The axe run found four on privacy
   and one on terms. `.back` sits on its own line and keeps the clean
   treatment; nav links are chrome, not prose. */
.legal-card a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-card a.back { text-decoration: none; }
.legal-card a.back:hover { text-decoration: underline; }

.legal-card .back {
  display: inline-block;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.legal-card .ft {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── brandfield ───────────────────────────────────────────────────────────
   ⚠ WHETHER IT BELONGS HERE IS A DENSITY QUESTION, and the site already
   answered it once. js/forecast.js dropped the field from the forecast pages
   because "these are dense data surfaces, and contour lines running under
   four stacked charts compete with the very strokes the reader is trying to
   follow" — while keeping it behind "the home hero, the recommended-forecast
   section and the sparse overlay panels".

   These are the sparse case: one column of prose, no strokes of their own to
   compete with. It fades out well before the text begins, so the contours sit
   under the header and the ground beside the card, never behind a paragraph.

   Opacity follows the auth modal's reasoning rather than the hero's: a reading
   surface wants the field quieter than a marketing one. */
.legal-body { position: relative; }
.legal-body .brandfield {
  position: absolute;
  inset: 0 0 auto;
  height: min(520px, 60vh);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bf-top) 0%, var(--legal-ground) 88%);
}
.legal-body .brandfield__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
/* The nav and the card ride above the field. */
/* ⚠ THE NAV IS NOT IN THIS RULE, AND PUTTING IT HERE SHIPPED A BUG.
   The brandfield is z-index 0, so page CONTENT needs z-index 1 to sit
   above it — that is all this rule is for. The nav was included too, at
   one point, which OVERRODE its global `z-index: 60; sticky` down to 1;
   the nav then tied the content at 1 and, painting earlier in the DOM,
   lost to it — so the Forecast/Maps hover menus rendered BEHIND the page
   and could not be used. The nav keeps its own 60 from css/nav.css and
   is above both the field (0) and the content (1) with no help from here. */
.legal-card { position: relative; z-index: 1; }