/* Aurochs UI kit 0.1.0 */
/* Inter (variable font), local files. SIL Open Font License, see fonts/Inter-LICENSE.txt.
   Covers Latin, Cyrillic and all Kazakh letters. No Google Fonts, no internet needed. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-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; }

/* Aurochs UI kit - design tokens (kit version 0.1.0, 2026-10-16)
   Plain CSS variables: works in React, plain HTML and Flask templates.
   Light theme = CalfJournal beige and green. Dark theme = new, green-tinted.
   To change a color for ALL apps: edit it here, rebuild the apps (see README.md).
   Every text/background pair below was checked for WCAG AA (see CONTRAST REPORT.txt). */

:root {
  color-scheme: light;
  --au-bg: #f8f6f1;
  --au-fg: #09090b;
  --au-card: #fdfdfc;
  --au-surface-2: #ededde;
  --au-primary: #305f48;
  --au-primary-fg: #f9fbfa;
  --au-primary-hover: #264b39;
  --au-secondary: #e4e4cd;
  --au-secondary-fg: #09090b;
  --au-muted-fg: #51515c;
  --au-border: #545445;
  --au-border-soft: #aaaa92;
  --au-accent: #77b6fe;
  --au-accent-fg: #053061;
  --au-link: #285d43;
  --au-danger: #ad1f1f;
  --au-danger-fg: #ffffff;
  --au-danger-bg: #fce3e3;
  --au-danger-text: #9c1c1c;
  --au-warn-bg: #fcecc5;
  --au-warn-text: #613b05;
  --au-ok-bg: #ddeee6;
  --au-ok-text: #1c4a34;
  --au-info-bg: #d8e9fd;
  --au-info-text: #06356b;
  --au-focus: #0a5bb8;
  --au-shadow: 3px 3px 0 rgba(20, 20, 20, 0.25);
  --au-shadow-strong: 5px 5px 0 rgba(20, 20, 20, 0.30);
}

/* Dark: follows the phone / PC setting unless the user picked a theme by hand */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --au-bg: #121714;
    --au-fg: #f5f1eb;
    --au-card: #1c221f;
    --au-surface-2: #252c29;
    --au-primary: #56b386;
    --au-primary-fg: #0c120f;
    --au-primary-hover: #72c09a;
    --au-secondary: #2f3733;
    --au-secondary-fg: #f5f1eb;
    --au-muted-fg: #c2c2ae;
    --au-border: #a8a894;
    --au-border-soft: #46534c;
    --au-accent: #77b6fe;
    --au-accent-fg: #0c1d31;
    --au-link: #89d2af;
    --au-danger: #e25a5a;
    --au-danger-fg: #141414;
    --au-danger-bg: #391818;
    --au-danger-text: #f99494;
    --au-warn-bg: #392d13;
    --au-warn-text: #f8d377;
    --au-ok-bg: #1b3227;
    --au-ok-text: #97d8b9;
    --au-info-bg: #1a2a3d;
    --au-info-text: #9ec9fa;
    --au-focus: #68aefd;
    --au-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
    --au-shadow-strong: 5px 5px 0 rgba(0, 0, 0, 0.65);
  }
}
/* Dark: chosen by hand with the toggle (the kit sets data-theme on <html>) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --au-bg: #121714;
  --au-fg: #f5f1eb;
  --au-card: #1c221f;
  --au-surface-2: #252c29;
  --au-primary: #56b386;
  --au-primary-fg: #0c120f;
  --au-primary-hover: #72c09a;
  --au-secondary: #2f3733;
  --au-secondary-fg: #f5f1eb;
  --au-muted-fg: #c2c2ae;
  --au-border: #a8a894;
  --au-border-soft: #46534c;
  --au-accent: #77b6fe;
  --au-accent-fg: #0c1d31;
  --au-link: #89d2af;
  --au-danger: #e25a5a;
  --au-danger-fg: #141414;
  --au-danger-bg: #391818;
  --au-danger-text: #f99494;
  --au-warn-bg: #392d13;
  --au-warn-text: #f8d377;
  --au-ok-bg: #1b3227;
  --au-ok-text: #97d8b9;
  --au-info-bg: #1a2a3d;
  --au-info-text: #9ec9fa;
  --au-focus: #68aefd;
  --au-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  --au-shadow-strong: 5px 5px 0 rgba(0, 0, 0, 0.65);
}

/* Things that are the same in both themes */
:root {
  /* Type: Inter (local font file), then system fonts. Sizes in rem so the user's text-size setting works. */
  --au-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --au-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --au-text-xs: 0.8125rem;   /* 13 px - smallest allowed, only for hints */
  --au-text-sm: 0.9375rem;   /* 15 px */
  --au-text-base: 1.0625rem; /* 17 px - body text, readable in sun */
  --au-text-lg: 1.25rem;
  --au-text-xl: 1.5rem;
  --au-text-2xl: 1.875rem;
  --au-text-3xl: 2.25rem;
  --au-leading: 1.5;
  --au-leading-tight: 1.2;
  --au-weight-normal: 400;
  --au-weight-semibold: 600;
  --au-weight-bold: 700;

  /* Spacing: steps of 4 px */
  --au-space-1: 0.25rem;
  --au-space-2: 0.5rem;
  --au-space-3: 0.75rem;
  --au-space-4: 1rem;
  --au-space-5: 1.5rem;
  --au-space-6: 2rem;
  --au-space-7: 3rem;

  /* Shape: square corners and thick borders, as in CalfJournal */
  --au-radius: 0;
  --au-border-width: 2px;
  --au-border-width-thin: 1px;

  /* Touch: users wear gloves. 48 px is the minimum for anything you tap. */
  --au-touch: 3rem;
  --au-touch-lg: 3.5rem;
  --au-focus-ring: 3px;

  --au-content-max: 72rem;
  --au-z-header: 20;
  --au-z-banner: 30;
  --au-z-dialog: 50;
  --au-z-toast: 60;
}

/* Aurochs UI kit - components (kit version 0.1.0). Needs tokens.css + fonts.css.
   Class names start with au-. No fixed widths: text wraps and buttons grow with their label. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.au-body, .au-body {
  margin: 0; background: var(--au-bg); color: var(--au-fg);
  font-family: var(--au-font); font-size: var(--au-text-base); line-height: var(--au-leading);
  -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
}
.au-body h1, .au-body h2, .au-body h3 { line-height: var(--au-leading-tight); margin: 0 0 var(--au-space-3); font-weight: var(--au-weight-bold); }
.au-body h1 { font-size: var(--au-text-2xl); } .au-body h2 { font-size: var(--au-text-xl); } .au-body h3 { font-size: var(--au-text-lg); }
.au-body p { margin: 0 0 var(--au-space-3); }
.au-body a { color: var(--au-link); text-underline-offset: 3px; }
.au-muted { color: var(--au-muted-fg); font-size: var(--au-text-sm); }
.au-container { width: 100%; max-width: var(--au-content-max); margin: 0 auto; padding: 0 var(--au-space-4); }
.au-stack > * + * { margin-top: var(--au-space-4); }
.au-row { display: flex; flex-wrap: wrap; gap: var(--au-space-3); align-items: center; }
.au-grid { display: grid; gap: var(--au-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.au-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: a clear ring on everything you can tap or tab to */
.au-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--au-focus-ring) solid var(--au-focus); outline-offset: 2px;
}

/* ---------- Header ---------- */
.au-header { position: sticky; top: 0; z-index: var(--au-z-header); background: var(--au-card);
  border-bottom: var(--au-border-width) solid var(--au-border); }
.au-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--au-space-3);
  padding: var(--au-space-2) var(--au-space-4); max-width: var(--au-content-max); margin: 0 auto; }
.au-logo { display: inline-flex; align-items: center; background: #fff; border: var(--au-border-width-thin) solid var(--au-border-soft); padding: var(--au-space-1) var(--au-space-2); }
.au-logo img { display: block; height: 3.25rem; width: auto; }
.au-header__title { font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); margin: 0; flex: 1 1 8rem; min-width: 0; }
.au-header__tools { display: flex; flex-wrap: wrap; gap: var(--au-space-2); align-items: center; margin-left: auto; }

/* ---------- Buttons ---------- */
.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--au-space-2);
  min-height: var(--au-touch); padding: var(--au-space-2) var(--au-space-5); text-align: center;
  font: inherit; font-weight: var(--au-weight-semibold); line-height: var(--au-leading-tight);
  background: var(--au-primary); color: var(--au-primary-fg);
  border: var(--au-border-width) solid var(--au-border); border-radius: var(--au-radius);
  box-shadow: var(--au-shadow); cursor: pointer; text-decoration: none; user-select: none; }
.au-btn:hover { background: var(--au-primary-hover); }
.au-btn:active { box-shadow: none; transform: translate(3px, 3px); }
.au-btn[disabled], .au-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.au-btn--secondary { background: var(--au-secondary); color: var(--au-secondary-fg); }
.au-btn--secondary:hover { background: var(--au-surface-2); }
.au-btn--ghost { background: transparent; color: var(--au-fg); box-shadow: none; border-color: transparent; }
.au-btn--ghost:hover { background: var(--au-secondary); }
.au-btn--danger { background: var(--au-danger); color: var(--au-danger-fg); }
.au-btn--danger:hover { filter: brightness(.9); }
.au-btn--large { min-height: var(--au-touch-lg); font-size: var(--au-text-lg); padding-inline: var(--au-space-6); }
.au-btn--block { display: flex; width: 100%; }
.au-btn--icon { padding-inline: var(--au-space-3); min-width: var(--au-touch); }

/* ---------- Form fields ---------- */
.au-field { display: flex; flex-direction: column; gap: var(--au-space-1); }
.au-label { font-weight: var(--au-weight-semibold); }
.au-hint { color: var(--au-muted-fg); font-size: var(--au-text-sm); }
.au-error-text { color: var(--au-danger-text); font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); }
.au-input, .au-select, .au-textarea {
  width: 100%; min-height: var(--au-touch); padding: var(--au-space-2) var(--au-space-3);
  font: inherit; color: var(--au-fg); background: var(--au-card);
  border: var(--au-border-width) solid var(--au-border); border-radius: var(--au-radius); }
.au-textarea { min-height: 6rem; resize: vertical; }
.au-select { appearance: none; padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.au-input::placeholder, .au-textarea::placeholder { color: var(--au-muted-fg); opacity: 1; }
.au-input[aria-invalid="true"], .au-select[aria-invalid="true"], .au-textarea[aria-invalid="true"] { border-color: var(--au-danger); border-width: 3px; }
.au-check { display: flex; align-items: center; gap: var(--au-space-3); min-height: var(--au-touch); cursor: pointer; }
.au-check input { width: 1.75rem; height: 1.75rem; flex: none; accent-color: var(--au-primary); }

/* ---------- Card ---------- */
.au-card { background: var(--au-card); color: var(--au-fg); border: var(--au-border-width) solid var(--au-border);
  border-radius: var(--au-radius); box-shadow: var(--au-shadow); padding: var(--au-space-4); }
.au-card__title { margin: 0 0 var(--au-space-2); font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); }
a.au-card, .au-card--link { display: block; text-decoration: none; color: inherit; }
a.au-card:hover { background: var(--au-surface-2); }

/* ---------- Tabs ---------- */
.au-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--au-border-width) solid var(--au-border); }
.au-tab { flex: 1 1 auto; min-height: var(--au-touch); padding: var(--au-space-2) var(--au-space-4);
  font: inherit; font-weight: var(--au-weight-semibold); color: var(--au-fg); background: var(--au-secondary);
  border: var(--au-border-width) solid var(--au-border); border-bottom: 0; margin-bottom: -2px; cursor: pointer; text-align: center; }
.au-tab + .au-tab { border-left: 0; }
.au-tab[aria-selected="true"] { background: var(--au-card); box-shadow: inset 0 4px 0 var(--au-primary); }
.au-tabpanel { padding: var(--au-space-4) 0; }
.au-tabpanel[hidden] { display: none; }

/* ---------- Table (scrolls sideways inside its box on a phone) ---------- */
.au-table-wrap { overflow-x: auto; border: var(--au-border-width) solid var(--au-border); background: var(--au-card); }
.au-table { width: 100%; border-collapse: collapse; font-size: var(--au-text-sm); }
.au-table caption { text-align: start; padding: var(--au-space-2) var(--au-space-3); font-weight: var(--au-weight-bold); }
.au-table th, .au-table td { padding: var(--au-space-3); text-align: start; border-bottom: var(--au-border-width-thin) solid var(--au-border-soft); vertical-align: top; }
.au-table thead th { background: var(--au-secondary); color: var(--au-secondary-fg); border-bottom: var(--au-border-width) solid var(--au-border); white-space: nowrap; }
.au-table tbody tr:nth-child(even) { background: var(--au-surface-2); }
.au-table .au-num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Dialog (uses the native <dialog>) ---------- */
.au-dialog { width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; padding: var(--au-space-5);
  background: var(--au-card); color: var(--au-fg); border: var(--au-border-width) solid var(--au-border); border-radius: var(--au-radius); box-shadow: var(--au-shadow-strong); }
.au-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.au-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--au-space-3); margin-top: var(--au-space-5); }

/* ---------- Toasts and message boxes ---------- */
.au-toasts { position: fixed; z-index: var(--au-z-toast); inset-inline: var(--au-space-4); bottom: var(--au-space-4);
  display: flex; flex-direction: column; gap: var(--au-space-2); align-items: center; pointer-events: none; }
.au-toast { pointer-events: auto; width: min(32rem, 100%); display: flex; gap: var(--au-space-3); align-items: flex-start; justify-content: space-between; }
.au-msg { padding: var(--au-space-3) var(--au-space-4); border: var(--au-border-width) solid currentColor; border-radius: var(--au-radius); font-weight: var(--au-weight-semibold); background: var(--au-info-bg); color: var(--au-info-text); }
.au-msg--ok { background: var(--au-ok-bg); color: var(--au-ok-text); }
.au-msg--warn { background: var(--au-warn-bg); color: var(--au-warn-text); }
.au-msg--error { background: var(--au-danger-bg); color: var(--au-danger-text); }
.au-msg .au-btn { color: inherit; }

/* ---------- Message banner (set by Jake from the server: maintenance, news, adverts) ---------- */
.au-banner { display: flex; flex-wrap: wrap; gap: var(--au-space-3); align-items: center; justify-content: space-between;
  padding: var(--au-space-3) var(--au-space-4); background: var(--au-warn-bg); color: var(--au-warn-text); border-bottom: var(--au-border-width) solid currentColor; }
.au-banner[hidden] { display: none; }
.au-banner--news { background: var(--au-info-bg); color: var(--au-info-text); }
.au-banner__text { flex: 1 1 14rem; margin: 0; font-weight: var(--au-weight-semibold); }
.au-banner .au-btn { color: inherit; border-color: currentColor; }

/* ---------- Language switch (buttons: en, ru, kk; add more by adding a button) ---------- */
.au-lang { display: inline-flex; border: var(--au-border-width) solid var(--au-border); background: var(--au-card); }
.au-lang button { min-height: var(--au-touch); min-width: var(--au-touch); padding: 0 var(--au-space-3); font: inherit; font-weight: var(--au-weight-semibold);
  background: transparent; color: var(--au-fg); border: 0; cursor: pointer; text-transform: uppercase; }
.au-lang button + button { border-inline-start: var(--au-border-width-thin) solid var(--au-border); }
.au-lang button[aria-pressed="true"] { background: var(--au-primary); color: var(--au-primary-fg); }

/* ---------- Theme toggle (round-cornered not allowed: square like the rest) ---------- */
.au-theme-toggle { min-height: var(--au-touch); min-width: var(--au-touch); font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
  background: var(--au-card); color: var(--au-fg); border: var(--au-border-width) solid var(--au-border); border-radius: var(--au-radius); }

/* ---------- Online / offline badge (text AND a shape, never color alone) ---------- */
.au-status { display: inline-flex; align-items: center; gap: var(--au-space-2); min-height: 2rem; padding: 0 var(--au-space-3);
  font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); border: var(--au-border-width) solid currentColor; background: var(--au-ok-bg); color: var(--au-ok-text); }
.au-status::before { content: ""; width: .7rem; height: .7rem; background: currentColor; border-radius: 50%; }
.au-status--offline { background: var(--au-warn-bg); color: var(--au-warn-text); }
.au-status--offline::before { border-radius: 0; }

/* ---------- Install to home screen hint ---------- */
.au-install { display: flex; flex-wrap: wrap; gap: var(--au-space-3); align-items: center; justify-content: space-between;
  padding: var(--au-space-3) var(--au-space-4); background: var(--au-secondary); color: var(--au-secondary-fg); border: var(--au-border-width) dashed var(--au-border); }
.au-install[hidden] { display: none; }
.au-install__text { flex: 1 1 14rem; margin: 0; }

/* ---------- Footer ---------- */
.au-footer { margin-top: var(--au-space-7); padding: var(--au-space-5) var(--au-space-4); text-align: center;
  background: var(--au-card); color: var(--au-fg); border-top: var(--au-border-width) solid var(--au-border); font-size: var(--au-text-sm); }
.au-footer__links { display: flex; flex-wrap: wrap; gap: var(--au-space-4); justify-content: center; margin-top: var(--au-space-2); }

/* ---------- Print: plain, dark text on white ---------- */
@media print {
  .au-header, .au-footer, .au-banner, .au-install, .au-toasts, .au-btn, .au-lang, .au-theme-toggle { display: none !important; }
  .au-body { background: #fff; color: #000; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .au-btn:active { transform: none; } * { scroll-behavior: auto !important; } }