/* foundations.css — the shared foundations of every MMG system.
   What is here is the same in every system: design tokens, and one considered style for the
   plain building blocks (text, links, buttons, form fields, tables), plus the two elements that
   carry fixed behaviour rules (.status and .notice). There are no page layouts and no composed
   components: those are designed per system, in that system's ui/system.css, from these tokens.
   Serve this file unchanged. Reference sheet: ui-reference/foundations.html in mmg-kit. */

/* ---------- font: Golos Text (SIL OFL 1.1, see fonts/OFL.txt), self-hosted ---------- */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/golos-text-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/golos-text-latin-400-normal.woff2) format("woff2");
  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: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/golos-text-latin-500-normal.woff2) format("woff2");
  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: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/golos-text-latin-600-normal.woff2) format("woff2");
  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; }

/* ---------- tokens ---------- */
:root {
  /* type: minor-third scale on a 15px body */
  --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-md: 0.9375rem;  /* 15px, body */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* neutrals: cool graphite */
  --gray-0: #ffffff;
  --gray-25: #f8f9fb;
  --gray-50: #f1f3f6;
  --gray-100: #e6e9ee;
  --gray-200: #d3d8e0;
  --gray-400: #8a94a3;
  --gray-500: #616b7b;
  --gray-700: #3b4351;
  --gray-900: #1b1f27;

  --bg-canvas: var(--gray-50);     /* page background */
  --bg-surface: var(--gray-0);     /* panels, tables, inputs */
  --bg-subtle: var(--gray-25);     /* table header, hover */
  --border-soft: var(--gray-100);  /* row dividers */
  --border: var(--gray-200);       /* panel edges */
  --border-input: var(--gray-400); /* form controls: 3:1 against white */
  --text: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);   /* 4.67:1 or more on every background, tinted rows included */

  /* accent: one per system, chosen in Shape with data-accent on <html>; petrol is the default */
  --accent: #0d6577;
  --accent-strong: #094e5c;
  --accent-soft: #e3f1f3;
  --accent-ink: #ffffff;

  /* status: fixed meaning in every system; never shown by colour alone */
  --ok: #1d7447;      --ok-soft: #e5f3ea;      --ok-border: #a9d8bc;
  --warn: #9a4b05;    --warn-soft: #fff0dc;    --warn-border: #f2c27e;
  --bad: #b1261c;     --bad-soft: #fcebe9;     --bad-border: #f0b4ae;   --bad-strong: #8e1d15;
  --neutral: #586272; --neutral-soft: #eef0f3; --neutral-border: #d3d8e0;

  /* space: 4px steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* shape: three radii, by size of the thing */
  --radius-sm: 4px;   /* tags, code */
  --radius-md: 6px;   /* buttons, fields, notices */
  --radius-lg: 10px;  /* panels, dialogs */

  /* depth: cool-tinted, three levels */
  --shadow-1: 0 1px 2px rgb(18 26 40 / 0.06), 0 1px 3px rgb(18 26 40 / 0.04);
  --shadow-2: 0 4px 12px rgb(18 26 40 / 0.08), 0 1px 3px rgb(18 26 40 / 0.06);
  --shadow-3: 0 16px 40px rgb(18 26 40 / 0.16), 0 2px 6px rgb(18 26 40 / 0.08);

  /* motion: short, and only in answer to an action */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* density: regular by default; data-density="compact" or "comfortable" on <html> or any container */
  --control-h: 36px;
  --control-px: 12px;
  --cell-py: 9px;
  --cell-px: 12px;
  --table-text: var(--text-md);

  --page-max: 1280px;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-dialog: 1000;
  --z-toast: 1100;
}

[data-accent="petrol"]   { --accent: #0d6577; --accent-strong: #094e5c; --accent-soft: #e3f1f3; }
[data-accent="ink"]      { --accent: #2f43a0; --accent-strong: #233381; --accent-soft: #e8ebf8; }
[data-accent="plum"]     { --accent: #7a3b8f; --accent-strong: #612e72; --accent-soft: #f3e9f6; }
[data-accent="graphite"] { --accent: #3b4351; --accent-strong: #262c36; --accent-soft: #eceef2; }

[data-density="compact"]     { --control-h: 30px; --control-px: 10px; --cell-py: 5px;  --cell-px: 10px; --table-text: var(--text-sm); }
[data-density="comfortable"] { --control-h: 40px; --control-px: 14px; --cell-py: 12px; --cell-px: 14px; --table-text: var(--text-md); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--text); }
h1 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-3); max-width: 75ch; }
small { font-size: var(--text-sm); }
strong, b { font-weight: var(--weight-semibold); }

/* links sit in :where() too, so a link styled as a button (.btn) takes the button's look */
:where(a) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:where(a):hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
}

hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-5) 0; }
::selection { background: var(--accent-soft); }

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

/* ---------- buttons ---------- */
/* Base styles sit in :where() (no specificity), so every variant below overrides them cleanly. */
:where(button, .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--control-px);
  font: inherit; font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
:where(button, .btn):hover { background: var(--bg-subtle); border-color: var(--border-input); color: var(--text); }
:where(button, .btn):active { background: var(--gray-50); box-shadow: none; }

.btn--primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.btn--primary:hover, .btn--primary:active { color: var(--accent-ink); background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--danger { color: #fff; background: var(--bad); border-color: var(--bad); }
.btn--danger:hover, .btn--danger:active { color: #fff; background: var(--bad-strong); border-color: var(--bad-strong); }
.btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.btn--quiet:hover, .btn--quiet:active { background: var(--gray-50); border-color: transparent; color: var(--text); }
.btn--sm { height: calc(var(--control-h) - 6px); padding: 0 calc(var(--control-px) - 2px); font-size: var(--text-sm); }

button:disabled, button:disabled:hover, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
  color: var(--text-muted); background: var(--gray-50); border-color: var(--border-soft); box-shadow: none; cursor: not-allowed;
}

/* busy: aria-busy="true" while the action runs; the label stays, a spinner leads it */
button[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::before, .btn[aria-busy="true"]::before {
  content: ""; width: 0.9em; height: 0.9em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: mmg-spin 700ms linear infinite;
}
@keyframes mmg-spin { to { transform: rotate(360deg); } }

/* ---------- form fields ---------- */
label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }

input:where(:not([type]), [type="text"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]),
select, textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--control-px);
  font: inherit; color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { height: auto; min-height: 88px; padding: var(--space-2) var(--control-px); resize: vertical; line-height: var(--leading-normal); }
select {
  appearance: none;
  padding-right: calc(var(--control-px) + 20px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23616b7b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--control-px) center;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

input:where(:not([type]), [type="text"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]):hover,
select:hover, textarea:hover { border-color: var(--text-muted); }

input:where(:not([type]), [type="text"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]):focus,
select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

[aria-invalid="true"] { border-color: var(--bad) !important; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bad-soft) !important; }

input:disabled, select:disabled, textarea:disabled { color: var(--text-muted); background: var(--gray-50); border-color: var(--border); cursor: not-allowed; }

input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); vertical-align: -3px; }

/* a field: label, control, then a hint or an error */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__error { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--bad); }
.req { color: var(--bad); margin-left: 2px; text-decoration: none; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--text); }

fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }
legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--table-text); font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
th, td { padding: var(--cell-py) var(--cell-px); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-soft); }
thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
tbody tr:not([data-state]):hover td { background: var(--bg-subtle); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: var(--weight-semibold); border-top: 1px solid var(--border); border-bottom: 0; }

th.num, td.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* row state: tint plus an edge; the row also carries a .status with the word */
tr[data-state="bad"] td  { background: var(--bad-soft); }
tr[data-state="warn"] td { background: var(--warn-soft); }
tr[data-state="bad"] td:first-child  { box-shadow: inset 3px 0 0 var(--bad); }
tr[data-state="warn"] td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ---------- status: colour + symbol + word, the same meaning in every system ---------- */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px 1px 6px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.5; white-space: nowrap;
  color: var(--neutral); background: var(--neutral-soft);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-sm);
}
.status::before { content: "–"; font-weight: var(--weight-semibold); }
.status[data-state="ok"]   { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-border); }
.status[data-state="ok"]::before   { content: "✓"; }
.status[data-state="warn"] { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.status[data-state="warn"]::before { content: "!"; }
.status[data-state="bad"]  { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-border); }
.status[data-state="bad"]::before  { content: "✕"; }

/* ---------- notice: what happened after an action, or why it was refused ---------- */
.notice {
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--neutral-soft);
  border: 1px solid var(--neutral-border);
  border-left: 3px solid var(--neutral);
  border-radius: var(--radius-md);
}
.notice[data-state="ok"]   { background: var(--ok-soft);   border-color: var(--ok-border);   border-left-color: var(--ok); }
.notice[data-state="warn"] { background: var(--warn-soft); border-color: var(--warn-border); border-left-color: var(--warn); }
.notice[data-state="bad"]  { background: var(--bad-soft);  border-color: var(--bad-border);  border-left-color: var(--bad); }
.notice > strong:first-child { margin-right: var(--space-1); }

/* ---------- utilities ---------- */
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- print: black on white, controls out, rows whole ---------- */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .no-print, button, .btn { display: none !important; }
  a { color: #000; text-decoration: none; }
  .table-wrap { overflow: visible; border: 0; }
  thead { display: table-header-group; }
  thead th { position: static; color: #000; background: #fff; border-bottom: 1px solid #000; }
  th, td { border-bottom: 1px solid #999; }
  tr { break-inside: avoid; }
  tr[data-state] td { background: #fff; }
  tr[data-state="bad"] td:first-child, tr[data-state="warn"] td:first-child { box-shadow: inset 3px 0 0 #000; }
  .status, .status[data-state] { color: #000; background: #fff; border-color: #000; }
  .notice, .notice[data-state] { background: #fff; border-color: #000; color: #000; }
  input, select, textarea { border-color: #999; background: #fff; color: #000; }
  label, .muted, caption, .field__hint, .field__error, .req, .text-muted { color: #000; }
  code, kbd { background: #fff; border-color: #999; }
  ::selection { background: none; }
}