/* =========================================================================
   Base — reset, fonty, typografie, focus, utility
   ========================================================================= */

/* --- Písma ---------------------------------------------------------------
   Tři role, tři hlasy. Archivo je grotesk s tahem — nese jména věcí (nadpisy,
   lístečky, kontexty). IBM Plex Sans je na čtení dlouhých vět: má vlastní
   tvář a bezvadnou diakritiku. IBM Plex Mono drží jen to, co je opravdu
   údaj — čísla, payloady, časy v logu. Verzálkové popisky mono nejsou,
   jinak by mono nebylo poznat od zbytku.
   ------------------------------------------------------------------------- */

/* Archivo — display */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-500.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-600.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-700.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans — text */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/plex-sans-latin-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/plex-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-sans-latin-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-sans-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono — údaje */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-500.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-600.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* Atribut hidden musí vyhrát nad každým display: flex/grid v komponentách. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                 /* hra si scroll řídí sama uvnitř panelů */
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

canvas { display: block; }

::selection { background: var(--accent-tint); color: var(--fg); }

/* --- Scrollbary ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* --- Focus ----------------------------------------------------------------

   Prstenec je `outline`, ne `box-shadow`, a je to oprava, ne vkus.

   Dokud se kreslil stínem, přebila ho každá komponenta, která si `box-shadow`
   nastaví sama — a to je většina z nich. Specificita je stejná (`.level-card`
   i `:focus-visible` jsou 0,1,0), takže rozhodovalo pořadí souborů: base.css
   se načítá první, komponenty po něm. Karty příběhu na titulce tak neměly
   z klávesnice žádný viditelný fokus a stejně na tom byla tlačítka, lístečky
   i uzly context mapy. O `outline` naopak nikdo nesoupeří, skládá se přes
   stín i přes rámeček a moderní prohlížeče ho vedou po `border-radius`.

   `outline-offset` drží prstenec kousek od prvku, ať je vidět i na tlačítku,
   které samo má světlý okraj. -------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lísteček má vlastní tvar (clip-path uřízne roh), takže by ho outline
   obkroužil i tam, kde papír není. Tady prstenec zůstává stínem — je to
   jediná komponenta, která si ho kreslí sama, a `is-selected` s ním počítá. */
.sticky:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent), var(--shadow-lift);
}

/* --- Typografické utility ------------------------------------------------- */
.mono { font-family: var(--font-mono); font-feature-settings: 'zero' 1; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 999;
  padding: var(--s2) var(--s4);
  background: var(--accent);
  color: var(--bg-0);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Display písmo na jména věcí -----------------------------------------
   Archivo nese nadpisy, jména kontextů a agregátů, popisky na lístečcích
   a text tlačítek. Plex Sans zůstává na věty, které se opravdu čtou.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4,
button,
.sticky-label,
.context-name,
.agg-name,
.term-name,
.modal-title,
.onboarding-title,
.level-card-title,
.db-headline,
.db-section-title,
.node-name {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

/* Verzálkové popisky: Archivo je má užší a hutnější než mono, takže
   snesou méně rozpalu a nerozpadají se na jednotlivá písmena. */
.eyebrow,
.sticky-type,
.metric-label,
.db-metric-label,
.dropzone-action,
.term-cell-context,
.link-group-title,
.inventory-group-title,
.gauge-label,
.confront-role {
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
}