/* EVIDENCE-PACK REPORT — the data block on /rent-in-<la>.
 *
 * Same shape and reasoning as yield-index.css and citable-data.css: a self-contained visual
 * region scoped under ONE root class, so it neither leaks onto the rest of the site nor gets
 * overridden by the site's global h1/h2/p/table rules.
 *
 * The rules below are the pack's OWN stylesheet (evidence_pack._CSS, previously inlined into
 * each standalone /evidence-packs/<la> page), hoisted here and re-scoped from `body`/`h1,h2,h3`
 * to `.ep-root`. Keeping the pack's own visual language is deliberate rather than lazy: the
 * 24-month trend SVG is published with its axis labels painted in primaryNavy (#0a0f1e) for a
 * lightGrey ground, so a light plate is what keeps that chart legible without recolouring bytes
 * JARVIS rendered. The block therefore reads as a report inset into the dark city page — the
 * same light-root-inside-base.html move the yield index and /data already make.
 *
 * Colours are the eight tokens only (see tokens.css); the literals below are those tokens'
 * values, carried over verbatim from the pack renderer so the plate matches the PDF and the
 * social cards exactly. */

.ep-root {
  background: var(--c-light-grey);
  color: var(--c-primary-navy);
  font-family: 'Jost', Arial, Helvetica, sans-serif;
  line-height: 1.5;
  padding: 4rem 0 4.5rem;
  /* --link (2026-08-10) — the site's global `a{color:var(--link)}` floor (styles.css) is white,
     right for the dark site around this block and wrong for this cream plate (1.09:1). Re-
     declaring the variable here, not the anchor colour, is what the floor pattern is FOR: the
     floor rule still resolves the colour, it just inherits a different value inside this root. */
  --link: var(--c-primary-navy);
}
.ep-root * { box-sizing: border-box; }
.ep-root .ep-page { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.ep-root h2, .ep-root h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--c-primary-navy);
  margin: 0 0 12px;
}
.ep-root h2 { font-size: 22px; margin-top: 8px; }
.ep-root h3 { font-size: 16px; }
.ep-root p, .ep-root li {
  font-family: 'Jost', Arial, Helvetica, sans-serif;
  color: var(--c-primary-navy);
  font-weight: 400;
}

/* The section eyebrow — the one tracked gold label this block gets (Ruling: gold is a hairline
   or ONE accent, never a fill). */
.ep-root .ep-kicker {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--c-luxury-gold); margin: 0 0 1.2rem;
}

.ep-root .ep-section {
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--c-luxury-gold-rgb), 0.35);
}
.ep-root .ep-section:last-child { border-bottom: none; margin-bottom: 0; }

.ep-root .ep-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ep-root .ep-table th {
  text-align: left; font-weight: 600; color: var(--c-deep-slate);
  border-bottom: 2px solid var(--c-luxury-gold); padding: 6px 8px;
}
.ep-root .ep-table td {
  padding: 6px 8px; border-bottom: 1px solid rgba(var(--c-graph-grey-rgb), 0.3);
  font-variant-numeric: tabular-nums;
}
/* Tables and the chart scroll INSIDE their own box rather than widening the page — the site body
   must never scroll horizontally on a phone. */
.ep-root .ep-scroll { overflow-x: auto; }
.ep-root .ep-chart { max-width: 640px; }

.ep-root .ep-nodata { color: var(--c-graph-grey); font-style: italic; }

/* Table captions: read by screen readers and by anything parsing the table's meaning, not shown.
   Scoped and prefixed rather than named `.visually-hidden`, because the site has no such global
   utility and this stylesheet is not the place to mint one. */
.ep-root .ep-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ep-root .ep-note { font-size: 14px; color: var(--c-deep-slate); margin: 12px 0 0; }
.ep-root .ep-lede { font-size: 16px; margin: 0 0 14px; }

.ep-root .ep-rail-list { font-size: 13px; color: var(--c-deep-slate); padding-left: 18px; }
.ep-root .ep-rail-list li { font-size: 13px; color: var(--c-deep-slate); margin-bottom: 4px; }

/* Licence + disclaimer plate. Dark on the light ground: this is the one thing on the page a
   reader must not skim past, and it is the same navy plate the pack itself used. */
.ep-root .ep-disclaimer {
  background: var(--c-secondary-navy); color: var(--c-light-grey);
  padding: 16px 20px; border-radius: 4px; border-bottom: none;
  --link: var(--c-soft-gold);   /* the one dark inset inside this light plate */
}
.ep-root .ep-disclaimer p { margin: 0; font-size: 14px; color: var(--c-light-grey); }
.ep-root .ep-disclaimer p + p { margin-top: 8px; }

@media (max-width: 680px) {
  .ep-root { padding: 3rem 0 3.5rem; }
  .ep-root .ep-table { font-size: 14px; }
}