/* AE Core dizaino sistema — pagrindas (AE Core 4.0, 05 §5.4–§5.7, §5.9; darbas A-46).
 *
 * Įkeliama po tokens.css:  <link rel="stylesheet" href="/ds/tokens.css">
 *                          <link rel="stylesheet" href="/ds/base.css">
 *                          <link rel="stylesheet" href="/ds/components.css">
 *
 * Elementų taisyklės (body, antraštės, fokusas, judesys) galioja tik naujai sąsajai:
 * `:where(:root:not([data-ui="3"]))` — centras, vieša svetainė, testai ir programa su
 * `data-ui="4"`. Senoji tamsi sąsaja (`data-ui="3"`) nekeičiama (05 §12 U1).
 * `:where()` palieka elemento lygio specifiškumą, todėl `.ae-*` klasės visada viršesnės.
 * Klasės `.ae-*` ir spalvų neturinčios pagalbinės klasės (`.ae-mt-*`, `.ae-row` …)
 * veikia visur — jomis keičiami `style="…"` atributai (05 §4.2, CSP).
 * Spalvos — tik tokenai; jokių gradientų, švytėjimo ir šešėlių (p.17).
 */

/* ------------------------------------------------------------ dokumentas */
:where(:root:not([data-ui="3"])) {
  color-scheme: light;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Fokusas niekada neuždengiamas lipnios viršutinės ar apatinės juostos (05 §5.7). */
  scroll-padding-top: var(--layout-topbar);
  scroll-padding-bottom: calc(var(--layout-tabbar) + env(safe-area-inset-bottom, 0px));
}

:where(:root:not([data-ui="3"])) *,
:where(:root:not([data-ui="3"])) *::before,
:where(:root:not([data-ui="3"])) *::after {
  box-sizing: border-box;
}

:where(:root:not([data-ui="3"])) body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(:root:not([data-ui="3"])) :is(h1, h2, h3, h4) {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
:where(:root:not([data-ui="3"])) h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
:where(:root:not([data-ui="3"])) h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
:where(:root:not([data-ui="3"])) h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
:where(:root:not([data-ui="3"])) h4 { font-size: var(--text-lg); line-height: var(--lh-lg); }
:where(:root:not([data-ui="3"])) p { margin: 0 0 var(--space-3); }
:where(:root:not([data-ui="3"])) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(:root:not([data-ui="3"])) img,
:where(:root:not([data-ui="3"])) svg,
:where(:root:not([data-ui="3"])) video { max-width: 100%; }
:where(:root:not([data-ui="3"])) img { height: auto; }
:where(:root:not([data-ui="3"])) :is(code, kbd, samp) { font-family: var(--font-mono); font-size: var(--text-sm); }
:where(:root:not([data-ui="3"])) :is(time, td, th) { font-variant-numeric: tabular-nums; }
:where(:root:not([data-ui="3"])) a { color: inherit; }
:where(:root:not([data-ui="3"])) hr { border: 0; border-top: 1px solid var(--color-border-decor); margin: var(--space-6) 0; }

/* Vaizdo paviršius: tie patys tokenai, tamsios reikšmės (tokens.css). */
[data-surface="video"] {
  color-scheme: dark;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ------------------------------------------------------- fokusas (05 §5.7) */
:where(:root:not([data-ui="3"])) :focus { outline: none; }
:where(:root:not([data-ui="3"])) :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-offset), 0 0 0 4px var(--color-focus);
}
/* Senoji sąsaja: naujos klasės vis tiek turi matomą fokusą. */
.ae-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-offset), 0 0 0 4px var(--color-focus);
}

/* --------------------------------------------------- piktogramos (05 §5.9) */
.ae-icon {
  display: inline-block;
  width: var(--icon);
  height: var(--icon);
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ae-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* -------------------------------------------------------- pagalbinės */
[hidden] { display: none !important; }

.ae-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* „Pereiti prie turinio“ — matoma tik gavus fokusą (05 §5.7). */
.ae-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.ae-skip:focus,
.ae-skip:focus-visible {
  transform: none;
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-offset), 0 0 0 4px var(--color-focus);
}

/* Be animacijos (05 §5.6): vaizdo overlay, seek, kritinis banner, STOP, aliarmo laikas. */
.ae-instant,
.ae-instant * {
  transition: none !important;
  animation: none !important;
}

.ae-num,
.ae-tabular { font-variant-numeric: tabular-nums; }

/* Spalvų neturinčios išdėstymo klasės (vietoj style="…", 05 §4.2) — veikia ir data-ui="3". */
.ae-m-0 { margin: 0; }
.ae-mt-0 { margin-top: 0; }
.ae-mt-1 { margin-top: var(--space-1); }
.ae-mt-2 { margin-top: var(--space-2); }
.ae-mt-3 { margin-top: var(--space-3); }
.ae-mt-4 { margin-top: var(--space-4); }
.ae-mt-6 { margin-top: var(--space-6); }
.ae-mb-0 { margin-bottom: 0; }
.ae-mb-2 { margin-bottom: var(--space-2); }
.ae-mb-4 { margin-bottom: var(--space-4); }
.ae-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ae-row--end { align-items: flex-end; }
.ae-row--nowrap { flex-wrap: nowrap; }
.ae-row--between { justify-content: space-between; }
.ae-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ae-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ae-fill { flex: 1 1 auto; min-height: 0; min-width: 0; }
.ae-scroll { overflow: auto; }
.ae-pad { padding: var(--space-3); }
.ae-w-full { width: 100%; }
.ae-h-full { height: 100%; }
.ae-text-xs { font-size: var(--text-xs); line-height: var(--lh-xs); }
.ae-text-sm { font-size: var(--text-sm); line-height: var(--lh-sm); }
.ae-hint { font-size: var(--text-xs); line-height: var(--lh-xs); }
:where(:root:not([data-ui="3"])) .ae-hint,
:where(:root:not([data-ui="3"])) .ae-muted { color: var(--color-text-muted); }

/* -------------------------------------------------- judesys (05 §5.6, UX405) */
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-ui="3"])) { scroll-behavior: auto; }
  :where(:root:not([data-ui="3"])) *,
  :where(:root:not([data-ui="3"])) *::before,
  :where(:root:not([data-ui="3"])) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------- liečiami tikslai ≥ 44 px (p.20, UX406) */
@media (pointer: coarse) {
  :where(:root:not([data-ui="3"])) :is(button, [role="button"], select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) {
    min-height: var(--touch-min);
  }
}