/* core/_base.css */
/* Minimal reset and global base layout */
@import './fonts.css';

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

html, body {
  /* Allow body to grow beyond the viewport instead of fixing its height */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--body-bg);
  color: var(--main-text-color);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Ensure the page behind is frozen when modal is open */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

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

/* ── Text selection + keyboard focus (sia step-2.5 de-bruits) ───────────────
   Brand-teal text-selection highlight — background-only so it reads correctly on
   both the cream surface AND inverted/dark popups (where the text colour differs;
   forcing a colour here would break one of them). Plus a consistent teal
   keyboard-focus ring: :focus-visible never shows on mouse clicks, and :where()
   keeps it zero-specificity so component-scoped focus rules (admin toggle,
   contest buttons, …) still win — this is just the global fallback. */
::selection {
  background-color: rgba(var(--brand-accent-rgb), 0.28);
}

:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Tabular + slashed-zero numerals for data tables (sia step-2.5) — figures
   align in columns and zeros read clinically (rankings, the admin table). */
table {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Richtext fields are stored as <p> paragraphs (the RichtextNormalizer
   contract — §18.10). Render them flush to their container with even spacing
   BETWEEN paragraphs: a single-paragraph field sits tight, multi-paragraph
   content breathes. Deliberately low specificity (bare element selector) so
   any component- or class-scoped paragraph rule still wins. */
p {
  margin: 0;
}
p + p {
  margin-block-start: 0.75em;
}

/* Richtext font-size run classes (§18.10). Emitted on a <span> by the toolbar's
   A-/A+ buttons and preserved by both contract layers. em-relative so a sized
   run scales with whatever context renders it — the small editor, a content
   view, or the projection's clamp()-sized question container. */
.rt-size-sm {
  font-size: 0.82em;
}
.rt-size-lg {
  font-size: 1.35em;
}