/* Element defaults and the page frame. Role tokens only.
 *
 * Nothing here names a colour, a typeface or a pixel that is not a token:
 * `var(--color-text)` is allowed, `var(--noon-ink)` is not, and `#1A2438` is not.
 * That is the rule that makes a rebrand a one-file diff, and it is enforced by
 * tests/test_dev_4_tokens.py rather than trusted -- see tokens.css's header.
 *
 * Two things this file deliberately does not do:
 *
 * **No CSS reset library, and no `!important`.** The portal has no framework
 * stylesheet to fight, so the ~40 `!important` declarations that upstream's
 * `lib/branding.py` needs to override Streamlit would only make these tokens
 * unoverridable -- the opposite of the point. If a rule here needs `!important`,
 * something else is wrong.
 *
 * **No `@import`.** The CSP is `style-src 'self'` (S9.4), so an import would be
 * allowed only from this origin anyway, and separate <link> elements load in
 * parallel instead of in a chain.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Percentage rather than a fixed size, so the browser's own text-size setting
     still means something. An investor reading a 40-page memo may well have
     changed it. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);          /* sand. NEVER white -- the brand says so twice */
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-normal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- headings ------------------------------------------------------------- */
/* Hierarchy comes from weight and size, never from mixing typefaces (SKILL.md).
   There is one typeface in this project and no rule below sets `font-family`. */

h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--font-size-page-title); }
h2 { font-size: var(--font-size-h1); margin-top: var(--space-6); }
h3 { font-size: var(--font-size-h2); margin-top: var(--space-5); }
h4 { font-size: var(--font-size-h3); margin-top: var(--space-5); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: var(--weight-medium); }

small { font-size: var(--font-size-small); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }

/* --- links ---------------------------------------------------------------- */

a {
  color: var(--color-heading);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-strong); }

/* --- focus ---------------------------------------------------------------- */
/* One visible ring for everything focusable, and it is never removed. Keyboard
   navigation is not a nicety in a portal whose primary content is documents. */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* --- the page frame ------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--layout-content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  flex: 1 0 auto;
}

/* The Comparison Tool only (ADR-002/dev_11). Streamlit runs `layout="wide"` and
   1080px squeezes six panels, a Sankey and full-width legends into a column meant
   for prose. The prose ABOVE the tool keeps its measure -- `.prose` caps itself,
   so widening the frame does not widen the paragraph explaining it. */
.page--wide {
  max-width: var(--layout-wide-max);
}

/* A reading measure. This portal is read rather than scanned, and a 1080px-wide
   paragraph is unreadable however well branded it is. */
.prose { max-width: var(--layout-measure); }

.stack > * + * { margin-top: var(--space-4); }

/* Visible to a screen reader, not to the eye. Used for the skip link and for
   labels that would otherwise be duplicated visually. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- tables --------------------------------------------------------------- */
/* Navy header row with white bold text; alternating white / sand-dark rows;
   numbers right-aligned; 1pt slate borders, never solid black (SKILL.md). */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-table);
  line-height: var(--line-height-table);
  background: var(--color-surface);
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-strong);
}

thead th {
  background: var(--color-heading);
  color: var(--color-panel-text);
  font-weight: var(--weight-bold);
}

tbody tr:nth-child(even) { background: var(--color-surface-sunken); }

td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* --- images --------------------------------------------------------------- */

img { max-width: 100%; height: auto; }