/* Typefaces, self-hosted (the portal never calls an outside host). All are licensed under the SIL Open Font
   Licence. A theme picks one with --font-sans / --font-display; a browser only downloads the faces a page uses. */
@font-face { font-family: "Google Sans Flex"; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url("fonts/google-sans-flex-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans Flex"; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url("fonts/google-sans-flex-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url("fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ERSubmit design tokens — THE CONTRACT BETWEEN THEMES AND COMPONENTS.
 *
 * Components (style.css) never use a raw colour, radius or font: they use only the custom properties listed
 * here. A theme is one small CSS file in themes/ that gives every token a value, once for light and once for
 * dark. Adding a look and feel therefore means adding a file, not touching a component.
 * See docs/10-software/Theming.md.
 *
 * Colour roles follow Material Design 3:
 *   primary / on-primary / primary-container / on-primary-container     the main action colour
 *   secondary-container / on-secondary-container                         selected navigation, tonal buttons
 *   tertiary / tertiary-container (+ on-…)                               the accent; marks the signed paper form
 *   error, success, warning (+ container, on-container)                  states: always paired with an icon and a word
 *   surface, surface-lowest … surface-highest                            page and layered containers (tone, not shadow)
 *   on-surface, on-surface-variant, outline, outline-variant             text and lines
 *   inverse-surface / inverse-on-surface                                 snackbars
 *   hero-tint, hero-filter                                               the two-colour treatment of the sign-in picture
 * Shape:    --r-xs … --r-xl, --r-full          Type: --font-sans, --font-display, --weight-display, --tracking-display
 * Density:  --control-h, --row-pad, --font-size   Elevation: --shadow-1, --shadow-2
 */
:root {
  /* Values every theme shares unless it overrides them. */
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-size: 16px;
  --control-h: 40px;
  --row-pad: 12px;
  --weight-title: 500;
  --weight-strong: 600;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --ease: cubic-bezier(.2, 0, 0, 1);          /* Material "standard" easing */
  --t-fast: 120ms; --t-med: 240ms;
  --rail-w: 96px;
  --bar-h: 64px;
  /* Type scale (Material 3 names). */
  --type-display: 500 clamp(2.5rem, 2rem + 2.4vw, 3.75rem)/1.08 var(--font-display);
  --type-headline: 500 clamp(1.75rem, 1.5rem + 1vw, 2.25rem)/1.2 var(--font-display);
  --type-title: var(--weight-title) 1.25rem/1.35 var(--font-display);
  --type-subtitle: var(--weight-title) 1rem/1.4 var(--font-sans);
  --type-body: 400 1rem/1.5 var(--font-sans);
  --type-label: 500 .875rem/1.3 var(--font-sans);
  --type-small: 400 .8125rem/1.4 var(--font-sans);
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; } }

:root {
  --font-sans: "Google Sans Flex", "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --weight-display: 500; --tracking-display: -0.02em;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 3px rgb(0 0 0 / .04);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .10), 0 12px 32px rgb(0 0 0 / .10);

  --c-primary: #0B57D0; --c-on-primary: #FFFFFF; --c-primary-container: #D3E3FD; --c-on-primary-container: #041E49;
  --c-secondary-container: #DCE6F9; --c-on-secondary-container: #0E1D33;
  --c-tertiary: #9A3F5C; --c-on-tertiary: #FFFFFF; --c-tertiary-container: #FCDBD6; --c-on-tertiary-container: #3B0A14;
  --c-error: #B3261E; --c-on-error: #FFFFFF; --c-error-container: #F9DEDC; --c-on-error-container: #410E0B;
  --c-success: #146C2E; --c-success-container: #C4EED0; --c-on-success-container: #072711;
  --c-warning: #8A5300; --c-warning-container: #FFE0A6; --c-on-warning-container: #2B1700;
  --c-surface: #F5F5F7; --c-surface-lowest: #FFFFFF; --c-surface-low: #FAFAFC; --c-surface-container: #EEEEF1;
  --c-surface-high: #E8E8ED; --c-surface-highest: #E1E1E6;
  --c-on-surface: #1D1D1F; --c-on-surface-variant: #5F6368; --c-outline: #80868B; --c-outline-variant: #D2D2D7;
  --c-inverse-surface: #1D1D1F; --c-inverse-on-surface: #F5F5F7; --c-scrim: rgb(0 0 0 / .45);
  --hero-tint: #FCDBD6; --hero-filter: contrast(1.2);
  color-scheme: light;
 --shape: #000; --on-shape: var(--hero-tint); }
@media (prefers-color-scheme: dark) { :root {
  --shadow-1: none; --shadow-2: 0 8px 32px rgb(0 0 0 / .6);
  --c-primary: #A8C7FA; --c-on-primary: #062E6F; --c-primary-container: #0842A0; --c-on-primary-container: #D3E3FD;
  --c-secondary-container: #283A55; --c-on-secondary-container: #D7E3F8;
  --c-tertiary: #FCDBD6; --c-on-tertiary: #3B0A14; --c-tertiary-container: #5A2A33; --c-on-tertiary-container: #FCDBD6;
  --c-error: #F2B8B5; --c-on-error: #601410; --c-error-container: #8C1D18; --c-on-error-container: #F9DEDC;
  --c-success: #7FDA9A; --c-success-container: #0F5223; --c-on-success-container: #C4EED0;
  --c-warning: #FFC55C; --c-warning-container: #5C3A00; --c-on-warning-container: #FFE0A6;
  --c-surface: #0E0E10; --c-surface-lowest: #1A1A1E; --c-surface-low: #151518; --c-surface-container: #202024;
  --c-surface-high: #2A2A2F; --c-surface-highest: #35353A;
  --c-on-surface: #E6E6EA; --c-on-surface-variant: #A9A9B2; --c-outline: #8E8E96; --c-outline-variant: #3A3A41;
  --c-inverse-surface: #E6E6EA; --c-inverse-on-surface: #1D1D1F; --c-scrim: rgb(0 0 0 / .65);
  --hero-tint: #FCDBD6; --hero-filter: invert(1) contrast(1.2);
  color-scheme: dark;
 --shape: var(--hero-tint); --on-shape: #000; } }
/* ERSubmit public results site — components. Static pages, no scripts. Colours, shapes and fonts come from the same
   design tokens and theme files as the staff portal (web/src/theme); the generator writes the chosen theme into this
   stylesheet, light values by default and dark values for readers whose device asks for dark. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--type-body); color: var(--c-on-surface); background: var(--c-surface); -webkit-font-smoothing: antialiased; }
a { color: var(--c-primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
code { font-family: var(--font-mono); font-size: .875em; overflow-wrap: anywhere; }
.muted { color: var(--c-on-surface-variant); font: var(--type-small); }

/* The masthead: the picture in two colours, the election's name printed on the ballot box. In the picture the box
   spans 16% to 83.5% of the width and the lower 39% of the height, so the copy keeps inside 18.5% on each side and
   lines up with the page column where the window is wide enough. The copy also carries the box colour itself: a long
   name that grows taller than the box stays readable instead of running onto the background. */
.masthead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(18rem, 30vw, 30rem); background: var(--hero-tint); }
.masthead img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; mix-blend-mode: multiply; filter: var(--hero-filter); }
.masthead-copy { --inset: max(18.5%, calc((100% - 64rem) / 2 + var(--space-5))); flex: 1; min-width: 0; margin: 0 calc(var(--inset) - var(--space-4)); padding: var(--space-4) var(--space-4) var(--space-5);
  color: var(--on-shape); background: var(--shape); border-radius: var(--r-md) var(--r-md) 0 0; }
.masthead-copy h1 { font: var(--type-display); font-size: clamp(2rem, 4.2vw, 3.75rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); max-width: 22ch; text-wrap: balance; overflow-wrap: anywhere; }
.masthead-copy .org { font: var(--type-subtitle); margin-bottom: var(--space-2); }
.masthead-copy .updated { display: inline-block; margin-top: var(--space-4); padding: 6px 14px; border-radius: var(--r-full); border: 1px solid currentColor; font: var(--type-label); }
main, footer { max-width: 64rem; margin: 0 auto; padding: var(--space-5); }
main > * + * { margin-top: var(--space-4); }
h2 { font: var(--type-headline); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); padding-top: var(--space-4); }
h3 { font: var(--type-title); }

.card { background: var(--c-surface-lowest); border-radius: var(--r-xl); padding: var(--space-5); box-shadow: var(--shadow-1); }
.card > * + * { margin-top: var(--space-3); }
.card.certified { background: var(--c-success-container); color: var(--c-on-success-container); box-shadow: none; }
.card.provisional { box-shadow: none; border: 1px dashed var(--c-outline); }
.card.notice { background: var(--c-warning-container); color: var(--c-on-warning-container); box-shadow: none; }
.card.certified .muted, .card.notice .muted, .card.certified a, .card.notice a { color: inherit; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--r-sm); font: var(--type-small); font-weight: 500; white-space: nowrap; }
.tag.c { background: var(--c-success); color: var(--c-surface-lowest); }
.tag.p { background: var(--c-warning-container); color: var(--c-on-warning-container); }
.tag.r { background: var(--c-error-container); color: var(--c-on-error-container); }
.tag.n { background: var(--c-surface-high); color: var(--c-on-surface-variant); }

.scroll { overflow-x: auto; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: var(--row-pad) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-outline-variant); }
th { font: var(--type-label); color: var(--c-on-surface-variant); white-space: nowrap; }
.card.certified th { color: inherit; }
.card.certified th, .card.certified td { border-color: color-mix(in srgb, currentColor 20%, transparent); }
td.num, th.num { text-align: right; white-space: nowrap; }
.bar { height: 12px; min-width: 2px; border-radius: var(--r-full); background: var(--c-primary); }
.card.certified .bar { background: var(--c-success); }
ul.plain { list-style: none; margin: 0; padding: 0; background: var(--c-surface-lowest); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
ul.plain li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-outline-variant); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain a { font-weight: 500; text-decoration: none; }
ul.plain a:hover { text-decoration: underline; }
ol { padding-left: 1.4rem; } ol li + li { margin-top: var(--space-2); }
footer { margin-top: var(--space-6); border-top: 1px solid var(--c-outline-variant); }
footer p + p { margin-top: var(--space-2); }
/* Narrow windows: the picture becomes a strip and the name sits on a plain block of the box colour beneath it. */
@media (max-width: 900px) {
  .masthead { display: block; min-height: 0; background: var(--shape); }
  .masthead img { position: static; display: block; height: 9rem; background: var(--hero-tint); mix-blend-mode: normal; filter: none; object-position: 50% 30%; }
  .masthead-copy { margin: 0; padding: var(--space-5); border-radius: 0; }
}
@media (max-width: 700px) {
  .masthead-copy { padding: var(--space-5) var(--space-4); }
  main, footer { padding: var(--space-4); }
  .card { padding: var(--space-4); border-radius: var(--r-lg); }
}
@media print { .masthead img { display: none; } .masthead { min-height: 0; background: none; } .masthead-copy { color: #000; background: none; margin: 0; padding: 0; } }