/* static/css/base.css
   Foundation layer — reset, base element defaults, and the app-shell layout
   primitives. Loaded immediately AFTER tokens.css (which it assumes) and BEFORE
   the component + page files, on every document in the app: base.html children,
   the public survey base, and each standalone template (login, intro,
   simplemaps, report_layer, metrics iframe mode).
   Token-only: references semantic tokens or brand primitives, never a raw
   legacy primitive or hard-coded brand value (guard: no-legacy-primitives). */

/* ---- reset ---- */
html { background: transparent; }
.bg-transparent { background: transparent !important; }

/* ---- base element: body ---- */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  font-weight: 300;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- app shell (issue #200): pages extending base.html get a fixed,
        non-scrolling viewport so the topbar stays put and .scrollable-content
        is the only scroller. Scoped to body.th-shell so standalone pages
        without a .scrollable-content wrapper keep normal document scrolling. */
body.th-shell {
  height: 100vh;
  overflow: hidden;
}
.scrollable-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 2rem;
}

/* ---- base element: links, emphasis, selection ---- */
a { text-decoration: none; color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
b, strong { font-weight: 400; }
::selection {
  color: var(--color-selection-text);
  background-color: var(--color-selection-bg);
}

/* ---- base element: horizontal rule ----
   Rehomed from the retired `styles.css` monolith at Phase-D slice 4c. It is a
   real element default, not a page rule: the only `<hr>` markup in the whole
   app is one classed rule in analytics.html, and the live consumer is
   MARKDOWN — `data/md/TermConditions.md` renders 15 `<hr>` on /terms via
   `app.content.routes._get_terms_html`, so no template grep finds them.
   The legacy border colour was `--lightcolor` (#fef5ed cream), effectively
   invisible against the cream canvas and the white utility card; `--color-border`
   makes those 15 section breaks actually read. `margin: 40px 0` → `--space-l`
   (32→40px fluid), which lands on the old value at desktop widths.
   `pages/analytics.css`'s `.an-category__rule` (0,1,0) still overrides this. */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-l) 0;
}