/* ============================================================================
   DAGÓ 2.0 — base.css · alapok, tipográfia, űrlapelemek
   NINCS `/styles.css` a v2-ben. A közös lap teszi minden <input>-ot 46 px-es,
   teljes szélességű szövegmezővé — EZ TÖRTE EL KÉTSZER a promó-rádiókat
   (PROGRESS.md 570) —, és ő okozza a `body.platform-admin` specificitás-csapdát is.
   Itt a panel a saját dokumentumát birtokolja.
   ========================================================================== */
@layer base {

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);          /* kötelező: a felület sosem örököl hátteret */
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-card); }
p { margin: 0; }

a { color: var(--fn-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Számok mindenhol egyforma szélesek — táblázatban, KPI-ban, diagramon. */
.num, td.num, th.num, .tabnum { font-variant-numeric: tabular-nums; }

code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .92em; }

/* Kis nagybetűs címke — az oldal funkciószínével, a H1 fölött. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fn-ink);
}


/* ── Fókusz: EGY szabály az egész panelre ─────────────────────────────────────
   A gyűrű az oldal funkciószínét veszi fel, tehát a szín itt is funkciót azonosít.
   Minden --fn-ink érték ≥5,6:1, vagyis mérten átmegy a 3:1-es UI-követelményen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fn-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── Görgetés ───────────────────────────────────────────────────────────────── */
:where(.scroll-x) { overflow-x: auto; overscroll-behavior-x: contain; }

/* ── Mozgás ──────────────────────────────────────────────────────────────────
   Kevés, gyors, kiszámítható. Nincs parallax, nincs pulzáló ragyogás — egyetlen
   kivétel az „élőben” pötty, mert ott a mozgás maga az információ. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Ikonok — helyi SVG-készlet, nem webfont ────────────────────────────────── */
.i {
  display: block;
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

}

@layer utilities {

.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* A `.hidden` az UTOLSÓ rétegben van, ezért `!important` nélkül is ver mindent,
   ami korábbi rétegben állítja a `display`-t (pl. a `.shell` rácsát 760 px fölött).
   Ez a @layer értelme — a specificitás-verseny helyett sorrend. */
.hidden { display: none; }

}