/* ------------------------------------------------------------------
   Realisable brand foundation — shared by all three design directions.

   Palette and type lifted from the live WordPress theme
   (wp-content/themes/realisable/style.css):
     #31a2d9  primary sky blue   (36 uses — the dominant accent)
     #334659  dark navy          (headings, dark sections)
     #344759  logo navy
     #626262  body grey
     #b8b8b8  muted grey
     #f4f4f4  page background
     GT Walsheim  body   (19px/1.35 on the marketing site)
     DAX-bold     display headings
   ------------------------------------------------------------------ */

/* WOFF2 only. Generated from the licensed TrueType originals in fonts-src/ by
   tools/fonts2woff2.py — 632 KB of .ttf becomes 147 KB, and the .ttf never
   reaches the deploy payload. WOFF2 has been supported by every current
   browser since 2016, so no TrueType fallback is declared. */
@font-face {
  font-family: "GT Walsheim";
  src: url("fonts/GT-Walsheim-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  src: url("fonts/GT-Walsheim-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DAX";
  src: url("fonts/dax_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rs-blue: #31a2d9;
  --rs-blue-dark: #2589ba;
  --rs-navy: #334659;
  --rs-navy-deep: #26364a;
  --rs-logo-navy: #344759;
  --rs-grey: #626262;
  --rs-grey-mute: #b8b8b8;
  --rs-bg: #f4f4f4;
  --rs-rule: #e1e8f0;

  --rs-body-font: "GT Walsheim", "Segoe UI", Arial, sans-serif;
  --rs-display-font: "DAX", "GT Walsheim", Arial, sans-serif;

  /* Material plumbing */
  --md-text-font: "GT Walsheim", "Segoe UI", Arial, sans-serif;
  --md-code-font: "Cascadia Mono", "Consolas", "SF Mono", monospace;
  --md-primary-fg-color: var(--rs-navy);
  --md-accent-fg-color: var(--rs-blue);
  --md-typeset-a-color: var(--rs-blue);
}

/* Admonitions are styled entirely in editorial.css, not here.
 *
 * They used to be remapped in both files. Material colours each type with a
 * .md-typeset .admonition.note rule (0,3,0), so the remap here had to be
 * per-type to outrank it — but that also outranked editorial.css's own generic
 * .md-typeset .admonition-title (0,2,0), and note/example titles came out
 * wearing a pale blue band it never asked for. Two files competing over one
 * component, with Material as a third bidder.
 *
 * One block now owns it: editorial.css, per-type, at a specificity that beats
 * Material. See the comment there for what each type maps to.
 */

/* Screenshots are UI captures at natural size — never upscale them, and keep
   them visually distinct from the page. */
.md-typeset img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rs-rule);
  border-radius: 2px;
}

/* Chevron bullets, as the Flare stylesheet had them: li.Options carried a
   multi-chevron glyph and li.Options2ndLevel a single one. Rendered as
   characters rather than the original PNGs so they scale and take colour.
   Written as unicode escapes, not literal characters: a stylesheet served
   without charset=utf-8 (as python's http.server does) would otherwise
   render them as mojibake.

   Set through list-style-type, NOT `::marker { content }`. Safari implements
   ::marker for `color` and `font-size` only (MDN browser-compat-data, and it
   is why MDN marks the whole pseudo-element "limited availability"), so the
   content declaration was a no-op there — every Safari and, because all iOS
   browsers are WebKit, every iPhone and iPad fell back to plain discs. A
   string list-style-type has been supported since Safari 14.1 / Chrome 79 /
   Firefox 39 and keeps the marker a real marker, so list semantics survive
   for screen readers in a way `list-style: none` plus a ::before would not.

   The trailing \00A0 is the gap to the text; a plain space would collapse. */
.md-typeset ul {
  list-style-type: "\00BB\00A0";      /* » */
}
.md-typeset ul ul {
  list-style-type: "\203A\00A0";      /* › */
}

/* Colour survives everywhere; the weight is Chromium/Gecko only, since Safari
   allows just color and font-size on ::marker. Degrades to an unbolded navy
   chevron rather than to nothing. */
.md-typeset ul > li::marker {
  color: var(--rs-navy);
  font-weight: 700;
}

/* Code: long function signatures such as
     Lookup("MULTILKUP", "RESULT", Array(%Fld1, %Fld2, %Fld3), true)
   overflowed the measure and produced a horizontal scrollbar on almost
   every reference page. Wrapping is far easier to read than scrolling,
   and the smaller size fits more of a signature per line. */
.md-typeset pre > code {
  font-size: 0.68rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Nothing in the prose may widen the page. The corpus contains unbroken runs
   that no measure can hold — the worst is a 246-character concatenation of
   Amazon marketplace IDs on amazon/setup/iman-setup.md, and there are ~200
   bare URLs printed as link text. Without this the page itself scrolls
   sideways at 375px, which moves every heading and image off-screen too.

   break-word, not break-all: it only breaks a word that would otherwise
   overflow, so ordinary prose still wraps between words. */
.md-typeset {
  overflow-wrap: break-word;
}

.md-typeset table:not([class]) {
  font-size: 0.74rem;
  border: 1px solid var(--rs-rule);
}
.md-typeset table:not([class]) th {
  background: var(--rs-navy);
  color: #fff;
  font-weight: 700;
}