/*!
 * eoncore.css — Eoncore huisstijl, v0.1
 *
 * Classless: plain HTML gets the house style. A few short classes pick
 * a variant: <button class="secondary">, <span class="tag safe">.
 *
 * Fonts are self-hosted from ./fonts (SIL OFL): Bitter, Source Sans 3,
 * IBM Plex Mono. No external requests.
 *
 * Themes: dark is the default. Light follows the OS preference, and
 * data-theme="dark" | "light" on <html> overrides both.
 */

/* ------------------------------------------------------------------ */
/* Fonts                                                               */
/* ------------------------------------------------------------------ */

@font-face { font-family: "Bitter"; src: url("fonts/Bitter-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("fonts/Bitter-wght-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-wght-Italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ */
/* Tokens — generated from tokens.json (`make`). Do not edit the block. */
/* ------------------------------------------------------------------ */

/* @generated tokens:start — generated from tokens.json by `make`. Edit tokens.json, not this block. */
:root {
  /* primitive.color */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --yellow-500: #e9b842;
  --yellow-600: #d6a436;
  --yellow-700: #bf8f28;
  --yellow-800: #7a5a0e;
  --green-300: #7cc46e;
  --green-500: #438839;
  --green-600: #3a7631;
  --green-700: #2f6b28;
  --red-300: #ff8c86;
  --red-600: #b4232a;
  --red-700: #9b2226;
  --white: #ffffff;
  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  /* radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  /* font.family */
  --font-serif: "Bitter", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  /* typography.serif */
  --text-display: 3.5rem; --leading-display: 1.107; --tracking-display: -0.027em; --weight-display: 600; /* 56/62 */
  --text-h1: 2.5rem; --leading-h1: 1.15; --tracking-h1: -0.025em; --weight-h1: 600; /* 40/46 */
  --text-h2: 1.75rem; --leading-h2: 1.214; --tracking-h2: -0.018em; --weight-h2: 600; /* 28/34 */
  --text-h3: 1.3125rem; --leading-h3: 1.333; --tracking-h3: 0; --weight-h3: 600; /* 21/28 */
  --text-body: 1.125rem; --leading-body: 1.611; --tracking-body: 0; --weight-body: 400; /* 18/29 */
  --text-body-small: 0.9375rem; --leading-body-small: 1.6; --tracking-body-small: 0; --weight-body-small: 400; /* 15/24 */
  /* typography.sans */
  --text-ui: 0.9375rem; --leading-ui: 1.467; --tracking-ui: 0; --weight-ui: 400; /* 15/22 */
  --text-ui-strong: 0.9375rem; --leading-ui-strong: 1.467; --tracking-ui-strong: 0; --weight-ui-strong: 600; /* 15/22 */
  --text-ui-small: 0.8125rem; --leading-ui-small: 1.385; --tracking-ui-small: 0; --weight-ui-small: 400; /* 13/18 */
  --text-label: 0.75rem; --leading-label: 1.333; --tracking-label: 0.08em; --weight-label: 600; /* 12/16 */
  /* typography.mono */
  --text-code: 0.875rem; --leading-code: 1.571; --tracking-code: 0; --weight-code: 400; /* 14/22 */
  --text-code-small: 0.75rem; --leading-code-small: 1.5; --tracking-code-small: 0; --weight-code-small: 400; /* 12/18 */
}

/* theme: dark (default) */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: var(--slate-800);
  --color-bg-raised: var(--slate-700);
  --color-bg-sunken: var(--slate-900);
  --color-text-primary: var(--slate-100);
  --color-text-secondary: var(--slate-400);
  --color-text-link: var(--yellow-500);
  --color-border-subtle: var(--slate-700);
  --color-border-strong: var(--slate-500);
  --color-accent-secondary: var(--yellow-500);
  --color-accent-secondary-hover: var(--yellow-600);
  --color-accent-secondary-pressed: var(--yellow-700);
  --color-accent-secondary-edge: var(--yellow-700);
  --color-accent-on-secondary: var(--slate-800);
  --color-accent-secondary-text: var(--yellow-500);
  --color-accent-tertiary: var(--green-500);
  --color-accent-tertiary-strong: var(--green-600);
  --color-accent-on-tertiary: var(--white);
  --color-accent-tertiary-text: var(--green-300);
  --color-focus: var(--yellow-500);
  --color-status-critical-text: var(--red-300);
  --color-status-critical-strong: var(--red-700);
  --color-status-warning-text: var(--yellow-500);
  --color-status-safe-text: var(--green-300);
  --color-tag-neutral: var(--slate-300);
}

/* theme: light — by OS preference unless dark is forced */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg-page: var(--slate-50);
    --color-bg-raised: var(--white);
    --color-bg-sunken: var(--slate-100);
    --color-text-primary: var(--slate-900);
    --color-text-secondary: var(--slate-600);
    --color-text-link: var(--slate-800);
    --color-border-subtle: var(--slate-200);
    --color-border-strong: var(--slate-500);
    --color-accent-secondary: var(--yellow-500);
    --color-accent-secondary-hover: var(--yellow-600);
    --color-accent-secondary-pressed: var(--yellow-700);
    --color-accent-secondary-edge: var(--yellow-700);
    --color-accent-on-secondary: var(--slate-800);
    --color-accent-secondary-text: var(--yellow-800);
    --color-accent-tertiary: var(--green-500);
    --color-accent-tertiary-strong: var(--green-600);
    --color-accent-on-tertiary: var(--white);
    --color-accent-tertiary-text: var(--green-700);
    --color-focus: var(--slate-800);
    --color-status-critical-text: var(--red-700);
    --color-status-critical-strong: var(--red-700);
    --color-status-warning-text: var(--yellow-800);
    --color-status-safe-text: var(--green-700);
    --color-tag-neutral: var(--slate-600);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --color-bg-page: var(--slate-50);
  --color-bg-raised: var(--white);
  --color-bg-sunken: var(--slate-100);
  --color-text-primary: var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-text-link: var(--slate-800);
  --color-border-subtle: var(--slate-200);
  --color-border-strong: var(--slate-500);
  --color-accent-secondary: var(--yellow-500);
  --color-accent-secondary-hover: var(--yellow-600);
  --color-accent-secondary-pressed: var(--yellow-700);
  --color-accent-secondary-edge: var(--yellow-700);
  --color-accent-on-secondary: var(--slate-800);
  --color-accent-secondary-text: var(--yellow-800);
  --color-accent-tertiary: var(--green-500);
  --color-accent-tertiary-strong: var(--green-600);
  --color-accent-on-tertiary: var(--white);
  --color-accent-tertiary-text: var(--green-700);
  --color-focus: var(--slate-800);
  --color-status-critical-text: var(--red-700);
  --color-status-critical-strong: var(--red-700);
  --color-status-warning-text: var(--yellow-800);
  --color-status-safe-text: var(--green-700);
  --color-tag-neutral: var(--slate-600);
}
/* @generated tokens:end */

/* Hand-tuned values with no Figma counterpart */
:root {
  --measure: 68ch;

  /* Button edge. Pick one:
       none:   0
       bottom: 0 0 1px 0   (default — the bevel hint)
       full:   1px                                       */
  --button-edge: 0 0 1px 0;
  --button-height: 40px;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Page frame: header / main / footer, centred, phone-safe gutter */
body > header, body > main, body > footer {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  body > header, body > main, body > footer {
    padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
  }
}
body > main { padding-block: var(--space-5) var(--space-6); }

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: var(--space-5) 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4, h5, h6 { font-size: var(--text-ui); line-height: var(--leading-ui); }
:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 var(--space-3); }
:is(p, ul, ol, dl, blockquote, figure, pre, table):last-child { margin-bottom: 0; }

/* Long-form reading: <article> switches to the serif at body size */
article {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: var(--measure);
}
article :is(p, li, blockquote) { text-wrap: pretty; }
article > header p { color: var(--color-text-secondary); }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 600; }
small { font-size: var(--text-ui-small); color: var(--color-text-secondary); }

hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: var(--space-5) 0; }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-1); }

blockquote {
  margin-inline: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-secondary);
  font-style: italic;
}

dt { font-weight: 600; }
dd { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }

/* Eyebrow / label text: <small class="label"> or a th */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------ */
/* Code                                                               */
/* ------------------------------------------------------------------ */

code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--text-code); }
:not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-sm);
  font-size: 0.88em;
}
pre {
  background: var(--color-bg-sunken);
  color: var(--color-accent-tertiary-text);
  padding: var(--space-3);
  line-height: var(--leading-code);
  overflow-x: auto;
  border-radius: var(--radius-none);
}
pre code { background: none; padding: 0; color: inherit; }
kbd {
  padding: 0.1em 0.4em;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font-size: 0.82em;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/*   <button>                       primary (yellow)                   */
/*   <button class="secondary">     outlined                           */
/*   <button class="ghost">         text only                          */
/*   <button class="tertiary">      green                              */
/*   <button class="danger">        destructive                        */
/*   <a class="button">             a link that looks like a button    */
/* ------------------------------------------------------------------ */

button, .button,
input:is([type="submit"], [type="button"], [type="reset"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-on-secondary);
  background: var(--color-accent-secondary);
  border: solid var(--color-accent-secondary-edge);
  border-width: var(--button-edge);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 80ms ease-out;
}
:is(button, .button, input[type="submit"]):hover { background: var(--color-accent-secondary-hover); }
:is(button, .button, input[type="submit"]):active { background: var(--color-accent-secondary-pressed); }

button.secondary, .button.secondary {
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border-strong);
}
:is(button, .button).secondary:hover { background: var(--color-bg-raised); }
:is(button, .button).secondary:active { background: var(--color-bg-sunken); }

button.ghost, .button.ghost {
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  padding-inline: var(--space-2);
}
:is(button, .button).ghost:hover { background: var(--color-bg-raised); }
:is(button, .button).ghost:active { background: var(--color-bg-sunken); }

button.tertiary, .button.tertiary {
  color: var(--color-accent-on-tertiary);
  background: var(--color-accent-tertiary-strong);
  border-color: var(--green-700);
}
:is(button, .button).tertiary:hover { background: var(--green-700); }
:is(button, .button).tertiary:active { background: #275a21; }

button.danger, .button.danger {
  color: var(--white);
  background: var(--red-600);
  border-color: var(--red-700);
}
:is(button, .button).danger:hover { background: var(--red-700); }
:is(button, .button).danger:active { background: #7f1b1f; }

button.small, .button.small { min-height: 30px; padding-inline: var(--space-2); font-size: var(--text-ui-small); }

button:disabled, .button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Tags — status, not actions. Lighter than buttons on purpose.        */
/*   <span class="tag">neutral</span>                                  */
/*   <span class="tag safe|warn|critical">…</span>                     */
/* ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-ui-small);
  font-weight: 600;
  line-height: 1.5;
  --tag: var(--color-tag-neutral);
  color: var(--tag);
  /* tint over the sunken surface, so it reads the same on page and on cards */
  background: color-mix(in srgb, var(--tag) 15%, var(--color-bg-sunken));
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tag.safe     { --tag: var(--color-status-safe-text); }
.tag.warn     { --tag: var(--color-status-warning-text); }
.tag.critical { --tag: var(--color-status-critical-text); }

mark {
  color: inherit;
  background: color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
  padding: 0 0.15em;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
label + :is(input, select, textarea) { margin-top: 0; }

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"]),
select, textarea {
  display: block;
  width: 100%;
  min-height: var(--button-height);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
textarea { min-height: 7em; resize: vertical; line-height: var(--leading-ui); }
::placeholder { color: var(--color-text-secondary); opacity: 1; }

:is(input, select, textarea):focus-visible { outline-offset: 0; border-color: var(--color-focus); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-status-critical-text); }

select {
  appearance: none;
  padding-right: var(--space-5);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
    linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px;
  margin: 0 var(--space-2) 0 0;
  vertical-align: -3px;
  accent-color: var(--color-accent-secondary);
}
label:has(> input[type="checkbox"], > input[type="radio"]) { font-weight: 400; display: flex; align-items: center; }

/* helper text: <small> right after a field */
:is(input, select, textarea) + small { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
:is(input, select, textarea)[aria-invalid="true"] + small { color: var(--color-status-critical-text); }

fieldset {
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
legend { padding: 0 var(--space-2); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
}
th {
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-border-strong);
  white-space: nowrap;
}
td.num, th.num { text-align: right; }
tbody tr:hover { background: color-mix(in srgb, var(--color-bg-raised) 50%, transparent); }
caption { caption-side: bottom; padding-top: var(--space-2); text-align: left; font-size: var(--text-ui-small); color: var(--color-text-secondary); }

/* wrap wide tables: <figure class="scroll"><table>…</table></figure> */
figure.scroll { overflow-x: auto; margin-inline: 0; }

/* ------------------------------------------------------------------ */
/* Surfaces                                                            */
/* ------------------------------------------------------------------ */

/* A card is just a <section> or <aside> with class="card" */
.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle); /* invisible in dark, defines the edge in light */
  padding: var(--space-4);
  border-radius: var(--radius-none);
  margin-bottom: var(--space-3);
}
.card > :first-child { margin-top: 0; }

details {
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
}
details + details { border-top: 0; margin-top: calc(-1 * var(--space-3)); }
summary { cursor: pointer; font-weight: 600; list-style-position: outside; margin-left: 1em; }
details[open] > summary { margin-bottom: var(--space-2); }

figure { margin-inline: 0; }
figcaption { font-family: var(--font-sans); font-size: var(--text-ui-small); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ------------------------------------------------------------------ */
/* Page chrome                                                         */
/* ------------------------------------------------------------------ */

body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  border-bottom: 1px solid var(--color-border-subtle);
}
nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; }
nav li + li { margin-top: 0; }
nav a { color: var(--color-text-primary); text-decoration: none; font-weight: 600; }
nav a:hover { color: var(--color-text-link); }
nav a[aria-current="page"] { color: var(--color-accent-secondary-text); }

body > footer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-ui-small);
}

/* the wordmark until there is a logo */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Utilities — kept deliberately few                                   */
/* ------------------------------------------------------------------ */

.display { font-family: var(--font-serif); font-weight: var(--weight-display); font-size: clamp(2.25rem, 6vw, var(--text-display)); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.lead { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.5; color: var(--color-text-secondary); }
.muted { color: var(--color-text-secondary); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack > * + * { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}