/* Design tokens: palettes, type, measures, and the 61 motif.
 *
 * Shared by the back office and the public site. Nothing here styles a
 * component; it only names the values the components are drawn from, so a
 * second surface can adopt the whole system by loading this file first.
 */

:root {
  color-scheme: light;

  --ground: #eef1f3;
  --surface: #ffffff;
  --surface-sunken: #e3e9ec;
  --ink: #16202b;
  --muted: #4a5764;
  --rule: #c7d1d9;
  --bloc-a: #0b6e6e;
  --bloc-b: #96600a;
  --bloc-c: #6b3fa0;
  --unaffiliated: #5f6b78;
  /* The card a list's emblem sits on. A party mark is drawn for the party's
     own background, so some are dark ink and some are knocked out in white;
     neither survives being dropped straight onto a page that has two
     palettes. The card is the fix, and it is not a compromise -- an Israeli
     ballot is a slip of white paper carrying the list's mark, and that is the
     object being drawn. It stays white in both themes for the reason paper
     does: the mark ships unaltered, which is the condition on using it at
     all, so the ground has to be the one it was drawn for. */
  --emblem-card: #ffffff;
  --emblem-edge: #d3dce2;
  --alert: #a3231b;
  --majority: #16202b;
  /* Party steps move away from the page: darker on light, lighter on dark. */
  --shade-toward: #000000;

  /* Three families, three jobs, and the split is the point: the argument is
     set in a serif, the apparatus in a grotesque, the data in mono.
     Newsreader carries the sentences a reader has to weigh -- the verdict, the
     headings, the caveats -- and has a real optical-size axis, so display and
     body sizes are drawn for their size rather than scaled. Archivo carries
     the figures and the chrome; its width axis lets a seat count be set the
     way broadcast election graphics and printed results tables have always set
     them. Plex Mono keeps the tables aligned. */
  --prose: Newsreader, Georgia, serif;
  --display: Archivo, "Helvetica Neue", sans-serif;
  --body: Archivo, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  /* The mono role splits in two, and only Hebrew can tell them apart.
     `--mono` is for figures that have to line up with the figures above
     them; `--mono-label` is for everything else the role covers -- metas,
     credits, axis marks, legends, the skip link. In Latin the two resolve to
     the same stack and the distinction costs nothing. In Hebrew it is the
     whole fix: see the note beside `--mono-label` in the Hebrew block.

     Which one a rule wants is not a matter of taste. A rule that declares
     `font-variant-numeric: tabular-nums` is a rule that has said, in the
     project's own vocabulary, that its glyphs align in a column -- it takes
     `--mono`. A rule that does not, takes `--mono-label`.
     `tests/test_mono_label_role.py` holds the two together, and knows about
     the one other reason to keep `--mono`: `.band-label` and
     `.threshold-axis` have their widths modelled in `typography.py`, which
     charges Plex Mono's advance for the space. Both say so where they are
     declared. */
  --mono-label: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  /* The wordmark only. Latin-only by design: the name is pinned LTR and
     is never set in Hebrew, so this face needs no Hebrew coverage. */
  --wordmark: "Space Grotesk", "Archivo", system-ui, sans-serif;

  /* The 61 rule, drawn the same way in every chart. */
  --majority-dash: 5 4;
  --majority-width: 1.5px;

  --page: 1420px;
  --rail: 19rem;
  --measure: 62ch;
  /* The column an article is set in. `.article.wide` lets its *plates* --
     charts, tables, the small multiples -- off it and out to `--page`, so
     anything in a wide article that is not a plate has to name this measure
     to stay in the column the prose is in. */
  --column: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground: #101619;
    --surface: #182126;
    --surface-sunken: #131b1f;
    --ink: #e8eef1;
    --muted: #a2b3be;
    --rule: #2a3940;
    --bloc-a: #3aada7;
    --bloc-b: #d69a3c;
    --bloc-c: #a988e0;
    --unaffiliated: #8697a6;
    --emblem-card: #f3f5f6;
    --emblem-edge: #f3f5f6;
    --alert: #e8776d;
    --majority: #e8eef1;
    --shade-toward: #ffffff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #101619;
  --surface: #182126;
  --surface-sunken: #131b1f;
  --ink: #e8eef1;
  --muted: #a2b3be;
  --rule: #2a3940;
  --bloc-a: #3aada7;
  --bloc-b: #d69a3c;
  --bloc-c: #a988e0;
  --unaffiliated: #8697a6;
  --emblem-card: #f3f5f6;
  --emblem-edge: #f3f5f6;
  --alert: #e8776d;
  --majority: #e8eef1;
  --shade-toward: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-variation-settings: "wdth" 100;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }


/* ---- Hebrew ------------------------------------------------------------ */

/* Two families, chosen to sit together rather than merely to exist.
 *
 * Frank Ruhl Libre is the Hebrew publication serif -- Frank-Rühl has set
 * Hebrew newspapers since 1908 -- so it takes the prose role Newsreader has in
 * Latin. Assistant takes the chrome and the figures: it is the sans most
 * Israeli publishing and interface work is set in, and unlike the alternatives
 * it carries the full weight range this design uses.
 *
 * The stacks are ordered so the *fallback chain does the translating*. Latin
 * faces come first and have no Hebrew glyphs, so Latin numerals still render
 * in Archivo and Plex Mono while every Hebrew character falls through to the
 * Hebrew face. That is what fixes the third font nobody chose: `--mono` had no
 * Hebrew at all, so a Hebrew figure label was being set by whatever the
 * operating system happened to offer.
 */
[lang="he"] {
  --prose: "Frank Ruhl Libre", Georgia, serif;
  --display: Archivo, Assistant, "Helvetica Neue", sans-serif;
  --body: Assistant, system-ui, sans-serif;
  --mono: "IBM Plex Mono", Assistant, ui-monospace, monospace;
  /* Fallback is resolved per character, and Plex Mono has no Hebrew -- but it
     does carry U+0020. So in a Hebrew string set in the mono role the letters
     come from Assistant and the space does not: 7.49px against Assistant's
     3.47px at 12.48px, more than double, and in a two-word label that one
     character is the whole of the visible gap. Surveyed across the site it
     was 52 elements holding 156 such spaces.

     Naming Assistant first is what fixes it, and it can only be done where
     alignment does not matter -- swapping the stack wholesale would take Plex
     Mono's tabular digits out of the tables it is in the stack *for*, and the
     seat columns would stop lining up. That is the split `--mono-label`
     exists to carry, decided at each rule by whether it declares
     `font-variant-numeric: tabular-nums`.

     Assistant's own fallbacks rather than the mono ones: nothing here is
     lining up, so a monospaced last resort would only make a Hebrew label
     look like a terminal. */
  --mono-label: Assistant, system-ui, sans-serif;
}

/* Hebrew reads smaller than Latin at the same nominal size: the letterforms
   are uniform in height, with no ascenders or descenders to give a word its
   silhouette, so the eye has less to work with. It wants a step up and more
   leading, not the step down this file used to apply. */
[lang="he"] body { font-size: 17px; line-height: 1.7; }
[lang="he"] .prose { font-size: 1.16rem; line-height: 1.85; }
[lang="he"] .plate .rail p { font-size: 1rem; line-height: 1.7; }
[lang="he"] .card .dek,
[lang="he"] .article-head .dek { line-height: 1.6; }

/* The mono role is a Latin convention -- tabular figures and small caps. In
   Hebrew there are no capitals to letter-space and no monospaced tradition, so
   Hebrew set in that role drops the tracking and the uppercasing rather than
   faking them. */
[lang="he"] .band-label { font-size: 14px; }
[lang="he"] .majority-label { font-size: 13px; letter-spacing: 0; text-transform: none; }

[lang="he"] th,
[lang="he"] .sens-table caption,
[lang="he"] .eyebrow,
[lang="he"] .kicker,
[lang="he"] .figures span,
[lang="he"] .coal-stats span,
[lang="he"] .section-head h2,
[lang="he"] .plate .rail h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* A bare figure, a range of digits, a run id: Latin-ordered tokens in any
   language, so they keep their direction on a Hebrew page. This is for a
   token and not for a sentence -- ".num-prose" carries the cells whose
   content is a number inside Hebrew words, and pinning one of those put the
   word after both numbers, so "66 out of 100" read as "out of 100 66". */
[dir="rtl"] .num,
[dir="rtl"] .mono-ltr { direction: ltr; unicode-bidi: isolate; }